Merge pull request #4117 from alphagov/initall-support-error-log

packages/govuk-frontend/src/govuk/all.mjs

@@ -1,6 +1,7 @@
 /* eslint-disable no-new */
 
 import { version } from './common/govuk-frontend-version.mjs'
+import { isSupported } from './common/index.mjs'
 import { Accordion } from './components/accordion/accordion.mjs'
 import { Button } from './components/button/button.mjs'
 import { CharacterCount } from './components/character-count/character-count.mjs'
@@ -12,6 +13,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 { SupportError } from './errors/index.mjs'
 
 /**
  * Initialise all components
@@ -25,7 +27,8 @@ function initAll(config) {
   config = typeof config !== 'undefined' ? config : {}
 
   // Skip initialisation when GOV.UK Frontend is not supported
-  if (!document.body.classList.contains('govuk-frontend-supported')) {
+  if (!isSupported()) {
+    console.log(new SupportError())
     return
   }
 

packages/govuk-frontend/src/govuk/all.unit.test.mjs

@@ -70,12 +70,28 @@ describe('initAll', () => {
     }
   )
 
-  it('returns early if govuk-frontend-supported class is not present', () => {
-    document.body.innerHTML = '<div data-module="govuk-accordion"></div>'
+  describe('govuk-frontend-supported not present', () => {
+    it('returns early', () => {
+      document.body.innerHTML = '<div data-module="govuk-accordion"></div>'
+
+      GOVUKFrontend.initAll()
+
+      expect(GOVUKFrontend.Accordion).not.toHaveBeenCalled()
+    })
 
-    GOVUKFrontend.initAll()
+    it('logs why it did not initialise components', () => {
+      // Silence warnings in test output, and allow us to 'expect' them
+      jest.spyOn(global.console, 'log').mockImplementation()
 
-    expect(GOVUKFrontend.Accordion).not.toHaveBeenCalled()
+      GOVUKFrontend.initAll()
+
+      // Only validate the message as it's the important part for the user
+      expect(global.console.log).toHaveBeenCalledWith(
+        expect.objectContaining({
+          message: 'GOV.UK Frontend is not supported in this browser'
+        })
+      )
+    })
   })
 
   it('only initialises components within a given scope', () => {