chore: add Vitest

Makefile

@@ -58,6 +58,9 @@ check:
 test_image: files/ansible/install-deps.yaml files/ansible/recipe-tests.yaml
 	$(CONTAINER_ENGINE) build --rm -t $(TEST_IMAGE) -f Dockerfile.tests .
 
+test_frontend:
+	cd frontend && pnpm run test
+
 check_in_container: test_image
 	$(CONTAINER_ENGINE) run --rm \
 		--security-opt label=disable \

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,8 @@
     "start": "vite",
     "build": "vite build",
     "build:analyze": "vite-bundle-visualizer --open",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "browserslist": {
     "production": [
@@ -57,7 +60,8 @@
   "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.2"
   },
   "engines": {
     "node": ">=20",

frontend/src/components/forgeUrls.test.tsx

@@ -0,0 +1,23 @@
+// Copyright Contributors to the Packit project.
+// SPDX-License-Identifier: MIT
+import { assertType, test, vi } from "vitest";
+import { getHostName } from "./forgeUrls";
+
+test("can get hostname from string", ({ expect }) => {
+  expect(getHostName("https://example.com?foo=bar")).toBe("example.com");
+});
+
+test("can get hostname from URL instance", ({ expect }) => {
+  const host = new URL("https://example.com");
+  expect(getHostName(host)).toBe("example.com");
+});
+
+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,47 @@
+// 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-v5-c-label pf-m-blue"
+        >
+          <span
+            class="pf-v5-c-label__icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-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-c-label__text"
+          >
+            Label fsdf
+            <span
+              class="pf-v5-u-screen-reader"
+            >
+              tooltipText
+            </span>
+          </span>
+        </span>
+      </span>
+    </div>
+  </div>
+</body>
+`;