1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
import { describe, expect, it } from '@jest/globals';
import { render, screen as rtlScreen } from '../../../../tests/utils';
import type { BreadcrumbsItem } from '../../organisms';
import { Page } from './page';
import { PageBody } from './page-body';
import { PageSection } from './page-section';
import { Heading } from 'src/components/atoms';
describe('Page', () => {
it('renders its children', () => {
const body =
'Consequatur deleniti eligendi quidem sint et nobis ut qui. Dolores modi eos. Cupiditate aliquid sunt consequatur voluptatem laudantium.';
render(
<Page>
<PageBody>{body}</PageBody>
</Page>
);
expect(rtlScreen.getByText(body)).toBeInTheDocument();
});
it('can render the breadcrumbs', () => {
const body =
'Consequatur deleniti eligendi quidem sint et nobis ut qui. Dolores modi eos. Cupiditate aliquid sunt consequatur voluptatem laudantium.';
const breadcrumbs = [
{ id: 'home', label: 'Home', slug: '#home' },
{ id: 'blog', label: 'Blog', slug: '#blog' },
] satisfies BreadcrumbsItem[];
render(
<Page breadcrumbs={breadcrumbs}>
<PageBody>{body}</PageBody>
</Page>
);
expect(rtlScreen.getByRole('navigation')).toHaveAccessibleName(
'Breadcrumbs'
);
expect(rtlScreen.getAllByRole('listitem')).toHaveLength(breadcrumbs.length);
});
it('can have a class modifier based on a prop', () => {
const body =
'Consequatur deleniti eligendi quidem sint et nobis ut qui. Dolores modi eos. Cupiditate aliquid sunt consequatur voluptatem laudantium.';
render(<Page isBodyLastChild>{body}</Page>);
expect(rtlScreen.getByText(body)).toHaveClass('page--body-last');
});
it('can render a sectioned page', () => {
const sections = [
{
heading: 'excepturi ex dolorum',
contents:
'Id eius voluptas rerum nemo ullam omnis provident deserunt. Expedita sit ut consequatur deleniti. Maiores nam. Necessitatibus pariatur et qui dolor quia labore.',
},
{
heading: 'rerum corporis et',
contents:
'Vel maxime doloremque quo laborum debitis. Ab perferendis animi dolores et ut voluptatem. Tempore aut doloremque sunt enim aut sint. Quae iure saepe consectetur. Ex animi ut. Nobis aliquid iste accusantium nesciunt ab voluptas illum.',
},
];
render(
<Page hasSections>
{sections.map((section) => (
<PageSection aria-label={section.heading} key={section.heading}>
<Heading level={2}>{section.heading}</Heading>
<p>{section.contents}</p>
</PageSection>
))}
</Page>
);
expect(rtlScreen.getAllByRole('region')).toHaveLength(sections.length);
expect(rtlScreen.getByRole('article')).toHaveClass('page--full');
});
});
|
