run standalone mock server in e2e tests

.env.example

@@ -1,8 +1,2 @@
 VITE_APP_API_URL=https://localhost:8080/api
-VITE_APP_ENABLE_API_MOCKING=true
-
-
-# If you want to run standalone mock server, you can use the following configuration:
-# VITE_APP_ENABLE_API_MOCKING=false
-# VITE_APP_MOCK_API_PORT=8080
-# VITE_APP_URL=https://localhost:3000
+VITE_APP_ENABLE_API_MOCKING=true

.env.example-e2e

@@ -0,0 +1,4 @@
+VITE_APP_API_URL=https://localhost:8080/api
+VITE_APP_ENABLE_API_MOCKING=false
+VITE_APP_MOCK_API_PORT=8080
+VITE_APP_URL=https://localhost:3000

.github/workflows/ci.yml

@@ -39,16 +39,18 @@ jobs:
         with:
           node-version: lts/*
       - name: Set environment variables
-        run: mv .env.example .env
+        run: mv .env.example-e2e .env
       - name: Install dependencies
         run: npm install -g yarn && yarn
       - name: Install Playwright Browsers
         run: yarn playwright install --with-deps
       - name: Run Playwright tests
-        run: yarn playwright test
+        run: yarn test-e2e-start
       - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report
-          path: playwright-report/
+          path: |
+            playwright-report/
+            mocked-db.json
           retention-days: 30

mock-server.ts

@@ -4,6 +4,7 @@ import express from 'express';
 import logger from 'pino-http';
 
 import { env } from './src/config/env';
+import { initializeDb } from './src/testing/mocks/db';
 import { handlers } from './src/testing/mocks/handlers';
 
 const app = express();
@@ -19,8 +20,11 @@ app.use(express.json());
 app.use(logger());
 app.use(createMiddleware(...handlers));
 
-app.listen(env.APP_MOCK_API_PORT, () => {
-  console.log(
-    `Mock API server started at https://localhost:${env.APP_MOCK_API_PORT}`,
-  );
+initializeDb().then(() => {
+  console.log('Mock DB initialized');
+  app.listen(env.APP_MOCK_API_PORT, () => {
+    console.log(
+      `Mock API server started at https://localhost:${env.APP_MOCK_API_PORT}`,
+    );
+  });
 });

package.json

@@ -8,6 +8,8 @@
     "build": "tsc && vite build --base=/",
     "preview": "vite preview",
     "test": "vitest",
+    "test-e2e-start": "pm2 start \"npm run run-mock-server\" --name server && pm2 start \"npm run dev\" --name client",
+    "test-e2e-stop": "pm2 stop server && pm2 stop client",
     "prepare": "husky",
     "lint": "eslint src --ignore-path .gitignore",
     "check-types": "tsc --project tsconfig.json --pretty --noEmit",
@@ -99,6 +101,7 @@
     "msw": "^2.2.14",
     "pino-pretty": "^11.1.0",
     "plop": "^4.0.1",
+    "pm2": "^5.4.0",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "storybook": "^8.0.9",

src/testing/mocks/db.ts

@@ -66,7 +66,7 @@ export const loadDb = async () => {
   );
 };
 
-export const storeDb = async (key: string, data: string) => {
+export const storeDb = async (data: string) => {
   // If we are running in a Node.js environment
   if (typeof window === 'undefined') {
     const { writeFile } = await import('fs/promises');
@@ -81,7 +81,7 @@ export const persistDb = async (model: Model) => {
   if (process.env.NODE_ENV === 'test') return;
   const data = await loadDb();
   data[model] = db[model].getAll();
-  await storeDb('msw-db', JSON.stringify(data));
+  await storeDb(JSON.stringify(data));
 };
 
 export const initializeDb = async () => {