Fix identifiers of ElementErrors being thrown

alphagov · Sep 22, 2023 · b3c970c · b3c970c
1 parent d41d913
commit b3c970c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/header/header.mjs b/packages/govuk-frontend/src/govuk/components/header/header.mjs
@@ -61,28 +61,28 @@ export class Header extends GOVUKFrontendComponent {
       return this
     }
 
+    if (!($menuButton instanceof HTMLElement)) {
+      throw new ElementError($menuButton, {
+        componentName: 'Header',
+        identifier: '.govuk-js-header-toggle'
+      })
+    }
+
     const menuId = $menuButton.getAttribute('aria-controls')
     if (!menuId) {
       throw new ElementError($menuButton, {
         componentName: 'Header',
-        identifier: '$menuButton["aria-controls"]',
+        identifier: '.govuk-js-header-toggle[aria-controls]',
         expectedType: 'string'
       })
     }
 
     const $menu = document.getElementById(menuId)
 
-    if (!($menuButton instanceof HTMLElement)) {
-      throw new ElementError($menu, {
-        componentName: 'Header',
-        identifier: 'Menu'
-      })
-    }
-
     if (!($menu instanceof HTMLElement)) {
       throw new ElementError($menu, {
         componentName: 'Header',
-        identifier: 'Menu'
+        identifier: `#${menuId}`
       })
     }
 

diff --git a/packages/govuk-frontend/src/govuk/components/header/header.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/header/header.puppeteer.test.js
@@ -230,6 +230,24 @@ describe('Header navigation', () => {
         })
       })
 
+      it('throws when the toggle is of the wrong type', async () => {
+        await expect(
+          renderAndInitialise(page, 'header', {
+            params: examples['with navigation'],
+            beforeInitialisation($module) {
+              // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
+              $module.querySelector(
+                '.govuk-js-header-toggle'
+              ).outerHTML = `<svg class="govuk-js-header-toggle" ></svg>`
+            }
+          })
+        ).rejects.toEqual({
+          name: 'ElementError',
+          message:
+            'Header: .govuk-js-header-toggle is not an instance of "HTMLElement"'
+        })
+      })
+
       it("throws when the toggle's aria-control attribute is missing", async () => {
         await expect(
           renderAndInitialise(page, 'header', {
@@ -243,7 +261,7 @@ describe('Header navigation', () => {
         ).rejects.toEqual({
           name: 'ElementError',
           message:
-            'Header: $menuButton["aria-controls"] is not of type "string"'
+            'Header: .govuk-js-header-toggle[aria-controls] is not of type "string"'
         })
       })
 
@@ -258,7 +276,7 @@ describe('Header navigation', () => {
           })
         ).rejects.toEqual({
           name: 'ElementError',
-          message: 'Header: Menu not found'
+          message: 'Header: #navigation not found'
         })
       })
     })