lisilou-portfolio/tests/booking.spec.js

// @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);
  });
});