Send Percy screenshots via npm script (not Jest)

.github/workflows/tests.yml

@@ -140,7 +140,7 @@ jobs:
 
           - description: JavaScript component tests
             name: test-component
-            run: npx percy exec -- jest --color --selectProjects "JavaScript component tests"
+            run: npx jest --color --maxWorkers=2 --selectProjects "JavaScript component tests"
 
     steps:
       - name: Checkout
@@ -160,5 +160,28 @@ jobs:
 
       - name: Run verify task
         run: ${{ matrix.run }}
-        env:
-          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+
+  regression:
+    name: Send screenshots to Percy
+    runs-on: ubuntu-latest
+    needs: [install, build]
+
+    env:
+      PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+      PORT: 8888
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Restore dependencies
+        uses: ./.github/workflows/actions/install-node
+
+      - name: Restore build
+        uses: ./.github/workflows/actions/build
+
+      - name: Start review application
+        run: npm run serve &
+
+      - name: Send screenshots to Percy
+        run: npx percy exec -- npm run test:screenshots

docs/releasing/testing-and-linting.md

@@ -101,7 +101,7 @@ We generate 2 screenshots for each default example of every component. One examp
 
 The screenshots are public, so you can check them without logging in. A BrowserStack account is needed to approve or reject any changes (if you don't have access, ask your tech lead for help). If you're the reviewer of the pull request code, it's your responsibility to approve or request changes for any visual changes Percy highlights.
 
-When you run the tests locally (for example, using `npm test`), Percy commands are ignored and Percy does not generate any screenshots. You will see the following message in your command line output: `[percy] Percy is not running, disabling snapshots`.
+When you run the tests locally (for example, using `npm run test:screenshots`), Percy commands are ignored and Percy does not generate any screenshots. You will see the following message in your command line output: `[percy] Percy is not running, disabling snapshots`.
 
 ### PRs from forks
 When Github Actions is running against a PR from a fork, the Percy secret is not available and Percy does not generate any screenshots. Other tests will continue to run as normal. You will see the following messages in the output:

lib/puppeteer-helpers.js

@@ -2,7 +2,7 @@ const { componentNameToJavaScriptClassName } = require('./helper-functions.js')
 const { renderHtml } = require('./jest-helpers.js')
 
 const configPaths = require('../config/paths.js')
-const PORT = configPaths.ports.test
+const PORT = process.env.PORT || configPaths.ports.test
 
 /**
  * Render and initialise a component within test boilerplate HTML

package.json

@@ -29,6 +29,7 @@
     "postbuild:dist": "jest --color --selectProjects \"Gulp tasks\" --testMatch \"**/*build-dist*\"",
     "pretest": "npm run build:compile",
     "test": "jest --color --ignoreProjects \"Gulp tasks\" --maxWorkers=50%",
+    "test:screenshots": "node ./tasks/screenshot-components.mjs",
     "lint": "npm run lint:js && npm run lint:scss",
     "lint:js": "eslint --cache --cache-location .cache/eslint --cache-strategy content --color --ignore-path .gitignore --max-warnings 0 \"**/*.{cjs,js,mjs}\"",
     "lint:scss": "stylelint --cache --cache-location .cache/stylelint --cache-strategy content --color --ignore-path .gitignore --max-warnings 0 \"{app,src}/**/*.scss\""
@@ -44,14 +45,14 @@
     "glob": "^8.0.3",
     "gulp": "^4.0.2",
     "gulp-better-rollup": "3.1.0",
+    "gulp-cli": "^2.3.0",
     "gulp-if": "^3.0.0",
     "gulp-plumber": "^1.2.1",
     "gulp-postcss": "^9.0.1",
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^5.1.0",
     "gulp-task-listing": "^1.1.1",
     "gulp-uglify": "^3.0.2",
-    "gulp-cli": "^2.3.0",
     "js-yaml": "^4.1.0",
     "jsdoc": "^4.0.0",
     "jsdoc-tsimport-plugin": "^1.0.5",
@@ -95,7 +96,6 @@
     "stylelint": "^14.15.0",
     "stylelint-config-gds": "^0.2.0",
     "stylelint-order": "^5.0.0",
-    "wait-on": "^6.0.1",
-    "ws": "^8.11.0"
+    "wait-on": "^6.0.1"
   }
 }

tasks/screenshot-components.mjs

@@ -0,0 +1,70 @@
+import { join } from 'path'
+import { launch } from 'puppeteer'
+import percySnapshot from '@percy/puppeteer'
+import { isPercyEnabled } from '@percy/sdk-utils'
+
+import { getDirectories, getListing } from '../lib/file-helper.js'
+import { goToComponent } from '../lib/puppeteer-helpers.js'
+
+import configPaths from '../config/paths.js'
+import configPuppeteer from '../puppeteer.config.js'
+
+/**
+ * Send all component screenshots to Percy
+ * for visual regression testing
+ *
+ * @returns {Promise<void>}
+ */
+export async function screenshotComponents () {
+  const browser = await launch(configPuppeteer.launch)
+  const componentNames = await getDirectories(configPaths.components)
+
+  // Screenshot each component
+  const input = [...componentNames]
+
+  // Screenshot 4x components concurrently
+  while (input.length) {
+    const batch = input.splice(0, 4)
+
+    await Promise.all(batch
+      .map(async (componentName) => screenshotComponent(await browser.newPage(), componentName))
+    )
+  }
+
+  // Close browser
+  return browser.close()
+}
+
+/**
+ * Send single component screenshots to Percy
+ * for visual regression testing
+ *
+ * @param {import('puppeteer').Page} page - Puppeteer page object
+ * @param {string} componentName - Component name
+ * @returns {Promise<void>}
+ */
+export async function screenshotComponent (page, componentName) {
+  const componentFiles = await getListing(configPaths.components, `**/${componentName}/**`)
+
+  // Screenshot preview page (with JavaScript)
+  await goToComponent(page, componentName)
+  await percySnapshot(page, `js: ${componentName}`)
+
+  // Check for "JavaScript enabled" components
+  if (componentFiles.includes(join(componentName, `${componentName}.mjs`))) {
+    await page.setJavaScriptEnabled(false)
+
+    // Screenshot preview page (without JavaScript)
+    await page.reload({ waitUntil: 'load' })
+    await percySnapshot(page, `no-js: ${componentName}`)
+  }
+
+  // Close page
+  return page.close()
+}
+
+if (!await isPercyEnabled()) {
+  throw new Error('Percy healthcheck failed')
+}
+
+await screenshotComponents()