Update tests for conditional content

Author: colinrotherham

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

@@ -194,6 +194,42 @@ describe('Checkboxes', () => {
     expect(fieldRef.current).toHaveClass('nhsuk-checkboxes__input');
   });
 
+  it('does not render the conditional content if not checked', async () => {
+    const { container } = await renderClient(
+      <Checkboxes id="example" name="example">
+        <Checkboxes.Item value="email" conditional={<p className="conditional-test">Test</p>}>
+          Email
+        </Checkboxes.Item>
+        <Checkboxes.Item value="phone">Phone</Checkboxes.Item>
+        <Checkboxes.Item value="text">Text message</Checkboxes.Item>
+      </Checkboxes>,
+      { moduleName: 'nhsuk-checkboxes' },
+    );
+
+    const conditionalElement = container.querySelector('.conditional-test');
+    expect(conditionalElement?.parentElement).toHaveClass('nhsuk-checkboxes__conditional--hidden');
+  });
+
+  it('renders the conditional content if checked', async () => {
+    const { container } = await renderClient(
+      <Checkboxes id="example" name="example">
+        <Checkboxes.Item
+          value="email"
+          conditional={<p className="conditional-test">Test</p>}
+          checked
+        >
+          Email
+        </Checkboxes.Item>
+        <Checkboxes.Item value="phone">Phone</Checkboxes.Item>
+        <Checkboxes.Item value="text">Text message</Checkboxes.Item>
+      </Checkboxes>,
+      { moduleName: 'nhsuk-checkboxes' },
+    );
+
+    const conditionalElement = container.querySelector('.conditional-test');
+    expect(conditionalElement).toHaveTextContent('Test');
+  });
+
   it('sets attribute `data-checkbox-exclusive` when items are exclusive', async () => {
     const { container } = await renderClient(
       <Checkboxes id="example" name="example">

src/components/form-elements/radios/__tests__/Radios.test.tsx

@@ -121,20 +121,13 @@ describe('Radios', () => {
     expect(fieldRef.current).toHaveClass('nhsuk-radios__input');
   });
 
-  it('does not render the conditional content if checked is false', async () => {
+  it('does not render the conditional content if not checked', async () => {
     const { container } = await renderClient(
       <Radios id="example" name="example">
-        <Radios.Item
-          id="example-1"
-          value="yes"
-          checked={false}
-          conditional={<p className="conditional-test">Test</p>}
-        >
+        <Radios.Item value="yes" conditional={<p className="conditional-test">Test</p>}>
           Yes
         </Radios.Item>
-        <Radios.Item id="example-2" value="no">
-          No
-        </Radios.Item>
+        <Radios.Item value="no">No</Radios.Item>
       </Radios>,
       { moduleName: 'nhsuk-radios' },
     );
@@ -143,20 +136,13 @@ describe('Radios', () => {
     expect(conditionalElement?.parentElement).toHaveClass('nhsuk-radios__conditional--hidden');
   });
 
-  it('renders the conditional content if the radio reference = selected radio', async () => {
+  it('renders the conditional content if checked', async () => {
     const { container } = await renderClient(
       <Radios id="example" name="example">
-        <Radios.Item
-          id="example-1"
-          value="yes"
-          checked={true}
-          conditional={<p className="conditional-test">Test</p>}
-        >
+        <Radios.Item value="yes" conditional={<p className="conditional-test">Test</p>} checked>
           Yes
         </Radios.Item>
-        <Radios.Item id="example-2" value="no">
-          No
-        </Radios.Item>
+        <Radios.Item value="no">No</Radios.Item>
       </Radios>,
       { moduleName: 'nhsuk-radios' },
     );