import { describe, it, expect, beforeEach, afterEach } from 'vitest'; import type { StepHarness } from '../support/StepHarness'; import { createStepHarness } from '../support/StepHarness'; describe('Step 9 – add car', () => { let harness: StepHarness; beforeEach(async () => { harness = await createStepHarness(); }); afterEach(async () => { await harness.dispose(); }); describe('happy path', () => { it('executes on Add Car modal from Cars step', async () => { await harness.navigateToFixtureStep(9); const page = harness.adapter.getPage(); expect(page).not.toBeNull(); const modalTitleBefore = await page!.textContent('[data-indicator="add-car"]'); expect(modalTitleBefore).toContain('Add a Car'); const result = await harness.executeStep(9, { carSearch: 'Porsche 911 GT3 R', }); expect(result.success).toBe(true); expect(result.error).toBeUndefined(); }); }); describe('state validation', () => { it('throws when executed on Track page instead of Cars page', async () => { await harness.navigateToFixtureStep(11); await harness.adapter.getPage()?.waitForLoadState('domcontentloaded'); await expect(async () => { await harness.executeStep(9, { carSearch: 'Mazda MX-5', }); }).rejects.toThrow(/Step 9 FAILED validation/i); }); it('detects state mismatch when Cars button is missing', async () => { await harness.navigateToFixtureStep(11); await harness.adapter.getPage()?.waitForLoadState('domcontentloaded'); await expect(async () => { await harness.executeStep(9, { carSearch: 'Porsche 911', }); }).rejects.toThrow(/Expected cars step/i); }); it('detects when Track container is present instead of Cars page', async () => { await harness.navigateToFixtureStep(11); await harness.adapter.getPage()?.waitForLoadState('domcontentloaded'); await expect(async () => { await harness.executeStep(9, { carSearch: 'Ferrari 488', }); }).rejects.toThrow(/3 steps ahead|Track page/i); }); it('passes validation when on Cars page', async () => { await harness.navigateToFixtureStep(8); await harness.adapter.getPage()?.waitForLoadState('domcontentloaded'); const result = await harness.executeStep(9, { carSearch: 'Mazda MX-5', }); expect(result.success).toBe(true); }); it('provides detailed error context in validation failure', async () => { await harness.navigateToFixtureStep(11); await harness.adapter.getPage()?.waitForLoadState('domcontentloaded'); let errorMessage = ''; try { await harness.executeStep(9, { carSearch: 'BMW M4', }); } catch (error) { errorMessage = error instanceof Error ? error.message : String(error); } expect(errorMessage).toContain('Step 9'); expect(errorMessage).toMatch(/validation|mismatch|wrong page/i); }); it('validates page state before attempting any Step 9 actions', async () => { await harness.navigateToFixtureStep(11); await harness.adapter.getPage()?.waitForLoadState('domcontentloaded'); const page = harness.adapter.getPage(); if (!page) { throw new Error('Page not available'); } let carModalOpened = false; page.on('framenavigated', () => { carModalOpened = true; }); let validationError = false; try { await harness.executeStep(9, { carSearch: 'Audi R8', }); } catch { validationError = true; } expect(validationError).toBe(true); expect(carModalOpened).toBe(false); }); it('checks wizard footer state in Step 9', async () => { await harness.navigateToFixtureStep(11); await harness.adapter.getPage()?.waitForLoadState('domcontentloaded'); await expect(async () => { await harness.executeStep(9, { carSearch: 'McLaren 720S', }); }).rejects.toThrow(); }); }); });