Merge branch 'main' into feature/132/refactor-address-input-test

.github/workflows/lighthouse-ci.yml

@@ -20,7 +20,11 @@ jobs:
               run: yarn install
             - name: Build pages
               run: yarn build
+            - name: Build urls
+              run: node ./lighthouse/lighthouse-get-urls.js
             - name: Run Lighthouse CI
-              run: ./lighthouse/lighthouse.sh
+              run: |
+                  npm install -g @lhci/[email protected]
+                  lhci autorun --config=./lighthouse/lighthouserc.js
               env:
                   LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

.github/workflows/visual-regression-tests.yml

@@ -7,7 +7,7 @@ env:
 
 jobs:
     run-visual-regression-tests:
-        runs-on: macos-12
+        runs-on: ubuntu-latest
 
         steps:
             - name: Checkout
@@ -20,10 +20,8 @@ jobs:
                   node-version-file: '.nvmrc'
             - name: Install dependencies
               run: yarn install
-            - name: Install Docker
-              run: |
-                  brew install docker
-                  colima start
+            - name: Set up Docker
+              uses: docker/setup-buildx-action@v3
             - name: Run visual regression tests
               id: vr
               run: yarn test-visual

README.md

@@ -44,6 +44,15 @@ yarn start
 
 Once the server has started, navigate to <http://localhost:3030>
 
+## Lighthouse Testing - local
+
+This project uses [LHCI](https://www.npmjs.com/package/@lhci/cli).
+
+```bash
+yarn global add @lhci/cli
+yarn test-lighthouse 
+```
+
 ## Testing - macros and scripts
 
 This project uses [jest](https://jestjs.io/docs/cli) and supports its command line options.

backstop.config.js

@@ -40,5 +40,5 @@ module.exports = {
     },
     report: process.env.RUNNING_IN_CI === 'true' ? [] : ['browser'],
     dockerCommandTemplate:
-        'docker run --rm -i --user $(id -u):$(id -g) --mount type=bind,source="{cwd}",target=/src backstopjs/backstopjs:{version} {backstopCommand} {args}',
+        'docker run --rm -i --user $(id -u):$(id -g) --add-host=host.docker.internal:host-gateway --mount type=bind,source="{cwd}",target=/src backstopjs/backstopjs:{version} {backstopCommand} {args}',
 };

lighthouse/lighthouse-get-urls.js

@@ -30,9 +30,10 @@ async function getURLs() {
     for (const directory of directories) {
         const folders = await readdir(directory.path);
         for (const folder of folders) {
-            const files = await glob(`${directory.path}/${folder}/**/*.html`, { ignore: `${directory.path}/${folder}/index.html` });
-            for (const file of files) {
-                data.urls.push(file.replace('./build/', 'http://localhost:9000/'));
+            const files = await glob(`${directory.path}/${folder}/**/*.html`);
+            const filteredFiles = files.filter((path) => !path.includes('index.html') && !path.includes('example-skip-to-content.html'));
+            for (const file of filteredFiles) {
+                data.urls.push(file.replace('build/', 'http://localhost/'));
             }
         }
     }

lighthouse/lighthouserc.js

@@ -1,6 +1,8 @@
 module.exports = {
     ci: {
         collect: {
+            staticDistDir: './build',
+            url: require('./urls.json').urls,
             numberOfRuns: 1,
             settings: {
                 onlyCategories: ['accessibility'],

package.json

@@ -15,6 +15,7 @@
         "test:no-build": "TEST_PORT=3020 TEST_WITH_PUPPETEER=1 jest '.*\\.spec\\.js'",
         "test:with-log": "yarn test --no-color 2>test.log",
         "test:start-server": "TEST_PORT=3020 gulp start-dev-server",
+        "test-lighthouse": "yarn build && node ./lighthouse/lighthouse-get-urls.js && lhci autorun --config=./lighthouse/lighthouserc.js",
         "build": "yarn && yarn tidy-clean && NODE_ENV=production gulp build",
         "build-serve": "yarn build && gulp start-dev-server",
         "npm-bundle": "NODE_ENV=production yarn tidy-clean && NODE_ENV=production gulp build-package && babel-node ci/generate-npm-package.js",

src/components/access-code/_macro.spec.js

@@ -5,7 +5,7 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
-describe('FOR: access-code', () => {
+describe('FOR: Macro: Access-code', () => {
     describe('GIVEN: Params: required', () => {
         describe('WHEN: all required params are provided', () => {
             const $ = cheerio.load(
@@ -24,7 +24,7 @@ describe('FOR: access-code', () => {
             test('THEN: autocomplete is disabled on text input', () => {
                 expect($('input').attr('autocomplete')).toBe('off');
             });
-            test('THEN: text input has automatic capitalisation', () => {
+            test('THEN: text input has autocapitalize attribute', () => {
                 expect($('input').attr('autocapitalize')).toBe('characters');
             });
         });

src/components/back-to-top/_macro.spec.js

@@ -5,7 +5,7 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
-describe('FOR: Back-to-top', () => {
+describe('FOR: Macro: Back-to-top', () => {
     describe('GIVEN: Params: default', () => {
         describe('WHEN: params are at default', () => {
             const $ = cheerio.load(renderComponent('back-to-top'));

src/components/browser-banner/_macro.spec.js

@@ -5,7 +5,7 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
-describe('FOR: browser-banner', () => {
+describe('FOR: Macro: Browser-banner', () => {
     describe('GIVEN: Params: default', () => {
         describe('WHEN: params are at default state', () => {
             const $ = cheerio.load(renderComponent('browser-banner', {}));

src/components/header/_macro.spec.js

@@ -16,7 +16,7 @@ import {
     EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST,
 } from './_test-examples';
 
-describe('FOR: Header', () => {
+describe('FOR: Macro: Header', () => {
     describe('GIVEN: Params: none', () => {
         describe('WHEN: All params are at default state', () => {
             const $ = cheerio.load(