Update Puppeteer tests to use ES modules not window globals

An import map has been added to resolve `govuk-frontend` to `/javascripts/all.bundle.min.mjs` when run inside Puppeteer `page.evaluate()`

Author: colinrotherham

package-lock.json

@@ -4,6 +4,10 @@
   <link rel="stylesheet" href="/stylesheets/app.min.css">
 
   {% block styles %}{% endblock %}
+
+  <script type="importmap">
+    { "imports": { "govuk-frontend": "/javascripts/all.bundle.min.mjs" } }
+  </script>
 {% endblock %}
 
 {% block bodyStart %}

packages/govuk-frontend-review/src/views/layouts/_generic.njk

@@ -18,14 +18,12 @@ describe('/components/button', () => {
     it('does not prevent further JavaScript from running', async () => {
       await goTo(page, '/tests/boilerplate')
 
-      const result = await page.evaluate((component) => {
-        const namespace = 'GOVUKFrontend' in window
-          ? window.GOVUKFrontend
-          : {}
+      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
-        new namespace[component](undefined).init()
+        new namespace[exportName](undefined).init()
 
         // If our component initialisation breaks, this won't run
         return true

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

@@ -648,17 +648,14 @@ describe('Character count', () => {
           // Override maxlength to 10
           maxlength: 10
         },
-        initialiser ({ config, namespace }) {
-          const $component = document.querySelector('[data-module]')
-
+        initialiser ($module) {
           // Set locale to Welsh, which expects translations for 'one', 'two',
           // 'few' 'many' and 'other' forms – with the default English strings
           // provided we only have translations for 'one' and 'other'.
           //
           // We want to make sure we handle this gracefully in case users have
           // an existing character count inside an incorrect locale.
-          $component.setAttribute('lang', 'cy')
-          new namespace.CharacterCount($component, config).init()
+          $module.setAttribute('lang', 'cy')
         }
       })
 

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

@@ -1,4 +1,4 @@
-const { goToComponent, goToExample, renderAndInitialise } = require('govuk-frontend-helpers/puppeteer')
+const { goToComponent, goToExample, renderAndInitialise, goTo } = require('govuk-frontend-helpers/puppeteer')
 const { getExamples } = require('govuk-frontend-lib/files')
 
 describe('Error Summary', () => {
@@ -82,14 +82,14 @@ describe('Error Summary', () => {
 
     describe('using JavaScript configuration, with no elements on the page', () => {
       it('does not prevent further JavaScript from running', async () => {
-        const result = await page.evaluate((component) => {
-          const namespace = 'GOVUKFrontend' in window
-            ? window.GOVUKFrontend
-            : {}
+        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
-          new namespace[component](undefined).init()
+          new namespace[exportName](undefined).init()
 
           // If our component initialisation breaks, this won't run
           return true

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

@@ -7,21 +7,17 @@ describe('GOV.UK Frontend', () => {
     beforeEach(async () => {
       await goTo(page, '/')
 
-      // Exported via global (e.g GOVUKFrontend.initAll)
-      exported = await page.evaluate(() => 'GOVUKFrontend' in window
-        ? Object.keys(window.GOVUKFrontend)
-        : undefined
+      // Exports available via browser dynamic import
+      exported = await page.evaluate(async () =>
+        Object.keys(await import('govuk-frontend'))
       )
     })
 
     it('exports `initAll` function', async () => {
       await goTo(page, '/')
 
-      const typeofInitAll = await page.evaluate((utility) => {
-        const namespace = 'GOVUKFrontend' in window
-          ? window.GOVUKFrontend
-          : {}
-
+      const typeofInitAll = await page.evaluate(async (utility) => {
+        const namespace = await import('govuk-frontend')
         return typeof namespace[utility]
       }, 'initAll')
 
@@ -53,10 +49,8 @@ describe('GOV.UK Frontend', () => {
       const components = exported
         .filter(method => !['initAll', 'version'].includes(method))
 
-      const componentsWithoutInitFunctions = await page.evaluate((components) => {
-        const namespace = 'GOVUKFrontend' in window
-          ? window.GOVUKFrontend
-          : {}
+      const componentsWithoutInitFunctions = await page.evaluate(async (components) => {
+        const namespace = await import('govuk-frontend')
 
         return components.filter(component => {
           const prototype = namespace[component].prototype

packages/govuk-frontend/src/govuk/components/globals.test.mjs

@@ -16,6 +16,7 @@
   "devDependencies": {
     "@axe-core/puppeteer": "^4.7.3",
     "cheerio": "^1.0.0-rc.12",
+    "govuk-frontend": "*",
     "govuk-frontend-config": "*",
     "govuk-frontend-lib": "*",
     "jest-axe": "^7.0.1",

shared/helpers/package.json

@@ -76,9 +76,8 @@ async function axe (page, overrides = {}) {
  * @param {object} options - Render and initialise options
  * @param {object} options.params - Nunjucks macro params
  * @param {object} [options.config] - Component instantiation config
- * @param {(context: { config?: object, namespace: object }) => void} [options.initialiser] - A function that'll run in the
- *   browser to execute arbitrary initialisation. Receives an object with the
- *   passed configuration as `config` and the GOVUKFrontend global as `namespace`
+ * @param {($module: Element) => void} [options.initialiser] - A function that'll run in the
+ *   browser to execute arbitrary initialisation
  * @returns {Promise<import('puppeteer').Page>} Puppeteer page object
  */
 async function renderAndInitialise (page, componentName, options) {
@@ -92,22 +91,15 @@ async function renderAndInitialise (page, componentName, options) {
   }, html)
 
   // Run a script to init the JavaScript component
-  await page.evaluate((componentClassName, options) => {
-    const $component = document.querySelector('[data-module]')
-
-    // Check for window global
-    if (!('GOVUKFrontend' in window) || !window.GOVUKFrontend[componentClassName]) {
-      throw new Error(`Global 'window.GOVUKFrontend.${componentClassName}' not found`)
-    }
+  await page.evaluate(async (exportName, options) => {
+    const $module = document.querySelector('[data-module]')
 
     if (options.initialiser) {
-      return options.initialiser({
-        config: options.config,
-        namespace: window.GOVUKFrontend
-      })
+      options.initialiser($module)
     }
 
-    new window.GOVUKFrontend[componentClassName]($component, options.config).init()
+    const namespace = await import('govuk-frontend')
+    new namespace[exportName]($module, options.config).init()
   }, componentNameToClassName(componentName), options)
 
   return page

shared/helpers/puppeteer.js

@@ -1,4 +1,11 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": ["**/*.js", "**/*.mjs", "../config", "../lib"]
+  "include": [
+    "**/*.js",
+    "**/*.mjs",
+    "../config",
+    "../lib",
+    "../../packages/govuk-frontend"
+  ],
+  "exclude": ["./dist/**", "../../packages/govuk-frontend/dist/**"]
 }