Merge branch 'main' into enhancement/131/testing-refactor-accordion

ONSdigital · Sep 9, 2024 · 785315c · 785315c
2 parents a66ae91 + 07f4ee1
commit 785315c
Show file tree

Hide file tree

Showing 32 changed files with 810 additions and 466 deletions.
diff --git a/.github/workflows/macro-and-script-tests.yml b/.github/workflows/macro-and-script-tests.yml
@@ -18,5 +18,7 @@ jobs:
                   node-version-file: '.nvmrc'
             - name: Install dependencies
               run: yarn install
+            - name: Clear jest cache
+              run: yarn test:clear-cache
             - name: Run macro and script tests
               run: yarn test
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v20.10.0
+v20.16.0
diff --git a/README.md b/README.md
@@ -106,13 +106,13 @@ _Note_: This command is of limited use since JavaScript and SCSS files will only
 
 It is sometimes useful to adjust the following settings when writing tests or diagnosing issues:
 
--   `headless` in 'jest-puppeteer.config.js' - when set to `false` will show web browser whilst running tests. Many browser windows open since jest runs tests in parallel so it is useful to also adjust the `test` script inside 'package.json' such that it targets a specific test file. `await page.waitForTimeout(100000)` can be temporarily added to a test to allow yourself time to inspect the browser that appears.
+-   `headless` in 'jest-puppeteer.config.js' - when set to `false` will show web browser whilst running tests. Many browser windows open since jest runs tests in parallel so it is useful to also adjust the `test` script inside 'package.json' such that it targets a specific test file. `await new Promise(r => setTimeout(r, 100000));` can be temporarily added to a test to allow yourself time to inspect the browser that appears.
 
 -   `testTimeout` in 'jest.config.js' - set to a high value such as `1000000` to prevent tests from timing out when doing the above.
 
 ## Testing - Visual regression tests
 
-This project uses [Backstop JS](https://github.com/garris/BackstopJS) for visual regression testing. The tests run in Chrome headless using pupeteer inside docker and run in three viewports; 1920 (desktop), 768 (tablet) and 375 (mobile). Reference images are stored in Git LFS and any approved changes will automatically be stored in Git LFS when pushed to the repository.
+This project uses [Backstop JS](https://github.com/garris/BackstopJS) for visual regression testing. The tests run in Chrome headless using Pupeteer inside docker and run in three viewports; 1920 (desktop), 768 (tablet) and 375 (mobile). Reference images are stored in Git LFS and any approved changes will automatically be stored in Git LFS when pushed to the repository.
 
 The visual tests will run automatically on pull requests and the result will be available in the Github Action logs. If the tests fail, the process for viewing the failures and approving changes will need to be handled locally using the following workflow and commands.
 

diff --git a/__snapshots__/layout/_template.spec.js.snap b/__snapshots__/layout/_template.spec.js.snap
@@ -1393,6 +1393,10 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
+
+
+
+
 
 
 
@@ -1401,42 +1405,48 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
+
             <li class="ons-list__item">
 
 
 
 
 
 
-            <a href="#0" class="ons-list__link">About our surveys</a>
+
+                    <a href="#0" class="ons-list__link">About our surveys</a>
         </li>
 
 
 
 
 
+
             <li class="ons-list__item">
 
 
 
 
 
 
-            <a href="#0" class="ons-list__link">Lists of all surveys</a>
+
+                    <a href="#0" class="ons-list__link">Lists of all surveys</a>
         </li>
 
 
 
 
 
+
             <li class="ons-list__item">
 
 
 
 
 
 
-            <a href="#0" class="ons-list__link">Respondent Charter</a>
+
+                    <a href="#0" class="ons-list__link">Respondent Charter</a>
         </li>
         </ul>
 
@@ -1458,6 +1468,10 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
+
+
+
+
 
 
 
@@ -1466,42 +1480,48 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
+
             <li class="ons-list__item">
 
 
 
 
 
 
-            <a href="#0" class="ons-list__link">What we do</a>
+
+                    <a href="#0" class="ons-list__link">What we do</a>
         </li>
 
 
 
 
 
+
             <li class="ons-list__item">
 
 
 
 
 
 
-            <a href="#0" class="ons-list__link">Transparency and governance</a>
+
+                    <a href="#0" class="ons-list__link">Transparency and governance</a>
         </li>
 
 
 
 
 
+
             <li class="ons-list__item">
 
 
 
 
 
 
-            <a href="#0" class="ons-list__link">Contact us</a>
+
+                    <a href="#0" class="ons-list__link">Contact us</a>
         </li>
         </ul>
 
@@ -1523,6 +1543,10 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
+
+
+
+
 
 
 
@@ -1531,6 +1555,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
+
             <li class="ons-list__item">
 
 
@@ -1552,28 +1577,32 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
+
             <li class="ons-list__item">
 
 
 
 
 
 
-            <a href="#0" class="ons-list__link">Release calendar</a>
+
+                    <a href="#0" class="ons-list__link">Release calendar</a>
         </li>
 
 
 
 
 
+
             <li class="ons-list__item">
 
 
 
 
 
 
-            <a href="#0" class="ons-list__link">News</a>
+
+                    <a href="#0" class="ons-list__link">News</a>
         </li>
         </ul>
 
@@ -1604,6 +1633,10 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
+
+
+
+
 
 
 
@@ -1612,56 +1645,64 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
+
             <li class="ons-list__item">
 
 
 
 
 
 
-            <a href="#0" class="ons-list__link">Cookies</a>
+
+                    <a href="#0" class="ons-list__link">Cookies</a>
         </li>
 
 
 
 
 
+
             <li class="ons-list__item">
 
 
 
 
 
 
-            <a href="#0" class="ons-list__link">Accessibility statement</a>
+
+                    <a href="#0" class="ons-list__link">Accessibility statement</a>
         </li>
 
 
 
 
 
+
             <li class="ons-list__item">
 
 
 
 
 
 
-            <a href="#0" class="ons-list__link">Privacy and data protection</a>
+
+                    <a href="#0" class="ons-list__link">Privacy and data protection</a>
         </li>
 
 
 
 
 
+
             <li class="ons-list__item">
 
 
 
 
 
 
-            <a href="#0" class="ons-list__link">Terms and conditions</a>
+
+                    <a href="#0" class="ons-list__link">Terms and conditions</a>
         </li>
         </ul>
 

diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
         "start": "gulp start",
         "watch": "gulp watch",
         "test": "gulp build-assets && TEST_PORT=3020 TEST_WITH_PUPPETEER=1 jest '.*\\.spec\\.js'",
+        "test:clear-cache": "jest --clearCache",
         "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",
@@ -98,7 +99,7 @@
         "jest": "^29.6.1",
         "jest-axe": "^8.0.0",
         "jest-environment-jsdom": "^29.6.1",
-        "jest-puppeteer": "^9.0.0",
+        "jest-puppeteer": "^10.0.0",
         "lighthouse": "^11.0.0",
         "lint-staged": "^15.2.0",
         "lodash": "^4.17.21",
@@ -111,7 +112,7 @@
         "prepend-file": "^2.0.1",
         "prettier": "^3.2.5",
         "prettier-plugin-jinja-template": "^1.4.0",
-        "puppeteer": "^21.0.2",
+        "puppeteer": "^22.0.0",
         "remark-cli": "^12.0.0",
         "remark-lint": "^9.1.2",
         "remark-preset-lint-recommended": "^6.1.3",