Skip to content

Commit 051b7fb

Browse files
oss6oss6
committed
GH-32 Use selector instead of snapshot testing to assert conditional content rendering
1 parent 537109f commit 051b7fb

File tree

2 files changed

+15
-230
lines changed

2 files changed

+15
-230
lines changed

‎src/components/radios/__tests__/Radios.test.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React from 'react';
21
import { mount } from 'enzyme';
2+
import React from 'react';
33
import Radios from '../Radios';
44

55
describe('Radios', () => {
@@ -21,7 +21,12 @@ describe('Radios', () => {
2121
it('does not render the conditional content if checked is false', () => {
2222
const element = mount(
2323
<Radios id="example" name="example">
24-
<Radios.Radio id="example-1" value="yes" checked={false} conditional={<p>Test</p>}>
24+
<Radios.Radio
25+
id="example-1"
26+
value="yes"
27+
checked={false}
28+
conditional={<p className="conditional-test">Test</p>}
29+
>
2530
Yes
2631
</Radios.Radio>
2732
<Radios.Radio id="example-2" value="no">
@@ -30,14 +35,18 @@ describe('Radios', () => {
3035
</Radios>,
3136
);
3237
element.find('input#example-1').simulate('change');
33-
expect(element).toMatchSnapshot();
38+
expect(element.exists('.conditional-test')).toBeFalsy();
3439
element.unmount();
3540
});
3641

3742
it('renders the conditional content if the radio reference = selected radio', () => {
3843
const element = mount(
3944
<Radios id="example" name="example">
40-
<Radios.Radio id="example-1" value="yes" conditional={<p>Test</p>}>
45+
<Radios.Radio
46+
id="example-1"
47+
value="yes"
48+
conditional={<p className="conditional-test">Test</p>}
49+
>
4150
Yes
4251
</Radios.Radio>
4352
<Radios.Radio id="example-2" value="no">
@@ -46,7 +55,7 @@ describe('Radios', () => {
4655
</Radios>,
4756
);
4857
element.find('input#example-1').simulate('change');
49-
expect(element).toMatchSnapshot();
58+
expect(element.exists('.conditional-test')).toBeTruthy();
5059
element.unmount();
5160
});
5261
});

‎src/components/radios/__tests__/__snapshots__/Radios.test.tsx.snap‎

Lines changed: 1 addition & 225 deletions
Original file line numberDiff line numberDiff line change
@@ -100,228 +100,4 @@ exports[`Radios matches snapshot 1`] = `
100100
</div>
101101
</FormGroup>
102102
</Radios>
103-
`;
104-
105-
exports[`Radios does not render the conditional content if checked is false 1`] = `
106-
<Radios
107-
id="example"
108-
name="example"
109-
role="radiogroup"
110-
>
111-
<FormGroup
112-
id="example"
113-
inputType="radios"
114-
name="example"
115-
role="radiogroup"
116-
>
117-
<div
118-
className="nhsuk-form-group"
119-
>
120-
<div
121-
className="nhsuk-radios nhsuk-radios--conditional"
122-
id="example"
123-
role="radiogroup"
124-
>
125-
<Radio
126-
checked={false}
127-
conditional={
128-
<p>
129-
Test
130-
</p>
131-
}
132-
id="example-1"
133-
type="radio"
134-
value="yes"
135-
>
136-
<div
137-
className="nhsuk-radios__item"
138-
>
139-
<input
140-
aria-labelledby="example-1--label"
141-
checked={false}
142-
className="nhsuk-radios__input"
143-
id="example-1"
144-
name="example"
145-
onChange={[Function]}
146-
type="radio"
147-
value="yes"
148-
/>
149-
<Label
150-
className="nhsuk-radios__label"
151-
htmlFor="example-1"
152-
id="example-1--label"
153-
>
154-
<BaseLabel
155-
className="nhsuk-radios__label"
156-
htmlFor="example-1"
157-
id="example-1--label"
158-
>
159-
<label
160-
className="nhsuk-label nhsuk-radios__label"
161-
htmlFor="example-1"
162-
id="example-1--label"
163-
>
164-
Yes
165-
</label>
166-
</BaseLabel>
167-
</Label>
168-
</div>
169-
</Radio>
170-
<Radio
171-
id="example-2"
172-
type="radio"
173-
value="no"
174-
>
175-
<div
176-
className="nhsuk-radios__item"
177-
>
178-
<input
179-
aria-labelledby="example-2--label"
180-
className="nhsuk-radios__input"
181-
id="example-2"
182-
name="example"
183-
onChange={[Function]}
184-
type="radio"
185-
value="no"
186-
/>
187-
<Label
188-
className="nhsuk-radios__label"
189-
htmlFor="example-2"
190-
id="example-2--label"
191-
>
192-
<BaseLabel
193-
className="nhsuk-radios__label"
194-
htmlFor="example-2"
195-
id="example-2--label"
196-
>
197-
<label
198-
className="nhsuk-label nhsuk-radios__label"
199-
htmlFor="example-2"
200-
id="example-2--label"
201-
>
202-
No
203-
</label>
204-
</BaseLabel>
205-
</Label>
206-
</div>
207-
</Radio>
208-
</div>
209-
</div>
210-
</FormGroup>
211-
</Radios>
212-
`;
213-
214-
exports[`Radios renders the conditional content if the radio reference = selected radio 1`] = `
215-
<Radios
216-
id="example"
217-
name="example"
218-
role="radiogroup"
219-
>
220-
<FormGroup
221-
id="example"
222-
inputType="radios"
223-
name="example"
224-
role="radiogroup"
225-
>
226-
<div
227-
className="nhsuk-form-group"
228-
>
229-
<div
230-
className="nhsuk-radios nhsuk-radios--conditional"
231-
id="example"
232-
role="radiogroup"
233-
>
234-
<Radio
235-
conditional={
236-
<p>
237-
Test
238-
</p>
239-
}
240-
id="example-1"
241-
type="radio"
242-
value="yes"
243-
>
244-
<div
245-
className="nhsuk-radios__item"
246-
>
247-
<input
248-
aria-labelledby="example-1--label"
249-
className="nhsuk-radios__input"
250-
id="example-1"
251-
name="example"
252-
onChange={[Function]}
253-
type="radio"
254-
value="yes"
255-
/>
256-
<Label
257-
className="nhsuk-radios__label"
258-
htmlFor="example-1"
259-
id="example-1--label"
260-
>
261-
<BaseLabel
262-
className="nhsuk-radios__label"
263-
htmlFor="example-1"
264-
id="example-1--label"
265-
>
266-
<label
267-
className="nhsuk-label nhsuk-radios__label"
268-
htmlFor="example-1"
269-
id="example-1--label"
270-
>
271-
Yes
272-
</label>
273-
</BaseLabel>
274-
</Label>
275-
</div>
276-
<div
277-
className="nhsuk-radios__conditional"
278-
id="example-1--conditional"
279-
>
280-
<p>
281-
Test
282-
</p>
283-
</div>
284-
</Radio>
285-
<Radio
286-
id="example-2"
287-
type="radio"
288-
value="no"
289-
>
290-
<div
291-
className="nhsuk-radios__item"
292-
>
293-
<input
294-
aria-labelledby="example-2--label"
295-
className="nhsuk-radios__input"
296-
id="example-2"
297-
name="example"
298-
onChange={[Function]}
299-
type="radio"
300-
value="no"
301-
/>
302-
<Label
303-
className="nhsuk-radios__label"
304-
htmlFor="example-2"
305-
id="example-2--label"
306-
>
307-
<BaseLabel
308-
className="nhsuk-radios__label"
309-
htmlFor="example-2"
310-
id="example-2--label"
311-
>
312-
<label
313-
className="nhsuk-label nhsuk-radios__label"
314-
htmlFor="example-2"
315-
id="example-2--label"
316-
>
317-
No
318-
</label>
319-
</BaseLabel>
320-
</Label>
321-
</div>
322-
</Radio>
323-
</div>
324-
</div>
325-
</FormGroup>
326-
</Radios>
327-
`;
103+
`;

0 commit comments

Comments
 (0)