KinoKit AI QA Workshop

Демо-репозиторий воркшопа «ИИ как QA-инженер для фронтенд-тестирования».

KinoKit - небольшое детерминированное приложение для бронирования мест в кино. Это учебный артефакт воркшопа, а не продакшен-продукт: репозиторий показывает, как контролируемые MSW-данные, семантический UI, тесты Playwright, инструкции для AI и fallback-артефакты делают QA с агентами менее расплывчатым.

Запуск

pnpm install
pnpm dev

Откройте:

http://127.0.0.1:3000/sessions/evening

Тесты

pnpm workshop:reset
pnpm test:msw
pnpm test:e2e

Базовый E2E-набор нужен для лайвкодинга: он должен проходить без падений. Он проверяет русский интерфейс бронирования, включая подписи кнопок мест Место A2, стандарт, 120 ₽, доступно и Место B1, VIP, 240 ₽, доступно.

Именованные QA-сценарии отдаются через MSW и моковый API бронирования. Тестовые хелперы вызывают useScenario(page, scenarioName): он выставляет cookie qa-scenario и открывает /sessions/evening. После него не добавляйте второй page.goto('/sessions/evening').

Доступные сценарии воркшопа:

• evening: основной сценарий /sessions/evening; при выборе VIP-мест он тоже воспроизводит текущую ошибку расчёта суммы.
• vip-pricing: стандартное место A2 за 120 ₽, VIP-место B1 за 240 ₽, ожидаемая сумма 360 ₽.
• mobile-overlap: те же данные бронирования, но с включённым посеянным визуальным перекрытием на мобильной ширине.
• hydration-mismatch: реальное расхождение SSR и клиента: серверный рендер выбирает A2, гидратированный клиент выбирает B1.

Моковый API на MSW

Страница бронирования получает данные сеанса через GET https://kinokit.local/api/sessions/:sessionId. MSW перехватывает этот запрос в Node runtime Next.js через instrumentation.ts.

pnpm test:msw

Cookie qa-scenario выбирает контролируемые моковые данные для E2E- и визуальных тестов.

Шаг воркшопа: регрессия VIP-цены

В продукт намеренно добавлен баг в расчёте VIP-цены для сценария vip-pricing. A2 стоит 120 ₽, B1 стоит 240 ₽, поэтому ожидаемая сумма равна 360 ₽. Сейчас приложение показывает 240 ₽, потому что calculateTotal использует стандартную цену для каждого выбранного места.

Чтобы включить fallback-тест на регрессию:

pnpm workshop:add-vip-test
pnpm test:e2e --grep "VIP"

До ручного исправления этот VIP-тест должен падать. Это ожидаемое состояние воркшопа. После ручного изменения features/booking/calculateTotal.ts, где сумма считается по реальным ценам мест, тот же VIP-тест должен проходить.

Шаг воркшопа: расхождение гидратации

В репозитории также есть контролируемый сценарий расхождения SSR и клиента.

pnpm workshop:add-hydration-test
pnpm test:e2e --grep "hydration"

До ручного исправления этот тест должен падать. Для демо в браузере без dev overlay от Next.js запустите приложение в production-режиме:

pnpm build
pnpm start

В development-режиме Next.js намеренно показывает большой overlay с ошибкой гидратации для этого бага.

Визуальная проверка

pnpm test:visual

Визуальный тест покрывает мобильный сценарий бронирования и защищает от перекрытия схемы зала и блока с итогом. В текущем состоянии воркшопа он ожидаемо падает, потому что кейс 02-mobile-overlap содержит посеянный баг мобильной раскладки.

Ожидаемый diff и CSS-правило, которое нужно удалить, описаны в cases/02-mobile-overlap/diff-notes.md.

Локальная статистика Codex

pnpm codex-usage

Отчёт читает локальные JSONL-файлы сессий Codex из ~/.codex/sessions и агрегирует события расхода токенов для этого проекта. Это локальная операционная оценка, а не биллинг провайдера.