Add GOVUKFrontendNotSupported error

Allows components to indicate they didn't inistantiate because GOV.UK Frontend is not supported
alphagov · Aug 1, 2023 · 216600f · 216600f
1 parent c79909c
commit 216600f
Show file tree

Hide file tree

Showing 26 changed files with 696 additions and 294 deletions.
diff --git a/packages/govuk-frontend/src/govuk/all.mjs b/packages/govuk-frontend/src/govuk/all.mjs
@@ -12,6 +12,7 @@ import { NotificationBanner } from './components/notification-banner/notificatio
 import { Radios } from './components/radios/radios.mjs'
 import { SkipLink } from './components/skip-link/skip-link.mjs'
 import { Tabs } from './components/tabs/tabs.mjs'
+import { GOVUKFrontendError } from './errors/index.mjs'
 
 /**
  * Initialise all components
@@ -103,6 +104,7 @@ export {
   Checkboxes,
   ErrorSummary,
   ExitThisPage,
+  GOVUKFrontendError,
   Header,
   NotificationBanner,
   Radios,

diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs b/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 { GOVUKFrontendNotSupportedError } from '../../errors/index.mjs'
 import { I18n } from '../../i18n.mjs'
 
 /**
@@ -113,7 +114,11 @@ export class Accordion {
    * @param {AccordionConfig} [config] - Accordion config
    */
   constructor ($module, config) {
-    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
+    if (!document.body.classList.contains('govuk-frontend-supported')) {
+      throw new GOVUKFrontendNotSupportedError()
+    }
+
+    if (!($module instanceof HTMLElement)) {
       return this
     }
 

diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.test.js b/packages/govuk-frontend/src/govuk/components/accordion/accordion.test.js
@@ -508,6 +508,28 @@ describe('/components/accordion', () => {
             )
           })
         })
+
+        describe('errors at instantiation', () => {
+          let examples
+
+          beforeAll(async () => {
+            examples = await getExamples('accordion')
+          })
+
+          it('throws when GOV.UK Frontend is not supported', async () => {
+            await expect(
+              renderAndInitialise(page, 'accordion', {
+                params: examples.default,
+                beforeInitialisation () {
+                  document.body.classList.remove('govuk-frontend-supported')
+                }
+              })
+            ).rejects.toEqual({
+              name: 'GOVUKFrontendNotSupportedError',
+              message: 'GOV.UK Frontend is not supported in this browser'
+            })
+          })
+        })
       })
     })
   })

diff --git a/packages/govuk-frontend/src/govuk/components/button/button.mjs b/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 { GOVUKFrontendNotSupportedError } from '../../errors/index.mjs'
 
 const KEY_SPACE = 32
 const DEBOUNCE_TIMEOUT_IN_SECONDS = 1
@@ -29,7 +30,11 @@ export class Button {
    * @param {ButtonConfig} [config] - Button config
    */
   constructor ($module, config) {
-    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
+    if (!document.body.classList.contains('govuk-frontend-supported')) {
+      throw new GOVUKFrontendNotSupportedError()
+    }
+
+    if (!($module instanceof HTMLElement)) {
       return this
     }
 

diff --git a/packages/govuk-frontend/src/govuk/components/button/button.test.js b/packages/govuk-frontend/src/govuk/components/button/button.test.js
@@ -312,5 +312,27 @@ describe('/components/button', () => {
         expect(button2Counts.debounce).toBe(0)
       })
     })
+
+    describe('errors at instantiation', () => {
+      let examples
+
+      beforeAll(async () => {
+        examples = await getExamples('button')
+      })
+
+      it('throws when GOV.UK Frontend is not supported', async () => {
+        await expect(
+          renderAndInitialise(page, 'button', {
+            params: examples.default,
+            beforeInitialisation () {
+              document.body.classList.remove('govuk-frontend-supported')
+            }
+          })
+        ).rejects.toEqual({
+          name: 'GOVUKFrontendNotSupportedError',
+          message: 'GOV.UK Frontend is not supported in this browser'
+        })
+      })
+    })
   })
 })
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
@@ -1,6 +1,7 @@
 import { closestAttributeValue } from '../../common/closest-attribute-value.mjs'
 import { extractConfigByNamespace, mergeConfigs } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
+import { GOVUKFrontendNotSupportedError } from '../../errors/index.mjs'
 import { I18n } from '../../i18n.mjs'
 
 /**
@@ -64,7 +65,11 @@ export class CharacterCount {
    * @param {CharacterCountConfig} [config] - Character count config
    */
   constructor ($module, config) {
-    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
+    if (!document.body.classList.contains('govuk-frontend-supported')) {
+      throw new GOVUKFrontendNotSupportedError()
+    }
+
+    if (!($module instanceof HTMLElement)) {
       return this
     }
 

diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.test.js b/packages/govuk-frontend/src/govuk/components/character-count/character-count.test.js
@@ -634,6 +634,28 @@ describe('Character count', () => {
         )
       })
     })
+
+    describe('errors at instantiation', () => {
+      let examples
+
+      beforeAll(async () => {
+        examples = await getExamples('character-count')
+      })
+
+      it('throws when GOV.UK Frontend is not supported', async () => {
+        await expect(
+          renderAndInitialise(page, 'character-count', {
+            params: examples.default,
+            beforeInitialisation () {
+              document.body.classList.remove('govuk-frontend-supported')
+            }
+          })
+        ).rejects.toEqual({
+          name: 'GOVUKFrontendNotSupportedError',
+          message: 'GOV.UK Frontend is not supported in this browser'
+        })
+      })
+    })
   })
 
   describe('in mismatched locale', () => {

diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
@@ -1,3 +1,5 @@
+import { GOVUKFrontendNotSupportedError } from '../../errors/index.mjs'
+
 /**
  * Checkboxes component
  */
@@ -23,7 +25,11 @@ export class Checkboxes {
    * @param {Element} $module - HTML element to use for checkboxes
    */
   constructor ($module) {
-    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
+    if (!document.body.classList.contains('govuk-frontend-supported')) {
+      throw new GOVUKFrontendNotSupportedError()
+    }
+
+    if (!($module instanceof HTMLElement)) {
       return this
     }
 

diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.test.js b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.test.js
@@ -1,4 +1,5 @@
-const { goToComponent, goToExample, getAttribute, getProperty, isVisible } = require('govuk-frontend-helpers/puppeteer')
+const { goToComponent, goToExample, getAttribute, getProperty, isVisible, renderAndInitialise } = require('govuk-frontend-helpers/puppeteer')
+const { getExamples } = require('govuk-frontend-lib/files.js')
 
 describe('Checkboxes with conditional reveals', () => {
   describe('when JavaScript is unavailable or fails', () => {
@@ -286,5 +287,27 @@ describe('Checkboxes with multiple groups and a "None" checkbox and conditional
       // Expect conditional content to have been collapsed
       expect(await isVisible($conditionalPrimary)).toBe(false)
     })
+
+    describe('errors at instantiation', () => {
+      let examples
+
+      beforeAll(async () => {
+        examples = await getExamples('checkboxes')
+      })
+
+      it('throws when GOV.UK Frontend is not supported', async () => {
+        await expect(
+          renderAndInitialise(page, 'checkboxes', {
+            params: examples.default,
+            beforeInitialisation () {
+              document.body.classList.remove('govuk-frontend-supported')
+            }
+          })
+        ).rejects.toEqual({
+          name: 'GOVUKFrontendNotSupportedError',
+          message: 'GOV.UK Frontend is not supported in this browser'
+        })
+      })
+    })
   })
 })
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,5 +1,6 @@
 import { mergeConfigs } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
+import { GOVUKFrontendNotSupportedError } from '../../errors/index.mjs'
 
 /**
  * Error summary component
@@ -22,14 +23,11 @@ export class ErrorSummary {
    * @param {ErrorSummaryConfig} [config] - Error summary config
    */
   constructor ($module, config) {
-    // Some consuming code may not be passing a module,
-    // for example if they initialise the component
-    // on their own by directly passing the result
-    // of `document.querySelector`.
-    // To avoid breaking further JavaScript initialisation
-    // we need to safeguard against this so things keep
-    // working the same now we read the elements data attributes
-    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
+    if (!document.body.classList.contains('govuk-frontend-supported')) {
+      throw new GOVUKFrontendNotSupportedError()
+    }
+
+    if (!($module instanceof HTMLElement)) {
       return this
     }
 

diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.test.js b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.test.js
@@ -195,4 +195,26 @@ describe('Error Summary', () => {
       expect(hash).toBe('')
     })
   })
+
+  describe('errors at instantiation', () => {
+    let examples
+
+    beforeAll(async () => {
+      examples = await getExamples('error-summary')
+    })
+
+    it('throws when GOV.UK Frontend is not supported', async () => {
+      await expect(
+        renderAndInitialise(page, 'error-summary', {
+          params: examples.default,
+          beforeInitialisation () {
+            document.body.classList.remove('govuk-frontend-supported')
+          }
+        })
+      ).rejects.toEqual({
+        name: 'GOVUKFrontendNotSupportedError',
+        message: 'GOV.UK Frontend is not supported in this browser'
+      })
+    })
+  })
 })
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,5 +1,6 @@
 import { mergeConfigs, extractConfigByNamespace } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
+import { GOVUKFrontendNotSupportedError } from '../../errors/index.mjs'
 import { I18n } from '../../i18n.mjs'
 
 /**
@@ -75,7 +76,11 @@ export class ExitThisPage {
    * @param {ExitThisPageConfig} [config] - Exit This Page config
    */
   constructor ($module, config) {
-    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
+    if (!document.body.classList.contains('govuk-frontend-supported')) {
+      throw new GOVUKFrontendNotSupportedError()
+    }
+
+    if (!($module instanceof HTMLElement)) {
       return this
     }
 

diff --git a/packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.test.js b/packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.test.js
@@ -1,4 +1,5 @@
-const { goToComponent, goToExample } = require('govuk-frontend-helpers/puppeteer')
+const { goToComponent, goToExample, renderAndInitialise } = require('govuk-frontend-helpers/puppeteer')
+const { getExamples } = require('govuk-frontend-lib/files.js')
 
 const buttonClass = '.govuk-js-exit-this-page-button'
 const skiplinkClass = '.govuk-js-exit-this-page-skiplink'
@@ -164,5 +165,27 @@ describe('/components/exit-this-page', () => {
         expect(message).toBe('Exit this page expired.')
       })
     })
+
+    describe('errors at instantiation', () => {
+      let examples
+
+      beforeAll(async () => {
+        examples = await getExamples('exit-this-page')
+      })
+
+      it('throws when GOV.UK Frontend is not supported', async () => {
+        await expect(
+          renderAndInitialise(page, 'exit-this-page', {
+            params: examples.default,
+            beforeInitialisation () {
+              document.body.classList.remove('govuk-frontend-supported')
+            }
+          })
+        ).rejects.toEqual({
+          name: 'GOVUKFrontendNotSupportedError',
+          message: 'GOV.UK Frontend is not supported in this browser'
+        })
+      })
+    })
   })
 })
diff --git a/packages/govuk-frontend/src/govuk/components/globals.test.js b/packages/govuk-frontend/src/govuk/components/globals.test.js
@@ -37,6 +37,7 @@ describe('GOV.UK Frontend', () => {
         'Checkboxes',
         'ErrorSummary',
         'ExitThisPage',
+        'GOVUKFrontendError',
         'Header',
         'NotificationBanner',
         'Radios',

diff --git a/packages/govuk-frontend/src/govuk/components/header/header.mjs b/packages/govuk-frontend/src/govuk/components/header/header.mjs
@@ -1,3 +1,5 @@
+import { GOVUKFrontendNotSupportedError } from '../../errors/index.mjs'
+
 /**
  * Header component
  */
@@ -37,7 +39,11 @@ export class Header {
    * @param {Element} $module - HTML element to use for header
    */
   constructor ($module) {
-    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
+    if (!document.body.classList.contains('govuk-frontend-supported')) {
+      throw new GOVUKFrontendNotSupportedError()
+    }
+
+    if (!($module instanceof HTMLElement)) {
       return this
     }
 

diff --git a/packages/govuk-frontend/src/govuk/components/header/header.test.js b/packages/govuk-frontend/src/govuk/components/header/header.test.js
@@ -1,4 +1,5 @@
-const { goToComponent } = require('govuk-frontend-helpers/puppeteer')
+const { goToComponent, renderAndInitialise } = require('govuk-frontend-helpers/puppeteer')
+const { getExamples } = require('govuk-frontend-lib/files.js')
 const { KnownDevices } = require('puppeteer')
 
 const iPhone = KnownDevices['iPhone 6']
@@ -152,5 +153,27 @@ describe('Header navigation', () => {
         expect(ariaExpanded).toBe('false')
       })
     })
+
+    describe('errors at instantiation', () => {
+      let examples
+
+      beforeAll(async () => {
+        examples = await getExamples('header')
+      })
+
+      it('throws when GOV.UK Frontend is not supported', async () => {
+        await expect(
+          renderAndInitialise(page, 'header', {
+            params: examples.default,
+            beforeInitialisation () {
+              document.body.classList.remove('govuk-frontend-supported')
+            }
+          })
+        ).rejects.toEqual({
+          name: 'GOVUKFrontendNotSupportedError',
+          message: 'GOV.UK Frontend is not supported in this browser'
+        })
+      })
+    })
   })
 })