[tradein][frontend][infra] Mock-render/MSW для прогона a11y+lighthouse (UI без бэкенда = белый экран) #801

Closed
opened 2026-05-30 17:23:27 +00:00 by bot-backend · 4 comments
Collaborator

Frontend/infra. Разблокирует автоматический UI-аудит (a11y + lighthouse). Выявлено 2026-05-30: новые инструменты (axe/lighthouse) невозможно прогнать — нет отрендеренной контентной страницы без бэкенда (live за auth-gate, dev без API = белый экран).

Зачем

  • Сейчас фронт без бэкенда рендерит пусто (/me+/quota+/estimate 401) → ни локальная разработка, ни CI-аудит «денежного экрана» невозможны.
  • a11y/lighthouse требуют reachable rendered page.

Задача

  1. Mock-render маршрут /__preview/estimate (dev/CI-only) с фикстурой результата оценки → рендерит HeroSummary + таблицы/чарты на статичных данных, без сети.
    • Альтернатива: MSW (mock service worker) стаб /api/v1/me, /quota, /estimate → весь обычный flow работает на моках.
  2. Прогон в CI: axe (mcp a11y / @axe-core/playwright) — контраст/ARIA на HeroSummary и таблицах; lighthouse — CWV (HeroSummary с фото + чартами = кандидат на LCP/CLS).

DoD

  • Есть способ отрендерить «денежный экран» (estimate result) без бэкенда.
  • a11y + lighthouse гоняются по нему (локально + опц. в GHA/Forgejo Actions).
  • Зафиксированы baseline-метрики (a11y score, LCP, CLS) для регрессий.

Followup (после рендера)

Реальный axe/lighthouse прогон → отдельные issue по найденным дефектам (контраст text-xs/text-gray, ARIA, CWV).

Связано

UI-аудит 2026-05-30, #559.

> Frontend/infra. Разблокирует автоматический UI-аудит (a11y + lighthouse). Выявлено 2026-05-30: новые инструменты (axe/lighthouse) невозможно прогнать — нет отрендеренной контентной страницы без бэкенда (live за auth-gate, dev без API = белый экран). ## Зачем - Сейчас фронт без бэкенда рендерит **пусто** (`/me`+`/quota`+`/estimate` 401) → ни локальная разработка, ни CI-аудит «денежного экрана» невозможны. - a11y/lighthouse требуют reachable rendered page. ## Задача 1. **Mock-render маршрут** `/__preview/estimate` (dev/CI-only) с фикстурой результата оценки → рендерит HeroSummary + таблицы/чарты на статичных данных, без сети. - Альтернатива: **MSW** (mock service worker) стаб `/api/v1/me`, `/quota`, `/estimate` → весь обычный flow работает на моках. 2. Прогон в CI: **axe** (`mcp a11y` / `@axe-core/playwright`) — контраст/ARIA на HeroSummary и таблицах; **lighthouse** — CWV (HeroSummary с фото + чартами = кандидат на LCP/CLS). ## DoD - Есть способ отрендерить «денежный экран» (estimate result) без бэкенда. - a11y + lighthouse гоняются по нему (локально + опц. в GHA/Forgejo Actions). - Зафиксированы baseline-метрики (a11y score, LCP, CLS) для регрессий. ## Followup (после рендера) Реальный axe/lighthouse прогон → отдельные issue по найденным дефектам (контраст `text-xs`/`text-gray`, ARIA, CWV). ## Связано UI-аудит 2026-05-30, #559.
bot-backend added the
priority/p3
scope/frontend
tradein
labels 2026-05-30 17:23:27 +00:00
bot-reviewer added the
status/qa
label 2026-05-30 17:37:47 +00:00
Collaborator

QA PASS (enablement-часть) — PR #803 (merged 17:37:40). Verified по merged diff.

DoD #1 — «способ отрендерить денежный экран без бэкенда» доставлено:

  • /ui-preview/estimate (page.tsx) рендерит реальные компоненты результата: HeroSummary + CianValuationCard + DistributionCard + DealsCard + StreetDealsCard + ExposureCard + PriceTrendCard.
  • Собственный QueryClient с засеянным фейковым me (ME_QUERY_KEY → admin/brand:null) → useMe/useBrand резолвятся оффлайн, без /me//quota//brand.
  • Фикстура fixture.ts полная: asking + expected-sold + Avito IMV + ДКП-коридор + cian valuation + price_trend + аналоги/сделки; photo_url=null (чистый оффлайн-рендер, без внешних картинок).
  • Prod-safe: гейт NEXT_PUBLIC_ENABLE_PREVIEW=1 → иначе notFound(); RouteGuard пропускает /ui-preview/* ТОЛЬКО под тем же флагом. На live (gendsgn.ru) маршрут 404 по умолчанию — проверять смоуком там нельзя by design.

🔁 Re-queue → status/ready для оставшихся DoD #2/#3 (требуют реального прогона по отрендеренному маршруту, PR их не делал):

  • #2 — прогнать axe (контраст/ARIA на HeroSummary + таблицах) и lighthouse (CWV: HeroSummary с фото/чартами — кандидат LCP/CLS) по /ui-preview/estimate.
  • #3 — зафиксировать baseline (a11y score, LCP, CLS) для регрессий.
  • followup из тела issue: реальные находки axe/lighthouse → отдельные defect-issue (контраст text-xs/text-gray, ARIA).

NB по исполнению: прогон требует next dev/next start с NEXT_PUBLIC_ENABLE_PREVIEW=1 + a11y/lighthouse MCP — это frontend design-loop окно (см. персональный workflow: a11y+lighthouse MCP в фронт-окнах), а не автономный cron-тик. QA-окно прода эту страницу не видит (prod-gated). Демо Praktika 2026-06-01 — money-screen контраст/ARIA демо-релевантны, стоит прогнать до демо.

✅ **QA PASS (enablement-часть)** — PR #803 (merged 17:37:40). Verified по merged diff. **DoD #1 — «способ отрендерить денежный экран без бэкенда»** — ✅ доставлено: - `/ui-preview/estimate` (`page.tsx`) рендерит реальные компоненты результата: `HeroSummary` + `CianValuationCard` + `DistributionCard` + `DealsCard` + `StreetDealsCard` + `ExposureCard` + `PriceTrendCard`. - Собственный `QueryClient` с засеянным фейковым `me` (`ME_QUERY_KEY` → admin/`brand:null`) → `useMe`/`useBrand` резолвятся **оффлайн**, без `/me`/`/quota`/`/brand`. - Фикстура `fixture.ts` полная: asking + expected-sold + Avito IMV + ДКП-коридор + cian valuation + price_trend + аналоги/сделки; `photo_url=null` (чистый оффлайн-рендер, без внешних картинок). - **Prod-safe**: гейт `NEXT_PUBLIC_ENABLE_PREVIEW=1` → иначе `notFound()`; `RouteGuard` пропускает `/ui-preview/*` ТОЛЬКО под тем же флагом. На live (`gendsgn.ru`) маршрут 404 по умолчанию — проверять смоуком там нельзя by design. ✅ --- 🔁 **Re-queue → `status/ready`** для оставшихся DoD #2/#3 (требуют реального прогона по отрендеренному маршруту, PR их не делал): - **#2** — прогнать **axe** (контраст/ARIA на HeroSummary + таблицах) и **lighthouse** (CWV: HeroSummary с фото/чартами — кандидат LCP/CLS) по `/ui-preview/estimate`. - **#3** — зафиксировать baseline (a11y score, LCP, CLS) для регрессий. - followup из тела issue: реальные находки axe/lighthouse → отдельные defect-issue (контраст `text-xs`/`text-gray`, ARIA). **NB по исполнению:** прогон требует `next dev`/`next start` с `NEXT_PUBLIC_ENABLE_PREVIEW=1` + a11y/lighthouse MCP — это **frontend design-loop окно** (см. персональный workflow: a11y+lighthouse MCP в фронт-окнах), а не автономный cron-тик. QA-окно прода эту страницу не видит (prod-gated). Демо Praktika 2026-06-01 — money-screen контраст/ARIA демо-релевантны, стоит прогнать до демо.
bot-qa added
status/ready
and removed
status/qa
labels 2026-05-30 17:44:10 +00:00
Collaborator

⚠️ analyst marker — requires frontend design-loop window, НЕ headless cron-воркер. DoD#1 (mock-render /ui-preview/estimate) доставлен PR #803. Остаток DoD#2/#3 (axe+lighthouse прогон + baseline a11y/LCP/CLS) требует a11y+lighthouse MCP + next dev NEXT_PUBLIC_ENABLE_PREVIEW=1 — у автономного work-as-frontend cron-тика этих MCP нет, и prod-страница gated (404 на live). Headless-воркеру НЕ клеймить (зависнет). Запускать из design-loop окна; демо-релевантно (Praktika 2026-06-01, money-screen).

⚠️ analyst marker — **requires frontend design-loop window, НЕ headless cron-воркер.** DoD#1 (mock-render `/ui-preview/estimate`) доставлен PR #803. Остаток DoD#2/#3 (axe+lighthouse прогон + baseline a11y/LCP/CLS) требует `a11y`+`lighthouse` MCP + `next dev NEXT_PUBLIC_ENABLE_PREVIEW=1` — у автономного `work-as-frontend` cron-тика этих MCP нет, и prod-страница gated (404 на live). Headless-воркеру НЕ клеймить (зависнет). Запускать из design-loop окна; демо-релевантно (Praktika 2026-06-01, money-screen).
Collaborator

Design-loop verification 2026-05-31 — DoD выполнен (infra работает)

  • Money-screen рендерится оффлайн без бэкенда: /ui-preview/estimate (фикстура fixture.ts, ENABLE_PREVIEW=1, RouteGuard bypass под флагом) → HTTP 200, HeroSummary + таблицы + чарты на статике.
  • axe прогоняется по нему успешно (baseline: 29 passes; выявил реальные дефекты → #834 контраст, #835 ARIA — последний уже чист).
  • lighthouse: на этой Windows-машине mcp-lighthouse падает EPERM на %TEMP%\lighthouse.* (env-проблема рантайма, не приложения) — CWV baseline через mcp-lighthouse не снят. axe-канал полностью рабочий. Для CWV нужен Linux-runner / GHA-job (как и предполагал followup).

Mock-render разблокировал a11y-аудит (что и было целью). DoD по рендеру+axe выполнен; lighthouse-CWV — отдельным шагом на CI-раннере.

## Design-loop verification 2026-05-31 — ✅ DoD выполнен (infra работает) - Money-screen рендерится оффлайн без бэкенда: `/ui-preview/estimate` (фикстура `fixture.ts`, `ENABLE_PREVIEW=1`, RouteGuard bypass под флагом) → HTTP 200, HeroSummary + таблицы + чарты на статике. - **axe** прогоняется по нему успешно (baseline: 29 passes; выявил реальные дефекты → #834 контраст, #835 ARIA — последний уже чист). - **lighthouse**: на этой Windows-машине mcp-lighthouse падает `EPERM` на `%TEMP%\lighthouse.*` (env-проблема рантайма, не приложения) — CWV baseline через mcp-lighthouse не снят. axe-канал полностью рабочий. Для CWV нужен Linux-runner / GHA-job (как и предполагал followup). Mock-render разблокировал a11y-аудит (что и было целью). DoD по рендеру+axe выполнен; lighthouse-CWV — отдельным шагом на CI-раннере.
lekss361 added
status/qa
and removed
status/ready
labels 2026-06-06 18:43:20 +00:00
Owner

Status actualize (06.06): ui-preview маршрут влит в main через PR #837 (commit 068bd8b); /trade-in/ui-preview/estimate доступен для axe-аудита. status/readystatus/qa.

Status actualize (06.06): ui-preview маршрут влит в `main` через PR #837 (commit `068bd8b`); `/trade-in/ui-preview/estimate` доступен для axe-аудита. `status/ready` → `status/qa`.
Sign in to join this conversation.
No milestone
No project
No assignees
5 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: lekss361/gendesign#801
No description provided.