Update tests

packages/govuk-frontend/src/govuk/components/accordion/accordion.yaml

@@ -234,6 +234,15 @@ examples:
               </ul>
 
   # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
+  - name: id
+    hidden: true
+    options:
+      id: custom-id
+      items:
+        - heading:
+            text: Section A
+          content:
+            text: Some content
   - name: classes
     hidden: true
     options:

packages/govuk-frontend/src/govuk/components/accordion/template.jsdom.test.js

@@ -44,11 +44,18 @@ describe('Accordion', () => {
     it('renders with id', () => {
       const $component = document.querySelector('.govuk-accordion')
 
-      expect($component).toHaveAttribute('id', 'default-example')
+      expect($component).toHaveAttribute('id', 'accordion')
     })
   })
 
   describe('custom options', () => {
+    it('renders with id', () => {
+      document.body.innerHTML = render('accordion', examples.id)
+      const $component = document.querySelector('.govuk-accordion')
+
+      expect($component).toHaveAttribute('id', 'custom-id')
+    })
+
     it('renders with classes', () => {
       document.body.innerHTML = render('accordion', examples.classes)
       const $component = document.querySelector('.govuk-accordion')

packages/govuk-frontend/src/govuk/components/date-input/__snapshots__/template.test.js.snap

@@ -13,17 +13,17 @@ exports[`Date input nested dependant components passes through fieldset params w
 
 exports[`Date input nested dependant components passes through label params without breaking 1`] = `
 <label class="govuk-label govuk-date-input__label"
-       for="dob-day"
+       for="date-input-day"
 >
   Day
 </label>
 <label class="govuk-label govuk-date-input__label"
-       for="dob-month"
+       for="date-input-month"
 >
   Month
 </label>
 <label class="govuk-label govuk-date-input__label"
-       for="dob-year"
+       for="date-input-year"
 >
   Year
 </label>

packages/govuk-frontend/src/govuk/components/date-input/template.test.js

@@ -17,7 +17,7 @@ describe('Date input', () => {
       const $ = render('date-input', examples.default)
 
       const $component = $('.govuk-date-input')
-      expect($component.attr('id')).toBe('dob')
+      expect($component.attr('id')).toBe('date-input')
     })
 
     it('renders default inputs', () => {

packages/govuk-frontend/src/govuk/components/input/input.yaml

@@ -388,6 +388,13 @@ examples:
       value: QQ 12 34 56 C
 
   # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
+  - name: id
+    hidden: true
+    options:
+      id: test-id
+      name: different-name
+      label:
+        text: With custom ID
   - name: classes
     hidden: true
     options:

packages/govuk-frontend/src/govuk/components/input/template.jsdom.test.js

@@ -17,14 +17,15 @@ describe('Input', () => {
       $label = document.querySelector('.govuk-label')
     })
 
-    it('sets the `id` attribute based on the `id` option', () => {
-      expect($component).toHaveAttribute('id', 'input-example')
-    })
-
     it('sets the `name` attribute based on the `name` option', () => {
       expect($component).toHaveAttribute('name', 'test-name')
     })
 
+    it('sets the `id` attribute based on the `name` option', () => {
+      const inputName = $component.getAttribute('name')
+      expect($component).toHaveAttribute('id', inputName)
+    })
+
     it('sets the `type` attribute to a default value of "text"', () => {
       expect($component).toHaveAttribute('type', 'text')
     })
@@ -65,6 +66,13 @@ describe('Input', () => {
   })
 
   describe('custom options', () => {
+    it('sets the `id` attribute based on the `id` option', () => {
+      document.body.innerHTML = render('input', examples.id)
+
+      const $component = document.querySelector('.govuk-input')
+      expect($component).toHaveAttribute('id', 'test-id')
+    })
+
     it('includes additional classes from the `classes` option', () => {
       document.body.innerHTML = render('input', examples.classes)