Refactor the test for whether $module is missing or wrong type

Introduce a new `ElementError` that handles the check to format different message so we do not repeat it in each component
alphagov · Sep 18, 2023 · 70e1277 · 70e1277
1 parent 7590f72
commit 70e1277
Show file tree

Hide file tree

Showing 24 changed files with 163 additions and 115 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs b/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
@@ -1,6 +1,6 @@
 import { mergeConfigs, extractConfigByNamespace } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
-import { MissingElementError } from '../../errors/index.mjs'
+import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 import { I18n } from '../../i18n.mjs'
 
@@ -120,11 +120,11 @@ export class Accordion extends GOVUKFrontendComponent {
     super()
 
     if (!($module instanceof HTMLElement)) {
-      throw !$module
-        ? new MissingElementError('Accordion: $module not found')
-        : new TypeError(
-            'Accordion: $module is not an instance of "HTMLElement"'
-          )
+      throw new ElementError($module, {
+        componentName: 'Accordion',
+        identifier: '$module',
+        expectedType: HTMLElement
+      })
     }
 
     this.$module = $module

diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/accordion/accordion.puppeteer.test.js
@@ -743,7 +743,7 @@ describe('/components/accordion', () => {
                 }
               })
             ).rejects.toEqual({
-              name: 'MissingElementError',
+              name: 'ElementError',
               message: 'Accordion: $module not found'
             })
           })
@@ -754,13 +754,11 @@ describe('/components/accordion', () => {
                 params: examples.default,
                 beforeInitialisation($module) {
                   // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
-                  $module.outerHTML = `<svg data-module="${$module.getAttribute(
-                    'data-module'
-                  )}"></svg>`
+                  $module.outerHTML = `<svg data-module="govuk-accordion"></svg>`
                 }
               })
             ).rejects.toEqual({
-              name: 'TypeError',
+              name: 'ElementError',
               message: 'Accordion: $module is not an instance of "HTMLElement"'
             })
           })

diff --git a/packages/govuk-frontend/src/govuk/components/button/button.mjs b/packages/govuk-frontend/src/govuk/components/button/button.mjs
@@ -1,6 +1,6 @@
 import { mergeConfigs } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
-import { MissingElementError } from '../../errors/index.mjs'
+import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 
 const KEY_SPACE = 32
@@ -35,9 +35,11 @@ export class Button extends GOVUKFrontendComponent {
     super()
 
     if (!($module instanceof HTMLElement)) {
-      throw !$module
-        ? new MissingElementError('Button: $module not found')
-        : new TypeError('Button: $module is not an instance of "HTMLElement"')
+      throw new ElementError($module, {
+        componentName: 'Button',
+        identifier: '$module',
+        expectedType: HTMLElement
+      })
     }
 
     this.$module = $module

diff --git a/packages/govuk-frontend/src/govuk/components/button/button.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/button/button.puppeteer.test.js
@@ -348,7 +348,7 @@ describe('/components/button', () => {
             }
           })
         ).rejects.toEqual({
-          name: 'MissingElementError',
+          name: 'ElementError',
           message: 'Button: $module not found'
         })
       })
@@ -359,13 +359,11 @@ describe('/components/button', () => {
             params: examples.default,
             beforeInitialisation($module) {
               // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
-              $module.outerHTML = `<svg data-module="${$module.getAttribute(
-                'data-module'
-              )}"></svg>`
+              $module.outerHTML = `<svg data-module="govuk-button"></svg>`
             }
           })
         ).rejects.toEqual({
-          name: 'TypeError',
+          name: 'ElementError',
           message: 'Button: $module is not an instance of "HTMLElement"'
         })
       })

diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs b/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs
@@ -5,7 +5,7 @@ import {
   validateConfig
 } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
-import { ConfigError, MissingElementError } from '../../errors/index.mjs'
+import { ConfigError, ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 import { I18n } from '../../i18n.mjs'
 
@@ -75,11 +75,11 @@ export class CharacterCount extends GOVUKFrontendComponent {
     super()
 
     if (!($module instanceof HTMLElement)) {
-      throw !$module
-        ? new MissingElementError('Character count: $module not found')
-        : new TypeError(
-            'Character count: $module is not an instance of "HTMLElement"'
-          )
+      throw new ElementError($module, {
+        componentName: 'Character count',
+        identifier: '$module',
+        expectedType: HTMLElement
+      })
     }
 
     const $textarea = $module.querySelector('.govuk-js-character-count')

diff --git a/...ges/govuk-frontend/src/govuk/components/character-count/character-count.puppeteer.test.js b/...ges/govuk-frontend/src/govuk/components/character-count/character-count.puppeteer.test.js
@@ -794,7 +794,7 @@ describe('Character count', () => {
             }
           })
         ).rejects.toEqual({
-          name: 'MissingElementError',
+          name: 'ElementError',
           message: 'Character count: $module not found'
         })
       })
@@ -805,13 +805,11 @@ describe('Character count', () => {
             params: examples.default,
             beforeInitialisation($module) {
               // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
-              $module.outerHTML = `<svg data-module="${$module.getAttribute(
-                'data-module'
-              )}"></svg>`
+              $module.outerHTML = `<svg data-module="govuk-character-count"></svg>`
             }
           })
         ).rejects.toEqual({
-          name: 'TypeError',
+          name: 'ElementError',
           message:
             'Character count: $module is not an instance of "HTMLElement"'
         })

diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
@@ -1,4 +1,4 @@
-import { MissingElementError } from '../../errors/index.mjs'
+import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 
 /**
@@ -31,11 +31,11 @@ export class Checkboxes extends GOVUKFrontendComponent {
     super()
 
     if (!($module instanceof HTMLElement)) {
-      throw !$module
-        ? new MissingElementError('Checkboxes: $module not found')
-        : new TypeError(
-            'Checkboxes: $module is not an instance of "HTMLElement"'
-          )
+      throw new ElementError($module, {
+        componentName: 'Checkboxes',
+        identifier: '$module',
+        expectedType: HTMLElement
+      })
     }
 
     /** @satisfies {NodeListOf<HTMLInputElement>} */

diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.puppeteer.test.js
@@ -349,7 +349,7 @@ describe('Checkboxes with multiple groups and a "None" checkbox and conditional
             }
           })
         ).rejects.toEqual({
-          name: 'MissingElementError',
+          name: 'ElementError',
           message: 'Checkboxes: $module not found'
         })
       })
@@ -360,13 +360,11 @@ describe('Checkboxes with multiple groups and a "None" checkbox and conditional
             params: examples.default,
             beforeInitialisation($module) {
               // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
-              $module.outerHTML = `<svg data-module="${$module.getAttribute(
-                'data-module'
-              )}"></svg>`
+              $module.outerHTML = `<svg data-module="govuk-checkboxes"></svg>`
             }
           })
         ).rejects.toEqual({
-          name: 'TypeError',
+          name: 'ElementError',
           message: 'Checkboxes: $module is not an instance of "HTMLElement"'
         })
       })

diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs
@@ -1,6 +1,6 @@
 import { mergeConfigs } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
-import { MissingElementError } from '../../errors/index.mjs'
+import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 
 /**
@@ -28,11 +28,11 @@ export class ErrorSummary extends GOVUKFrontendComponent {
     super()
 
     if (!($module instanceof HTMLElement)) {
-      throw !$module
-        ? new MissingElementError('Error summary: $module not found')
-        : new TypeError(
-            'Error summary: $module is not an instance of "HTMLElement"'
-          )
+      throw new ElementError($module, {
+        componentName: 'Error summary',
+        identifier: '$module',
+        expectedType: HTMLElement
+      })
     }
 
     this.$module = $module

diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.puppeteer.test.js
@@ -240,7 +240,7 @@ describe('Error Summary', () => {
           }
         })
       ).rejects.toEqual({
-        name: 'MissingElementError',
+        name: 'ElementError',
         message: 'Error summary: $module not found'
       })
     })
@@ -251,13 +251,11 @@ describe('Error Summary', () => {
           params: examples.default,
           beforeInitialisation($module) {
             // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
-            $module.outerHTML = `<svg data-module="${$module.getAttribute(
-              'data-module'
-            )}"></svg>`
+            $module.outerHTML = `<svg data-module="govuk-error-summary"></svg>`
           }
         })
       ).rejects.toEqual({
-        name: 'TypeError',
+        name: 'ElementError',
         message: 'Error summary: $module is not an instance of "HTMLElement"'
       })
     })

diff --git a/packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.mjs b/packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.mjs
@@ -1,6 +1,6 @@
 import { mergeConfigs, extractConfigByNamespace } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
-import { MissingElementError } from '../../errors/index.mjs'
+import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 import { I18n } from '../../i18n.mjs'
 
@@ -82,11 +82,11 @@ export class ExitThisPage extends GOVUKFrontendComponent {
     super()
 
     if (!($module instanceof HTMLElement)) {
-      throw !$module
-        ? new MissingElementError('Exit this page: $module not found')
-        : new TypeError(
-            'Exit this page: $module is not an instance of "HTMLElement"'
-          )
+      throw new ElementError($module, {
+        componentName: 'Exit this page',
+        identifier: '$module',
+        expectedType: HTMLElement
+      })
     }
 
     const $button = $module.querySelector('.govuk-exit-this-page__button')

diff --git a/packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.puppeteer.test.js
@@ -218,7 +218,7 @@ describe('/components/exit-this-page', () => {
             }
           })
         ).rejects.toEqual({
-          name: 'MissingElementError',
+          name: 'ElementError',
           message: 'Exit this page: $module not found'
         })
       })
@@ -229,13 +229,11 @@ describe('/components/exit-this-page', () => {
             params: examples.default,
             beforeInitialisation($module) {
               // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
-              $module.outerHTML = `<svg data-module="${$module.getAttribute(
-                'data-module'
-              )}"></svg>`
+              $module.outerHTML = `<svg data-module="govuk-exit-this-page"></svg>`
             }
           })
         ).rejects.toEqual({
-          name: 'TypeError',
+          name: 'ElementError',
           message: 'Exit this page: $module is not an instance of "HTMLElement"'
         })
       })

diff --git a/packages/govuk-frontend/src/govuk/components/header/header.mjs b/packages/govuk-frontend/src/govuk/components/header/header.mjs
@@ -1,4 +1,4 @@
-import { MissingElementError } from '../../errors/index.mjs'
+import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 
 /**
@@ -45,9 +45,11 @@ export class Header extends GOVUKFrontendComponent {
     super()
 
     if (!($module instanceof HTMLElement)) {
-      throw !$module
-        ? new MissingElementError('Header: $module not found')
-        : new TypeError('Header: $module is not an instance of "HTMLElement"')
+      throw new ElementError($module, {
+        componentName: 'Header',
+        identifier: '$module',
+        expectedType: HTMLElement
+      })
     }
 
     this.$module = $module

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
@@ -200,7 +200,7 @@ describe('Header navigation', () => {
             }
           })
         ).rejects.toEqual({
-          name: 'MissingElementError',
+          name: 'ElementError',
           message: 'Header: $module not found'
         })
       })
@@ -211,13 +211,11 @@ describe('Header navigation', () => {
             params: examples.default,
             beforeInitialisation($module) {
               // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
-              $module.outerHTML = `<svg data-module="${$module.getAttribute(
-                'data-module'
-              )}"></svg>`
+              $module.outerHTML = `<svg data-module="govuk-header"></svg>`
             }
           })
         ).rejects.toEqual({
-          name: 'TypeError',
+          name: 'ElementError',
           message: 'Header: $module is not an instance of "HTMLElement"'
         })
       })

diff --git a/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs b/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs
@@ -1,6 +1,6 @@
 import { mergeConfigs } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
-import { MissingElementError } from '../../errors/index.mjs'
+import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 
 /**
@@ -26,11 +26,11 @@ export class NotificationBanner extends GOVUKFrontendComponent {
     super()
 
     if (!($module instanceof HTMLElement)) {
-      throw !$module
-        ? new MissingElementError('Notification banner: $module not found')
-        : new TypeError(
-            'Notification banner: $module is not an instance of "HTMLElement"'
-          )
+      throw new ElementError($module, {
+        componentName: 'Notification banner',
+        identifier: '$module',
+        expectedType: HTMLElement
+      })
     }
 
     this.$module = $module

diff --git a/...k-frontend/src/govuk/components/notification-banner/notification-banner.puppeteer.test.js b/...k-frontend/src/govuk/components/notification-banner/notification-banner.puppeteer.test.js
@@ -228,7 +228,7 @@ describe('Notification banner', () => {
           }
         })
       ).rejects.toEqual({
-        name: 'MissingElementError',
+        name: 'ElementError',
         message: 'Notification banner: $module not found'
       })
     })
@@ -239,13 +239,11 @@ describe('Notification banner', () => {
           params: examples.default,
           beforeInitialisation($module) {
             // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
-            $module.outerHTML = `<svg data-module="${$module.getAttribute(
-              'data-module'
-            )}"></svg>`
+            $module.outerHTML = `<svg data-module="govuk-notification-banner"></svg>`
           }
         })
       ).rejects.toEqual({
-        name: 'TypeError',
+        name: 'ElementError',
         message:
           'Notification banner: $module is not an instance of "HTMLElement"'
       })