docs: make project documentation self-contained

This commit is contained in:
2026-09-12 13:09:37 +03:00
parent aa9afc15e4
commit 3a99af1a6e
36 changed files with 1006 additions and 703 deletions
+25 -42
View File
@@ -1,51 +1,34 @@
# Frontend Workflow
# Frontend: ответственность и проверка
Frontend требует Node 22. В `frontend/` чистая установка и полный локальный quality gate выполняются так:
Frontend предоставляет пользовательские экраны, навигацию и представление
финансовых данных. Он получает данные только через публичный API backend;
credentials T-Bank остаются на сервере. Состав приложения и потоки показаны
в [обзоре системы](../architecture/system-overview.md).
```bash
nvm use --silent
npm ci
npm run verify
```
## Совместимость с backend
`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).
Типизированный клиент frontend производится из опубликованного backend
OpenAPI. Согласованность клиента с сохранённым описанием API и согласованность
этого описания с работающим backend проверяются отдельно.
Изменение публичного контракта требует обновления производного клиента;
подробности — [согласованность OpenAPI](runtime-openapi-verification.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-пакет для этого не обязателен.
Локальная проверка frontend охватывает корректность типов, статический анализ,
автоматические сценарии, зависимости и сборку приложения и UI-каталога.
Она может выполняться без запущенного backend. Покрытие тестами ограничивает
регрессии; само по себе число покрытых строк не доказывает правильность
финансового расчёта, доступность или прохождение пользовательского сценария.
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`.
[Каталог](ui-catalog.md) показывает существующие визуальные решения.
Соответствие задаче, широкий и узкий экран, клавиатурная навигация и восстановление
после ошибок проверяются в интерфейсе отдельно от успешной сборки.
## Состояние тестового клиента
`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 этой инфраструктурой не меняются.
Независимые проверки получают изолированное состояние клиента. Обновление
представления внутри одного сценария сохраняет его кэш; следующий сценарий
не наследует сессию и ответы предыдущего. Повторные попытки в тестовой среде
могут быть отключены для предсказуемого результата. Это не меняет
[политику обновления данных приложения](../adr/007-react-query-fetch-policy.md).