diff --git a/.github/workflows/test-frontend.yml b/.github/workflows/test-frontend.yml
new file mode 100644
index 00000000..da3c92d8
--- /dev/null
+++ b/.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
diff --git a/Makefile b/Makefile
index b57cd4f8..7ce4c21a 100644
--- a/Makefile
+++ b/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
diff --git a/frontend/package.json b/frontend/package.json
index 15705d54..263c0ad7 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/components/forgeUrls.test.tsx b/frontend/src/components/forgeUrls.test.tsx
new file mode 100644
index 00000000..3776bf0e
--- /dev/null
+++ b/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);
+});
diff --git a/frontend/src/components/forgeUrls.tsx b/frontend/src/components/forgeUrls.tsx
index 332bb07d..d97d5b53 100644
--- a/frontend/src/components/forgeUrls.tsx
+++ b/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,
-};
diff --git a/frontend/src/components/statusLabels/BaseStatusLabel.test.tsx b/frontend/src/components/statusLabels/BaseStatusLabel.test.tsx
new file mode 100644
index 00000000..3df33336
--- /dev/null
+++ b/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(
+ }
+ label="Label fsdf"
+ />,
+ );
+ expect(baseElement).toMatchSnapshot("default label");
+});
diff --git a/frontend/src/components/statusLabels/__snapshots__/BaseStatusLabel.test.tsx.snap b/frontend/src/components/statusLabels/__snapshots__/BaseStatusLabel.test.tsx.snap
new file mode 100644
index 00000000..3ee69b2f
--- /dev/null
+++ b/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`] = `
+
+
+
+
+
+
+
+
+
+
+ Label fsdf
+
+ tooltipText
+
+
+
+
+
+
+