run standalone mock server in e2e tests

update e2e tests

fix e2e script

fix e2e script

update docs

.env.example

@@ -1,8 +1,2 @@
 VITE_APP_API_URL=http: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=http:https://localhost:3000
+VITE_APP_ENABLE_API_MOCKING=true

.env.example-e2e

@@ -0,0 +1,4 @@
+VITE_APP_API_URL=http:https://localhost:8080/api
+VITE_APP_ENABLE_API_MOCKING=false
+VITE_APP_MOCK_API_PORT=8080
+VITE_APP_URL=http: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
  - uses: actions/upload-artifact@v4
  if: always()
  with:
  name: playwright-report
- path: playwright-report/
+ path: |
+ playwright-report/
+ mocked-db.json
  retention-days: 30

docs/testing.md

@@ -20,8 +20,6 @@ Integration testing checks how different parts of your application work together
 
 End-to-End Testing is a method that evaluates an application as a whole. These tests involve automating the complete application, including both the frontend and backend, to confirm that the entire system functions correctly. End-to-End tests simulate how a user would interact with the application.
 
-NOTE: In the sample app, the tests are ran against the mocked API server, so they are technically not fully e2e, but they are written in the same way as they would be if they were ran against the real API.
-
 [E2E Example Code](../e2e/tests/smoke.spec.ts)
 
 ## Recommended Tooling:

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 http: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 http:https://localhost:${env.APP_MOCK_API_PORT}`,
+ );
+ });
 });

package.json

@@ -8,6 +8,7 @@
  "build": "tsc && vite build --base=/",
  "preview": "vite preview",
  "test": "vitest",
+ "test-e2e": "pm2 start \"yarn run-mock-server\" --name server && yarn playwright test",
  "prepare": "husky",
  "lint": "eslint src --ignore-path .gitignore",
  "check-types": "tsc --project tsconfig.json --pretty --noEmit",
@@ -99,6 +100,7 @@
  "pino-http": "^10.1.0",
  "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 () => {

vite.config.ts

@@ -11,6 +11,9 @@ export default defineConfig({
  server: {
  port: 3000,
  },
+ preview: {
+ port: 3000,
+ },
  test: {
  globals: true,
  environment: 'jsdom',