chore: add Vitest

.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

@@ -58,7 +58,13 @@ check:
 test_image: files/ansible/install-deps.yaml files/ansible/recipe-tests.yaml
 	$(CONTAINER_ENGINE) build --rm -t $(TEST_IMAGE) -f Dockerfile.tests .
 
-check_in_container: test_image
+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 \
 		$(TEST_IMAGE) make check

frontend/package.json

@@ -20,10 +20,12 @@
     "@tanstack/react-router": "^1.58.15",
     "@tanstack/router-devtools": "^1.58.15",
     "@tanstack/router-plugin": "^1.58.12",
+    "@testing-library/react": "^16.0.1",
     "@types/node": "^22.7.4",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.2",
+    "happy-dom": "^15.7.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sharp": "^0.33.5",
@@ -40,7 +42,9 @@
     "start": "vite",
     "build": "vite build",
     "build:analyze": "vite-bundle-visualizer --open",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "browserslist": {
     "production": [
@@ -57,7 +61,9 @@
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
     "babel-plugin-named-exports-order": "^0.0.2",
-    "prop-types": "^15.8.1"
+    "prop-types": "^15.8.1",
+    "vitest": "^2.1.5",
+    "@vitest/coverage-v8": "^2.1.5"
   },
   "engines": {
     "node": ">=20",

frontend/src/components/forgeUrls.test.tsx

@@ -0,0 +1,14 @@
+// Copyright Contributors to the Packit project.
+// SPDX-License-Identifier: MIT
+import { test, vi } from "vitest";
+import { getHostName } from "./forgeUrls";
+
+test("hostname logs error for invalid URL", ({ expect }) => {
+  const consoleMock = vi
+    .spyOn(console, "error")
+    .mockImplementation(() => undefined);
+  expect(getHostName("invalid url")).toBe("");
+
+  expect(consoleMock.mock.lastCall?.[0].toString()).toContain("Invalid URL");
+  expect(consoleMock.mock.lastCall?.[0]).toBeInstanceOf(TypeError);
+});

frontend/src/components/forgeUrls.tsx

@@ -2,19 +2,18 @@
 // SPDX-License-Identifier: MIT
 
 // getHostName - returns the hostname if possible, otherwise an empty string
-function getHostName(url: string | URL) {
+export function getHostName(url: string | URL) {
   let hostname = "";
   try {
     hostname = new URL(url).hostname;
   } catch (error) {
-    console.log("Invalid URL");
     console.error(error);
   }
   return hostname;
 }
 
 // getPRLink - returns the PR link if possible otherwise an empty string
-function getPRLink(gitRepo: string, prID: number) {
+export function getPRLink(gitRepo: string, prID: number) {
   const forge = getHostName(gitRepo);
   switch (forge) {
     case "github.com":
@@ -28,7 +27,7 @@ function getPRLink(gitRepo: string, prID: number) {
 }
 
 // getBranchLink - returns the branch link if possible otherwise an empty string
-function getBranchLink(gitRepo: string, branchName: string) {
+export function getBranchLink(gitRepo: string, branchName: string) {
   const forge = getHostName(gitRepo);
   switch (forge) {
     case "github.com":
@@ -42,7 +41,7 @@ function getBranchLink(gitRepo: string, branchName: string) {
 }
 
 // getIssueLink - returns the issue link if possible otherwise an empty string
-function getIssueLink(gitRepo: string, issueID: number) {
+export function getIssueLink(gitRepo: string, issueID: number) {
   const forge = getHostName(gitRepo);
   switch (forge) {
     case "github.com":
@@ -56,7 +55,7 @@ function getIssueLink(gitRepo: string, issueID: number) {
 }
 
 // getReleaseLink - returns the link to release if possible otherwise an empty string
-function getReleaseLink(gitRepo: string, release: string) {
+export function getReleaseLink(gitRepo: string, release: string) {
   const forge = getHostName(gitRepo);
   switch (forge) {
     case "github.com":
@@ -69,7 +68,7 @@ function getReleaseLink(gitRepo: string, release: string) {
 }
 
 // getCommitLink - returns a link to the commit
-function getCommitLink(gitRepo: string, commit_hash: string) {
+export function getCommitLink(gitRepo: string, commit_hash: string) {
   const forge = getHostName(gitRepo);
   switch (forge) {
     case "github.com":
@@ -81,12 +80,3 @@ function getCommitLink(gitRepo: string, commit_hash: string) {
       return `${gitRepo}/-/commit/${commit_hash}`;
   }
 }
-
-export {
-  getHostName,
-  getPRLink,
-  getBranchLink,
-  getIssueLink,
-  getReleaseLink,
-  getCommitLink,
-};

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

@@ -0,0 +1,19 @@
+// Copyright Contributors to the Packit project.
+// SPDX-License-Identifier: MIT
+
+import { IceCreamIcon } from "@patternfly/react-icons";
+import { render } from "@testing-library/react";
+import { test } from "vitest";
+import { BaseStatusLabel } from "./BaseStatusLabel";
+
+test("default label", async ({ expect }) => {
+  const { baseElement } = render(
+    <BaseStatusLabel
+      color="blue"
+      tooltipText="tooltipText"
+      icon={<IceCreamIcon />}
+      label="Label fsdf"
+    />,
+  );
+  expect(baseElement).toMatchSnapshot("default label");
+});

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

@@ -0,0 +1,51 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`default label > default label 1`] = `
+<body>
+  <div>
+    <div
+      style="display: contents;"
+    >
+      <span
+        style="padding: 2px;"
+      >
+        <span
+          class="pf-v6-c-label pf-m-blue pf-m-filled"
+        >
+          <span
+            class="pf-v6-c-label__content"
+          >
+            <span
+              class="pf-v6-c-label__icon"
+            >
+              <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-v6-c-label__text"
+            >
+              Label fsdf
+              <span
+                class="pf-v6-u-screen-reader"
+              >
+                tooltipText
+              </span>
+            </span>
+          </span>
+        </span>
+      </span>
+    </div>
+  </div>
+</body>
+`;

frontend/vite.config.ts

@@ -1,6 +1,6 @@
 // Copyright Contributors to the Packit project.
 // SPDX-License-Identifier: MIT
-
+/// <reference types="vitest" />
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { sentryVitePlugin } from "@sentry/vite-plugin";
@@ -14,11 +14,7 @@ export default defineConfig(() => ({
     rollupOptions: {
       output: {
         manualChunks: function manualChunks(id) {
-          if (
-            id.includes("victory-") ||
-            id.includes("d3") ||
-            id.includes("@patternfly/react-charts")
-          ) {
+          if (id.includes("victory-") || id.includes("d3") || id.includes("@patternfly/react-charts")) {
             return "charts";
           } else if (id.includes("@patternfly")) {
             return "patternfly";
@@ -46,9 +42,17 @@ export default defineConfig(() => ({
       authToken: process.env.SENTRY_AUTH_TOKEN,
       telemetry: false,
       reactComponentAnnotation: { enabled: true },
+      disable: process.env.SENTRY_AUTH_TOKEN === undefined,
     }),
   ],
   server: {
     open: true,
   },
+  test: {
+    environment: "happy-dom",
+    reporters: process.env.GITHUB_ACTIONS ? ['dot', 'github-actions'] : ['dot'],
+  },
+  coverage: {
+    provider: "v8",
+  }
 }));