EREGCSC-2004 -- Implement Vitest into our build pipeline (#1513)

* chore: first pass at adding Vitest tests to exp gh action

* chore: remove prerequisites for test-javascript

* chore: remove npm cache

* chore: add optional dependency to package.json for ci/cd

* chore: build-and-deploy-vue required before notify job

* chore: add updated package-lock to source control

* test: mock vue-router in SubjectSelector test suite

* chore: run build pipeline for all Vue components before testing

* chore: install npm deps without building

* chore: remove superfluous job deps

* chore: install FE deps in separate step before Vitest step

* chore: don't block any jobs with Vitest job

* fix: fix YAML formatting issue

* fix: restore deploy-django to needs matrix for required output

* chore: notify after only build-and-deploy-vue

* chore: remove deploy-go requirement for cypress job

* test: add leeway to flaky JS unit test

* chore: make JS unit testing its own workflow

* chore: remove environment from vitest workflow

* chore: add some badges to README

* chore: update branch name in Build Status badge table

* chore: rearrange badges

* chore: badge tweaks

.github/workflows/deploy-experimental.yml

@@ -474,9 +474,8 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version:
-            18.14
-            # setup python
+          node-version: 18.14
+      # setup python
       - uses: actions/setup-python@v5
         if: success() && steps.findPr.outputs.number
         with:
@@ -568,7 +567,7 @@ jobs:
     permissions:
       pull-requests: write
     runs-on: ubuntu-22.04
-    needs: [deploy-go, deploy-django]
+    needs: build-and-deploy-vue
     steps:
       - name: Find PR number
         uses: jwalton/gh-find-current-pr@v1
@@ -593,7 +592,6 @@ jobs:
       name: "dev"
     runs-on: ubuntu-22.04
     needs: [deploy-django, build-and-deploy-vue]
-    #needs: [deploy-go, deploy-django, build-and-deploy-vue]
     steps:
       # Checkout the code
       - name: Checkout

.github/workflows/javascript-test.yml

@@ -0,0 +1,39 @@
+name: "JavaScript Unit Tests with Vitest"
+
+on:
+  pull_request:
+    types: [ opened, synchronize, reopened ]
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  test-javascript:
+    runs-on: ubuntu-22.04
+    strategy:
+      fail-fast: true
+    steps:
+      # Checkout the code
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          submodules: true
+      # Setup node environment
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      # Install Front End dependencies
+      - name: Install Front End dependencies
+        if: success()
+        working-directory: ./solution
+        run: |
+          make install-npm
+      # Execute the JavaScript tests
+      - name: Run JavaScript unit tests with Vitest
+        if: success()
+        working-directory: ./solution
+        run: |
+          make test.vitest.coverage

README.md

@@ -1,6 +1,10 @@
-# About
+# CMCS eRegulations
 
+[![Deploy](https://github.com/Enterprise-CMCS/cmcs-eregulations/actions/workflows/deploy.yml/badge.svg)](https://github.com/Enterprise-CMCS/cmcs-eregulations/actions/workflows/deploy.yml)
 [![Parser Checks](https://github.com/Enterprise-CMCS/cmcs-eregulations/actions/workflows/parser-checks.yml/badge.svg)](https://github.com/Enterprise-CMCS/cmcs-eregulations/actions/workflows/parser-checks.yml)
+[![CodeQL](https://github.com/Enterprise-CMCS/cmcs-eregulations/actions/workflows/github-code-scanning/codeql/badge.svg)](https://github.com/Enterprise-CMCS/cmcs-eregulations/actions/workflows/github-code-scanning/codeql/)
+
+# About
 
 This is a project for the Center for Medicaid and CHIP Services (CMCS) to meet needs of CMCS and State staff researching regulations and related guidance, building on the [eRegulations](https://eregs.github.io/) open source project.
 

solution/Makefile

@@ -5,6 +5,9 @@ help: ## Show this help.
 regulations: ## Build regulations assets
 regulations: ui/regulations/node_modules static-assets/regulations/css/main.css ui/regulations/eregs-component-lib/node_modules static-assets/regulations/js/eregs-main.iife.js ui/regulations/eregs-vite/node_modules build-spa
 
+install-npm: ## Install npm dependencies
+install-npm: ui/regulations/node_modules ui/regulations/eregs-vite/node_modules ui/regulations/eregs-component-lib/node_modules
+
 ui/regulations/node_modules: ui/regulations/package.json
 	cd ui/regulations; \
 		npm install;

solution/ui/regulations/eregs-vite/src/components/subjects/SubjectSelector.test.js

@@ -1,7 +1,23 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 
 import SubjectSelector from "./SubjectSelector.vue";
 
+afterEach(() => {
+    vi.clearAllMocks();
+});
+
+const mockRoutePush = vi.fn();
+vi.mock("vue-router", async () => {
+    return {
+        RouterView: {},
+        useRouter: () => {
+            return {
+                push: mockRoutePush,
+            };
+        },
+    };
+});
+
 describe("Subject Selector", () => {
     it("gets the correct input container classes", () => {
         expect(

solution/ui/regulations/package.json

@@ -50,6 +50,9 @@
     "webpack": "^5.94.0",
     "whatwg-fetch": "^3.6.2"
   },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "^4.13.0"
+  },
   "msw": {
     "workerDirectory": "msw"
   }

solution/ui/regulations/utilities/utils.test.js

@@ -623,7 +623,7 @@ describe("Utilities.js", () => {
             await delay(seconds);
             const end = Date.now();
             const actualDelay = end - start;
-            expect(actualDelay).toBeGreaterThanOrEqual(seconds * 1000);
+            expect(actualDelay).toBeGreaterThanOrEqual(seconds * 1000 - 200); // Allow some leeway
             expect(actualDelay).toBeLessThan(seconds * 1000 + 200); // Allow some leeway
         });
 

solution/ui/regulations/vitest.config.ts

@@ -20,6 +20,7 @@ export default defineConfig({
                 "**/test/**/*",
                 "**/utilities/**/*",
             ],
+            reportOnFailure: true,
         },
     },
     resolve: {