fix: e2e test coverage reporting (#6286)

* fix: e2e test coverage reporting

* fix: try increasing

* fix: names

* fix: optimize test.yml

* fix: undo last change and add cache

.github/workflows/test.yml

@@ -85,6 +85,27 @@ jobs:
           path: build
           if-no-files-found: error
 
+  build-e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - uses: actions/cache@v3
+        id: build-e2e-cache
+        with:
+          path: node_modules/.cache
+          key: ${{ runner.os }}-build-e2e-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
+          restore-keys: ${{ runner.os }}-build-e2e-${{ hashFiles('**/yarn.lock') }}-
+      - run: yarn prepare
+      - run: yarn build:e2e
+        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
+      - uses: actions/upload-artifact@v2
+        with:
+          name: build-e2e
+          path: build
+          if-no-files-found: error
+
   size-tests:
     needs: [build]
     runs-on: ubuntu-latest
@@ -99,7 +120,7 @@ jobs:
 
 
   cypress-test-matrix:
-    needs: [build]
+    needs: [build-e2e]
     runs-on: ubuntu-latest
     container: cypress/browsers:node-18.14.1-chrome-111.0.5563.64-1-ff-111.0-edge-111.0.1661.43-1
     strategy:
@@ -109,7 +130,6 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-
       - uses: actions/cache@v3
         id: cypress-cache
         with:
@@ -121,7 +141,7 @@ jobs:
 
       - uses: actions/download-artifact@v3
         with:
-          name: build
+          name: build-e2e
           path: build
 
       - uses: cypress-io/github-action@v4

.nycrc

-{
-  "extends": "@istanbuljs/nyc-config-typescript",
-  "all": true,
-  "report-dir": "coverage",
-  "soureMap": false,
-  "instrument": false
-}
\ No newline at end of file

craco.config.cjs

@@ -14,15 +14,30 @@ const shouldLintOrTypeCheck = !isProduction
 
 module.exports = {
   babel: {
-    plugins: ['@vanilla-extract/babel-plugin'],
-    env: {
-      test: {
-        plugins: ['istanbul'],
-      },
-      development: {
-        plugins: ['istanbul'],
-      },
+    plugins: [
+      '@vanilla-extract/babel-plugin',
+      ...(process.env.REACT_APP_ADD_COVERAGE_INSTRUMENTATION
+        ? [
+            [
+              'istanbul',
+              {
+                all: true,
+                include: ['src/**/*.tsx', 'src/**/*.ts'],
+                exclude: [
+                  'src/**/*.css',
+                  'src/**/*.css.ts',
+                  'src/**/*.test.ts',
+                  'src/**/*.test.tsx',
+                  'src/**/*.spec.ts',
+                  'src/**/*.spec.tsx',
+                  'src/**/graphql/**/*',
+                  'src/**/*.d.ts',
+                ],
               },
+            ],
+          ]
+        : []),
+    ],
   },
   eslint: {
     enable: shouldLintOrTypeCheck,

package.json

@@ -20,6 +20,7 @@
     "postinstall": "patch-package",
     "start": "craco start",
     "build": "craco build",
+    "build:e2e": "REACT_APP_CSP_ALLOW_UNSAFE_EVAL=true REACT_APP_ADD_COVERAGE_INSTRUMENTATION=true craco build",
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "serve": "serve build -l 3000",
     "lint": "yarn eslint --ignore-path .gitignore --cache --cache-location node_modules/.cache/eslint/ .",
@@ -100,6 +101,7 @@
     "@uniswap/eslint-config": "^1.1.1",
     "@vanilla-extract/babel-plugin": "^1.1.7",
     "@vanilla-extract/webpack-plugin": "^2.1.11",
+    "babel-plugin-istanbul": "^6.1.1",
     "cypress": "10.3.1",
     "cypress-hardhat": "^1.0.0",
     "env-cmd": "^10.1.0",
@@ -190,7 +192,6 @@
     "@web3-react/walletconnect": "^8.2.0",
     "array.prototype.flat": "^1.2.4",
     "array.prototype.flatmap": "^1.2.4",
-    "babel-plugin-istanbul": "^6.1.1",
     "cids": "^1.0.0",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.2.0",

public/index.html

@@ -18,7 +18,11 @@
     <meta name="theme-color" content="#FC72FF" />
     <meta
       http-equiv="Content-Security-Policy"
+      <% if (process.env.REACT_APP_CSP_ALLOW_UNSAFE_EVAL) { %>
+        content="script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com 'unsafe-inline' 'unsafe-eval'"
+      <% } else { %>
         content="script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com 'unsafe-inline'"
+      <% } %>
     />
 
     <!--