test: add coverage report with istanbul (#5454)

- publish coverage report at https://canonical.github.io/maas-ui/coverage/ on every push to main
- update .gitignore to exclude coverage reports
- add test-coverage script to package.json
- configure Vitest to use Istanbul for coverage

.github/workflows/test.yml

@@ -46,6 +46,35 @@ jobs:
         run: CYPRESS_INSTALL_BINARY=0 yarn install
       - run: yarn test:ci
 
+  publish-coverage-report:
+    if: github.ref == 'refs/heads/main'
+    runs-on: ubuntu-latest
+    needs: test
+
+    permissions:
+      id-token: write
+      pages: write
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Download coverage report
+        uses: actions/download-artifact@v4
+        with:
+          name: coverage-report
+          path: coverage
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: coverage
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+
   build:
     name: Build
     timeout-minutes: 15

.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,7 +36,8 @@
     "test-ui": "TZ=UTC vitest",
     "test:debug": "vitest --inspect-brk test --runInBand --no-cache  --testTimeout=100000000",
     "test": "yarn test-ui",
-    "test:ci": "yarn test-ui",
+    "test-coverage": "yarn test-ui -- --coverage",
+    "test:ci": "yarn test-coverage",
     "unlink-components": "yarn unlink react && yarn unlink \"@canonical/react-components\"",
     "wait-on-ui": "wait-on http-get://0.0.0.0:8400/MAAS/r",
     "storybook": "storybook dev -p 6006",
@@ -117,6 +118,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",
+    },
   },
 });