Increase test coverage (#41)

* test: add more tests

* fix: remove deprecated files

Author: iulusoy

.github/workflows/frontend-CI.yml

@@ -47,9 +47,26 @@ jobs:
             # pnpm install playwright
             pnpm exec playwright install --with-deps
             pnpm test
+
+        - name: Run unit tests (Vitest)
+          run: |
+            cd src/frontend
+            pnpm test:unit
+
+        - name: Generate unit test coverage
+          run: |
+            cd src/frontend
+            pnpm coverage
+
+        - uses: actions/upload-artifact@v4
+          if: ${{ !cancelled() }}
+          with:
+            name: vitest-coverage
+            path: src/frontend/coverage/
+            retention-days: 30
         - uses: actions/upload-artifact@v4
           if: ${{ !cancelled() }}
           with:
             name: playwright-report
-            path: playwright-report/
-            retention-days: 30
+            path: src/frontend/playwright-report/
+            retention-days: 30

.gitignore

@@ -166,4 +166,6 @@ cython_debug/
 !/src/frontend/src/lib/
 /src/frontend/node_modules
 /src/frontend/.svelte-kit
-/src/frontend/build
+/src/frontend/build
+/src/frontend/coverage
+temp

src/frontend/package.json

@@ -28,6 +28,7 @@
 		"@sveltejs/adapter-node": "^5.4.0",
 		"@sveltejs/kit": "^2.53.3",
 		"@sveltejs/vite-plugin-svelte": "^6.1.0",
+		"@vitest/coverage-v8": "^3.2.4",
 		"autoprefixer": "^10.4.21",
 		"dotenv": "^17.2.1",
 		"drizzle-kit": "^0.31.8",

src/frontend/playwright.config.ts

@@ -2,13 +2,19 @@ import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
 	webServer: {
-		// command: 'pnpm run build && pnpm run preview',
-		// running the tests in dev to avoid db connection issues
-		command: 'pnpm run dev',
-		port: 5173,
-		reuseExistingServer:true
+		// Tier 1: run the real production build, but skip DB calls via BUILD_MODE=true
+		command: 'pnpm run build && node dist',
+		url: 'http://localhost:3000',
+		reuseExistingServer: false,
+		env: {
+			BUILD_MODE: 'true',
+			PORT: '3000'
+		}
 	},
-	testDir: './tests'
+	testDir: './tests',
+	use: {
+		baseURL: 'http://localhost:3000'
+	}
 };
 
 export default config;

src/frontend/pnpm-lock.yaml

@@ -0,0 +1,27 @@
+import { describe, it, expect, vi } from 'vitest';
+import { _ } from './index';
+
+describe('i18n translation helper', () => {
+	it('returns the German value for a known nested key', () => {
+		expect(_('homepage.emailCommunication.title', 'de')).toBe(
+			'Kommunikation mittels Email'
+		);
+	});
+
+	it('returns the French value for a known nested key', () => {
+		expect(_('homepage.emailCommunication.title', 'fr')).toBe(
+			'Communication par mail'
+		);
+	});
+
+	it('returns a deterministic missing marker when the key does not exist', () => {
+		// `_()` logs a warning when falling back fails; keep test output clean.
+		const warnSpy = vi.spyOn(console, 'warn');
+		warnSpy.mockImplementation(() => {});
+		expect(_('homepage.does.not.exist.title', 'de')).toBe(
+			'[Missing translation: homepage.does.not.exist.title]'
+		);
+		warnSpy.mockRestore();
+	});
+});
+

src/frontend/src/lib/i18n/index.test.ts

@@ -0,0 +1,83 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+let drizzleImpl: any;
+let drizzleMockFn: any;
+let createPoolFn: any;
+
+vi.mock('drizzle-orm/mysql2', () => {
+	drizzleImpl = vi.fn((pool: unknown) => ({ __realDb: true, pool }));
+	drizzleMockFn = vi.fn(() => ({ __mockDb: true }));
+
+	// Important: keep `drizzle` as a normal function so we can attach a real `.mock()` method
+	// (Vitest's `vi.fn` already has a `.mock` getter used for call metadata).
+	const drizzle: any = (pool: unknown) => drizzleImpl(pool);
+	drizzle.mock = drizzleMockFn;
+
+	return { drizzle };
+});
+
+vi.mock('mysql2/promise', () => {
+	createPoolFn = vi.fn(() => ({ __pool: true }));
+	return { default: { createPool: createPoolFn } };
+});
+
+describe('db module BUILD_MODE branching', () => {
+	beforeEach(() => {
+		vi.resetModules();
+		delete process.env.BUILD_MODE;
+
+		if (typeof drizzleImpl?.mockClear === 'function') drizzleImpl.mockClear();
+		if (typeof drizzleMockFn?.mockClear === 'function') drizzleMockFn.mockClear();
+		if (typeof createPoolFn?.mockClear === 'function') createPoolFn.mockClear();
+	});
+
+	it('uses drizzle.mock() and does not create a MySQL pool in BUILD_MODE=true', async () => {
+		process.env.BUILD_MODE = 'true';
+
+		const mod = await import('./db');
+		expect(mod.db).toEqual({ __mockDb: true });
+		expect(drizzleMockFn).toHaveBeenCalledTimes(1);
+		expect(createPoolFn).not.toHaveBeenCalled();
+	});
+
+	it('creates a MySQL pool and uses drizzle(pool) in BUILD_MODE=false', async () => {
+		process.env.BUILD_MODE = 'false';
+		process.env.MYSQL_HOST = 'localhost';
+		process.env.MYSQL_PORT = '3307';
+		process.env.MYSQL_USER = 'user';
+		process.env.MYSQL_PASSWORD = 'pass';
+		process.env.MYSQL_DATABASE = 'db';
+
+		const mod = await import('./db');
+		expect(mod.db).toEqual({ __realDb: true, pool: { __pool: true } });
+
+		expect(createPoolFn).toHaveBeenCalledTimes(1);
+		const poolArgs = createPoolFn.mock.calls[0][0] as Record<string, unknown>;
+		expect(poolArgs.host).toBe('localhost');
+		expect(poolArgs.port).toBe(3307);
+		expect(poolArgs.user).toBe('user');
+		expect(poolArgs.password).toBe('pass');
+		expect(poolArgs.database).toBe('db');
+
+		expect(drizzleImpl).toHaveBeenCalledTimes(1);
+	});
+
+	it('uses default MySQL port 3306 when MYSQL_PORT is not set', async () => {
+		process.env.BUILD_MODE = 'false';
+
+		process.env.MYSQL_HOST = 'localhost';
+		// Intentionally unset MYSQL_PORT to cover the default branch.
+		delete process.env.MYSQL_PORT;
+		process.env.MYSQL_USER = 'user';
+		process.env.MYSQL_PASSWORD = 'pass';
+		process.env.MYSQL_DATABASE = 'db';
+
+		const mod = await import('./db');
+		expect(mod.db).toEqual({ __realDb: true, pool: { __pool: true } });
+
+		expect(createPoolFn).toHaveBeenCalledTimes(1);
+		const poolArgs = createPoolFn.mock.calls[0][0] as Record<string, unknown>;
+		expect(poolArgs.port).toBe(3306);
+	});
+});
+

src/frontend/src/lib/server/db.test.ts

@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest';
+import { donationsTable, newsletterTable } from './schema';
+
+describe('database schema exports', () => {
+	it('exports donationsTable with expected columns', () => {
+		// We don't assert Drizzle internals deeply; we just ensure the module executes
+		// and the expected column keys exist.
+		expect(Object.keys(donationsTable).length).toBeGreaterThan(0);
+		expect((donationsTable as any).donations).toBeUndefined();
+		expect((donationsTable as any).gender).toBeDefined();
+		expect((donationsTable as any).email).toBeDefined();
+	});
+
+	it('exports newsletterTable with expected columns', () => {
+		expect(Object.keys(newsletterTable).length).toBeGreaterThan(0);
+		expect((newsletterTable as any).email).toBeDefined();
+	});
+});
+

src/frontend/src/lib/server/schema.test.ts

@@ -3,7 +3,7 @@
   import { t } from '$lib/i18n';
 </script>
 
-<div class="flex justify-center items-center flex-col p-8 mb-auto">
+<div data-testid="page-home" class="flex justify-center items-center flex-col p-8 mb-auto">
 
 <div data-testid="card"  class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 w-full max-w-7xl">
   <Card class="max-w-[500px] min-w-[300px] p-1 bg-custom-100 border-primary-900" href="/about" img="/images/pexels-suzyhazelwood-1768060.jpg">

src/frontend/src/routes/+page.svelte

@@ -3,7 +3,7 @@
     import { t } from '$lib/i18n';
 </script>
 
-<main class='p-8 mb-auto'>
+<main class='p-8 mb-auto' data-testid="page-about">
 <div class="flex justify-center flex-col p-8 mb-auto rounded-lg" style="background-color: rgba(254, 242, 242, 0.6);">
 
     <h1 class="mb-4 font-extrabold text-center leading-none tracking-tight text-4xl">{$t.about.title}</h1>