Skip to content

Commit 4454d07

Browse files
colinrotherhamcolinrotherham
committed
Add simple snapshot tests for new types
1 parent 5f8d8e7 commit 4454d07

File tree

9 files changed

+1149
-479
lines changed

9 files changed

+1149
-479
lines changed

‎src/components/form-elements/checkboxes/__tests__/Checkboxes.test.tsx‎

Lines changed: 74 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { render } from '@testing-library/react';
21
import { createRef } from 'react';
32

43
import { Checkboxes } from '..';
@@ -8,7 +7,13 @@ import { renderClient, renderServer } from '#util/components';
87
describe('Checkboxes', () => {
98
it('matches snapshot', async () => {
109
const { container } = await renderClient(
11-
<Checkboxes id="example" name="example">
10+
<Checkboxes
11+
legend="What types of waste do you transport regularly?"
12+
legendProps={{ size: 'l' }}
13+
hint="Select all that apply"
14+
id="example"
15+
name="example"
16+
>
1217
<Checkboxes.Item value="animal">Waste from animal carcasses</Checkboxes.Item>
1318
<Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
1419
<Checkboxes.Item value="farm">Farm or agricultural waste</Checkboxes.Item>
@@ -21,7 +26,59 @@ describe('Checkboxes', () => {
2126

2227
it('matches snapshot with error message', async () => {
2328
const { container } = await renderClient(
24-
<Checkboxes id="example" name="example" error="Example error">
29+
<Checkboxes
30+
legend="What types of waste do you transport regularly?"
31+
legendProps={{ size: 'l' }}
32+
hint="Select all that apply"
33+
error="Example error"
34+
id="example"
35+
name="example"
36+
>
37+
<Checkboxes.Item value="animal">Waste from animal carcasses</Checkboxes.Item>
38+
<Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
39+
<Checkboxes.Item value="farm">Farm or agricultural waste</Checkboxes.Item>
40+
</Checkboxes>,
41+
{ moduleName: 'nhsuk-checkboxes' },
42+
);
43+
44+
expect(container).toMatchSnapshot();
45+
});
46+
47+
it('matches snapshot with HTML in props', async () => {
48+
const { container } = await renderClient(
49+
<Checkboxes
50+
legend={
51+
<>
52+
<span className="nhsuk-caption-l">Example</span> Legend text
53+
</>
54+
}
55+
legendProps={{
56+
isPageHeading: true,
57+
size: 'l',
58+
}}
59+
hint={
60+
<>
61+
Hint text <em>with HTML</em>
62+
</>
63+
}
64+
error={
65+
<>
66+
Error text <em>with HTML</em>
67+
</>
68+
}
69+
id="example"
70+
name="example"
71+
>
72+
<Checkboxes.Item
73+
value="animal"
74+
hint={
75+
<>
76+
Item hint text <em>with HTML</em>
77+
</>
78+
}
79+
>
80+
Waste from animal carcasses
81+
</Checkboxes.Item>
2582
<Checkboxes.Item value="animal">Waste from animal carcasses</Checkboxes.Item>
2683
<Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
2784
<Checkboxes.Item value="farm">Farm or agricultural waste</Checkboxes.Item>
@@ -34,7 +91,13 @@ describe('Checkboxes', () => {
3491

3592
it('matches snapshot with an exclusive checkbox', async () => {
3693
const { container } = await renderClient(
37-
<Checkboxes id="example" name="example">
94+
<Checkboxes
95+
legend="What types of waste do you transport regularly?"
96+
legendProps={{ size: 'l' }}
97+
hint="Select all that apply"
98+
id="example"
99+
name="example"
100+
>
38101
<Checkboxes.Item value="animal">Waste from animal carcasses</Checkboxes.Item>
39102
<Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
40103
<Checkboxes.Item value="farm">Farm or agricultural waste</Checkboxes.Item>
@@ -51,7 +114,13 @@ describe('Checkboxes', () => {
51114

52115
it('matches snapshot (via server)', async () => {
53116
const { container, element } = await renderServer(
54-
<Checkboxes id="example" name="example">
117+
<Checkboxes
118+
legend="What types of waste do you transport regularly?"
119+
legendProps={{ size: 'l' }}
120+
hint="Select all that apply"
121+
id="example"
122+
name="example"
123+
>
55124
<Checkboxes.Item value="animal">Waste from animal carcasses</Checkboxes.Item>
56125
<Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
57126
<Checkboxes.Item value="farm">Farm or agricultural waste</Checkboxes.Item>
@@ -113,61 +182,4 @@ describe('Checkboxes', () => {
113182

114183
expect(inputEl?.dataset).toHaveProperty('checkboxExclusive', 'true');
115184
});
116-
117-
it('allows HTML on the Checkboxes props', async () => {
118-
const { container } = await render(
119-
<Checkboxes
120-
id="example"
121-
name="example"
122-
hint={
123-
<>
124-
This is the main hint <span className="nhsuk-caption-xl"> and contains HTML</span>
125-
</>
126-
}
127-
error={
128-
<>
129-
This is an error <span className="nhsuk-caption-m"> and this error contains HTML</span>
130-
</>
131-
}
132-
>
133-
<Checkboxes.Item
134-
value="animal"
135-
hint={
136-
<>
137-
This is informative <span className="nhsuk-caption-l"> and contains HTML</span>
138-
</>
139-
}
140-
>
141-
Waste from animal carcasses
142-
</Checkboxes.Item>
143-
<Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
144-
<Checkboxes.Item value="farm">Farm or agricultural waste</Checkboxes.Item>
145-
<Checkboxes.Item value="none" id="none" exclusive>
146-
None
147-
</Checkboxes.Item>
148-
</Checkboxes>,
149-
);
150-
151-
const hintEl = container.querySelector('#example-1--hint');
152-
expect(hintEl).toBeDefined();
153-
expect(hintEl?.innerHTML).toMatch(
154-
`This is informative <span class="nhsuk-caption-l"> and contains HTML</span>`,
155-
);
156-
157-
const mainHintEl = container.querySelector('#example--hint');
158-
expect(mainHintEl).toBeDefined();
159-
expect(mainHintEl?.innerHTML).toMatch(
160-
`This is the main hint <span class="nhsuk-caption-xl"> and contains HTML</span>`,
161-
);
162-
163-
const hintElSpan = container.querySelector('.nhsuk-caption-xl');
164-
expect(hintElSpan).toHaveTextContent('and contains HTML');
165-
expect(hintEl).toBeDefined();
166-
expect(hintEl?.innerHTML).toMatch(
167-
`This is informative <span class="nhsuk-caption-l"> and contains HTML</span>`,
168-
);
169-
const errorEl = container.querySelector('#example--error-message');
170-
expect(errorEl).toBeDefined();
171-
expect(errorEl).toHaveTextContent('and this error contains HTML');
172-
});
173185
});

0 commit comments

Comments
 (0)