Skip to content

Commit 537109f

Browse files
oss6oss6
committed
GH-32 Fix radios conditional content when checked is false
1 parent 3bf62c9 commit 537109f

File tree

4 files changed

+414
-2
lines changed

4 files changed

+414
-2
lines changed

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import { mount } from 'enzyme';
3+
import Radios from '../Radios';
4+
5+
describe('Radios', () => {
6+
it('matches snapshot', () => {
7+
const element = mount(
8+
<Radios id="example" name="example">
9+
<Radios.Radio id="example-1" value="yes">
10+
Yes
11+
</Radios.Radio>
12+
<Radios.Radio id="example-2" value="no">
13+
No
14+
</Radios.Radio>
15+
</Radios>,
16+
);
17+
expect(element).toMatchSnapshot();
18+
element.unmount();
19+
});
20+
21+
it('does not render the conditional content if checked is false', () => {
22+
const element = mount(
23+
<Radios id="example" name="example">
24+
<Radios.Radio id="example-1" value="yes" checked={false} conditional={<p>Test</p>}>
25+
Yes
26+
</Radios.Radio>
27+
<Radios.Radio id="example-2" value="no">
28+
No
29+
</Radios.Radio>
30+
</Radios>,
31+
);
32+
element.find('input#example-1').simulate('change');
33+
expect(element).toMatchSnapshot();
34+
element.unmount();
35+
});
36+
37+
it('renders the conditional content if the radio reference = selected radio', () => {
38+
const element = mount(
39+
<Radios id="example" name="example">
40+
<Radios.Radio id="example-1" value="yes" conditional={<p>Test</p>}>
41+
Yes
42+
</Radios.Radio>
43+
<Radios.Radio id="example-2" value="no">
44+
No
45+
</Radios.Radio>
46+
</Radios>,
47+
);
48+
element.find('input#example-1').simulate('change');
49+
expect(element).toMatchSnapshot();
50+
element.unmount();
51+
});
52+
});

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

Lines changed: 327 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,327 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Radios matches snapshot 1`] = `
4+
<Radios
5+
id="example"
6+
name="example"
7+
role="radiogroup"
8+
>
9+
<FormGroup
10+
id="example"
11+
inputType="radios"
12+
name="example"
13+
role="radiogroup"
14+
>
15+
<div
16+
className="nhsuk-form-group"
17+
>
18+
<div
19+
className="nhsuk-radios"
20+
id="example"
21+
role="radiogroup"
22+
>
23+
<Radio
24+
id="example-1"
25+
type="radio"
26+
value="yes"
27+
>
28+
<div
29+
className="nhsuk-radios__item"
30+
>
31+
<input
32+
aria-labelledby="example-1--label"
33+
className="nhsuk-radios__input"
34+
id="example-1"
35+
name="example"
36+
onChange={[Function]}
37+
type="radio"
38+
value="yes"
39+
/>
40+
<Label
41+
className="nhsuk-radios__label"
42+
htmlFor="example-1"
43+
id="example-1--label"
44+
>
45+
<BaseLabel
46+
className="nhsuk-radios__label"
47+
htmlFor="example-1"
48+
id="example-1--label"
49+
>
50+
<label
51+
className="nhsuk-label nhsuk-radios__label"
52+
htmlFor="example-1"
53+
id="example-1--label"
54+
>
55+
Yes
56+
</label>
57+
</BaseLabel>
58+
</Label>
59+
</div>
60+
</Radio>
61+
<Radio
62+
id="example-2"
63+
type="radio"
64+
value="no"
65+
>
66+
<div
67+
className="nhsuk-radios__item"
68+
>
69+
<input
70+
aria-labelledby="example-2--label"
71+
className="nhsuk-radios__input"
72+
id="example-2"
73+
name="example"
74+
onChange={[Function]}
75+
type="radio"
76+
value="no"
77+
/>
78+
<Label
79+
className="nhsuk-radios__label"
80+
htmlFor="example-2"
81+
id="example-2--label"
82+
>
83+
<BaseLabel
84+
className="nhsuk-radios__label"
85+
htmlFor="example-2"
86+
id="example-2--label"
87+
>
88+
<label
89+
className="nhsuk-label nhsuk-radios__label"
90+
htmlFor="example-2"
91+
id="example-2--label"
92+
>
93+
No
94+
</label>
95+
</BaseLabel>
96+
</Label>
97+
</div>
98+
</Radio>
99+
</div>
100+
</div>
101+
</FormGroup>
102+
</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+
`;

‎src/components/radios/components/Radio.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ const Radio: React.FC<RadioProps> = ({
3939
} = useContext<IRadiosContext>(RadiosContext);
4040
const [radioReference] = useState<string>(leaseReference());
4141
const inputID = id || getRadioId(radioReference);
42+
const shouldShowConditional = selectedRadio === radioReference && checked !== false;
4243

4344
useEffect(() => () => unleaseReference(radioReference));
4445

@@ -88,7 +89,7 @@ const Radio: React.FC<RadioProps> = ({
8889
</Hint>
8990
) : null}
9091
</div>
91-
{conditional && (selectedRadio === radioReference || forceShowConditional) ? (
92+
{conditional && (shouldShowConditional || forceShowConditional) ? (
9293
<div
9394
className="nhsuk-radios__conditional"
9495
id={`${inputID}--conditional`}

0 commit comments

Comments
 (0)