feat: add testing setup

frontend/package.json

@@ -7,7 +7,9 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.2",
@@ -31,6 +33,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.1",
     "@types/node": "^22.8.4",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
@@ -41,11 +45,19 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.11.0",
+    "jsdom": "^25.0.1",
+    "msw": "^2.6.0",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.14",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.10",
+    "vitest": "^2.1.4",
     "zod": "^3.23.8"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
   }
-}
+}

frontend/src/pages/ConnectionsPage.tsx

@@ -15,8 +15,7 @@ export default function Connections() {
   }
 
   if (connectionsQuery.isError) {
-    console.log(connectionsQuery.error);
-    throw new Error("We were not able to fetch connections.");
+    throw new Error(connectionsQuery.error.message);
   }
 
   if (connectionsQuery.isSuccess) {

frontend/src/pages/__tests__/ConnectionsPage.test.tsx

@@ -0,0 +1,21 @@
+// Imports
+import { describe, it, expect } from "vitest";
+import ConnectionsPage from "../ConnectionsPage";
+import { createQueryClient, renderWithClient } from "@/tests/utils";
+import { beforeEach } from "node:test";
+
+// Tests
+describe("Renders main page correctly", () => {
+  const queryClient = createQueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  beforeEach(() => {
+    queryClient.clear();
+  });
+
+  it("Successfully fetched data", async () => {
+    const result = renderWithClient(queryClient, <ConnectionsPage />);
+
+    expect(await result.findByText(/Connections/i));
+  });
+});

frontend/src/tests/handlers.ts

@@ -0,0 +1,13 @@
+import { Connection } from "@/types/Connection";
+import { http, HttpResponse } from "msw";
+import { generateMockConnection } from "./mocks-data";
+
+export const handlers = [
+  http.get<never, never, Connection[]>(
+    "http://localhost:8080/api/v1/connections",
+    () => {
+      const connections = [generateMockConnection(), generateMockConnection()];
+      return HttpResponse.json(connections);
+    }
+  ),
+];

frontend/src/tests/mocks-data.ts

@@ -0,0 +1,16 @@
+import { Connection } from "@/types/Connection";
+
+export const generateMockConnection = (): Connection => ({
+  id: "123e4567-e89b-12d3-a456-426614174000",
+  registrationTime: new Date().toISOString(),
+  serviceName: "test-service",
+  gepardVersion: "1.0.0",
+  otelVersion: "1.0.0",
+  pid: 12345,
+  startTime: Date.now(),
+  javaVersion: "17.0.1",
+  attributes: {
+    environment: "test",
+    region: "us-east-1",
+  },
+});

frontend/src/tests/utils.tsx

@@ -0,0 +1,24 @@
+import {
+  QueryClient,
+  QueryClientConfig,
+  QueryClientProvider,
+} from "@tanstack/react-query";
+import { render } from "@testing-library/react";
+
+export function renderWithClient(client: QueryClient, ui: React.ReactElement) {
+  const { rerender, ...result } = render(
+    <QueryClientProvider client={client}>{ui}</QueryClientProvider>
+  );
+  return {
+    ...result,
+    rerender: (rerenderUi: React.ReactElement) => {
+      rerender(
+        <QueryClientProvider client={client}>{rerenderUi}</QueryClientProvider>
+      );
+    },
+  };
+}
+
+export function createQueryClient(config?: QueryClientConfig): QueryClient {
+  return new QueryClient(config);
+}

frontend/src/tests/vitest.setup.ts

@@ -0,0 +1,17 @@
+import { setupServer } from "msw/node";
+import { afterAll, afterEach, beforeAll, vi } from "vitest";
+import { handlers } from "./handlers";
+
+export const server = setupServer(...handlers);
+
+beforeAll(() => {
+  server.listen();
+});
+
+afterEach(() => {
+  server.resetHandlers();
+});
+
+afterAll(() => {
+  server.close();
+});

frontend/tsconfig.node.json

@@ -20,5 +20,5 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "vitest.setup.ts"]
 }

frontend/vite.config.ts

@@ -1,4 +1,5 @@
-import { defineConfig } from "vite";
+/// <reference types="vitest" />
+import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import path from "path";
 
@@ -13,4 +14,10 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: "src/tests/vitest.setup.ts",
+    env: loadEnv("development", process.cwd(), ""),
+  },
 });