feat: added frontend testing

.github/workflows/frontend.yml

@@ -21,6 +21,7 @@ jobs:
       INTERNAL_SERVER_URL: https://api.example.com
       NEXT_PUBLIC_SERVER_URL: https://api.example.com
       NEXT_PUBLIC_SITE_URL: https://example.com
+      NEXT_TELEMETRY_DISABLED: 1
     steps:
       - uses: actions/checkout@v4
         with:
@@ -35,6 +36,26 @@ jobs:
         run: bun install
         working-directory: client
 
+      - name: Run unit tests
+        run: bun run test
+        working-directory: client
+
+      - name: Install Playwright Browsers
+        run: bunx playwright install --with-deps chromium
+        working-directory: client
+
+      - name: Run E2E tests
+        run: bun run test:e2e
+        working-directory: client
+
+      - name: Upload Playwright Report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: client/playwright-report/
+          retention-days: 30
+
       - name: Lint
         run: bun run lint
         working-directory: client

.husky/task-runner.json

@@ -20,6 +20,13 @@
       "args": ["run", "check"],
       "cwd": "client",
       "include": ["client/**/*.{ts,tsx,js,jsx,json}"]
+    },
+    {
+      "name": "Run Client Build",
+      "command": "bun",
+      "args": ["run", "build"],
+      "cwd": "client",
+      "include": ["client/**/*.{ts,tsx,js,jsx,json,css}"]
     }
   ]
 }

client/.gitignore

@@ -39,3 +39,8 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+test-results/
+playwright-report/
+tmp/
+.pytest_cache

client/bunfig.toml

@@ -0,0 +1,3 @@
+[test]
+preload = ["./src/test-setup.tsx"]
+exclude = ["**/src/lib/components/ui/**", "**/tests/e2e/**"]

client/instrumentation.ts

@@ -0,0 +1,9 @@
+export async function register() {
+	if (
+		process.env.NEXT_RUNTIME === "nodejs" &&
+		process.env.NEXT_PUBLIC_API_MOCKING === "enabled"
+	) {
+		const { server } = await import("@/mocks/node");
+		server.listen({ onUnhandledRequest: "bypass" });
+	}
+}

client/package.json

@@ -9,6 +9,8 @@
 		"lint": "biome lint .",
 		"format": "biome format --write .",
 		"check": "biome check --write .",
+		"test": "bun test src",
+		"test:e2e": "NEXT_PUBLIC_API_MOCKING=enabled playwright test",
 		"gen-types": "bun x openapi-typescript http://localhost:5025/openapi/v1.json -o client/src/lib/api-types.ts"
 	},
 	"dependencies": {
@@ -72,21 +74,26 @@
 		"zustand": "^5.0.9"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.4.10",
+		"@biomejs/biome": "2.4.11",
+		"@playwright/test": "^1.59.1",
 		"@tailwindcss/postcss": "^4",
+		"@testing-library/dom": "^10.4.1",
+		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/react": "^16.3.2",
+		"@types/bun": "^1.3.12",
+		"@types/jsdom": "^28.0.1",
 		"@types/node": "^20",
 		"@types/react": "^19",
 		"@types/react-dom": "^19",
+		"jsdom": "^29.0.2",
+		"msw": "^2.13.4",
 		"tailwindcss": "^4",
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^5"
 	},
-	"ignoreScripts": [
-		"sharp",
-		"unrs-resolver"
-	],
-	"trustedDependencies": [
-		"sharp",
-		"unrs-resolver"
-	]
+	"msw": {
+		"workerDirectory": [
+			"public"
+		]
+	}
 }

client/playwright.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+	testDir: "./tests/e2e",
+	fullyParallel: true,
+	forbidOnly: !!process.env.CI,
+	retries: process.env.CI ? 2 : 0,
+	workers: process.env.CI ? 1 : undefined,
+	reporter: process.env.CI ? "github" : [["html", { open: "never" }]],
+	use: {
+		baseURL: "http://localhost:3000",
+		trace: "on-first-retry",
+		headless: true,
+	},
+	projects: [
+		{
+			name: "chromium",
+			use: { ...devices["Desktop Chrome"] },
+		},
+	],
+	webServer: {
+		command: process.env.CI ? "bun run build && bun start" : "bun dev",
+		url: "http://localhost:3000",
+		reuseExistingServer: !process.env.CI,
+		env: {
+			NEXT_PUBLIC_API_MOCKING: "enabled",
+		},
+	},
+});