Merge pull request #2772 from alphagov/dependabot/npm_and_yarn/puppet…

…eer-20.2.0

Bump puppeteer from 19.10.1 to 20.2.0

__tests__/accessiblity-audit.test.js

@@ -6,6 +6,7 @@ async function analyze (page, path) {
   await goTo(page, path)
 
   const axe = new AxePuppeteer(page)
+    .setLegacyMode(true) // Share single page via iframe
     .include('body')
     // axe reports there is "no label associated with the text field", when there is one.
     .exclude('#app-site-search__input')
@@ -16,6 +17,8 @@ async function analyze (page, path) {
     .exclude('.govuk-skip-link')
     // axe reports that the back to top button is not inside a landmark, which is intentional.
     .exclude('.app-back-to-top')
+    // axe reports that the Browsersync banner is not inside a landmark, which is intentional.
+    .exclude('#__bs_notify__')
     // axe reports that the frame "does not have a main landmark" and example <h1> headings
     // violate "Heading levels should only increase by one", which is intentional.
     // https://github.com/alphagov/govuk-design-system/pull/2442#issuecomment-1326600528

__tests__/cookie-banner.test.js

@@ -17,7 +17,7 @@ describe('Cookie banner', () => {
   const cookieParam = {
     name: 'design_system_cookies_policy',
     value: JSON.stringify({ analytics: true, version: 1 }),
-    url: `http://localhost:${configPaths.testPort}`
+    url: `http://localhost:${configPaths.port}`
   }
 
   async function setup (page) {

__tests__/cookies-page.test.js

@@ -19,7 +19,7 @@ describe('Cookies page', () => {
   beforeEach(async () => {
     await page.deleteCookie({
       name: 'design_system_cookies_policy',
-      url: `http://localhost:${configPaths.testPort}`
+      url: `http://localhost:${configPaths.port}`
     })
 
     await page.setJavaScriptEnabled(true)

config/paths.json

@@ -15,6 +15,5 @@
   "views": "views/",
     "layouts": "views/layouts/",
     "partials": "views/partials/",
-  "port": 3000,
-  "testPort": 3333
+  "port": 3000
 }

jest-puppeteer.config.js

@@ -1,9 +1,34 @@
 const configPaths = require('./lib/paths.js')
 
+/**
+ * @type {import('jest-environment-puppeteer').JestPuppeteerConfig}
+ */
 module.exports = {
   browserContext: 'incognito',
+
+  /**
+   * Puppeteer launch options
+   */
+  launch: {
+    /**
+     * Allow headless mode switching using `HEADLESS=false`
+     * but default to `new` to skip deprecation warning
+     *
+     * {@link https://developer.chrome.com/articles/new-headless/}
+     */
+    headless: process.env.HEADLESS !== 'false'
+      ? 'new'
+      : false
+  },
+
+  /**
+   * Development server options
+   */
   server: {
     command: 'npm run serve',
-    port: configPaths.testPort
+    port: configPaths.port,
+
+    // Skip when already running
+    usedPortAction: 'ignore'
   }
 }

jest.config.mjs

@@ -1,6 +1,21 @@
+import jestPuppeteerConfig from './jest-puppeteer.config.js'
+
+// Detect when browser has been launched headless
+const { headless } = jestPuppeteerConfig.launch
+
+/**
+ * Jest config
+ *
+ * @type {import('@jest/types').Config.InitialOptions}
+ */
 export default {
   preset: 'jest-puppeteer',
 
+  // Reduce CPU usage during project test runs
+  maxWorkers: headless
+    ? '50%' // Matches Jest default (50%) via `--watch`
+    : 1, // Use only 1x browser window when headless
+
   // Custom matchers
   setupFilesAfterEnv: ['./config/jest/matchers.js'],
 

lib/puppeteer-helpers.js

@@ -1,7 +1,5 @@
 const configPaths = require('../lib/paths.js')
 
-const PORT = configPaths.testPort
-
 /**
  * Navigate to path
  *
@@ -10,7 +8,7 @@ const PORT = configPaths.testPort
  * @returns {Promise<import('puppeteer').Page>} Puppeteer page object
  */
 async function goTo (page, path) {
-  const { href } = new URL(path, `http://localhost:${PORT}`)
+  const { href } = new URL(path, `http://localhost:${configPaths.port}`)
 
   // Navigate to blank page first to fix same page
   // hash fragment changes (window.location.hash)

package.json

@@ -74,7 +74,7 @@
     "metalsmith-renamer": "^0.5.217",
     "nunjucks": "^3.2.4",
     "outdent": "^0.8.0",
-    "puppeteer": "^19.10.1",
+    "puppeteer": "^20.2.0",
     "rollup": "^3.21.7",
     "sitemap": "^7.1.1",
     "slash": "^3.0.0",

tasks/serve.js

@@ -9,6 +9,6 @@ const paths = require('../lib/paths.js')
 const app = connect().use(serveStatic(paths.public))
 const server = createServer(app)
 
-server.listen(paths.testPort, () => {
-  console.log(`Server started at http://localhost:${paths.testPort}`)
+server.listen(paths.port, () => {
+  console.log(`Server started at http://localhost:${paths.port}`)
 })