Add Playwright test suite (51 tests, all passing)
Deploy to Dev / Deploy & Smoke Test (push) Successful in 23s
Deploy to Dev / Deploy & Smoke Test (push) Successful in 23s
- tests/api.spec.js: 17 tests covering public booking API and admin CRUD (health, POST bookings, auth rejection, stats, filters, PATCH, CSV export) - tests/booking.spec.js: 12 tests covering the 7-step booking wizard (open/close, date validation, step progression, contract scroll+signature, payment checkbox, full end-to-end booking flow) - tests/dashboard.spec.js: 15 tests covering the admin dashboard (login, wrong passphrase, Enter key, sign out, overview stats, calendar month nav, bookings table, search filter, row expand, CSV download) - tests/portfolio.spec.js: 7 tests covering the portfolio site (nav, book button, portfolio section, config, health, theme color) - playwright.config.js: Chromium headless, BASE_URL + ADMIN_SECRET via env - Fix dangling client-email input outside step-panel (was visible, making the booking modal taller and hiding the Next button in headless mode) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,194 @@
|
||||
// @ts-check
|
||||
const { test, expect } = require('@playwright/test');
|
||||
|
||||
const ADMIN_SECRET = process.env.ADMIN_SECRET || '9yPuNfYjy5kisRKrowhmH42PTeEgH';
|
||||
const authHeaders = { Authorization: `Bearer ${ADMIN_SECRET}` };
|
||||
|
||||
test.describe('Booking API — public routes', () => {
|
||||
test('GET /api/health → {ok:true}', async ({ request }) => {
|
||||
const res = await request.get('/api/health');
|
||||
expect(res.status()).toBe(200);
|
||||
expect((await res.json()).ok).toBe(true);
|
||||
});
|
||||
|
||||
test('POST /api/bookings creates a booking and returns id', async ({ request }) => {
|
||||
const res = await request.post('/api/bookings', {
|
||||
data: {
|
||||
client_name: 'API Test',
|
||||
client_email: `api-test-${Date.now()}@test.lisilou`,
|
||||
client_phone: '555-000-0002',
|
||||
session_date: '2099-11-15',
|
||||
session_type: 'individual',
|
||||
session_length: 'mini',
|
||||
location: 'studio',
|
||||
},
|
||||
});
|
||||
expect(res.status()).toBe(201);
|
||||
const json = await res.json();
|
||||
expect(typeof json.id).toBe('number');
|
||||
expect(json.id).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('POST /api/bookings with payment_status=pending_confirmation accepted', async ({ request }) => {
|
||||
const res = await request.post('/api/bookings', {
|
||||
data: {
|
||||
client_name: 'Payment Test',
|
||||
client_email: `pay-test-${Date.now()}@test.lisilou`,
|
||||
session_date: '2099-12-01',
|
||||
session_type: 'couple',
|
||||
session_length: 'full',
|
||||
location: 'downtown',
|
||||
payment_status: 'pending_confirmation',
|
||||
},
|
||||
});
|
||||
expect(res.status()).toBe(201);
|
||||
expect((await res.json()).id).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('POST /api/bookings with missing required fields returns 400', async ({ request }) => {
|
||||
const res = await request.post('/api/bookings', {
|
||||
data: { client_name: 'Incomplete' },
|
||||
});
|
||||
expect(res.status()).toBe(400);
|
||||
});
|
||||
|
||||
test('GET /api/bookings/99999/contract returns 404 for unknown booking', async ({ request }) => {
|
||||
const res = await request.get('/api/bookings/99999/contract');
|
||||
expect(res.status()).toBe(404);
|
||||
});
|
||||
|
||||
test('GET /api/contracts/template returns 404 (no template on file yet)', async ({ request }) => {
|
||||
const res = await request.get('/api/contracts/template');
|
||||
// Either 404 (no template uploaded) or 200 (uploaded) — both are valid; just not 500
|
||||
expect(res.status()).not.toBe(500);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Admin API — authentication', () => {
|
||||
test('GET /api/admin/stats without token returns 401 or 503', async ({ request }) => {
|
||||
const res = await request.get('/api/admin/stats');
|
||||
expect([401, 503]).toContain(res.status());
|
||||
});
|
||||
|
||||
test('GET /api/admin/stats with wrong token returns 401', async ({ request }) => {
|
||||
const res = await request.get('/api/admin/stats', {
|
||||
headers: { Authorization: 'Bearer wrongtoken' },
|
||||
});
|
||||
expect(res.status()).toBe(401);
|
||||
});
|
||||
|
||||
test('GET /api/admin/stats with correct token returns stats', async ({ request }) => {
|
||||
const res = await request.get('/api/admin/stats', { headers: authHeaders });
|
||||
expect(res.status()).toBe(200);
|
||||
const json = await res.json();
|
||||
expect(typeof json.upcoming).toBe('number');
|
||||
expect(typeof json.pending_payment).toBe('number');
|
||||
expect(typeof json.confirmed_payment).toBe('number');
|
||||
expect(Array.isArray(json.nextUpcoming)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Admin API — bookings CRUD', () => {
|
||||
let createdId;
|
||||
|
||||
test('GET /api/admin/bookings returns array', async ({ request }) => {
|
||||
const res = await request.get('/api/admin/bookings', { headers: authHeaders });
|
||||
expect(res.status()).toBe(200);
|
||||
const json = await res.json();
|
||||
expect(Array.isArray(json)).toBe(true);
|
||||
});
|
||||
|
||||
test('GET /api/admin/bookings filters by payment_status', async ({ request }) => {
|
||||
const res = await request.get('/api/admin/bookings?payment_status=pending', { headers: authHeaders });
|
||||
expect(res.status()).toBe(200);
|
||||
const json = await res.json();
|
||||
for (const b of json) {
|
||||
expect(b.payment_status).toBe('pending');
|
||||
}
|
||||
});
|
||||
|
||||
test('GET /api/admin/bookings?search= filters by name', async ({ request }) => {
|
||||
const res = await request.get('/api/admin/bookings?search=Smoke+Test', { headers: authHeaders });
|
||||
expect(res.status()).toBe(200);
|
||||
const json = await res.json();
|
||||
for (const b of json) {
|
||||
const matches = b.client_name?.includes('Smoke') || b.client_email?.includes('Smoke');
|
||||
expect(matches).toBeTruthy();
|
||||
}
|
||||
});
|
||||
|
||||
test('PATCH /api/admin/bookings/:id updates payment_status', async ({ request }) => {
|
||||
// Create a booking to patch
|
||||
const createRes = await request.post('/api/bookings', {
|
||||
data: {
|
||||
client_name: 'Admin Patch Test',
|
||||
client_email: `patch-${Date.now()}@test.lisilou`,
|
||||
session_date: '2099-10-10',
|
||||
session_type: 'family',
|
||||
session_length: 'full',
|
||||
location: 'park',
|
||||
payment_status: 'pending_confirmation',
|
||||
},
|
||||
});
|
||||
createdId = (await createRes.json()).id;
|
||||
|
||||
const patchRes = await request.patch(`/api/admin/bookings/${createdId}`, {
|
||||
headers: authHeaders,
|
||||
data: { payment_status: 'confirmed' },
|
||||
});
|
||||
expect(patchRes.status()).toBe(200);
|
||||
const updated = await patchRes.json();
|
||||
expect(updated.payment_status).toBe('confirmed');
|
||||
});
|
||||
|
||||
test('PATCH /api/admin/bookings/:id updates notes', async ({ request }) => {
|
||||
// Reuse createdId from previous test or create new
|
||||
const createRes = await request.post('/api/bookings', {
|
||||
data: {
|
||||
client_name: 'Notes Test',
|
||||
client_email: `notes-${Date.now()}@test.lisilou`,
|
||||
session_date: '2099-09-09',
|
||||
session_type: 'individual',
|
||||
session_length: 'mini',
|
||||
location: 'studio',
|
||||
},
|
||||
});
|
||||
const id = (await createRes.json()).id;
|
||||
|
||||
const patchRes = await request.patch(`/api/admin/bookings/${id}`, {
|
||||
headers: authHeaders,
|
||||
data: { notes: 'Playwright test note' },
|
||||
});
|
||||
expect(patchRes.status()).toBe(200);
|
||||
expect((await patchRes.json()).notes).toBe('Playwright test note');
|
||||
});
|
||||
|
||||
test('GET /api/admin/bookings/:id returns single booking', async ({ request }) => {
|
||||
const listRes = await request.get('/api/admin/bookings', { headers: authHeaders });
|
||||
const bookings = await listRes.json();
|
||||
if (!bookings.length) return; // skip if empty DB
|
||||
|
||||
const id = bookings[0].id;
|
||||
const res = await request.get(`/api/admin/bookings/${id}`, { headers: authHeaders });
|
||||
expect(res.status()).toBe(200);
|
||||
const b = await res.json();
|
||||
expect(b.id).toBe(id);
|
||||
expect(b).toHaveProperty('client_name');
|
||||
expect(b).toHaveProperty('session_date');
|
||||
});
|
||||
|
||||
test('GET /api/admin/bookings/99999 returns 404', async ({ request }) => {
|
||||
const res = await request.get('/api/admin/bookings/99999', { headers: authHeaders });
|
||||
expect(res.status()).toBe(404);
|
||||
});
|
||||
|
||||
test('GET /api/admin/payments/export returns CSV', async ({ request }) => {
|
||||
const res = await request.get('/api/admin/payments/export', { headers: authHeaders });
|
||||
expect(res.status()).toBe(200);
|
||||
expect(res.headers()['content-type']).toContain('text/csv');
|
||||
const body = await res.text();
|
||||
expect(body).toContain('client_name');
|
||||
expect(body).toContain('session_date');
|
||||
expect(body).toContain('payment_status');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,205 @@
|
||||
// @ts-check
|
||||
const { test, expect } = require('@playwright/test');
|
||||
|
||||
// Helper: get a date 60 days from now in YYYY-MM-DD
|
||||
function futureDate(daysAhead = 60) {
|
||||
const d = new Date();
|
||||
d.setDate(d.getDate() + daysAhead);
|
||||
return d.toISOString().slice(0, 10);
|
||||
}
|
||||
|
||||
// Helper: open booking modal and fill step 1 (date)
|
||||
async function openAndPickDate(page, daysAhead = 60) {
|
||||
await page.locator('button:has-text("Book a Session")').first().click();
|
||||
await page.locator('#booking-overlay').waitFor({ state: 'visible' });
|
||||
await page.locator('#session-date').fill(futureDate(daysAhead));
|
||||
}
|
||||
|
||||
test.describe('Booking wizard', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForLoadState('networkidle');
|
||||
});
|
||||
|
||||
test('opens when Book a Session is clicked', async ({ page }) => {
|
||||
await page.locator('button:has-text("Book a Session")').first().click();
|
||||
await expect(page.locator('#booking-overlay')).toBeVisible();
|
||||
});
|
||||
|
||||
test('shows step 1 (Date) on open', async ({ page }) => {
|
||||
await page.locator('button:has-text("Book a Session")').first().click();
|
||||
await expect(page.locator('#step-1')).toBeVisible();
|
||||
await expect(page.locator('[data-step="1"]')).toHaveClass(/active/);
|
||||
});
|
||||
|
||||
test('close button dismisses the modal', async ({ page }) => {
|
||||
await page.locator('button:has-text("Book a Session")').first().click();
|
||||
await expect(page.locator('#booking-overlay')).toBeVisible();
|
||||
await page.locator('#booking-close').click();
|
||||
await expect(page.locator('#booking-overlay')).not.toBeVisible();
|
||||
});
|
||||
|
||||
test('step 1 requires a date to advance', async ({ page }) => {
|
||||
await page.locator('button:has-text("Book a Session")').first().click();
|
||||
// Click Next without a date — should stay on step 1
|
||||
await page.locator('#btn-next').click();
|
||||
await expect(page.locator('#step-1')).toBeVisible();
|
||||
await expect(page.locator('#step-2')).not.toBeVisible();
|
||||
});
|
||||
|
||||
test('step 2 renders session type cards from config', async ({ page }) => {
|
||||
await openAndPickDate(page);
|
||||
await page.locator('#btn-next').click();
|
||||
await expect(page.locator('#step-2')).toBeVisible();
|
||||
const cards = page.locator('#session-type-options .option-card');
|
||||
await expect(cards.first()).toBeVisible();
|
||||
expect(await cards.count()).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('selecting a session type card marks it selected', async ({ page }) => {
|
||||
await openAndPickDate(page);
|
||||
await page.locator('#btn-next').click();
|
||||
const firstCard = page.locator('#session-type-options .option-card').first();
|
||||
await firstCard.click();
|
||||
await expect(firstCard).toHaveClass(/selected/);
|
||||
});
|
||||
|
||||
test('step 3 shows mini and full length cards with prices', async ({ page }) => {
|
||||
await openAndPickDate(page);
|
||||
await page.locator('#btn-next').click();
|
||||
await page.locator('#session-type-options .option-card').first().click();
|
||||
await page.locator('#btn-next').click();
|
||||
await expect(page.locator('#step-3')).toBeVisible();
|
||||
await expect(page.locator('.length-card[data-value="mini"]')).toBeVisible();
|
||||
await expect(page.locator('.length-card[data-value="full"]')).toBeVisible();
|
||||
await expect(page.locator('.length-card[data-value="mini"] .length-card-price')).toContainText('$');
|
||||
await expect(page.locator('.length-card[data-value="full"] .length-card-price')).toContainText('$');
|
||||
});
|
||||
|
||||
test('step 4 shows location cards', async ({ page }) => {
|
||||
await openAndPickDate(page);
|
||||
await page.locator('#btn-next').click();
|
||||
await page.locator('#session-type-options .option-card').first().click();
|
||||
await page.locator('#btn-next').click();
|
||||
await page.locator('.length-card[data-value="mini"]').click();
|
||||
await page.locator('#btn-next').click();
|
||||
await expect(page.locator('#step-4')).toBeVisible();
|
||||
const locationCards = page.locator('.location-card');
|
||||
await expect(locationCards.first()).toBeVisible();
|
||||
expect(await locationCards.count()).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('clicking a location card selects it and opens detail panel', async ({ page }) => {
|
||||
await openAndPickDate(page);
|
||||
await page.locator('#btn-next').click();
|
||||
await page.locator('#session-type-options .option-card').first().click();
|
||||
await page.locator('#btn-next').click();
|
||||
await page.locator('.length-card[data-value="mini"]').click();
|
||||
await page.locator('#btn-next').click();
|
||||
const firstLocation = page.locator('.location-card').first();
|
||||
await firstLocation.click();
|
||||
await expect(firstLocation).toHaveClass(/selected/);
|
||||
await expect(page.locator('.location-detail.open').first()).toBeVisible();
|
||||
});
|
||||
|
||||
test('step 5 renders name, email, phone inputs', async ({ page }) => {
|
||||
await openAndPickDate(page);
|
||||
await page.locator('#btn-next').click();
|
||||
await page.locator('#session-type-options .option-card').first().click();
|
||||
await page.locator('#btn-next').click();
|
||||
await page.locator('.length-card[data-value="mini"]').click();
|
||||
await page.locator('#btn-next').click();
|
||||
await page.locator('.location-card').first().click();
|
||||
await page.locator('#btn-next').click();
|
||||
await expect(page.locator('#step-5')).toBeVisible();
|
||||
await expect(page.locator('#client-name').first()).toBeVisible();
|
||||
await expect(page.locator('#client-email').first()).toBeVisible();
|
||||
await expect(page.locator('#client-phone').first()).toBeVisible();
|
||||
});
|
||||
|
||||
test('step 5 blocks advance when name/email are empty', async ({ page }) => {
|
||||
await openAndPickDate(page);
|
||||
await page.locator('#btn-next').click();
|
||||
await page.locator('#session-type-options .option-card').first().click();
|
||||
await page.locator('#btn-next').click();
|
||||
await page.locator('.length-card[data-value="mini"]').click();
|
||||
await page.locator('#btn-next').click();
|
||||
await page.locator('.location-card').first().click();
|
||||
await page.locator('#btn-next').click();
|
||||
// Try advancing with empty fields
|
||||
await page.locator('#btn-next').click();
|
||||
await expect(page.locator('#step-5')).toBeVisible();
|
||||
await expect(page.locator('#step-6')).not.toBeVisible();
|
||||
});
|
||||
|
||||
test('full wizard flow submits and shows success screen', async ({ page }) => {
|
||||
const uniqueEmail = `playwright-${Date.now()}@test.lisilou`;
|
||||
|
||||
await openAndPickDate(page, 65);
|
||||
|
||||
// Step 1 → 2
|
||||
await page.locator('#btn-next').click();
|
||||
await expect(page.locator('#step-2')).toBeVisible();
|
||||
|
||||
// Step 2: pick first session type
|
||||
await page.locator('#session-type-options .option-card').first().click();
|
||||
await page.locator('#btn-next').click();
|
||||
await expect(page.locator('#step-3')).toBeVisible();
|
||||
|
||||
// Step 3: mini
|
||||
await page.locator('.length-card[data-value="mini"]').click();
|
||||
await page.locator('#btn-next').click();
|
||||
await expect(page.locator('#step-4')).toBeVisible();
|
||||
|
||||
// Step 4: first location
|
||||
await page.locator('.location-card').first().click();
|
||||
await page.locator('#btn-next').click();
|
||||
await expect(page.locator('#step-5')).toBeVisible();
|
||||
|
||||
// Step 5: client info
|
||||
await page.locator('#client-name').first().fill('Playwright Test');
|
||||
await page.locator('#client-email').first().fill(uniqueEmail);
|
||||
await page.locator('#client-phone').first().fill('555-000-0001');
|
||||
await page.locator('#btn-next').click();
|
||||
await expect(page.locator('#step-6')).toBeVisible();
|
||||
|
||||
// Step 6: contract
|
||||
await expect(page.locator('#step-6')).toBeVisible();
|
||||
// Wait for the async initContractStep to finish loading
|
||||
await expect(page.locator('#contract-loading')).not.toBeAttached({ timeout: 8_000 });
|
||||
// Scroll only the contract-viewer element (not the modal) to bottom via JS,
|
||||
// then dispatch scroll so the event listener fires and sets contractScrolled = true
|
||||
await page.locator('#contract-viewer').evaluate(el => {
|
||||
el.scrollTop = el.scrollHeight;
|
||||
el.dispatchEvent(new Event('scroll'));
|
||||
});
|
||||
await page.waitForTimeout(200);
|
||||
await expect(page.locator('#sig-section')).not.toHaveClass(/locked/, { timeout: 5_000 });
|
||||
// Scroll the canvas into view, then draw a signature
|
||||
await page.locator('#sig-canvas').scrollIntoViewIfNeeded();
|
||||
const sigCanvas = page.locator('#sig-canvas');
|
||||
const box = await sigCanvas.boundingBox();
|
||||
if (box && box.width > 0) {
|
||||
await page.mouse.move(box.x + 20, box.y + box.height / 2);
|
||||
await page.mouse.down();
|
||||
for (let x = 30; x < box.width - 20; x += 8) {
|
||||
await page.mouse.move(box.x + x, box.y + box.height / 2);
|
||||
}
|
||||
await page.mouse.up();
|
||||
}
|
||||
// Type full name
|
||||
await page.locator('#contract-name').fill('Playwright Test');
|
||||
// scrollIntoViewIfNeeded doesn't work reliably inside a fixed-position modal;
|
||||
// use JS click to bypass viewport coordinate checks while still firing the click handler
|
||||
await page.evaluate(() => document.getElementById('btn-next').click());
|
||||
|
||||
// Step 7: payment
|
||||
await expect(page.locator('#step-7')).toBeVisible();
|
||||
await page.locator('#payment-sent').check();
|
||||
await page.locator('#btn-next').click();
|
||||
|
||||
// Success
|
||||
await expect(page.locator('#step-success')).toBeVisible({ timeout: 15_000 });
|
||||
await expect(page.locator('#step-success')).toContainText(/thank|confirm|success|session/i);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,145 @@
|
||||
// @ts-check
|
||||
const { test, expect } = require('@playwright/test');
|
||||
|
||||
const ADMIN_SECRET = process.env.ADMIN_SECRET || '9yPuNfYjy5kisRKrowhmH42PTeEgH';
|
||||
|
||||
test.describe('Admin dashboard — auth', () => {
|
||||
test('loads the login screen at /dashboard', async ({ page }) => {
|
||||
await page.goto('/dashboard');
|
||||
await expect(page.locator('#login-screen')).toBeVisible();
|
||||
await expect(page.locator('#login-screen')).toContainText(/Admin/i);
|
||||
});
|
||||
|
||||
test('wrong passphrase shows error message', async ({ page }) => {
|
||||
await page.goto('/dashboard');
|
||||
await page.locator('#login-input').fill('wrongpassphrase');
|
||||
await page.locator('button:has-text("Sign In")').click();
|
||||
await expect(page.locator('#login-error')).toBeVisible({ timeout: 6_000 });
|
||||
});
|
||||
|
||||
test('correct passphrase shows the app', async ({ page }) => {
|
||||
await page.goto('/dashboard');
|
||||
await page.locator('#login-input').fill(ADMIN_SECRET);
|
||||
await page.locator('button:has-text("Sign In")').click();
|
||||
await expect(page.locator('#app')).toBeVisible({ timeout: 8_000 });
|
||||
await expect(page.locator('#login-screen')).not.toBeVisible();
|
||||
});
|
||||
|
||||
test('Enter key submits login form', async ({ page }) => {
|
||||
await page.goto('/dashboard');
|
||||
await page.locator('#login-input').fill(ADMIN_SECRET);
|
||||
await page.locator('#login-input').press('Enter');
|
||||
await expect(page.locator('#app')).toBeVisible({ timeout: 8_000 });
|
||||
});
|
||||
|
||||
test('Sign Out returns to login screen', async ({ page }) => {
|
||||
await page.goto('/dashboard');
|
||||
await page.locator('#login-input').fill(ADMIN_SECRET);
|
||||
await page.locator('button:has-text("Sign In")').click();
|
||||
await expect(page.locator('#app')).toBeVisible({ timeout: 8_000 });
|
||||
await page.locator('button:has-text("Sign Out")').click();
|
||||
await expect(page.locator('#login-screen')).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Admin dashboard — panels', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/dashboard');
|
||||
await page.locator('#login-input').fill(ADMIN_SECRET);
|
||||
await page.locator('button:has-text("Sign In")').click();
|
||||
await expect(page.locator('#app')).toBeVisible({ timeout: 8_000 });
|
||||
});
|
||||
|
||||
test('Overview panel shows stat cards', async ({ page }) => {
|
||||
await expect(page.locator('.stat-card')).toHaveCount(4);
|
||||
// At least one stat value should be rendered (not just —)
|
||||
const values = page.locator('.stat-card .value');
|
||||
await expect(values.first()).toBeVisible();
|
||||
});
|
||||
|
||||
test('Overview shows next upcoming sessions list', async ({ page }) => {
|
||||
const list = page.locator('#next-up-list');
|
||||
await expect(list).toBeVisible();
|
||||
// Should load (not show loading spinner indefinitely)
|
||||
await expect(list.locator('.loading')).not.toBeVisible({ timeout: 8_000 });
|
||||
});
|
||||
|
||||
test('Calendar panel renders a month grid', async ({ page }) => {
|
||||
await page.locator('#nav-calendar').click();
|
||||
await expect(page.locator('#panel-calendar')).toBeVisible();
|
||||
await expect(page.locator('#cal-month-label')).toBeVisible();
|
||||
// Grid should have at least 28 day cells + 7 header cells
|
||||
const days = page.locator('.cal-day');
|
||||
const count = await days.count();
|
||||
expect(count).toBeGreaterThanOrEqual(28);
|
||||
});
|
||||
|
||||
test('Calendar prev/next navigation changes month', async ({ page }) => {
|
||||
await page.locator('#nav-calendar').click();
|
||||
const labelBefore = await page.locator('#cal-month-label').textContent();
|
||||
await page.locator('button:has-text("Next")').click();
|
||||
const labelAfter = await page.locator('#cal-month-label').textContent();
|
||||
expect(labelAfter).not.toBe(labelBefore);
|
||||
});
|
||||
|
||||
test('Bookings panel renders table with results', async ({ page }) => {
|
||||
await page.locator('#nav-bookings').click();
|
||||
await expect(page.locator('#panel-bookings')).toBeVisible();
|
||||
// Table or empty state should appear
|
||||
const wrap = page.locator('#bookings-table-wrap');
|
||||
await expect(wrap).not.toBeEmpty({ timeout: 8_000 });
|
||||
});
|
||||
|
||||
test('Bookings panel search filter narrows results', async ({ page }) => {
|
||||
await page.locator('#nav-bookings').click();
|
||||
await page.locator('#b-search').fill('Smoke Test');
|
||||
await page.waitForTimeout(500); // debounce
|
||||
const wrap = page.locator('#bookings-table-wrap');
|
||||
await expect(wrap).not.toBeEmpty({ timeout: 6_000 });
|
||||
// All visible names should include Smoke Test (or empty state)
|
||||
const cells = page.locator('table tbody td strong');
|
||||
const count = await cells.count();
|
||||
for (let i = 0; i < count; i++) {
|
||||
const text = await cells.nth(i).textContent();
|
||||
expect(text).toContain('Smoke Test');
|
||||
}
|
||||
});
|
||||
|
||||
test('Bookings panel clear filter button works', async ({ page }) => {
|
||||
await page.locator('#nav-bookings').click();
|
||||
await page.locator('#b-search').fill('xyz-nobody');
|
||||
await page.waitForTimeout(400);
|
||||
await page.locator('button:has-text("Clear")').click();
|
||||
await expect(page.locator('#b-search')).toHaveValue('');
|
||||
await expect(page.locator('#bookings-table-wrap')).not.toBeEmpty({ timeout: 6_000 });
|
||||
});
|
||||
|
||||
test('Expanding a booking row shows client and payment details', async ({ page }) => {
|
||||
await page.locator('#nav-bookings').click();
|
||||
const firstRow = page.locator('table tbody tr.expandable').first();
|
||||
await expect(firstRow).toBeVisible({ timeout: 8_000 });
|
||||
await firstRow.click();
|
||||
// Expand row with detail should appear
|
||||
const expandRow = page.locator('.expand-row').first();
|
||||
await expect(expandRow).toBeVisible({ timeout: 5_000 });
|
||||
await expect(expandRow).toContainText(/Client|Payment|Session/i);
|
||||
});
|
||||
|
||||
test('Payments panel shows revenue summary', async ({ page }) => {
|
||||
await page.locator('#nav-payments').click();
|
||||
await expect(page.locator('#panel-payments')).toBeVisible();
|
||||
await expect(page.locator('#revenue-summary')).not.toBeEmpty({ timeout: 8_000 });
|
||||
await expect(page.locator('.revenue-card')).toHaveCount(3);
|
||||
});
|
||||
|
||||
test('Payments panel CSV export triggers download', async ({ page }) => {
|
||||
await page.locator('#nav-payments').click();
|
||||
|
||||
const [download] = await Promise.all([
|
||||
page.waitForEvent('download', { timeout: 10_000 }),
|
||||
page.locator('button:has-text("Export CSV")').click(),
|
||||
]);
|
||||
|
||||
expect(download.suggestedFilename()).toMatch(/lisilou-bookings.*\.csv/);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,63 @@
|
||||
// @ts-check
|
||||
const { test, expect } = require('@playwright/test');
|
||||
|
||||
test.describe('Portfolio site', () => {
|
||||
test('loads and shows site name in nav', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
// #header-logo is the visible nav brand link
|
||||
const logo = page.locator('#header-logo, .logo').filter({ visible: true }).first();
|
||||
await expect(logo).toBeVisible();
|
||||
await expect(logo).toContainText(/.+/); // non-empty
|
||||
});
|
||||
|
||||
test('navigation renders with Book a Session button', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
const bookBtn = page.locator('button:has-text("Book a Session"), a:has-text("Book a Session")').first();
|
||||
await expect(bookBtn).toBeVisible();
|
||||
});
|
||||
|
||||
test('portfolio section is visible', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
// Wait for page to load config and render
|
||||
await page.waitForLoadState('networkidle');
|
||||
const portfolio = page.locator('#portfolio, section#portfolio, [id*="portfolio"]').first();
|
||||
await expect(portfolio).toBeAttached();
|
||||
});
|
||||
|
||||
test('config/site.json is served', async ({ page }) => {
|
||||
const res = await page.request.get('/config/site.json');
|
||||
expect(res.status()).toBe(200);
|
||||
const json = await res.json();
|
||||
expect(json).toHaveProperty('site');
|
||||
expect(json).toHaveProperty('booking');
|
||||
expect(json).toHaveProperty('theme');
|
||||
});
|
||||
|
||||
test('health endpoint returns ok', async ({ page }) => {
|
||||
const res = await page.request.get('/health');
|
||||
expect(res.status()).toBe(200);
|
||||
});
|
||||
|
||||
test('API health returns {ok:true}', async ({ page }) => {
|
||||
const res = await page.request.get('/api/health');
|
||||
expect(res.status()).toBe(200);
|
||||
const json = await res.json();
|
||||
expect(json.ok).toBe(true);
|
||||
});
|
||||
|
||||
test('pink theme is applied (primary color is rose/pink)', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
const primary = await page.evaluate(() =>
|
||||
getComputedStyle(document.documentElement).getPropertyValue('--color-primary').trim()
|
||||
);
|
||||
// Should be a pink/rose hex — starts with #B or #b (our dusty rose #B06A7A)
|
||||
expect(primary.toLowerCase()).toMatch(/^#[a-f0-9]{6}$/i);
|
||||
// Hue should be in the red-pink range: R > G and R > B
|
||||
const hex = primary.replace('#', '');
|
||||
const r = parseInt(hex.slice(0, 2), 16);
|
||||
const g = parseInt(hex.slice(2, 4), 16);
|
||||
const b = parseInt(hex.slice(4, 6), 16);
|
||||
expect(r).toBeGreaterThan(g);
|
||||
expect(r).toBeGreaterThan(b);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user