chore: Added Vitest GitHub workflow

chore: Added Vitest GitHub workflow

Author: Venefilyn

.github/workflows/test-frontend.yml

@@ -0,0 +1,35 @@
+name: Test frontend
+on:
+  push:
+    branches:
+      - main
+      - stable
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  run-vitest:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: false
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "pnpm"
+          cache-dependency-path: pnpm-lock.yaml
+
+      - name: Install and Build
+        run: |
+          (cd frontend && pnpm install);
+          make .install-logos
+          API_URL="https://prod.packit.dev/api" make transpile-prod
+
+      - name: Run Vitest
+        run: make test_frontend_coverage

Makefile

@@ -61,6 +61,9 @@ test_image: files/ansible/install-deps.yaml files/ansible/recipe-tests.yaml
 test_frontend:
 	cd frontend && pnpm run test
 
+test_frontend_coverage:
+	cd frontend && pnpm run coverage
+
 check_in_container: test_image
 	$(CONTAINER_ENGINE) run --rm \
 		--security-opt label=disable \

frontend/package.json

@@ -43,7 +43,8 @@
     "build": "vite build",
     "build:analyze": "vite-bundle-visualizer --open",
     "preview": "vite preview",
-    "test": "vitest"
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "browserslist": {
     "production": [
@@ -61,7 +62,8 @@
     "@biomejs/biome": "1.8.3",
     "babel-plugin-named-exports-order": "^0.0.2",
     "prop-types": "^15.8.1",
-    "vitest": "^2.1.2"
+    "vitest": "^2.1.5",
+    "@vitest/coverage-v8": "^2.1.5"
   },
   "engines": {
     "node": ">=20",

frontend/src/components/statusLabels/__snapshots__/BaseStatusLabel.test.tsx.snap

@@ -10,33 +10,37 @@ exports[`default label > default label 1`] = `
         style="padding: 2px;"
       >
         <span
-          class="pf-v5-c-label pf-m-blue"
+          class="pf-v6-c-label pf-m-blue pf-m-filled"
         >
           <span
-            class="pf-v5-c-label__icon"
+            class="pf-v6-c-label__content"
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 448 512"
-              width="1em"
+            <span
+              class="pf-v6-c-label__icon"
             >
-              <path
-                d="M368 160h-.94a144 144 0 1 0-286.12 0H80a48 48 0 0 0 0 96h288a48 48 0 0 0 0-96zM195.38 493.69a31.52 31.52 0 0 0 57.24 0L352 288H96z"
-              />
-            </svg>
-          </span>
-          <span
-            class="pf-v5-c-label__text"
-          >
-            Label fsdf
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 448 512"
+                width="1em"
+              >
+                <path
+                  d="M368 160h-.94a144 144 0 1 0-286.12 0H80a48 48 0 0 0 0 96h288a48 48 0 0 0 0-96zM195.38 493.69a31.52 31.52 0 0 0 57.24 0L352 288H96z"
+                />
+              </svg>
+            </span>
             <span
-              class="pf-v5-u-screen-reader"
+              class="pf-v6-c-label__text"
             >
-              tooltipText
+              Label fsdf
+              <span
+                class="pf-v6-u-screen-reader"
+              >
+                tooltipText
+              </span>
             </span>
           </span>
         </span>

frontend/vite.config.ts

@@ -50,5 +50,11 @@ export default defineConfig(() => ({
   },
   test: {
     environment: "happy-dom",
+    reporters: process.env.GITHUB_ACTIONS ? ['dot', 'github-actions'] : ['dot'],
+    include: ["src"],
   },
+  coverage: {
+    provider: "v8",
+    include: ["src"]
+  }
 }));