Custom-Html-Test

Author: Moshood Alabidun

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

@@ -69,12 +69,7 @@ describe('Components', () => {
               context: fixture.options,
               fixture
             })}
-
-            <!--
-              Target for references in examples (e.g. aria-controls)
-              https://html-validate.org/rules/no-missing-references.html
-            -->
-            <div id="test-target-element"></div>
+            ${fixture.supportingHTML ?? ''}
           `
 
           // Validate HTML

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

@@ -94,8 +94,9 @@ examples:
   - name: for
     hidden: true
     options:
-      for: test-target-element
+      for: test-target-input
       text: National Insurance number
+    supportingHTML: '<input type="text" id="test-target-input">'
   - name: attributes
     hidden: true
     options:

packages/govuk-frontend/src/govuk/components/label/template.test.js

@@ -58,7 +58,7 @@ describe('Label', () => {
       const $ = render('label', examples.for)
 
       const labelForAttr = $('.govuk-label').attr('for')
-      expect(labelForAttr).toBe('test-target-element')
+      expect(labelForAttr).toBe('test-target-input')
     })
 
     it('can be nested inside an H1 using isPageHeading', () => {

shared/lib/components.js

@@ -324,6 +324,7 @@ module.exports = {
  * @property {boolean} [screenshot] - Screenshot and include in visual regression tests
  * @property {PageTemplateOptions} [pageTemplateOptions] - Page template options for render
  * @property {MacroOptions} options - Nunjucks macro options (or params)
+ * @property {string} [supportingHTML] - Supporting HTML to inject during tests (e.g., target elements for aria-controls, label for attributes)
  */
 
 /**

shared/tasks/components.mjs

@@ -130,7 +130,10 @@ async function generateFixture(componentDataPath, options) {
         screenshot: example.screenshot ?? false,
 
         // Add rendered Nunjucks example to fixture
-        html: html.trim()
+        html: html.trim(),
+
+        // Add supporting HTML for tests (e.g., target elements for aria-controls, label for attributes)
+        supportingHTML: example.supportingHTML ?? ''
       }
     }
   )