Refactor radios and checkboxes tests fixtures

Instead of using a big single fixture for all tests, update the tests so they have the relevant fixtures for each test.
This will be used by the snapshot tests which will confirm that the hints render the correct information when it's given to them.

src/govuk/components/checkboxes/__snapshots__/template.test.js.snap

@@ -47,6 +47,17 @@ exports[`Checkboxes when they include a hint renders the hint 1`] = `
 >
   If you have dual nationality, select all options that are relevant to you.
 </span>
+<span id="example-item-hint"
+      class="govuk-hint govuk-checkboxes__hint"
+>
+  Hint for british option here
+</span>
+<span id="example-3-item-hint"
+      class="govuk-hint govuk-checkboxes__hint app-checkboxes__hint-other"
+      data-test-attribute="true"
+>
+  Hint for other option here
+</span>
 `;
 
 exports[`Checkboxes when they include an error message renders the error message 1`] = `

src/govuk/components/checkboxes/checkboxes.yaml

@@ -261,29 +261,6 @@ examples:
       - value: other
         text: Citizen of another country
 
-- name: with all fieldset attributes
-  data:
-    idPrefix: example
-    name: example
-    fieldset:
-      classes: app-fieldset--custom-modifier
-      attributes:
-        data-attribute: value
-        data-second-attribute: second-value
-      legend:
-        text: What is your nationality?
-    hint:
-      text: If you have dual nationality, select all options that are relevant to you.
-    errorMessage:
-      text: Please select an option
-    items:
-      - value: british
-        text: British
-      - value: irish
-        text: Irish
-      - value: other
-        text: Citizen of another country
-
 - name: with error message
   data:
     name: waste

src/govuk/components/checkboxes/template.test.js

@@ -560,7 +560,12 @@ describe('Checkboxes', () => {
 
   describe('when they include an error message', () => {
     it('renders the error message', () => {
-      const $ = render('checkboxes', examples['with all fieldset attributes'])
+      const $ = render('checkboxes', {
+        name: 'example',
+        errorMessage: {
+          text: 'Please select an option'
+        }
+      })
 
       expect(htmlWithClassName($, '.govuk-error-message')).toMatchSnapshot()
     })
@@ -667,13 +672,50 @@ describe('Checkboxes', () => {
 
   describe('when they include a hint', () => {
     it('renders the hint', () => {
-      const $ = render('checkboxes', examples['with all fieldset attributes'])
+      const $ = render('checkboxes', {
+        name: 'example',
+        hint: {
+          text: 'If you have dual nationality, select all options that are relevant to you.'
+        },
+        items: [
+          {
+            value: 'british',
+            text: 'British',
+            hint: {
+              text: 'Hint for british option here'
+            }
+          },
+          {
+            value: 'irish',
+            text: 'Irish'
+          },
+          {
+            hint: {
+              text: 'Hint for other option here',
+              classes: 'app-checkboxes__hint-other',
+              attributes: {
+                'data-test-attribute': true
+              }
+            }
+          }
+        ]
+      })
 
       expect(htmlWithClassName($, '.govuk-hint')).toMatchSnapshot()
     })
 
     it('associates the fieldset as "described by" the hint', () => {
-      const $ = render('checkboxes', examples['with all fieldset attributes'])
+      const $ = render('checkboxes', {
+        name: 'example',
+        fieldset: {
+          legend: {
+            text: 'What is your nationality?'
+          }
+        },
+        hint: {
+          text: 'If you have dual nationality, select all options that are relevant to you.'
+        }
+      })
 
       const $fieldset = $('.govuk-fieldset')
       const $hint = $('.govuk-hint')
@@ -687,11 +729,19 @@ describe('Checkboxes', () => {
 
     it('associates the fieldset as "described by" the hint and parent fieldset', () => {
       const describedById = 'some-id'
-      const params = examples['with all fieldset attributes']
 
-      params.fieldset.describedBy = describedById
-
-      const $ = render('checkboxes', params)
+      const $ = render('checkboxes', {
+        name: 'example',
+        fieldset: {
+          describedBy: describedById,
+          legend: {
+            text: 'What is your nationality?'
+          }
+        },
+        hint: {
+          text: 'If you have dual nationality, select all options that are relevant to you.'
+        }
+      })
       const $fieldset = $('.govuk-fieldset')
       const $hint = $('.govuk-hint')
 
@@ -700,13 +750,25 @@ describe('Checkboxes', () => {
       )
 
       expect($fieldset.attr('aria-describedby')).toMatch(hintId)
-      delete params.fieldset.describedBy
     })
   })
 
   describe('when they include both a hint and an error message', () => {
     it('associates the fieldset as described by both the hint and the error message', () => {
-      const $ = render('checkboxes', examples['with all fieldset attributes'])
+      const $ = render('checkboxes', {
+        name: 'example',
+        errorMessage: {
+          text: 'Please select an option'
+        },
+        fieldset: {
+          legend: {
+            text: 'What is your nationality?'
+          }
+        },
+        hint: {
+          text: 'If you have dual nationality, select all options that are relevant to you.'
+        }
+      })
 
       const $fieldset = $('.govuk-fieldset')
       const errorMessageId = $('.govuk-error-message').attr('id')
@@ -722,11 +784,22 @@ describe('Checkboxes', () => {
 
     it('associates the fieldset as described by the hint, error message and parent fieldset', () => {
       const describedById = 'some-id'
-      const params = examples['with all fieldset attributes']
 
-      params.fieldset.describedBy = describedById
-
-      const $ = render('checkboxes', params)
+      const $ = render('checkboxes', {
+        name: 'example',
+        errorMessage: {
+          text: 'Please select an option'
+        },
+        fieldset: {
+          describedBy: describedById,
+          legend: {
+            text: 'What is your nationality?'
+          }
+        },
+        hint: {
+          text: 'If you have dual nationality, select all options that are relevant to you.'
+        }
+      })
 
       const $fieldset = $('.govuk-fieldset')
       const errorMessageId = $('.govuk-error-message').attr('id')
@@ -738,14 +811,18 @@ describe('Checkboxes', () => {
 
       expect($fieldset.attr('aria-describedby'))
         .toMatch(combinedIds)
-
-      delete params.fieldset.describedBy
     })
   })
 
   describe('nested dependant components', () => {
     it('have correct nesting order', () => {
-      const $ = render('checkboxes', examples['with all fieldset attributes'])
+      const $ = render('checkboxes', {
+        fieldset: {
+          legend: {
+            text: 'What is your nationality?'
+          }
+        }
+      })
 
       const $component = $('.govuk-form-group > .govuk-fieldset > .govuk-checkboxes')
       expect($component.length).toBeTruthy()
@@ -777,7 +854,25 @@ describe('Checkboxes', () => {
     })
 
     it('passes through fieldset params without breaking', () => {
-      const $ = render('checkboxes', examples['with all fieldset attributes'])
+      const $ = render('checkboxes', {
+        name: 'example',
+        errorMessage: {
+          text: 'Please select an option'
+        },
+        fieldset: {
+          classes: 'app-fieldset--custom-modifier',
+          attributes: {
+            'data-attribute': 'value',
+            'data-second-attribute': 'second-value'
+          },
+          legend: {
+            text: 'What is your nationality?'
+          }
+        },
+        hint: {
+          text: 'If you have dual nationality, select all options that are relevant to you.'
+        }
+      })
 
       expect(htmlWithClassName($, '.govuk-fieldset')).toMatchSnapshot()
     })

src/govuk/components/radios/__snapshots__/template.test.js.snap

@@ -47,6 +47,17 @@ exports[`Radios when they include a hint renders the hint 1`] = `
 >
   This includes changing your last name or spelling your name differently.
 </span>
+<span id="example-item-hint"
+      class="govuk-hint govuk-radios__hint"
+>
+  Hint for yes option here
+</span>
+<span id="example-2-item-hint"
+      class="govuk-hint govuk-radios__hint app-radios__hint-no"
+      data-test-attribute="true"
+>
+  Hint for no option here
+</span>
 `;
 
 exports[`Radios when they include an error message renders the error message 1`] = `

src/govuk/components/radios/radios.yaml

@@ -258,28 +258,6 @@ examples:
         text: No
         checked: true
 
-- name: with all fieldset attributes
-  data:
-    idPrefix: example
-    name: example
-    errorMessage:
-      text: Please select an option
-    fieldset:
-      classes: app-fieldset--custom-modifier
-      attributes:
-        data-attribute: value
-        data-second-attribute: second-value
-      legend:
-        text: Have you changed your name?
-    hint:
-      text: This includes changing your last name or spelling your name differently.
-    items:
-      - value: yes
-        text: Yes
-      - value: no
-        text: No
-        checked: true
-
 - name: with very long option text
   data:
     name: waste