52 lines
3.1 KiB
Markdown
52 lines
3.1 KiB
Markdown
# Frontend Workflow
|
||
|
||
Frontend требует Node 22. В `frontend/` чистая установка и полный локальный quality gate выполняются так:
|
||
|
||
```bash
|
||
nvm use --silent
|
||
npm ci
|
||
npm run verify
|
||
```
|
||
|
||
`verify` проверяет OpenAPI drift, TypeScript, Biome, один coverage-backed запуск Vitest, Knip,
|
||
FSD dependency rules, runtime graph stories и отдельные сборки приложения и
|
||
Storybook. Он работает без backend. Coverage
|
||
остаётся anti-regression constraint; правила выбора тестов зафиксированы в
|
||
[engineering governance](engineering-governance.md).
|
||
|
||
Изолированные примеры реальных компонентов и композиций запускаются в Storybook
|
||
через `npm run dev:catalog`. `npm run build:catalog` создаёт `storybook-static/`,
|
||
а `npm run preview:catalog` обслуживает эту статическую сборку. Структура каталога,
|
||
работа с Docs, Controls и Actions, доступность и ограничения описаны в
|
||
[UI-каталоге Storybook](ui-catalog.md).
|
||
|
||
Для UI задачи используйте каталог как reference существующего решения.
|
||
Ожидаемые экраны, states и interactions определите по [задаче](engineering-governance.md#ui-решения).
|
||
Storybook показывает реализацию; визуальное соответствие и доступность
|
||
проверяются отдельно от сборки. SDD-пакет для этого не обязателен.
|
||
|
||
Backend остаётся источником OpenAPI. После изменения опубликованного
|
||
backend-контракта разработчик обновляет в `frontend/` committed snapshot
|
||
`src/shared/api/spec/openapi.json` копированием backend OpenAPI document, затем
|
||
запускает:
|
||
|
||
```bash
|
||
npm run openapi:generate
|
||
```
|
||
|
||
Команда использует только committed snapshot и регенерирует
|
||
`src/shared/api/generated/schema.d.ts` offline. Проверку соответствия backend
|
||
runtime contract и frontend snapshot выполняют отдельной backend-командой
|
||
`npm run test:openapi-contract`.
|
||
|
||
## Состояние тестового клиента
|
||
|
||
`frontend/src/test/query.tsx` предоставляет `createTestQueryClient` с отключёнными
|
||
test retries и query-only `createQueryWrapper`. Независимый case получает свой
|
||
client до React wrapper render; rerender сохраняет тот же экземпляр и seeded
|
||
cache. Auth и T-Bank tests используют эту же фабрику. Mantine, Router и
|
||
AuthProvider остаются явно выбранными локальными providers.
|
||
|
||
Общий teardown последовательно выполняет RTL cleanup, сброс auth client и
|
||
сброс MSW handlers. Production query defaults этой инфраструктурой не меняются.
|