Test react-error-overlay passes dev CSP

oasisprotocol · Aug 25, 2023 · c907220 · c907220
1 parent 94b2d46
commit c907220
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git a/internals/getSecurityHeaders.js b/internals/getSecurityHeaders.js
@@ -17,9 +17,7 @@ const localnet = `
 const hmrWebsocket = `
   ws://localhost:2222
 `
-const reactErrorOverlay = `
-  'sha256-RV6I4HWPb71LvA27WVD3cEz8GsJrHlfcM/2X2Q5gV00='
-`
+const reactErrorOverlay = `'sha256-RV6I4HWPb71LvA27WVD3cEz8GsJrHlfcM/2X2Q5gV00='`
 const hmrScripts = `
   'unsafe-eval'
 `
@@ -106,4 +104,4 @@ const getPermissionsPolicy = () =>
     .join(' ')
     .replace(/ ,/g, ',')
 
-module.exports = { getCsp, getPermissionsPolicy }
+module.exports = { getCsp, getPermissionsPolicy, reactErrorOverlay }
diff --git a/playwright/tests/csp-react-error-overlay.spec.ts b/playwright/tests/csp-react-error-overlay.spec.ts
@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+import { reactErrorOverlay } from '../../internals/getSecurityHeaders.js'
+
+test('Dev Content-Security-Policy should allow react-error-overlay', async ({ page, baseURL }) => {
+  if (baseURL !== 'http://localhost:3000') test.skip()
+  expect((await page.request.head('/')).headers()).toHaveProperty('content-security-policy')
+  expect((await page.request.head('/')).headers()['content-security-policy']).toContain(reactErrorOverlay)
+  await page.goto('/e2e')
+  await page.getByRole('button', { name: 'Trigger uncaught error' }).click()
+  await expect(page.locator('iframe')).toBeVisible()
+  await expect(page.frameLocator('iframe').getByText('ReferenceError')).toBeVisible()
+})
diff --git a/src/app/pages/E2EPage/index.tsx b/src/app/pages/E2EPage/index.tsx
@@ -22,7 +22,7 @@ export function E2EPage() {
       <br />
       <TestUnsafeInputs></TestUnsafeInputs>
       <br />
-      <TriggerFatalError></TriggerFatalError>
+      <TriggerError></TriggerError>
       <br />
       <DemoAlertBoxes></DemoAlertBoxes>
     </div>
@@ -118,7 +118,7 @@ function UnsafePasswordField(props: {
   )
 }
 
-function TriggerFatalError() {
+function TriggerError() {
   const dispatch = useDispatch()
   return (
     <div>
@@ -128,6 +128,13 @@ function TriggerFatalError() {
           dispatch(walletActions.openWalletFromPrivateKey({ privateKey: '0xAA', choosePassword: undefined }))
         }}
       />
+      <Button
+        label="Trigger uncaught error"
+        onClick={() => {
+          // @ts-expect-error Function does not exist
+          functionDoesNotExist()
+        }}
+      />
     </div>
   )
 }