added frontend test environment

docs/02-Preparation/04-Test-strategy.md

@@ -0,0 +1,49 @@
+**vaessl: Test strategy**
+
+# Spring Boot Test Environment
+1. Environment Parity
+
+    Instead of testing against a mocked database or the development database, I created a mirrored test container. This allows the application to perform JPA operations against a real PostgreSQL instance that matches the production engine but uses a different port (5434) and database name (vaessl_test).
+
+2. Profile-Driven Configuration
+
+    I utilized the Spring Profiles mechanism. By tagging the test class with @ActiveProfiles("test"), Spring Boot ignores the standard application.yaml for specific keys and prioritizes src/test/resources/application-test.yaml.
+
+    The configuration is moved out of the Java code and into YAML. This follows the "Separation of Concerns" principle.
+
+    The file is placed in src/test/resources (a sibling to src/test/java). This is the standard Gradle "SourceSet" layout, ensuring the build tool automatically packages these settings only during the test phase.
+
+3. Gradle Test Lifecycle
+
+    I corrected the dependency graph in build.gradle.kts. While the Initializr provides "test slices" (like data-jpa-test), a full integration test requires the Spring Boot Starter Test core.
+
+    This starter provides the YAML parsing engine and the SpringBootContextLoader.
+
+# Frontend Test environment
+
+1. The Vitest Stack
+
+    - Vitest: providing a unified configuration for both the development server and the test runner.
+
+    - jsdom: Provides a lightweight browser environment in Node.js.
+
+    - React Testing Library: Ensures tests are written from the user's perspective (DOM-based) rather than implementation details.
+
+2. Dynamic Environment Configuration
+
+    The vitest.config.ts is configured to be environment-aware. By using loadEnv, the test runner can access variables from .env files, allowing us to:
+
+    - Dynamically set the Server Port (51204).
+
+    - Handle Allowed Hosts (crucial for code-server or LXC environments where the public URL might change).
+
+    - Inject environment-specific keys into the test.env context.
+
+3. TDD Workflow (Red-Green-Refactor)
+    
+    The environment is optimized for a fast feedback loop.
+
+    - npm run test: Runs Vitest in "Watch Mode," re-triggering tests instantly upon file changes.
+
+    - npm run test:ui: Launches the Vitest UI, providing a visual graph of test suites and real-time failure reports.
+

frontend/package.json

@@ -7,7 +7,9 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui"
   },
   "dependencies": {
     "react": "^19.2.4",
@@ -15,16 +17,21 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^24.12.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/ui": "^4.1.2",
     "eslint": "^9.39.4",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.4.0",
+    "jsdom": "^29.0.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.57.0",
-    "vite": "^8.0.1"
+    "vite": "^8.0.1",
+    "vitest": "^4.1.2"
   }
 }

frontend/tests/main.test.ts

@@ -0,0 +1,7 @@
+import { it, expect, describe } from 'vitest'
+
+describe('group', () => {
+    it('should', () => {
+        expect(1).toBeTruthy();
+    })
+})

frontend/vitest.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vitest/config'
+import { loadEnv } from 'vite'
+
+export default defineConfig(({mode}) => {
+    const env = loadEnv(mode, process.cwd(), '')
+
+    return {
+        server: {
+            port: 51204,
+            host: '0.0.0.0',
+            allowedHosts: env.VITEST_PUBLIC_URL ? [env.VITEST_PUBLIC_URL] : [],
+        },
+        test: {
+            environment: 'jsdom',
+            env: loadEnv(mode, process.cwd(), '')
+        }
+    }
+});