Improve hook for running code before initialisation in `renderAndInit…

…ialise`

- Clarify naming as it's actually code that runs before initialisation rather than does any kind of initialisation of the component itself
- Update how the hook is run to be directly called by `page.evaluate`.
  Having it run as part of the function that did the initialisation didn't run reliably for updating the `govuk-frontend-supported` class,
  or even other simpler scenarios like logging or throwing. Calling it directly with `page.evaluate` seems to run more reliably.

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

@@ -648,7 +648,7 @@ describe('Character count', () => {
           // Override maxlength to 10
           maxlength: 10
         },
-        initialiser ($module) {
+        beforeInitialisation ($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'.

shared/helpers/puppeteer.js

@@ -77,8 +77,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 {($module: Element) => void} [options.initialiser] - A function that'll run in the
- *   browser to execute arbitrary initialisation
+ * @param {($module: Element) => void} [options.beforeInitialisation] - A function that'll run in the browser
+ *   via `page.evaluate`
  * @returns {Promise<import('puppeteer').Page>} Puppeteer page object
  */
 async function renderAndInitialise (page, componentName, options) {
@@ -91,18 +91,18 @@ async function renderAndInitialise (page, componentName, options) {
     slot.innerHTML = htmlForSlot
   }, html)
 
-  // Run a script to init the JavaScript component
-  await page.evaluate(async (exportName, options) => {
-    const $module = document.querySelector('[data-module]')
+  const componentRootHandle = await page.$('[data-module]')
 
-    if (options.initialiser) {
-      options.initialiser($module)
-    }
+  if (options.beforeInitialisation) {
+    await componentRootHandle.evaluate(options.beforeInitialisation)
+  }
 
+  // Run a script to init the JavaScript component
+  await componentRootHandle.evaluate(async ($module, exportName, options) => {
     const namespace = await import('govuk-frontend')
     /* eslint-disable-next-line no-new */
     new namespace[exportName]($module, options.config)
-  }, componentNameToClassName(componentName), options)
+  }, componentNameToClassName(componentName), options, options.beforeInitialisation)
 
   return page
 }