Joakim Mörling
5fa903d9af
- Add createOrder(plate, template, letterText) to frontend api/orders.ts - Create data/templates.ts with 6 Swedish letter templates (Komplimang, Jag vill köpa din bil, Tips / servicebehov, Synpunkter på körbeteende, Tuta / frustration, Fritt meddelande) with pre-filled body text - Rewrite ComposePage.vue with full compose flow: - Template selector dropdown (Fritt meddelande selected by default) - Textarea with 1000-char limit and live character counter - Inline A4 letter preview with plate, body, and GDPR Art. 14 footer - 'Skicka brev (49 kr)' submit button, disabled when empty - On success: redirects to /orders; on error: shows error message - Shows error with back link if no plate in route query - Add 12 Vitest tests for ComposePage (template fill, char counter, submit validation, createOrder call, navigation, null template for Fritt meddelande) - Add 8 Playwright E2E tests (auth guard, no-plate error, template selection, textarea edit, submit button state, order creation, preview content)
117 lines
4.3 KiB
TypeScript
117 lines
4.3 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
|
|
|
test.describe('Compose flow', () => {
|
|
test('redirects unauthenticated user to login', async ({ page }) => {
|
|
await page.goto('/compose?plate=ABC123')
|
|
await expect(page).toHaveURL(/\/logga-in\?redirect=\/compose/)
|
|
await expect(page.getByRole('heading', { name: 'Logga in' })).toBeVisible()
|
|
})
|
|
|
|
test('shows error when no plate is provided', async ({ page }) => {
|
|
await page.goto('/logga-in')
|
|
await page.getByLabel('E-postadress').fill('test@bilhalsning.se')
|
|
await page.getByLabel('Lösenord').fill('test1234')
|
|
await page.getByRole('button', { name: 'Logga in' }).click()
|
|
await page.waitForURL('/')
|
|
|
|
await page.goto('/compose')
|
|
|
|
await expect(page.getByText('Inget registreringsnummer valt')).toBeVisible()
|
|
})
|
|
|
|
test('displays plate and template selector', async ({ page }) => {
|
|
await page.goto('/logga-in')
|
|
await page.getByLabel('E-postadress').fill('test@bilhalsning.se')
|
|
await page.getByLabel('Lösenord').fill('test1234')
|
|
await page.getByRole('button', { name: 'Logga in' }).click()
|
|
await page.waitForURL('/')
|
|
|
|
await page.goto('/compose?plate=ABC123')
|
|
|
|
await expect(
|
|
page.getByRole('heading', { name: 'Skriv ditt brev' }),
|
|
).toBeVisible()
|
|
await expect(page.getByText('ABC123')).toBeVisible()
|
|
await expect(page.getByLabel('Välj mall')).toBeVisible()
|
|
})
|
|
|
|
test('selecting template fills textarea', async ({ page }) => {
|
|
await page.goto('/logga-in')
|
|
await page.getByLabel('E-postadress').fill('test@bilhalsning.se')
|
|
await page.getByLabel('Lösenord').fill('test1234')
|
|
await page.getByRole('button', { name: 'Logga in' }).click()
|
|
await page.waitForURL('/')
|
|
|
|
await page.goto('/compose?plate=ABC123')
|
|
|
|
await page.getByLabel('Välj mall').selectOption('Komplimang')
|
|
const textarea = page.getByLabel('Ditt meddelande')
|
|
await expect(textarea).toHaveValue(/jättefin/)
|
|
})
|
|
|
|
test('can edit textarea after selecting template', async ({ page }) => {
|
|
await page.goto('/logga-in')
|
|
await page.getByLabel('E-postadress').fill('test@bilhalsning.se')
|
|
await page.getByLabel('Lösenord').fill('test1234')
|
|
await page.getByRole('button', { name: 'Logga in' }).click()
|
|
await page.waitForURL('/')
|
|
|
|
await page.goto('/compose?plate=ABC123')
|
|
|
|
await page.getByLabel('Välj mall').selectOption('Komplimang')
|
|
const textarea = page.getByLabel('Ditt meddelande')
|
|
await textarea.fill('Custom text')
|
|
|
|
await expect(textarea).toHaveValue('Custom text')
|
|
})
|
|
|
|
test('submit button disabled when textarea is empty', async ({ page }) => {
|
|
await page.goto('/logga-in')
|
|
await page.getByLabel('E-postadress').fill('test@bilhalsning.se')
|
|
await page.getByLabel('Lösenord').fill('test1234')
|
|
await page.getByRole('button', { name: 'Logga in' }).click()
|
|
await page.waitForURL('/')
|
|
|
|
await page.goto('/compose?plate=ABC123')
|
|
|
|
const button = page.getByRole('button', { name: 'Skicka brev (49 kr)' })
|
|
await expect(button).toBeDisabled()
|
|
})
|
|
|
|
test('can create order and navigate to orders page', async ({ page }) => {
|
|
await page.goto('/logga-in')
|
|
await page.getByLabel('E-postadress').fill('test@bilhalsning.se')
|
|
await page.getByLabel('Lösenord').fill('test1234')
|
|
await page.getByRole('button', { name: 'Logga in' }).click()
|
|
await page.waitForURL('/')
|
|
|
|
await page.goto('/compose?plate=ABC123')
|
|
|
|
await page.getByLabel('Välj mall').selectOption('Komplimang')
|
|
const button = page.getByRole('button', { name: 'Skicka brev (49 kr)' })
|
|
await expect(button).toBeEnabled()
|
|
await button.click()
|
|
|
|
await expect(page).toHaveURL('/orders')
|
|
await expect(
|
|
page.getByRole('heading', { name: 'Mina beställningar' }),
|
|
).toBeVisible()
|
|
})
|
|
|
|
test('preview shows letter content and GDPR footer', async ({ page }) => {
|
|
await page.goto('/logga-in')
|
|
await page.getByLabel('E-postadress').fill('test@bilhalsning.se')
|
|
await page.getByLabel('Lösenord').fill('test1234')
|
|
await page.getByRole('button', { name: 'Logga in' }).click()
|
|
await page.waitForURL('/')
|
|
|
|
await page.goto('/compose?plate=ABC123')
|
|
|
|
await page.getByLabel('Välj mall').selectOption('Komplimang')
|
|
|
|
await expect(
|
|
page.getByText('Detta brev skickades via BilHej.se'),
|
|
).toBeVisible()
|
|
await expect(page.getByText('Transportstyrelsens fordonsregister')).toBeVisible()
|
|
})
|
|
})
|