Test boilerplate
Used during testing to inject rendered components and test specific configurations
-
-
-
+
+{% endblock %}
+
+{% block bodyEnd %}
+
+{% endblock %}
diff --git a/packages/govuk-frontend-review/tasks/scripts.mjs b/packages/govuk-frontend-review/tasks/scripts.mjs
index 9ec4badaf0..3ae26f46f4 100644
--- a/packages/govuk-frontend-review/tasks/scripts.mjs
+++ b/packages/govuk-frontend-review/tasks/scripts.mjs
@@ -18,9 +18,9 @@ export const compile = (options) => gulp.series(
destPath: join(options.destPath, 'javascripts'),
configPath: join(options.basePath, 'rollup.config.mjs'),
- // Rename with `*.min.js` extension
+ // Rename with `*.bundle.min.mjs` extension
filePath ({ dir, name }) {
- return join(dir, `${name}.min.js`)
+ return join(dir, `${name}.bundle.min.mjs`)
}
})
),
diff --git a/packages/govuk-frontend/postcss.config.mjs b/packages/govuk-frontend/postcss.config.mjs
index f725e8b4a8..d4e3ee2f8a 100644
--- a/packages/govuk-frontend/postcss.config.mjs
+++ b/packages/govuk-frontend/postcss.config.mjs
@@ -2,7 +2,7 @@ import autoprefixer from 'autoprefixer'
import cssnano from 'cssnano'
import cssnanoPresetDefault from 'cssnano-preset-default'
import { pkg } from 'govuk-frontend-config'
-import { isDev } from 'govuk-frontend-tasks/helpers/task-arguments.mjs'
+import { isDev } from 'govuk-frontend-tasks/helpers/task-arguments.js'
import postcss from 'postcss'
import scss from 'postcss-scss'
diff --git a/packages/govuk-frontend/src/govuk/components/button/button.test.js b/packages/govuk-frontend/src/govuk/components/button/button.test.js
index 0e302fc02c..96c6f9c602 100644
--- a/packages/govuk-frontend/src/govuk/components/button/button.test.js
+++ b/packages/govuk-frontend/src/govuk/components/button/button.test.js
@@ -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
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
index c3c2e6af78..0c0e8e603a 100644
--- 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
@@ -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')
}
})
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
index ba2211abbd..9321e1a1e1 100644
--- 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
@@ -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
diff --git a/packages/govuk-frontend/src/govuk/components/globals.test.mjs b/packages/govuk-frontend/src/govuk/components/globals.test.mjs
index cc5b328865..22571a2514 100644
--- a/packages/govuk-frontend/src/govuk/components/globals.test.mjs
+++ b/packages/govuk-frontend/src/govuk/components/globals.test.mjs
@@ -5,23 +5,19 @@ describe('GOV.UK Frontend', () => {
let exported
beforeEach(async () => {
- await goTo(page, '/')
+ await goTo(page, '/tests/boilerplate')
- // 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
- : {}
+ await goTo(page, '/tests/boilerplate')
+ const typeofInitAll = await page.evaluate(async (utility) => {
+ const namespace = await import('govuk-frontend')
return typeof namespace[utility]
}, 'initAll')
@@ -52,10 +48,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
diff --git a/shared/helpers/package.json b/shared/helpers/package.json
index ddc4a983d8..3dcf9b14d8 100644
--- a/shared/helpers/package.json
+++ b/shared/helpers/package.json
@@ -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",
diff --git a/shared/helpers/puppeteer.js b/shared/helpers/puppeteer.js
index c593bd6d75..18e549a390 100644
--- a/shared/helpers/puppeteer.js
+++ b/shared/helpers/puppeteer.js
@@ -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