Update input template tests to use jsdom

[36degrees]

[!NOTE] This PR is stacked on top of #5011 which must be merged first.

Also refactor the tests to:

• improve the test descriptions and grouping
• move duplicated code (like rendering the same example of a component) into beforeAll blocks
• use toHaveAccessibleDescription and toHaveAccessibleName where appropriate
• not use snapshots

Part of #5010.

[github-actions[bot]]

:clipboard: Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	113.37 KiB
dist/govuk-frontend-development.min.js	42.34 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	88.16 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	82.83 KiB
packages/govuk-frontend/dist/govuk/all.mjs	981 B
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	113.36 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	42.33 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	4.86 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	78.45 KiB	40.31 KiB
accordion.mjs	22.71 KiB	12.85 KiB
button.mjs	5.98 KiB	2.69 KiB
character-count.mjs	22.4 KiB	9.92 KiB
checkboxes.mjs	5.83 KiB	2.83 KiB
error-summary.mjs	7.89 KiB	3.46 KiB
exit-this-page.mjs	17.1 KiB	9.26 KiB
header.mjs	4.46 KiB	2.6 KiB
notification-banner.mjs	6.26 KiB	2.62 KiB
password-input.mjs	15.15 KiB	7.25 KiB
radios.mjs	4.83 KiB	2.38 KiB
skip-link.mjs	4.39 KiB	2.18 KiB
tabs.mjs	10.13 KiB	6.11 KiB

View stats and visualisations on the review app

---

Action run for f751c3be242d4a1e13e3852ade72dd0f70e5fa45

[github-actions[bot]]

Rendered HTML changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-disabled.html b/packages/govuk-frontend/dist/govuk/components/input/template-disabled.html
new file mode 100644
index 000000000..486045b79
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-disabled.html
@@ -0,0 +1,6 @@
+<div class="govuk-form-group">
+  <label class="govuk-label" for="disabled-input">
+    Disabled input
+  </label>
+  <input class="govuk-input" id="disabled-input" name="" type="text" disabled>
+</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-error-and-hint.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-error-and-hint.html
new file mode 100644
index 000000000..6b14ce405
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-error-and-hint.html
@@ -0,0 +1,12 @@
+<div class="govuk-form-group govuk-form-group--error">
+  <label class="govuk-label" for="with-error-hint">
+    National insurance number
+  </label>
+  <div id="with-error-hint-hint" class="govuk-hint">
+    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
+  </div>
+  <p id="with-error-hint-error" class="govuk-error-message">
+    <span class="govuk-visually-hidden">Error:</span> Enter a National Insurance number in the correct format
+  </p>
+  <input class="govuk-input govuk-input--error" id="with-error-hint" name="with-error-hint" type="text" aria-describedby="with-error-hint-hint with-error-hint-error">
+</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-error-message.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-error-message.html
index e025b5b9c..35b100b90 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-error-message.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-error-message.html
@@ -2,11 +2,8 @@
   <label class="govuk-label" for="input-with-error-message">
     National Insurance number
   </label>
-  <div id="input-with-error-message-hint" class="govuk-hint">
-    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
-  </div>
   <p id="input-with-error-message-error" class="govuk-error-message">
-    <span class="govuk-visually-hidden">Error:</span> Error message goes here
+    <span class="govuk-visually-hidden">Error:</span> Enter a National Insurance number in the correct format
   </p>
-  <input class="govuk-input govuk-input--error" id="input-with-error-message" name="test-name-3" type="text" aria-describedby="input-with-error-message-hint input-with-error-message-error">
+  <input class="govuk-input govuk-input--error" id="input-with-error-message" name="test-name-3" type="text" aria-describedby="input-with-error-message-error">
 </div>

---

Action run for f751c3be242d4a1e13e3852ade72dd0f70e5fa45

[github-actions[bot]]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/input/fixtures.json b/packages/govuk-frontend/dist/govuk/components/input/fixtures.json
index 5b5223d03..0563db9ac 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/input/fixtures.json
@@ -38,19 +38,36 @@
                 "label": {
                     "text": "National Insurance number"
                 },
-                "hint": {
-                    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
-                },
                 "id": "input-with-error-message",
                 "name": "test-name-3",
                 "errorMessage": {
-                    "text": "Error message goes here"
+                    "text": "Enter a National Insurance number in the correct format"
                 }
             },
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"input-with-error-message\">\n    National Insurance number\n  </label>\n  <div id=\"input-with-error-message-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n  <p id=\"input-with-error-message-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <input class=\"govuk-input govuk-input--error\" id=\"input-with-error-message\" name=\"test-name-3\" type=\"text\" aria-describedby=\"input-with-error-message-hint input-with-error-message-error\">\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"input-with-error-message\">\n    National Insurance number\n  </label>\n  <p id=\"input-with-error-message-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Enter a National Insurance number in the correct format\n  </p>\n  <input class=\"govuk-input govuk-input--error\" id=\"input-with-error-message\" name=\"test-name-3\" type=\"text\" aria-describedby=\"input-with-error-message-error\">\n</div>"
+        },
+        {
+            "name": "with error and hint",
+            "options": {
+                "id": "with-error-hint",
+                "name": "with-error-hint",
+                "label": {
+                    "text": "National insurance number"
+                },
+                "errorMessage": {
+                    "text": "Enter a National Insurance number in the correct format"
+                },
+                "hint": {
+                    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
+                }
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-hint\">\n    National insurance number\n  </label>\n  <div id=\"with-error-hint-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n  <p id=\"with-error-hint-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Enter a National Insurance number in the correct format\n  </p>\n  <input class=\"govuk-input govuk-input--error\" id=\"with-error-hint\" name=\"with-error-hint\" type=\"text\" aria-describedby=\"with-error-hint-hint with-error-hint-error\">\n</div>"
         },
         {
             "name": "with width-2 class",
@@ -290,6 +307,20 @@
             "previewLayoutModifiers": [],
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-autocapitalize-off\">\n    Autocapitalize is turned off\n  </label>\n  <input class=\"govuk-input\" id=\"input-with-autocapitalize-off\" name=\"autocapitalize\" type=\"text\" autocapitalize=\"none\">\n</div>"
         },
+        {
+            "name": "disabled",
+            "options": {
+                "label": {
+                    "text": "Disabled input"
+                },
+                "id": "disabled-input",
+                "disabled": true
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"disabled-input\">\n    Disabled input\n  </label>\n  <input class=\"govuk-input\" id=\"disabled-input\" name=\"\" type=\"text\" disabled>\n</div>"
+        },
         {
             "name": "with prefix",
             "options": {
@@ -551,26 +582,6 @@
             "previewLayoutModifiers": [],
             "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-describedby\">\n    With error describedBy\n  </label>\n  <p id=\"with-error-describedby-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <input class=\"govuk-input govuk-input--error\" id=\"with-error-describedby\" name=\"with-error-describedby\" type=\"text\" aria-describedby=\"test-target-element with-error-describedby-error\">\n</div>"
         },
-        {
-            "name": "with error and hint",
-            "options": {
-                "id": "with-error-hint",
-                "name": "with-error-hint",
-                "label": {
-                    "text": "With error and hint"
-                },
-                "errorMessage": {
-                    "text": "Error message"
-                },
-                "hint": {
-                    "text": "Hint"
-                }
-            },
-            "hidden": true,
-            "description": "",
-            "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-hint\">\n    With error and hint\n  </label>\n  <div id=\"with-error-hint-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n  <p id=\"with-error-hint-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <input class=\"govuk-input govuk-input--error\" id=\"with-error-hint\" name=\"with-error-hint\" type=\"text\" aria-describedby=\"with-error-hint-hint with-error-hint-error\">\n</div>"
-        },
         {
             "name": "with error, hint and describedBy",
             "options": {

---

Action run for f751c3be242d4a1e13e3852ade72dd0f70e5fa45

[36degrees]

Force-pushed a change to remove the quotes around zero to resolve https://github.com/alphagov/govuk-frontend/pull/5017#discussion_r1620820751.

[romaricpascal]

@36degrees Looks good to go ⛵