From 83736b780c8741db805d84f64dff65622619012f Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 29 Sep 2022 20:45:10 +0100
Subject: [PATCH] =?UTF-8?q?Only=20take=20=E2=80=9CJavaScript=20disabled?=
 =?UTF-8?q?=E2=80=9D=20screenshots=20for=20components=20with=20JS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This change reduces our Percy screenshots down from 64 to 42 as we don’t need to capture identical screenshots for components that lack JavaScript functionality
---
 src/govuk/components/all.test.js | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/govuk/components/all.test.js b/src/govuk/components/all.test.js
index dea3650afc..c1a669a415 100644
--- a/src/govuk/components/all.test.js
+++ b/src/govuk/components/all.test.js
@@ -5,7 +5,7 @@
 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')
 
@@ -14,12 +14,25 @@ const baseUrl = 'http://localhost:' + PORT
 
 describe('Visual regression via Percy', () => {
   let percySnapshot
+  let componentsWithJavaScript
 
-  beforeAll(() => {
+  beforeAll(async () => {
     // Polyfill fetch() detection, upload via WebSocket()
     // Fixes Percy running in a non-browser environment
     global.window = { fetch, WebSocket }
     percySnapshot = require('@percy/puppeteer')
+
+    // Filter "JavaScript enabled" components only
+    componentsWithJavaScript = 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)
   })
 
   it('generate screenshots', async () => {
@@ -30,11 +43,14 @@ describe('Visual regression via Percy', () => {
       await page.goto(baseUrl + '/components/' + component + '/preview', { waitUntil: 'load' })
       await percySnapshot(page, `js: ${component}`)
 
-      await page.setJavaScriptEnabled(false)
+      // Check for "JavaScript enabled" components
+      if (componentsWithJavaScript.includes(component)) {
+        await page.setJavaScriptEnabled(false)
 
-      // Screenshot preview page (without JavaScript)
-      await page.reload({ waitUntil: 'load' })
-      await percySnapshot(page, `no-js: ${component}`)
+        // Screenshot preview page (without JavaScript)
+        await page.reload({ waitUntil: 'load' })
+        await percySnapshot(page, `no-js: ${component}`)
+      }
     }
   }, 120000)
 })