Update Puppeteer `render()` to bypass Review app #4345

colinrotherham · 2023-10-16T15:18:47Z

Part of #4103

Updates our render() test helper from Puppeteer (previously renderAndInitialise()) so it doesn’t send a request to the Review app, but instead runs against local preview of the component.

This is a first step towards restoring tests failing when components throw by having them not run against review app pages (which run initAll(), which logs errors)

By initialising individual components we ensure that future errors cause tests to fail

github-actions · 2023-10-16T15:23:28Z

📋 Stats

File sizes

File	Size
dist/govuk-frontend-4.7.0.min.css	120.66 KiB
dist/govuk-frontend-4.7.0.min.js	51.56 KiB
dist/govuk-frontend-ie8-4.7.0.min.css	81.59 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	75.58 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	70.95 KiB
packages/govuk-frontend/dist/govuk/all.mjs	3.8 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	113.99 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	37.06 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.3 KiB

Modules

File	Size
all.mjs	67.27 KiB
components/accordion/accordion.mjs	20.15 KiB
components/button/button.mjs	4.16 KiB
components/character-count/character-count.mjs	20.41 KiB
components/checkboxes/checkboxes.mjs	5.3 KiB
components/error-summary/error-summary.mjs	5.46 KiB
components/exit-this-page/exit-this-page.mjs	15.47 KiB
components/header/header.mjs	3.3 KiB
components/notification-banner/notification-banner.mjs	4 KiB
components/radios/radios.mjs	4.3 KiB
components/skip-link/skip-link.mjs	3.29 KiB
components/tabs/tabs.mjs	9.05 KiB

View stats and visualisations on the review app

Action run for 9f3ab07

romaricpascal

That's a neat step towards adressing #2565 🥳 Overall looks good and I think I followed OK, just want to confirm why a few things are happening. Don't think there'll be any blocker for the answers, but feels useful to have a trace of why things changed in a couple of places 😊

jest-puppeteer.config.js

shared/helpers/puppeteer.js

By passing a base to `new URL()` we can switch between the Review app and `file://` URLs

This prevents page and asset requests from hitting the Review app entirely

Since fonts are downloaded asynchronously, we should await the `document.fonts.ready` promise since further network requests may not be available once the page has loads Similarly, some components are made visible after initialising JavaScript (or new elements created and inserted) so we should wait for additional font downloads to complete there too E.g. GDS Transport Light may have loaded already, but GDS Transport Bold may be requested on demand as required

romaricpascal · 2023-10-20T16:05:14Z

shared/helpers/puppeteer.js

+  // Mock preview HTTP response
+  page.once('request', (request) =>
+    request.respond({
+      body: renderPreview(componentName, renderOptions),
+      contentType: 'text/html'
+    })


Nice one, that makes things tidier for the handler serving the assets 😊

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4345 October 16, 2023 15:19 Inactive

colinrotherham force-pushed the render-template branch 2 times, most recently from f34d290 to 11e07aa Compare October 16, 2023 15:49

colinrotherham force-pushed the puppeteer-render branch from 5efc072 to 6135afd Compare October 16, 2023 15:50

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4345 October 16, 2023 15:51 Inactive

colinrotherham force-pushed the render-template branch from 11e07aa to 629872d Compare October 18, 2023 10:49

colinrotherham force-pushed the puppeteer-render branch from 6135afd to 6169562 Compare October 18, 2023 10:49

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4345 October 18, 2023 10:49 Inactive

colinrotherham force-pushed the render-template branch from 629872d to 326f090 Compare October 18, 2023 13:10

colinrotherham force-pushed the puppeteer-render branch from 6169562 to c9c75cc Compare October 18, 2023 13:11

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4345 October 18, 2023 13:11 Inactive

colinrotherham force-pushed the puppeteer-render branch from c9c75cc to ebc1b99 Compare October 18, 2023 13:42

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4345 October 18, 2023 13:42 Inactive

colinrotherham force-pushed the render-template branch from 326f090 to c2cc1ae Compare October 18, 2023 14:40

colinrotherham force-pushed the puppeteer-render branch from ebc1b99 to 869ade3 Compare October 18, 2023 14:52

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4345 October 18, 2023 14:52 Inactive

colinrotherham force-pushed the puppeteer-render branch from 869ade3 to ec012af Compare October 18, 2023 14:56

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4345 October 18, 2023 14:57 Inactive

colinrotherham force-pushed the puppeteer-render branch from ec012af to 08787b3 Compare October 18, 2023 15:12

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4345 October 18, 2023 15:12 Inactive

colinrotherham force-pushed the puppeteer-render branch from 08787b3 to 510437b Compare October 18, 2023 16:01

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4345 October 18, 2023 16:01 Inactive

colinrotherham changed the base branch from render-template to flag-errors October 18, 2023 16:05

colinrotherham force-pushed the puppeteer-render branch from 510437b to ec5c574 Compare October 19, 2023 07:22

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4345 October 19, 2023 07:22 Inactive

colinrotherham force-pushed the puppeteer-render branch from ec5c574 to 0475eaf Compare October 19, 2023 07:32

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4345 October 19, 2023 07:32 Inactive

colinrotherham force-pushed the flag-errors branch 2 times, most recently from 0ebeb59 to 9187532 Compare October 19, 2023 16:59

colinrotherham force-pushed the puppeteer-render branch from 40d5d26 to 6282e07 Compare October 20, 2023 09:11

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4345 October 20, 2023 09:11 Inactive

colinrotherham force-pushed the puppeteer-render branch from 6282e07 to c803301 Compare October 20, 2023 10:15

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4345 October 20, 2023 10:16 Inactive

colinrotherham force-pushed the puppeteer-render branch from c803301 to 927a729 Compare October 20, 2023 11:23

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4345 October 20, 2023 11:24 Inactive

colinrotherham force-pushed the flag-errors branch from 9187532 to 30baef5 Compare October 20, 2023 12:33

colinrotherham force-pushed the puppeteer-render branch from 927a729 to eb70c22 Compare October 20, 2023 12:38

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4345 October 20, 2023 12:38 Inactive

Base automatically changed from flag-errors to main October 20, 2023 13:14

romaricpascal reviewed Oct 20, 2023

View reviewed changes

colinrotherham added 7 commits October 20, 2023 16:27

Remove Puppeteer legacy arguments

b877ab6

Add urls to shared config

4fdb8a6

Update Puppeteer helpers to support file:// URLs

9800e18

By passing a base to `new URL()` we can switch between the Review app and `file://` URLs

Update Puppeteer render() HTML to use file:// URLs

8c8e8c3

Update Puppeteer render() to intercept HTTP requests

090ae4e

This prevents page and asset requests from hitting the Review app entirely

Ensure HTTP interception is turned off via try/finally

c1cde46

colinrotherham force-pushed the puppeteer-render branch from eb70c22 to 2a29ce8 Compare October 20, 2023 15:46

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4345 October 20, 2023 15:46 Inactive

Remove route /tests/boilerplate from Review app

9f3ab07

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4345 October 20, 2023 15:56 Inactive

romaricpascal reviewed Oct 20, 2023

View reviewed changes

romaricpascal approved these changes Oct 20, 2023

View reviewed changes

colinrotherham merged commit 891b112 into main Oct 20, 2023
43 checks passed

colinrotherham deleted the puppeteer-render branch October 20, 2023 16:11

colinrotherham mentioned this pull request Oct 20, 2023

Throw errors during accordion initialisation #4266

Merged

colinrotherham linked an issue Oct 23, 2023 that may be closed by this pull request

Restore ability for tests to fail when component initialisation throws #4103

Closed

1 task

colinrotherham mentioned this pull request Nov 2, 2023

Tests are reliant on the review app #2565

Closed

colinrotherham mentioned this pull request Jan 17, 2024

Only use fixture HTML 'cache' when running on CI #4650

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Puppeteer `render()` to bypass Review app #4345

Update Puppeteer `render()` to bypass Review app #4345

colinrotherham commented Oct 16, 2023 •

edited

Loading

github-actions bot commented Oct 16, 2023 •

edited

Loading

romaricpascal left a comment

romaricpascal Oct 20, 2023

Update Puppeteer render() to bypass Review app #4345

Update Puppeteer render() to bypass Review app #4345

Conversation

colinrotherham commented Oct 16, 2023 • edited Loading

github-actions bot commented Oct 16, 2023 • edited Loading

📋 Stats

File sizes

Modules

romaricpascal left a comment

Choose a reason for hiding this comment

romaricpascal Oct 20, 2023

Choose a reason for hiding this comment

Update Puppeteer `render()` to bypass Review app #4345

Update Puppeteer `render()` to bypass Review app #4345

colinrotherham commented Oct 16, 2023 •

edited

Loading

github-actions bot commented Oct 16, 2023 •

edited

Loading