From c2cc1ae726888a87de68d250761fc95c32ea9169 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Mon, 16 Oct 2023 15:29:17 +0100
Subject: [PATCH] Rename component render functions to `render()`

Test helpers and lib functions are now consistent

Library functions always return strings, but test helpers are available for Nunjucks (via Cheerio) and Google Chrome (via Puppeteer page)

```
import { render } from '@govuk-frontend/lib/components'
import { render } from '@govuk-frontend/helpers/nunjucks'
import { render } from '@govuk-frontend/helpers/puppeteer'
```
---
 packages/govuk-frontend-review/src/app.mjs    |  4 +-
 .../common/nunjucks/globals/get-html-code.mjs |  4 +-
 .../accordion/accordion.puppeteer.test.js     | 10 +--
 .../button/button.puppeteer.test.js           | 28 +++-----
 .../character-count.jsdom.test.mjs            |  7 +-
 .../character-count.puppeteer.test.js         | 69 ++++++++-----------
 .../checkboxes/checkboxes.puppeteer.test.js   | 29 ++++----
 .../components/components.template.test.js    |  4 +-
 .../error-summary.puppeteer.test.js           | 14 ++--
 .../exit-this-page.puppeteer.test.js          | 10 +--
 .../header/header.puppeteer.test.js           | 15 ++--
 .../notification-banner.puppeteer.test.js     | 17 ++---
 .../radios/radios.puppeteer.test.js           | 23 +++----
 .../skip-link/skip-link.puppeteer.test.js     | 15 ++--
 .../components/tabs/tabs.puppeteer.test.js    | 12 ++--
 shared/helpers/nunjucks.js                    |  2 +-
 shared/helpers/puppeteer.js                   | 15 ++--
 shared/lib/components.js                      |  6 +-
 shared/tasks/components.mjs                   |  4 +-
 19 files changed, 120 insertions(+), 168 deletions(-)

diff --git a/packages/govuk-frontend-review/src/app.mjs b/packages/govuk-frontend-review/src/app.mjs
index 6abd786169..937b07b6de 100644
--- a/packages/govuk-frontend-review/src/app.mjs
+++ b/packages/govuk-frontend-review/src/app.mjs
@@ -5,7 +5,7 @@ import {
   getComponentsFixtures,
   getComponentNames,
   getComponentNamesFiltered,
-  renderComponent,
+  render,
   renderPreview
 } from '@govuk-frontend/lib/components'
 import { filterPath, hasPath } from '@govuk-frontend/lib/files'
@@ -159,7 +159,7 @@ export default async () => {
       }
 
       // Construct and evaluate the component with the data for this example
-      res.locals.componentView = renderComponent(componentName, {
+      res.locals.componentView = render(componentName, {
         context: fixture.options,
         env
       })
diff --git a/packages/govuk-frontend-review/src/common/nunjucks/globals/get-html-code.mjs b/packages/govuk-frontend-review/src/common/nunjucks/globals/get-html-code.mjs
index 8312e3e5ac..1357727838 100644
--- a/packages/govuk-frontend-review/src/common/nunjucks/globals/get-html-code.mjs
+++ b/packages/govuk-frontend-review/src/common/nunjucks/globals/get-html-code.mjs
@@ -1,4 +1,4 @@
-import { renderComponent } from '@govuk-frontend/lib/components'
+import { render } from '@govuk-frontend/lib/components'
 import beautify from 'js-beautify'
 
 /**
@@ -10,7 +10,7 @@ import beautify from 'js-beautify'
  * @returns {string} HTML rendered by the component
  */
 export function getHTMLCode(componentName, options) {
-  const html = renderComponent(componentName, { ...options, env: this.env })
+  const html = render(componentName, { ...options, env: this.env })
 
   // Default beautify options
   const beautifyOptions = beautify.html.defaultOptions()
diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/accordion/accordion.puppeteer.test.js
index 7f8bddb592..1fc54b7fb5 100644
--- a/packages/govuk-frontend/src/govuk/components/accordion/accordion.puppeteer.test.js
+++ b/packages/govuk-frontend/src/govuk/components/accordion/accordion.puppeteer.test.js
@@ -1,7 +1,7 @@
 const {
   goToComponent,
   goToExample,
-  renderAndInitialise,
+  render,
   getAccessibleName
 } = require('@govuk-frontend/helpers/puppeteer')
 const { getExamples } = require('@govuk-frontend/lib/components')
@@ -685,7 +685,7 @@ describe('/components/accordion', () => {
           })
 
           it('injects the localised strings as text not HTML', async () => {
-            await renderAndInitialise(page, 'accordion', examples.default, {
+            await render(page, 'accordion', examples.default, {
               config: {
                 i18n: {
                   showAllSections: 'Show <strong>all sections</strong>',
@@ -721,7 +721,7 @@ describe('/components/accordion', () => {
 
           it('throws when GOV.UK Frontend is not supported', async () => {
             await expect(
-              renderAndInitialise(page, 'accordion', examples.default, {
+              render(page, 'accordion', examples.default, {
                 beforeInitialisation() {
                   document.body.classList.remove('govuk-frontend-supported')
                 }
@@ -734,7 +734,7 @@ describe('/components/accordion', () => {
 
           it('throws when $module is not set', async () => {
             await expect(
-              renderAndInitialise(page, 'accordion', examples.default, {
+              render(page, 'accordion', examples.default, {
                 beforeInitialisation($module) {
                   $module.remove()
                 }
@@ -747,7 +747,7 @@ describe('/components/accordion', () => {
 
           it('throws when receiving the wrong type for $module', async () => {
             await expect(
-              renderAndInitialise(page, 'accordion', examples.default, {
+              render(page, 'accordion', examples.default, {
                 beforeInitialisation($module) {
                   // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
                   $module.outerHTML = `<svg data-module="govuk-accordion"></svg>`
diff --git a/packages/govuk-frontend/src/govuk/components/button/button.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/button/button.puppeteer.test.js
index 80be44b575..7caac3ab7e 100644
--- a/packages/govuk-frontend/src/govuk/components/button/button.puppeteer.test.js
+++ b/packages/govuk-frontend/src/govuk/components/button/button.puppeteer.test.js
@@ -1,7 +1,4 @@
-const {
-  goToComponent,
-  renderAndInitialise
-} = require('@govuk-frontend/helpers/puppeteer')
+const { goToComponent, render } = require('@govuk-frontend/helpers/puppeteer')
 const { getExamples } = require('@govuk-frontend/lib/components')
 
 describe('/components/button', () => {
@@ -178,7 +175,7 @@ describe('/components/button', () => {
       let $button
 
       beforeEach(async () => {
-        await renderAndInitialise(page, 'button', examples.default, {
+        await render(page, 'button', examples.default, {
           config: {
             preventDoubleClick: true
           }
@@ -237,16 +234,11 @@ describe('/components/button', () => {
       let $button
 
       beforeEach(async () => {
-        await renderAndInitialise(
-          page,
-          'button',
-          examples["don't prevent double click"],
-          {
-            config: {
-              preventDoubleClick: true
-            }
+        await render(page, 'button', examples["don't prevent double click"], {
+          config: {
+            preventDoubleClick: true
           }
-        )
+        })
 
         $button = await setButtonTracking(await page.$('button'))
       })
@@ -266,7 +258,7 @@ describe('/components/button', () => {
       let $button
 
       beforeEach(async () => {
-        await renderAndInitialise(page, 'button', examples.default, {
+        await render(page, 'button', examples.default, {
           config: {
             preventDoubleClick: true
           }
@@ -329,7 +321,7 @@ describe('/components/button', () => {
 
       it('throws when GOV.UK Frontend is not supported', async () => {
         await expect(
-          renderAndInitialise(page, 'button', examples.default, {
+          render(page, 'button', examples.default, {
             beforeInitialisation() {
               document.body.classList.remove('govuk-frontend-supported')
             }
@@ -342,7 +334,7 @@ describe('/components/button', () => {
 
       it('throws when $module is not set', async () => {
         await expect(
-          renderAndInitialise(page, 'button', examples.default, {
+          render(page, 'button', examples.default, {
             beforeInitialisation($module) {
               $module.remove()
             }
@@ -355,7 +347,7 @@ describe('/components/button', () => {
 
       it('throws when receiving the wrong type for $module', async () => {
         await expect(
-          renderAndInitialise(page, 'button', examples.default, {
+          render(page, 'button', examples.default, {
             beforeInitialisation($module) {
               // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
               $module.outerHTML = `<svg data-module="govuk-button"></svg>`
diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.jsdom.test.mjs b/packages/govuk-frontend/src/govuk/components/character-count/character-count.jsdom.test.mjs
index 4226992a45..5a5a1c1d5d 100644
--- a/packages/govuk-frontend/src/govuk/components/character-count/character-count.jsdom.test.mjs
+++ b/packages/govuk-frontend/src/govuk/components/character-count/character-count.jsdom.test.mjs
@@ -1,4 +1,4 @@
-import { getExamples, renderComponent } from '@govuk-frontend/lib/components'
+import { getExamples, render } from '@govuk-frontend/lib/components'
 
 import { CharacterCount } from './character-count.mjs'
 
@@ -7,10 +7,7 @@ describe('CharacterCount', () => {
 
   beforeAll(async () => {
     const examples = await getExamples('character-count')
-    html = renderComponent(
-      'character-count',
-      examples['to configure in JavaScript']
-    )
+    html = render('character-count', examples['to configure in JavaScript'])
   })
 
   beforeEach(async () => {
diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/character-count/character-count.puppeteer.test.js
index eabf78817f..c472a9ff73 100644
--- a/packages/govuk-frontend/src/govuk/components/character-count/character-count.puppeteer.test.js
+++ b/packages/govuk-frontend/src/govuk/components/character-count/character-count.puppeteer.test.js
@@ -1,7 +1,4 @@
-const {
-  goToComponent,
-  renderAndInitialise
-} = require('@govuk-frontend/helpers/puppeteer')
+const { goToComponent, render } = require('@govuk-frontend/helpers/puppeteer')
 const { getExamples } = require('@govuk-frontend/lib/components')
 
 describe('Character count', () => {
@@ -496,7 +493,7 @@ describe('Character count', () => {
     describe('JavaScript configuration', () => {
       describe('at instantiation', () => {
         it('configures the number of characters', async () => {
-          await renderAndInitialise(
+          await render(
             page,
             'character-count',
             examples['to configure in JavaScript'],
@@ -519,7 +516,7 @@ describe('Character count', () => {
         })
 
         it('configures the number of words', async () => {
-          await renderAndInitialise(
+          await render(
             page,
             'character-count',
             examples['to configure in JavaScript'],
@@ -542,7 +539,7 @@ describe('Character count', () => {
         })
 
         it('configures the threshold', async () => {
-          await renderAndInitialise(
+          await render(
             page,
             'character-count',
             examples['to configure in JavaScript'],
@@ -569,7 +566,7 @@ describe('Character count', () => {
           // This tests that a description can be provided through JavaScript attributes
           // and interpolated with the limit provided to the character count in JS.
 
-          await renderAndInitialise(
+          await render(
             page,
             'character-count',
             examples[
@@ -597,7 +594,7 @@ describe('Character count', () => {
 
       describe('via `initAll`', () => {
         it('configures the number of characters', async () => {
-          await renderAndInitialise(
+          await render(
             page,
             'character-count',
             examples['to configure in JavaScript'],
@@ -620,7 +617,7 @@ describe('Character count', () => {
         })
 
         it('configures the number of words', async () => {
-          await renderAndInitialise(
+          await render(
             page,
             'character-count',
             examples['to configure in JavaScript'],
@@ -643,7 +640,7 @@ describe('Character count', () => {
         })
 
         it('configures the threshold', async () => {
-          await renderAndInitialise(
+          await render(
             page,
             'character-count',
             examples['to configure in JavaScript'],
@@ -669,7 +666,7 @@ describe('Character count', () => {
 
       describe('when data-attributes are present', () => {
         it('uses `maxlength` data attribute instead of the JS one', async () => {
-          await renderAndInitialise(page, 'character-count', examples.default, {
+          await render(page, 'character-count', examples.default, {
             config: {
               maxlength: 12 // JS configuration that would tell 1 character remaining
             }
@@ -687,7 +684,7 @@ describe('Character count', () => {
         })
 
         it("uses `maxlength` data attribute instead of JS's `maxwords`", async () => {
-          await renderAndInitialise(page, 'character-count', examples.default, {
+          await render(page, 'character-count', examples.default, {
             config: {
               maxwords: 12
             }
@@ -705,16 +702,11 @@ describe('Character count', () => {
         })
 
         it('uses `maxwords` data attribute instead of the JS one', async () => {
-          await renderAndInitialise(
-            page,
-            'character-count',
-            examples['with word count'],
-            {
-              config: {
-                maxwords: 12 // JS configuration that would tell 1 word remaining
-              }
+          await render(page, 'character-count', examples['with word count'], {
+            config: {
+              maxwords: 12 // JS configuration that would tell 1 word remaining
             }
-          )
+          })
 
           await page.type('.govuk-js-character-count', 'Hello '.repeat(11), {
             delay: 50
@@ -728,16 +720,11 @@ describe('Character count', () => {
         })
 
         it("uses `maxwords` data attribute instead of the JS's `maxlength`", async () => {
-          await renderAndInitialise(
-            page,
-            'character-count',
-            examples['with word count'],
-            {
-              config: {
-                maxlength: 10
-              }
+          await render(page, 'character-count', examples['with word count'], {
+            config: {
+              maxlength: 10
             }
-          )
+          })
 
           await page.type('.govuk-js-character-count', 'Hello '.repeat(11), {
             delay: 50
@@ -757,7 +744,7 @@ describe('Character count', () => {
           // element holding the textarea's accessible description
           // (and interpolated to replace `%{count}` with the maximum)
 
-          await renderAndInitialise(
+          await render(
             page,
             'character-count',
             examples['when neither maxlength nor maxwords are set'],
@@ -779,7 +766,7 @@ describe('Character count', () => {
 
     describe('Cross Side Scripting prevention', () => {
       it('injects the localised strings as text not HTML', async () => {
-        await renderAndInitialise(
+        await render(
           page,
           'character-count',
           examples['to configure in JavaScript'],
@@ -814,7 +801,7 @@ describe('Character count', () => {
 
       it('throws when GOV.UK Frontend is not supported', async () => {
         await expect(
-          renderAndInitialise(page, 'character-count', examples.default, {
+          render(page, 'character-count', examples.default, {
             beforeInitialisation() {
               document.body.classList.remove('govuk-frontend-supported')
             }
@@ -827,7 +814,7 @@ describe('Character count', () => {
 
       it('throws when $module is not set', async () => {
         await expect(
-          renderAndInitialise(page, 'character-count', examples.default, {
+          render(page, 'character-count', examples.default, {
             beforeInitialisation($module) {
               $module.remove()
             }
@@ -840,7 +827,7 @@ describe('Character count', () => {
 
       it('throws when receiving the wrong type for $module', async () => {
         await expect(
-          renderAndInitialise(page, 'character-count', examples.default, {
+          render(page, 'character-count', examples.default, {
             beforeInitialisation($module) {
               // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
               $module.outerHTML = `<svg data-module="govuk-character-count"></svg>`
@@ -854,7 +841,7 @@ describe('Character count', () => {
 
       it('throws when the textarea is missing', async () => {
         await expect(
-          renderAndInitialise(page, 'character-count', examples.default, {
+          render(page, 'character-count', examples.default, {
             beforeInitialisation($module, { selector }) {
               $module.querySelector(selector).remove()
             },
@@ -870,7 +857,7 @@ describe('Character count', () => {
 
       it('throws when the textarea is not the right type', async () => {
         await expect(
-          renderAndInitialise(page, 'character-count', examples.default, {
+          render(page, 'character-count', examples.default, {
             beforeInitialisation($module, { selector }) {
               // Replace with a tag that's neither an `<input>` or `<textarea>`
               $module.querySelector(selector).outerHTML =
@@ -889,7 +876,7 @@ describe('Character count', () => {
 
       it('throws when the textarea description is missing', async () => {
         await expect(
-          renderAndInitialise(page, 'character-count', examples.default, {
+          render(page, 'character-count', examples.default, {
             beforeInitialisation($module, { selector }) {
               $module.querySelector(selector).remove()
             },
@@ -905,7 +892,7 @@ describe('Character count', () => {
 
       it('throws when receiving invalid configuration', async () => {
         await expect(
-          renderAndInitialise(page, 'character-count', { context: {} })
+          render(page, 'character-count', { context: {} })
         ).rejects.toEqual({
           name: 'ConfigError',
           message:
@@ -921,7 +908,7 @@ describe('Character count', () => {
       const pageErrorListener = jest.fn()
       page.on('pageerror', pageErrorListener)
 
-      await renderAndInitialise(page, 'character-count', examples.default, {
+      await render(page, 'character-count', examples.default, {
         config: {
           // Override maxlength to 10
           maxlength: 10
diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.puppeteer.test.js
index 8dd720f28b..1a2cf396ef 100644
--- a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.puppeteer.test.js
+++ b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.puppeteer.test.js
@@ -4,7 +4,7 @@ const {
   getAttribute,
   getProperty,
   isVisible,
-  renderAndInitialise
+  render
 } = require('@govuk-frontend/helpers/puppeteer')
 const { getExamples } = require('@govuk-frontend/lib/components')
 
@@ -328,7 +328,7 @@ describe('Checkboxes with multiple groups and a "None" checkbox and conditional
 
       it('throws when GOV.UK Frontend is not supported', async () => {
         await expect(
-          renderAndInitialise(page, 'checkboxes', examples.default, {
+          render(page, 'checkboxes', examples.default, {
             beforeInitialisation() {
               document.body.classList.remove('govuk-frontend-supported')
             }
@@ -341,7 +341,7 @@ describe('Checkboxes with multiple groups and a "None" checkbox and conditional
 
       it('throws when $module is not set', async () => {
         await expect(
-          renderAndInitialise(page, 'checkboxes', examples.default, {
+          render(page, 'checkboxes', examples.default, {
             beforeInitialisation($module) {
               $module.remove()
             }
@@ -354,7 +354,7 @@ describe('Checkboxes with multiple groups and a "None" checkbox and conditional
 
       it('throws when receiving the wrong type for $module', async () => {
         await expect(
-          renderAndInitialise(page, 'checkboxes', examples.default, {
+          render(page, 'checkboxes', examples.default, {
             beforeInitialisation($module) {
               // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
               $module.outerHTML = `<svg data-module="govuk-checkboxes"></svg>`
@@ -369,7 +369,7 @@ describe('Checkboxes with multiple groups and a "None" checkbox and conditional
 
       it('throws when the input list is empty', async () => {
         await expect(
-          renderAndInitialise(page, 'checkboxes', examples.default, {
+          render(page, 'checkboxes', examples.default, {
             beforeInitialisation($module, { selector }) {
               $module
                 .querySelectorAll(selector)
@@ -387,19 +387,14 @@ describe('Checkboxes with multiple groups and a "None" checkbox and conditional
 
       it('throws when a conditional target element is not found', async () => {
         await expect(
-          renderAndInitialise(
-            page,
-            'checkboxes',
-            examples['with conditional items'],
-            {
-              beforeInitialisation($module, { selector }) {
-                $module.querySelector(selector).remove()
-              },
-              context: {
-                selector: '.govuk-checkboxes__conditional'
-              }
+          render(page, 'checkboxes', examples['with conditional items'], {
+            beforeInitialisation($module, { selector }) {
+              $module.querySelector(selector).remove()
+            },
+            context: {
+              selector: '.govuk-checkboxes__conditional'
             }
-          )
+          })
         ).rejects.toEqual({
           name: 'ElementError',
           message: 'Checkboxes: #conditional-how-contacted not found'
diff --git a/packages/govuk-frontend/src/govuk/components/components.template.test.js b/packages/govuk-frontend/src/govuk/components/components.template.test.js
index c10aab7abf..b2ba1ba13c 100644
--- a/packages/govuk-frontend/src/govuk/components/components.template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/components.template.test.js
@@ -5,7 +5,7 @@ const {
   getComponentsFixtures,
   getComponentNames,
   nunjucksEnv,
-  renderComponent
+  render
 } = require('@govuk-frontend/lib/components')
 const { HtmlValidate } = require('html-validate')
 
@@ -136,7 +136,7 @@ describe('Components', () => {
       for (const { component: componentName, fixtures } of componentsFixtures) {
         const fixtureTasks = fixtures.map(
           async ({ name: exampleName, options }) => {
-            const html = renderComponent(componentName, { context: options })
+            const html = render(componentName, { context: options })
 
             // Validate HTML
             return expect({
diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.puppeteer.test.js
index 38bcf0d0a0..2afd910f68 100644
--- a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.puppeteer.test.js
+++ b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.puppeteer.test.js
@@ -1,7 +1,7 @@
 const {
   goToComponent,
   goToExample,
-  renderAndInitialise
+  render
 } = require('@govuk-frontend/helpers/puppeteer')
 const { getExamples } = require('@govuk-frontend/lib/components')
 
@@ -68,7 +68,7 @@ describe('Error Summary', () => {
 
     describe('using JavaScript configuration', () => {
       beforeAll(async () => {
-        await renderAndInitialise(page, 'error-summary', examples.default, {
+        await render(page, 'error-summary', examples.default, {
           config: {
             disableAutoFocus: true
           }
@@ -94,7 +94,7 @@ describe('Error Summary', () => {
 
     describe('using JavaScript configuration, but enabled via data-attributes', () => {
       beforeAll(async () => {
-        await renderAndInitialise(
+        await render(
           page,
           'error-summary',
           examples['autofocus explicitly enabled']
@@ -118,7 +118,7 @@ describe('Error Summary', () => {
 
     describe('using `initAll`', () => {
       beforeAll(async () => {
-        await renderAndInitialise(page, 'error-summary', examples.default, {
+        await render(page, 'error-summary', examples.default, {
           config: {
             disableAutoFocus: true
           }
@@ -219,7 +219,7 @@ describe('Error Summary', () => {
 
     it('throws when GOV.UK Frontend is not supported', async () => {
       await expect(
-        renderAndInitialise(page, 'error-summary', examples.default, {
+        render(page, 'error-summary', examples.default, {
           beforeInitialisation() {
             document.body.classList.remove('govuk-frontend-supported')
           }
@@ -232,7 +232,7 @@ describe('Error Summary', () => {
 
     it('throws when $module is not set', async () => {
       await expect(
-        renderAndInitialise(page, 'error-summary', examples.default, {
+        render(page, 'error-summary', examples.default, {
           beforeInitialisation($module) {
             $module.remove()
           }
@@ -245,7 +245,7 @@ describe('Error Summary', () => {
 
     it('throws when receiving the wrong type for $module', async () => {
       await expect(
-        renderAndInitialise(page, 'error-summary', examples.default, {
+        render(page, 'error-summary', examples.default, {
           beforeInitialisation($module) {
             // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
             $module.outerHTML = `<svg data-module="govuk-error-summary"></svg>`
diff --git a/packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.puppeteer.test.js
index b6c285677a..91e3ab61e3 100644
--- a/packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.puppeteer.test.js
+++ b/packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.puppeteer.test.js
@@ -1,7 +1,7 @@
 const {
   goToComponent,
   goToExample,
-  renderAndInitialise
+  render
 } = require('@govuk-frontend/helpers/puppeteer')
 const { getExamples } = require('@govuk-frontend/lib/components')
 
@@ -197,7 +197,7 @@ describe('/components/exit-this-page', () => {
 
       it('throws when GOV.UK Frontend is not supported', async () => {
         await expect(
-          renderAndInitialise(page, 'exit-this-page', examples.default, {
+          render(page, 'exit-this-page', examples.default, {
             beforeInitialisation() {
               document.body.classList.remove('govuk-frontend-supported')
             }
@@ -210,7 +210,7 @@ describe('/components/exit-this-page', () => {
 
       it('throws when $module is not set', async () => {
         await expect(
-          renderAndInitialise(page, 'exit-this-page', examples.default, {
+          render(page, 'exit-this-page', examples.default, {
             beforeInitialisation($module) {
               $module.remove()
             }
@@ -223,7 +223,7 @@ describe('/components/exit-this-page', () => {
 
       it('throws when receiving the wrong type for $module', async () => {
         await expect(
-          renderAndInitialise(page, 'exit-this-page', examples.default, {
+          render(page, 'exit-this-page', examples.default, {
             beforeInitialisation($module) {
               // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
               $module.outerHTML = `<svg data-module="govuk-exit-this-page"></svg>`
@@ -237,7 +237,7 @@ describe('/components/exit-this-page', () => {
 
       it('throws when the button is missing', async () => {
         await expect(
-          renderAndInitialise(page, 'exit-this-page', examples.default, {
+          render(page, 'exit-this-page', examples.default, {
             beforeInitialisation($module, { selector }) {
               $module.querySelector(selector).remove()
             },
diff --git a/packages/govuk-frontend/src/govuk/components/header/header.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/header/header.puppeteer.test.js
index 62567cd669..11b66bc84c 100644
--- a/packages/govuk-frontend/src/govuk/components/header/header.puppeteer.test.js
+++ b/packages/govuk-frontend/src/govuk/components/header/header.puppeteer.test.js
@@ -1,7 +1,4 @@
-const {
-  goToComponent,
-  renderAndInitialise
-} = require('@govuk-frontend/helpers/puppeteer')
+const { goToComponent, render } = require('@govuk-frontend/helpers/puppeteer')
 const { getExamples } = require('@govuk-frontend/lib/components')
 const { KnownDevices } = require('puppeteer')
 
@@ -177,7 +174,7 @@ describe('Header navigation', () => {
 
       it('throws when GOV.UK Frontend is not supported', async () => {
         await expect(
-          renderAndInitialise(page, 'header', examples.default, {
+          render(page, 'header', examples.default, {
             beforeInitialisation() {
               document.body.classList.remove('govuk-frontend-supported')
             }
@@ -190,7 +187,7 @@ describe('Header navigation', () => {
 
       it('throws when $module is not set', async () => {
         await expect(
-          renderAndInitialise(page, 'header', examples.default, {
+          render(page, 'header', examples.default, {
             beforeInitialisation($module) {
               // Remove the root of the components as a way
               // for the constructor to receive the wrong type for `$module`
@@ -208,12 +205,12 @@ describe('Header navigation', () => {
         // and should keep rendering. No expectations as the JavaScript
         // will just return early. All we ask of that test is for it not
         // to throw during the initialisation
-        await renderAndInitialise(page, 'header', examples.default)
+        await render(page, 'header', examples.default)
       })
 
       it("throws when the toggle's aria-control attribute is missing", async () => {
         await expect(
-          renderAndInitialise(page, 'header', examples['with navigation'], {
+          render(page, 'header', examples['with navigation'], {
             beforeInitialisation($module, { selector }) {
               $module.querySelector(selector).removeAttribute('aria-controls')
             },
@@ -229,7 +226,7 @@ describe('Header navigation', () => {
 
       it('throws when the menu is missing, but a toggle is present', async () => {
         await expect(
-          renderAndInitialise(page, 'header', examples['with navigation'], {
+          render(page, 'header', examples['with navigation'], {
             beforeInitialisation($module, { selector }) {
               // Remove the menu `<ul>` referenced by $menuButton's `aria-controls`
               $module.querySelector(selector).remove()
diff --git a/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.puppeteer.test.js
index 4cef20504b..cb7be220d1 100644
--- a/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.puppeteer.test.js
+++ b/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.puppeteer.test.js
@@ -1,7 +1,4 @@
-const {
-  renderAndInitialise,
-  goToComponent
-} = require('@govuk-frontend/helpers/puppeteer')
+const { render, goToComponent } = require('@govuk-frontend/helpers/puppeteer')
 const { getExamples } = require('@govuk-frontend/lib/components')
 
 describe('Notification banner', () => {
@@ -78,7 +75,7 @@ describe('Notification banner', () => {
 
     describe('and auto-focus is disabled using JavaScript configuration', () => {
       beforeAll(async () => {
-        await renderAndInitialise(
+        await render(
           page,
           'notification-banner',
           examples['with type as success'],
@@ -109,7 +106,7 @@ describe('Notification banner', () => {
 
     describe('and auto-focus is disabled using options passed to initAll', () => {
       beforeAll(async () => {
-        await renderAndInitialise(
+        await render(
           page,
           'notification-banner',
           examples['with type as success'],
@@ -140,7 +137,7 @@ describe('Notification banner', () => {
 
     describe('and autofocus is disabled in JS but enabled in data attributes', () => {
       beforeAll(async () => {
-        await renderAndInitialise(
+        await render(
           page,
           'notification-banner',
           examples['auto-focus explicitly enabled, with type as success'],
@@ -218,7 +215,7 @@ describe('Notification banner', () => {
   describe('errors at instantiation', () => {
     it('throws when GOV.UK Frontend is not supported', async () => {
       await expect(
-        renderAndInitialise(page, 'notification-banner', examples.default, {
+        render(page, 'notification-banner', examples.default, {
           beforeInitialisation() {
             document.body.classList.remove('govuk-frontend-supported')
           }
@@ -231,7 +228,7 @@ describe('Notification banner', () => {
 
     it('throws when $module is not set', async () => {
       await expect(
-        renderAndInitialise(page, 'notification-banner', examples.default, {
+        render(page, 'notification-banner', examples.default, {
           beforeInitialisation($module) {
             $module.remove()
           }
@@ -244,7 +241,7 @@ describe('Notification banner', () => {
 
     it('throws when receiving the wrong type for $module', async () => {
       await expect(
-        renderAndInitialise(page, 'notification-banner', examples.default, {
+        render(page, 'notification-banner', examples.default, {
           beforeInitialisation($module) {
             // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
             $module.outerHTML = `<svg data-module="govuk-notification-banner"></svg>`
diff --git a/packages/govuk-frontend/src/govuk/components/radios/radios.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/radios/radios.puppeteer.test.js
index 1c92057d82..10c1fba1fb 100644
--- a/packages/govuk-frontend/src/govuk/components/radios/radios.puppeteer.test.js
+++ b/packages/govuk-frontend/src/govuk/components/radios/radios.puppeteer.test.js
@@ -4,7 +4,7 @@ const {
   getProperty,
   getAttribute,
   isVisible,
-  renderAndInitialise
+  render
 } = require('@govuk-frontend/helpers/puppeteer')
 const { getExamples } = require('@govuk-frontend/lib/components')
 
@@ -279,7 +279,7 @@ describe('Radios', () => {
 
     it('throws when GOV.UK Frontend is not supported', async () => {
       await expect(
-        renderAndInitialise(page, 'radios', examples.default, {
+        render(page, 'radios', examples.default, {
           beforeInitialisation() {
             document.body.classList.remove('govuk-frontend-supported')
           }
@@ -292,7 +292,7 @@ describe('Radios', () => {
 
     it('throws when $module is not set', async () => {
       await expect(
-        renderAndInitialise(page, 'radios', examples.default, {
+        render(page, 'radios', examples.default, {
           beforeInitialisation($module) {
             $module.remove()
           }
@@ -305,7 +305,7 @@ describe('Radios', () => {
 
     it('throws when receiving the wrong type for $module', async () => {
       await expect(
-        renderAndInitialise(page, 'radios', examples.default, {
+        render(page, 'radios', examples.default, {
           beforeInitialisation($module) {
             // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
             $module.outerHTML = `<svg data-module="govuk-radios"></svg>`
@@ -320,7 +320,7 @@ describe('Radios', () => {
 
     it('throws when the input list is empty', async () => {
       await expect(
-        renderAndInitialise(page, 'radios', examples.default, {
+        render(page, 'radios', examples.default, {
           beforeInitialisation($module, { selector }) {
             $module.querySelectorAll(selector).forEach((item) => item.remove())
           },
@@ -336,16 +336,11 @@ describe('Radios', () => {
 
     it('throws when a conditional target element is not found', async () => {
       await expect(
-        renderAndInitialise(
-          page,
-          'radios',
-          examples['with conditional items'],
-          {
-            beforeInitialisation($module) {
-              $module.querySelector('.govuk-radios__conditional').remove()
-            }
+        render(page, 'radios', examples['with conditional items'], {
+          beforeInitialisation($module) {
+            $module.querySelector('.govuk-radios__conditional').remove()
           }
-        )
+        })
       ).rejects.toEqual({
         name: 'ElementError',
         message: 'Radios: #conditional-how-contacted not found'
diff --git a/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.puppeteer.test.js
index 1de70d0599..ec28ac7fce 100644
--- a/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.puppeteer.test.js
+++ b/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.puppeteer.test.js
@@ -1,7 +1,4 @@
-const {
-  goToExample,
-  renderAndInitialise
-} = require('@govuk-frontend/helpers/puppeteer')
+const { goToExample, render } = require('@govuk-frontend/helpers/puppeteer')
 const { getExamples } = require('@govuk-frontend/lib/components')
 
 describe('Skip Link', () => {
@@ -70,7 +67,7 @@ describe('Skip Link', () => {
 
     it('throws when GOV.UK Frontend is not supported', async () => {
       await expect(
-        renderAndInitialise(page, 'skip-link', examples.default, {
+        render(page, 'skip-link', examples.default, {
           beforeInitialisation() {
             document.body.classList.remove('govuk-frontend-supported')
           }
@@ -83,7 +80,7 @@ describe('Skip Link', () => {
 
     it('throws when $module is not set', async () => {
       await expect(
-        renderAndInitialise(page, 'skip-link', examples.default, {
+        render(page, 'skip-link', examples.default, {
           beforeInitialisation($module) {
             $module.remove()
           }
@@ -96,7 +93,7 @@ describe('Skip Link', () => {
 
     it('throws when receiving the wrong type for $module', async () => {
       await expect(
-        renderAndInitialise(page, 'skip-link', examples.default, {
+        render(page, 'skip-link', examples.default, {
           beforeInitialisation($module) {
             // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
             $module.outerHTML = `<svg data-module="govuk-skip-link"></svg>`
@@ -110,7 +107,7 @@ describe('Skip Link', () => {
 
     it('throws when the linked element is missing', async () => {
       await expect(
-        renderAndInitialise(page, 'skip-link', {
+        render(page, 'skip-link', {
           context: {
             text: 'Skip to main content',
             href: '#this-element-does-not-exist'
@@ -125,7 +122,7 @@ describe('Skip Link', () => {
 
     it('throws when the href does not contain a hash', async () => {
       await expect(
-        renderAndInitialise(page, 'skip-link', {
+        render(page, 'skip-link', {
           context: {
             text: 'Skip to main content',
             href: 'this-element-does-not-exist'
diff --git a/packages/govuk-frontend/src/govuk/components/tabs/tabs.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/tabs/tabs.puppeteer.test.js
index 6203c1df3a..214808abfd 100644
--- a/packages/govuk-frontend/src/govuk/components/tabs/tabs.puppeteer.test.js
+++ b/packages/govuk-frontend/src/govuk/components/tabs/tabs.puppeteer.test.js
@@ -1,7 +1,7 @@
 const {
   goTo,
   goToComponent,
-  renderAndInitialise
+  render
 } = require('@govuk-frontend/helpers/puppeteer')
 const { getExamples } = require('@govuk-frontend/lib/components')
 const { KnownDevices } = require('puppeteer')
@@ -257,7 +257,7 @@ describe('/components/tabs', () => {
 
       it('throws when GOV.UK Frontend is not supported', async () => {
         await expect(
-          renderAndInitialise(page, 'tabs', examples.default, {
+          render(page, 'tabs', examples.default, {
             beforeInitialisation() {
               document.body.classList.remove('govuk-frontend-supported')
             }
@@ -270,7 +270,7 @@ describe('/components/tabs', () => {
 
       it('throws when $module is not set', async () => {
         await expect(
-          renderAndInitialise(page, 'tabs', examples.default, {
+          render(page, 'tabs', examples.default, {
             beforeInitialisation($module) {
               $module.remove()
             }
@@ -283,7 +283,7 @@ describe('/components/tabs', () => {
 
       it('throws when there are no tabs', async () => {
         await expect(
-          renderAndInitialise(page, 'tabs', examples.default, {
+          render(page, 'tabs', examples.default, {
             beforeInitialisation($module, { selector }) {
               $module
                 .querySelectorAll(selector)
@@ -301,7 +301,7 @@ describe('/components/tabs', () => {
 
       it('throws when the tab list is missing', async () => {
         await expect(
-          renderAndInitialise(page, 'tabs', examples.default, {
+          render(page, 'tabs', examples.default, {
             beforeInitialisation($module, { selector }) {
               $module
                 .querySelector(selector)
@@ -319,7 +319,7 @@ describe('/components/tabs', () => {
 
       it('throws when there the tab list is empty', async () => {
         await expect(
-          renderAndInitialise(page, 'tabs', examples.default, {
+          render(page, 'tabs', examples.default, {
             beforeInitialisation($module, { selector, className }) {
               $module
                 .querySelectorAll(selector)
diff --git a/shared/helpers/nunjucks.js b/shared/helpers/nunjucks.js
index 67922180d0..98cd30984f 100644
--- a/shared/helpers/nunjucks.js
+++ b/shared/helpers/nunjucks.js
@@ -9,7 +9,7 @@ const cheerio = require('cheerio')
  * @returns {import('cheerio').CheerioAPI} HTML rendered by the macro
  */
 function render(componentName, options) {
-  return cheerio.load(components.renderComponent(componentName, options))
+  return cheerio.load(components.render(componentName, options))
 }
 
 /**
diff --git a/shared/helpers/puppeteer.js b/shared/helpers/puppeteer.js
index dfa63741da..1724b765d2 100644
--- a/shared/helpers/puppeteer.js
+++ b/shared/helpers/puppeteer.js
@@ -1,6 +1,6 @@
 const { AxePuppeteer } = require('@axe-core/puppeteer')
 const { ports } = require('@govuk-frontend/config')
-const { renderComponent } = require('@govuk-frontend/lib/components')
+const components = require('@govuk-frontend/lib/components')
 const { componentNameToClassName } = require('@govuk-frontend/lib/names')
 const slug = require('slug')
 
@@ -58,7 +58,7 @@ async function axe(page, overrides = {}) {
 }
 
 /**
- * Render and initialise a component within test boilerplate HTML
+ * Render component HTML with browser preview
  *
  * Renders a component's Nunjucks macro with the given params, injects it into
  * the test boilerplate page, and instantiates the component class, passing the
@@ -75,12 +75,7 @@ async function axe(page, overrides = {}) {
  * @param {BrowserRenderOptions<HandlerContext>} [browserOptions] - Puppeteer browser render options
  * @returns {Promise<import('puppeteer').Page>} Puppeteer page object
  */
-async function renderAndInitialise(
-  page,
-  componentName,
-  renderOptions,
-  browserOptions
-) {
+async function render(page, componentName, renderOptions, browserOptions) {
   await goTo(page, '/tests/boilerplate')
 
   const exportName = componentNameToClassName(componentName)
@@ -90,7 +85,7 @@ async function renderAndInitialise(
   await page.$eval(
     '#slot', // See boilerplate.njk `<div id="slot">`
     (slot, html) => (slot.innerHTML = html),
-    renderComponent(componentName, renderOptions)
+    components.render(componentName, renderOptions)
   )
 
   // Call `beforeInitialisation` in a separate `$eval` call
@@ -252,7 +247,7 @@ async function isVisible($element) {
 
 module.exports = {
   axe,
-  renderAndInitialise,
+  render,
   goTo,
   goToComponent,
   goToExample,
diff --git a/shared/lib/components.js b/shared/lib/components.js
index 51cb83841e..816092d0b8 100644
--- a/shared/lib/components.js
+++ b/shared/lib/components.js
@@ -140,7 +140,7 @@ async function getExamples(componentName, packageOptions) {
  * @param {MacroRenderOptions} [options] - Nunjucks macro render options
  * @returns {string} HTML rendered by the component
  */
-function renderComponent(componentName, options) {
+function render(componentName, options) {
   const macroName = componentNameToMacroName(componentName)
   const macroPath = `govuk/components/${componentName}/macro.njk`
 
@@ -204,7 +204,7 @@ function renderPreview(componentName, options) {
           <p class="govuk-body">Used during testing to inject rendered components and test specific configurations</p>
 
           <div id="slot" class="govuk-!-margin-top-6">
-            ${componentName ? renderComponent(componentName, options) : ''}
+            ${componentName ? render(componentName, options) : ''}
           </div>
         </div>
       `,
@@ -262,7 +262,7 @@ module.exports = {
   getComponentNamesFiltered,
   getExamples,
   nunjucksEnv,
-  renderComponent,
+  render,
   renderMacro,
   renderPreview,
   renderString,
diff --git a/shared/tasks/components.mjs b/shared/tasks/components.mjs
index 97a97eea8c..ddeb8a7157 100644
--- a/shared/tasks/components.mjs
+++ b/shared/tasks/components.mjs
@@ -1,6 +1,6 @@
 import { basename, dirname, join } from 'path'
 
-import { nunjucksEnv, renderComponent } from '@govuk-frontend/lib/components'
+import { nunjucksEnv, render } from '@govuk-frontend/lib/components'
 import { getListing, getYaml } from '@govuk-frontend/lib/files'
 
 import { files } from './index.mjs'
@@ -112,7 +112,7 @@ async function generateFixture(componentDataPath, options) {
       previewLayoutModifiers: example.previewLayoutModifiers ?? [],
 
       // Render Nunjucks example
-      html: renderComponent(componentName, {
+      html: render(componentName, {
         context: example.options,
         env
       }).trim()