test: add coverage with istanbul

Signed-off-by: Peter Makowski <peter.makowski@canonical.com>

.github/workflows/tics.yml

@@ -7,8 +7,88 @@ on:
       - ci-add-tics-workflow
 
 jobs:
+  test-coverage:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Run tests with coverage
+        run: |
+          set -x
+          yarn test:coverage
+          zip -r coverage/coverage-report.zip coverage/
+          # Clean up any unwanted directories if necessary
+          find . -type d -name "unwanted-dir" -exec rm -r {} +
+
+      - name: Upload coverage report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage-report
+          path: coverage/coverage-report.zip
+          retention-days: 1
+
+  publish-coverage-report:
+    name: publish-coverage-report
+    runs-on: ubuntu-latest
+    needs: test-coverage
+    continue-on-error: true
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: gh-pages
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Cleanup coverage directory
+        run: |
+          rm -rf coverage
+          mkdir coverage
+
+      - name: Download coverage report artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: coverage-report
+          path: coverage
+
+      - name: Set Git User
+        run: |
+          git config --global user.email "github-action@example.com"
+          git config --global user.name "GitHub Action"
+
+      - name: Push coverage Report
+        timeout-minutes: 3
+        run: |
+          git add .
+          git commit -m "workflow: update coverage report"
+          while true; do
+            git pull --rebase
+            if [ $? -ne 0 ]; then
+              echo "Failed to rebase. Please review manually."
+              exit 1
+            fi
+            git push
+            if [ $? -eq 0 ]; then
+              echo "Successfully pushed HTML report to repo."
+              exit 0
+            fi
+          done
+
+      - name: Output Report URL as Workflow Annotation
+        run: |
+          FULL_HTML_REPORT_URL=FULL_HTML_REPORT_URL=https://canonical.github.io/maas-ui/coverage
+          echo "::notice title=Published Test Coverage Report::$FULL_HTML_REPORT_URL"
+
   tics-report:
     runs-on: ubuntu-latest
+    needs: publish-coverage-report
     steps:
       - uses: actions/checkout@v4
       - name: Run TICS Analyzer

.gitignore

@@ -36,7 +36,9 @@ cypress.env.json
 *.DS_Store
 *.fuse*
 
+# test results
 sitespeed.io/results
 /test-results/
 /playwright-report/
 /playwright/.cache/
+coverage/

package.json

@@ -36,6 +36,7 @@
     "test-ui": "TZ=UTC vitest",
     "test:debug": "vitest --inspect-brk test --runInBand --no-cache  --testTimeout=100000000",
     "test": "yarn test-ui",
+    "test:coverage": "yarn test-ui -- --coverage",
     "test:ci": "yarn test-ui",
     "unlink-components": "yarn unlink react && yarn unlink \"@canonical/react-components\"",
     "wait-on-ui": "wait-on http-get://0.0.0.0:8400/MAAS/r",
@@ -115,6 +116,7 @@
     "@types/react-router-dom": "5.3.3",
     "@types/redux-mock-store": "1.0.6",
     "@types/redux-saga": "0.10.5",
+    "@vitest/coverage-istanbul": "1.6.0",
     "@welldone-software/why-did-you-render": "8.0.1",
     "address": "2.0.2",
     "babel-plugin-named-exports-order": "0.0.2",

src/app/Routes.test.tsx

@@ -202,8 +202,14 @@ describe("Routes", () => {
       route: urls.settings.index,
       state,
     });
-    await waitFor(() =>
-      expect(window.location.pathname).toBe(urls.settings.configuration.general)
+    await waitFor(
+      () =>
+        expect(window.location.pathname).toBe(
+          urls.settings.configuration.general
+        ),
+      {
+        timeout: LONG_TIMEOUT,
+      }
     );
   });
 

vitest.config.ts

@@ -11,5 +11,8 @@ export default defineConfig({
     setupFiles: ["./src/setupTests.ts"],
     exclude: [...configDefaults.exclude, "**/tests/**"],
     clearMocks: true,
+    coverage: {
+      provider: "istanbul",
+    },
   },
 });