Throw ElementError when the module is not of the expected type

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

@@ -1,5 +1,6 @@
 import { mergeConfigs, extractConfigByNamespace } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
+import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 import { I18n } from '../../i18n.mjs'
 
@@ -119,7 +120,10 @@ export class Accordion extends GOVUKFrontendComponent {
     super()
 
     if (!($module instanceof HTMLElement)) {
-      return this
+      throw new ElementError($module, {
+        componentName: 'Accordion',
+        identifier: '$module'
+      })
     }
 
     this.$module = $module

packages/govuk-frontend/src/govuk/components/accordion/accordion.puppeteer.test.js

@@ -733,6 +733,35 @@ describe('/components/accordion', () => {
               message: 'GOV.UK Frontend is not supported in this browser'
             })
           })
+
+          it('throws when $module is not set', async () => {
+            await expect(
+              renderAndInitialise(page, 'accordion', {
+                params: examples.default,
+                beforeInitialisation($module) {
+                  $module.remove()
+                }
+              })
+            ).rejects.toEqual({
+              name: 'ElementError',
+              message: 'Accordion: $module not found'
+            })
+          })
+
+          it('throws when receiving the wrong type for $module', async () => {
+            await expect(
+              renderAndInitialise(page, '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="govuk-accordion"></svg>`
+                }
+              })
+            ).rejects.toEqual({
+              name: 'ElementError',
+              message: 'Accordion: $module is not an instance of "HTMLElement"'
+            })
+          })
         })
       })
     })

packages/govuk-frontend/src/govuk/components/button/button.mjs

@@ -1,5 +1,6 @@
 import { mergeConfigs } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
+import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 
 const KEY_SPACE = 32
@@ -34,7 +35,10 @@ export class Button extends GOVUKFrontendComponent {
     super()
 
     if (!($module instanceof HTMLElement)) {
-      return this
+      throw new ElementError($module, {
+        componentName: 'Button',
+        identifier: '$module'
+      })
     }
 
     this.$module = $module

packages/govuk-frontend/src/govuk/components/button/button.puppeteer.test.js

@@ -1,5 +1,4 @@
 const {
-  goTo,
   goToComponent,
   renderAndInitialise
 } = require('@govuk-frontend/helpers/puppeteer')
@@ -18,26 +17,6 @@ describe('/components/button', () => {
     examples = await getExamples('button')
   })
 
-  describe('mis-instantiation', () => {
-    it('does not prevent further JavaScript from running', async () => {
-      await goTo(page, '/tests/boilerplate')
-
-      const result = await page.evaluate(async (exportName) => {
-        const namespace = await import('govuk-frontend')
-
-        // `undefined` simulates the element being missing,
-        // from an unchecked `document.querySelector` for example
-        /* eslint-disable-next-line no-new */
-        new namespace[exportName](undefined)
-
-        // If our component initialisation breaks, this won't run
-        return true
-      }, 'Button')
-
-      expect(result).toBe(true)
-    })
-  })
-
   describe('/components/button/link', () => {
     beforeAll(async () => {
       await goToComponent(page, 'button', {
@@ -359,6 +338,35 @@ describe('/components/button', () => {
           message: 'GOV.UK Frontend is not supported in this browser'
         })
       })
+
+      it('throws when $module is not set', async () => {
+        await expect(
+          renderAndInitialise(page, 'button', {
+            params: examples.default,
+            beforeInitialisation($module) {
+              $module.remove()
+            }
+          })
+        ).rejects.toEqual({
+          name: 'ElementError',
+          message: 'Button: $module not found'
+        })
+      })
+
+      it('throws when receiving the wrong type for $module', async () => {
+        await expect(
+          renderAndInitialise(page, '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="govuk-button"></svg>`
+            }
+          })
+        ).rejects.toEqual({
+          name: 'ElementError',
+          message: 'Button: $module is not an instance of "HTMLElement"'
+        })
+      })
     })
   })
 })

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 } from '../../errors/index.mjs'
+import { ConfigError, ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 import { I18n } from '../../i18n.mjs'
 
@@ -75,7 +75,10 @@ export class CharacterCount extends GOVUKFrontendComponent {
     super()
 
     if (!($module instanceof HTMLElement)) {
-      return this
+      throw new ElementError($module, {
+        componentName: 'Character count',
+        identifier: '$module'
+      })
     }
 
     const $textarea = $module.querySelector('.govuk-js-character-count')

packages/govuk-frontend/src/govuk/components/character-count/character-count.puppeteer.test.js

@@ -785,6 +785,36 @@ describe('Character count', () => {
         })
       })
 
+      it('throws when $module is not set', async () => {
+        await expect(
+          renderAndInitialise(page, 'character-count', {
+            params: examples.default,
+            beforeInitialisation($module) {
+              $module.remove()
+            }
+          })
+        ).rejects.toEqual({
+          name: 'ElementError',
+          message: 'Character count: $module not found'
+        })
+      })
+
+      it('throws when receiving the wrong type for $module', async () => {
+        await expect(
+          renderAndInitialise(page, '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="govuk-character-count"></svg>`
+            }
+          })
+        ).rejects.toEqual({
+          name: 'ElementError',
+          message:
+            'Character count: $module is not an instance of "HTMLElement"'
+        })
+      })
+
       it('throws when receiving invalid configuration', async () => {
         await expect(
           renderAndInitialise(page, 'character-count', {

packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs

@@ -1,3 +1,4 @@
+import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 
 /**
@@ -30,7 +31,10 @@ export class Checkboxes extends GOVUKFrontendComponent {
     super()
 
     if (!($module instanceof HTMLElement)) {
-      return this
+      throw new ElementError($module, {
+        componentName: 'Checkboxes',
+        identifier: '$module'
+      })
     }
 
     /** @satisfies {NodeListOf<HTMLInputElement>} */

packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.puppeteer.test.js

@@ -339,6 +339,35 @@ describe('Checkboxes with multiple groups and a "None" checkbox and conditional
           message: 'GOV.UK Frontend is not supported in this browser'
         })
       })
+
+      it('throws when $module is not set', async () => {
+        await expect(
+          renderAndInitialise(page, 'checkboxes', {
+            params: examples.default,
+            beforeInitialisation($module) {
+              $module.remove()
+            }
+          })
+        ).rejects.toEqual({
+          name: 'ElementError',
+          message: 'Checkboxes: $module not found'
+        })
+      })
+
+      it('throws when receiving the wrong type for $module', async () => {
+        await expect(
+          renderAndInitialise(page, 'checkboxes', {
+            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="govuk-checkboxes"></svg>`
+            }
+          })
+        ).rejects.toEqual({
+          name: 'ElementError',
+          message: 'Checkboxes: $module is not an instance of "HTMLElement"'
+        })
+      })
     })
   })
 })

packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs

@@ -1,5 +1,6 @@
 import { mergeConfigs } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
+import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 
 /**
@@ -27,7 +28,10 @@ export class ErrorSummary extends GOVUKFrontendComponent {
     super()
 
     if (!($module instanceof HTMLElement)) {
-      return this
+      throw new ElementError($module, {
+        componentName: 'Error summary',
+        identifier: '$module'
+      })
     }
 
     this.$module = $module

packages/govuk-frontend/src/govuk/components/error-summary/error-summary.puppeteer.test.js

@@ -1,8 +1,7 @@
 const {
   goToComponent,
   goToExample,
-  renderAndInitialise,
-  goTo
+  renderAndInitialise
 } = require('@govuk-frontend/helpers/puppeteer')
 const { getExamples } = require('@govuk-frontend/lib/components')
 
@@ -94,26 +93,6 @@ describe('Error Summary', () => {
       })
     })
 
-    describe('using JavaScript configuration, with no elements on the page', () => {
-      it('does not prevent further JavaScript from running', async () => {
-        await goTo(page, '/tests/boilerplate')
-
-        const result = await page.evaluate(async (exportName) => {
-          const namespace = await import('govuk-frontend')
-
-          // `undefined` simulates the element being missing,
-          // from an unchecked `document.querySelector` for example
-          /* eslint-disable-next-line no-new */
-          new namespace[exportName](undefined)
-
-          // If our component initialisation breaks, this won't run
-          return true
-        }, 'ErrorSummary')
-
-        expect(result).toBe(true)
-      })
-    })
-
     describe('using JavaScript configuration, but enabled via data-attributes', () => {
       beforeAll(async () => {
         await renderAndInitialise(page, 'error-summary', {
@@ -251,5 +230,34 @@ describe('Error Summary', () => {
         message: 'GOV.UK Frontend is not supported in this browser'
       })
     })
+
+    it('throws when $module is not set', async () => {
+      await expect(
+        renderAndInitialise(page, 'error-summary', {
+          params: examples.default,
+          beforeInitialisation($module) {
+            $module.remove()
+          }
+        })
+      ).rejects.toEqual({
+        name: 'ElementError',
+        message: 'Error summary: $module not found'
+      })
+    })
+
+    it('throws when receiving the wrong type for $module', async () => {
+      await expect(
+        renderAndInitialise(page, '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="govuk-error-summary"></svg>`
+          }
+        })
+      ).rejects.toEqual({
+        name: 'ElementError',
+        message: 'Error summary: $module is not an instance of "HTMLElement"'
+      })
+    })
   })
 })

packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.mjs

@@ -1,10 +1,11 @@
 import { mergeConfigs, extractConfigByNamespace } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
+import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 import { I18n } from '../../i18n.mjs'
 
 /**
- * Exit This Page component
+ * Exit this page component
  *
  * @preserve
  */
@@ -81,7 +82,10 @@ export class ExitThisPage extends GOVUKFrontendComponent {
     super()
 
     if (!($module instanceof HTMLElement)) {
-      return this
+      throw new ElementError($module, {
+        componentName: 'Exit this page',
+        identifier: '$module'
+      })
     }
 
     const $button = $module.querySelector('.govuk-exit-this-page__button')