Add Playwright E2E tests with MSW API mocking

- Playwright + @msw/playwright + @msw/source for OpenAPI-driven mocks
- Chromium-only configuration with Vite dev server integration
- Smoke tests: home page, CTA, navigation
- US-1 tests: validation, event creation flow, localStorage, error handling
- Suppress Node 25 --localstorage-file warning from MSW cookieStore
This commit is contained in:
2026-03-06 18:14:11 +01:00
parent b2d37d9269
commit 9cf199dd9f
10 changed files with 1832 additions and 1 deletions

View File

@@ -0,0 +1,69 @@
import { http, HttpResponse } from 'msw'
import { test, expect } from './msw-setup'
test.describe('US-1: Create an event', () => {
test('shows validation errors for empty required fields', async ({ page }) => {
await page.goto('/create')
await page.getByRole('button', { name: /create event/i }).click()
await expect(page.getByText('Title is required.')).toBeVisible()
await expect(page.getByText('Date and time are required.')).toBeVisible()
await expect(page.getByText('Expiry date is required.')).toBeVisible()
})
test('creates an event and redirects to stub page', async ({ page }) => {
await page.goto('/create')
await page.getByLabel(/title/i).fill('Summer BBQ')
await page.getByLabel(/description/i).fill('Bring your own drinks')
await page.getByLabel(/date/i).first().fill('2026-04-15T18:00')
await page.getByLabel(/location/i).fill('Central Park')
await page.getByLabel(/expiry/i).fill('2026-06-15')
await page.getByRole('button', { name: /create event/i }).click()
await expect(page).toHaveURL(/\/events\/.+/)
await expect(page.getByText('Event created!')).toBeVisible()
})
test('stores event data in localStorage after creation', async ({ page }) => {
await page.goto('/create')
await page.getByLabel(/title/i).fill('Summer BBQ')
await page.getByLabel(/date/i).first().fill('2026-04-15T18:00')
await page.getByLabel(/expiry/i).fill('2026-06-15')
await page.getByRole('button', { name: /create event/i }).click()
await expect(page).toHaveURL(/\/events\/.+/)
const storage = await page.evaluate(() => {
const raw = localStorage.getItem('fete:events')
return raw ? JSON.parse(raw) : null
})
expect(storage).not.toBeNull()
expect(storage).toHaveLength(1)
expect(storage[0]).toHaveProperty('eventToken')
expect(storage[0]).toHaveProperty('title')
})
test('shows server error on API failure', async ({ page, network }) => {
network.use(
http.post('*/api/events', () => {
return HttpResponse.json(
{ title: 'Bad Request', status: 400, detail: 'Validation failed' },
{ status: 400, headers: { 'Content-Type': 'application/problem+json' } },
)
}),
)
await page.goto('/create')
await page.getByLabel(/title/i).fill('Test')
await page.getByLabel(/date/i).first().fill('2026-04-15T18:00')
await page.getByLabel(/expiry/i).fill('2026-06-15')
await page.getByRole('button', { name: /create event/i }).click()
await expect(page.getByRole('alert')).toBeVisible()
})
})

30
frontend/e2e/msw-setup.ts Normal file
View File

@@ -0,0 +1,30 @@
import { readFileSync } from 'node:fs'
import { resolve } from 'node:path'
import { fileURLToPath } from 'node:url'
import { test as base, expect } from '@playwright/test'
import { defineNetworkFixture, type NetworkFixture } from '@msw/playwright'
import { fromOpenApi } from '@msw/source/open-api'
const __dirname = fileURLToPath(new URL('.', import.meta.url))
const specPath = resolve(__dirname, '../../backend/src/main/resources/openapi/api.yaml')
const spec = readFileSync(specPath, 'utf-8')
const handlers = await fromOpenApi(spec)
interface Fixtures {
network: NetworkFixture
}
export const test = base.extend<Fixtures>({
network: [
async ({ context }, use) => {
const network = defineNetworkFixture({ context, handlers })
await network.enable()
await use(network)
await network.disable()
},
{ auto: true },
],
})
export { expect }

View File

@@ -0,0 +1,20 @@
import { test, expect } from './msw-setup'
test.describe('Smoke', () => {
test('home page loads and shows branding', async ({ page }) => {
await page.goto('/')
await expect(page.getByRole('heading', { name: 'fete' })).toBeVisible()
})
test('home page has create event CTA', async ({ page }) => {
await page.goto('/')
await expect(page.getByRole('link', { name: /create event/i })).toBeVisible()
})
test('navigating to /create shows the creation form', async ({ page }) => {
await page.goto('/')
await page.getByRole('link', { name: /create event/i }).click()
await expect(page).toHaveURL('/create')
await expect(page.getByLabel(/title/i)).toBeVisible()
})
})