Fix missing Percy window.fetch() for healthcheck etc

Target closed error and device pixel ratio adjustment

package.json

@@ -89,6 +89,7 @@
     "stylelint-order": "^5.0.0",
     "undici": "^5.10.0",
     "wait-on": "^6.0.1",
+    "ws": "^8.8.1",
     "yargs": "^15.4.1"
   },
   "optionalDependencies": {

src/govuk/components/all.test.js

@@ -4,6 +4,8 @@
 
 /* eslint-env jest */
 
+const { fetch } = require('undici')
+const { WebSocket } = require('ws')
 require('html-validate/jest')
 
 const { allComponents, getComponentData } = require('../../../lib/file-helper')
@@ -14,8 +16,6 @@ const configPaths = require('../../../config/paths.js')
 const PORT = configPaths.ports.test
 const baseUrl = 'http://localhost:' + PORT
 
-const percySnapshot = require('@percy/puppeteer')
-
 // We can't use the render function from jest-helpers, because we need control
 // over the nunjucks environment.
 const nunjucks = require('nunjucks')
@@ -43,6 +43,14 @@ it('_all.scss renders to CSS without errors', () => {
 })
 
 describe.each(allComponents)('%s', (component) => {
+  let percySnapshot
+
+  beforeAll(() => {
+    // Support fetch() detection, upload via WebSocket()
+    global.window = { fetch, WebSocket }
+    percySnapshot = require('@percy/puppeteer')
+  })
+
   it(`${component}.scss renders to CSS without errors`, () => {
     return renderSass({
       file: `${configPaths.src}/components/${component}/_${component}.scss`

src/govuk/components/error-summary/error-summary.test.js

@@ -86,7 +86,9 @@ describe('Error Summary', () => {
         $ => $.getBoundingClientRect().top
       )
 
-      expect(legendOrLabelOffsetFromTop).toEqual(0)
+      // Allow for high DPI displays (device pixel ratio)
+      expect(legendOrLabelOffsetFromTop).toBeGreaterThanOrEqual(0)
+      expect(legendOrLabelOffsetFromTop).toBeLessThan(1)
     })
 
     it('does not include a hash in the URL', async () => {