Merge pull request #3992 from alphagov/update-js-approach-ready-for-v5

Update `module.js` ready for v5 of govuk-frontend
alphagov · May 21, 2024 · 50eb9e1 · 50eb9e1
2 parents a895fc1 + 04a3f96
commit 50eb9e1
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Update module.js ready for v5 of govuk-frontend ([PR #3992](https://github.com/alphagov/govuk_publishing_components/pull/3992))
+
 ## 38.3.2
 
 * Reintroduce feedback survey path and new tab functionality ([PR #4024](https://github.com/alphagov/govuk_publishing_components/pull/4024))

diff --git a/app/assets/javascripts/govuk_publishing_components/modules.js b/app/assets/javascripts/govuk_publishing_components/modules.js
@@ -36,15 +36,20 @@
           var moduleName = camelCaseAndCapitalise(moduleNames[j])
           var started = element.getAttribute('data-' + moduleNames[j] + '-module-started')
           if (typeof GOVUK.Modules[moduleName] === 'function' && !started) {
-            // Vanilla JavaScript GOV.UK Modules and GOV.UK Frontend Modules
-            if (GOVUK.Modules[moduleName].prototype.init) {
-              try {
+            try {
+              if (GOVUK.Modules[moduleName].prototype.init) {
+                // Vanilla JavaScript GOV.UK Modules and GOV.UK Frontend V4 Modules
                 new GOVUK.Modules[moduleName](element).init()
-                element.setAttribute('data-' + moduleNames[j] + '-module-started', true)
-              } catch (e) {
-                // if there's a problem with the module, catch the error to allow other modules to start
-                console.error('Error starting ' + moduleName + ' component JS: ', e, window.location)
+              } else {
+                // GOV.UK Frontend V5 Modules - removed component init() methods and initialise in constructor
+                // https://github.com/alphagov/govuk-design-system-architecture/blob/main/decision-records/010-remove-init-method.md
+                /* eslint-disable no-new */
+                new GOVUK.Modules[moduleName](element)
               }
+              element.setAttribute('data-' + moduleNames[j] + '-module-started', true)
+            } catch (e) {
+              // if there's a problem with the module, catch the error to allow other modules to start
+              console.error('Error starting ' + moduleName + ' component JS: ', e, window.location)
             }
           }
         }

diff --git a/spec/javascripts/govuk_publishing_components/modules.spec.js b/spec/javascripts/govuk_publishing_components/modules.spec.js
@@ -74,10 +74,12 @@ describe('GOVUK Modules', function () {
   describe('when modules exist', function () {
     var container
     var callbackFrontendModule
+    var callbackFrontendModuleVersionFive
     var callbackGemFrontendModule
 
     beforeEach(function () {
       callbackFrontendModule = jasmine.createSpy()
+      callbackFrontendModuleVersionFive = jasmine.createSpy()
       callbackGemFrontendModule = jasmine.createSpy()
 
       // GOV.UK Frontend Modules
@@ -89,6 +91,16 @@ describe('GOVUK Modules', function () {
       }
       GOVUK.Modules.TestAlertFrontendModule = TestAlertFrontendModule
 
+      // GOV.UK Frontend Modules - V5
+      function TestAlertFrontendModuleVersionFive (element) {
+        this.element = element
+        this.initControls()
+      }
+      TestAlertFrontendModuleVersionFive.prototype.initControls = function () {
+        callbackFrontendModuleVersionFive(this.element)
+      }
+      GOVUK.Modules.TestAlertFrontendModuleVersionFive = TestAlertFrontendModuleVersionFive
+
       // GOV.UK Gem Frontend Modules
       function GemTestAlertFrontendModule (element) {
         this.element = element
@@ -136,6 +148,7 @@ describe('GOVUK Modules', function () {
 
     afterEach(function () {
       delete GOVUK.Modules.TestAlertFrontendModule
+      delete GOVUK.Modules.TestAlertFrontendModuleVersionFive
       delete GOVUK.Modules.GemTestAlertFrontendModule
       delete GOVUK.Modules.TestAlertPublishingAndFrontendModule
       delete GOVUK.Modules.TestCookieDependencyModule
@@ -154,12 +167,19 @@ describe('GOVUK Modules', function () {
     })
 
     it('does not start modules that are already started', function () {
-      var module = $('<div data-module="test-alert-frontend-module"></div>')
-      container.append(module)
+      var modules = $(
+        '<div data-module="test-alert-frontend-module"></div>' +
+        '<div data-module="test-alert-frontend-module-version-five"></div>' +
+        '<div data-module="gem-test-alert-frontend-module"></div>'
+      )
 
-      GOVUK.modules.start(module[0])
-      GOVUK.modules.start(module[0])
+      $('body').append(modules)
+      GOVUK.modules.start()
+      GOVUK.modules.start()
       expect(callbackFrontendModule.calls.count()).toBe(1)
+      expect(callbackFrontendModuleVersionFive.calls.count()).toBe(1)
+      expect(callbackGemFrontendModule.calls.count()).toBe(1)
+      modules.remove()
     })
 
     it('passes the HTML element to the module’s start method', function () {
@@ -176,12 +196,17 @@ describe('GOVUK Modules', function () {
       var modules = $(
         '<div data-module="test-alert-frontend-module"></div>' +
         '<strong data-module="test-alert-frontend-module"></strong>' +
-        '<span data-module="test-alert-frontend-module"></span>'
+        '<span data-module="test-alert-frontend-module"></span>' +
+        '<div data-module="test-alert-frontend-module-version-five"></div>' +
+        '<strong data-module="test-alert-frontend-module-version-five"></strong>' +
+        '<div data-module="gem-test-alert-frontend-module"></div>'
       )
 
       $('body').append(modules)
       GOVUK.modules.start()
       expect(callbackFrontendModule.calls.count()).toBe(3)
+      expect(callbackFrontendModuleVersionFive.calls.count()).toBe(2)
+      expect(callbackGemFrontendModule.calls.count()).toBe(1)
       modules.remove()
     })
 
@@ -197,6 +222,18 @@ describe('GOVUK Modules', function () {
       modules.remove()
     })
 
+    it('starts govuk-frontend v5 and gem modules on a single element', function () {
+      var modules = $(
+        '<div data-module="test-alert-frontend-module-version-five gem-test-alert-frontend-module"></div>'
+      )
+
+      $('body').append(modules)
+      GOVUK.modules.start()
+      expect(callbackGemFrontendModule.calls.count()).toBe(1)
+      expect(callbackFrontendModuleVersionFive.calls.count()).toBe(1)
+      modules.remove()
+    })
+
     it('starts delayed modules once cookies have been consented', function () {
       var module = $('<div data-module="test-cookie-dependency-module"></div>')
       container.append(module)