feat: add playwright code coverage

.github/workflows/test-e2e.yml

@@ -42,3 +42,10 @@ jobs:
 
       - name: Run E2E against ${{ matrix.backend }}-ipfs
         run: E2E_IPFSD_TYPE=${{ matrix.backend }} npm run test:e2e
+
+      - name: Generate nyc coverage report
+        id: coverage
+        run:
+          coverage=$(npx nyc report --reporter=text)
+          echo $coverage
+          echo "::set-output name=text::$coverage"

.gitignore

@@ -31,5 +31,7 @@ tsconfig.tsbuildinfo
 .tool-versions
 .envrc
 .cid
+.cache
+.nyc_output
 
 tx

.nycrc

@@ -0,0 +1,6 @@
+
+{
+  "include": ["src/**/*.js"],
+  "exclude": ["**/*.test.js", "**/*.stories.js"],
+  "reporter": ["html", "text", "lcov"]
+}

config-overrides.js

@@ -4,20 +4,57 @@
  * @see https://github.com/facebook/create-react-app/issues/11756#issuecomment-1184657437
  * @see https://alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5
  */
-const webpack = require('webpack');
+const webpack = require('webpack')
 
-module.exports = function override(config) {
+/**
+ *
+ * @param {import('webpack').RuleSetRule[]} rules
+ */
+function modifyBabelLoaderRule (rules, root = true) {
+  const foundRules = []
+  rules.forEach((rule, i) => {
+    if (rule.loader != null) {
+      if (rule.loader.includes('babel-loader')) {
+        foundRules.push(rule)
+      }
+    } else if (rule.use?.loader != null) {
+      if (typeof rule.use.loader !== 'string') {
+        if (rule.use.loader.find(loader => loader.indexOf('babel-loader') >= 0)) {
+          foundRules.push(rule)
+        }
+      } else if (rule.use.loader.indexOf('babel-loader') >= 0) {
+        foundRules.push(rule)
+      }
+    } else if (rule.oneOf) {
+      const nestedRules = modifyBabelLoaderRule(rule.oneOf, false)
+      foundRules.push(...nestedRules)
+    }
+  })
 
-  const fallback = config.resolve.fallback || {};
+  if (root) {
+    foundRules.forEach((rule, index) => {
+      if (rule.include?.indexOf('src') >= 0) {
+        console.log('Found CRA babel-loader rule for source files. Modifying it to instrument for code coverage.')
+        console.log('rule: ', rule)
+        rule.options.plugins.push('istanbul')
+      }
+    })
+  }
+
+  return foundRules
+}
+
+module.exports = function webpackOverride (config) {
+  const fallback = config.resolve.fallback || {}
 
   Object.assign(fallback, {
-    "assert": require.resolve('./src/webpack-fallbacks/assert'),
-    "stream": require.resolve('./src/webpack-fallbacks/stream'),
-    "os": require.resolve('./src/webpack-fallbacks/os'),
-    "path": require.resolve('./src/webpack-fallbacks/path'),
+    assert: require.resolve('./src/webpack-fallbacks/assert'),
+    stream: require.resolve('./src/webpack-fallbacks/stream'),
+    os: require.resolve('./src/webpack-fallbacks/os'),
+    path: require.resolve('./src/webpack-fallbacks/path')
   })
 
-  config.resolve.fallback = fallback;
+  config.resolve.fallback = fallback
 
   config.plugins = (config.plugins || []).concat([
     new webpack.ProvidePlugin({
@@ -26,5 +63,11 @@ module.exports = function override(config) {
     })
   ])
 
-  return config;
+  // Instrument for code coverage in development mode
+  const REACT_APP_ENV = process.env.REACT_APP_ENV ?? process.env.NODE_ENV ?? 'production'
+  if (REACT_APP_ENV === 'test') {
+    modifyBabelLoaderRule(config.module.rules)
+  }
+
+  return config
 }