Upload coverage and spec reports to code quality services (#1339)

Configures JUnit output files and processing on these three coverage services:
* Otterwise
* Codecov (current winner)
* Coveralls

Note that they all provide the most capabilities for "open source", public repos like this - so seemed like a good starting point to see how they behave.

Author: jeffbax

.github/workflows/create-new-release.yml

@@ -74,9 +74,13 @@ jobs:
       - name: Install dependencies
         run: yarn install
 
-      # Build assets
-      - run: yarn build
-      - run: npm pack
+      - name: Compile assets bundle
+        run: yarn build
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+
+      - name: Pack bundle tarball
+        run: npm pack
 
       - name: Create Release
         id: create_release

.github/workflows/test.yml

@@ -8,6 +8,8 @@ jobs:
     steps:
       - name: Checkout branch
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
 
       - name: Setup Node
         uses: actions/setup-node@v4
@@ -25,3 +27,29 @@ jobs:
 
       - name: Test
         run: yarn test
+
+      - name: Upload coverage to OtterWise
+        if: ${{ !cancelled() && vars.OTTERWISE_ENABLED == 'true' }}
+        uses: getOtterWise/github-action@v1
+        with:
+          token: ${{ secrets.OTTERWISE_TOKEN }}
+
+      - name: Upload coverage to Coveralls
+        if: ${{ !cancelled() && vars.COVERALLS_ENABLED == 'true' }}
+        uses: coverallsapp/github-action@v2
+        with:
+          # github-token: ${{ secrets.GITHUB_TOKEN }}
+          format: lcov
+          file: ./coverage/lcov.info
+
+      - name: Upload coverage to Codecov
+        if: ${{ !cancelled() && vars.CODECOV_ENABLED == 'true' }}
+        uses: codecov/codecov-action@v5
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+
+      - name: Upload test results to Codecov
+        if: ${{ !cancelled() && vars.CODECOV_ENABLED == 'true' }}
+        uses: codecov/test-results-action@v1
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}

.gitignore

@@ -35,3 +35,4 @@ yarn-debug.log*
 yarn-error.log*
 *.mp4
 /DS/.idea
+/junit.xml

.storybook/webpack.config.js

@@ -1,6 +1,16 @@
 const path = require('path');
+const { codecovWebpackPlugin } = require("@codecov/webpack-plugin");
 
 module.exports = function({ config }) {
+  config.plugins = config.plugins || [];
+  config.plugins.push(
+    codecovWebpackPlugin({
+      enableBundleAnalysis: process.env.CODECOV_TOKEN !== undefined,
+      bundleName: "design-system",
+      uploadToken: process.env.CODECOV_TOKEN,
+    }),
+  );
+
   config.module.rules.push({
     test: /\.scss$/,
     use: [

codecov.yml

@@ -0,0 +1,8 @@
+coverage:
+  status:
+    project:
+      default:
+        informational: true
+    patch:
+      default:
+        informational: true

jest.config.js

@@ -34,6 +34,7 @@ module.exports = {
   // A list of reporter names that Jest uses when writing coverage reports
   coverageReporters: [
     "text",
+    "lcov",
   ],
 
   // An object that configures minimum threshold enforcement for coverage results
@@ -98,7 +99,9 @@ module.exports = {
   // projects: null,
 
   // Use this configuration option to add custom reporters to Jest
-  // reporters: undefined,
+  reporters: [
+    'jest-junit',
+  ],
 
   // Automatically reset mock state between every test
   // resetMocks: false,

package.json

@@ -97,6 +97,7 @@
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
     "@babel/runtime": "^7.28.4",
+    "@codecov/webpack-plugin": "^1.9.1",
     "@eslint/compat": "^1.4.1",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
@@ -148,6 +149,7 @@
     "jest": "^29.7.0",
     "jest-css-modules-transform": "^4.4.2",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-junit": "^16.0.0",
     "nodemon": "^3.1.10",
     "postcss": "^8.5.6",
     "prop-types": "^15.8.1",

src/Toast/__snapshots__/withToast.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`test withToast it can create a new Toast message 1`] = `
+exports[`withToast() can create a new Toast message 1`] = `
 [
   <div
     className="Alert Alert-success"

src/Toast/withToast.test.tsx

@@ -16,8 +16,8 @@ function WrappedComponent() {
   return <div />;
 }
 
-describe('test withToast', () => {
-  test('it can create a new Toast message', async () => {
+describe('withToast()', () => {
+  it('can create a new Toast message', async () => {
     const newMessage = 'This is just a test...';
     const ComponentWithToast = withToast(WrappedComponent);
     const toast = create(<ComponentWithToast />);