chore(tests): Update coverage config

.gitignore

@@ -15,19 +15,18 @@ dist
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-coverage
 
 .DS_Store
-coverage
 sitemap.xml
 
 # cypress
 cypress/downloads
 cypress/screenshots
 cypress/videos
 
-codecov*
+codecov
+coverage/*
+coverage-*
 .nyc_output
-reports
 
-.cache
+.cache

.travis.yml

@@ -12,8 +12,10 @@ jobs:
     - stage: Lint
       script: npm run lint && commitlint-travis
     - stage: Test
-      script: npm run test && npm run test:ct
-      after_success: npm run coverage
+      script: npm run travis:verify
+    - stage: Build
+      script: npm run build
+
 env:
   global:
     - BRANCH=${TRAVIS_PULL_REQUEST_BRANCH:-$TRAVIS_BRANCH}

babel.config.js

@@ -1,17 +1,20 @@
 module.exports = {
+  env: {
+    componentTest: {
+      plugins: ['istanbul'],
+    },
+  },
   presets: [
     [
-      '@babel/preset-env',
+      '@babel/env',
       {
         targets: '> 0.25%, not dead',
       },
     ],
     '@babel/react',
   ],
-  plugins: ['@babel/plugin-transform-runtime'],
-  env: {
-    componentTest: {
-      plugins: ['istanbul'],
-    },
-  },
+  plugins: [
+    '@babel/plugin-transform-runtime',
+    '@babel/plugin-syntax-dynamic-import',
+  ],
 };

config/cypress.webpack.config.js

@@ -1,6 +1,6 @@
 const { resolve } = require('path');
-const webpack = require('webpack');
 const config = require('@redhat-cloud-services/frontend-components-config');
+const webpack = require('webpack');
 
 const { config: webpackConfig, plugins } = config({
   rootFolder: resolve(__dirname, '../'),
@@ -20,32 +20,40 @@ const { config: webpackConfig, plugins } = config({
   }),
 });
 
-plugins.push(
-  new webpack.DefinePlugin({
-    IS_DEV: true,
-  })
-);
-
-// required to mock the chrome functionss
-webpackConfig.module.rules.push({
+module.exports = {
+  ...webpackConfig,
+  plugins: [
+    ...plugins,
+    new webpack.DefinePlugin({
+      IS_DEV: process.env.NODE_ENV !== 'production',
+    }),
+  ],
+  module: {
+    ...webpackConfig.module,
+    rules: [
+      ...webpackConfig.module.rules,
+      {
+        resolve: {
+          alias: {
+            '@redhat-cloud-services/frontend-components/useChrome': resolve(
+              __dirname,
+              './overrideChrome.js'
+            ),
+            '../useChrome': resolve(__dirname, './overrideChrome.js'),
+          },
+        },
+      },
+      {
+        test: /\.(?:js|mjs|cjs)$/,
+        exclude: /(node_modules|bower_components)/i,
+        use: ['babel-loader'],
+      },
+    ],
+  },
   resolve: {
-    alias: {
-      '@redhat-cloud-services/frontend-components/useChrome': resolve(
-        __dirname,
-        './overrideChrome.js'
-      ),
-      '../useChrome': resolve(__dirname, './overrideChrome.js'),
+    fallback: {
+      stream: require.resolve('stream-browserify'),
+      zlib: require.resolve('browserify-zlib'),
     },
   },
-});
-
-webpackConfig.module.rules.push({
-  test: /cypress\/.*\.js$/,
-  exclude: /(node_modules|bower_components)/i,
-  use: ['babel-loader'],
-});
-
-module.exports = {
-  ...webpackConfig,
-  plugins,
 };

coverage.sh

@@ -1,19 +1,53 @@
-#!/bin/sh -ex
-
-# Merge coverage reports from cypress and jest tests
-mkdir -p reports
-
-cp codecov-cypress/coverage-final.json reports/from-cypress.json
-cp codecov-jest/coverage-final.json reports/from-jest.json
-
-npx nyc merge reports .nyc_output/out.json
-npx nyc report --reporter json --report-dir coverage
-
-# Upload the final coverage report to codecov https://docs.codecov.com/docs/codecov-uploader
-curl -Os https://uploader.codecov.io/latest/linux/codecov
-chmod +x codecov
-
-# Workaround for https://github.com/codecov/uploader/issues/475
-unset NODE_OPTIONS
-
-./codecov -t ${CODECOV_TOKEN} -f "coverage/coverage-final.json"
+#!/bin/bash
+#
+# Merges coverage reports from cypress and jest tests
+# and generates an HTML report to view and json report to submit to codecov
+#
+case $(uname) in
+Darwin)
+	export CODECOV_BIN="https://uploader.codecov.io/latest/macos/codecov"
+	;;
+Linux)
+	export CODECOV_BIN="https://uploader.codecov.io/latest/linux/codecov"
+	;;
+esac
+
+rm -rf ./nyc_output
+rm -rf ./coverage-jest
+rm -rf ./coverage-cypress
+rm -rf ./coverage
+
+mkdir -p coverage/src
+
+npm run test
+cp ./coverage-jest/coverage-final.json ./coverage/src/jest.json
+
+if [ -f cypress.config.js ]; then
+	npm run test:ct
+	cp ./coverage-cypress/coverage-final.json ./coverage/src/cypress.json
+else
+	echo "No cypress config found!"
+fi
+
+npx nyc merge ./coverage/src ./coverage/coverage-final.json
+npx nyc report -t ./coverage --reporter html --report-dir ./coverage/html
+
+if [ -z "${TRAVIS}" ]; then
+	echo "Not on travis..."
+else
+	# Workaround for https://github.com/codecov/uploader/issues/475
+	unset NODE_OPTIONS
+	echo "Downloading codecov binary from $CODECOV_BIN"
+
+	curl -Os "$CODECOV_BIN"
+	chmod +x codecov
+
+	echo "Uploading to codecov"
+
+	./codecov --verbose -F "combined" -t "$CODECOV_TOKEN" -f ./coverage/coverage-final.json
+	./codecov --verbose -F "jest" -t "$CODECOV_TOKEN" -f ./coverage-jest/coverage-final.json
+
+	if [ -f cypress.config.js ]; then
+		./codecov --verbose -F "cypress" -t "$CODECOV_TOKEN" -f ./coverage-cypress/coverage-final.json
+	fi
+fi

cypress.config.js

@@ -1,4 +1,5 @@
 const { defineConfig } = require('cypress');
+const { devServer } = require('@cypress/webpack-dev-server');
 const webpackConfig = require('./config/cypress.webpack.config.js');
 const codeCoverageTask = require('@cypress/code-coverage/task');
 
@@ -7,10 +8,12 @@ module.exports = defineConfig({
   viewportHeight: 660,
   video: false,
   component: {
-    devServer: {
-      framework: 'react',
-      bundler: 'webpack',
-      webpackConfig,
+    devServer(devServerConfig) {
+      return devServer({
+        ...devServerConfig,
+        framework: 'react',
+        webpackConfig,
+      });
     },
     specPattern: 'src/**/*.cy.{js,ts,jsx,tsx}',
     setupNodeEvents(on, config) {