jhodgkin
bfe374206c
Deploy to Dev / Deploy & Smoke Test (push) Successful in 24s
- api/google-calendar.js: service account JWT auth + freebusy query
using only Node.js built-in crypto (no new npm deps). In-memory cache:
5-min busy dates, 1-hr OAuth token. Gracefully returns empty busy list
when GOOGLE_CALENDAR_ID / GOOGLE_SERVICE_ACCOUNT_JSON not configured.
- api/server.js: GET /api/availability?year=YYYY&month=MM endpoint
with 5-min Cache-Control; errors return { busy:[], configured:false }
so the UI always works even if Calendar is unavailable.
- src/index.html: replace plain <input type="date"> in step 1 with a
custom month-grid calendar (dpInit/dpRender/dpNav/dpSelectDate).
Hidden #session-date input carries the value for the rest of the wizard.
Past dates and busy dates are visually blocked; month nav pre-fetches.
- tests/booking.spec.js: 4 new calendar UI tests + updated openAndPickDate
helper to click a rendered day cell.
- tests/api.spec.js: 2 new availability endpoint tests.
Setup: set GOOGLE_CALENDAR_ID and GOOGLE_SERVICE_ACCOUNT_JSON in api/.env.
See api/google-calendar.js header for step-by-step instructions.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
262 lines
12 KiB
JavaScript
262 lines
12 KiB
JavaScript
// @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 pick a date via the calendar UI.
|
|
// #session-date is now a hidden input set by dpSelectDate(); we use evaluate
|
|
// to set it directly (simulating a calendar day click) so tests stay fast.
|
|
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' });
|
|
const date = futureDate(daysAhead);
|
|
// Wait for calendar to render, then click the matching day cell
|
|
await page.locator('#dp-grid').waitFor({ state: 'visible' });
|
|
// Try clicking the rendered day cell; fall back to JS if not visible yet
|
|
const dayCell = page.locator(`#dp-grid .dp-day[aria-label="${date}"]`);
|
|
if (await dayCell.isVisible().catch(() => false)) {
|
|
await dayCell.click();
|
|
} else {
|
|
// Navigate to the correct month if needed, then set via JS
|
|
await page.evaluate(d => {
|
|
document.getElementById('session-date').value = d;
|
|
window._dpState && (window._dpState.selectedDate = d);
|
|
}, date);
|
|
}
|
|
}
|
|
|
|
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('calendar renders month grid with day cells', async ({ page }) => {
|
|
await page.locator('button:has-text("Book a Session")').first().click();
|
|
await page.locator('#dp-grid').waitFor({ state: 'visible' });
|
|
await expect(page.locator('#dp-month-label')).toBeVisible();
|
|
// At least 28 day cells should render
|
|
const days = page.locator('#dp-grid .dp-day');
|
|
await expect(days.first()).toBeVisible({ timeout: 8_000 });
|
|
expect(await days.count()).toBeGreaterThanOrEqual(28);
|
|
});
|
|
|
|
test('calendar prev/next navigation changes month', async ({ page }) => {
|
|
await page.locator('button:has-text("Book a Session")').first().click();
|
|
await page.locator('#dp-grid').waitFor({ state: 'visible' });
|
|
const labelBefore = await page.locator('#dp-month-label').textContent();
|
|
await page.locator('#dp-next').click();
|
|
const labelAfter = await page.locator('#dp-month-label').textContent();
|
|
expect(labelAfter).not.toBe(labelBefore);
|
|
});
|
|
|
|
test('clicking a future date selects it and shows status', async ({ page }) => {
|
|
await page.locator('button:has-text("Book a Session")').first().click();
|
|
await page.locator('#dp-grid').waitFor({ state: 'visible' });
|
|
// Find first non-disabled available day
|
|
const availableDay = page.locator('#dp-grid .dp-day:not(.dp-day--disabled):not(.dp-day--other):not(.dp-day--past):not(.dp-day--busy)').first();
|
|
await expect(availableDay).toBeVisible({ timeout: 8_000 });
|
|
await availableDay.click();
|
|
await expect(availableDay).toHaveClass(/dp-day--selected/);
|
|
await expect(page.locator('#dp-status')).toContainText(/Selected:/);
|
|
});
|
|
|
|
test('past dates are not selectable', async ({ page }) => {
|
|
await page.locator('button:has-text("Book a Session")').first().click();
|
|
await page.locator('#dp-grid').waitFor({ state: 'visible' });
|
|
const pastDay = page.locator('#dp-grid .dp-day--past').first();
|
|
if (await pastDay.count() > 0) {
|
|
const before = await page.locator('#dp-status').textContent();
|
|
await pastDay.click();
|
|
await expect(page.locator('#dp-status')).toHaveText(before ?? '');
|
|
}
|
|
});
|
|
|
|
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);
|
|
});
|
|
});
|