Make customer-facing UI usable on smartphones. #6

Merged
jocke merged 4 commits from feature/mobile-responsive into master 2026-05-26 11:48:50 +00:00
Showing only changes of commit 4d3beeffb4 - Show all commits

View file

@ -35,6 +35,34 @@ test.describe('Deferred payment and admin lookup', () => {
await page.getByRole('button', { name: 'Ja, jag har betalat' }).click() await page.getByRole('button', { name: 'Ja, jag har betalat' }).click()
} }
async function openAdminTodoBoard(page: import('@playwright/test').Page) {
await page.goto('/admin')
await expect(page.locator('.admin__loading')).toBeHidden({ timeout: 30_000 })
await page.getByRole('button', { name: /Att göra/ }).click()
}
async function searchAdminOrders(
page: import('@playwright/test').Page,
query: string,
) {
const search = page.locator('#admin-order-search')
await search.clear()
await search.fill(query)
await expect(search).toHaveValue(query)
}
async function expectAdminOrderRow(
page: import('@playwright/test').Page,
options: { shortOrderId: string; plate: string; todo?: boolean },
) {
const row = page.locator('.admin__row', { hasText: options.shortOrderId })
await expect(row).toBeVisible({ timeout: 15_000 })
await expect(row.locator('.admin__plate')).toHaveText(options.plate)
if (options.todo) {
await expect(row).toHaveClass(/admin__row--todo/)
}
}
test('user creates order, leaves payment, and pays later from orders', async ({ test('user creates order, leaves payment, and pays later from orders', async ({
page, page,
}) => { }) => {
@ -74,43 +102,36 @@ test.describe('Deferred payment and admin lookup', () => {
page, page,
}) => { }) => {
await loginAsAdmin(page) await loginAsAdmin(page)
await page.goto('/admin') await openAdminTodoBoard(page)
await searchAdminOrders(page, shortOrderId)
await page.getByRole('button', { name: /Att göra/ }).click()
await page.locator('#admin-order-search').fill(shortOrderId)
await expectAdminOrderRow(page, {
shortOrderId,
plate,
todo: true,
})
const row = page.locator('.admin__row', { hasText: shortOrderId }) const row = page.locator('.admin__row', { hasText: shortOrderId })
await expect(row).toBeVisible()
await expect(row.locator('.admin__order-id')).toHaveText(shortOrderId) await expect(row.locator('.admin__order-id')).toHaveText(shortOrderId)
await expect(row.locator('.admin__plate')).toHaveText(plate)
await expect(row).toHaveClass(/admin__row--todo/)
}) })
test('admin finds paid order when searching full order id', async ({ page }) => { test('admin finds paid order when searching full order id', async ({ page }) => {
await loginAsAdmin(page) await loginAsAdmin(page)
await page.goto('/admin') await openAdminTodoBoard(page)
await searchAdminOrders(page, orderId)
await page.getByRole('button', { name: /Att göra/ }).click()
await page.locator('#admin-order-search').fill(orderId)
await expectAdminOrderRow(page, { shortOrderId, plate })
const row = page.locator('.admin__row', { hasText: shortOrderId }) const row = page.locator('.admin__row', { hasText: shortOrderId })
await expect(row).toBeVisible()
await expect(row.locator('.admin__order-id')).toHaveText(shortOrderId) await expect(row.locator('.admin__order-id')).toHaveText(shortOrderId)
await expect(row.locator('.admin__plate')).toHaveText(plate)
}) })
test('admin finds paid order when searching registration number', async ({ test('admin finds paid order when searching registration number', async ({
page, page,
}) => { }) => {
await loginAsAdmin(page) await loginAsAdmin(page)
await page.goto('/admin') await openAdminTodoBoard(page)
await searchAdminOrders(page, plate)
await page.getByRole('button', { name: /Att göra/ }).click() await expectAdminOrderRow(page, { shortOrderId, plate })
await page.locator('#admin-order-search').fill(plate)
const row = page.locator('.admin__row', { hasText: shortOrderId })
await expect(row).toBeVisible()
await expect(row.locator('.admin__plate')).toHaveText(plate)
}) })
test('admin does not show unpaid order under Att göra before payment', async ({ test('admin does not show unpaid order under Att göra before payment', async ({
@ -130,14 +151,13 @@ test.describe('Deferred payment and admin lookup', () => {
await page.evaluate(() => localStorage.clear()) await page.evaluate(() => localStorage.clear())
await loginAsAdmin(page) await loginAsAdmin(page)
await page.goto('/admin') await openAdminTodoBoard(page)
await page.getByRole('button', { name: /Att göra/ }).click()
const unpaidRow = page.locator('.admin__row', { hasText: unpaidShortId }) const unpaidRow = page.locator('.admin__row', { hasText: unpaidShortId })
await expect(unpaidRow).not.toBeVisible() await expect(unpaidRow).not.toBeVisible()
await page.getByRole('button', { name: /Väntar/ }).click() await page.getByRole('button', { name: /Väntar/ }).click()
await page.locator('#admin-order-search').fill(unpaidPlate) await searchAdminOrders(page, unpaidPlate)
await expect(unpaidRow).toBeVisible() await expect(unpaidRow).toBeVisible()
await expect(unpaidRow.locator('.admin__plate')).toHaveText(unpaidPlate) await expect(unpaidRow.locator('.admin__plate')).toHaveText(unpaidPlate)
}) })