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,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);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user