feat(ci): Add GitHub Actions workflow for frontend tests (#140)

* feat(ci): Add GitHub Actions workflow for frontend tests

* feat(frontend/tests): move browser test configuration to vitest.config.ts

* chore(readme): add frontend tests badge to README

Author: Darosss

.github/workflows/frontend-tests.yaml

@@ -0,0 +1,48 @@
+name: Frontend Tests
+
+on:
+  push:
+    paths:
+      - "frontend/**"
+  pull_request:
+    paths:
+      - "frontend/**"
+
+jobs:
+  frontend-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Check for Frontend Changes
+        id: filter
+        uses: dorny/paths-filter@v3
+        with:
+          filters: |
+            frontend:
+              - "frontend/**"
+
+      - name: Setup Node
+        if: steps.filter.outputs.frontend == 'true'
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: npm
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install Frontend Dependencies
+        if: steps.filter.outputs.frontend == 'true'
+        working-directory: ./frontend
+        run: npm ci
+
+      - name: Install Playwright Chromium
+        if: steps.filter.outputs.frontend == 'true'
+        working-directory: ./frontend
+        run: npx playwright install --with-deps chromium
+
+      - name: Run Frontend Tests
+        if: steps.filter.outputs.frontend == 'true'
+        working-directory: ./frontend
+        run: npm test

README.md

@@ -1,6 +1,6 @@
 [![Linting](https://github.com/Darosss/StreamManager/actions/workflows/linting.yaml/badge.svg)](https://github.com/Darosss/StreamManager/actions/workflows/linting.yaml)
-
 [![Backend Tests](https://github.com/Darosss/StreamManager/actions/workflows/backend-tests.yaml/badge.svg)](https://github.com/Darosss/StreamManager/actions/workflows/backend-tests.yaml)
+[![Frontend Tests](https://github.com/Darosss/StreamManager/actions/workflows/frontend-tests.yaml/badge.svg)](https://github.com/Darosss/StreamManager/actions/workflows/frontend-tests.yaml)
 
 # Stream Manager
 

frontend/vite.config.ts

@@ -5,7 +5,6 @@ import svgrPlugin from "vite-plugin-svgr";
 import eslint from "@nabla/vite-plugin-eslint";
 import path from "path";
 import { visualizer } from "rollup-plugin-visualizer";
-import { playwright } from "@vitest/browser-playwright";
 
 export default defineConfig({
   css: {
@@ -26,13 +25,6 @@ export default defineConfig({
     eslint(),
     visualizer({ filename: "dist/stats.html", template: "treemap" }),
   ],
-  test: {
-    browser: {
-      enabled: true,
-      provider: playwright(),
-      instances: [{ browser: "chromium" }],
-      environment: "jsdom",
-    },
-  },
+
   envDir: "../",
 });

frontend/vitest.config.ts

@@ -0,0 +1,12 @@
+import { playwright } from "@vitest/browser-playwright";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    browser: {
+      enabled: true,
+      provider: playwright(),
+      instances: [{ browser: "chromium" }],
+    },
+  },
+});