Skip to content

Commit

Permalink
run standalone mock server in e2e tests
Browse files Browse the repository at this point in the history
update e2e tests

fix e2e script

fix e2e script

update docs
  • Loading branch information
alan2207 committed Jun 8, 2024
1 parent e19da4d commit d6dd071
Show file tree
Hide file tree
Showing 9 changed files with 585 additions and 40 deletions.
8 changes: 1 addition & 7 deletions .env.example
Original file line number Diff line number Diff line change
@@ -1,8 +1,2 @@
VITE_APP_API_URL=http://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://localhost:3000
VITE_APP_ENABLE_API_MOCKING=true
4 changes: 4 additions & 0 deletions .env.example-e2e
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
VITE_APP_API_URL=http://localhost:8080/api
VITE_APP_ENABLE_API_MOCKING=false
VITE_APP_MOCK_API_PORT=8080
VITE_APP_URL=http://localhost:3000
8 changes: 5 additions & 3 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
2 changes: 0 additions & 2 deletions docs/testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
12 changes: 8 additions & 4 deletions mock-server.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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://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://localhost:${env.APP_MOCK_API_PORT}`,
);
});
});
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions src/testing/mocks/db.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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 () => {
Expand Down
3 changes: 3 additions & 0 deletions vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ export default defineConfig({
server: {
port: 3000,
},
preview: {
port: 3000,
},
test: {
globals: true,
environment: 'jsdom',
Expand Down
Loading

0 comments on commit d6dd071

Please sign in to comment.