Update Puppeteer to v22 (#3266)

ONSdigital · Sep 9, 2024 · 07f4ee1 · 07f4ee1
1 parent fbad573
commit 07f4ee1
Show file tree

Hide file tree

Showing 24 changed files with 493 additions and 265 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/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",

diff --git a/src/components/address-input/autosuggest.address.spec.js b/src/components/address-input/autosuggest.address.spec.js
@@ -62,6 +62,8 @@ const EXAMPLE_ADDRESS_INPUT_WITH_API = {
     externalInitialiser: true,
 };
 
+const { setTimeout } = require('node:timers/promises');
+
 describe('script: address-input', () => {
     const apiFaker = new PuppeteerEndpointFaker(EXAMPLE_ADDRESS_INPUT_WITH_API.APIDomain);
 
@@ -184,15 +186,15 @@ describe('script: address-input', () => {
     describe('When the component initializes', () => {
         it('checks api status by trying a request', async () => {
             await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API));
-            await page.waitForTimeout(50);
+            await setTimeout(50);
 
             expect(apiFaker.getRequestCount('/addresses/eq?input=cf142&limit=10')).toBe(1);
         });
 
         describe('when api status is okay', () => {
             beforeEach(async () => {
                 await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API));
-                await page.waitForTimeout(50);
+                await setTimeout(50);
             });
 
             it('does not switch to manual input', async () => {
@@ -216,7 +218,7 @@ describe('script: address-input', () => {
                 });
 
                 await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API));
-                await page.waitForTimeout(50);
+                await setTimeout(50);
             });
 
             it('switches to manual input', async () => {
@@ -271,6 +273,7 @@ describe('script: address-input', () => {
             });
 
             it('has expected suggestion entries', async () => {
+                await setTimeout(100);
                 const suggestions = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.map((node) => node.textContent.trim()));
                 expect(suggestions).toEqual(['196 College Road, Birmingham, B44 8HF', '196 College Road, Whitchurch, Cardiff, CF14 2NZ']);
             });
@@ -305,7 +308,7 @@ describe('script: address-input', () => {
 
                 await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'Penlline Road, Whitchurch, Cardiff, CF14 2N'));
                 await page.type('.ons-js-autosuggest-input', 'Z');
-                await page.waitForTimeout(100);
+                await setTimeout(100);
             });
 
             it('provides expected parameters to the address API', async () => {
@@ -328,7 +331,7 @@ describe('script: address-input', () => {
                 beforeEach(async () => {
                     await page.keyboard.press('ArrowDown');
                     await page.keyboard.press('Enter');
-                    await page.waitForTimeout(100);
+                    await setTimeout(100);
                 });
 
                 it('makes expected request when a suggestion is selected', async () => {
@@ -352,7 +355,7 @@ describe('script: address-input', () => {
 
                 await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'CF14 '));
                 await page.type('.ons-js-autosuggest-input', '2');
-                await page.waitForTimeout(200);
+                await setTimeout(200);
             });
 
             it('provides expected parameters to the address API', async () => {
@@ -371,7 +374,7 @@ describe('script: address-input', () => {
                 beforeEach(async () => {
                     await page.keyboard.press('ArrowDown');
                     await page.keyboard.press('Enter');
-                    await page.waitForTimeout(200);
+                    await setTimeout(200);
                 });
 
                 it('makes expected request', async () => {
@@ -393,7 +396,7 @@ describe('script: address-input', () => {
                     beforeEach(async () => {
                         await page.keyboard.press('ArrowDown');
                         await page.keyboard.press('Enter');
-                        await page.waitForTimeout(200);
+                        await setTimeout(200);
                     });
 
                     it('populates manual input fields with address from selection', async () => {
@@ -437,7 +440,7 @@ describe('script: address-input', () => {
                 await page.type('.ons-js-autosuggest-input', '2', { delay: 20 });
                 await page.keyboard.press('ArrowDown');
                 await page.keyboard.press('Enter');
-                await page.waitForTimeout(100);
+                await setTimeout(100);
 
                 const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) =>
                     node.classList.contains('ons-u-db-no-js_enabled'),
@@ -480,7 +483,7 @@ describe('script: address-input', () => {
                     await page.type('.ons-js-autosuggest-input', 'T', { delay: 20 });
                     await page.keyboard.press('ArrowDown');
                     await page.keyboard.press('Enter');
-                    await page.waitForTimeout(100);
+                    await setTimeout(100);
 
                     const urpnValueBefore = await page.$eval('.ons-js-hidden-uprn', (node) => node.value);
                     expect(urpnValueBefore).toBe('100070332099');
@@ -619,7 +622,7 @@ describe('script: address-input', () => {
                 await page.keyboard.press('ArrowDown');
                 await page.keyboard.press('Enter');
 
-                await page.waitForTimeout(50);
+                await setTimeout(50);
             });
 
             it('then the retrieveAddress function will be called', async () => {
@@ -730,6 +733,8 @@ describe('script: address-input', () => {
             await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll'));
             await page.type('.ons-js-autosuggest-input', 'e');
 
+            await setTimeout(50);
+
             expect(apiFaker.getRequestCount(searchEndpoint)).toBe(1);
         });
 
@@ -739,7 +744,7 @@ describe('script: address-input', () => {
             await page.keyboard.press('ArrowDown');
             await page.keyboard.press('Enter');
 
-            await page.waitForTimeout(50);
+            await setTimeout(50);
 
             expect(apiFaker.getRequestCount(uprnEndpoint)).toBe(1);
         });

diff --git a/src/components/autosuggest/autosuggest.spec.js b/src/components/autosuggest/autosuggest.spec.js
@@ -53,6 +53,8 @@ const EXAMPLE_AUTOSUGGEST_WITH_LANGUAGE = {
     language: 'en-gb',
 };
 
+const { setTimeout } = require('node:timers/promises');
+
 describe('script: autosuggest', () => {
     const apiFaker = new PuppeteerEndpointFaker('/test/fake/api');
 
@@ -298,11 +300,11 @@ describe('script: autosuggest', () => {
             const suggestionCountSample1 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length);
             expect(suggestionCountSample1).toBe(2);
 
-            await page.waitForTimeout(200);
+            await setTimeout(200);
             const suggestionCountSample2 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length);
             expect(suggestionCountSample2).toBe(2);
 
-            await page.waitForTimeout(320);
+            await setTimeout(320);
             const suggestionCountSample3 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length);
             expect(suggestionCountSample3).toBe(0);
         });
@@ -312,7 +314,7 @@ describe('script: autosuggest', () => {
 
             await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
             await page.keyboard.press('Tab');
-            await page.waitForTimeout(320);
+            await setTimeout(320);
 
             const listboxInnerHTML = await page.$eval('.ons-js-autosuggest-listbox', (node) => node.innerHTML);
             expect(listboxInnerHTML).toBe('');
@@ -323,7 +325,7 @@ describe('script: autosuggest', () => {
 
             await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
             await page.keyboard.press('Tab');
-            await page.waitForTimeout(320);
+            await setTimeout(320);
 
             const hasClass = await page.$eval('.ons-autosuggest', (node) => node.classList.contains('ons-autosuggest--has-results'));
             expect(hasClass).toBe(false);
@@ -334,7 +336,7 @@ describe('script: autosuggest', () => {
 
             await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
             await page.keyboard.press('Tab');
-            await page.waitForTimeout(320);
+            await setTimeout(320);
 
             const attributes = await getNodeAttributes(page, '.ons-js-autosuggest-input');
             expect(attributes['aria-activedescendant']).toBeUndefined();

diff --git a/src/components/back-to-top/back-to-top.spec.js b/src/components/back-to-top/back-to-top.spec.js
diff --git a/src/components/cookies-banner/cookies-banner.spec.js b/src/components/cookies-banner/cookies-banner.spec.js
@@ -4,7 +4,7 @@ const EXAMPLE_COOKIES_BANNER_PAGE = renderComponent('cookies-banner', {});
 
 describe('script: cookies-banner', () => {
     beforeEach(async () => {
-        const client = await page.target().createCDPSession();
+        const client = await page.createCDPSession();
         await client.send('Network.clearBrowserCookies');
     });
 

diff --git a/src/components/mutually-exclusive/mutually-exclusive.checkboxes.spec.js b/src/components/mutually-exclusive/mutually-exclusive.checkboxes.spec.js
@@ -60,6 +60,8 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_CHECKBOXES_PARAMS = {
     },
 };
 
+const { setTimeout } = require('node:timers/promises');
+
 describe('script: mutually-exclusive', () => {
     describe('checkboxes', () => {
         beforeEach(async () => {
@@ -93,7 +95,7 @@ describe('script: mutually-exclusive', () => {
                 });
 
                 it('then the aria-live message should reflect the removed non exclusive options', async () => {
-                    await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+                    await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
                     const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
                     expect(alertText).toBe('Gas deselected. Electric deselected. Other deselected. Please specify deselected.');
@@ -125,7 +127,7 @@ describe('script: mutually-exclusive', () => {
                 });
 
                 it('then the aria-live message should reflect the removed exclusive option', async () => {
-                    await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+                    await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
                     const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
                     expect(alertText).toBe('No central heating deselected.');
@@ -137,7 +139,7 @@ describe('script: mutually-exclusive', () => {
                     });
 
                     it('the aria-live message should not be updated', async () => {
-                        await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+                        await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
                         const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
                         expect(alertText).toBe('No central heating deselected.');
@@ -166,7 +168,7 @@ describe('script: mutually-exclusive', () => {
                 });
 
                 it('then the aria-live message should say nothing', async () => {
-                    await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+                    await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
                     const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
                     expect(alertText).toBe('');
@@ -192,7 +194,7 @@ describe('script: mutually-exclusive', () => {
                 });
 
                 it('then the aria-live message should say nothing', async () => {
-                    await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+                    await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
                     const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
                     expect(alertText).toBe('');