Only take “JavaScript disabled” screenshots for components with JS

src/govuk/components/all.test.js

@@ -5,14 +5,29 @@
 const { fetch } = require('undici')
 const { WebSocket } = require('ws')
 
-const { allComponents } = require('../../../lib/file-helper')
+const { allComponents, getFiles } = require('../../../lib/file-helper')
 
 const configPaths = require('../../../config/paths.js')
 
 const PORT = configPaths.ports.test
 const baseUrl = 'http://localhost:' + PORT
 
 describe('Components', () => {
+  let componentsJavaScript
+
+  beforeAll(async () => {
+    componentsJavaScript = allComponents
+
+      // Get file listing per component
+      .map((component) => [component, getFiles(`${configPaths.components}${component}`)])
+
+      // Filter for "JavaScript enabled" via `${component}.mjs`
+      .filter(([component, entries]) => entries.includes(`${component}.mjs`))
+
+      // Component names only
+      .map(([component]) => component)
+  })
+
   describe('Generate screenshots for Percy visual regression', () => {
     let percySnapshot
 
@@ -26,8 +41,8 @@ describe('Components', () => {
     it('with JavaScript disabled', async () => {
       await page.setJavaScriptEnabled(false)
 
-      // Screenshot each component
-      for (const component of allComponents) {
+      // Screenshot only components with JavaScript support
+      for (const component of componentsJavaScript) {
         await page.goto(baseUrl + '/components/' + component + '/preview', { waitUntil: 'load' })
         await percySnapshot(page, 'no-js: ' + component)
       }