Add component name to [data-module] selector

shared/helpers/puppeteer.js

@@ -81,23 +81,22 @@ async function axe(page, overrides = {}) {
 async function renderAndInitialise(page, componentName, options) {
   await goTo(page, '/tests/boilerplate')
 
-  const html = renderComponent(componentName, options.params)
+  const exportName = componentNameToClassName(componentName)
+  const selector = `[data-module="govuk-${componentName}"]`
 
   // Inject rendered HTML into the page
   await page.$eval(
-    '#slot',
-    (slot, htmlForSlot) => {
-      slot.innerHTML = htmlForSlot
-    },
-    html
+    '#slot', // See boilerplate.njk `<div id="slot">`
+    (slot, html) => (slot.innerHTML = html),
+    renderComponent(componentName, options.params)
   )
 
   // Call `beforeInitialisation` in a separate `$eval` call
   // as running it inside the body of the next `evaluate`
   // didn't provide a reliable execution
   if (options.beforeInitialisation) {
     await page.$eval(
-      '[data-module]',
+      selector,
       options.beforeInitialisation,
       options.beforeInitialisationOptions
     )
@@ -116,9 +115,8 @@ async function renderAndInitialise(page, componentName, options) {
   // gather and `return` the values we need from inside the browser, and throw
   // them when back in Jest (to keep them triggering a Promise rejection)
   const error = await page.evaluate(
-    async (exportName, options) => {
-      const $module = document.querySelector('[data-module]')
-
+    async (selector, exportName, options) => {
+      const $module = document.querySelector(selector)
       const namespace = await import('govuk-frontend')
 
       try {
@@ -128,7 +126,8 @@ async function renderAndInitialise(page, componentName, options) {
         return { name, message }
       }
     },
-    componentNameToClassName(componentName),
+    selector,
+    exportName,
     options
   )