Merge pull request #4394 from alphagov/support-error-body

Improve SupportError when `document.body` is not set
alphagov · Oct 27, 2023 · b4daaab · b4daaab
2 parents acccc75 + b90b303
commit b4daaab
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 8 deletions.
diff --git a/packages/govuk-frontend/src/govuk/common/index.jsdom.test.mjs b/packages/govuk-frontend/src/govuk/common/index.jsdom.test.mjs
@@ -124,6 +124,12 @@ describe('Common JS utilities', () => {
     it('returns false if the govuk-frontend-supported class is not set', () => {
       expect(isSupported(document.body)).toBe(false)
     })
+
+    it('returns false when `document.body` is not set', () => {
+      // For example, running `initAll()` in `<head>` without `type="module"`
+      // will see support checks run when document.body is still `null`
+      expect(isSupported(null)).toBe(false)
+    })
   })
 
   describe('getFragmentFromUrl', () => {

diff --git a/packages/govuk-frontend/src/govuk/common/index.mjs b/packages/govuk-frontend/src/govuk/common/index.mjs
@@ -140,10 +140,14 @@ export function getFragmentFromUrl(url) {
  * won't be supported.
  *
  * @internal
- * @param {HTMLElement} [$scope] - The `<body>` element of the document to check for support
+ * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support
  * @returns {boolean} Whether GOV.UK Frontend is supported on this page
  */
 export function isSupported($scope = document.body) {
+  if (!$scope) {
+    return false
+  }
+
   return $scope.classList.contains('govuk-frontend-supported')
 }
 

diff --git a/packages/govuk-frontend/src/govuk/errors/index.jsdom.test.mjs b/packages/govuk-frontend/src/govuk/errors/index.jsdom.test.mjs
@@ -13,16 +13,26 @@ describe('errors', () => {
 
   describe('SupportError', () => {
     it('is an instance of GOVUKFrontendError', () => {
-      expect(new SupportError()).toBeInstanceOf(GOVUKFrontendError)
+      expect(new SupportError(document.body)).toBeInstanceOf(GOVUKFrontendError)
     })
+
     it('has its own name set', () => {
-      expect(new SupportError().name).toBe('SupportError')
+      expect(new SupportError(document.body).name).toBe('SupportError')
     })
-    it('provides meaningful feedback to users', () => {
-      expect(new SupportError().message).toBe(
+
+    it('provides feedback regarding browser support', () => {
+      expect(new SupportError(document.body).message).toBe(
         'GOV.UK Frontend is not supported in this browser'
       )
     })
+
+    it('provides feedback when `document.body` is not set', () => {
+      // For example, running `initAll()` in `<head>` without `type="module"`
+      // will see support checks run when document.body is still `null`
+      expect(new SupportError(null).message).toBe(
+        'GOV.UK Frontend initialised without `<script type="module">`'
+      )
+    })
   })
 
   describe('ElementError', () => {

diff --git a/packages/govuk-frontend/src/govuk/errors/index.mjs b/packages/govuk-frontend/src/govuk/errors/index.mjs
@@ -28,9 +28,17 @@ export class GOVUKFrontendError extends Error {
 export class SupportError extends GOVUKFrontendError {
   name = 'SupportError'
 
-  // eslint-disable-next-line jsdoc/require-jsdoc -- Nothing pertinent to document
-  constructor() {
-    super('GOV.UK Frontend is not supported in this browser')
+  /**
+   * Checks if GOV.UK Frontend is supported on this page
+   *
+   * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support
+   */
+  constructor($scope = document.body) {
+    super(
+      $scope
+        ? 'GOV.UK Frontend is not supported in this browser'
+        : 'GOV.UK Frontend initialised without `<script type="module">`'
+    )
   }
 }