Compare commits
50
Commits
c096fc70ef
...
v1.2.1
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
df86b8450f | ||
|
|
b5ceb77208 | ||
|
|
b009101b7b | ||
|
|
7e6fd95cfa | ||
|
|
2cd6b1e72d | ||
|
|
3af9df0ae2 | ||
|
|
7b6f34c776 | ||
|
|
ed811e88fa | ||
|
|
eefdde29f8 | ||
|
|
5134106696 | ||
|
|
ebe92684a7 | ||
|
|
6f1226b668 | ||
|
|
d409a297e5 | ||
|
|
ed63adad94 | ||
|
|
bc28973d1a | ||
|
|
20618fb033 | ||
|
|
612ab62509 | ||
|
|
f295dea6a6 | ||
|
|
f3725c202b | ||
|
|
edc7097bd7 | ||
|
|
233680448f | ||
|
|
e38ecd87d6 | ||
|
|
e5f8bbe33c | ||
|
|
f7f53ff8e4 | ||
|
|
df05c8c7db | ||
|
|
e67c47b102 | ||
|
|
43b0f5574a | ||
|
|
c7d8d2c8f9 | ||
|
|
9d900b331a | ||
|
|
b357743c10 | ||
|
|
0d747cc93e | ||
|
|
c315f80b1b | ||
|
|
617edfd489 | ||
|
|
9ad3245efe | ||
|
|
cac4351bc4 | ||
|
|
17f5bae69b | ||
|
|
c8821200ce | ||
|
|
cec9c6348a | ||
|
|
a84411df39 | ||
|
|
3c226f8c29 | ||
|
|
20b2cdfd43 | ||
|
|
dcd1e3c278 | ||
|
|
432cca299f | ||
|
|
54deae57b3 | ||
|
|
74f8a72ed5 | ||
|
|
fcb938b5a2 | ||
|
|
f873db7b02 | ||
|
|
0ea8d7b62d | ||
|
|
c25f6bd85b | ||
|
|
5b30bb802a |
+8
-6
@@ -8,7 +8,7 @@ Vitest — отдельную JSDOM конфигурацию. Точные versi
|
|||||||
[package.json](../package.json), реализация — source of truth.
|
[package.json](../package.json), реализация — source of truth.
|
||||||
|
|
||||||
```text
|
```text
|
||||||
app → pages → features → entities → shared
|
app → pages → widgets → features → entities → shared
|
||||||
page container → page VM → entity/feature query → shared/api → backend /api/v1
|
page container → page VM → entity/feature query → shared/api → backend /api/v1
|
||||||
↓
|
↓
|
||||||
props → state/section views
|
props → state/section views
|
||||||
@@ -30,13 +30,15 @@ contract; frontend не читает его checkout для генерации
|
|||||||
| --- | --- |
|
| --- | --- |
|
||||||
| Bootstrap, глобальные providers, routes | `app` |
|
| Bootstrap, глобальные providers, routes | `app` |
|
||||||
| Композиция маршрута и поведение, нужное только этому экрану | `pages/<page>` |
|
| Композиция маршрута и поведение, нужное только этому экрану | `pages/<page>` |
|
||||||
|
| Крупная переиспользуемая композиция экрана | `widgets/<widget>` |
|
||||||
| Самостоятельная пользовательская возможность с собственным смыслом | `features/<capability>` |
|
| Самостоятельная пользовательская возможность с собственным смыслом | `features/<capability>` |
|
||||||
| Представление/поведение бизнес-сущности | `entities/<entity>` |
|
| Представление/поведение бизнес-сущности | `entities/<entity>` |
|
||||||
| Переиспользуемый код без WealthLedger domain meaning | `shared` |
|
| Переиспользуемый код без WealthLedger domain meaning | `shared` |
|
||||||
|
|
||||||
Локальный FSD profile: `app → pages → features → entities → shared`, без `widgets`.
|
Локальный FSD profile: `app → pages → widgets → features → entities → shared`.
|
||||||
Крупный уникальный блок остаётся в своей page. Form, mutation или click handler
|
Widget собирает несколько нижних слоёв в самостоятельный UI-блок; компонент для
|
||||||
сами по себе не требуют feature. Два callers не делают domain helper generic shared.
|
одной page остаётся у page. Form, mutation или click handler сами по себе не
|
||||||
|
требуют feature. Два callers не делают domain helper generic shared.
|
||||||
Slice именуется по ответственности, а не `helpers`, `hooks` или `types`.
|
Slice именуется по ответственности, а не `helpers`, `hooks` или `types`.
|
||||||
|
|
||||||
**Безопасный путь:** при сомнении оставь код у ближайшего допустимого owner.
|
**Безопасный путь:** при сомнении оставь код у ближайшего допустимого owner.
|
||||||
@@ -47,12 +49,12 @@ Slice именуется по ответственности, а не `helpers`,
|
|||||||
|
|
||||||
Cross-slice consumer использует `@/` и `index.ts` владельца, например
|
Cross-slice consumer использует `@/` и `index.ts` владельца, например
|
||||||
`@/entities/portfolio`. Alias Vite и TypeScript согласован. Другой slice не
|
`@/entities/portfolio`. Alias Vite и TypeScript согласован. Другой slice не
|
||||||
импортирует внутренний файл напрямую. Slices `pages`, `features`, `entities` не зависят от соседнего slice своего слоя;
|
импортирует внутренний файл напрямую. Slices `pages`, `widgets`, `features`, `entities` не зависят от соседнего slice своего слоя;
|
||||||
композиция принадлежит вышележащему owner. Existing меж-slice исключения
|
композиция принадлежит вышележащему owner. Existing меж-slice исключения
|
||||||
не являются разрешением добавлять новые.
|
не являются разрешением добавлять новые.
|
||||||
|
|
||||||
Направление зависимостей, public imports и запрет соседних slices в
|
Направление зависимостей, public imports и запрет соседних slices в
|
||||||
`pages`, `features`, `entities` проверяет `npm run deps`. Внутренние imports
|
`pages`, `widgets`, `features`, `entities` проверяет `npm run deps`. Внутренние imports
|
||||||
одного slice и связи shared segments этот запрет не ограничивает.
|
одного slice и связи shared segments этот запрет не ограничивает.
|
||||||
Knip проверяет использование exports, а не смысл placement.
|
Knip проверяет использование exports, а не смысл placement.
|
||||||
|
|
||||||
|
|||||||
@@ -30,7 +30,8 @@ backend checkout и не проверяют backend runtime OpenAPI; измен
|
|||||||
shape/status/route сохраняет
|
shape/status/route сохраняет
|
||||||
публичный контракт предоставленного snapshot.
|
публичный контракт предоставленного snapshot.
|
||||||
Одна UI-модель не требует менять API. `openapi:generate` работает offline от snapshot;
|
Одна UI-модель не требует менять API. `openapi:generate` работает offline от snapshot;
|
||||||
`openapi:check` генерирует во временный каталог и сравнивает, не меняя tracked files.
|
`openapi:check` запускает native `--check` того же CLI и падает при устаревших
|
||||||
|
generated types, не меняя tracked files.
|
||||||
|
|
||||||
## Auth и invalidation
|
## Auth и invalidation
|
||||||
|
|
||||||
@@ -39,6 +40,11 @@ Authorization. Auth endpoints исключены из Bearer/retry middleware. R
|
|||||||
координируется single-flight; после `401` с `UNAUTHORIZED` возможен один retry.
|
координируется single-flight; после `401` с `UNAUTHORIZED` возможен один retry.
|
||||||
Не добавляй собственный refresh/retry loop в caller.
|
Не добавляй собственный refresh/retry loop в caller.
|
||||||
|
|
||||||
|
Refresh, завершившийся `401`, очищает session. Сетевая ошибка и `5xx`
|
||||||
|
(например, деплой backend) не доказывают конец session: она сохраняется,
|
||||||
|
`unavailable` показывает retry-экран вместо login, а следующий `401` снова
|
||||||
|
запускает refresh. Retry/backoff внутри refresh не добавляется.
|
||||||
|
|
||||||
Cookie-writing requests упорядочены только в текущей вкладке. Cross-tab auth
|
Cookie-writing requests упорядочены только в текущей вкладке. Cross-tab auth
|
||||||
synchronization не требуется; допустим reload/re-login. Web Locks и отдельные
|
synchronization не требуется; допустим reload/re-login. Web Locks и отдельные
|
||||||
token stores не добавляются.
|
token stores не добавляются.
|
||||||
|
|||||||
@@ -7,11 +7,19 @@
|
|||||||
checkout. Внешний API задаётся предоставленным публичным контрактом;
|
checkout. Внешний API задаётся предоставленным публичным контрактом;
|
||||||
исходники или инструкции его реализации не являются зависимостью разработки.
|
исходники или инструкции его реализации не являются зависимостью разработки.
|
||||||
При нехватке требования сообщи, какое решение не определено, до его реализации.
|
При нехватке требования сообщи, какое решение не определено, до его реализации.
|
||||||
|
При конфликте с общим шаблоном следуй местным правилам и явному запросу
|
||||||
|
пользователя. Выбирай реализацию самостоятельно, но изменение финансовой
|
||||||
|
логики, публичного контракта или утверждённой семантики возвращай владельцу
|
||||||
|
на согласование до зависимой работы.
|
||||||
|
|
||||||
Начни с результата и affected areas. До edits проследи flow/invariants, найди
|
Начни с результата и affected areas. До edits проследи flow/invariants, найди
|
||||||
owner и 1–3 примера. Код показывает механизм; случайный аналог не меняет контракт.
|
owner и 1–3 примера. Код показывает механизм; случайный аналог не меняет контракт.
|
||||||
Работай напрямую; OpenSpec/SDD lifecycle — только по явному запросу.
|
Выбери lightweight или SDD по [Engineering Workflow](https://git.personal.ksv741.ru/WealthLedger/main/src/commit/03b3b59e6ff2ba391f9dfc42a039a96d0d84c1c9/.ai/conventions/engineering-workflow.md);
|
||||||
Перед Node-командами активируй местную `.nvmrc`: `nvm use --silent`.
|
OpenSpec lifecycle начинай после явного решения Change Owner.
|
||||||
|
Перед Node-командами активируй местную `.nvmrc`: если `nvm` не загружен в
|
||||||
|
non-interactive shell, загрузи установленный `$HOME/.nvm/nvm.sh`; затем
|
||||||
|
выполни `nvm use --silent` из frontend. Если `nvm.sh` недоступен, остановись,
|
||||||
|
не используй системный Node.
|
||||||
Сохраняй чужие staged/unstaged/untracked изменения и read-only архивы.
|
Сохраняй чужие staged/unstaged/untracked изменения и read-only архивы.
|
||||||
|
|
||||||
## Change scope
|
## Change scope
|
||||||
@@ -57,21 +65,33 @@ Peer-конфликт решай совместимыми версиями бе
|
|||||||
|
|
||||||
## Проверки и завершение
|
## Проверки и завершение
|
||||||
|
|
||||||
Code/dependency change: `npm ci`, полный `npm run verify` и дополнительные
|
| Когда | Что проверить |
|
||||||
risk checks из местной testing convention. Targeted tests ускоряют итерацию,
|
| --- | --- |
|
||||||
но не заменяют финальный gate. `lint:fix`/format — edits, не proof.
|
| Окружение новое, изменились manifest/lockfile или Node, установка сомнительна | `npm ci` до Node-проверок; одна правка кода переустановки не требует. |
|
||||||
Markdown-only: проверь новые/изменённые тексты, локальные ссылки/якоря, маршруты
|
| Итерация | Адресные тесты, typecheck и lint по затронутому поведению и риску. При изменении поведения добавь/обнови содержательную регрессию, если существующая проверка не ловит её; для косметики не создавай искусственный тест. |
|
||||||
чтения и `git diff --check`; application build ради текста не нужен.
|
| Итоговый code/dependency diff | Перед объявлением готовности и передачей к интеграции выполни один полный `npm run verify` на итоговых входах. Дополнительные risk checks из testing convention и явно утверждённые task checks обязательны; CI проверяет независимо. |
|
||||||
Повтори routing по staged/unstaged/new files. Запиши краткие команды, результаты
|
| Только Markdown | Проверь тексты, ссылки/якоря, маршруты чтения и `git diff --check`; application build не нужен. При изменении verification-контура проверь его работу. |
|
||||||
и ограничения. Зелёный lint не заменяет semantic/security review.
|
| Pre-commit | Hook не скачивает tools: вызывай установленные бинарники из `node_modules/.bin` (не `npx`). Full graph не входит в hook; он выполняется в `npm run verify` и CI. |
|
||||||
|
|
||||||
|
Повтори routing по staged/unstaged/new files. В отчёте по задаче/PR запиши
|
||||||
|
проверенные входы, команду, exit code, результат и ограничения. Повторяй
|
||||||
|
проверку при изменении значимых входов (включая config, dependencies и
|
||||||
|
generated artifacts), сомнении в evidence или явном запросе пользователя.
|
||||||
|
`lint:fix`/format — edits, не proof; lint не заменяет semantic/security review.
|
||||||
|
|
||||||
## Git и релизы
|
## Git и релизы
|
||||||
|
|
||||||
Работа — в `codex/<task>` от актуального `develop`, затем PR в `develop`.
|
Работа — в ветке `<type>/<issue-number>-<slug>` от актуального `develop`,
|
||||||
|
затем PR в `develop`; для cross-repo ссылки укажи owner/repo#number.
|
||||||
Сохраняй чужие изменения; перед commit просмотри staged paths и diff.
|
Сохраняй чужие изменения; перед commit просмотри staged paths и diff.
|
||||||
Commits и PR titles — Conventional Commits; допустим `spec:`. Каждый commit
|
Commits и PR titles — Conventional Commits с parser-recognized Issue reference (`fix: … (#12)`
|
||||||
содержит одну связанную задачу. При связанной issue добавь её номер в конец
|
или `chore: … (WealthLedger/main#27)`); допустим `spec:`. Каждый commit
|
||||||
заголовка (`fix: … #12`); без issue номер не нужен. Root другого checkout
|
содержит одну связанную задачу. Исключения release и правила ссылки — в
|
||||||
не управляет этим repo.
|
Engineering Workflow из AGENTS. Root другого checkout не управляет этим repo.
|
||||||
Прямой push в `main`, force-push и перенос опубликованных тегов не входят в
|
Прямой push в `main`, force-push и перенос опубликованных тегов не входят в
|
||||||
обычную работу. Перед release/hotfix прочитай местный README, раздел «Релизы».
|
обычную работу. PR сливается squash или rebase-merge; merge-коммит не
|
||||||
|
используется. `main` обновляется только fast-forward из `develop`, поэтому
|
||||||
|
`origin/main` всегда предок `origin/develop`:
|
||||||
|
`git merge-base --is-ancestor origin/main origin/develop`. Срочный fix —
|
||||||
|
обычная ветка `fix/*` от `develop`; пути hotfix от `main` нет.
|
||||||
|
Перед релизом прочитай местный README, раздел «Релизы».
|
||||||
|
|||||||
@@ -0,0 +1,12 @@
|
|||||||
|
---
|
||||||
|
name: Bug Report
|
||||||
|
about: Неверное поведение
|
||||||
|
---
|
||||||
|
## Проблема и шаги воспроизведения
|
||||||
|
|
||||||
|
## Факт / ожидание
|
||||||
|
|
||||||
|
## Acceptance Criteria
|
||||||
|
- [ ]
|
||||||
|
|
||||||
|
## Окружение / ссылки (если применимо)
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
---
|
||||||
|
name: Engineering Task
|
||||||
|
about: CI, тесты, документация, процесс и прочее
|
||||||
|
---
|
||||||
|
## Контекст и результат
|
||||||
|
|
||||||
|
## Scope / связанные Issues (если есть)
|
||||||
|
|
||||||
|
## Acceptance Criteria
|
||||||
|
- [ ]
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
---
|
||||||
|
name: Feature Request
|
||||||
|
about: Новое наблюдаемое поведение
|
||||||
|
---
|
||||||
|
## Зачем и какой результат
|
||||||
|
|
||||||
|
## Ожидаемое поведение
|
||||||
|
|
||||||
|
## Acceptance Criteria
|
||||||
|
- [ ]
|
||||||
|
|
||||||
|
## Зависимости / связанные Issues (если есть)
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
---
|
||||||
|
name: Refactoring / Technical Debt
|
||||||
|
about: Улучшение без нового поведения
|
||||||
|
---
|
||||||
|
## Проблема и результат
|
||||||
|
|
||||||
|
## Сохраняемые инварианты / границы
|
||||||
|
|
||||||
|
## Acceptance Criteria
|
||||||
|
- [ ]
|
||||||
|
|
||||||
|
## Зависимости / ссылки (если есть)
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
## Summary
|
||||||
|
|
||||||
|
## Linked Issue
|
||||||
|
Refs
|
||||||
|
|
||||||
|
## Changes
|
||||||
|
|
||||||
|
## Verification
|
||||||
|
- Команда / результат / ограничения:
|
||||||
|
|
||||||
|
## Breaking Changes (если есть)
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
name: Frontend verify
|
||||||
|
|
||||||
|
# Metadata-only: refreshes only the `commits` context after a PR title edit.
|
||||||
|
# Same workflow name keeps the required context; `security` and `verify`
|
||||||
|
# statuses of the head revision stay untouched (no skipped overwrite).
|
||||||
|
on:
|
||||||
|
pull_request:
|
||||||
|
types: [edited]
|
||||||
|
|
||||||
|
concurrency:
|
||||||
|
group: frontend-pr-title-${{ gitea.event.pull_request.number }}
|
||||||
|
cancel-in-progress: true
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
commits:
|
||||||
|
timeout-minutes: 15
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: https://github.com/actions/checkout@v4
|
||||||
|
with:
|
||||||
|
ref: ${{ github.event.pull_request.head.sha }}
|
||||||
|
fetch-depth: 0
|
||||||
|
- uses: https://github.com/actions/setup-node@v4
|
||||||
|
with:
|
||||||
|
node-version-file: .nvmrc
|
||||||
|
- run: npm ci --ignore-scripts
|
||||||
|
- name: Check PR title and commits
|
||||||
|
env:
|
||||||
|
PR_TITLE: ${{ github.event.pull_request.title }}
|
||||||
|
BASE_SHA: ${{ github.event.pull_request.base.sha }}
|
||||||
|
HEAD_SHA: ${{ github.event.pull_request.head.sha }}
|
||||||
|
run: |
|
||||||
|
printf '%s\n' "$PR_TITLE" | npm run commitlint -- --strict
|
||||||
|
npm run commitlint -- --strict --from "$BASE_SHA" --to "$HEAD_SHA"
|
||||||
@@ -4,7 +4,7 @@ on:
|
|||||||
push:
|
push:
|
||||||
branches: [develop, main]
|
branches: [develop, main]
|
||||||
pull_request:
|
pull_request:
|
||||||
types: [opened, synchronize, reopened, edited]
|
types: [opened, synchronize, reopened]
|
||||||
schedule:
|
schedule:
|
||||||
- cron: '17 5 * * *'
|
- cron: '17 5 * * *'
|
||||||
|
|
||||||
@@ -34,7 +34,11 @@ jobs:
|
|||||||
HEAD_SHA: ${{ github.event.pull_request.head.sha }}
|
HEAD_SHA: ${{ github.event.pull_request.head.sha }}
|
||||||
run: |
|
run: |
|
||||||
printf '%s\n' "$PR_TITLE" | npm run commitlint -- --strict
|
printf '%s\n' "$PR_TITLE" | npm run commitlint -- --strict
|
||||||
npm run commitlint -- --strict --from "$BASE_SHA" --to "$HEAD_SHA"
|
if [[ "$PR_TITLE" =~ ^chore\(release\):\ [0-9]+\.[0-9]+\.[0-9]+$ ]]; then
|
||||||
|
npm run commitlint -- --strict --from "$HEAD_SHA^" --to "$HEAD_SHA"
|
||||||
|
else
|
||||||
|
npm run commitlint -- --strict --from "$BASE_SHA" --to "$HEAD_SHA"
|
||||||
|
fi
|
||||||
|
|
||||||
security:
|
security:
|
||||||
needs: commits
|
needs: commits
|
||||||
|
|||||||
+5
-2
@@ -1,3 +1,6 @@
|
|||||||
gitleaks git --pre-commit --staged --redact=100 --no-banner || exit $?
|
gitleaks git --pre-commit --staged --redact=100 --no-banner || exit $?
|
||||||
npx lint-staged
|
if [ ! -x node_modules/.bin/lint-staged ]; then
|
||||||
npm run deps
|
echo "lint-staged is not installed; run npm ci" >&2
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
node_modules/.bin/lint-staged
|
||||||
|
|||||||
@@ -4,6 +4,9 @@
|
|||||||
только его файлы и предоставленные публичные контракты. Перед работой прочитай
|
только его файлы и предоставленные публичные контракты. Перед работой прочитай
|
||||||
[порядок работы](.ai/conventions/engineering.md#граница-и-порядок-работы), затем
|
[порядок работы](.ai/conventions/engineering.md#граница-и-порядок-работы), затем
|
||||||
объединяй triggers задачи и путей; читай активированные темы до решения.
|
объединяй triggers задачи и путей; читай активированные темы до решения.
|
||||||
|
До edits найди/создай подходящую Gitea Issue, проверь AC и ветку; чтение
|
||||||
|
допускается без Issue. Общий маршрут — [Engineering Workflow](https://git.personal.ksv741.ru/WealthLedger/main/src/commit/03b3b59e6ff2ba391f9dfc42a039a96d0d84c1c9/.ai/conventions/engineering-workflow.md)
|
||||||
|
(main#28; после merge — актуальная версия `develop`).
|
||||||
|
|
||||||
| Решение / сигнал | Читать |
|
| Решение / сигнал | Читать |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
|
|||||||
+147
@@ -1,5 +1,152 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
## [1.2.1](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.2.0...v1.2.1) (2026-10-24)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* keep session when refresh fails on network error or 5xx (WealthLedger/frontend[#97](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/97)) ([3af9df0](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/3af9df0ae2f0fb314c276504ef7d50a7472de680))
|
||||||
|
* show snapshot time in browser time zone ([#101](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/101)) ([b009101](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/b009101b7b954e8462672a9da859267ebb71edc4))
|
||||||
|
|
||||||
|
### Maintenance
|
||||||
|
|
||||||
|
* bump Node to 24.22.1 (WealthLedger/backend[#122](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/122)) ([2cd6b1e](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/2cd6b1e72d97117b0c37465aac3d989b0469c1c3))
|
||||||
|
* bump test stack and fix npm audit findings ([#105](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/105)) ([7e6fd95](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/7e6fd95cfaf7d288242fb46ec7091f561e6f3de5))
|
||||||
|
* **deps:** update non-major dependencies [#9](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/9) ([b5ceb77](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/b5ceb77208e35a0e389258f3d3c4b85852980042))
|
||||||
|
* resolve dev dependency audit findings (WealthLedger/frontend[#103](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/103)) ([7b6f34c](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/7b6f34c776fa3517c93b5c3468e3b277aaa6273f))
|
||||||
|
|
||||||
|
## [1.2.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.1.0...v1.2.0) (2026-10-18)
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* unify income payment cards and remove comparisons (WealthLedger/main[#33](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/33)) ([#74](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/74)) ([43b0f55](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/43b0f5574a79e26de0abae35de16d8aa8700f718))
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* align password validation with backend ASCII policy (WealthLedger/backend[#60](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/60)) ([#89](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/89)) ([ebe9268](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/ebe92684a74b4e2617b04ef00d9406b8a0f674ea))
|
||||||
|
* **auth,bank:** guard switch-auth nav and surface banking retry ([e38ecd8](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/e38ecd87d6f69968bb56e6035ceeb6cfda208a3f)), closes [#56](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/56) [#57](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/57)
|
||||||
|
* **bank:** break BankFeedback's shared/api edge for stories ([#80](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/80)) ([2336804](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/233680448f97dc3ec57d7665ec14c68ac92410e5))
|
||||||
|
* deliver screener OpenAPI constraints (WealthLedger/backend[#70](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/70)) ([#85](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/85)) ([ed63ada](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/ed63adad94f5d0e20f7d0d1446a235f953d10ec2))
|
||||||
|
* **events:** seven-date default period and picker from today (WealthLedger/frontend[#63](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/63)) ([612ab62](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/612ab6250979bf8d9b57f4feb6e1476ed3d759e4))
|
||||||
|
* respect query eligibility in screen sync (WealthLedger/frontend[#54](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/54)) ([f295dea](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/f295dea6a6a33c597c753b52aff629d5382c963a))
|
||||||
|
|
||||||
|
### Refactoring
|
||||||
|
|
||||||
|
* derive payment-system options from schema tuple ([#58](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/58)) ([#75](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/75)) ([e67c47b](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/e67c47b102329877eb5d9c9d8bb4ea7c0bc70883))
|
||||||
|
|
||||||
|
### Build
|
||||||
|
|
||||||
|
* use native openapi-typescript --check ([#60](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/60)) ([#77](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/77)) ([df05c8c](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/df05c8c7dbb5d6816fb95d54ca43cd0d83eecd48))
|
||||||
|
|
||||||
|
### CI
|
||||||
|
|
||||||
|
* keep pre-commit proportionate and avoid tool downloads (WealthLedger/frontend[#62](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/62)) ([#86](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/86)) ([d409a29](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/d409a297e5f9ae5658d4efa958bda9a012a859a1))
|
||||||
|
* recheck PR title on edited without the full pipeline (WealthLedger/frontend[#64](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/64)) ([bc28973](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/bc28973d1ad5e15bfbc2e5b73b00ba63449933db))
|
||||||
|
|
||||||
|
### Tests
|
||||||
|
|
||||||
|
* await client settlement in late-response cases (WealthLedger/frontend[#61](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/61)) ([#81](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/81)) ([f3725c2](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/f3725c202bd8cef4ba711085df82a921a2da6b7d))
|
||||||
|
* cover non-retry of INVALID_TBANK_TOKEN reads (WealthLedger/backend[#59](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/59)) ([#90](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/90)) ([5134106](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/513410669680480a1f68f5720744cc85e43c8286))
|
||||||
|
* cover null events and income envelopes on account pages ([#72](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/72)) ([#79](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/79)) ([e5f8bbe](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/e5f8bbe33cd438f432281818c5276abe9a425646))
|
||||||
|
* cover null resource envelopes for account pages ([#70](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/70)) ([#71](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/71)) ([#78](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/78)) ([f7f53ff](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/f7f53ff8e4de3c1d06fac6063974ff9667145ed6))
|
||||||
|
|
||||||
|
### Maintenance
|
||||||
|
|
||||||
|
* adopt linear git model in frontend docs ([#91](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/91)) ([eefdde2](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/eefdde29f8da269581e90bd797078e10a39e472f))
|
||||||
|
|
||||||
|
## [1.1.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.0.0...v1.1.0) (2026-10-12)
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* add stock screener ([a84411d](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/a84411df39dc131290e9f5b5d9313fed17cc629a))
|
||||||
|
* align investment client with hourly sync ([432cca2](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/432cca299f3a9a9e45b2697527369ee95f2d0adc))
|
||||||
|
* render hourly investment states ([3c226f8](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/3c226f8c29efceccb75af0d6424639a757534f39))
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* align frontend workflow rules (WealthLedger/main[#27](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/27)) ([c315f80](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/c315f80b1b07ae0888366512ec157b8e29c81d62))
|
||||||
|
* preserve latest stock screener result ([cec9c63](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/cec9c6348a389f16f272dac5533aebc9d12ceae8))
|
||||||
|
* show bank summary totals ([20b2cdf](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/20b2cdfd432f8b01e447f68657cf5c685a297f1e))
|
||||||
|
|
||||||
|
### Documentation
|
||||||
|
|
||||||
|
* clarify frontend verification policy ([cac4351](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/cac4351bc4abf2cec7c5b6611a74d87bf4ec2f70))
|
||||||
|
* pin frontend workflow reference (WealthLedger/main[#27](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/27)) ([0d747cc](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/0d747cc93ee08c337cf300c0367612708f45dfb9))
|
||||||
|
|
||||||
|
### CI
|
||||||
|
|
||||||
|
* skip checks on PR metadata edits ([c882120](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/c8821200ce699dab1ce65360d1968d5877a2e78b))
|
||||||
|
|
||||||
|
### Maintenance
|
||||||
|
|
||||||
|
* align frontend engineering workflow (WealthLedger/main[#27](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/27)) ([617edfd](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/617edfd489a6a84bb33b57386eca4eb54661f4f0))
|
||||||
|
|
||||||
|
## [1.0.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v0.4.0...v1.0.0) (2026-10-07)
|
||||||
|
|
||||||
|
### ⚠ BREAKING CHANGES
|
||||||
|
|
||||||
|
* drop investment stateVersion/progress/resources
|
||||||
|
from the client contract and use data/metadata readiness instead of
|
||||||
|
rewritten query status. Cross-tab auth may require re-login.
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* add quiet reading with rare confirmations ([5b30bb8](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/5b30bb802a4ec43c036066f9a7e178f37e747a0b))
|
||||||
|
* default journal period to last 7 days ([0ea8d7b](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/0ea8d7b62d50a4b7c92e9a9934aead6246ac97f9))
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* **deps:** remove npm dependency on Nexus ([c096fc7](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/c096fc70ef442474c9b7766fdf5772b645166b92))
|
||||||
|
* **deps:** resolve npm audit advisories ([f873db7](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/f873db7b027b6dee0c7382b4bd3df5198c7a4198))
|
||||||
|
* **deps:** resolve npm audit advisories ([10baefd](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/10baefda790e7fb491c893724ddc4da7992103f0))
|
||||||
|
* resolve frontend audit findings ([f6db28d](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/f6db28defa51bd9d8fe932ceae4c3c720aba7eb3))
|
||||||
|
* sort stock and bond events by payment date ([f5f4447](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/f5f4447d60661aa92c80b50a16e8cb194dfa161f))
|
||||||
|
|
||||||
|
### Performance
|
||||||
|
|
||||||
|
* **tbank-connection:** poll screen sync every five seconds ([74f8a72](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/74f8a72ed55af2348fa3668f57312f4fdfc1e8a8)), references [WealthLedger/specs#21](https://git.personal.ksv741.ru/WealthLedger/specs/issues/21)
|
||||||
|
|
||||||
|
### Refactoring
|
||||||
|
|
||||||
|
* address frontend review feedback ([a4046db](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/a4046dbe87bd7dc949df32da3b6aaf174e6f5e8f))
|
||||||
|
* clarify frontend model ownership ([0865b35](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/0865b35f93865b4052181d918cee80c995312930))
|
||||||
|
* clarify frontend module ownership ([f9f0f69](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/f9f0f6921e86f6c81510373c680b136e4580f386))
|
||||||
|
* encapsulate instrument chart data ([64fe902](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/64fe902192b60a72440635f5610ebe02cf8543f8))
|
||||||
|
* enforce enum machine codes [#18](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/18) ([5b69003](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/5b6900351612b6ba34c694fc99612733e7901c79))
|
||||||
|
* enforce frontend view model boundaries ([ca0ad4f](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/ca0ad4f824a47fa47e32d4717e27b15c8a985f7d))
|
||||||
|
* move PortfolioStructure to widgets layer ([c25f6bd](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/c25f6bd85b88c4c7acb2f5ae6fc013aec77005b2))
|
||||||
|
* remove redundant page view models ([fb3a5a6](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/fb3a5a6eaa0223a15ea2c9f585a06459371f0a25))
|
||||||
|
* share instrument search presentation ([32a7786](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/32a77860c8eaea4a59a26e55b2d66976fd8f9484))
|
||||||
|
* share source sync status presentation ([0bc8bc3](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/0bc8bc36b7263b7f0120a08df840b290b40d8116))
|
||||||
|
* simplify auth and instrument pages ([b404c18](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/b404c1802a74f5f369173fdfcb086a3d5760e35a))
|
||||||
|
* simplify calendar and form state ([94adbaf](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/94adbafa344b23d7f95c31db975d99d990bfcb8b))
|
||||||
|
* simplify errors and focus tests ([7e976c3](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/7e976c330c54715018eda4bff0764c5d4de9c8b0))
|
||||||
|
* simplify finance view models ([2844b22](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/2844b22dbace41a02c1b5a07b3801e84c66b3528))
|
||||||
|
* simplify frontend state and mutation boundaries ([a7537da](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/a7537da34452ab1a15138ab0c1cd93d53d06c517))
|
||||||
|
* simplify query and session ownership ([6999707](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/69997075e569da3edd43e242ef36f09311262412))
|
||||||
|
* simplify resource queries and layout tests ([c1b0873](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/c1b08735e3a45d565c3836ae37ad76186bf48f26))
|
||||||
|
* tighten types and reuse instrument UI ([7c28a42](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/7c28a423dd8a3cc4a5bdcb49b8de7018979df413))
|
||||||
|
* unify bank form types and actions ([ff67a76](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/ff67a768addc0c4ba55247f5e2d9d5d5d5aec734))
|
||||||
|
|
||||||
|
### CI
|
||||||
|
|
||||||
|
* reduce duplicate actions and serialize checks ([95fdc87](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/95fdc8759e20f9baa4ac3d00e703752c79010e01))
|
||||||
|
|
||||||
|
### Tests
|
||||||
|
|
||||||
|
* remove redundant frontend checks ([320ea59](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/320ea5922a70ab81ce4f05c3c90eb7b6a664fa39))
|
||||||
|
|
||||||
|
### Styles
|
||||||
|
|
||||||
|
* pin ternary operator formatting [#18](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/18) ([12c3b72](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/12c3b72bfb32dff5f1ffdb36519c90f7ea852488))
|
||||||
|
|
||||||
|
### Maintenance
|
||||||
|
|
||||||
|
* add typed ESLint checks [#18](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/18) ([5763010](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/57630102e4bcc6b555dd546ba373a14a88256eed))
|
||||||
|
* finish frontend ESLint migration [#18](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/18) ([72d7835](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/72d7835227340e349d99f57db134a635f276f6e9))
|
||||||
|
* guard presentation data boundaries ([6a89b08](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/6a89b08ee571562fea349801169c40f1f993e9b9))
|
||||||
|
* guard unsafe DOM HTML with ESLint [#18](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/18) ([061ec70](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/061ec708c651029cd7d61d22319d11e7ac9f074e))
|
||||||
|
* remove unused exports ([fcb938b](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/fcb938b5a29fc82f00bbaa8b2ee776ca57dad010))
|
||||||
|
|
||||||
## [0.4.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v0.3.0...v0.4.0) (2026-09-26)
|
## [0.4.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v0.3.0...v0.4.0) (2026-09-26)
|
||||||
|
|
||||||
### Features
|
### Features
|
||||||
|
|||||||
+2
-2
@@ -1,4 +1,4 @@
|
|||||||
FROM node:24.21.0-bookworm-slim AS dependencies
|
FROM node:24.22.1-bookworm-slim AS dependencies
|
||||||
WORKDIR /app
|
WORKDIR /app
|
||||||
ENV HUSKY=0
|
ENV HUSKY=0
|
||||||
COPY package.json package-lock.json ./
|
COPY package.json package-lock.json ./
|
||||||
@@ -19,7 +19,7 @@ COPY . .
|
|||||||
ENV VITE_API_BASE_URL=""
|
ENV VITE_API_BASE_URL=""
|
||||||
RUN npm run build
|
RUN npm run build
|
||||||
|
|
||||||
FROM nginx:1.28.0-alpine AS production
|
FROM nginx:1.31.8-alpine AS production
|
||||||
ARG VERSION
|
ARG VERSION
|
||||||
ARG REVISION
|
ARG REVISION
|
||||||
LABEL org.opencontainers.image.version=$VERSION \
|
LABEL org.opencontainers.image.version=$VERSION \
|
||||||
|
|||||||
@@ -19,8 +19,10 @@ npm run dev
|
|||||||
|
|
||||||
Для commits установите [Gitleaks](https://github.com/gitleaks/gitleaks/releases/tag/v8.30.1)
|
Для commits установите [Gitleaks](https://github.com/gitleaks/gitleaks/releases/tag/v8.30.1)
|
||||||
8.30.1 в `PATH` (macOS: `brew install gitleaks`). Pre-commit сначала проверяет
|
8.30.1 в `PATH` (macOS: `brew install gitleaks`). Pre-commit сначала проверяет
|
||||||
staged diff с полной редакцией секретов, затем запускает formatting и FSD checks.
|
staged diff с полной редакцией секретов, затем запускает установленный
|
||||||
Находка или отсутствие Gitleaks блокирует commit.
|
`node_modules/.bin/lint-staged` только для staged JS/TS. Hook не скачивает tools и
|
||||||
|
не запускает full graph: полный `npm run verify` выполняется в CI и перед передачей.
|
||||||
|
Находка или отсутствие Gitleaks либо lint-staged блокирует commit.
|
||||||
Проверка этого поведения: `node --test scripts/test-pre-commit.mjs`.
|
Проверка этого поведения: `node --test scripts/test-pre-commit.mjs`.
|
||||||
|
|
||||||
## Контейнерный image
|
## Контейнерный image
|
||||||
@@ -116,7 +118,8 @@ Chromium при ширинах 375 и 1280 px. Browser project не исполь
|
|||||||
Единый `.gitea/workflows/verify.yml` запускает `commits → security → verify`
|
Единый `.gitea/workflows/verify.yml` запускает `commits → security → verify`
|
||||||
последовательно на PR; на push в `develop`/`main` — `security → verify`.
|
последовательно на PR; на push в `develop`/`main` — `security → verify`.
|
||||||
Рабочие ветки проверяются после открытия PR, без дублирующего push-запуска.
|
Рабочие ветки проверяются после открытия PR, без дублирующего push-запуска.
|
||||||
Изменение заголовка PR тоже повторяет проверки Conventional Commits.
|
Изменение заголовка PR запускает `.gitea/workflows/pr-title.yml` (то же имя workflow,
|
||||||
|
только job `commits`): статусы `security` и `verify` на HEAD не перезаписываются.
|
||||||
Новый запуск отменяет устаревший для того же PR/ветки и типа события
|
Новый запуск отменяет устаревший для того же PR/ветки и типа события
|
||||||
(требуется Gitea 1.26+). Ежедневно в 05:17 UTC выполняется только `security`.
|
(требуется Gitea 1.26+). Ежедневно в 05:17 UTC выполняется только `security`.
|
||||||
Job `security` проверяет полную доступную историю Gitleaks 8.30.1 и выполняет
|
Job `security` проверяет полную доступную историю Gitleaks 8.30.1 и выполняет
|
||||||
@@ -203,7 +206,8 @@ Checkout frontend содержит все входы сборки и прове
|
|||||||
локальную копию и не обращаются к исходникам или CI сервера. Доставка новой
|
локальную копию и не обращаются к исходникам или CI сервера. Доставка новой
|
||||||
схемы — явное обновление snapshot с review и `npm run openapi:generate`.
|
схемы — явное обновление snapshot с review и `npm run openapi:generate`.
|
||||||
Runtime URL API задаётся окружением, а не расположением другого репозитория.
|
Runtime URL API задаётся окружением, а не расположением другого репозитория.
|
||||||
Разработка идёт напрямую по задаче пользователя; OpenSpec/SDD — по явному запросу.
|
Разработка начинается с Issue; lightweight или SDD выбирается по критериям
|
||||||
|
Engineering Workflow из AGENTS. OpenSpec — после явного решения Change Owner.
|
||||||
|
|
||||||
Knip исключает `conventional-changelog-conventionalcommits`: release-it загружает
|
Knip исключает `conventional-changelog-conventionalcommits`: release-it загружает
|
||||||
preset по имени из `.release-it.json`. Версия preset закреплена напрямую.
|
preset по имени из `.release-it.json`. Версия preset закреплена напрямую.
|
||||||
@@ -211,36 +215,61 @@ preset по имени из `.release-it.json`. Версия preset закреп
|
|||||||
## Релизы
|
## Релизы
|
||||||
|
|
||||||
Репозиторий выпускается независимо. `develop` — интеграция, `main` — принятые
|
Репозиторий выпускается независимо. `develop` — интеграция, `main` — принятые
|
||||||
релизы. Работа: `codex/<task>` от актуального `develop`, PR в `develop`.
|
релизы. Обычная работа: issue-linked ветка от актуального `develop`, PR в `develop`;
|
||||||
Обычные PR допускают squash; release и обратная синхронизация сохраняют историю.
|
общие правила — в Engineering Workflow по ссылке из AGENTS.
|
||||||
Commits и PR titles — Conventional Commits, включая `spec:`. Версии вручную не повышай.
|
PR сливается squash или rebase-merge; merge-коммит не используется. `main`
|
||||||
|
обновляется только fast-forward из `develop`, поэтому история линейна:
|
||||||
|
|
||||||
1. Получи `main`, `develop` и теги: `git fetch origin --tags`. Убедись, что
|
```text
|
||||||
`develop` содержит последний релиз. Создай `release/<name>` от проверенного
|
<type>/<issue>-<slug> --squash--> develop --ff-only--> main --> tag vX.Y.Z
|
||||||
`develop`; `nvm use --silent`, `npm ci`. Hotfix начинается от `main` в
|
```
|
||||||
`release/hotfix-<name>` и проходит тот же процесс.
|
|
||||||
|
Инвариант: `origin/main` всегда предок `origin/develop`. Проверка:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git fetch -q origin
|
||||||
|
git merge-base --is-ancestor origin/main origin/develop && echo ok || echo BROKEN
|
||||||
|
```
|
||||||
|
|
||||||
|
Commits и PR titles — Conventional Commits со ссылкой на Issue (кроме release),
|
||||||
|
включая `spec:`. Версии вручную не повышай.
|
||||||
|
|
||||||
|
1. Получи `main`, `develop` и теги: `git fetch origin --tags`. Проверь
|
||||||
|
инвариант. Создай `release/X.Y.Z` от проверенного `develop`;
|
||||||
|
`nvm use --silent`, `npm ci`.
|
||||||
2. На чистой ветке выполни `npm run release:preview`, просмотри версию/changelog,
|
2. На чистой ветке выполни `npm run release:preview`, просмотри версию/changelog,
|
||||||
затем `npm run release:prepare`. Команда создаёт `chore(release): X.Y.Z`,
|
затем `npm run release:prepare`. Команда создаёт `chore(release): X.Y.Z`,
|
||||||
обновляет manifest/lockfile/CHANGELOG; тег и push не выполняет. Не обходи
|
обновляет manifest/lockfile/CHANGELOG; тег и push не выполняет. Не обходи
|
||||||
guards ветки, чистого дерева, отсутствующих тегов или уже подготовленной версии.
|
guards ветки, чистого дерева, отсутствующих тегов или уже подготовленной версии.
|
||||||
3. Проверь diff и штатные gates этого репозитория. Отправь только release-ветку,
|
3. Проверь diff и штатные gates этого репозитория. Отправь только release-ветку,
|
||||||
открой PR в `main` с заголовком `chore(release): X.Y.Z`. После зелёных
|
открой PR в **`develop`** с заголовком `chore(release): X.Y.Z`. После зелёных
|
||||||
`verify`, `security`, `commits` выполни fast-forward-only merge. Если `main`
|
`verify`, `security`, `commits` выполни fast-forward-only merge. Если
|
||||||
изменился, согласуй историю и повтори проверки кандидата.
|
`develop` изменился, обнови release-ветку и повтори проверки кандидата.
|
||||||
4. Получи удалённый `main`, сравни его HEAD с проверенным release SHA и версией
|
4. Открой PR `develop → main` с тем же заголовком и слей fast-forward-only.
|
||||||
|
5. Получи удалённый `main`, сравни его HEAD с проверенным release SHA и версией
|
||||||
manifest/lockfile. Создай аннотированный `vX.Y.Z` именно на этом SHA:
|
manifest/lockfile. Создай аннотированный `vX.Y.Z` именно на этом SHA:
|
||||||
`git tag -a vX.Y.Z <release-sha> -m "Release X.Y.Z"`, затем отправь только
|
`git tag -a vX.Y.Z <release-sha> -m "Release X.Y.Z"`, затем отправь только
|
||||||
`git push origin refs/tags/vX.Y.Z`. Не запускай release-it повторно на `main`.
|
`git push origin refs/tags/vX.Y.Z`. Не запускай release-it повторно на `main`.
|
||||||
5. Верни release-коммит через PR `main → develop` без squash/rebase; проверь,
|
|
||||||
что `develop` содержит тег. Опубликованные теги не перемещай. При сбое после
|
Обратная синхронизация не нужна: release-коммит попал в `develop` на шаге 3.
|
||||||
merge создай отсутствующий тег без нового bump; до merge исправь и проверь
|
Опубликованные теги не перемещай. При сбое после merge создай отсутствующий тег
|
||||||
существующий кандидат без повторного повышения версии.
|
без нового bump; до merge исправь и проверь существующий кандидат без
|
||||||
|
повторного повышения версии.
|
||||||
|
|
||||||
|
Freeze релиза не поддерживается: пока открыт релизный PR, `develop` не двигают.
|
||||||
|
Срочный fix — обычная ветка `fix/*` от `develop` с последующим релизом;
|
||||||
|
пути от `main` нет, он сделал бы `main` не-предком `develop`. Исключение
|
||||||
|
требует явного решения: `release/hotfix-<name>` от `main`, PR в `main`, тег,
|
||||||
|
затем merge `main → develop` для восстановления инварианта.
|
||||||
|
|
||||||
`feat:` повышает minor, `fix:`/`perf:` и прочие разрешённые типы — patch;
|
`feat:` повышает minor, `fix:`/`perf:` и прочие разрешённые типы — patch;
|
||||||
`!`/`BREAKING CHANGE:` — major, включая версии до 1.0. `chore(release):`
|
`!`/`BREAKING CHANGE:` — major, включая версии до 1.0. `chore(release):`
|
||||||
исключён из рекомендации и changelog. Конфигурация — `.release-it.json`.
|
исключён из рекомендации и changelog. Конфигурация — `.release-it.json`.
|
||||||
В Gitea для `main`/`develop` должны быть запрещены прямой/force push и обход
|
В Gitea для `main`/`develop` должны быть запрещены прямой/force push и обход
|
||||||
администратором, обязательны `verify`, `security`, `commits`; теги `v*` защищены.
|
администратором, включена блокировка устаревшей ветки, обязательны `verify`,
|
||||||
|
`security`, `commits`; теги `v*` защищены. Линейность обеспечивают merge styles
|
||||||
|
репозитория: merge-коммиты и rebase `--no-ff` выключены, доступны squash,
|
||||||
|
rebase-merge и fast-forward-only; стиль по умолчанию — squash.
|
||||||
Workflow сам не включает эти настройки. Отдельное review approval для одного
|
Workflow сам не включает эти настройки. Отдельное review approval для одного
|
||||||
владельца не требуется. Npm publishing, deploy и Gitea Releases не включены.
|
владельца не требуется. Npm publishing, deploy и Gitea Releases не включены.
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,12 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
|
defaultIgnores: false,
|
||||||
extends: ["@commitlint/config-conventional"],
|
extends: ["@commitlint/config-conventional"],
|
||||||
|
ignores: [
|
||||||
|
message => /^chore\(release\): \d+\.\d+\.\d+$/.test(message.trim()),
|
||||||
|
message => /^Merge pull request ['"].+['"] \(#\d+\) from .+ into .+$/.test(message.trim()),
|
||||||
|
],
|
||||||
rules: {
|
rules: {
|
||||||
|
"references-empty": [2, "never"],
|
||||||
"type-enum": [
|
"type-enum": [
|
||||||
2,
|
2,
|
||||||
"always",
|
"always",
|
||||||
|
|||||||
+11
-5
@@ -29,17 +29,17 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
from: {
|
from: {
|
||||||
path: "^src/(app|pages|features|entities|shared)/([^/]+)/",
|
path: "^src/(app|pages|widgets|features|entities|shared)/([^/]+)/",
|
||||||
},
|
},
|
||||||
name: "slices-must-use-public-api",
|
name: "slices-must-use-public-api",
|
||||||
severity: "error",
|
severity: "error",
|
||||||
to: {
|
to: {
|
||||||
path: String.raw`^src/(app|pages|features|entities|shared)/([^/]+)/(?!index\.ts$)`,
|
path: String.raw`^src/(app|pages|widgets|features|entities|shared)/([^/]+)/(?!index\.ts$)`,
|
||||||
pathNot: "^src/$1/$2/",
|
pathNot: "^src/$1/$2/",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
from: { path: "^src/(pages|features|entities)/([^/]+)/" },
|
from: { path: "^src/(pages|widgets|features|entities)/([^/]+)/" },
|
||||||
name: "no-same-layer-cross-slice-imports",
|
name: "no-same-layer-cross-slice-imports",
|
||||||
severity: "error",
|
severity: "error",
|
||||||
to: { path: "^src/$1/", pathNot: "^src/$1/$2/" },
|
to: { path: "^src/$1/", pathNot: "^src/$1/$2/" },
|
||||||
@@ -48,18 +48,24 @@ module.exports = {
|
|||||||
from: { path: "^src/shared/" },
|
from: { path: "^src/shared/" },
|
||||||
name: "shared-must-not-depend-on-layers",
|
name: "shared-must-not-depend-on-layers",
|
||||||
severity: "error",
|
severity: "error",
|
||||||
to: { path: "^src/(entities|features|pages|app)/" },
|
to: { path: "^src/(entities|features|widgets|pages|app)/" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
from: { path: "^src/entities/" },
|
from: { path: "^src/entities/" },
|
||||||
name: "entities-must-not-depend-on-higher-layers",
|
name: "entities-must-not-depend-on-higher-layers",
|
||||||
severity: "error",
|
severity: "error",
|
||||||
to: { path: "^src/(features|pages|app)/" },
|
to: { path: "^src/(features|widgets|pages|app)/" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
from: { path: "^src/features/" },
|
from: { path: "^src/features/" },
|
||||||
name: "features-must-not-depend-on-higher-layers",
|
name: "features-must-not-depend-on-higher-layers",
|
||||||
severity: "error",
|
severity: "error",
|
||||||
|
to: { path: "^src/(widgets|pages|app)/" },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
from: { path: "^src/widgets/" },
|
||||||
|
name: "widgets-must-not-depend-on-higher-layers",
|
||||||
|
severity: "error",
|
||||||
to: { path: "^src/(pages|app)/" },
|
to: { path: "^src/(pages|app)/" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Generated
+1327
-1287
File diff suppressed because it is too large
Load Diff
+56
-50
@@ -1,10 +1,10 @@
|
|||||||
{
|
{
|
||||||
"name": "wealth-ledger-frontend",
|
"name": "wealth-ledger-frontend",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.4.0",
|
"version": "1.2.1",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": "24.21.0"
|
"node": "24.22.1"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "npm run build:packages && vite",
|
"dev": "npm run build:packages && vite",
|
||||||
@@ -20,7 +20,7 @@
|
|||||||
"test:coverage": "npm run build:packages && vitest run --coverage",
|
"test:coverage": "npm run build:packages && vitest run --coverage",
|
||||||
"test:lint": "node --test scripts/test-eslint.mjs",
|
"test:lint": "node --test scripts/test-eslint.mjs",
|
||||||
"openapi:generate": "openapi-typescript src/shared/api/spec/openapi.json -o src/shared/api/generated/schema.d.ts",
|
"openapi:generate": "openapi-typescript src/shared/api/spec/openapi.json -o src/shared/api/generated/schema.d.ts",
|
||||||
"openapi:check": "node scripts/check-openapi.mjs",
|
"openapi:check": "openapi-typescript src/shared/api/spec/openapi.json -o src/shared/api/generated/schema.d.ts --check",
|
||||||
"knip": "npm run build:packages && knip",
|
"knip": "npm run build:packages && knip",
|
||||||
"deps": "npm run build:packages && depcruise src packages --config dependency-cruiser.cjs --output-type err-long",
|
"deps": "npm run build:packages && depcruise src packages --config dependency-cruiser.cjs --output-type err-long",
|
||||||
"verify": "npm run build:packages && npm run openapi:check && tsc -b --noEmit && eslint . --max-warnings=0 && npm run test:lint && vitest run --coverage && knip && depcruise src packages --config dependency-cruiser.cjs --output-type err-long && depcruise src packages .storybook/preview.tsx --config .storybook/dependency-cruiser.cjs --output-type err-long && tsc -b && vite build && storybook build --output-dir storybook-static --disable-telemetry",
|
"verify": "npm run build:packages && npm run openapi:check && tsc -b --noEmit && eslint . --max-warnings=0 && npm run test:lint && vitest run --coverage && knip && depcruise src packages --config dependency-cruiser.cjs --output-type err-long && depcruise src packages .storybook/preview.tsx --config .storybook/dependency-cruiser.cjs --output-type err-long && tsc -b && vite build && storybook build --output-dir storybook-static --disable-telemetry",
|
||||||
@@ -37,88 +37,94 @@
|
|||||||
"*.{js,mjs,cjs,ts,tsx}": "eslint --fix --max-warnings=0 --no-warn-ignored"
|
"*.{js,mjs,cjs,ts,tsx}": "eslint --fix --max-warnings=0 --no-warn-ignored"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@hookform/resolvers": "5.9.1",
|
"@hookform/resolvers": "5.9.2",
|
||||||
"@mantine/charts": "9.6.1",
|
"@mantine/charts": "9.7.3",
|
||||||
"@mantine/core": "9.6.1",
|
"@mantine/core": "9.7.3",
|
||||||
"@mantine/dates": "9.6.1",
|
"@mantine/dates": "9.7.3",
|
||||||
"@mantine/hooks": "9.6.1",
|
"@mantine/hooks": "9.7.3",
|
||||||
"@tanstack/react-query": "5.102.8",
|
"@mantine/notifications": "9.7.3",
|
||||||
|
"@tanstack/react-query": "5.104.5",
|
||||||
"@wealthledger/icons": "file:packages/icons",
|
"@wealthledger/icons": "file:packages/icons",
|
||||||
"@wealthledger/tokens": "file:packages/tokens",
|
"@wealthledger/tokens": "file:packages/tokens",
|
||||||
"@wealthledger/ui": "file:packages/ui",
|
"@wealthledger/ui": "file:packages/ui",
|
||||||
"dayjs": "1.11.23",
|
"dayjs": "1.11.23",
|
||||||
"i18next": "26.4.2",
|
"i18next": "26.5.10",
|
||||||
"motion": "13.2.0",
|
"motion": "13.5.1",
|
||||||
"openapi-fetch": "0.17.0",
|
"openapi-fetch": "0.17.0",
|
||||||
"openapi-react-query": "0.5.4",
|
"openapi-react-query": "0.5.4",
|
||||||
"react": "19.3.0",
|
"react": "19.3.1",
|
||||||
"react-dom": "19.3.0",
|
"react-dom": "19.3.1",
|
||||||
"react-hook-form": "7.88.0",
|
"react-hook-form": "7.91.0",
|
||||||
"react-i18next": "17.0.14",
|
"react-i18next": "17.1.8",
|
||||||
"react-is": "19.3.0",
|
"react-is": "19.3.1",
|
||||||
"react-router": "8.3.1",
|
"react-router": "8.5.0",
|
||||||
"recharts": "3.10.1",
|
"recharts": "3.10.1",
|
||||||
"zod": "4.6.4"
|
"zod": "4.6.7"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "8.0.5",
|
"@babel/core": "8.0.9",
|
||||||
"@commitlint/cli": "21.2.2",
|
"@commitlint/cli": "21.2.4",
|
||||||
"@commitlint/config-conventional": "21.2.2",
|
"@commitlint/config-conventional": "21.2.4",
|
||||||
"@eslint-react/eslint-plugin": "5.21.0",
|
"@eslint-react/eslint-plugin": "5.28.8",
|
||||||
"@eslint/js": "10.0.1",
|
"@eslint/js": "10.0.1",
|
||||||
"@release-it/conventional-changelog": "12.0.0",
|
"@release-it/conventional-changelog": "12.0.2",
|
||||||
"@rolldown/plugin-babel": "0.2.4",
|
"@rolldown/plugin-babel": "0.2.4",
|
||||||
"@storybook/addon-docs": "10.6.0",
|
"@storybook/addon-docs": "10.6.3",
|
||||||
"@storybook/react-vite": "10.6.0",
|
"@storybook/react-vite": "10.6.3",
|
||||||
"@stylistic/eslint-plugin": "5.10.0",
|
"@stylistic/eslint-plugin": "5.10.0",
|
||||||
"@tanstack/eslint-plugin-query": "5.104.0",
|
"@tanstack/eslint-plugin-query": "5.104.5",
|
||||||
"@testing-library/jest-dom": "7.0.1",
|
"@testing-library/jest-dom": "7.0.1",
|
||||||
"@testing-library/react": "16.3.3",
|
"@testing-library/react": "16.3.3",
|
||||||
"@types/node": "24.13.4",
|
"@types/node": "24.19.2",
|
||||||
"@types/react": "19.3.0",
|
"@types/react": "19.3.0",
|
||||||
"@types/react-dom": "19.3.0",
|
"@types/react-dom": "19.3.0",
|
||||||
"@vitejs/plugin-react": "6.1.1",
|
"@vitejs/plugin-react": "6.1.2",
|
||||||
"@vitest/browser-playwright": "5.0.0",
|
"@vitest/browser": "5.0.5",
|
||||||
"@vitest/coverage-v8": "5.0.0",
|
"@vitest/browser-playwright": "5.0.5",
|
||||||
|
"@vitest/coverage-v8": "5.0.5",
|
||||||
"@vitest/eslint-plugin": "1.6.27",
|
"@vitest/eslint-plugin": "1.6.27",
|
||||||
|
"@vitest/ui": "5.0.5",
|
||||||
"babel-plugin-react-compiler": "1.0.0",
|
"babel-plugin-react-compiler": "1.0.0",
|
||||||
"conventional-changelog-conventionalcommits": "10.4.0",
|
"conventional-changelog-conventionalcommits": "10.4.1",
|
||||||
"dependency-cruiser": "18.2.0",
|
"dependency-cruiser": "18.7.0",
|
||||||
"eslint": "10.11.0",
|
"eslint": "10.13.0",
|
||||||
"eslint-import-resolver-typescript": "4.4.5",
|
"eslint-import-resolver-typescript": "4.4.5",
|
||||||
"eslint-plugin-import-x": "4.17.1",
|
"eslint-plugin-import-x": "4.17.1",
|
||||||
"eslint-plugin-jest-dom": "5.10.1",
|
"eslint-plugin-jest-dom": "5.10.1",
|
||||||
"eslint-plugin-no-unsanitized": "4.1.5",
|
"eslint-plugin-no-unsanitized": "4.1.5",
|
||||||
"eslint-plugin-perfectionist": "5.12.1",
|
"eslint-plugin-perfectionist": "5.13.0",
|
||||||
"eslint-plugin-react-hooks": "7.1.1",
|
"eslint-plugin-react-hooks": "7.1.1",
|
||||||
"eslint-plugin-react-refresh": "0.5.7",
|
"eslint-plugin-react-refresh": "0.5.7",
|
||||||
"eslint-plugin-regexp": "3.3.1",
|
"eslint-plugin-regexp": "3.3.1",
|
||||||
"eslint-plugin-security": "4.1.0",
|
"eslint-plugin-security": "4.2.0",
|
||||||
"eslint-plugin-sonarjs": "4.2.1",
|
"eslint-plugin-sonarjs": "4.2.2",
|
||||||
"eslint-plugin-storybook": "10.6.0",
|
"eslint-plugin-storybook": "10.6.3",
|
||||||
"eslint-plugin-testing-library": "7.16.2",
|
"eslint-plugin-testing-library": "7.16.2",
|
||||||
"eslint-plugin-unicorn": "76.0.0",
|
"eslint-plugin-unicorn": "76.0.0",
|
||||||
"globals": "17.12.0",
|
"globals": "17.13.0",
|
||||||
"husky": "9.1.7",
|
"husky": "9.1.7",
|
||||||
"jsdom": "30.0.1",
|
"jsdom": "30.1.3",
|
||||||
"knip": "6.35.1",
|
"knip": "6.43.0",
|
||||||
"lint-staged": "17.5.1",
|
"lint-staged": "17.6.0",
|
||||||
"msw": "2.15.0",
|
"msw": "2.15.0",
|
||||||
"openapi-typescript": "7.13.0",
|
"openapi-typescript": "7.13.0",
|
||||||
"playwright": "1.63.0",
|
"playwright": "1.64.1",
|
||||||
"release-it": "21.0.2",
|
"release-it": "21.1.1",
|
||||||
"storybook": "10.6.0",
|
"storybook": "10.6.3",
|
||||||
"typescript": "5.9.3",
|
"typescript": "5.9.3",
|
||||||
"typescript-eslint": "8.70.1",
|
"typescript-eslint": "8.72.0",
|
||||||
"vite": "8.3.0",
|
"vite": "8.3.5",
|
||||||
"vite-plugin-pwa": "1.3.0",
|
"vite-plugin-pwa": "1.3.0",
|
||||||
"vitest": "5.0.0"
|
"vitest": "5.0.5"
|
||||||
},
|
},
|
||||||
"overrides": {
|
"overrides": {
|
||||||
"release-it": {
|
"release-it": {
|
||||||
"basic-ftp": "6.2.1",
|
"basic-ftp": "6.2.3",
|
||||||
"undici": "7.29.1"
|
"undici": "8.12.3"
|
||||||
}
|
},
|
||||||
|
"@vitest/browser": "5.0.5",
|
||||||
|
"@vitest/ui": "5.0.5",
|
||||||
|
"@vitest/mocker": "5.0.5"
|
||||||
},
|
},
|
||||||
"allowScripts": {
|
"allowScripts": {
|
||||||
"esbuild@0.28.2": true,
|
"esbuild@0.28.2": true,
|
||||||
|
|||||||
@@ -20,14 +20,14 @@
|
|||||||
"build": "vite build && tsc -p tsconfig.json"
|
"build": "vite build && tsc -p tsconfig.json"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": "19.3.0"
|
"react": "19.3.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@storybook/react-vite": "10.6.0",
|
"@storybook/react-vite": "10.6.3",
|
||||||
"@testing-library/react": "16.3.3",
|
"@testing-library/react": "16.3.3",
|
||||||
"@types/react": "19.3.0",
|
"@types/react": "19.3.0",
|
||||||
"typescript": "5.9.3",
|
"typescript": "5.9.3",
|
||||||
"vite": "8.3.0",
|
"vite": "8.3.5",
|
||||||
"vitest": "5.0.0"
|
"vitest": "5.0.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -27,18 +27,18 @@
|
|||||||
"@wealthledger/tokens": "0.3.0"
|
"@wealthledger/tokens": "0.3.0"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@mantine/core": "9.6.1",
|
"@mantine/core": "9.7.3",
|
||||||
"@mantine/hooks": "9.6.1",
|
"@mantine/hooks": "9.7.3",
|
||||||
"react": "19.3.0",
|
"react": "19.3.1",
|
||||||
"react-dom": "19.3.0"
|
"react-dom": "19.3.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@storybook/react-vite": "10.6.0",
|
"@storybook/react-vite": "10.6.3",
|
||||||
"@testing-library/react": "16.3.3",
|
"@testing-library/react": "16.3.3",
|
||||||
"@types/react": "19.3.0",
|
"@types/react": "19.3.0",
|
||||||
"storybook": "10.6.0",
|
"storybook": "10.6.3",
|
||||||
"typescript": "5.9.3",
|
"typescript": "5.9.3",
|
||||||
"vite": "8.3.0",
|
"vite": "8.3.5",
|
||||||
"vitest": "5.0.0"
|
"vitest": "5.0.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,45 +0,0 @@
|
|||||||
import { spawnSync } from "node:child_process";
|
|
||||||
import { mkdtemp, readFile, rm } from "node:fs/promises";
|
|
||||||
import { tmpdir } from "node:os";
|
|
||||||
import nodePath from "node:path";
|
|
||||||
|
|
||||||
const temporaryDirectory = await mkdtemp(
|
|
||||||
nodePath.join(tmpdir(), "wealth-ledger-openapi-"),
|
|
||||||
);
|
|
||||||
|
|
||||||
const generatedPath = nodePath.join(temporaryDirectory, "schema.d.ts");
|
|
||||||
const committedPath = nodePath.resolve("src/shared/api/generated/schema.d.ts");
|
|
||||||
const cliPath = nodePath.resolve("node_modules/openapi-typescript/bin/cli.js");
|
|
||||||
let exitCode = 0;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const generated = spawnSync(
|
|
||||||
process.execPath,
|
|
||||||
[cliPath, "src/shared/api/spec/openapi.json", "-o", generatedPath],
|
|
||||||
{ encoding: "utf8" },
|
|
||||||
);
|
|
||||||
|
|
||||||
if (generated.status === 0) {
|
|
||||||
const [committed, current] = await Promise.all([
|
|
||||||
readFile(committedPath, "utf8"),
|
|
||||||
// eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames.
|
|
||||||
readFile(generatedPath, "utf8"),
|
|
||||||
]);
|
|
||||||
|
|
||||||
if (committed !== current) {
|
|
||||||
console.error(
|
|
||||||
"Generated OpenAPI types are stale. Run `npm run openapi:generate` and commit the result.",
|
|
||||||
);
|
|
||||||
exitCode = 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
process.stderr.write(generated.stderr || generated.stdout);
|
|
||||||
exitCode = generated.status ?? 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
finally {
|
|
||||||
await rm(temporaryDirectory, { force: true, recursive: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
process.exitCode = exitCode;
|
|
||||||
@@ -85,7 +85,7 @@ test("ESLint enforces the frontend profile and excludes generated artifacts", as
|
|||||||
"security/detect-non-literal-regexp",
|
"security/detect-non-literal-regexp",
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
"scripts/check-openapi.mjs",
|
"scripts/test-pre-commit.mjs",
|
||||||
"import { exec } from \"node:child_process\"; exec(process.argv[2]);",
|
"import { exec } from \"node:child_process\"; exec(process.argv[2]);",
|
||||||
"security/detect-child-process",
|
"security/detect-child-process",
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -47,6 +47,12 @@ test("pre-commit scans the index, redacts findings and fails closed", () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
git("init", "--quiet");
|
git("init", "--quiet");
|
||||||
|
// The hook must run the installed lint-staged binary, never download one.
|
||||||
|
const localBin = nodePath.join(cwd, "node_modules", ".bin");
|
||||||
|
// eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames.
|
||||||
|
mkdirSync(localBin, { recursive: true });
|
||||||
|
// eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames.
|
||||||
|
writeFileSync(nodePath.join(localBin, "lint-staged"), "#!/bin/sh\necho ran >> downstream\n", { mode: 0o755 });
|
||||||
// eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames.
|
// eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames.
|
||||||
writeFileSync(nodePath.join(cwd, "sample.txt"), "safe staged content\n");
|
writeFileSync(nodePath.join(cwd, "sample.txt"), "safe staged content\n");
|
||||||
git("add", "sample.txt");
|
git("add", "sample.txt");
|
||||||
@@ -77,3 +83,37 @@ test("pre-commit scans the index, redacts findings and fails closed", () => {
|
|||||||
rmSync(cwd, { force: true, recursive: true });
|
rmSync(cwd, { force: true, recursive: true });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test("pre-commit never downloads tools and blocks when lint-staged is missing", () => {
|
||||||
|
const hook = nodePath.resolve(".husky/pre-commit");
|
||||||
|
const cwd = mkdtempSync(nodePath.join(tmpdir(), "frontend-hook-"));
|
||||||
|
const bin = nodePath.join(cwd, "bin");
|
||||||
|
const marker = nodePath.join(cwd, "downstream");
|
||||||
|
|
||||||
|
try {
|
||||||
|
// eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames.
|
||||||
|
mkdirSync(bin);
|
||||||
|
// Gitleaks passes; npx/npm must never be reached, even if present on PATH.
|
||||||
|
// eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames.
|
||||||
|
writeFileSync(nodePath.join(bin, "gitleaks"), "#!/bin/sh\nexit 0\n", { mode: 0o755 });
|
||||||
|
|
||||||
|
for (const command of ["npx", "npm"]) {
|
||||||
|
// eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames.
|
||||||
|
writeFileSync(nodePath.join(bin, command), "#!/bin/sh\necho ran >> downstream\n", { mode: 0o755 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = spawnSync("/bin/sh", ["-e", hook], {
|
||||||
|
cwd,
|
||||||
|
encoding: "utf8",
|
||||||
|
env: { ...process.env, PATH: `${bin}${nodePath.delimiter}${process.env.PATH}` },
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.notEqual(result.status, 0, "missing lint-staged must block commit");
|
||||||
|
assert.match(result.stderr, /lint-staged is not installed/);
|
||||||
|
// eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames.
|
||||||
|
assert.ok(!existsSync(marker), "hook must not invoke npx or npm");
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
rmSync(cwd, { force: true, recursive: true });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|||||||
@@ -18,12 +18,21 @@ import type { IncomeAnalytics } from "@/entities/income";
|
|||||||
import type { Portfolio } from "@/entities/portfolio";
|
import type { Portfolio } from "@/entities/portfolio";
|
||||||
|
|
||||||
import { AuthProvider } from "@/features/auth";
|
import { AuthProvider } from "@/features/auth";
|
||||||
|
import { defaultPeriod, formatDate } from "@/shared/lib";
|
||||||
import { createTestQueryClient } from "@/test/query";
|
import { createTestQueryClient } from "@/test/query";
|
||||||
import { resource } from "@/test/resource";
|
import { resource } from "@/test/resource";
|
||||||
import { server } from "@/test/server";
|
import { server } from "@/test/server";
|
||||||
|
|
||||||
import { AppRoutes } from "./AppRoutes";
|
import { AppRoutes } from "./AppRoutes";
|
||||||
|
|
||||||
|
// Mantine calendar labels follow dayjs default (English) locale.
|
||||||
|
function dayLabel(date: string) {
|
||||||
|
const monthName = new Intl.DateTimeFormat("en", { month: "long" })
|
||||||
|
.format(new Date(`${date}T12:00:00Z`));
|
||||||
|
|
||||||
|
return `${Number(date.slice(8))} ${monthName} ${date.slice(0, 4)}`;
|
||||||
|
}
|
||||||
|
|
||||||
const accounts = [
|
const accounts = [
|
||||||
{ id: "a", name: "Основной" },
|
{ id: "a", name: "Основной" },
|
||||||
{ id: "b", name: "ИИС" },
|
{ id: "b", name: "ИИС" },
|
||||||
@@ -95,10 +104,6 @@ const analytics: IncomeAnalytics
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
period: { from: "2026-08-01", to: "2026-08-31" },
|
period: { from: "2026-08-01", to: "2026-08-31" },
|
||||||
previous: {
|
|
||||||
period: { from: "2026-07-01", to: "2026-07-31" },
|
|
||||||
totalsByCurrency: [],
|
|
||||||
},
|
|
||||||
totalsByCurrency: [
|
totalsByCurrency: [
|
||||||
{
|
{
|
||||||
coupon: { currency: "RUB", value: "2" },
|
coupon: { currency: "RUB", value: "2" },
|
||||||
@@ -107,7 +112,6 @@ const analytics: IncomeAnalytics
|
|||||||
total: { currency: "RUB", value: "2" },
|
total: { currency: "RUB", value: "2" },
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
yearComparison: null,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const CurrentLocation: FC = () => {
|
const CurrentLocation: FC = () => {
|
||||||
@@ -238,7 +242,7 @@ describe("All accounts routes", () => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
it.each(["operations", "events", "income"])(
|
it.each(["operations", "income"])(
|
||||||
"restores applied dates when switching accounts in %s",
|
"restores applied dates when switching accounts in %s",
|
||||||
async (section) => {
|
async (section) => {
|
||||||
const search = "?from=2026-08-01&to=2026-08-31";
|
const search = "?from=2026-08-01&to=2026-08-31";
|
||||||
@@ -266,6 +270,31 @@ describe("All accounts routes", () => {
|
|||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
|
it("restores applied dates when switching accounts in events", async () => {
|
||||||
|
// The events calendar blocks past dates, so pick within selectable dates.
|
||||||
|
const search = `?from=${defaultPeriod()[0]}&to=${defaultPeriod()[1]}`;
|
||||||
|
renderPage(`/accounts/all/events${search}`);
|
||||||
|
const picker = await screen.findByLabelText("Период");
|
||||||
|
fireEvent.click(picker);
|
||||||
|
const [fromDate, toDate] = defaultPeriod();
|
||||||
|
fireEvent.click(
|
||||||
|
await screen.findByRole("button", { name: dayLabel(fromDate) }),
|
||||||
|
);
|
||||||
|
fireEvent.click(
|
||||||
|
await screen.findByRole("button", { name: dayLabel(toDate) }),
|
||||||
|
);
|
||||||
|
expect(screen.getByLabelText("Период")).toHaveTextContent(
|
||||||
|
`${formatDate(fromDate)} – ${formatDate(toDate)}`,
|
||||||
|
);
|
||||||
|
fireEvent.click(screen.getByRole("combobox", { name: "Счёт" }));
|
||||||
|
fireEvent.click(await screen.findByRole("option", { name: "ИИС" }));
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(screen.getByLabelText("Текущий путь")).toHaveTextContent(
|
||||||
|
`/accounts/b/events${search}`,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
it("groups the same security and links its accounts and overview sections", async () => {
|
it("groups the same security and links its accounts and overview sections", async () => {
|
||||||
renderPage("/accounts/all");
|
renderPage("/accounts/all");
|
||||||
expect(await screen.findAllByText("Сбербанк")).toHaveLength(1);
|
expect(await screen.findAllByText("Сбербанк")).toHaveLength(1);
|
||||||
@@ -369,7 +398,9 @@ describe("All accounts routes", () => {
|
|||||||
renderPage("/accounts/all/operations?from=2026-08-01&to=2026-08-31");
|
renderPage("/accounts/all/operations?from=2026-08-01&to=2026-08-31");
|
||||||
await screen.findAllByText("Выплата купона");
|
await screen.findAllByText("Выплата купона");
|
||||||
fireEvent.click(screen.getByRole("button", { name: "Далее" }));
|
fireEvent.click(screen.getByRole("button", { name: "Далее" }));
|
||||||
fireEvent.click(await screen.findByRole("button", { name: "Повторить" }));
|
await waitFor(() => {
|
||||||
|
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
expect(await screen.findAllByText("Выплата купона")).toHaveLength(2);
|
expect(await screen.findAllByText("Выплата купона")).toHaveLength(2);
|
||||||
expect(screen.getByLabelText("Текущий путь")).toHaveTextContent(
|
expect(screen.getByLabelText("Текущий путь")).toHaveTextContent(
|
||||||
"from=2026-08-01&to=2026-08-31",
|
"from=2026-08-01&to=2026-08-31",
|
||||||
@@ -390,10 +421,12 @@ describe("All accounts routes", () => {
|
|||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
expect(screen.getAllByText("Сбербанк")).toHaveLength(1);
|
expect(screen.getAllByText("Сбербанк")).toHaveLength(1);
|
||||||
expect(
|
await waitFor(() => {
|
||||||
await screen.findByRole("button", {
|
expect(
|
||||||
name: "Повторить",
|
screen.queryByRole("button", {
|
||||||
}),
|
name: "Повторить",
|
||||||
).toBeInTheDocument();
|
}),
|
||||||
|
).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -190,6 +190,30 @@ describe("AppRoutes", () => {
|
|||||||
expect(document.title).toBe("Карты — WealthLedger");
|
expect(document.title).toBe("Карты — WealthLedger");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("offers a retry instead of the login form while the server is unreachable, then restores the route", async () => {
|
||||||
|
let isOutage = true;
|
||||||
|
server.use(
|
||||||
|
http.post("*/api/v1/auth/refresh", () =>
|
||||||
|
isOutage
|
||||||
|
? new HttpResponse(null, { status: 502 })
|
||||||
|
: HttpResponse.json({
|
||||||
|
accessToken: "test-token",
|
||||||
|
user: { email: "user@example.com", id: "user-1" },
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
renderRoutes("/accounts");
|
||||||
|
|
||||||
|
expect(await screen.findByRole("alert")).toHaveTextContent("Не удалось подключиться");
|
||||||
|
expect(screen.queryByRole("heading", { name: "Вход" })).not.toBeInTheDocument();
|
||||||
|
isOutage = false;
|
||||||
|
fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await screen.findByRole("heading", { level: 2, name: "Нет инвестиционных счетов" }),
|
||||||
|
).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
it("lazy-loads the protected shell for an authenticated accounts route", async () => {
|
it("lazy-loads the protected shell for an authenticated accounts route", async () => {
|
||||||
server.use(
|
server.use(
|
||||||
http.post("*/api/v1/auth/refresh", () =>
|
http.post("*/api/v1/auth/refresh", () =>
|
||||||
|
|||||||
@@ -10,7 +10,6 @@ import { useAuth } from "@/features/auth";
|
|||||||
|
|
||||||
type BoundaryProps = PropsWithChildren<{
|
type BoundaryProps = PropsWithChildren<{
|
||||||
authenticated: boolean;
|
authenticated: boolean;
|
||||||
routeKey: string;
|
|
||||||
}>;
|
}>;
|
||||||
|
|
||||||
type RouteErrorFallbackProps = {
|
type RouteErrorFallbackProps = {
|
||||||
@@ -26,12 +25,6 @@ class Boundary extends Component<BoundaryProps, State> {
|
|||||||
|
|
||||||
override state: State = { hasError: false };
|
override state: State = { hasError: false };
|
||||||
|
|
||||||
override componentDidUpdate(previousProps: BoundaryProps) {
|
|
||||||
if (previousProps.routeKey !== this.props.routeKey && this.state.hasError) {
|
|
||||||
this.setState({ hasError: false });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
override render() {
|
override render() {
|
||||||
return this.state.hasError
|
return this.state.hasError
|
||||||
? <RouteErrorFallback authenticated={this.props.authenticated} />
|
? <RouteErrorFallback authenticated={this.props.authenticated} />
|
||||||
@@ -70,10 +63,7 @@ const RouteErrorBoundary: FC<PropsWithChildren> = (props) => {
|
|||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Boundary
|
<Boundary authenticated={Boolean(user)} key={`${pathname}${search}:${key}`}>
|
||||||
authenticated={Boolean(user)}
|
|
||||||
routeKey={`${pathname}${search}:${key}`}
|
|
||||||
>
|
|
||||||
{children}
|
{children}
|
||||||
</Boundary>
|
</Boundary>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,4 +1,7 @@
|
|||||||
|
import { Button, Container } from "@mantine/core";
|
||||||
|
import { StateView } from "@wealthledger/ui";
|
||||||
import { type FC, type PropsWithChildren, useState } from "react";
|
import { type FC, type PropsWithChildren, useState } from "react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
import { Navigate, useLocation } from "react-router";
|
import { Navigate, useLocation } from "react-router";
|
||||||
|
|
||||||
import { useAuth } from "@/features/auth";
|
import { useAuth } from "@/features/auth";
|
||||||
@@ -7,12 +10,26 @@ import { RouteSkeleton } from "./RouteFallback";
|
|||||||
|
|
||||||
const Protected: FC<PropsWithChildren> = (props) => {
|
const Protected: FC<PropsWithChildren> = (props) => {
|
||||||
const { children } = props;
|
const { children } = props;
|
||||||
const { ready, signedOut, user } = useAuth();
|
const { ready, retry, signedOut, unavailable, user } = useAuth();
|
||||||
|
const { t } = useTranslation();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const [wasAuthenticated, setWasAuthenticated] = useState(false);
|
const [wasAuthenticated, setWasAuthenticated] = useState(false);
|
||||||
if (user && !wasAuthenticated) setWasAuthenticated(true);
|
if (user && !wasAuthenticated) setWasAuthenticated(true);
|
||||||
if (!ready) return <RouteSkeleton variant="shell" />;
|
if (!ready) return <RouteSkeleton variant="shell" />;
|
||||||
|
|
||||||
|
// The server was unreachable (e.g. mid-deploy), so the session is unproven, not gone.
|
||||||
|
if (!user && unavailable)
|
||||||
|
return (
|
||||||
|
<Container py="xl" size={560}>
|
||||||
|
<StateView
|
||||||
|
action={<Button onClick={retry}>{t("auth.retry")}</Button>}
|
||||||
|
error
|
||||||
|
text={t("auth.unavailableText")}
|
||||||
|
title={t("auth.unavailableTitle")}
|
||||||
|
/>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
|
||||||
const loginState = signedOut && wasAuthenticated
|
const loginState = signedOut && wasAuthenticated
|
||||||
? undefined
|
? undefined
|
||||||
: { returnTo: `${location.pathname}${location.search}` };
|
: { returnTo: `${location.pathname}${location.search}` };
|
||||||
|
|||||||
+8
-1
@@ -2,6 +2,7 @@ import type { FC } from "react";
|
|||||||
|
|
||||||
import { MantineProvider } from "@mantine/core";
|
import { MantineProvider } from "@mantine/core";
|
||||||
import { DatesProvider } from "@mantine/dates";
|
import { DatesProvider } from "@mantine/dates";
|
||||||
|
import { Notifications } from "@mantine/notifications";
|
||||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||||
import { cssVariablesResolver, theme } from "@wealthledger/ui/theme";
|
import { cssVariablesResolver, theme } from "@wealthledger/ui/theme";
|
||||||
import { BrowserRouter } from "react-router";
|
import { BrowserRouter } from "react-router";
|
||||||
@@ -11,7 +12,11 @@ import { AuthProvider } from "@/features/auth";
|
|||||||
|
|
||||||
const queryClient = new QueryClient({
|
const queryClient = new QueryClient({
|
||||||
defaultOptions: {
|
defaultOptions: {
|
||||||
queries: { refetchOnWindowFocus: false, retry: false },
|
queries: {
|
||||||
|
refetchOnReconnect: true,
|
||||||
|
refetchOnWindowFocus: true,
|
||||||
|
retry: false,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -31,6 +36,8 @@ const App: FC = () => {
|
|||||||
</RouteErrorBoundary>
|
</RouteErrorBoundary>
|
||||||
</AuthProvider>
|
</AuthProvider>
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
|
|
||||||
|
<Notifications autoClose={4000} limit={2} position="top-right" zIndex={1000} />
|
||||||
</QueryClientProvider>
|
</QueryClientProvider>
|
||||||
</DatesProvider>
|
</DatesProvider>
|
||||||
</MantineProvider>
|
</MantineProvider>
|
||||||
|
|||||||
@@ -147,7 +147,7 @@ describe("banking API", () => {
|
|||||||
expect(url.searchParams.get("from")).toBe("2026-09-01");
|
expect(url.searchParams.get("from")).toBe("2026-09-01");
|
||||||
expect(url.searchParams.get("to")).toBe("2026-09-30");
|
expect(url.searchParams.get("to")).toBe("2026-09-30");
|
||||||
if (isFail && page === 2)
|
if (isFail && page === 2)
|
||||||
return HttpResponse.json({ code: "FAILED" }, { status: 500 });
|
return HttpResponse.json({ code: "NOT_FOUND" }, { status: 404 });
|
||||||
|
|
||||||
return HttpResponse.json({
|
return HttpResponse.json({
|
||||||
hasNext: page === 1,
|
hasNext: page === 1,
|
||||||
@@ -299,7 +299,7 @@ describe("banking API", () => {
|
|||||||
expect(result.current.query.data?.balance.value).toBe("100");
|
expect(result.current.query.data?.balance.value).toBe("100");
|
||||||
server.use(
|
server.use(
|
||||||
http.get("*/api/v1/bank-cards/a", () =>
|
http.get("*/api/v1/bank-cards/a", () =>
|
||||||
HttpResponse.json({ code: "INTERNAL_ERROR" }, { status: 500 }),
|
HttpResponse.json({ code: "NOT_FOUND" }, { status: 404 }),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
await act(() => result.current.query.refetch());
|
await act(() => result.current.query.refetch());
|
||||||
|
|||||||
@@ -0,0 +1,7 @@
|
|||||||
|
function errorCode(error: unknown): string | undefined {
|
||||||
|
return typeof error === "object" && error !== null && "code" in error
|
||||||
|
? String(error.code)
|
||||||
|
: undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
export { errorCode };
|
||||||
@@ -6,6 +6,7 @@ import { calendarDate } from "@/shared/lib";
|
|||||||
import { bankToday } from "./form-validation";
|
import { bankToday } from "./form-validation";
|
||||||
import { moneyCents } from "./money";
|
import { moneyCents } from "./money";
|
||||||
const MAX_CARD_NAME_LENGTH = 100;
|
const MAX_CARD_NAME_LENGTH = 100;
|
||||||
|
const paymentSystemValues = ["mir", "visa", "mastercard"] as const;
|
||||||
const MIN_BALANCE_KOPECKS = -9_223_372_036_854_775_808n;
|
const MIN_BALANCE_KOPECKS = -9_223_372_036_854_775_808n;
|
||||||
const MAX_BALANCE_KOPECKS = 9_223_372_036_854_775_807n;
|
const MAX_BALANCE_KOPECKS = 9_223_372_036_854_775_807n;
|
||||||
|
|
||||||
@@ -63,7 +64,7 @@ const bankCardSchema = z.object({
|
|||||||
openingBalance: moneySchema,
|
openingBalance: moneySchema,
|
||||||
openingDate: bankDateSchema,
|
openingDate: bankDateSchema,
|
||||||
paymentSystem: z
|
paymentSystem: z
|
||||||
.enum(["", "mir", "visa", "mastercard"], {
|
.enum(["", ...paymentSystemValues], {
|
||||||
error: validationMessage("bank.validation.paymentSystem"),
|
error: validationMessage("bank.validation.paymentSystem"),
|
||||||
})
|
})
|
||||||
.optional(),
|
.optional(),
|
||||||
@@ -75,5 +76,6 @@ export {
|
|||||||
bankCardSchema,
|
bankCardSchema,
|
||||||
type BankCardValues,
|
type BankCardValues,
|
||||||
bankDateSchema,
|
bankDateSchema,
|
||||||
|
paymentSystemValues,
|
||||||
positiveMoneySchema,
|
positiveMoneySchema,
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
import { useController, useFormContext } from "react-hook-form";
|
import { useController, useFormContext } from "react-hook-form";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
import type { BankCardValues } from "../../model/form.schema";
|
import { type BankCardValues, paymentSystemValues } from "../../model/form.schema";
|
||||||
|
|
||||||
import { bankDateField } from "../bankDateField";
|
import { bankDateField } from "../bankDateField";
|
||||||
|
|
||||||
function useBankCardFieldsVm() {
|
function useBankCardFieldsVm() {
|
||||||
@@ -16,7 +15,7 @@ function useBankCardFieldsVm() {
|
|||||||
const { field: openingDateField } = useController({ control, name: "openingDate" });
|
const { field: openingDateField } = useController({ control, name: "openingDate" });
|
||||||
const { field: paymentSystemField } = useController({ control, name: "paymentSystem" });
|
const { field: paymentSystemField } = useController({ control, name: "paymentSystem" });
|
||||||
|
|
||||||
const paymentSystems = ["mir", "visa", "mastercard"].map(value => ({
|
const paymentSystems = paymentSystemValues.map(value => ({
|
||||||
label: t(`bank.paymentSystems.${value}`),
|
label: t(`bank.paymentSystems.${value}`),
|
||||||
value,
|
value,
|
||||||
}));
|
}));
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { notifications } from "@mantine/notifications";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
@@ -71,7 +72,7 @@ function useBankCardFormVm(props: BankCardFormProps) {
|
|||||||
openingDate: values.openingDate,
|
openingDate: values.openingDate,
|
||||||
};
|
};
|
||||||
|
|
||||||
if (props.card)
|
if (props.card) {
|
||||||
await updateCard.mutateAsync({
|
await updateCard.mutateAsync({
|
||||||
body: {
|
body: {
|
||||||
...metadata,
|
...metadata,
|
||||||
@@ -80,12 +81,19 @@ function useBankCardFormVm(props: BankCardFormProps) {
|
|||||||
},
|
},
|
||||||
id: props.card.id,
|
id: props.card.id,
|
||||||
});
|
});
|
||||||
else
|
}
|
||||||
|
else {
|
||||||
await cardCreation.mutateAsync({
|
await cardCreation.mutateAsync({
|
||||||
id: intent,
|
id: intent,
|
||||||
...metadata,
|
...metadata,
|
||||||
...financial,
|
...financial,
|
||||||
});
|
});
|
||||||
|
notifications.show({
|
||||||
|
id: "bank-card-created-" + intent,
|
||||||
|
message: t("bank.cardSaved"),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
setOpened(false);
|
setOpened(false);
|
||||||
}
|
}
|
||||||
catch (error_) {
|
catch (error_) {
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import type { FC } from "react";
|
|||||||
import { Alert, Button, Group, Text } from "@mantine/core";
|
import { Alert, Button, Group, Text } from "@mantine/core";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
import { apiErrorCode } from "@/shared/api";
|
import { errorCode } from "../model/error-code";
|
||||||
|
|
||||||
type BankFeedbackProps = {
|
type BankFeedbackProps = {
|
||||||
cached?: boolean;
|
cached?: boolean;
|
||||||
@@ -14,7 +14,7 @@ type BankFeedbackProps = {
|
|||||||
|
|
||||||
const BankFeedback: FC<BankFeedbackProps> = (props) => {
|
const BankFeedback: FC<BankFeedbackProps> = (props) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const code = apiErrorCode(props.error);
|
const code = errorCode(props.error);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Alert color="orange" role="alert">
|
<Alert color="orange" role="alert">
|
||||||
|
|||||||
@@ -15,6 +15,28 @@
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.totals {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--mantine-spacing-xs) var(--mantine-spacing-lg);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.totals > div {
|
||||||
|
display: grid;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.totals dt {
|
||||||
|
color: var(--mantine-color-dimmed);
|
||||||
|
font-size: var(--mantine-font-size-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.totals dd {
|
||||||
|
margin: 0;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
.categories {
|
.categories {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
|||||||
@@ -47,7 +47,6 @@ const meta
|
|||||||
error: false,
|
error: false,
|
||||||
fetching: false,
|
fetching: false,
|
||||||
loading: false,
|
loading: false,
|
||||||
retry: () => {},
|
|
||||||
},
|
},
|
||||||
component: BankSummaryView,
|
component: BankSummaryView,
|
||||||
parameters: {
|
parameters: {
|
||||||
|
|||||||
@@ -0,0 +1,35 @@
|
|||||||
|
import { MantineProvider } from "@mantine/core";
|
||||||
|
import { render, screen } from "@testing-library/react";
|
||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
|
||||||
|
import { BankSummaryView } from "./BankSummary.view";
|
||||||
|
|
||||||
|
const money = (value: string) => ({ currency: "RUB", value });
|
||||||
|
|
||||||
|
describe("BankSummaryView", () => {
|
||||||
|
it("shows expenses, refunds, and net monthly totals", () => {
|
||||||
|
render(
|
||||||
|
<MantineProvider env="test">
|
||||||
|
<BankSummaryView
|
||||||
|
data={{
|
||||||
|
cardId: "card-1",
|
||||||
|
categories: [],
|
||||||
|
expenses: money("1000"),
|
||||||
|
net: money("800"),
|
||||||
|
refunds: money("200"),
|
||||||
|
}}
|
||||||
|
error={false}
|
||||||
|
fetching={false}
|
||||||
|
loading={false}
|
||||||
|
/>
|
||||||
|
</MantineProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(screen.getAllByText("Расходы")).toHaveLength(2);
|
||||||
|
expect(screen.getByText("Возвращено")).toBeInTheDocument();
|
||||||
|
expect(screen.getByText("После возвратов")).toBeInTheDocument();
|
||||||
|
expect(screen.getByText("1 000,00 ₽")).toBeInTheDocument();
|
||||||
|
expect(screen.getByText("200,00 ₽")).toBeInTheDocument();
|
||||||
|
expect(screen.getByText("800,00 ₽")).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import type { CSSProperties, FC } from "react";
|
import type { CSSProperties, FC } from "react";
|
||||||
|
|
||||||
import { Button, Group, Skeleton, Stack, Text, Title } from "@mantine/core";
|
import { Skeleton, Stack, Text, Title } from "@mantine/core";
|
||||||
import { OperationIcon } from "@wealthledger/icons";
|
import { OperationIcon } from "@wealthledger/icons";
|
||||||
import { LoadingSkeleton } from "@wealthledger/ui";
|
import { LoadingSkeleton } from "@wealthledger/ui";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
@@ -10,6 +10,7 @@ import { formatMoney } from "@/shared/lib";
|
|||||||
import type { BankSummary } from "../../api/types";
|
import type { BankSummary } from "../../api/types";
|
||||||
|
|
||||||
import { bankOperationAppearance } from "../../model/operation-appearance";
|
import { bankOperationAppearance } from "../../model/operation-appearance";
|
||||||
|
import { BankFeedback } from "../BankFeedback";
|
||||||
import classes from "./BankSummary.module.css";
|
import classes from "./BankSummary.module.css";
|
||||||
|
|
||||||
const CATEGORY_COLUMNS = 2;
|
const CATEGORY_COLUMNS = 2;
|
||||||
@@ -17,10 +18,10 @@ const CATEGORY_COLUMNS = 2;
|
|||||||
type BankSummaryViewProps = {
|
type BankSummaryViewProps = {
|
||||||
all?: boolean;
|
all?: boolean;
|
||||||
data?: BankSummary;
|
data?: BankSummary;
|
||||||
error: boolean;
|
error: unknown;
|
||||||
fetching: boolean;
|
fetching: boolean;
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
retry: () => void;
|
retry?: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const BankSummaryViewCategories: FC<BankSummaryViewProps> = (props) => {
|
const BankSummaryViewCategories: FC<BankSummaryViewProps> = (props) => {
|
||||||
@@ -93,25 +94,44 @@ const BankSummaryView: FC<BankSummaryViewProps> = (props) => {
|
|||||||
</Title>
|
</Title>
|
||||||
|
|
||||||
{props.data && (
|
{props.data && (
|
||||||
<Text className={classes.total}>
|
<dl className={classes.totals}>
|
||||||
{formatMoney(props.data.net, { withZeroCents: true })}
|
<div>
|
||||||
</Text>
|
<dt>{t("bank.summary")}</dt>
|
||||||
|
|
||||||
|
<dd>
|
||||||
|
{formatMoney(props.data.expenses, { withZeroCents: true })}
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<dt>{t("bank.refunds")}</dt>
|
||||||
|
|
||||||
|
<dd>
|
||||||
|
{formatMoney(props.data.refunds, { withZeroCents: true })}
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<dt>{t("bank.net")}</dt>
|
||||||
|
|
||||||
|
<dd className={classes.total}>
|
||||||
|
{formatMoney(props.data.net, { withZeroCents: true })}
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<BankSummaryViewCategories {...props} />
|
<BankSummaryViewCategories {...props} />
|
||||||
|
|
||||||
{props.error && (
|
{Boolean(props.error) && (
|
||||||
<Group role="alert">
|
<BankFeedback
|
||||||
<Text>{t(props.data ? "bank.refreshError" : "bank.error")}</Text>
|
cached={Boolean(props.data)}
|
||||||
|
error={props.error}
|
||||||
<Button onClick={props.retry} variant="default">
|
loadingError={!props.data}
|
||||||
{t("bank.retry")}
|
retry={props.retry}
|
||||||
</Button>
|
/>
|
||||||
</Group>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{props.data && props.fetching && <Text role="status">{t("bank.refreshing")}</Text>}
|
|
||||||
</Stack>
|
</Stack>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -36,6 +36,12 @@ function entryLabelKey(operation: BrokerageOperation): string {
|
|||||||
return `ledger.category.${operation.category}`;
|
return `ledger.category.${operation.category}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function isIncomePayment(operation: BrokerageOperation): boolean {
|
||||||
|
return [OperationType.Coupon, OperationType.Dividend].some(type =>
|
||||||
|
isOperationType(operation.type, type),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function isOperationType(value: unknown, expected: OperationType): boolean {
|
function isOperationType(value: unknown, expected: OperationType): boolean {
|
||||||
return value === expected;
|
return value === expected;
|
||||||
}
|
}
|
||||||
@@ -109,4 +115,4 @@ function paymentPresentation(
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export { operationLabelKey, paymentPresentation };
|
export { isIncomePayment, operationLabelKey, paymentPresentation };
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { hashKey, useQueryClient } from "@tanstack/react-query";
|
import { hashKey, useQueryClient } from "@tanstack/react-query";
|
||||||
import { useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
|
import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
|
||||||
|
|
||||||
@@ -29,15 +29,28 @@ function useBrokerageOperationHistory(
|
|||||||
cursor: cursors.at(-1),
|
cursor: cursors.at(-1),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const isInvalidCursor = isApiErrorCode(
|
||||||
|
apiErrorCode(operations.error),
|
||||||
|
ApiErrorCode.InvalidOperationsCursor,
|
||||||
|
);
|
||||||
|
|
||||||
|
const isRecoveringInvalidCursor = cursors.length > 0 && isInvalidCursor;
|
||||||
|
|
||||||
const reset = () => setPagination({ cursors: [], scope });
|
const reset = () => setPagination({ cursors: [], scope });
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isRecoveringInvalidCursor) return;
|
||||||
|
|
||||||
|
const timeout = setTimeout(() => {
|
||||||
|
setPagination({ cursors: [], scope });
|
||||||
|
void client.invalidateQueries({ exact: true, queryKey });
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
return () => clearTimeout(timeout);
|
||||||
|
}, [client, isRecoveringInvalidCursor, queryKey, scope]);
|
||||||
|
|
||||||
const retry = (retryScreen: () => unknown) => {
|
const retry = (retryScreen: () => unknown) => {
|
||||||
if (
|
if (isInvalidCursor) {
|
||||||
isApiErrorCode(
|
|
||||||
apiErrorCode(operations.error),
|
|
||||||
ApiErrorCode.InvalidOperationsCursor,
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
reset();
|
reset();
|
||||||
void client.invalidateQueries({
|
void client.invalidateQueries({
|
||||||
exact: true,
|
exact: true,
|
||||||
@@ -49,6 +62,7 @@ function useBrokerageOperationHistory(
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
hasPrevious: cursors.length > 0,
|
hasPrevious: cursors.length > 0,
|
||||||
|
isRecoveringInvalidCursor,
|
||||||
onNext: () => {
|
onNext: () => {
|
||||||
if (operations.data?.nextCursor)
|
if (operations.data?.nextCursor)
|
||||||
setPagination({
|
setPagination({
|
||||||
|
|||||||
@@ -11,10 +11,11 @@ import {
|
|||||||
formatSnapshotTime,
|
formatSnapshotTime,
|
||||||
instrumentLogoUrl,
|
instrumentLogoUrl,
|
||||||
} from "@/shared/lib";
|
} from "@/shared/lib";
|
||||||
|
import { PayoutCard } from "@/shared/ui";
|
||||||
|
|
||||||
import type { BrokerageOperation } from "../api/useBrokerageOperations";
|
import type { BrokerageOperation } from "../api/useBrokerageOperations";
|
||||||
|
|
||||||
import { operationLabelKey, paymentPresentation } from "../model/display";
|
import { isIncomePayment, operationLabelKey, paymentPresentation } from "../model/display";
|
||||||
|
|
||||||
type LedgerEntryRowProps = {
|
type LedgerEntryRowProps = {
|
||||||
operation: BrokerageOperation;
|
operation: BrokerageOperation;
|
||||||
@@ -75,6 +76,28 @@ const LedgerEntryRow: FC<LedgerEntryRowProps> = (props) => {
|
|||||||
}
|
}
|
||||||
else details = undefined;
|
else details = undefined;
|
||||||
|
|
||||||
|
if (isIncomePayment(operation)) {
|
||||||
|
const extraMetadata = [
|
||||||
|
instrument,
|
||||||
|
props.withDetails ? null : operation.account?.name,
|
||||||
|
].filter(Boolean).join(" · ");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PayoutCard
|
||||||
|
details={details}
|
||||||
|
extraMetadata={extraMetadata}
|
||||||
|
imageSrc={instrumentLogoUrl(operation.logoName)}
|
||||||
|
initial={(instrument.trim()[0] ?? "?").toUpperCase()}
|
||||||
|
kind="executed"
|
||||||
|
occurredAt={formatSnapshotTime(operation.occurredAt)}
|
||||||
|
payment={operation.payment}
|
||||||
|
title={operation.description || t(operationLabelKey(operation.type))}
|
||||||
|
typeLabel={t(paymentPresentation(operation).label)}
|
||||||
|
wrap={props.wrap}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<EntryCard
|
<EntryCard
|
||||||
details={details}
|
details={details}
|
||||||
|
|||||||
@@ -4,17 +4,22 @@ const brokerageAccountsQueryOptions = () =>
|
|||||||
apiQueryClient.queryOptions("get", "/api/v1/brokerage-accounts");
|
apiQueryClient.queryOptions("get", "/api/v1/brokerage-accounts");
|
||||||
|
|
||||||
const brokerageAccountsQueryKey = brokerageAccountsQueryOptions().queryKey;
|
const brokerageAccountsQueryKey = brokerageAccountsQueryOptions().queryKey;
|
||||||
|
const BROKERAGE_ACCOUNTS_STALE_TIME_MS = 1_800_000;
|
||||||
|
|
||||||
type BrokerageAccount = NonNullable<
|
type BrokerageAccount = NonNullable<
|
||||||
paths["/api/v1/brokerage-accounts"]["get"]["responses"][200]["content"]["application/json"]["data"]
|
paths["/api/v1/brokerage-accounts"]["get"]["responses"][200]["content"]["application/json"]["data"]
|
||||||
>[number];
|
>[number];
|
||||||
|
|
||||||
function useBrokerageAccounts() {
|
function useBrokerageAccounts() {
|
||||||
return useResourceQuery({
|
const query = useResourceQuery({
|
||||||
meta: { accessGroup: "brokerage" },
|
meta: { accessGroup: "brokerage" },
|
||||||
...brokerageAccountsQueryOptions(),
|
...brokerageAccountsQueryOptions(),
|
||||||
staleTime: 60_000,
|
staleTime: BROKERAGE_ACCOUNTS_STALE_TIME_MS,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
...query,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
|
|||||||
+16
-8
@@ -205,24 +205,32 @@ export const IndependentFreshness: Story
|
|||||||
],
|
],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
availability: "complete",
|
availability: "available",
|
||||||
|
completeness: "complete",
|
||||||
dataRevision: "1",
|
dataRevision: "1",
|
||||||
freshness: "stale",
|
freshness: "stale",
|
||||||
lastSuccessfulAt: "2026-09-24T10:30:00Z",
|
lastAttempt: {
|
||||||
resourceKey: "portfolio/storybook-account",
|
finishedAt: "2026-09-24T10:31:00Z",
|
||||||
sync: {
|
problems: [],
|
||||||
errorCode: "TBANK_UNAVAILABLE",
|
startedAt: "2026-09-24T10:30:00Z",
|
||||||
id: "failed",
|
|
||||||
state: "failed",
|
state: "failed",
|
||||||
},
|
},
|
||||||
|
lastSuccessfulAt: "2026-09-24T10:30:00Z",
|
||||||
|
resourceKey: "portfolio/storybook-account",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
availability: "missing",
|
availability: "initial-loading",
|
||||||
|
completeness: "incomplete",
|
||||||
dataRevision: "0",
|
dataRevision: "0",
|
||||||
freshness: "unknown",
|
freshness: "unknown",
|
||||||
|
lastAttempt: {
|
||||||
|
finishedAt: null,
|
||||||
|
problems: [],
|
||||||
|
startedAt: "2026-09-24T10:30:00Z",
|
||||||
|
state: "running",
|
||||||
|
},
|
||||||
lastSuccessfulAt: null,
|
lastSuccessfulAt: null,
|
||||||
resourceKey: "portfolio/waiting",
|
resourceKey: "portfolio/waiting",
|
||||||
sync: { errorCode: null, id: "waiting", state: "running" },
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
|||||||
@@ -64,15 +64,16 @@ const BrokerageAccountSourceStatus: FC<BrokerageAccountSourceStatusProps> = (
|
|||||||
const { source } = props;
|
const { source } = props;
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const isSyncing = source?.sync.state === "running";
|
const isSyncing = source?.lastAttempt.state === "running";
|
||||||
|
|
||||||
const errorText
|
const errorText
|
||||||
= source?.sync.state === "failed" ? t("accounts.refreshError") : null;
|
= source?.lastAttempt.state === "failed" ? t("accounts.refreshError") : null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SourceSyncStatus
|
<SourceSyncStatus
|
||||||
errorText={errorText}
|
errorText={errorText}
|
||||||
|
lastAttempt={source?.lastAttempt}
|
||||||
lastSuccessfulAt={source?.lastSuccessfulAt}
|
lastSuccessfulAt={source?.lastSuccessfulAt}
|
||||||
stale={source?.freshness === "stale"}
|
stale={source?.freshness === "stale"}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { EntryCard } from "@wealthledger/ui";
|
|||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
import { formatDate, formatMoney, instrumentLogoUrl } from "@/shared/lib";
|
import { formatDate, formatMoney, instrumentLogoUrl } from "@/shared/lib";
|
||||||
|
import { PayoutCard } from "@/shared/ui";
|
||||||
|
|
||||||
import type { BrokerageEvent } from "../api/useBrokerageEvents";
|
import type { BrokerageEvent } from "../api/useBrokerageEvents";
|
||||||
|
|
||||||
@@ -15,6 +16,27 @@ const BrokerageEventCard: FC<BrokerageEventCardProps> = (props) => {
|
|||||||
|
|
||||||
const date = formatDate(event.date);
|
const date = formatDate(event.date);
|
||||||
|
|
||||||
|
if (event.type === "coupon" || event.type === "dividend") {
|
||||||
|
const title = [t(`events.type.${event.type}`), event.displayName].join(" · ");
|
||||||
|
|
||||||
|
const extraMetadata = [event.isin, event.account?.name]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join(" · ");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PayoutCard
|
||||||
|
date={date}
|
||||||
|
dateKind={event.dateKind}
|
||||||
|
extraMetadata={extraMetadata}
|
||||||
|
imageSrc={instrumentLogoUrl(event.logoName)}
|
||||||
|
initial={(event.ticker.trim()[0] ?? "?").toUpperCase()}
|
||||||
|
kind="forecast"
|
||||||
|
projectedAmount={event.projectedAmount}
|
||||||
|
title={title}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const metadata = [
|
const metadata = [
|
||||||
date,
|
date,
|
||||||
event.dateKind === "registry"
|
event.dateKind === "registry"
|
||||||
@@ -40,7 +62,7 @@ const BrokerageEventCard: FC<BrokerageEventCardProps> = (props) => {
|
|||||||
title={[t(`events.type.${event.type}`), event.displayName].join(" · ")}
|
title={[t(`events.type.${event.type}`), event.displayName].join(" · ")}
|
||||||
tone="neutral"
|
tone="neutral"
|
||||||
value={projectedAmount}
|
value={projectedAmount}
|
||||||
valueLabel={t("events.projectedAmount")}
|
valueLabel={t("payout.forecast")}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,12 +1,10 @@
|
|||||||
import type { FC } from "react";
|
import type { FC } from "react";
|
||||||
|
|
||||||
import { Alert, Button, Skeleton, Stack, Text } from "@mantine/core";
|
import { Button, Skeleton, Stack, Text } from "@mantine/core";
|
||||||
import { LoadingSkeleton } from "@wealthledger/ui";
|
import { LoadingSkeleton } from "@wealthledger/ui";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { Link } from "react-router";
|
import { Link } from "react-router";
|
||||||
|
|
||||||
import { SourceSyncStatus } from "@/shared/ui";
|
|
||||||
|
|
||||||
import type { BrokerageEvent } from "../../api/useBrokerageEvents";
|
import type { BrokerageEvent } from "../../api/useBrokerageEvents";
|
||||||
|
|
||||||
import { brokerageEventKey } from "../../model/event-key";
|
import { brokerageEventKey } from "../../model/event-key";
|
||||||
@@ -19,9 +17,6 @@ type BrokerageEventsPreviewProps = {
|
|||||||
type BrokerageEventsPreviewState
|
type BrokerageEventsPreviewState
|
||||||
= | {
|
= | {
|
||||||
items: BrokerageEvent[];
|
items: BrokerageEvent[];
|
||||||
lastSuccessfulAt?: null | string;
|
|
||||||
refreshError?: boolean;
|
|
||||||
stale?: boolean;
|
|
||||||
state: "loaded" | "partial";
|
state: "loaded" | "partial";
|
||||||
to: string;
|
to: string;
|
||||||
}
|
}
|
||||||
@@ -33,28 +28,15 @@ const BrokerageEventsPreview: FC<BrokerageEventsPreviewProps> = (props) => {
|
|||||||
const { events } = props;
|
const { events } = props;
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const errorText
|
|
||||||
= events.state === "loaded" && events.refreshError
|
|
||||||
? t("accounts.refreshError")
|
|
||||||
: null;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack gap="sm">
|
<Stack gap="sm">
|
||||||
{events.state === "loaded" && (
|
|
||||||
<SourceSyncStatus
|
|
||||||
errorText={errorText}
|
|
||||||
lastSuccessfulAt={events.lastSuccessfulAt}
|
|
||||||
stale={events.stale}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{events.state === "loading" && (
|
{events.state === "loading" && (
|
||||||
<LoadingSkeleton label={t("events.recentLoading")}>
|
<LoadingSkeleton label={t("events.recentLoading")}>
|
||||||
{["first", "second", "third"].map(placeholder => <Skeleton height={48} key={placeholder} radius="sm" />)}
|
{["first", "second", "third"].map(placeholder => <Skeleton height={48} key={placeholder} radius="sm" />)}
|
||||||
</LoadingSkeleton>
|
</LoadingSkeleton>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{events.state === "error" && <Alert color="red">{t("events.recentError")}</Alert>}
|
{events.state === "error" && <Text c="dimmed">{t("states.unavailableText")}</Text>}
|
||||||
|
|
||||||
{events.state === "empty" && <Text c="dimmed">{t("events.recentEmpty")}</Text>}
|
{events.state === "empty" && <Text c="dimmed">{t("events.recentEmpty")}</Text>}
|
||||||
|
|
||||||
|
|||||||
@@ -4,9 +4,6 @@ type IncomeAnalytics = NonNullable<
|
|||||||
paths["/api/v1/brokerage-accounts/{accountId}/income-analytics"]["get"]["responses"][200]["content"]["application/json"]["data"]
|
paths["/api/v1/brokerage-accounts/{accountId}/income-analytics"]["get"]["responses"][200]["content"]["application/json"]["data"]
|
||||||
>;
|
>;
|
||||||
|
|
||||||
type IncomeAnalyticsMeta
|
|
||||||
= paths["/api/v1/brokerage-accounts/{accountId}/income-analytics"]["get"]["responses"][200]["content"]["application/json"]["meta"];
|
|
||||||
|
|
||||||
type IncomeSummary = NonNullable<
|
type IncomeSummary = NonNullable<
|
||||||
paths["/api/v1/brokerage-accounts/{accountId}/income-summary"]["get"]["responses"][200]["content"]["application/json"]["data"]
|
paths["/api/v1/brokerage-accounts/{accountId}/income-summary"]["get"]["responses"][200]["content"]["application/json"]["data"]
|
||||||
>;
|
>;
|
||||||
@@ -47,7 +44,6 @@ function useIncomeSummary(accountId?: string) {
|
|||||||
|
|
||||||
export {
|
export {
|
||||||
type IncomeAnalytics,
|
type IncomeAnalytics,
|
||||||
type IncomeAnalyticsMeta,
|
|
||||||
type IncomeSummary,
|
type IncomeSummary,
|
||||||
useIncomeAnalytics,
|
useIncomeAnalytics,
|
||||||
useIncomeSummary,
|
useIncomeSummary,
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
export {
|
export {
|
||||||
type IncomeAnalytics,
|
type IncomeAnalytics,
|
||||||
type IncomeAnalyticsMeta,
|
|
||||||
type IncomeSummary,
|
type IncomeSummary,
|
||||||
useIncomeAnalytics,
|
useIncomeAnalytics,
|
||||||
useIncomeSummary,
|
useIncomeSummary,
|
||||||
|
|||||||
@@ -6,10 +6,6 @@ import {
|
|||||||
|
|
||||||
type StockCandles = NonNullable<paths["/api/v1/stocks/{uid}/candles"]["get"]["responses"][200]["content"]["application/json"]["data"]>;
|
type StockCandles = NonNullable<paths["/api/v1/stocks/{uid}/candles"]["get"]["responses"][200]["content"]["application/json"]["data"]>;
|
||||||
|
|
||||||
type StockPosition = NonNullable<paths["/api/v1/stocks/{uid}/position"]["get"]["responses"][200]["content"]["application/json"]["data"]>;
|
|
||||||
|
|
||||||
const MIN_STOCK_SEARCH_LENGTH = 2;
|
|
||||||
|
|
||||||
type StockDividends = NonNullable<paths["/api/v1/stocks/{uid}/dividends"]["get"]["responses"][200]["content"]["application/json"]["data"]>;
|
type StockDividends = NonNullable<paths["/api/v1/stocks/{uid}/dividends"]["get"]["responses"][200]["content"]["application/json"]["data"]>;
|
||||||
|
|
||||||
type StockPeriod = NonNullable<
|
type StockPeriod = NonNullable<
|
||||||
@@ -18,6 +14,8 @@ type StockPeriod = NonNullable<
|
|||||||
>["period"]
|
>["period"]
|
||||||
>;
|
>;
|
||||||
|
|
||||||
|
type StockPosition = NonNullable<paths["/api/v1/stocks/{uid}/position"]["get"]["responses"][200]["content"]["application/json"]["data"]>;
|
||||||
|
|
||||||
const STOCK_STALE_TIME_MS = 30_000;
|
const STOCK_STALE_TIME_MS = 30_000;
|
||||||
|
|
||||||
function useStock(identifier: string) {
|
function useStock(identifier: string) {
|
||||||
@@ -96,18 +94,7 @@ function useStockQuote(uid: string) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function useStockSearch(query: string) {
|
|
||||||
return useResourceQuery({
|
|
||||||
...apiQueryClient.queryOptions("get", "/api/v1/stocks", {
|
|
||||||
params: { query: { query } },
|
|
||||||
}),
|
|
||||||
enabled: query.length >= MIN_STOCK_SEARCH_LENGTH,
|
|
||||||
staleTime: STOCK_STALE_TIME_MS,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
export {
|
||||||
MIN_STOCK_SEARCH_LENGTH,
|
|
||||||
type StockCandles,
|
type StockCandles,
|
||||||
type StockDividends,
|
type StockDividends,
|
||||||
type StockPosition,
|
type StockPosition,
|
||||||
@@ -117,5 +104,4 @@ export {
|
|||||||
useStockDividends,
|
useStockDividends,
|
||||||
useStockPosition,
|
useStockPosition,
|
||||||
useStockQuote,
|
useStockQuote,
|
||||||
useStockSearch,
|
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
export {
|
export {
|
||||||
MIN_STOCK_SEARCH_LENGTH,
|
|
||||||
type StockCandles,
|
type StockCandles,
|
||||||
type StockDividends,
|
type StockDividends,
|
||||||
type StockPosition,
|
type StockPosition,
|
||||||
@@ -9,5 +8,4 @@ export {
|
|||||||
useStockDividends,
|
useStockDividends,
|
||||||
useStockPosition,
|
useStockPosition,
|
||||||
useStockQuote,
|
useStockQuote,
|
||||||
useStockSearch,
|
|
||||||
} from "./api/queries";
|
} from "./api/queries";
|
||||||
|
|||||||
@@ -7,7 +7,12 @@ type AuthContextValue = {
|
|||||||
logout: () => Promise<void>;
|
logout: () => Promise<void>;
|
||||||
ready: boolean;
|
ready: boolean;
|
||||||
register: (email: string, password: string) => Promise<void>;
|
register: (email: string, password: string) => Promise<void>;
|
||||||
|
retry: () => void;
|
||||||
signedOut: boolean;
|
signedOut: boolean;
|
||||||
|
/**
|
||||||
|
Refresh failed with a network error or 5xx; the refresh cookie may still be valid.
|
||||||
|
*/
|
||||||
|
unavailable: boolean;
|
||||||
user: undefined | User;
|
user: undefined | User;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,55 @@
|
|||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
|
||||||
|
import { loginSchema, registerSchema } from "./auth.schema";
|
||||||
|
|
||||||
|
const email = "user@example.com";
|
||||||
|
|
||||||
|
function canLogIn(password: string) {
|
||||||
|
return loginSchema.safeParse({ email, password }).success;
|
||||||
|
}
|
||||||
|
|
||||||
|
function canRegister(password: string, confirmation = password) {
|
||||||
|
return registerSchema.safeParse({
|
||||||
|
email,
|
||||||
|
password,
|
||||||
|
passwordConfirmation: confirmation,
|
||||||
|
}).success;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Register policy: 8..72 printable ASCII (bcrypt reads 72 bytes, so non-ASCII could be
|
||||||
|
// truncated). Login stays lenient so accounts created under the old policy still sign in.
|
||||||
|
describe("auth password policy", () => {
|
||||||
|
it.each([
|
||||||
|
["7 chars", "a".repeat(7), false],
|
||||||
|
["8 chars", "a".repeat(8), true],
|
||||||
|
["72 chars", "a".repeat(72), true],
|
||||||
|
["73 chars", "a".repeat(73), false],
|
||||||
|
["printable symbols and space", "Aa1 !~\"#$%&'()*+,-./:;<=>?@", true],
|
||||||
|
["Cyrillic, 8+ chars", "пароль-пароль", false],
|
||||||
|
["emoji", "passw😀rd", false],
|
||||||
|
["tab", "pass\tword1", false],
|
||||||
|
["newline", "password1\n", false],
|
||||||
|
["DEL", "password\u{7F}1", false],
|
||||||
|
])("register: %s", (_, password, accepted) => {
|
||||||
|
expect(canRegister(password)).toBe(accepted);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("register compares the raw password with its confirmation", () => {
|
||||||
|
const padded = " spaced pass ";
|
||||||
|
|
||||||
|
expect(canRegister(padded)).toBe(true);
|
||||||
|
expect(canRegister(padded, padded.trim())).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it.each([
|
||||||
|
["legacy Cyrillic password", "пароль-пароль", true],
|
||||||
|
["short legacy password", "short", true],
|
||||||
|
["72 bytes", "a".repeat(72), true],
|
||||||
|
["73 bytes", "a".repeat(73), false],
|
||||||
|
["36 Cyrillic letters = 72 bytes", "я".repeat(36), true],
|
||||||
|
["37 Cyrillic letters = 74 bytes", "я".repeat(37), false],
|
||||||
|
["empty", "", false],
|
||||||
|
])("login: %s", (_, password, accepted) => {
|
||||||
|
expect(canLogIn(password)).toBe(accepted);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -7,8 +7,10 @@ const EMAIL_PART_COUNT = 2;
|
|||||||
const ASCII_SPACE = 32;
|
const ASCII_SPACE = 32;
|
||||||
const ASCII_DELETE = 127;
|
const ASCII_DELETE = 127;
|
||||||
const MAX_EMAIL_LENGTH = 254;
|
const MAX_EMAIL_LENGTH = 254;
|
||||||
const MIN_PASSWORD_BYTES = 12;
|
const MIN_PASSWORD_LENGTH = 8;
|
||||||
const MAX_PASSWORD_BYTES = 72;
|
const MAX_PASSWORD_BYTES = 72;
|
||||||
|
// Printable ASCII keeps characters == bytes, within the bcrypt 72-byte limit.
|
||||||
|
const ASCII_TILDE = 126;
|
||||||
|
|
||||||
function isEmailCharacterInvalid(character: string): boolean {
|
function isEmailCharacterInvalid(character: string): boolean {
|
||||||
const codePoint = character.codePointAt(0);
|
const codePoint = character.codePointAt(0);
|
||||||
@@ -20,6 +22,14 @@ function isEmailCharacterInvalid(character: string): boolean {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function isPrintableAscii(value: string): boolean {
|
||||||
|
return value.split("").every((character) => {
|
||||||
|
const code = character.codePointAt(0) ?? 0;
|
||||||
|
|
||||||
|
return code >= ASCII_SPACE && code <= ASCII_TILDE;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const email = z
|
const email = z
|
||||||
.string()
|
.string()
|
||||||
.trim()
|
.trim()
|
||||||
@@ -33,28 +43,42 @@ const email = z
|
|||||||
{ error: validationMessage("auth.validation.invalidEmail") },
|
{ error: validationMessage("auth.validation.invalidEmail") },
|
||||||
);
|
);
|
||||||
|
|
||||||
const password = z
|
// Login stays lenient: accounts created under an older policy must still sign in.
|
||||||
|
const loginPassword = z
|
||||||
.string()
|
.string()
|
||||||
|
.min(1)
|
||||||
.refine(
|
.refine(
|
||||||
value =>
|
value => new TextEncoder().encode(value).length <= MAX_PASSWORD_BYTES,
|
||||||
new TextEncoder().encode(value).length >= MIN_PASSWORD_BYTES
|
{ error: validationMessage("auth.validation.passwordTooLong") },
|
||||||
&& new TextEncoder().encode(value).length <= MAX_PASSWORD_BYTES,
|
|
||||||
{ error: validationMessage("auth.validation.invalidPasswordLength") },
|
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const registerPassword = z
|
||||||
|
.string()
|
||||||
|
.min(MIN_PASSWORD_LENGTH, {
|
||||||
|
error: validationMessage("auth.validation.invalidPasswordLength"),
|
||||||
|
})
|
||||||
|
.max(MAX_PASSWORD_BYTES, {
|
||||||
|
error: validationMessage("auth.validation.invalidPasswordLength"),
|
||||||
|
})
|
||||||
|
.refine(isPrintableAscii, {
|
||||||
|
error: validationMessage("auth.validation.invalidPasswordLength"),
|
||||||
|
});
|
||||||
|
|
||||||
const loginSchema = z.object({
|
const loginSchema = z.object({
|
||||||
email,
|
email,
|
||||||
password,
|
password: loginPassword,
|
||||||
passwordConfirmation: z.string().optional(),
|
passwordConfirmation: z.string().optional(),
|
||||||
});
|
});
|
||||||
|
|
||||||
const registerSchema = loginSchema.refine(
|
const registerSchema = loginSchema
|
||||||
value => value.password === value.passwordConfirmation,
|
.extend({ password: registerPassword })
|
||||||
{
|
.refine(
|
||||||
error: validationMessage("auth.validation.passwordsDoNotMatch"),
|
value => value.password === value.passwordConfirmation,
|
||||||
path: ["passwordConfirmation"],
|
{
|
||||||
},
|
error: validationMessage("auth.validation.passwordsDoNotMatch"),
|
||||||
);
|
path: ["passwordConfirmation"],
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
type AuthFormValues = z.input<typeof loginSchema>;
|
type AuthFormValues = z.input<typeof loginSchema>;
|
||||||
|
|
||||||
|
|||||||
@@ -92,8 +92,10 @@ describe("AuthProvider", () => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("settles unauthenticated and clears cached data when cold-start refresh has a transport error", async () => {
|
it("settles unauthenticated and clears cached data when cold-start refresh is rejected with 401", async () => {
|
||||||
server.use(http.post("*/api/v1/auth/refresh", () => HttpResponse.error()));
|
server.use(http.post("*/api/v1/auth/refresh", () =>
|
||||||
|
HttpResponse.json({ code: "UNAUTHORIZED" }, { status: 401 }),
|
||||||
|
));
|
||||||
const queryClient = createTestQueryClient();
|
const queryClient = createTestQueryClient();
|
||||||
queryClient.setQueryData(["cached-query"], { value: "stale" });
|
queryClient.setQueryData(["cached-query"], { value: "stale" });
|
||||||
queryClient.setQueryData(bankCardsKey, [{ id: "bank-card-1" }]);
|
queryClient.setQueryData(bankCardsKey, [{ id: "bank-card-1" }]);
|
||||||
@@ -103,12 +105,54 @@ describe("AuthProvider", () => {
|
|||||||
await waitFor(() => expect(result.current.ready).toBe(true));
|
await waitFor(() => expect(result.current.ready).toBe(true));
|
||||||
|
|
||||||
expect(result.current.user).toBeUndefined();
|
expect(result.current.user).toBeUndefined();
|
||||||
|
expect(result.current.unavailable).toBe(false);
|
||||||
expect(await requestAuthorization()).toBeNull();
|
expect(await requestAuthorization()).toBeNull();
|
||||||
expect(queryClient.getQueryData(["cached-query"])).toBeUndefined();
|
expect(queryClient.getQueryData(["cached-query"])).toBeUndefined();
|
||||||
expect(queryClient.getQueryData(bankCardsKey)).toBeUndefined();
|
expect(queryClient.getQueryData(bankCardsKey)).toBeUndefined();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("keeps the original protected 401 when serialized refresh has a transport error", async () => {
|
it.each([
|
||||||
|
["a transport error", () => HttpResponse.error()],
|
||||||
|
["a 502 from the proxy", () => new HttpResponse(null, { status: 502 })],
|
||||||
|
["a 503 problem", () => HttpResponse.json({ code: "INTERNAL_SERVER_ERROR" }, { status: 503 })],
|
||||||
|
])("settles as unavailable and keeps cached data when cold-start refresh gets %s", async (_name, failure) => {
|
||||||
|
server.use(http.post("*/api/v1/auth/refresh", failure));
|
||||||
|
const queryClient = createTestQueryClient();
|
||||||
|
queryClient.setQueryData(["cached-query"], { value: "kept" });
|
||||||
|
const wrapper: FC<PropsWithChildren> = createAuthWrapper(queryClient);
|
||||||
|
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||||
|
|
||||||
|
await waitFor(() => expect(result.current.ready).toBe(true));
|
||||||
|
|
||||||
|
expect(result.current.user).toBeUndefined();
|
||||||
|
expect(result.current.unavailable).toBe(true);
|
||||||
|
expect(queryClient.getQueryData(["cached-query"])).toEqual({ value: "kept" });
|
||||||
|
});
|
||||||
|
|
||||||
|
it("restores the session when retry succeeds after an outage", async () => {
|
||||||
|
let isOutage = true;
|
||||||
|
server.use(http.post("*/api/v1/auth/refresh", () =>
|
||||||
|
isOutage
|
||||||
|
? new HttpResponse(null, { status: 502 })
|
||||||
|
: HttpResponse.json({
|
||||||
|
accessToken: "restored-token",
|
||||||
|
user: { email: "user@example.com", id: "user-1" },
|
||||||
|
}),
|
||||||
|
));
|
||||||
|
const queryClient = createTestQueryClient();
|
||||||
|
const wrapper: FC<PropsWithChildren> = createAuthWrapper(queryClient);
|
||||||
|
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||||
|
|
||||||
|
await waitFor(() => expect(result.current.unavailable).toBe(true));
|
||||||
|
isOutage = false;
|
||||||
|
act(() => result.current.retry());
|
||||||
|
|
||||||
|
await waitFor(() => expect(result.current.user?.id).toBe("user-1"));
|
||||||
|
expect(result.current.unavailable).toBe(false);
|
||||||
|
expect(await requestAuthorization()).toBe("Bearer restored-token");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("keeps the original protected 401 and the session when serialized refresh has a transport error", async () => {
|
||||||
let refreshCalls = 0;
|
let refreshCalls = 0;
|
||||||
server.use(
|
server.use(
|
||||||
http.post("*/api/v1/auth/refresh", () => {
|
http.post("*/api/v1/auth/refresh", () => {
|
||||||
@@ -137,10 +181,11 @@ describe("AuthProvider", () => {
|
|||||||
const response = await apiClient.GET("/api/v1/brokerage-accounts");
|
const response = await apiClient.GET("/api/v1/brokerage-accounts");
|
||||||
|
|
||||||
expect(response.response.status).toBe(401);
|
expect(response.response.status).toBe(401);
|
||||||
await waitFor(() => expect(result.current.user).toBeUndefined());
|
// An unreachable server does not prove the session ended; the next 401 refreshes again.
|
||||||
expect(await requestAuthorization()).toBeNull();
|
await waitFor(() => expect(result.current.unavailable).toBe(true));
|
||||||
expect(queryClient.getQueryData(["cached-query"])).toBeUndefined();
|
expect(result.current.user?.id).toBe("user-1");
|
||||||
expect(queryClient.getQueryData(bankCardsKey)).toBeUndefined();
|
expect(queryClient.getQueryData(["cached-query"])).toEqual({ value: "stale" });
|
||||||
|
expect(queryClient.getQueryData(bankCardsKey)).toEqual([{ id: "bank-card-1" }]);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("clears connection status and financial cache independently on logout", async () => {
|
it("clears connection status and financial cache independently on logout", async () => {
|
||||||
|
|||||||
@@ -5,6 +5,9 @@ import { apiClient, configureAuthClient, type paths } from "@/shared/api";
|
|||||||
|
|
||||||
import { type User } from "./auth-context";
|
import { type User } from "./auth-context";
|
||||||
|
|
||||||
|
// A 5xx or network error means the server is unreachable, not that the session ended.
|
||||||
|
const HTTP_SERVER_ERROR = 500;
|
||||||
|
|
||||||
type Authentication
|
type Authentication
|
||||||
= paths["/api/v1/auth/login"]["post"]["responses"][200]["content"]["application/json"];
|
= paths["/api/v1/auth/login"]["post"]["responses"][200]["content"]["application/json"];
|
||||||
|
|
||||||
@@ -32,6 +35,8 @@ function useAuthProviderVm() {
|
|||||||
const accessTokenRef = useRef<string | undefined>(undefined);
|
const accessTokenRef = useRef<string | undefined>(undefined);
|
||||||
const [ready, setReady] = useState(false);
|
const [ready, setReady] = useState(false);
|
||||||
const [signedOut, setSignedOut] = useState(false);
|
const [signedOut, setSignedOut] = useState(false);
|
||||||
|
const [unavailable, setUnavailable] = useState(false);
|
||||||
|
const unavailableRef = useRef(false);
|
||||||
|
|
||||||
const generationRef = useRef(0);
|
const generationRef = useRef(0);
|
||||||
const userRef = useRef<undefined | User>(undefined);
|
const userRef = useRef<undefined | User>(undefined);
|
||||||
@@ -49,12 +54,18 @@ function useAuthProviderVm() {
|
|||||||
return next;
|
return next;
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const markUnavailable = useCallback((isUnavailable: boolean) => {
|
||||||
|
unavailableRef.current = isUnavailable;
|
||||||
|
setUnavailable(isUnavailable);
|
||||||
|
}, []);
|
||||||
|
|
||||||
const applyAuthentication = useCallback(
|
const applyAuthentication = useCallback(
|
||||||
(authentication: Authentication) => {
|
(authentication: Authentication) => {
|
||||||
const changedIdentity
|
const changedIdentity
|
||||||
= userRef.current && userRef.current.id !== authentication.user.id;
|
= userRef.current && userRef.current.id !== authentication.user.id;
|
||||||
|
|
||||||
setSignedOut(false);
|
setSignedOut(false);
|
||||||
|
markUnavailable(false);
|
||||||
accessTokenRef.current = authentication.accessToken;
|
accessTokenRef.current = authentication.accessToken;
|
||||||
|
|
||||||
if (changedIdentity) {
|
if (changedIdentity) {
|
||||||
@@ -67,16 +78,17 @@ function useAuthProviderVm() {
|
|||||||
userRef.current = authentication.user;
|
userRef.current = authentication.user;
|
||||||
setUser(authentication.user);
|
setUser(authentication.user);
|
||||||
},
|
},
|
||||||
[queryClient],
|
[markUnavailable, queryClient],
|
||||||
);
|
);
|
||||||
|
|
||||||
const clearSession = useCallback(() => {
|
const clearSession = useCallback(() => {
|
||||||
|
markUnavailable(false);
|
||||||
generationRef.current += 1;
|
generationRef.current += 1;
|
||||||
userRef.current = undefined;
|
userRef.current = undefined;
|
||||||
setUser(undefined);
|
setUser(undefined);
|
||||||
accessTokenRef.current = undefined;
|
accessTokenRef.current = undefined;
|
||||||
queryClient.clear();
|
queryClient.clear();
|
||||||
}, [queryClient]);
|
}, [markUnavailable, queryClient]);
|
||||||
|
|
||||||
const refresh = useCallback((): Promise<boolean> => {
|
const refresh = useCallback((): Promise<boolean> => {
|
||||||
if (refreshPromiseRef.current) return refreshPromiseRef.current;
|
if (refreshPromiseRef.current) return refreshPromiseRef.current;
|
||||||
@@ -86,11 +98,12 @@ function useAuthProviderVm() {
|
|||||||
if (started !== generationRef.current) return false;
|
if (started !== generationRef.current) return false;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const { data } = await apiClient.POST("/api/v1/auth/refresh");
|
const { data, response } = await apiClient.POST("/api/v1/auth/refresh");
|
||||||
if (started !== generationRef.current) return false;
|
if (started !== generationRef.current) return false;
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
clearSession();
|
if (response.status >= HTTP_SERVER_ERROR) markUnavailable(true);
|
||||||
|
else clearSession();
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
@@ -100,7 +113,7 @@ function useAuthProviderVm() {
|
|||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
catch {
|
catch {
|
||||||
if (started === generationRef.current) clearSession();
|
if (started === generationRef.current) markUnavailable(true);
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
@@ -112,7 +125,7 @@ function useAuthProviderVm() {
|
|||||||
refreshPromiseRef.current = pending;
|
refreshPromiseRef.current = pending;
|
||||||
|
|
||||||
return pending;
|
return pending;
|
||||||
}, [applyAuthentication, clearSession, serialize]);
|
}, [applyAuthentication, clearSession, markUnavailable, serialize]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
void refresh().finally(() => setReady(true));
|
void refresh().finally(() => setReady(true));
|
||||||
@@ -146,6 +159,7 @@ function useAuthProviderVm() {
|
|||||||
clear: clearSession,
|
clear: clearSession,
|
||||||
generation: () => generationRef.current,
|
generation: () => generationRef.current,
|
||||||
refresh,
|
refresh,
|
||||||
|
unavailable: () => unavailableRef.current,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
useEffect(() => () => configureAuthClient(), []);
|
useEffect(() => () => configureAuthClient(), []);
|
||||||
@@ -157,7 +171,9 @@ function useAuthProviderVm() {
|
|||||||
ready,
|
ready,
|
||||||
register: (email: string, password: string) =>
|
register: (email: string, password: string) =>
|
||||||
authenticate("/api/v1/auth/register", email, password),
|
authenticate("/api/v1/auth/register", email, password),
|
||||||
|
retry: () => void refresh(),
|
||||||
signedOut,
|
signedOut,
|
||||||
|
unavailable,
|
||||||
user,
|
user,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -30,4 +30,79 @@ describe("AuthForm", () => {
|
|||||||
await waitFor(() => expect(onSubmit).not.toHaveBeenCalled());
|
await waitFor(() => expect(onSubmit).not.toHaveBeenCalled());
|
||||||
expect(await screen.findByText("Пароли не совпадают")).toBeInTheDocument();
|
expect(await screen.findByText("Пароли не совпадают")).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it.each([
|
||||||
|
["register", "Регистрация", "Уже есть аккаунт? Войти"],
|
||||||
|
["login", "Вход", "Нет аккаунта? Зарегистрироваться"],
|
||||||
|
])("blocks the switch-auth link while %s is submitting", async (_mode, submitLabel, linkLabel) => {
|
||||||
|
const { promise, resolve } = Promise.withResolvers<void>();
|
||||||
|
const onSubmit = vi.fn(() => promise);
|
||||||
|
render(
|
||||||
|
<MantineProvider>
|
||||||
|
<MemoryRouter>
|
||||||
|
<AuthForm
|
||||||
|
onSubmit={onSubmit}
|
||||||
|
register={_mode === "register"}
|
||||||
|
/>
|
||||||
|
</MemoryRouter>
|
||||||
|
</MantineProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
fireEvent.change(screen.getByLabelText("Email"), {
|
||||||
|
target: { value: "user@example.com" },
|
||||||
|
});
|
||||||
|
fireEvent.change(screen.getByLabelText("Пароль"), {
|
||||||
|
target: { value: "a secure password" },
|
||||||
|
});
|
||||||
|
|
||||||
|
if (_mode === "register") {
|
||||||
|
fireEvent.change(screen.getByLabelText("Подтвердите пароль"), {
|
||||||
|
target: { value: "a secure password" },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
fireEvent.click(screen.getByRole("button", { name: submitLabel }));
|
||||||
|
|
||||||
|
await waitFor(() => expect(onSubmit).toHaveBeenCalled());
|
||||||
|
expect(screen.queryByRole("link", { name: linkLabel })).not.toBeInTheDocument();
|
||||||
|
expect(screen.getByRole("button", { name: linkLabel })).toBeDisabled();
|
||||||
|
|
||||||
|
resolve();
|
||||||
|
await screen.findByRole("link", { name: linkLabel });
|
||||||
|
});
|
||||||
|
|
||||||
|
// Register policy is 8..72 printable ASCII; login accepts legacy passwords.
|
||||||
|
it.each([
|
||||||
|
["register", "Регистрация", "пароль-пароль", false],
|
||||||
|
["register", "Регистрация", "passw😀rd", false],
|
||||||
|
["register", "Регистрация", "a".repeat(7), false],
|
||||||
|
["register", "Регистрация", "a".repeat(8), true],
|
||||||
|
["register", "Регистрация", "a".repeat(72), true],
|
||||||
|
["register", "Регистрация", "a".repeat(73), false],
|
||||||
|
["login", "Вход", "пароль-пароль", true],
|
||||||
|
])("%s submits password %j: %s", async (mode, submitLabel, password, submitted) => {
|
||||||
|
const onSubmit = vi.fn().mockResolvedValue(undefined);
|
||||||
|
|
||||||
|
render(
|
||||||
|
<MantineProvider>
|
||||||
|
<MemoryRouter>
|
||||||
|
<AuthForm onSubmit={onSubmit} register={mode === "register"} />
|
||||||
|
</MemoryRouter>
|
||||||
|
</MantineProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
fireEvent.change(screen.getByLabelText("Email"), { target: { value: "user@example.com" } });
|
||||||
|
fireEvent.change(screen.getByLabelText("Пароль"), { target: { value: password } });
|
||||||
|
|
||||||
|
if (mode === "register") {
|
||||||
|
fireEvent.change(screen.getByLabelText("Подтвердите пароль"), { target: { value: password } });
|
||||||
|
}
|
||||||
|
|
||||||
|
fireEvent.click(screen.getByRole("button", { name: submitLabel }));
|
||||||
|
|
||||||
|
await waitFor(() => expect(
|
||||||
|
screen.queryByText(/Пароль: от 8 до 72 символов/) === null,
|
||||||
|
).toBe(submitted));
|
||||||
|
expect(onSubmit).toHaveBeenCalledTimes(submitted ? 1 : 0);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import type { FC } from "react";
|
import type { FC, ReactNode } from "react";
|
||||||
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
import { Alert, Button, Fieldset, PasswordInput, Stack, TextInput } from "@mantine/core";
|
import { Alert, Button, Fieldset, PasswordInput, Stack, TextInput } from "@mantine/core";
|
||||||
@@ -15,7 +15,7 @@ import {
|
|||||||
|
|
||||||
type AuthFormProps = {
|
type AuthFormProps = {
|
||||||
onSubmit: (email: string, password: string) => Promise<void>;
|
onSubmit: (email: string, password: string) => Promise<void>;
|
||||||
register?: true;
|
register?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const AuthForm: FC<AuthFormProps> = (props) => {
|
const AuthForm: FC<AuthFormProps> = (props) => {
|
||||||
@@ -45,6 +45,24 @@ const AuthForm: FC<AuthFormProps> = (props) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const to = register ? "/login" : "/register";
|
const to = register ? "/login" : "/register";
|
||||||
|
const switchLabel = t(register ? "auth.haveAccount" : "auth.noAccount");
|
||||||
|
|
||||||
|
let switchLink: ReactNode;
|
||||||
|
|
||||||
|
if (isSubmitting) {
|
||||||
|
switchLink = (
|
||||||
|
<Button aria-disabled disabled variant="subtle">
|
||||||
|
{switchLabel}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
switchLink = (
|
||||||
|
<Button component={Link} to={to} variant="subtle">
|
||||||
|
{switchLabel}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FormProvider {...methods}>
|
<FormProvider {...methods}>
|
||||||
@@ -77,9 +95,7 @@ const AuthForm: FC<AuthFormProps> = (props) => {
|
|||||||
{t(register ? "auth.register" : "auth.login")}
|
{t(register ? "auth.register" : "auth.login")}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button component={Link} to={to} variant="subtle">
|
{switchLink}
|
||||||
{t(register ? "auth.haveAccount" : "auth.noAccount")}
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
</Stack>
|
||||||
</Fieldset>
|
</Fieldset>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -1,61 +1,73 @@
|
|||||||
import { describe, expect, it, vi } from "vitest";
|
import { describe, expect, it } from "vitest";
|
||||||
|
|
||||||
import { resource } from "@/test/resource";
|
import { resource } from "@/test/resource";
|
||||||
|
|
||||||
import { section } from "./section";
|
import { section } from "./section";
|
||||||
|
|
||||||
describe("instrument source and transport presentation", () => {
|
describe("instrument source and transport presentation", () => {
|
||||||
it.each(["missing", "partial", "complete"] as const)(
|
it.each([
|
||||||
|
["initial-loading", "incomplete"],
|
||||||
|
["available", "complete"],
|
||||||
|
] as const)(
|
||||||
"keeps %s separate from successful transport",
|
"keeps %s separate from successful transport",
|
||||||
(availability) => {
|
(availability, completeness) => {
|
||||||
const data = availability === "missing" ? undefined : { rows: [] };
|
const data = availability === "initial-loading" ? undefined : { rows: [] };
|
||||||
|
|
||||||
const state = section({
|
const state = section({
|
||||||
data,
|
data,
|
||||||
isError: false,
|
isError: false,
|
||||||
isFetching: false,
|
meta: resource(data, { availability, completeness }).meta,
|
||||||
meta: resource(data, { availability }).meta,
|
|
||||||
refetch: vi.fn(),
|
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(state.loading).toBe(availability === "missing");
|
expect(state.loading).toBe(availability === "initial-loading");
|
||||||
expect(state.partial).toBe(availability === "partial");
|
expect(state.partial).toBe(completeness === "incomplete");
|
||||||
expect(state.hasData).toBe(availability !== "missing");
|
expect(state.hasData).toBe(availability !== "initial-loading");
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
it("preserves a full fresh source and timestamp when force fails, while offering scoped retry", () => {
|
it("preserves empty successful data instead of treating it as missing", () => {
|
||||||
const retry = vi.fn();
|
const state = section({
|
||||||
const refetch = vi.fn();
|
data: [],
|
||||||
|
isError: false,
|
||||||
|
meta: resource([]).meta,
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(state).toMatchObject({
|
||||||
|
error: false,
|
||||||
|
hasData: true,
|
||||||
|
loading: false,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("preserves a full source when force fails", () => {
|
||||||
const meta = resource([], {
|
const meta = resource([], {
|
||||||
sync: { errorCode: "TBANK_UNAVAILABLE", id: "work", state: "failed" },
|
lastAttempt: {
|
||||||
|
finishedAt: "2026-08-14T00:01:00Z",
|
||||||
|
problems: [],
|
||||||
|
startedAt: "2026-08-14T00:00:00Z",
|
||||||
|
state: "failed",
|
||||||
|
},
|
||||||
}).meta;
|
}).meta;
|
||||||
|
|
||||||
const state = section(
|
const state = section({ data: [], isError: false, meta });
|
||||||
{ data: [], isError: false, isFetching: false, meta, refetch },
|
|
||||||
retry,
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(state).toMatchObject({
|
expect(state).toMatchObject({
|
||||||
error: true,
|
error: true,
|
||||||
hasData: true,
|
hasData: true,
|
||||||
lastSuccessfulAt: meta.lastSuccessfulAt,
|
|
||||||
loading: false,
|
loading: false,
|
||||||
refreshing: false,
|
|
||||||
});
|
});
|
||||||
state.retry();
|
|
||||||
expect(retry).toHaveBeenCalledOnce();
|
|
||||||
expect(refetch).not.toHaveBeenCalled();
|
|
||||||
});
|
});
|
||||||
it("shows source failure without a false loading or empty result", () => {
|
it("shows source failure without a false loading or empty result", () => {
|
||||||
const state = section({
|
const state = section({
|
||||||
data: undefined,
|
data: undefined,
|
||||||
isError: false,
|
isError: false,
|
||||||
isFetching: false,
|
|
||||||
meta: resource(null, {
|
meta: resource(null, {
|
||||||
sync: { errorCode: "TBANK_UNAVAILABLE", id: "work", state: "failed" },
|
lastAttempt: {
|
||||||
|
finishedAt: "2026-08-14T00:01:00Z",
|
||||||
|
problems: [],
|
||||||
|
startedAt: "2026-08-14T00:00:00Z",
|
||||||
|
state: "failed",
|
||||||
|
},
|
||||||
}).meta,
|
}).meta,
|
||||||
refetch: vi.fn(),
|
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(state).toMatchObject({
|
expect(state).toMatchObject({
|
||||||
|
|||||||
@@ -3,43 +3,27 @@ import type { InvestmentResourceMeta } from "@/shared/api";
|
|||||||
type SectionState = {
|
type SectionState = {
|
||||||
error: boolean;
|
error: boolean;
|
||||||
hasData: boolean;
|
hasData: boolean;
|
||||||
lastSuccessfulAt?: null | string;
|
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
partial?: boolean;
|
partial?: boolean;
|
||||||
refreshing: boolean;
|
|
||||||
retry: () => void;
|
|
||||||
sourceError?: boolean;
|
|
||||||
stale?: boolean;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
function section(
|
function hasSectionData(data: unknown) {
|
||||||
query: {
|
return data !== undefined;
|
||||||
data: unknown;
|
}
|
||||||
isError: boolean;
|
|
||||||
isFetching: boolean;
|
function section(query: {
|
||||||
meta?: InvestmentResourceMeta;
|
data: unknown;
|
||||||
refetch: () => unknown;
|
isError: boolean;
|
||||||
},
|
meta?: InvestmentResourceMeta;
|
||||||
retry?: () => unknown,
|
}): SectionState {
|
||||||
): SectionState {
|
const isError = query.isError || query.meta?.lastAttempt.state === "failed";
|
||||||
const isError = query.isError || query.meta?.sync.state === "failed";
|
const hasData = hasSectionData(query.data);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
error: isError,
|
error: isError,
|
||||||
hasData: Boolean(query.data),
|
hasData,
|
||||||
lastSuccessfulAt: query.meta?.lastSuccessfulAt,
|
loading: !hasData && !isError,
|
||||||
loading: !query.data && !isError,
|
partial: query.meta?.completeness === "incomplete",
|
||||||
partial: query.meta?.availability === "partial",
|
|
||||||
refreshing:
|
|
||||||
Boolean(query.data)
|
|
||||||
&& (query.isFetching
|
|
||||||
|| query.meta?.sync.state === "running"
|
|
||||||
),
|
|
||||||
retry: () => {
|
|
||||||
void (retry ?? query.refetch)();
|
|
||||||
},
|
|
||||||
sourceError: query.meta?.sync.state === "failed",
|
|
||||||
stale: query.meta?.freshness === "stale",
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -86,7 +86,7 @@ const InstrumentEvents: FC<InstrumentEventsProps> = (props) => {
|
|||||||
|
|
||||||
<Group justify="space-between" mt="md">
|
<Group justify="space-between" mt="md">
|
||||||
<Button
|
<Button
|
||||||
disabled={!vm.hasPrevious || vm.operationsState.refreshing}
|
disabled={!vm.hasPrevious}
|
||||||
onClick={vm.onPrevious}
|
onClick={vm.onPrevious}
|
||||||
variant="default"
|
variant="default"
|
||||||
>
|
>
|
||||||
@@ -94,7 +94,7 @@ const InstrumentEvents: FC<InstrumentEventsProps> = (props) => {
|
|||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
disabled={!vm.operations.hasNext || vm.operationsState.refreshing}
|
disabled={!vm.operations.hasNext}
|
||||||
onClick={vm.onNext}
|
onClick={vm.onNext}
|
||||||
variant="default"
|
variant="default"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -1,21 +1,17 @@
|
|||||||
import type { FC, PropsWithChildren, ReactNode } from "react";
|
import type { FC, PropsWithChildren, ReactNode } from "react";
|
||||||
|
|
||||||
import { Avatar, Button, Group, Paper, Text, Title } from "@mantine/core";
|
import { Avatar, Group, Paper, Text, Title } from "@mantine/core";
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
|
|
||||||
import classes from "./InstrumentHeader.module.css";
|
import classes from "./InstrumentHeader.module.css";
|
||||||
|
|
||||||
type InstrumentHeaderProps = PropsWithChildren<{
|
type InstrumentHeaderProps = PropsWithChildren<{
|
||||||
logoSrc: null | string;
|
logoSrc: null | string;
|
||||||
name: string;
|
name: string;
|
||||||
onRefresh: () => void;
|
|
||||||
refreshing: boolean;
|
|
||||||
subtitle: ReactNode;
|
subtitle: ReactNode;
|
||||||
}>;
|
}>;
|
||||||
|
|
||||||
const InstrumentHeader: FC<InstrumentHeaderProps> = (props) => {
|
const InstrumentHeader: FC<InstrumentHeaderProps> = (props) => {
|
||||||
const { children, logoSrc, name, onRefresh, refreshing, subtitle } = props;
|
const { children, logoSrc, name, subtitle } = props;
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Paper className={classes.header} component="header" withBorder>
|
<Paper className={classes.header} component="header" withBorder>
|
||||||
@@ -31,10 +27,6 @@ const InstrumentHeader: FC<InstrumentHeaderProps> = (props) => {
|
|||||||
<Text c="dimmed" size="sm">{subtitle}</Text>
|
<Text c="dimmed" size="sm">{subtitle}</Text>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button disabled={refreshing} onClick={onRefresh} variant="subtle">
|
|
||||||
{t("investment.refresh")}
|
|
||||||
</Button>
|
|
||||||
</Group>
|
</Group>
|
||||||
|
|
||||||
{children}
|
{children}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import type { FC } from "react";
|
import type { FC } from "react";
|
||||||
|
|
||||||
import { Anchor, Button, Skeleton, Stack, Text, Title } from "@mantine/core";
|
import { Anchor, Skeleton, Stack, Text, Title } from "@mantine/core";
|
||||||
import { LoadingSkeleton } from "@wealthledger/ui";
|
import { LoadingSkeleton } from "@wealthledger/ui";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { Link } from "react-router";
|
import { Link } from "react-router";
|
||||||
@@ -11,11 +11,10 @@ type InstrumentPageStateProps = {
|
|||||||
code?: string;
|
code?: string;
|
||||||
kind: "bond" | "stock";
|
kind: "bond" | "stock";
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
retry: () => void;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const InstrumentPageState: FC<InstrumentPageStateProps> = (props) => {
|
const InstrumentPageState: FC<InstrumentPageStateProps> = (props) => {
|
||||||
const { code, kind, loading, retry } = props;
|
const { code, kind, loading } = props;
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
if (loading) return (
|
if (loading) return (
|
||||||
<LoadingSkeleton label={t(`${kind}.loading`)}>
|
<LoadingSkeleton label={t(`${kind}.loading`)}>
|
||||||
@@ -55,10 +54,6 @@ const InstrumentPageState: FC<InstrumentPageStateProps> = (props) => {
|
|||||||
<Anchor component={Link} to="/settings">
|
<Anchor component={Link} to="/settings">
|
||||||
{t("accounts.openSettings")}
|
{t("accounts.openSettings")}
|
||||||
</Anchor>
|
</Anchor>
|
||||||
|
|
||||||
<Button onClick={retry} variant="default">
|
|
||||||
{t("accounts.retry")}
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
</Stack>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import type { FC, PropsWithChildren, ReactNode } from "react";
|
|||||||
|
|
||||||
import {
|
import {
|
||||||
Alert,
|
Alert,
|
||||||
Button,
|
|
||||||
Group,
|
Group,
|
||||||
Paper,
|
Paper,
|
||||||
Skeleton,
|
Skeleton,
|
||||||
@@ -13,8 +12,6 @@ import {
|
|||||||
import { LoadingSkeleton } from "@wealthledger/ui";
|
import { LoadingSkeleton } from "@wealthledger/ui";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
import { SourceSyncStatus } from "@/shared/ui";
|
|
||||||
|
|
||||||
import type { SectionState } from "../model/section";
|
import type { SectionState } from "../model/section";
|
||||||
|
|
||||||
import classes from "./InstrumentDetails.module.css";
|
import classes from "./InstrumentDetails.module.css";
|
||||||
@@ -33,10 +30,6 @@ type InstrumentSectionProps = PropsWithChildren<{
|
|||||||
const InstrumentSection: FC<InstrumentSectionProps> = (props) => {
|
const InstrumentSection: FC<InstrumentSectionProps> = (props) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const readError = t(
|
|
||||||
props.state.hasData ? "accounts.refreshError" : "stock.sectionError",
|
|
||||||
);
|
|
||||||
|
|
||||||
const sectionClassName = props.embedded
|
const sectionClassName = props.embedded
|
||||||
? classes.embeddedSection
|
? classes.embeddedSection
|
||||||
: classes.section;
|
: classes.section;
|
||||||
@@ -80,35 +73,11 @@ const InstrumentSection: FC<InstrumentSectionProps> = (props) => {
|
|||||||
{props.controls}
|
{props.controls}
|
||||||
</Group>
|
</Group>
|
||||||
|
|
||||||
<SourceSyncStatus
|
|
||||||
lastSuccessfulAt={props.state.lastSuccessfulAt}
|
|
||||||
stale={props.state.stale}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{!!props.state.partial && <Text role="status">{t("investment.partial")}</Text>}
|
{!!props.state.partial && <Text role="status">{t("investment.partial")}</Text>}
|
||||||
|
|
||||||
{!!props.state.refreshing && (
|
{!!(props.state.error && !props.state.hasData) && (
|
||||||
<Text c="dimmed" role="status" size="xs">
|
|
||||||
{t("accounts.refreshing")}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!!props.state.error && (
|
|
||||||
<Alert aria-live="polite" color="orange" mb="sm" role="status">
|
<Alert aria-live="polite" color="orange" mb="sm" role="status">
|
||||||
<Group justify="space-between">
|
<Text size="sm">{t("stock.sectionError")}</Text>
|
||||||
<Text size="sm">
|
|
||||||
{props.state.sourceError ? t("investment.syncFailed") : readError}
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
disabled={props.state.refreshing}
|
|
||||||
onClick={props.state.retry}
|
|
||||||
size="xs"
|
|
||||||
variant="default"
|
|
||||||
>
|
|
||||||
{t("accounts.retry")}
|
|
||||||
</Button>
|
|
||||||
</Group>
|
|
||||||
</Alert>
|
</Alert>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import type { ComponentProps } from "react";
|
import type { ComponentProps } from "react";
|
||||||
|
|
||||||
import { MantineProvider } from "@mantine/core";
|
import { MantineProvider } from "@mantine/core";
|
||||||
import { fireEvent, render, screen } from "@testing-library/react";
|
import { render, screen } from "@testing-library/react";
|
||||||
import { MemoryRouter } from "react-router";
|
import { MemoryRouter } from "react-router";
|
||||||
import { expect, it, vi } from "vitest";
|
import { expect, it, vi } from "vitest";
|
||||||
|
|
||||||
@@ -16,8 +16,6 @@ it("keeps cached results on failure, hides them during a new search and distingu
|
|||||||
partial: false,
|
partial: false,
|
||||||
query: "SBER",
|
query: "SBER",
|
||||||
ready: true,
|
ready: true,
|
||||||
refreshing: false,
|
|
||||||
retry: vi.fn(),
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const cached = [<a href="/stocks/SBER" key="SBER">Сбербанк</a>];
|
const cached = [<a href="/stocks/SBER" key="SBER">Сбербанк</a>];
|
||||||
@@ -44,8 +42,7 @@ it("keeps cached results on failure, hides them during a new search and distingu
|
|||||||
expect(
|
expect(
|
||||||
screen.getByRole("link", { name: "Открыть настройки T-Bank" }),
|
screen.getByRole("link", { name: "Открыть настройки T-Bank" }),
|
||||||
).toHaveAttribute("href", "/settings");
|
).toHaveAttribute("href", "/settings");
|
||||||
fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
|
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
|
||||||
expect(vm.retry).toHaveBeenCalledOnce();
|
|
||||||
|
|
||||||
rerender(view({ loading: true, ready: false }));
|
rerender(view({ loading: true, ready: false }));
|
||||||
expect(screen.queryByRole("link", { name: "Сбербанк" })).not.toBeInTheDocument();
|
expect(screen.queryByRole("link", { name: "Сбербанк" })).not.toBeInTheDocument();
|
||||||
|
|||||||
@@ -3,7 +3,6 @@ import type { ChangeEvent, FC, ReactNode } from "react";
|
|||||||
import {
|
import {
|
||||||
Alert,
|
Alert,
|
||||||
Anchor,
|
Anchor,
|
||||||
Button,
|
|
||||||
Skeleton,
|
Skeleton,
|
||||||
Stack,
|
Stack,
|
||||||
Text,
|
Text,
|
||||||
@@ -28,8 +27,6 @@ type InstrumentSearchProps = {
|
|||||||
partial: boolean;
|
partial: boolean;
|
||||||
query: string;
|
query: string;
|
||||||
ready: boolean;
|
ready: boolean;
|
||||||
refreshing: boolean;
|
|
||||||
retry: () => void;
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -77,14 +74,6 @@ const InstrumentSearch: FC<InstrumentSearchProps> = (props) => {
|
|||||||
</Text>
|
</Text>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button
|
|
||||||
disabled={vm.refreshing || !vm.canSearch}
|
|
||||||
onClick={vm.retry}
|
|
||||||
w="fit-content"
|
|
||||||
>
|
|
||||||
{t("investment.refresh")}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{!!vm.partial && <Alert role="status">{t("investment.partial")}</Alert>}
|
{!!vm.partial && <Alert role="status">{t("investment.partial")}</Alert>}
|
||||||
|
|
||||||
<TextInput
|
<TextInput
|
||||||
@@ -114,9 +103,6 @@ const InstrumentSearch: FC<InstrumentSearchProps> = (props) => {
|
|||||||
{t("accounts.openSettings")}
|
{t("accounts.openSettings")}
|
||||||
</Anchor>
|
</Anchor>
|
||||||
|
|
||||||
<Button onClick={vm.retry} variant="default">
|
|
||||||
{t("accounts.retry")}
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
</Stack>
|
||||||
</Alert>
|
</Alert>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -1,6 +1,2 @@
|
|||||||
export { useScreenSync } from "./model/screen-sync";
|
export { useScreenSync } from "./model/screen-sync";
|
||||||
export {
|
|
||||||
InvestmentRefreshState,
|
|
||||||
type InvestmentRefreshStateProps,
|
|
||||||
} from "./ui/InvestmentRefreshState/InvestmentRefreshState.view";
|
|
||||||
export { TbankConnectionSection } from "./ui/TbankConnectionSection/TbankConnectionSection";
|
export { TbankConnectionSection } from "./ui/TbankConnectionSection/TbankConnectionSection";
|
||||||
|
|||||||
@@ -13,7 +13,6 @@ function isInvestmentPath(path: string) {
|
|||||||
"/api/v1/brokerage-accounts",
|
"/api/v1/brokerage-accounts",
|
||||||
"/api/v1/stocks",
|
"/api/v1/stocks",
|
||||||
"/api/v1/bonds",
|
"/api/v1/bonds",
|
||||||
"/api/v1/tbank-sync",
|
|
||||||
].some(root => path === root || path.startsWith(`${root}/`));
|
].some(root => path === root || path.startsWith(`${root}/`));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -3,14 +3,12 @@ import { http, HttpResponse } from "msw";
|
|||||||
import { describe, expect, it, vi } from "vitest";
|
import { describe, expect, it, vi } from "vitest";
|
||||||
|
|
||||||
import { useBrokerageAccounts } from "@/entities/brokerage-account";
|
import { useBrokerageAccounts } from "@/entities/brokerage-account";
|
||||||
import { useStockQuote } from "@/entities/stock";
|
import { configureAuthClient } from "@/shared/api";
|
||||||
import { configureAuthClient, invalidateResourceAccess } from "@/shared/api";
|
|
||||||
import { createQueryWrapper } from "@/test/query";
|
import { createQueryWrapper } from "@/test/query";
|
||||||
import { resource } from "@/test/resource";
|
import { resource } from "@/test/resource";
|
||||||
import { server } from "@/test/server";
|
import { server } from "@/test/server";
|
||||||
|
|
||||||
import { useScreenSync } from "../index";
|
import { useScreenSync } from "../index";
|
||||||
import { commitTbankConnectionBoundary } from "./connection-boundary";
|
|
||||||
|
|
||||||
function auth() {
|
function auth() {
|
||||||
configureAuthClient({
|
configureAuthClient({
|
||||||
@@ -20,355 +18,23 @@ function auth() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
describe("page-owned screen synchronization", () => {
|
describe("read-only screen synchronization", () => {
|
||||||
it("keeps the current scope when an older sync acceptance arrives last", async () => {
|
it("retries the resource with GET without requesting source observation", async () => {
|
||||||
auth();
|
auth();
|
||||||
|
let gets = 0;
|
||||||
const { promise: blocked, resolve: release }
|
const syncModes: (null | string)[] = [];
|
||||||
= Promise.withResolvers<void>();
|
|
||||||
|
|
||||||
const posted: string[] = [];
|
|
||||||
const polled: string[] = [];
|
|
||||||
server.use(
|
|
||||||
http.post("*/api/v1/tbank-sync", async ({ request }) => {
|
|
||||||
const scope = (await request.json()) as {
|
|
||||||
accountId: string;
|
|
||||||
screen: "account";
|
|
||||||
};
|
|
||||||
|
|
||||||
posted.push(scope.accountId);
|
|
||||||
if (scope.accountId === "old") await blocked;
|
|
||||||
|
|
||||||
return HttpResponse.json(
|
|
||||||
{ id: scope.accountId, now: "2026-09-25T00:00:00Z", scope },
|
|
||||||
{ status: 202 },
|
|
||||||
);
|
|
||||||
}),
|
|
||||||
http.get("*/api/v1/tbank-sync/:id", ({ params }) => {
|
|
||||||
polled.push(String(params.id));
|
|
||||||
|
|
||||||
return HttpResponse.json({
|
|
||||||
id: params.id,
|
|
||||||
state: "succeeded",
|
|
||||||
});
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
const { rerender, result } = renderHook(
|
|
||||||
({ accountId }) => useScreenSync({ accountId, screen: "account" }, []),
|
|
||||||
{
|
|
||||||
initialProps: { accountId: "old" },
|
|
||||||
wrapper: createQueryWrapper().wrapper,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
let pending!: Promise<void>;
|
|
||||||
act(() => {
|
|
||||||
pending = result.current.refresh();
|
|
||||||
});
|
|
||||||
await waitFor(() => expect(posted).toEqual(["old"]));
|
|
||||||
rerender({ accountId: "new" });
|
|
||||||
await act(() => result.current.refresh());
|
|
||||||
await waitFor(() => expect(polled).toEqual(["new"]));
|
|
||||||
await act(async () => {
|
|
||||||
release();
|
|
||||||
await pending;
|
|
||||||
});
|
|
||||||
expect(polled).toEqual(["new"]);
|
|
||||||
expect(posted).toEqual(["old", "new"]);
|
|
||||||
});
|
|
||||||
it.each([false, true])(
|
|
||||||
"retries a failed GET without forcing the source (cached=%s)",
|
|
||||||
async (cached) => {
|
|
||||||
auth();
|
|
||||||
const modes: (null | string)[] = [];
|
|
||||||
let isUnavailable = !cached;
|
|
||||||
let posts = 0;
|
|
||||||
server.use(
|
|
||||||
http.get("*/api/v1/brokerage-accounts", ({ request }) => {
|
|
||||||
modes.push(new URL(request.url).searchParams.get("sync"));
|
|
||||||
|
|
||||||
return isUnavailable
|
|
||||||
? HttpResponse.json({ code: "UNAVAILABLE" }, { status: 503 })
|
|
||||||
: HttpResponse.json(
|
|
||||||
resource([], { dataRevision: String(modes.length) }),
|
|
||||||
);
|
|
||||||
}),
|
|
||||||
http.post("*/api/v1/tbank-sync", () => {
|
|
||||||
posts += 1;
|
|
||||||
|
|
||||||
return new HttpResponse(null, { status: 500 });
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
const { queryClient, wrapper } = createQueryWrapper();
|
|
||||||
|
|
||||||
const { result } = renderHook(
|
|
||||||
() => {
|
|
||||||
const accounts = useBrokerageAccounts();
|
|
||||||
const disabled = useStockQuote("");
|
|
||||||
|
|
||||||
return {
|
|
||||||
accounts,
|
|
||||||
disabled,
|
|
||||||
sync: useScreenSync({ screen: "accounts" }, [accounts, disabled]),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
{ wrapper },
|
|
||||||
);
|
|
||||||
|
|
||||||
if (cached) {
|
|
||||||
await waitFor(() =>
|
|
||||||
// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
|
|
||||||
expect(result.current.accounts.isSuccess).toBe(true),
|
|
||||||
);
|
|
||||||
isUnavailable = true;
|
|
||||||
await act(() => result.current.accounts.refetch());
|
|
||||||
}
|
|
||||||
|
|
||||||
await waitFor(() => expect(result.current.accounts.isError).toBe(true));
|
|
||||||
isUnavailable = false;
|
|
||||||
await act(() => result.current.sync.retry());
|
|
||||||
await waitFor(() => expect(result.current.accounts.isSuccess).toBe(true));
|
|
||||||
expect(result.current.accounts.meta?.dataRevision).toBe(
|
|
||||||
cached ? "3" : "2",
|
|
||||||
);
|
|
||||||
expect(modes).toEqual(
|
|
||||||
cached
|
|
||||||
? [
|
|
||||||
null,
|
|
||||||
null,
|
|
||||||
"observe",
|
|
||||||
]
|
|
||||||
: [null, "observe"],
|
|
||||||
);
|
|
||||||
expect(posts).toBe(0);
|
|
||||||
expect(result.current.disabled.data).toBeUndefined();
|
|
||||||
expect(
|
|
||||||
queryClient
|
|
||||||
.getQueryCache()
|
|
||||||
.findAll({ queryKey: ["get", "/api/v1/brokerage-accounts"] }),
|
|
||||||
).toHaveLength(1);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
it.each([
|
|
||||||
["logout", true],
|
|
||||||
["connection", true],
|
|
||||||
["session", false],
|
|
||||||
["connection", false],
|
|
||||||
["access", false],
|
|
||||||
] as const)(
|
|
||||||
"discards recovery after %s changes (HTTP already pending=%s)",
|
|
||||||
async (boundary, pending) => {
|
|
||||||
auth();
|
|
||||||
|
|
||||||
const { promise: blocked, resolve: release }
|
|
||||||
= Promise.withResolvers<void>();
|
|
||||||
|
|
||||||
let isRecovering = false;
|
|
||||||
let isChanged = false;
|
|
||||||
server.use(
|
|
||||||
http.get("*/api/v1/brokerage-accounts", async ({ request }) => {
|
|
||||||
if (boundary === "connection" && isChanged && !request.signal.aborted)
|
|
||||||
return HttpResponse.json(resource([], { dataRevision: "current" }));
|
|
||||||
if (!new URL(request.url).searchParams.has("sync"))
|
|
||||||
return isChanged
|
|
||||||
? HttpResponse.json(resource([], { dataRevision: "current" }))
|
|
||||||
: HttpResponse.json({ code: "UNAVAILABLE" }, { status: 503 });
|
|
||||||
isRecovering = true;
|
|
||||||
await blocked;
|
|
||||||
|
|
||||||
return HttpResponse.json(resource([], { dataRevision: "old" }));
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
const { queryClient, wrapper } = createQueryWrapper();
|
|
||||||
const published: unknown[] = [];
|
|
||||||
|
|
||||||
const unsubscribe = queryClient.getQueryCache().subscribe((event) => {
|
|
||||||
if (event.type === "updated" && event.action.type === "success")
|
|
||||||
published.push(event.query.state.data);
|
|
||||||
});
|
|
||||||
|
|
||||||
const { result } = renderHook(
|
|
||||||
() => {
|
|
||||||
const accounts = useBrokerageAccounts();
|
|
||||||
|
|
||||||
return {
|
|
||||||
accounts,
|
|
||||||
sync: useScreenSync({ screen: "accounts" }, [accounts]),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
{ wrapper },
|
|
||||||
);
|
|
||||||
|
|
||||||
await waitFor(() => expect(result.current.accounts.isError).toBe(true));
|
|
||||||
let recovery!: Promise<void>;
|
|
||||||
act(() => {
|
|
||||||
recovery = result.current.sync.retry();
|
|
||||||
});
|
|
||||||
// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
|
|
||||||
if (pending) await waitFor(() => expect(isRecovering).toBe(true));
|
|
||||||
await act(async () => {
|
|
||||||
isChanged = true;
|
|
||||||
|
|
||||||
switch (boundary) {
|
|
||||||
case "access": {
|
|
||||||
invalidateResourceAccess(queryClient, "brokerage", {
|
|
||||||
code: "FORBIDDEN",
|
|
||||||
});
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
case "logout": {
|
|
||||||
configureAuthClient();
|
|
||||||
queryClient.clear();
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
case "session": {
|
|
||||||
auth();
|
|
||||||
queryClient.clear();
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
case "connection": {
|
|
||||||
commitTbankConnectionBoundary(queryClient, {
|
|
||||||
connected: true,
|
|
||||||
connectedAt: "2026-09-27T00:00:00Z",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
release();
|
|
||||||
await recovery;
|
|
||||||
});
|
|
||||||
if (boundary === "connection")
|
|
||||||
await waitFor(() =>
|
|
||||||
// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
|
|
||||||
expect(result.current.accounts.meta?.dataRevision).toBe("current"),
|
|
||||||
);
|
|
||||||
expect(published).not.toContainEqual(
|
|
||||||
expect.objectContaining({
|
|
||||||
meta: expect.objectContaining({ dataRevision: "old" }) as unknown,
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
unsubscribe();
|
|
||||||
},
|
|
||||||
);
|
|
||||||
it.each([false, true])(
|
|
||||||
"recovers an initial GET failure after forced sync without metadata (status retry=%s)",
|
|
||||||
async (retryStatus) => {
|
|
||||||
auth();
|
|
||||||
const modes: (null | string)[] = [];
|
|
||||||
let polls = 0;
|
|
||||||
server.use(
|
|
||||||
http.get("*/api/v1/brokerage-accounts", ({ request }) => {
|
|
||||||
modes.push(new URL(request.url).searchParams.get("sync"));
|
|
||||||
|
|
||||||
return modes.length === 1
|
|
||||||
? HttpResponse.json({ code: "UNAVAILABLE" }, { status: 503 })
|
|
||||||
: HttpResponse.json(resource([]));
|
|
||||||
}),
|
|
||||||
http.post("*/api/v1/tbank-sync", () =>
|
|
||||||
HttpResponse.json({ id: "recover" }, { status: 202 }),
|
|
||||||
),
|
|
||||||
http.get("*/api/v1/tbank-sync/:id", () => {
|
|
||||||
polls += 1;
|
|
||||||
|
|
||||||
return retryStatus && polls === 1
|
|
||||||
? HttpResponse.json({ code: "UNAVAILABLE" }, { status: 503 })
|
|
||||||
: HttpResponse.json({
|
|
||||||
id: "recover",
|
|
||||||
state: "succeeded",
|
|
||||||
});
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
const { queryClient, wrapper } = createQueryWrapper();
|
|
||||||
|
|
||||||
const { result } = renderHook(
|
|
||||||
() => {
|
|
||||||
const accounts = useBrokerageAccounts();
|
|
||||||
const disabled = useStockQuote("");
|
|
||||||
|
|
||||||
return {
|
|
||||||
accounts,
|
|
||||||
sync: useScreenSync({ screen: "accounts" }, [accounts, disabled]),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
{ wrapper },
|
|
||||||
);
|
|
||||||
|
|
||||||
await waitFor(() => expect(result.current.accounts.isError).toBe(true));
|
|
||||||
expect(result.current.accounts.meta).toBeUndefined();
|
|
||||||
await act(() => result.current.sync.refresh());
|
|
||||||
|
|
||||||
if (retryStatus) {
|
|
||||||
await waitFor(() =>
|
|
||||||
// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
|
|
||||||
expect(result.current.sync.transportError).toBe(true),
|
|
||||||
);
|
|
||||||
await act(() => result.current.sync.retry());
|
|
||||||
}
|
|
||||||
|
|
||||||
await waitFor(() => expect(result.current.accounts.isSuccess).toBe(true));
|
|
||||||
expect(result.current.accounts.data).toEqual([]);
|
|
||||||
|
|
||||||
expect(modes[0]).toBeNull();
|
|
||||||
expect(modes.slice(1).every(mode => mode === "observe")).toBe(true);
|
|
||||||
expect(
|
|
||||||
queryClient
|
|
||||||
.getQueryCache()
|
|
||||||
.findAll({ queryKey: ["get", "/api/v1/brokerage-accounts"] }),
|
|
||||||
).toHaveLength(1);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
it("posts only its scope once and observes completion without importing again", async () => {
|
|
||||||
auth();
|
|
||||||
const modes: (null | string)[] = [];
|
|
||||||
const bodies: unknown[] = [];
|
|
||||||
let isCompleted = false;
|
|
||||||
let polls = 0;
|
|
||||||
|
|
||||||
const meta = () =>
|
|
||||||
resource([], { dataRevision: isCompleted ? "2" : "1" }).meta;
|
|
||||||
|
|
||||||
server.use(
|
server.use(
|
||||||
http.get("*/api/v1/brokerage-accounts", ({ request }) => {
|
http.get("*/api/v1/brokerage-accounts", ({ request }) => {
|
||||||
modes.push(new URL(request.url).searchParams.get("sync"));
|
gets += 1;
|
||||||
|
syncModes.push(new URL(request.url).searchParams.get("sync"));
|
||||||
|
|
||||||
return HttpResponse.json(resource([], meta()));
|
return gets === 1
|
||||||
}),
|
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
|
||||||
http.post("*/api/v1/tbank-sync", async ({ request }) => {
|
: HttpResponse.json(resource([]));
|
||||||
bodies.push(await request.json());
|
|
||||||
isCompleted = true;
|
|
||||||
|
|
||||||
return HttpResponse.json(
|
|
||||||
{
|
|
||||||
id: "screen",
|
|
||||||
now: "2026-09-25T00:00:00Z",
|
|
||||||
scope: { screen: "accounts" },
|
|
||||||
},
|
|
||||||
{ status: 202 },
|
|
||||||
);
|
|
||||||
}),
|
|
||||||
http.get("*/api/v1/tbank-sync/:id", () => {
|
|
||||||
polls++;
|
|
||||||
|
|
||||||
return HttpResponse.json(
|
|
||||||
{
|
|
||||||
errorCode: null,
|
|
||||||
id: "screen",
|
|
||||||
now: "2026-09-25T00:00:00Z",
|
|
||||||
scope: { screen: "accounts" },
|
|
||||||
state: "succeeded",
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
const { result, unmount } = renderHook(
|
const { result } = renderHook(
|
||||||
() => {
|
() => {
|
||||||
const accounts = useBrokerageAccounts();
|
const accounts = useBrokerageAccounts();
|
||||||
|
|
||||||
@@ -380,251 +46,67 @@ describe("page-owned screen synchronization", () => {
|
|||||||
{ wrapper: createQueryWrapper().wrapper },
|
{ wrapper: createQueryWrapper().wrapper },
|
||||||
);
|
);
|
||||||
|
|
||||||
|
await waitFor(() => expect(gets).toBe(1));
|
||||||
|
await act(async () => result.current.sync.retry());
|
||||||
await waitFor(() => expect(result.current.accounts.data).toEqual([]));
|
await waitFor(() => expect(result.current.accounts.data).toEqual([]));
|
||||||
await act(async () => {
|
|
||||||
await Promise.all([
|
|
||||||
result.current.sync.refresh(),
|
|
||||||
result.current.sync.refresh(),
|
|
||||||
]);
|
|
||||||
});
|
|
||||||
await waitFor(() =>
|
|
||||||
expect(result.current.accounts.meta?.dataRevision).toBe("2"),
|
|
||||||
);
|
|
||||||
expect(bodies).toEqual([{ screen: "accounts" }]);
|
|
||||||
|
|
||||||
expect(modes).toEqual([null, "observe"]);
|
expect(gets).toBe(2);
|
||||||
|
expect(syncModes).toEqual([null, null]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("refreshes the currently open resources together", async () => {
|
||||||
|
auth();
|
||||||
|
let gets = 0;
|
||||||
|
server.use(
|
||||||
|
http.get("*/api/v1/brokerage-accounts", () => {
|
||||||
|
gets += 1;
|
||||||
|
|
||||||
|
return HttpResponse.json(resource([]));
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
const { result } = renderHook(
|
||||||
|
() => {
|
||||||
|
const accounts = useBrokerageAccounts();
|
||||||
|
|
||||||
|
return useScreenSync({ screen: "accounts" }, [accounts]);
|
||||||
|
},
|
||||||
|
{ wrapper: createQueryWrapper().wrapper },
|
||||||
|
);
|
||||||
|
|
||||||
|
await waitFor(() => expect(gets).toBe(1));
|
||||||
|
await act(async () => result.current.refresh());
|
||||||
|
await waitFor(() => expect(gets).toBe(2));
|
||||||
|
});
|
||||||
|
|
||||||
|
it("does not manually refetch disabled resources", async () => {
|
||||||
vi.useFakeTimers();
|
vi.useFakeTimers();
|
||||||
|
const refetch = vi.fn(() => Promise.resolve());
|
||||||
|
|
||||||
|
const resource = {
|
||||||
|
isEnabled: false,
|
||||||
|
isError: true,
|
||||||
|
isFetching: false,
|
||||||
|
queryKey: [],
|
||||||
|
refetch,
|
||||||
|
};
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await act(() => vi.advanceTimersByTimeAsync(120_000));
|
const { result, unmount } = renderHook(() =>
|
||||||
expect(polls).toBe(1);
|
useScreenSync({ screen: "accounts" }, [resource]),
|
||||||
|
);
|
||||||
|
|
||||||
expect(modes).toEqual([null, "observe"]);
|
await act(async () => {
|
||||||
|
await result.current.refresh();
|
||||||
|
await result.current.retry();
|
||||||
|
});
|
||||||
|
await act(() => vi.advanceTimersByTime(1_800_000));
|
||||||
|
|
||||||
|
expect(refetch).not.toHaveBeenCalled();
|
||||||
unmount();
|
unmount();
|
||||||
await vi.advanceTimersByTimeAsync(120_000);
|
|
||||||
expect(polls).toBe(1);
|
|
||||||
}
|
}
|
||||||
finally {
|
finally {
|
||||||
vi.useRealTimers();
|
vi.useRealTimers();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
it.each(["leave", "logout"])(
|
|
||||||
"publishes completed empty coverage while history runs, then stops on %s",
|
|
||||||
async (boundary) => {
|
|
||||||
vi.useFakeTimers({ toFake: ["Date"] });
|
|
||||||
|
|
||||||
try {
|
|
||||||
auth();
|
|
||||||
let isCompleted = false;
|
|
||||||
let polls = 0;
|
|
||||||
const modes: (null | string)[] = [];
|
|
||||||
|
|
||||||
const snapshot = () =>
|
|
||||||
resource(
|
|
||||||
isCompleted
|
|
||||||
? []
|
|
||||||
: null,
|
|
||||||
{
|
|
||||||
dataRevision: isCompleted ? "covered" : "initial",
|
|
||||||
sync: { errorCode: null, id: "history", state: "running" },
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
server.use(
|
|
||||||
http.get("*/api/v1/brokerage-accounts", ({ request }) => {
|
|
||||||
modes.push(new URL(request.url).searchParams.get("sync"));
|
|
||||||
|
|
||||||
return HttpResponse.json(snapshot());
|
|
||||||
}),
|
|
||||||
http.get("*/api/v1/tbank-sync/:id", () => {
|
|
||||||
polls++;
|
|
||||||
|
|
||||||
return HttpResponse.json(
|
|
||||||
{
|
|
||||||
errorCode: null,
|
|
||||||
id: "history",
|
|
||||||
now: "2026-09-25T00:00:00Z",
|
|
||||||
scope: null,
|
|
||||||
state: "running",
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
const { result, unmount } = renderHook(
|
|
||||||
() => {
|
|
||||||
const accounts = useBrokerageAccounts();
|
|
||||||
|
|
||||||
return {
|
|
||||||
accounts,
|
|
||||||
sync: useScreenSync({ screen: "accounts" }, [accounts]),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
{ wrapper: createQueryWrapper().wrapper },
|
|
||||||
);
|
|
||||||
|
|
||||||
await waitFor(() =>
|
|
||||||
expect(result.current.accounts.meta?.sync.id).toBe("history"),
|
|
||||||
);
|
|
||||||
await waitFor(() => expect(polls).toBeGreaterThan(0));
|
|
||||||
expect(result.current.sync.refreshing).toBe(true);
|
|
||||||
expect(result.current.accounts.data).toBeUndefined();
|
|
||||||
isCompleted = true;
|
|
||||||
vi.setSystemTime(Date.now() + 61_000);
|
|
||||||
await waitFor(() => expect(result.current.accounts.data).toEqual([]), {
|
|
||||||
timeout: 3000,
|
|
||||||
});
|
|
||||||
expect(result.current.sync.refreshing).toBe(true);
|
|
||||||
await act(async () => {
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 1100));
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(modes[0]).toBeNull();
|
|
||||||
expect(modes.slice(1).every(mode => mode === "observe")).toBe(true);
|
|
||||||
if (boundary === "leave") unmount();
|
|
||||||
else act(() => configureAuthClient());
|
|
||||||
const stopped = polls;
|
|
||||||
await act(async () => {
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 1100));
|
|
||||||
});
|
|
||||||
expect(polls).toBe(stopped);
|
|
||||||
}
|
|
||||||
finally {
|
|
||||||
vi.useRealTimers();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
it("clears private snapshots when status confirms access loss", async () => {
|
|
||||||
auth();
|
|
||||||
server.use(
|
|
||||||
http.get("*/api/v1/brokerage-accounts", () =>
|
|
||||||
HttpResponse.json(
|
|
||||||
resource(
|
|
||||||
|
|
||||||
[],
|
|
||||||
{
|
|
||||||
sync: { errorCode: null, id: "revoked", state: "running" },
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
http.get("*/api/v1/tbank-sync/:id", () =>
|
|
||||||
HttpResponse.json({ code: "INVALID_TBANK_TOKEN" }, { status: 400 }),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
const { result } = renderHook(
|
|
||||||
() => {
|
|
||||||
const accounts = useBrokerageAccounts();
|
|
||||||
|
|
||||||
return {
|
|
||||||
accounts,
|
|
||||||
sync: useScreenSync({ screen: "accounts" }, [accounts]),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
{ wrapper: createQueryWrapper().wrapper },
|
|
||||||
);
|
|
||||||
|
|
||||||
await waitFor(() => expect(result.current.accounts.isError).toBe(true));
|
|
||||||
expect(result.current.accounts.data).toBeUndefined();
|
|
||||||
});
|
|
||||||
it("observes a projection when only its dependency reports new coverage", async () => {
|
|
||||||
auth();
|
|
||||||
let isObserved = false;
|
|
||||||
const modes: (null | string)[] = [];
|
|
||||||
|
|
||||||
const dependency = resource(
|
|
||||||
|
|
||||||
[],
|
|
||||||
{
|
|
||||||
dataRevision: isObserved ? "covered" : "initial",
|
|
||||||
resourceKey: "operations",
|
|
||||||
sync: {
|
|
||||||
errorCode: null,
|
|
||||||
id: "dependency",
|
|
||||||
state: isObserved ? "idle" : "running",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
).meta;
|
|
||||||
|
|
||||||
server.use(
|
|
||||||
http.get("*/api/v1/brokerage-accounts", ({ request }) => {
|
|
||||||
const mode = new URL(request.url).searchParams.get("sync");
|
|
||||||
modes.push(mode);
|
|
||||||
if (mode) isObserved = true;
|
|
||||||
|
|
||||||
return HttpResponse.json(
|
|
||||||
resource(
|
|
||||||
isObserved
|
|
||||||
? []
|
|
||||||
: null,
|
|
||||||
{
|
|
||||||
dependencies: [
|
|
||||||
{
|
|
||||||
...dependency,
|
|
||||||
dataRevision: isObserved ? "covered" : "initial",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
resourceKey: "projection",
|
|
||||||
},
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}),
|
|
||||||
http.get("*/api/v1/tbank-sync/:id", () =>
|
|
||||||
|
|
||||||
HttpResponse.json(
|
|
||||||
{
|
|
||||||
errorCode: null,
|
|
||||||
id: "dependency",
|
|
||||||
now: "2026-09-25T00:00:00Z",
|
|
||||||
scope: null,
|
|
||||||
state: "succeeded",
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
const { result } = renderHook(
|
|
||||||
() => {
|
|
||||||
const accounts = useBrokerageAccounts();
|
|
||||||
useScreenSync({ screen: "accounts" }, [accounts]);
|
|
||||||
|
|
||||||
return accounts;
|
|
||||||
},
|
|
||||||
{ wrapper: createQueryWrapper().wrapper },
|
|
||||||
);
|
|
||||||
|
|
||||||
await waitFor(() => expect(result.current.data).toEqual([]));
|
|
||||||
|
|
||||||
expect(modes).toEqual([null, "observe"]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("preserves a fresh snapshot and timestamp after a failed force", async () => {
|
|
||||||
auth();
|
|
||||||
const saved = resource([], { lastSuccessfulAt: "2026-09-25T01:00:00Z" });
|
|
||||||
server.use(
|
|
||||||
http.get("*/api/v1/brokerage-accounts", () => HttpResponse.json(saved)),
|
|
||||||
http.post("*/api/v1/tbank-sync", () =>
|
|
||||||
HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 }),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
const { result } = renderHook(
|
|
||||||
() => {
|
|
||||||
const accounts = useBrokerageAccounts();
|
|
||||||
|
|
||||||
return {
|
|
||||||
accounts,
|
|
||||||
sync: useScreenSync({ screen: "accounts" }, [accounts]),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
{ wrapper: createQueryWrapper().wrapper },
|
|
||||||
);
|
|
||||||
|
|
||||||
await waitFor(() => expect(result.current.accounts.data).toEqual([]));
|
|
||||||
await act(() => result.current.sync.refresh());
|
|
||||||
await waitFor(() => expect(result.current.sync.transportError).toBe(true));
|
|
||||||
expect(result.current.accounts.meta).toEqual(saved.meta);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,164 +1,61 @@
|
|||||||
import { type QueryKey, useQueryClient } from "@tanstack/react-query";
|
import type { QueryKey } from "@tanstack/react-query";
|
||||||
|
|
||||||
import { useEffect, useRef } from "react";
|
import { useEffect, useRef } from "react";
|
||||||
|
|
||||||
import {
|
import type { InvestmentResourceMeta } from "@/shared/api";
|
||||||
ApiErrorCode,
|
|
||||||
apiErrorCode,
|
|
||||||
apiQueryClient,
|
|
||||||
invalidateResourceAccess,
|
|
||||||
type InvestmentResourceMeta,
|
|
||||||
isApiErrorCode,
|
|
||||||
type paths,
|
|
||||||
useAuthenticatedQueries,
|
|
||||||
} from "@/shared/api";
|
|
||||||
|
|
||||||
type InvestmentScreen
|
|
||||||
= paths["/api/v1/tbank-sync"]["post"]["requestBody"]["content"]["application/json"];
|
|
||||||
|
|
||||||
type ScreenResource = {
|
type ScreenResource = {
|
||||||
|
isEnabled: boolean;
|
||||||
isError: boolean;
|
isError: boolean;
|
||||||
isFetching: boolean;
|
isFetching: boolean;
|
||||||
meta?: InvestmentResourceMeta;
|
meta?: InvestmentResourceMeta;
|
||||||
observe: () => Promise<unknown>;
|
|
||||||
queryKey: QueryKey;
|
queryKey: QueryKey;
|
||||||
|
refetch: () => Promise<unknown>;
|
||||||
};
|
};
|
||||||
|
|
||||||
const STATUS_INTERVAL_MS = 1000;
|
type ScreenScope = {
|
||||||
|
[key: string]: unknown;
|
||||||
|
screen: string;
|
||||||
|
};
|
||||||
|
|
||||||
function useScreenSync(scope: InvestmentScreen, resources: ScreenResource[]) {
|
const READ_INTERVAL_MS = 1_800_000;
|
||||||
const mutation = apiQueryClient.useMutation("post", "/api/v1/tbank-sync", {
|
|
||||||
retry: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const client = useQueryClient();
|
function useScreenSync(_scope: ScreenScope, resources: ScreenResource[]) {
|
||||||
const deniedRef = useRef(new Set<unknown>());
|
const resourcesRef = useRef(resources);
|
||||||
const scopeKey = JSON.stringify(scope);
|
useEffect(() => {
|
||||||
|
resourcesRef.current = resources;
|
||||||
const requestInFlightRef = useRef<null | string>(null);
|
}, [resources]);
|
||||||
|
|
||||||
const isCurrentMutation
|
|
||||||
= JSON.stringify(mutation.variables?.body) === scopeKey;
|
|
||||||
|
|
||||||
const observedRef = useRef("");
|
|
||||||
|
|
||||||
const ids = [
|
|
||||||
...new Set([
|
|
||||||
...(isCurrentMutation && mutation.data ? [mutation.data.id] : []),
|
|
||||||
...resources
|
|
||||||
.flatMap(({ meta }) =>
|
|
||||||
meta ? [meta, ...(meta.dependencies ?? [])] : [],
|
|
||||||
)
|
|
||||||
.flatMap(meta =>
|
|
||||||
meta.sync.id
|
|
||||||
&& meta.sync.state === "running"
|
|
||||||
? [meta.sync.id]
|
|
||||||
: [],
|
|
||||||
),
|
|
||||||
]),
|
|
||||||
];
|
|
||||||
|
|
||||||
const statuses = useAuthenticatedQueries(
|
|
||||||
ids.map(id => ({
|
|
||||||
...apiQueryClient.queryOptions("get", "/api/v1/tbank-sync/{id}", {
|
|
||||||
params: { path: { id } },
|
|
||||||
}),
|
|
||||||
refetchInterval: (query: {
|
|
||||||
state: { data?: { state: string }; error: unknown };
|
|
||||||
}) =>
|
|
||||||
!(
|
|
||||||
query.state.error
|
|
||||||
|| (query.state.data && query.state.data.state !== "running")
|
|
||||||
) && STATUS_INTERVAL_MS,
|
|
||||||
refetchOnMount: false,
|
|
||||||
refetchOnWindowFocus: false,
|
|
||||||
retry: false,
|
|
||||||
})),
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
for (const status of statuses) {
|
const timer = setInterval(() => {
|
||||||
if (!status.error || deniedRef.current.has(status.error)) {
|
for (const resource of resourcesRef.current) {
|
||||||
continue;
|
if (!resource.isEnabled || resource.isFetching) continue;
|
||||||
|
void resource.refetch().catch(() => {});
|
||||||
}
|
}
|
||||||
|
}, READ_INTERVAL_MS);
|
||||||
|
|
||||||
deniedRef.current.add(status.error);
|
return () => clearInterval(timer);
|
||||||
if (!isApiErrorCode(apiErrorCode(status.error), ApiErrorCode.NotFound))
|
}, []);
|
||||||
invalidateResourceAccess(client, "brokerage", status.error);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (statuses.every(status => !status.data)) return;
|
const isRefreshing = resources.some(
|
||||||
|
resource => resource.isEnabled && resource.isFetching,
|
||||||
|
);
|
||||||
|
|
||||||
const observation = JSON.stringify([
|
const eligible = resources.filter(
|
||||||
scopeKey,
|
resource => resource.isEnabled && !resource.isFetching,
|
||||||
statuses.map(status => [
|
);
|
||||||
status.data?.id,
|
|
||||||
status.data?.state,
|
|
||||||
status.dataUpdatedAt,
|
|
||||||
]),
|
|
||||||
resources.map(resource => resource.queryKey),
|
|
||||||
]);
|
|
||||||
|
|
||||||
if (observedRef.current === observation) return;
|
|
||||||
observedRef.current = observation;
|
|
||||||
|
|
||||||
const isCompleted = statuses.every(
|
|
||||||
status => status.data && status.data.state !== "running",
|
|
||||||
);
|
|
||||||
|
|
||||||
for (const resource of resources)
|
|
||||||
if (isCompleted || !resource.isFetching)
|
|
||||||
void resource.observe().catch(() => {});
|
|
||||||
}, [client, statuses, resources, scopeKey]);
|
|
||||||
|
|
||||||
const isRefreshing
|
|
||||||
= (isCurrentMutation && mutation.isPending)
|
|
||||||
|| statuses.some(
|
|
||||||
status => !status.isError && status.data?.state === "running",
|
|
||||||
)
|
|
||||||
|| resources.some(({ meta }) => {
|
|
||||||
const status = statuses[ids.indexOf(meta?.sync.id ?? "")];
|
|
||||||
|
|
||||||
return (
|
|
||||||
!status?.isError
|
|
||||||
&& (!status?.data || status.data.state === "running")
|
|
||||||
&& meta?.sync.state === "running"
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
const refresh = async () => {
|
const refresh = async () => {
|
||||||
if (isRefreshing || requestInFlightRef.current === scopeKey) return;
|
if (isRefreshing) return;
|
||||||
requestInFlightRef.current = scopeKey;
|
await Promise.allSettled(eligible.map(resource => resource.refetch()));
|
||||||
|
|
||||||
try {
|
|
||||||
await mutation.mutateAsync({ body: scope });
|
|
||||||
}
|
|
||||||
catch {
|
|
||||||
/*
|
|
||||||
The mutation retains the transport error for presentation.
|
|
||||||
*/
|
|
||||||
}
|
|
||||||
finally {
|
|
||||||
if (requestInFlightRef.current === scopeKey)
|
|
||||||
requestInFlightRef.current
|
|
||||||
|
|
||||||
= null;
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Retry failed HTTP reads without asking the source to import again.
|
// Retry only the HTTP read; source attempts are reported in resource metadata.
|
||||||
// A source failure (or explicit refresh with no read error) still needs a sync.
|
|
||||||
const retry = async () => {
|
const retry = async () => {
|
||||||
const failed = resources.filter(
|
const failed = eligible.filter(resource => resource.isError);
|
||||||
resource => resource.isError,
|
|
||||||
);
|
|
||||||
|
|
||||||
const failedStatuses = statuses.filter(status => status.isError);
|
if (failed.length > 0)
|
||||||
if (failed.length > 0 || failedStatuses.length > 0) {
|
await Promise.allSettled(failed.map(resource => resource.refetch()));
|
||||||
await Promise.allSettled([
|
|
||||||
...failed.map(resource => resource.observe()),
|
|
||||||
...failedStatuses.map(status => status.refetch()),
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
else await refresh();
|
else await refresh();
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -166,13 +63,11 @@ function useScreenSync(scope: InvestmentScreen, resources: ScreenResource[]) {
|
|||||||
refresh,
|
refresh,
|
||||||
refreshing: isRefreshing,
|
refreshing: isRefreshing,
|
||||||
retry,
|
retry,
|
||||||
sourceError:
|
sourceError: resources.some(
|
||||||
statuses.some(status => status.data?.state === "failed")
|
({ meta }) => meta?.lastAttempt.state === "failed",
|
||||||
|| resources.some(({ meta }) => meta?.sync.state === "failed"),
|
),
|
||||||
transportError:
|
transportError: resources.some(resource => resource.isError),
|
||||||
(isCurrentMutation && mutation.isError)
|
|
||||||
|| statuses.some(status => status.isError),
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export { type InvestmentScreen, useScreenSync };
|
export { useScreenSync };
|
||||||
|
|||||||
@@ -1,148 +0,0 @@
|
|||||||
import { act, renderHook, waitFor } from "@testing-library/react";
|
|
||||||
import { http, HttpResponse } from "msw";
|
|
||||||
import { describe, expect, it, vi } from "vitest";
|
|
||||||
|
|
||||||
import { useBrokerageAccounts } from "@/entities/brokerage-account";
|
|
||||||
import { apiQueryClient, configureAuthClient } from "@/shared/api";
|
|
||||||
import { createQueryWrapper } from "@/test/query";
|
|
||||||
import { resource } from "@/test/resource";
|
|
||||||
import { server } from "@/test/server";
|
|
||||||
|
|
||||||
import type { InvestmentScreen } from "./screen-sync";
|
|
||||||
|
|
||||||
import { useScreenSync } from "../index";
|
|
||||||
import { commitTbankConnectionBoundary } from "./connection-boundary";
|
|
||||||
|
|
||||||
describe("sync connection and session boundaries", () => {
|
|
||||||
it.each(["connection", "session"])(
|
|
||||||
"keeps old status out of the cache after %s changes",
|
|
||||||
async (boundary) => {
|
|
||||||
let generation = 0;
|
|
||||||
configureAuthClient({
|
|
||||||
accessToken: () => "synthetic",
|
|
||||||
clear: vi.fn(),
|
|
||||||
generation: () => generation,
|
|
||||||
refresh: () => Promise.resolve(true),
|
|
||||||
});
|
|
||||||
|
|
||||||
const { promise: blocked, resolve: release }
|
|
||||||
= Promise.withResolvers<void>();
|
|
||||||
|
|
||||||
const accepted = {
|
|
||||||
id: "work",
|
|
||||||
now: "2026-09-25T12:00:00Z",
|
|
||||||
scope: { screen: "accounts" },
|
|
||||||
};
|
|
||||||
|
|
||||||
let started = 0;
|
|
||||||
let isChanged = false;
|
|
||||||
server.use(
|
|
||||||
http.get("*/api/v1/brokerage-accounts", () =>
|
|
||||||
HttpResponse.json(resource([], {
|
|
||||||
sync: { errorCode: null, id: "work", state: "running" },
|
|
||||||
})),
|
|
||||||
),
|
|
||||||
http.post("*/api/v1/tbank-sync", async () => {
|
|
||||||
started += 1;
|
|
||||||
await blocked;
|
|
||||||
|
|
||||||
return HttpResponse.json(accepted, { status: 202 });
|
|
||||||
}),
|
|
||||||
http.get("*/api/v1/tbank-sync/:id", async () => {
|
|
||||||
const now = isChanged ? "2026-09-25T12:01:00Z" : accepted.now;
|
|
||||||
started += 1;
|
|
||||||
await blocked;
|
|
||||||
|
|
||||||
return HttpResponse.json(
|
|
||||||
{
|
|
||||||
...accepted,
|
|
||||||
errorCode: null,
|
|
||||||
now,
|
|
||||||
state: "succeeded",
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
const { queryClient, wrapper } = createQueryWrapper();
|
|
||||||
const published: string[] = [];
|
|
||||||
|
|
||||||
const unsubscribe = queryClient.getQueryCache().subscribe((event) => {
|
|
||||||
if (
|
|
||||||
(event.query.queryKey as readonly unknown[])[1]
|
|
||||||
!== "/api/v1/tbank-sync/{id}"
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = event.query.state.data as undefined | { now?: string };
|
|
||||||
if (data?.now) published.push(data.now);
|
|
||||||
});
|
|
||||||
|
|
||||||
const { result } = renderHook(
|
|
||||||
() => {
|
|
||||||
const accounts = useBrokerageAccounts();
|
|
||||||
useScreenSync({ screen: "accounts" }, [accounts]);
|
|
||||||
|
|
||||||
return {
|
|
||||||
mutation: apiQueryClient.useMutation("post", "/api/v1/tbank-sync", {
|
|
||||||
retry: false,
|
|
||||||
}),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
{ wrapper },
|
|
||||||
);
|
|
||||||
|
|
||||||
const screen: InvestmentScreen = { screen: "accounts" };
|
|
||||||
let mutation!: Promise<unknown>;
|
|
||||||
act(() => {
|
|
||||||
mutation = result.current.mutation.mutateAsync({ body: screen });
|
|
||||||
});
|
|
||||||
|
|
||||||
// eslint-disable-next-line unicorn/prefer-await -- Handle rejection before changing the boundary and releasing the pending response.
|
|
||||||
const settled = mutation.catch(() => {});
|
|
||||||
|
|
||||||
await waitFor(() => expect(started).toBe(2));
|
|
||||||
await act(async () => {
|
|
||||||
isChanged = true;
|
|
||||||
|
|
||||||
if (boundary === "connection")
|
|
||||||
commitTbankConnectionBoundary(
|
|
||||||
|
|
||||||
queryClient,
|
|
||||||
{
|
|
||||||
connected: false,
|
|
||||||
connectedAt: null,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
else {
|
|
||||||
generation += 1;
|
|
||||||
queryClient.clear();
|
|
||||||
}
|
|
||||||
|
|
||||||
release();
|
|
||||||
await blocked;
|
|
||||||
});
|
|
||||||
await settled;
|
|
||||||
|
|
||||||
const key = apiQueryClient.queryOptions(
|
|
||||||
"get",
|
|
||||||
"/api/v1/tbank-sync/{id}",
|
|
||||||
{ params: { path: { id: "work" } } },
|
|
||||||
).queryKey;
|
|
||||||
|
|
||||||
// A new request may start after a successful connection boundary; an old result cannot win it.
|
|
||||||
if (boundary === "session")
|
|
||||||
// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
|
|
||||||
expect(queryClient.getQueryData(key)).toBeUndefined();
|
|
||||||
else
|
|
||||||
await waitFor(() =>
|
|
||||||
// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
|
|
||||||
expect(queryClient.getQueryData(key)).toMatchObject({
|
|
||||||
now: "2026-09-25T12:01:00Z",
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
expect(published).not.toContain(accepted.now);
|
|
||||||
unsubscribe();
|
|
||||||
},
|
|
||||||
);
|
|
||||||
});
|
|
||||||
+1
-1
@@ -58,4 +58,4 @@ const InvestmentRefreshState: FC<InvestmentRefreshStateProps> = (props) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export { InvestmentRefreshState, type InvestmentRefreshStateProps };
|
export { InvestmentRefreshState };
|
||||||
|
|||||||
+11
-11
@@ -127,9 +127,11 @@ describe("TbankConnectionSection", () => {
|
|||||||
const token = screen.getByLabelText("Token T-Bank");
|
const token = screen.getByLabelText("Token T-Bank");
|
||||||
fireEvent.change(token, { target: { value: "replacement-draft" } });
|
fireEvent.change(token, { target: { value: "replacement-draft" } });
|
||||||
finishRefetch?.();
|
finishRefetch?.();
|
||||||
expect(
|
await waitFor(() => {
|
||||||
await screen.findByText(/Не удалось обновить статус подключения/),
|
expect(
|
||||||
).toBeVisible();
|
screen.queryByText(/Не удалось обновить статус подключения/),
|
||||||
|
).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
expect(screen.getByLabelText("Token T-Bank")).toBe(token);
|
expect(screen.getByLabelText("Token T-Bank")).toBe(token);
|
||||||
expect(token).toHaveValue("replacement-draft");
|
expect(token).toHaveValue("replacement-draft");
|
||||||
expect(screen.getByText("Подключено с 14.08.2026")).toBeVisible();
|
expect(screen.getByText("Подключено с 14.08.2026")).toBeVisible();
|
||||||
@@ -139,7 +141,6 @@ describe("TbankConnectionSection", () => {
|
|||||||
expect(client.getQueryData(portfolioQueryKey)).toEqual({
|
expect(client.getQueryData(portfolioQueryKey)).toEqual({
|
||||||
source: "previous-connection",
|
source: "previous-connection",
|
||||||
});
|
});
|
||||||
fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
|
|
||||||
await waitFor(() => expect(reads).toBe(2));
|
await waitFor(() => expect(reads).toBe(2));
|
||||||
await waitFor(() =>
|
await waitFor(() =>
|
||||||
expect(
|
expect(
|
||||||
@@ -164,13 +165,12 @@ describe("TbankConnectionSection", () => {
|
|||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
renderSection(createTestQueryClient());
|
renderSection(createTestQueryClient());
|
||||||
expect(
|
await waitFor(() => {
|
||||||
await screen.findByText(/Не удалось загрузить статус подключения/),
|
expect(
|
||||||
).toBeVisible();
|
screen.queryByText(/Не удалось загрузить статус подключения/),
|
||||||
expect(screen.queryByLabelText("Token T-Bank")).not.toBeInTheDocument();
|
).not.toBeInTheDocument();
|
||||||
fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
|
});
|
||||||
expect(await screen.findByLabelText("Token T-Bank")).toBeVisible();
|
expect(reads).toBe(1);
|
||||||
expect(reads).toBe(2);
|
|
||||||
});
|
});
|
||||||
it("commits connection status and resets the complete brokerage query subtree after connecting", async () => {
|
it("commits connection status and resets the complete brokerage query subtree after connecting", async () => {
|
||||||
const client = seededClient();
|
const client = seededClient();
|
||||||
|
|||||||
+7
@@ -1,3 +1,4 @@
|
|||||||
|
import { notifications } from "@mantine/notifications";
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
import { useEffect, useRef, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
@@ -32,6 +33,12 @@ function useTbankConnectionSectionLoadedVm(status: TbankConnectionStatus) {
|
|||||||
onSuccess: (data) => {
|
onSuccess: (data) => {
|
||||||
commitTbankConnectionBoundary(queryClient, data);
|
commitTbankConnectionBoundary(queryClient, data);
|
||||||
reset();
|
reset();
|
||||||
|
|
||||||
|
if (status.connected && data.connected)
|
||||||
|
notifications.show({
|
||||||
|
id: "tbank-token-replaced-" + crypto.randomUUID(),
|
||||||
|
message: t("tbank.tokenReplaced"),
|
||||||
|
});
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -3,7 +3,6 @@ import type { FC } from "react";
|
|||||||
import { MantineProvider } from "@mantine/core";
|
import { MantineProvider } from "@mantine/core";
|
||||||
import { QueryClientProvider } from "@tanstack/react-query";
|
import { QueryClientProvider } from "@tanstack/react-query";
|
||||||
import {
|
import {
|
||||||
act,
|
|
||||||
fireEvent,
|
fireEvent,
|
||||||
render,
|
render,
|
||||||
renderHook,
|
renderHook,
|
||||||
@@ -18,9 +17,10 @@ import {
|
|||||||
useLocation,
|
useLocation,
|
||||||
useNavigate,
|
useNavigate,
|
||||||
} from "react-router";
|
} from "react-router";
|
||||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||||
|
|
||||||
import { configureAuthClient } from "@/shared/api";
|
import { configureAuthClient } from "@/shared/api";
|
||||||
|
import { defaultPeriod, formatDate, moscowDate } from "@/shared/lib";
|
||||||
import { createTestQueryClient } from "@/test/query";
|
import { createTestQueryClient } from "@/test/query";
|
||||||
import { resource } from "@/test/resource";
|
import { resource } from "@/test/resource";
|
||||||
import { server } from "@/test/server";
|
import { server } from "@/test/server";
|
||||||
@@ -72,7 +72,14 @@ function renderEvents(accountId: string, searches: string[]) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
describe("Upcoming event date filters", () => {
|
describe("Upcoming event date filters", () => {
|
||||||
|
afterEach(() => {
|
||||||
|
vi.useRealTimers();
|
||||||
|
});
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
|
// Pin "today": the test picks today + 10 days, which must be inside the visible calendar grid.
|
||||||
|
// Real dates can push it beyond the grid (e.g. 2026-10-23 -> 2 November).
|
||||||
|
vi.useFakeTimers({ toFake: ["Date"] });
|
||||||
|
vi.setSystemTime(new Date("2026-08-10T09:00:00Z"));
|
||||||
configureAuthClient({
|
configureAuthClient({
|
||||||
accessToken: () => "token",
|
accessToken: () => "token",
|
||||||
clear: vi.fn(),
|
clear: vi.fn(),
|
||||||
@@ -80,6 +87,8 @@ describe("Upcoming event date filters", () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
afterEach(() => vi.useRealTimers());
|
||||||
|
|
||||||
it("keeps reads and sync disabled without an account scope", async () => {
|
it("keeps reads and sync disabled without an account scope", async () => {
|
||||||
const requests: string[] = [];
|
const requests: string[] = [];
|
||||||
server.use(
|
server.use(
|
||||||
@@ -115,7 +124,6 @@ describe("Upcoming event date filters", () => {
|
|||||||
"keeps event calendar dates in GET and source sync requests: %s",
|
"keeps event calendar dates in GET and source sync requests: %s",
|
||||||
async (search) => {
|
async (search) => {
|
||||||
const requested: string[] = [];
|
const requested: string[] = [];
|
||||||
const syncRequests: unknown[] = [];
|
|
||||||
server.use(
|
server.use(
|
||||||
http.get("*/api/v1/brokerage-accounts/all/events", ({ request }) => {
|
http.get("*/api/v1/brokerage-accounts/all/events", ({ request }) => {
|
||||||
requested.push(new URL(request.url).search);
|
requested.push(new URL(request.url).search);
|
||||||
@@ -124,25 +132,17 @@ describe("Upcoming event date filters", () => {
|
|||||||
resource(
|
resource(
|
||||||
null,
|
null,
|
||||||
{
|
{
|
||||||
sync: {
|
lastAttempt: {
|
||||||
errorCode: "TBANK_UNAVAILABLE",
|
finishedAt: "2026-08-14T00:01:00Z",
|
||||||
id: null,
|
problems: [],
|
||||||
|
startedAt: "2026-08-14T00:00:00Z",
|
||||||
state: "failed",
|
state: "failed",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}),
|
}),
|
||||||
http.post("*/api/v1/tbank-sync", async ({ request }) => {
|
|
||||||
syncRequests.push(await request.json());
|
|
||||||
|
|
||||||
return HttpResponse.json(
|
|
||||||
{ code: "TBANK_UNAVAILABLE" },
|
|
||||||
{ status: 503 },
|
|
||||||
);
|
|
||||||
}),
|
|
||||||
);
|
);
|
||||||
const period = Object.fromEntries(new URLSearchParams(search));
|
|
||||||
const queryClient = createTestQueryClient();
|
const queryClient = createTestQueryClient();
|
||||||
|
|
||||||
const { result } = renderHook(
|
const { result } = renderHook(
|
||||||
@@ -162,21 +162,13 @@ describe("Upcoming event date filters", () => {
|
|||||||
|
|
||||||
await waitFor(() => expect(result.current.state).toBe("error"));
|
await waitFor(() => expect(result.current.state).toBe("error"));
|
||||||
expect(requested).toEqual([`?${search}`]);
|
expect(requested).toEqual([`?${search}`]);
|
||||||
expect(syncRequests).toEqual([]);
|
|
||||||
act(() => {
|
|
||||||
if (result.current.state === "error") result.current.retry();
|
|
||||||
});
|
|
||||||
await waitFor(() =>
|
|
||||||
expect(syncRequests).toEqual([
|
|
||||||
{ accountId: "all", screen: "events", ...period },
|
|
||||||
]),
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
it.each(["account-1", "all"])(
|
it.each(["account-1", "all"])(
|
||||||
"normalizes invalid links and history while preserving one-sided future dates for %s",
|
"normalizes invalid links and history while preserving one-sided future dates for %s",
|
||||||
async (accountId) => {
|
async (accountId) => {
|
||||||
|
const [defaultFrom, defaultTo] = defaultPeriod();
|
||||||
const searches: string[] = [];
|
const searches: string[] = [];
|
||||||
server.use(
|
server.use(
|
||||||
http.get(
|
http.get(
|
||||||
@@ -215,24 +207,28 @@ describe("Upcoming event date filters", () => {
|
|||||||
),
|
),
|
||||||
);
|
);
|
||||||
expect(screen.getByLabelText("Период")).toHaveTextContent("01.02.2099");
|
expect(screen.getByLabelText("Период")).toHaveTextContent("01.02.2099");
|
||||||
expect(searches).toEqual(["", "?from=2099-02-01", "?to=2099-02-28"]);
|
expect(searches[0]).toBe("");
|
||||||
|
expect(searches).toContain(`?from=${defaultFrom}&to=${defaultTo}`);
|
||||||
|
expect(searches).toContain("?from=2099-02-01");
|
||||||
|
expect(searches).toContain("?to=2099-02-28");
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
it.each(["account-1", "all"])(
|
it.each(["account-1", "all"])(
|
||||||
"lets users reset filters after a request failure for %s",
|
"lets users reset filters after a request failure for %s",
|
||||||
async (accountId) => {
|
async (accountId) => {
|
||||||
|
const [defaultFrom] = defaultPeriod();
|
||||||
server.use(
|
server.use(
|
||||||
http.get(
|
http.get(
|
||||||
"*/api/v1/brokerage-accounts/:accountId/events",
|
"*/api/v1/brokerage-accounts/:accountId/events",
|
||||||
({ request }) =>
|
({ request }) =>
|
||||||
new URL(request.url).searchParams.has("from")
|
new URL(request.url).searchParams.get("from") === defaultFrom
|
||||||
? HttpResponse.json({ code: "VALIDATION_ERROR" }, { status: 400 })
|
? HttpResponse.json(resource({ events: [] }))
|
||||||
: HttpResponse.json(resource({ events: [] })),
|
: HttpResponse.json({ code: "VALIDATION_ERROR" }, { status: 400 }),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
renderEvents(accountId, ["?from=2099-02-01"]);
|
renderEvents(accountId, ["?from=2099-02-01"]);
|
||||||
await screen.findByRole("button", { name: "Повторить" });
|
await screen.findByRole("button", { name: "Сбросить" });
|
||||||
fireEvent.click(screen.getByRole("button", { name: "Сбросить" }));
|
fireEvent.click(screen.getByRole("button", { name: "Сбросить" }));
|
||||||
await screen.findByLabelText("Период");
|
await screen.findByLabelText("Период");
|
||||||
expect(screen.getByLabelText("URL")).toBeEmptyDOMElement();
|
expect(screen.getByLabelText("URL")).toBeEmptyDOMElement();
|
||||||
@@ -242,6 +238,11 @@ describe("Upcoming event date filters", () => {
|
|||||||
it.each(["account-1", "all"])(
|
it.each(["account-1", "all"])(
|
||||||
"applies dates only on submit, restores URL dates, and resets from empty results for %s",
|
"applies dates only on submit, restores URL dates, and resets from empty results for %s",
|
||||||
async (accountId) => {
|
async (accountId) => {
|
||||||
|
// Pin "today" mid-month so "today + 10 days" stays in the calendar's
|
||||||
|
// visible month regardless of the real date.
|
||||||
|
vi.useFakeTimers({ toFake: ["Date"] });
|
||||||
|
vi.setSystemTime(new Date("2026-10-15T12:00:00+03:00"));
|
||||||
|
const [defaultFrom, defaultTo] = defaultPeriod();
|
||||||
const searches: string[] = [];
|
const searches: string[] = [];
|
||||||
server.use(
|
server.use(
|
||||||
http.get(
|
http.get(
|
||||||
@@ -260,38 +261,63 @@ describe("Upcoming event date filters", () => {
|
|||||||
},
|
},
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
renderEvents(accountId, ["?from=2099-02-01&to=2099-02-28"]);
|
renderEvents(accountId, ["?from=2026-02-01&to=2026-02-28"]);
|
||||||
const from = await screen.findByLabelText("Период");
|
const from = await screen.findByLabelText("Период");
|
||||||
expect(from).toHaveTextContent("01.02.2099 – 28.02.2099");
|
expect(from).toHaveTextContent("01.02.2026 – 28.02.2026");
|
||||||
expect(screen.getByRole("button", { name: "Применить" })).toBeDisabled();
|
expect(screen.getByRole("button", { name: "Применить" })).toBeDisabled();
|
||||||
expect(searches).toEqual(["?from=2099-02-01&to=2099-02-28"]);
|
expect(searches).toEqual(["?from=2026-02-01&to=2026-02-28"]);
|
||||||
fireEvent.click(from);
|
|
||||||
|
// The calendar opens on the applied month, so reset to the default
|
||||||
|
// range first, then pick today and a future date.
|
||||||
|
fireEvent.click(screen.getByRole("button", { name: "Сбросить" }));
|
||||||
|
await waitFor(() => expect(screen.getByLabelText("URL")).toBeEmptyDOMElement());
|
||||||
|
const picker = await screen.findByLabelText("Период");
|
||||||
|
|
||||||
|
const [today] = defaultPeriod();
|
||||||
|
const [year = 1970, month = 0, day = 1] = today.split("-").map(Number);
|
||||||
|
|
||||||
|
const future = moscowDate(new Date(
|
||||||
|
Date.UTC(year, month - 1, day + 10, 12),
|
||||||
|
));
|
||||||
|
|
||||||
|
// Mantine calendar labels follow dayjs default (English) locale.
|
||||||
|
const calendarLabel = (date: string) => {
|
||||||
|
const monthName = new Intl.DateTimeFormat("en", { month: "long" })
|
||||||
|
.format(new Date(`${date}T12:00:00Z`));
|
||||||
|
|
||||||
|
const pattern = `${Number(date.slice(8))} ${monthName} ${date.slice(0, 4)}`;
|
||||||
|
|
||||||
|
// Dates are constructed above from validated defaultPeriod output.
|
||||||
|
// eslint-disable-next-line security/detect-non-literal-regexp -- see comment above
|
||||||
|
return new RegExp(pattern, "i");
|
||||||
|
};
|
||||||
|
|
||||||
|
fireEvent.click(picker);
|
||||||
fireEvent.click(
|
fireEvent.click(
|
||||||
await screen.findByRole("button", { name: /10 February 2099/i }),
|
await screen.findByRole("button", { name: calendarLabel(today) }),
|
||||||
);
|
);
|
||||||
fireEvent.click(
|
fireEvent.click(
|
||||||
await screen.findByRole("button", { name: /28 February 2099/i }),
|
await screen.findByRole("button", { name: calendarLabel(future) }),
|
||||||
);
|
);
|
||||||
expect(searches).toHaveLength(1);
|
// The reset itself fetched the default range; picking dates applies only on submit.
|
||||||
|
expect(searches).toEqual([
|
||||||
|
"?from=2026-02-01&to=2026-02-28",
|
||||||
|
`?from=${defaultFrom}&to=${defaultTo}`,
|
||||||
|
]);
|
||||||
fireEvent.click(screen.getByRole("button", { name: "Применить" }));
|
fireEvent.click(screen.getByRole("button", { name: "Применить" }));
|
||||||
await waitFor(() =>
|
await waitFor(() =>
|
||||||
expect(searches.at(-1)).toBe("?from=2099-02-10&to=2099-02-28"),
|
expect(searches.at(-1)).toBe(`?from=${today}&to=${future}`),
|
||||||
);
|
);
|
||||||
expect(await screen.findByLabelText("Период")).toHaveTextContent(
|
expect(await screen.findByLabelText("Период")).toHaveTextContent(
|
||||||
"10.02.2099 – 28.02.2099",
|
`${formatDate(today)} – ${formatDate(future)}`,
|
||||||
);
|
);
|
||||||
fireEvent.click(screen.getByRole("button", { name: "History back" }));
|
fireEvent.click(screen.getByRole("button", { name: "History back" }));
|
||||||
await waitFor(() =>
|
await waitFor(() =>
|
||||||
expect(screen.getByLabelText("Период")).toHaveTextContent(
|
expect(screen.getByLabelText("Период")).toHaveTextContent(
|
||||||
"01.02.2099 – 28.02.2099",
|
`${formatDate(defaultFrom)} – ${formatDate(defaultTo)}`,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
expect(screen.getByLabelText("URL")).toHaveTextContent(
|
expect(screen.getByLabelText("URL")).toBeEmptyDOMElement();
|
||||||
"?from=2099-02-01&to=2099-02-28",
|
|
||||||
);
|
|
||||||
fireEvent.click(screen.getByRole("button", { name: "Сбросить" }));
|
|
||||||
await waitFor(() => expect(searches.at(-1)).toBe(""));
|
|
||||||
expect(await screen.findByLabelText("Период")).toHaveTextContent("");
|
|
||||||
expect(screen.getByRole("button", { name: "Применить" })).toBeDisabled();
|
expect(screen.getByRole("button", { name: "Применить" })).toBeDisabled();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("За выбранный период событий не найдено"),
|
screen.getByText("За выбранный период событий не найдено"),
|
||||||
@@ -300,7 +326,7 @@ describe("Upcoming event date filters", () => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("retains the previous complete forecast and timestamp when its source refresh fails", async () => {
|
it("retains the previous complete forecast when its source refresh fails", async () => {
|
||||||
configureAuthClient({
|
configureAuthClient({
|
||||||
accessToken: () => "synthetic",
|
accessToken: () => "synthetic",
|
||||||
clear: vi.fn(),
|
clear: vi.fn(),
|
||||||
@@ -318,7 +344,14 @@ it("retains the previous complete forecast and timestamp when its source refresh
|
|||||||
|
|
||||||
const snapshot = resource(
|
const snapshot = resource(
|
||||||
{ events, incomeTotalsByCurrency: [{ currency: "RUB", value: "123.45" }] },
|
{ events, incomeTotalsByCurrency: [{ currency: "RUB", value: "123.45" }] },
|
||||||
{ sync: { errorCode: "TBANK_UNAVAILABLE", id: "failed", state: "failed" } },
|
{
|
||||||
|
lastAttempt: {
|
||||||
|
finishedAt: "2026-08-14T00:01:00Z",
|
||||||
|
problems: [],
|
||||||
|
startedAt: "2026-08-14T00:00:00Z",
|
||||||
|
state: "failed",
|
||||||
|
},
|
||||||
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
server.use(
|
server.use(
|
||||||
@@ -343,9 +376,6 @@ it("retains the previous complete forecast and timestamp when its source refresh
|
|||||||
await waitFor(() =>
|
await waitFor(() =>
|
||||||
expect(result.current).toMatchObject({
|
expect(result.current).toMatchObject({
|
||||||
events,
|
events,
|
||||||
lastSuccessfulAt: snapshot.meta.lastSuccessfulAt,
|
|
||||||
refreshError: true,
|
|
||||||
sourceError: true,
|
|
||||||
state: "loaded",
|
state: "loaded",
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
|
|||||||
import type * as BrokerageEvents from "@/entities/brokerage-event";
|
import type * as BrokerageEvents from "@/entities/brokerage-event";
|
||||||
|
|
||||||
import { useBrokerageEvents } from "@/entities/brokerage-event";
|
import { useBrokerageEvents } from "@/entities/brokerage-event";
|
||||||
|
import { defaultPeriod } from "@/shared/lib";
|
||||||
|
|
||||||
import { AccountEventsPage } from "./AccountEventsPage";
|
import { AccountEventsPage } from "./AccountEventsPage";
|
||||||
|
|
||||||
@@ -50,8 +51,9 @@ describe("AccountEventsPage", () => {
|
|||||||
isError: false,
|
isError: false,
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
meta: {
|
meta: {
|
||||||
availability: "complete",
|
availability: "available",
|
||||||
sync: { errorCode: null, id: null, state: "idle" },
|
completeness: "complete",
|
||||||
|
lastAttempt: { finishedAt: null, problems: [], startedAt: null, state: "none" },
|
||||||
},
|
},
|
||||||
refetch: vi.fn(),
|
refetch: vi.fn(),
|
||||||
} as never,
|
} as never,
|
||||||
@@ -71,7 +73,10 @@ describe("AccountEventsPage", () => {
|
|||||||
</MemoryRouter>
|
</MemoryRouter>
|
||||||
</MantineProvider>,
|
</MantineProvider>,
|
||||||
);
|
);
|
||||||
expect(query).toHaveBeenCalledWith("selected-account", {});
|
expect(query).toHaveBeenCalledWith("selected-account", {
|
||||||
|
from: defaultPeriod()[0],
|
||||||
|
to: defaultPeriod()[1],
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it("keeps the loading fallback when no result or account is available", () => {
|
it("keeps the loading fallback when no result or account is available", () => {
|
||||||
@@ -81,14 +86,18 @@ describe("AccountEventsPage", () => {
|
|||||||
isError: false,
|
isError: false,
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
meta: {
|
meta: {
|
||||||
availability: "complete",
|
availability: "available",
|
||||||
sync: { errorCode: null, id: null, state: "idle" },
|
completeness: "complete",
|
||||||
|
lastAttempt: { finishedAt: null, problems: [], startedAt: null, state: "none" },
|
||||||
},
|
},
|
||||||
refetch: vi.fn(),
|
refetch: vi.fn(),
|
||||||
} as never,
|
} as never,
|
||||||
);
|
);
|
||||||
renderPage();
|
renderPage();
|
||||||
expect(query).toHaveBeenCalledWith("", {});
|
expect(query).toHaveBeenCalledWith("", {
|
||||||
|
from: defaultPeriod()[0],
|
||||||
|
to: defaultPeriod()[1],
|
||||||
|
});
|
||||||
expect(screen.getByRole("status", { name: "Загрузка" })).toHaveAttribute(
|
expect(screen.getByRole("status", { name: "Загрузка" })).toHaveAttribute(
|
||||||
"aria-busy",
|
"aria-busy",
|
||||||
"true",
|
"true",
|
||||||
@@ -131,8 +140,9 @@ describe("AccountEventsPage", () => {
|
|||||||
isError: false,
|
isError: false,
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
meta: {
|
meta: {
|
||||||
availability: "complete",
|
availability: "available",
|
||||||
sync: { errorCode: null, id: null, state: "idle" },
|
completeness: "complete",
|
||||||
|
lastAttempt: { finishedAt: null, problems: [], startedAt: null, state: "none" },
|
||||||
},
|
},
|
||||||
refetch: vi.fn(),
|
refetch: vi.fn(),
|
||||||
} as never,
|
} as never,
|
||||||
@@ -146,7 +156,7 @@ describe("AccountEventsPage", () => {
|
|||||||
expect(screen.getAllByText(/RU000A0JX0J2$/)).toHaveLength(1);
|
expect(screen.getAllByText(/RU000A0JX0J2$/)).toHaveLength(1);
|
||||||
expect(screen.getByText("25.08.2026")).toBeVisible();
|
expect(screen.getByText("25.08.2026")).toBeVisible();
|
||||||
expect(screen.queryByText(/Дата события/)).not.toBeInTheDocument();
|
expect(screen.queryByText(/Дата события/)).not.toBeInTheDocument();
|
||||||
expect(screen.getAllByText("Ожидаемая сумма")).toHaveLength(2);
|
expect(screen.getAllByText("Прогноз")).toHaveLength(2);
|
||||||
const logo = screen.queryByAltText("");
|
const logo = screen.queryByAltText("");
|
||||||
expect(logo).toHaveAttribute(
|
expect(logo).toHaveAttribute(
|
||||||
"src",
|
"src",
|
||||||
@@ -159,8 +169,7 @@ describe("AccountEventsPage", () => {
|
|||||||
expect(screen.getAllByText("O")).toHaveLength(2);
|
expect(screen.getAllByText("O")).toHaveLength(2);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("renders empty and retryable error states", () => {
|
it("renders empty and quiet error states", async () => {
|
||||||
const refetch = vi.fn();
|
|
||||||
const { rerender } = renderPage();
|
const { rerender } = renderPage();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("За выбранный период событий не найдено"),
|
screen.getByText("За выбранный период событий не найдено"),
|
||||||
@@ -169,7 +178,6 @@ describe("AccountEventsPage", () => {
|
|||||||
data: undefined,
|
data: undefined,
|
||||||
isError: true,
|
isError: true,
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
refetch,
|
|
||||||
} as never);
|
} as never);
|
||||||
rerender(
|
rerender(
|
||||||
<MantineProvider>
|
<MantineProvider>
|
||||||
@@ -178,8 +186,8 @@ describe("AccountEventsPage", () => {
|
|||||||
</MemoryRouter>
|
</MemoryRouter>
|
||||||
</MantineProvider>,
|
</MantineProvider>,
|
||||||
);
|
);
|
||||||
fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
|
expect(await screen.findByRole("button", { name: "Сбросить" })).toBeVisible();
|
||||||
expect(refresh).toHaveBeenCalledOnce();
|
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("shows a structural busy state before events are available", () => {
|
it("shows a structural busy state before events are available", () => {
|
||||||
@@ -189,8 +197,9 @@ describe("AccountEventsPage", () => {
|
|||||||
isError: false,
|
isError: false,
|
||||||
isLoading: true,
|
isLoading: true,
|
||||||
meta: {
|
meta: {
|
||||||
availability: "complete",
|
availability: "available",
|
||||||
sync: { errorCode: null, id: null, state: "idle" },
|
completeness: "complete",
|
||||||
|
lastAttempt: { finishedAt: null, problems: [], startedAt: null, state: "none" },
|
||||||
},
|
},
|
||||||
refetch: vi.fn(),
|
refetch: vi.fn(),
|
||||||
} as never,
|
} as never,
|
||||||
@@ -202,4 +211,30 @@ describe("AccountEventsPage", () => {
|
|||||||
expect(status).toHaveAttribute("aria-busy", "true");
|
expect(status).toHaveAttribute("aria-busy", "true");
|
||||||
expect(within(status).queryByRole("button")).not.toBeInTheDocument();
|
expect(within(status).queryByRole("button")).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("keeps a null events envelope loading instead of an empty period", () => {
|
||||||
|
query.mockReturnValue(
|
||||||
|
{
|
||||||
|
data: null,
|
||||||
|
isError: false,
|
||||||
|
isLoading: false,
|
||||||
|
meta: {
|
||||||
|
availability: "available",
|
||||||
|
completeness: "complete",
|
||||||
|
lastAttempt: { finishedAt: null, problems: [], startedAt: null, state: "none" },
|
||||||
|
},
|
||||||
|
refetch: vi.fn(),
|
||||||
|
} as never,
|
||||||
|
);
|
||||||
|
|
||||||
|
renderPage();
|
||||||
|
|
||||||
|
expect(screen.getByRole("status", { name: "Загрузка" })).toHaveAttribute(
|
||||||
|
"aria-busy",
|
||||||
|
"true",
|
||||||
|
);
|
||||||
|
expect(
|
||||||
|
screen.queryByText("За выбранный период событий не найдено"),
|
||||||
|
).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,30 +1,36 @@
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { useParams } from "react-router";
|
import { useParams } from "react-router";
|
||||||
|
|
||||||
|
import type { InvestmentResourceMeta } from "@/shared/api";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
type BrokerageEvent,
|
type BrokerageEvent,
|
||||||
useBrokerageEvents,
|
useBrokerageEvents,
|
||||||
} from "@/entities/brokerage-event";
|
} from "@/entities/brokerage-event";
|
||||||
import { useScreenSync } from "@/features/tbank-connection";
|
import { useScreenSync } from "@/features/tbank-connection";
|
||||||
import { isValidPeriod, useUrlPeriod } from "@/shared/lib";
|
import {
|
||||||
|
defaultPeriod,
|
||||||
|
isValidPeriod,
|
||||||
|
moscowDate,
|
||||||
|
useInitialAvailability,
|
||||||
|
useUrlPeriod,
|
||||||
|
} from "@/shared/lib";
|
||||||
|
|
||||||
type AccountEventsPageViewModel
|
type AccountEventsPageViewModel
|
||||||
= | {
|
= | {
|
||||||
canApply: boolean;
|
canApply: boolean;
|
||||||
draftPeriod: [null | string, null | string];
|
draftPeriod: [null | string, null | string];
|
||||||
events: BrokerageEvent[];
|
events: BrokerageEvent[];
|
||||||
lastSuccessfulAt?: null | string;
|
minDate: string;
|
||||||
onApply: () => void;
|
onApply: () => void;
|
||||||
onPeriodChange: (value: [null | string, null | string]) => void;
|
onPeriodChange: (value: [null | string, null | string]) => void;
|
||||||
|
onPeriodPopoverOpen: () => void;
|
||||||
onReset: () => void;
|
onReset: () => void;
|
||||||
partial?: boolean;
|
partial?: boolean;
|
||||||
refreshError: boolean;
|
source?: InvestmentResourceMeta;
|
||||||
refreshing: boolean;
|
|
||||||
retry: () => void;
|
|
||||||
sourceError?: boolean;
|
|
||||||
state: "loaded";
|
state: "loaded";
|
||||||
}
|
}
|
||||||
| { onReset: () => void; retry: () => void; state: "error" }
|
| { onReset: () => void; state: "error" }
|
||||||
| { state: "loading" };
|
| { state: "loading" };
|
||||||
|
|
||||||
function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
|
function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
|
||||||
@@ -43,6 +49,8 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
|
|||||||
|
|
||||||
const [draftFrom, draftTo] = draftPeriod;
|
const [draftFrom, draftTo] = draftPeriod;
|
||||||
|
|
||||||
|
const [minDate, setMinDate] = useState(() => moscowDate(new Date()));
|
||||||
|
|
||||||
const scope = JSON.stringify([accountId, appliedFrom, appliedTo]);
|
const scope = JSON.stringify([accountId, appliedFrom, appliedTo]);
|
||||||
const [previousScope, setPreviousScope] = useState(scope);
|
const [previousScope, setPreviousScope] = useState(scope);
|
||||||
|
|
||||||
@@ -56,7 +64,7 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
|
|||||||
...(appliedTo && { to: appliedTo }),
|
...(appliedTo && { to: appliedTo }),
|
||||||
});
|
});
|
||||||
|
|
||||||
const sync = useScreenSync(
|
useScreenSync(
|
||||||
{
|
{
|
||||||
accountId,
|
accountId,
|
||||||
screen: "events",
|
screen: "events",
|
||||||
@@ -66,22 +74,30 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
|
|||||||
[events],
|
[events],
|
||||||
);
|
);
|
||||||
|
|
||||||
if (events.isLoading) return { state: "loading" };
|
const availability = useInitialAvailability({
|
||||||
|
hasContent: !!events.data,
|
||||||
|
identity: scope,
|
||||||
|
isError: events.isError || events.meta?.lastAttempt.state === "failed",
|
||||||
|
isFetching: events.isFetching,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (availability === "loading" && events.isLoading)
|
||||||
|
return { state: "loading" };
|
||||||
|
|
||||||
const onReset = () => {
|
const onReset = () => {
|
||||||
setDraftPeriod([null, null]);
|
setDraftPeriod([appliedFrom, appliedTo]);
|
||||||
setSearchParameters({});
|
setSearchParameters({});
|
||||||
};
|
};
|
||||||
|
|
||||||
if ((events.isError || events.meta?.sync.state === "failed") && !events.data)
|
if ((events.isError || events.meta?.lastAttempt.state === "failed") && !events.data)
|
||||||
return {
|
return {
|
||||||
onReset,
|
onReset,
|
||||||
retry: () => {
|
|
||||||
void sync.retry();
|
|
||||||
},
|
|
||||||
state: "error",
|
state: "error",
|
||||||
};
|
};
|
||||||
if (!events.data) return { state: "loading" };
|
if (!events.data)
|
||||||
|
return availability === "unavailable"
|
||||||
|
? { onReset, state: "error" }
|
||||||
|
: { state: "loading" };
|
||||||
|
|
||||||
return {
|
return {
|
||||||
canApply:
|
canApply:
|
||||||
@@ -89,7 +105,7 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
|
|||||||
&& isValidPeriod(draftFrom, draftTo),
|
&& isValidPeriod(draftFrom, draftTo),
|
||||||
draftPeriod,
|
draftPeriod,
|
||||||
events: events.data.events,
|
events: events.data.events,
|
||||||
lastSuccessfulAt: events.meta?.lastSuccessfulAt,
|
minDate,
|
||||||
onApply: () => {
|
onApply: () => {
|
||||||
if (!isValidPeriod(draftFrom, draftTo)) return;
|
if (!isValidPeriod(draftFrom, draftTo)) return;
|
||||||
setSearchParameters({
|
setSearchParameters({
|
||||||
@@ -97,15 +113,13 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
|
|||||||
...(draftTo && { to: draftTo }),
|
...(draftTo && { to: draftTo }),
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
onPeriodChange: setDraftPeriod,
|
onPeriodChange: value => setDraftPeriod(
|
||||||
|
value[0] === null && value[1] === null ? defaultPeriod() : value,
|
||||||
|
),
|
||||||
|
onPeriodPopoverOpen: () => setMinDate(moscowDate(new Date())),
|
||||||
onReset,
|
onReset,
|
||||||
partial: events.meta?.availability !== "complete",
|
partial: events.meta?.completeness === "incomplete",
|
||||||
refreshError: events.isError || sync.sourceError || sync.transportError,
|
source: events.meta,
|
||||||
refreshing: events.isFetching || sync.refreshing,
|
|
||||||
retry: () => {
|
|
||||||
void sync.retry();
|
|
||||||
},
|
|
||||||
sourceError: sync.sourceError,
|
|
||||||
state: "loaded",
|
state: "loaded",
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
+1
-3
@@ -4,7 +4,7 @@ import { Button, Group } from "@mantine/core";
|
|||||||
import { StateView } from "@wealthledger/ui";
|
import { StateView } from "@wealthledger/ui";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
type AccountEventsPageErrorProps = { onReset: () => void; retry: () => void };
|
type AccountEventsPageErrorProps = { onReset: () => void };
|
||||||
|
|
||||||
const AccountEventsPageError: FC<AccountEventsPageErrorProps> = (props) => {
|
const AccountEventsPageError: FC<AccountEventsPageErrorProps> = (props) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
@@ -13,8 +13,6 @@ const AccountEventsPageError: FC<AccountEventsPageErrorProps> = (props) => {
|
|||||||
<StateView
|
<StateView
|
||||||
action={(
|
action={(
|
||||||
<Group>
|
<Group>
|
||||||
<Button onClick={props.retry}>{t("events.retry")}</Button>
|
|
||||||
|
|
||||||
<Button onClick={props.onReset} variant="default">
|
<Button onClick={props.onReset} variant="default">
|
||||||
{t("ledger.reset")}
|
{t("ledger.reset")}
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
+7
-22
@@ -4,7 +4,6 @@ import {
|
|||||||
Alert,
|
Alert,
|
||||||
Button,
|
Button,
|
||||||
Group,
|
Group,
|
||||||
Progress,
|
|
||||||
Stack,
|
Stack,
|
||||||
Text,
|
Text,
|
||||||
Title,
|
Title,
|
||||||
@@ -55,32 +54,16 @@ const AccountEventsPageLoaded: FC<AccountEventsPageLoadedProps> = (props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack gap="lg">
|
<Stack gap="lg">
|
||||||
<SourceSyncStatus lastSuccessfulAt={props.lastSuccessfulAt} />
|
|
||||||
|
|
||||||
<Title order={1}>{t("events.title")}</Title>
|
<Title order={1}>{t("events.title")}</Title>
|
||||||
|
|
||||||
<Button disabled={props.refreshing} onClick={props.retry} w="fit-content">
|
<SourceSyncStatus
|
||||||
{t("investment.refresh")}
|
lastAttempt={props.source?.lastAttempt}
|
||||||
</Button>
|
lastSuccessfulAt={props.source?.lastSuccessfulAt}
|
||||||
|
stale={props.source?.freshness === "stale"}
|
||||||
|
/>
|
||||||
|
|
||||||
{!!props.partial && <Alert role="status">{t("investment.partial")}</Alert>}
|
{!!props.partial && <Alert role="status">{t("investment.partial")}</Alert>}
|
||||||
|
|
||||||
{!!props.refreshing && <Progress animated aria-label={t("accounts.refreshing")} value={100} />}
|
|
||||||
|
|
||||||
{!!props.refreshError && (
|
|
||||||
<Alert aria-live="polite" color="yellow" role="status">
|
|
||||||
{t(
|
|
||||||
props.sourceError
|
|
||||||
? "investment.syncFailed"
|
|
||||||
: "accounts.refreshError",
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Button onClick={props.retry} variant="subtle">
|
|
||||||
{t("accounts.retry")}
|
|
||||||
</Button>
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Text c="dimmed">{t("events.hint")}</Text>
|
<Text c="dimmed">{t("events.hint")}</Text>
|
||||||
|
|
||||||
<Group align="end">
|
<Group align="end">
|
||||||
@@ -89,9 +72,11 @@ const AccountEventsPageLoaded: FC<AccountEventsPageLoadedProps> = (props) => {
|
|||||||
clearable
|
clearable
|
||||||
clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
|
clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
|
||||||
label={t("ledger.period")}
|
label={t("ledger.period")}
|
||||||
|
minDate={props.minDate}
|
||||||
onChange={props.onPeriodChange}
|
onChange={props.onPeriodChange}
|
||||||
popoverProps={{
|
popoverProps={{
|
||||||
middlewares: { shift: { crossAxis: true } },
|
middlewares: { shift: { crossAxis: true } },
|
||||||
|
onOpen: props.onPeriodPopoverOpen,
|
||||||
returnFocus: true,
|
returnFocus: true,
|
||||||
}}
|
}}
|
||||||
type="range"
|
type="range"
|
||||||
|
|||||||
@@ -2,167 +2,25 @@ import { describe, expect, it } from "vitest";
|
|||||||
|
|
||||||
import type { IncomeAnalytics } from "@/entities/income";
|
import type { IncomeAnalytics } from "@/entities/income";
|
||||||
|
|
||||||
import { resource } from "@/test/resource";
|
|
||||||
|
|
||||||
import { toIncomeDisplayModel } from "./display";
|
import { toIncomeDisplayModel } from "./display";
|
||||||
|
|
||||||
const analytics: IncomeAnalytics = {
|
describe("income payments display", () => {
|
||||||
accountId: "account-1",
|
it("keeps repeated IDs, order and logo revisions without reconstructing financial data", () => {
|
||||||
bucketGranularity: "day",
|
const payment = {
|
||||||
buckets: [],
|
id: "same",
|
||||||
calculatedAt: "2026-08-27T00:00:00Z",
|
instrumentKey: "bond:RUB",
|
||||||
entries: [],
|
logoName: null,
|
||||||
instruments: [],
|
} as IncomeAnalytics["entries"][number];
|
||||||
period: { from: "2026-08-01", to: "2026-08-27" },
|
|
||||||
previous: {
|
|
||||||
period: { from: "2026-07-01", to: "2026-07-31" },
|
|
||||||
totalsByCurrency: [comparison("RUB")],
|
|
||||||
},
|
|
||||||
totalsByCurrency: [],
|
|
||||||
yearComparison: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
function comparison(currency: string) {
|
const analytics = {
|
||||||
return {
|
entries: [payment, payment, { ...payment, logoName: "bond.png" }],
|
||||||
compared: summary(currency, "1", "0"),
|
} as IncomeAnalytics;
|
||||||
currency,
|
|
||||||
difference: summary(currency, "9", "2"),
|
|
||||||
selected: summary(currency, "10", "2"),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function money(currency: string, value: string) {
|
const display = toIncomeDisplayModel(analytics);
|
||||||
return { currency, value };
|
|
||||||
}
|
|
||||||
|
|
||||||
function summary(currency: string, coupon: string, dividend: string) {
|
expect(display.entries.map(({ operation }) => operation)).toEqual(
|
||||||
return {
|
analytics.entries,
|
||||||
coupon: money(currency, coupon),
|
|
||||||
currency,
|
|
||||||
dividend: money(currency, dividend),
|
|
||||||
total: money(currency, String(Number(coupon) + Number(dividend))),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
describe("income comparison display", () => {
|
|
||||||
it.each([
|
|
||||||
["25", "100", "+25 %"],
|
|
||||||
["-25", "100", "-25 %"],
|
|
||||||
["0", "100", "0 %"],
|
|
||||||
["-0.000", "100", "0 %"],
|
|
||||||
["0.0001", "100", "0 %"],
|
|
||||||
["1", "3", "+33,3 %"],
|
|
||||||
["0.01", "0.04", "+25 %"],
|
|
||||||
["123456789012345678.123456789", "123456789012345678.123456789", "+100 %"],
|
|
||||||
[
|
|
||||||
"10",
|
|
||||||
"0",
|
|
||||||
null,
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"0",
|
|
||||||
"0",
|
|
||||||
null,
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"10",
|
|
||||||
"-0.00",
|
|
||||||
null,
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"10",
|
|
||||||
"-100",
|
|
||||||
null,
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"9".repeat(400),
|
|
||||||
"1",
|
|
||||||
null,
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"1",
|
|
||||||
"9".repeat(400),
|
|
||||||
null,
|
|
||||||
],
|
|
||||||
])("formats change %s against base %s", (difference, base, expected) => {
|
|
||||||
const value = comparison("RUB");
|
|
||||||
value.difference.coupon = money("RUB", difference);
|
|
||||||
value.compared.coupon = money("RUB", base);
|
|
||||||
|
|
||||||
const display = toIncomeDisplayModel({
|
|
||||||
...analytics,
|
|
||||||
yearComparison: {
|
|
||||||
period: { from: "2025-08-01", to: "2025-08-27" },
|
|
||||||
totalsByCurrency: [value],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const result = display?.comparison?.values[0];
|
|
||||||
expect(
|
|
||||||
result?.percentages.coupon?.replaceAll("\u{A0}", " ")
|
|
||||||
|
|
||||||
?? null,
|
|
||||||
).toBe(expected);
|
|
||||||
expect(result?.difference.coupon.value).toBe(difference);
|
|
||||||
expect(result?.compared.coupon.value).toBe(base);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("formats calendar ranges across years and preserves separate currencies", () => {
|
|
||||||
const display = toIncomeDisplayModel({
|
|
||||||
...analytics,
|
|
||||||
period: { from: "2025-12-01", to: "2026-01-09" },
|
|
||||||
yearComparison: {
|
|
||||||
period: { from: "2024-12-01", to: "2025-01-09" },
|
|
||||||
totalsByCurrency: [comparison("RUB"), comparison("USD")],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(display?.comparison?.selectedPeriod.replaceAll(/\s/g, " ")).toBe(
|
|
||||||
"01.12.2025 – 09.01.2026",
|
|
||||||
);
|
);
|
||||||
expect(display?.comparison?.comparedPeriod.replaceAll(/\s/g, " ")).toBe(
|
expect(new Set(display.entries.map(({ key }) => key)).size).toBe(3);
|
||||||
"01.12.2024 – 09.01.2025",
|
|
||||||
);
|
|
||||||
expect(display?.comparison?.values.map(value => value.currency)).toEqual([
|
|
||||||
"RUB",
|
|
||||||
"USD",
|
|
||||||
]);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it("maps comparison notices by role regardless of dependency order or resource key", () => {
|
|
||||||
const selected = { ...resource(analytics).meta, role: "selected" as const };
|
|
||||||
|
|
||||||
const previous
|
|
||||||
= {
|
|
||||||
...resource(null).meta,
|
|
||||||
resourceKey: "opaque/year-looking-key",
|
|
||||||
role: "previous" as const,
|
|
||||||
sync: {
|
|
||||||
errorCode: "TBANK_UNAVAILABLE",
|
|
||||||
id: null,
|
|
||||||
state: "failed" as const,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const year = {
|
|
||||||
...resource(null).meta,
|
|
||||||
resourceKey: "opaque/previous-looking-key",
|
|
||||||
role: "year" as const,
|
|
||||||
unavailableReason: "CALENDAR_OR_ACCOUNT_HISTORY",
|
|
||||||
};
|
|
||||||
|
|
||||||
for (const dependencies of [
|
|
||||||
[selected, previous, year],
|
|
||||||
[year, selected, previous],
|
|
||||||
]) {
|
|
||||||
const display = toIncomeDisplayModel(analytics, {
|
|
||||||
...resource(analytics).meta,
|
|
||||||
dependencies,
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(display?.previousNotice).toBe("comparisonFailed");
|
|
||||||
expect(display?.yearNotice).toBe("yearUnavailable");
|
|
||||||
expect(display?.previousComparison).not.toBeNull();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|||||||
@@ -1,102 +1,11 @@
|
|||||||
import type { IncomeAnalytics, IncomeAnalyticsMeta } from "@/entities/income";
|
import type { IncomeAnalytics } from "@/entities/income";
|
||||||
|
|
||||||
import { formatDate } from "@/shared/lib";
|
|
||||||
|
|
||||||
import type { IncomePeriod } from "./period";
|
|
||||||
|
|
||||||
type ComparisonNotice
|
|
||||||
= | "comparisonFailed"
|
|
||||||
| "comparisonPending"
|
|
||||||
| "previousUnavailable"
|
|
||||||
| "yearUnavailable";
|
|
||||||
|
|
||||||
type IncomeDisplayModel = {
|
type IncomeDisplayModel = {
|
||||||
comparison: null
|
|
||||||
| {
|
|
||||||
comparedPeriod: string;
|
|
||||||
selectedPeriod: string;
|
|
||||||
values: (NonNullable<
|
|
||||||
IncomeAnalytics["yearComparison"]
|
|
||||||
>["totalsByCurrency"][number] & {
|
|
||||||
percentages: Record<"coupon"
|
|
||||||
| "dividend"
|
|
||||||
| "total", null | string>;
|
|
||||||
})[];
|
|
||||||
};
|
|
||||||
entries: { key: string; operation: IncomeAnalytics["entries"][number] }[];
|
entries: { key: string; operation: IncomeAnalytics["entries"][number] }[];
|
||||||
previousComparison: IncomeDisplayModel["comparison"];
|
|
||||||
previousNotice: ComparisonNotice;
|
|
||||||
yearNotice: ComparisonNotice;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
function comparisonDisplay(
|
|
||||||
period: IncomePeriod,
|
|
||||||
comparison: IncomeAnalytics["yearComparison"],
|
|
||||||
): IncomeDisplayModel["comparison"] {
|
|
||||||
if (!comparison)
|
|
||||||
return null;
|
|
||||||
|
|
||||||
return {
|
|
||||||
comparedPeriod: formatComparisonPeriod(comparison.period),
|
|
||||||
selectedPeriod: formatComparisonPeriod(period),
|
|
||||||
values: comparison.totalsByCurrency.map(value => ({
|
|
||||||
...value,
|
|
||||||
percentages: {
|
|
||||||
coupon: formatIncomeChange(
|
|
||||||
value.difference.coupon.value,
|
|
||||||
value.compared.coupon.value,
|
|
||||||
),
|
|
||||||
dividend: formatIncomeChange(
|
|
||||||
value.difference.dividend.value,
|
|
||||||
value.compared.dividend.value,
|
|
||||||
),
|
|
||||||
total: formatIncomeChange(
|
|
||||||
value.difference.total.value,
|
|
||||||
value.compared.total.value,
|
|
||||||
),
|
|
||||||
},
|
|
||||||
})),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function comparisonNotice(
|
|
||||||
dependency:
|
|
||||||
IncomeAnalyticsMeta["dependencies"][number] | undefined,
|
|
||||||
unavailable: "previousUnavailable" | "yearUnavailable",
|
|
||||||
): ComparisonNotice {
|
|
||||||
if (!dependency || dependency.unavailableReason) return unavailable;
|
|
||||||
|
|
||||||
return dependency.sync.state === "failed"
|
|
||||||
? "comparisonFailed"
|
|
||||||
: "comparisonPending";
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatComparisonPeriod(period: IncomePeriod): string {
|
|
||||||
return `${formatDate(period.from)} – ${formatDate(period.to)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatIncomeChange(
|
|
||||||
difference: string,
|
|
||||||
compared: string,
|
|
||||||
): null | string {
|
|
||||||
// Display-only ratio; server-provided Money values remain exact decimal strings.
|
|
||||||
const base = Number(compared);
|
|
||||||
if (!Number.isFinite(base) || base <= 0)
|
|
||||||
return null;
|
|
||||||
const ratio = Number(difference) / base;
|
|
||||||
if (!Number.isFinite(ratio))
|
|
||||||
return null;
|
|
||||||
|
|
||||||
return new Intl.NumberFormat("ru-RU", {
|
|
||||||
maximumFractionDigits: 1,
|
|
||||||
signDisplay: "exceptZero",
|
|
||||||
style: "percent",
|
|
||||||
}).format(ratio);
|
|
||||||
}
|
|
||||||
|
|
||||||
function toIncomeDisplayModel(
|
function toIncomeDisplayModel(
|
||||||
analytics: IncomeAnalytics,
|
analytics: IncomeAnalytics,
|
||||||
meta?: IncomeAnalyticsMeta,
|
|
||||||
): IncomeDisplayModel {
|
): IncomeDisplayModel {
|
||||||
const entries: IncomeDisplayModel["entries"] = [];
|
const entries: IncomeDisplayModel["entries"] = [];
|
||||||
const occurrences = new Map<string, number>();
|
const occurrences = new Map<string, number>();
|
||||||
@@ -116,17 +25,7 @@ function toIncomeDisplayModel(
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const dependencies = meta?.dependencies ?? [];
|
return { entries };
|
||||||
const previous = dependencies.find(({ role }) => role === "previous");
|
|
||||||
const year = dependencies.find(({ role }) => role === "year");
|
|
||||||
|
|
||||||
return {
|
|
||||||
comparison: comparisonDisplay(analytics.period, analytics.yearComparison),
|
|
||||||
entries,
|
|
||||||
previousComparison: comparisonDisplay(analytics.period, analytics.previous),
|
|
||||||
previousNotice: comparisonNotice(previous, "previousUnavailable"),
|
|
||||||
yearNotice: comparisonNotice(year, "yearUnavailable"),
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { type IncomeDisplayModel, toIncomeDisplayModel };
|
export { type IncomeDisplayModel, toIncomeDisplayModel };
|
||||||
|
|||||||
@@ -22,123 +22,6 @@
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comparison {
|
|
||||||
container-type: inline-size;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparisonGrid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: minmax(0, 1fr);
|
|
||||||
gap: var(--mantine-spacing-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparisonPanel {
|
|
||||||
min-width: 0;
|
|
||||||
padding: var(--mantine-spacing-md);
|
|
||||||
border-radius: var(--mantine-radius-md);
|
|
||||||
border-top: 3px solid var(--mantine-color-gray-4);
|
|
||||||
background: var(--mantine-color-gray-0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparisonPanel[data-kind="selected"] {
|
|
||||||
border-color: var(--mantine-color-blue-6);
|
|
||||||
background: var(--mantine-color-blue-0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparisonPanel[data-tone="positive"] {
|
|
||||||
border-color: var(--mantine-color-green-8);
|
|
||||||
background: var(--mantine-color-green-0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparisonPanel[data-tone="negative"] {
|
|
||||||
border-color: var(--mantine-color-red-8);
|
|
||||||
background: var(--mantine-color-red-0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparisonLabel,
|
|
||||||
.comparisonValues dt {
|
|
||||||
color: var(--mantine-color-gray-7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparisonValues {
|
|
||||||
margin: var(--mantine-spacing-md) 0 0;
|
|
||||||
font-size: var(--mantine-font-size-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparisonValues dd {
|
|
||||||
min-width: 0;
|
|
||||||
margin: 0;
|
|
||||||
font-weight: 600;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
overflow-wrap: anywhere;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparisonTotal {
|
|
||||||
margin-bottom: var(--mantine-spacing-md);
|
|
||||||
padding-bottom: var(--mantine-spacing-md);
|
|
||||||
border-bottom: 1px solid var(--mantine-color-gray-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparisonTotal dd {
|
|
||||||
margin-top: 4px;
|
|
||||||
font-size: var(--mantine-h2-font-size);
|
|
||||||
line-height: 1.3;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: -0.025em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparisonValues dd[data-tone="positive"] {
|
|
||||||
color: color-mix(
|
|
||||||
in srgb,
|
|
||||||
var(--mantine-color-green-9) 85%,
|
|
||||||
var(--mantine-color-black)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparisonValues dd[data-tone="negative"] {
|
|
||||||
color: var(--mantine-color-red-9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparisonValues dd[data-tone="neutral"] {
|
|
||||||
color: var(--mantine-color-gray-7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparisonPanel[data-kind="selected"] .comparisonTotal dd {
|
|
||||||
color: var(--mantine-color-blue-8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparisonDetail {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 4px var(--mantine-spacing-xs);
|
|
||||||
margin-top: var(--mantine-spacing-xs);
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparisonPercent {
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: var(--mantine-spacing-xs);
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: var(--mantine-radius-sm);
|
|
||||||
background: var(--mantine-color-white);
|
|
||||||
font-size: var(--mantine-font-size-xs);
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 1.5;
|
|
||||||
letter-spacing: normal;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparisonNotice {
|
|
||||||
background: var(--mantine-color-gray-0);
|
|
||||||
border-left: 3px solid var(--mantine-color-gray-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
@container (min-width: 42em) {
|
|
||||||
.comparisonGrid {
|
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 35.999em) {
|
@media (max-width: 35.999em) {
|
||||||
.fields {
|
.fields {
|
||||||
grid-template-columns: minmax(0, 1fr);
|
grid-template-columns: minmax(0, 1fr);
|
||||||
|
|||||||
@@ -72,23 +72,9 @@ const analytics
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
period: { from: "2026-08-01", to: "2026-08-27" },
|
period: { from: "2026-08-01", to: "2026-08-27" },
|
||||||
previous: {
|
|
||||||
period: { from: "2026-07-01", to: "2026-07-31" },
|
|
||||||
totalsByCurrency: [comparison("RUB")],
|
|
||||||
},
|
|
||||||
totalsByCurrency: [summary("RUB", "10", "2")],
|
totalsByCurrency: [summary("RUB", "10", "2")],
|
||||||
yearComparison: null,
|
|
||||||
} satisfies IncomeAnalytics & { instruments: [unknown] };
|
} satisfies IncomeAnalytics & { instruments: [unknown] };
|
||||||
|
|
||||||
function comparison(currency: string) {
|
|
||||||
return {
|
|
||||||
compared: summary(currency, "1", "0"),
|
|
||||||
currency,
|
|
||||||
difference: summary(currency, "9", "2"),
|
|
||||||
selected: summary(currency, "10", "2"),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function entry(): IncomeAnalytics["entries"][number] {
|
function entry(): IncomeAnalytics["entries"][number] {
|
||||||
return {
|
return {
|
||||||
accruedInterest: null,
|
accruedInterest: null,
|
||||||
@@ -195,7 +181,6 @@ describe("AccountIncomePage", () => {
|
|||||||
|
|
||||||
it("keeps income calendar dates in GET and source sync requests", async () => {
|
it("keeps income calendar dates in GET and source sync requests", async () => {
|
||||||
const requested: string[] = [];
|
const requested: string[] = [];
|
||||||
const syncRequests: unknown[] = [];
|
|
||||||
server.use(
|
server.use(
|
||||||
http.get(
|
http.get(
|
||||||
"*/api/v1/brokerage-accounts/:accountId/income-analytics",
|
"*/api/v1/brokerage-accounts/:accountId/income-analytics",
|
||||||
@@ -206,9 +191,10 @@ describe("AccountIncomePage", () => {
|
|||||||
resource(
|
resource(
|
||||||
null,
|
null,
|
||||||
{
|
{
|
||||||
sync: {
|
lastAttempt: {
|
||||||
errorCode: "TBANK_UNAVAILABLE",
|
finishedAt: "2026-08-14T00:01:00Z",
|
||||||
id: null,
|
problems: [],
|
||||||
|
startedAt: "2026-08-14T00:00:00Z",
|
||||||
state: "failed",
|
state: "failed",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@@ -216,30 +202,11 @@ describe("AccountIncomePage", () => {
|
|||||||
);
|
);
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
http.post("*/api/v1/tbank-sync", async ({ request }) => {
|
|
||||||
syncRequests.push(await request.json());
|
|
||||||
|
|
||||||
return HttpResponse.json(
|
|
||||||
{ code: "TBANK_UNAVAILABLE" },
|
|
||||||
{ status: 503 },
|
|
||||||
);
|
|
||||||
}),
|
|
||||||
);
|
);
|
||||||
renderPage("from=2024-02-29&to=2024-03-01");
|
renderPage("from=2024-02-29&to=2024-03-01");
|
||||||
const retry = await screen.findByRole("button", { name: "Повторить" });
|
await screen.findByText("Не удалось рассчитать пассивный доход");
|
||||||
expect(requested).toEqual(["?from=2024-02-29&to=2024-03-01"]);
|
expect(requested).toEqual(["?from=2024-02-29&to=2024-03-01"]);
|
||||||
expect(syncRequests).toEqual([]);
|
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
|
||||||
fireEvent.click(retry);
|
|
||||||
await waitFor(() =>
|
|
||||||
expect(syncRequests).toEqual([
|
|
||||||
{
|
|
||||||
accountId: "account-1",
|
|
||||||
from: "2024-02-29",
|
|
||||||
screen: "income",
|
|
||||||
to: "2024-03-01",
|
|
||||||
},
|
|
||||||
]),
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it("requests a multi-year period from the URL without resetting it", async () => {
|
it("requests a multi-year period from the URL without resetting it", async () => {
|
||||||
@@ -347,6 +314,24 @@ describe("AccountIncomePage", () => {
|
|||||||
).not.toBeInTheDocument();
|
).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("keeps a null analytics envelope loading instead of an empty page", async () => {
|
||||||
|
server.use(
|
||||||
|
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
|
||||||
|
HttpResponse.json(resource(null)),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
renderPage();
|
||||||
|
expect(
|
||||||
|
await screen.findByRole("status", { name: "Загрузка" }, { timeout: 4000 }),
|
||||||
|
).toBeVisible();
|
||||||
|
expect(
|
||||||
|
screen.queryByRole("heading", { name: "Пассивный доход" }),
|
||||||
|
).not.toBeInTheDocument();
|
||||||
|
expect(
|
||||||
|
screen.queryByRole("button", { name: "Повторить" }),
|
||||||
|
).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
it("renders the signed drill-down using opaque membership rather than instrument identity", async () => {
|
it("renders the signed drill-down using opaque membership rather than instrument identity", async () => {
|
||||||
const response
|
const response
|
||||||
= {
|
= {
|
||||||
@@ -391,19 +376,11 @@ describe("AccountIncomePage", () => {
|
|||||||
expect(within(panel).getByText("−2 ₽")).toBeInTheDocument();
|
expect(within(panel).getByText("−2 ₽")).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("renders realized text and comparisons without subscribing to events", async () => {
|
it("renders realized income without comparison blocks or event requests", async () => {
|
||||||
const eventsRequest = vi.fn(() => new HttpResponse(null, { status: 503 }));
|
const eventsRequest = vi.fn(() => new HttpResponse(null, { status: 503 }));
|
||||||
server.use(
|
server.use(
|
||||||
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
|
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
|
||||||
HttpResponse.json(
|
HttpResponse.json(resource(analytics)),
|
||||||
resource({
|
|
||||||
...analytics,
|
|
||||||
yearComparison: {
|
|
||||||
period: { from: "2025-08-01", to: "2025-08-27" },
|
|
||||||
totalsByCurrency: [comparison("RUB")],
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
http.get("*/api/v1/brokerage-accounts/account-1/events", eventsRequest),
|
http.get("*/api/v1/brokerage-accounts/account-1/events", eventsRequest),
|
||||||
);
|
);
|
||||||
@@ -418,75 +395,12 @@ describe("AccountIncomePage", () => {
|
|||||||
expect(screen.queryByText("Динамика")).not.toBeInTheDocument();
|
expect(screen.queryByText("Динамика")).not.toBeInTheDocument();
|
||||||
expect(eventsRequest).not.toHaveBeenCalled();
|
expect(eventsRequest).not.toHaveBeenCalled();
|
||||||
expect(screen.getByRole("region", { name: "Выплаты" })).toBeInTheDocument();
|
expect(screen.getByRole("region", { name: "Выплаты" })).toBeInTheDocument();
|
||||||
const year = screen.getByRole("region", { name: "Годом ранее" });
|
expect(screen.queryByText("Предыдущий период")).not.toBeInTheDocument();
|
||||||
|
expect(screen.queryByText("Годом ранее")).not.toBeInTheDocument();
|
||||||
const selected = within(year).getByRole("region", {
|
expect(screen.queryByText(/Сравнение с/)).not.toBeInTheDocument();
|
||||||
name: "01.08.2026 – 27.08.2026",
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(
|
|
||||||
screen.getByRole("region", { name: "01.08.2025 – 27.08.2025" }),
|
|
||||||
).toBeInTheDocument();
|
|
||||||
expect(
|
|
||||||
screen.getByRole("heading", { name: "Предыдущий период" }),
|
|
||||||
).toBeVisible();
|
|
||||||
expect(screen.queryByText("Выбранный период")).not.toBeInTheDocument();
|
|
||||||
expect(screen.queryByText("Сравниваемый период")).not.toBeInTheDocument();
|
|
||||||
expect(
|
|
||||||
screen.getByRole("heading", { level: 2, name: "Годом ранее" }),
|
|
||||||
).toBeInTheDocument();
|
|
||||||
expect(screen.queryByText("Сравнения")).not.toBeInTheDocument();
|
|
||||||
expect(screen.queryByText("RUB", { exact: true })).not.toBeInTheDocument();
|
|
||||||
|
|
||||||
for (const amount of ["10 ₽", "2 ₽", "12 ₽"]) {
|
|
||||||
expect(within(selected).getByText(amount)).toBeInTheDocument();
|
|
||||||
}
|
|
||||||
|
|
||||||
const difference = within(year).getByRole("region", { name: "Разница" });
|
|
||||||
|
|
||||||
for (const amount of ["+9 ₽", "+2 ₽", "+11 ₽"]) {
|
|
||||||
expect(within(difference).getByText(amount)).toBeInTheDocument();
|
|
||||||
}
|
|
||||||
|
|
||||||
expect(within(difference).getByText("+900 %")).toBeInTheDocument();
|
|
||||||
expect(within(difference).getByText("+1 100 %")).toBeInTheDocument();
|
|
||||||
expect(within(difference).queryByText("нет базы")).not.toBeInTheDocument();
|
|
||||||
expect(within(difference).getAllByText(/%$/)).toHaveLength(2);
|
|
||||||
expect(
|
|
||||||
// eslint-disable-next-line testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
|
|
||||||
within(difference).getByText("+2 ₽").closest("dd"),
|
|
||||||
).toHaveTextContent(/^\+2 ₽$/);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it("shows the unavailable year state without falling back to the previous period", async () => {
|
it("shows a quiet realized error", async () => {
|
||||||
const dependencies = [
|
|
||||||
{ ...resource(analytics).meta, role: "selected" as const },
|
|
||||||
{ ...resource(analytics).meta, role: "previous" as const },
|
|
||||||
{
|
|
||||||
...resource(null).meta,
|
|
||||||
role: "year" as const,
|
|
||||||
unavailableReason: "CALENDAR_OR_ACCOUNT_HISTORY",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
server.use(
|
|
||||||
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
|
|
||||||
HttpResponse.json(resource(analytics, { dependencies })),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
renderPage();
|
|
||||||
expect(
|
|
||||||
await screen.findByText("Сравнение с годом ранее недоступно."),
|
|
||||||
).toBeInTheDocument();
|
|
||||||
expect(
|
|
||||||
screen.queryByRole("region", { name: "Годом ранее" }),
|
|
||||||
).not.toBeInTheDocument();
|
|
||||||
expect(
|
|
||||||
screen.getByRole("region", { name: "Предыдущий период" }),
|
|
||||||
).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("shows a recoverable realized error", async () => {
|
|
||||||
server.use(
|
server.use(
|
||||||
http.get(
|
http.get(
|
||||||
"*/api/v1/brokerage-accounts/account-1/income-analytics",
|
"*/api/v1/brokerage-accounts/account-1/income-analytics",
|
||||||
@@ -495,8 +409,11 @@ describe("AccountIncomePage", () => {
|
|||||||
);
|
);
|
||||||
renderPage();
|
renderPage();
|
||||||
expect(
|
expect(
|
||||||
await screen.findByRole("button", { name: "Повторить" }),
|
await screen.findByText("Не удалось рассчитать пассивный доход", undefined, {
|
||||||
|
timeout: 4000,
|
||||||
|
}),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
|
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -631,7 +548,7 @@ describe("income period and snapshot boundary", () => {
|
|||||||
expect(requests).toEqual(["?from=2026-09-01&to=2026-09-01"]);
|
expect(requests).toEqual(["?from=2026-09-01&to=2026-09-01"]);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("keeps valid data and draft during refetch, warns on failure and retries", async () => {
|
it("keeps valid data and draft during refetch failure", async () => {
|
||||||
respondWithRequestedPeriod([]);
|
respondWithRequestedPeriod([]);
|
||||||
const { queryClient } = renderPage();
|
const { queryClient } = renderPage();
|
||||||
await screen.findByLabelText("Период");
|
await screen.findByLabelText("Период");
|
||||||
@@ -653,51 +570,13 @@ describe("income period and snapshot boundary", () => {
|
|||||||
act(() => {
|
act(() => {
|
||||||
void queryClient.invalidateQueries();
|
void queryClient.invalidateQueries();
|
||||||
});
|
});
|
||||||
expect(
|
|
||||||
await screen.findByRole("status", { name: "Обновляем пассивный доход" }),
|
|
||||||
).toBeInTheDocument();
|
|
||||||
expect(screen.getByRole("region", { name: "Выплаты" })).toBeVisible();
|
expect(screen.getByRole("region", { name: "Выплаты" })).toBeVisible();
|
||||||
expect(screen.getByLabelText("Период")).toHaveTextContent(
|
expect(screen.getByLabelText("Период")).toHaveTextContent(
|
||||||
"02.08.2026 – 27.08.2026",
|
"02.08.2026 – 27.08.2026",
|
||||||
);
|
);
|
||||||
release();
|
release();
|
||||||
expect(
|
|
||||||
await screen.findByText(/Показан последний загруженный результат/),
|
|
||||||
).toBeInTheDocument();
|
|
||||||
expect(screen.getByRole("region", { name: "Выплаты" })).toBeVisible();
|
expect(screen.getByRole("region", { name: "Выплаты" })).toBeVisible();
|
||||||
server.use(
|
expect(screen.queryByText(/Показан последний загруженный результат/)).not.toBeInTheDocument();
|
||||||
http.post("*/api/v1/tbank-sync", () =>
|
|
||||||
HttpResponse.json(
|
|
||||||
{
|
|
||||||
id: "income",
|
|
||||||
now: "2026-09-25T00:00:00Z",
|
|
||||||
scope: { accountId: "account-1", screen: "income" },
|
|
||||||
},
|
|
||||||
{ status: 202 },
|
|
||||||
),
|
|
||||||
),
|
|
||||||
http.get("*/api/v1/tbank-sync/:id", () =>
|
|
||||||
|
|
||||||
HttpResponse.json(
|
|
||||||
{
|
|
||||||
errorCode: null,
|
|
||||||
id: "income",
|
|
||||||
now: "2026-09-25T00:00:00Z",
|
|
||||||
scope: null,
|
|
||||||
state: "succeeded",
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
|
|
||||||
HttpResponse.json(resource(analytics, { dataRevision: "2" })),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
|
|
||||||
await waitFor(() =>
|
|
||||||
expect(
|
|
||||||
screen.queryByText(/Показан последний загруженный результат/),
|
|
||||||
).not.toBeInTheDocument(),
|
|
||||||
);
|
|
||||||
expect(screen.getByLabelText("Период")).toHaveTextContent(
|
expect(screen.getByLabelText("Период")).toHaveTextContent(
|
||||||
"02.08.2026 – 27.08.2026",
|
"02.08.2026 – 27.08.2026",
|
||||||
);
|
);
|
||||||
@@ -802,119 +681,3 @@ describe("income period and snapshot boundary", () => {
|
|||||||
expect(screen.queryByRole("button")).not.toBeInTheDocument();
|
expect(screen.queryByRole("button")).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it.each([false, true])(
|
|
||||||
"shows unavailable comparisons for absent roles without positional fallback (legacy=%s)",
|
|
||||||
async (legacy) => {
|
|
||||||
server.use(
|
|
||||||
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
|
|
||||||
HttpResponse.json(
|
|
||||||
|
|
||||||
resource(
|
|
||||||
{ ...analytics, previous: null, yearComparison: null },
|
|
||||||
{
|
|
||||||
dependencies: legacy
|
|
||||||
? [
|
|
||||||
resource(null).meta,
|
|
||||||
resource(null).meta,
|
|
||||||
resource(null).meta,
|
|
||||||
]
|
|
||||||
: [],
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
renderPage();
|
|
||||||
expect(
|
|
||||||
await screen.findByText("Сравнение с предыдущим периодом недоступно."),
|
|
||||||
).toBeVisible();
|
|
||||||
expect(
|
|
||||||
screen.getByText("Сравнение с годом ранее недоступно."),
|
|
||||||
).toBeVisible();
|
|
||||||
expect(
|
|
||||||
screen.queryByText("Период сравнения ещё не загружен полностью."),
|
|
||||||
).not.toBeInTheDocument();
|
|
||||||
expect(screen.getByRole("region", { name: "Выплаты" })).toBeVisible();
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
it("shows selected income before comparison coverage without inventing a zero baseline", async () => {
|
|
||||||
const dependencies = (["year", "selected", "previous"] as const).map(
|
|
||||||
|
|
||||||
role =>
|
|
||||||
({
|
|
||||||
...resource(role === "selected" ? analytics : null).meta,
|
|
||||||
role,
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
server.use(
|
|
||||||
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
|
|
||||||
HttpResponse.json(
|
|
||||||
|
|
||||||
resource(
|
|
||||||
{ ...analytics, previous: null, yearComparison: null },
|
|
||||||
{ dependencies },
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
renderPage();
|
|
||||||
expect(await screen.findByRole("region", { name: "Выплаты" })).toBeVisible();
|
|
||||||
expect(
|
|
||||||
screen.queryByRole("region", { name: "Год назад" }),
|
|
||||||
).not.toBeInTheDocument();
|
|
||||||
expect(screen.getAllByText("12 ₽").length).toBeGreaterThan(0);
|
|
||||||
expect(
|
|
||||||
screen.getAllByText("Период сравнения ещё не загружен полностью."),
|
|
||||||
).toHaveLength(2);
|
|
||||||
expect(
|
|
||||||
screen.queryByText("Сравнение с годом ранее недоступно."),
|
|
||||||
).not.toBeInTheDocument();
|
|
||||||
expect(
|
|
||||||
screen.queryByRole("region", { name: "Разница" }),
|
|
||||||
).not.toBeInTheDocument();
|
|
||||||
expect(screen.getByLabelText("Период")).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("keeps complete previous comparison while year source failed without inventing its amounts", async () => {
|
|
||||||
const dependencies = [
|
|
||||||
{
|
|
||||||
...resource(analytics).meta,
|
|
||||||
role: "previous" as const,
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
...resource(null).meta,
|
|
||||||
role: "year" as const,
|
|
||||||
sync: {
|
|
||||||
errorCode: "TBANK_UNAVAILABLE",
|
|
||||||
id: null,
|
|
||||||
state: "failed" as const,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
...resource(analytics).meta,
|
|
||||||
role: "selected" as const,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
server.use(
|
|
||||||
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
|
|
||||||
HttpResponse.json(resource(analytics, { dependencies })),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
renderPage();
|
|
||||||
expect(
|
|
||||||
await screen.findByRole("region", { name: "Предыдущий период" }),
|
|
||||||
).toBeVisible();
|
|
||||||
expect(
|
|
||||||
screen.getByText(
|
|
||||||
"Не удалось загрузить период сравнения. Повторите обновление.",
|
|
||||||
),
|
|
||||||
).toBeVisible();
|
|
||||||
expect(
|
|
||||||
screen.queryByRole("region", { name: "Годом ранее" }),
|
|
||||||
).not.toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { useParams, useSearchParams } from "react-router";
|
|||||||
|
|
||||||
import { type IncomeAnalytics, useIncomeAnalytics } from "@/entities/income";
|
import { type IncomeAnalytics, useIncomeAnalytics } from "@/entities/income";
|
||||||
import { useScreenSync } from "@/features/tbank-connection";
|
import { useScreenSync } from "@/features/tbank-connection";
|
||||||
import { isValidPeriod, moscowDate } from "@/shared/lib";
|
import { isValidPeriod, moscowDate, useInitialAvailability } from "@/shared/lib";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
type IncomeDisplayModel,
|
type IncomeDisplayModel,
|
||||||
@@ -27,19 +27,13 @@ type AccountIncomePageViewModel
|
|||||||
display: IncomeDisplayModel;
|
display: IncomeDisplayModel;
|
||||||
form: ReturnType<typeof useForm<IncomeForm>>;
|
form: ReturnType<typeof useForm<IncomeForm>>;
|
||||||
formRevision: string;
|
formRevision: string;
|
||||||
lastSuccessfulAt?: null | string;
|
|
||||||
onReset: () => void;
|
onReset: () => void;
|
||||||
onSubmit: (values: IncomeForm) => void;
|
onSubmit: (values: IncomeForm) => void;
|
||||||
partial?: boolean;
|
partial?: boolean;
|
||||||
refreshError: boolean;
|
|
||||||
refreshing: boolean;
|
|
||||||
retry: () => Promise<unknown> | undefined;
|
|
||||||
sourceError?: boolean;
|
|
||||||
state: "loaded";
|
state: "loaded";
|
||||||
}
|
}
|
||||||
| {
|
| {
|
||||||
period: IncomePeriod;
|
period: IncomePeriod;
|
||||||
retry: () => Promise<unknown> | undefined;
|
|
||||||
state: "error";
|
state: "error";
|
||||||
}
|
}
|
||||||
| { state: "loading" };
|
| { state: "loading" };
|
||||||
@@ -69,7 +63,7 @@ const useAccountIncomePageViewModel = (): AccountIncomePageViewModel => {
|
|||||||
const [resetRevision, setResetRevision] = useState(0);
|
const [resetRevision, setResetRevision] = useState(0);
|
||||||
const analytics = useIncomeAnalytics(accountId, period);
|
const analytics = useIncomeAnalytics(accountId, period);
|
||||||
|
|
||||||
const sync = useScreenSync(
|
useScreenSync(
|
||||||
{ accountId, from: period.from, screen: "income", to: period.to },
|
{ accountId, from: period.from, screen: "income", to: period.to },
|
||||||
[analytics],
|
[analytics],
|
||||||
);
|
);
|
||||||
@@ -82,13 +76,22 @@ const useAccountIncomePageViewModel = (): AccountIncomePageViewModel => {
|
|||||||
form.reset(draftPeriod(period));
|
form.reset(draftPeriod(period));
|
||||||
}, [accountId, form, period]);
|
}, [accountId, form, period]);
|
||||||
|
|
||||||
if (analytics.isLoading || !analytics.data) {
|
const availability = useInitialAvailability({
|
||||||
return analytics.isError || analytics.meta?.sync.state === "failed"
|
hasContent: !!analytics.data,
|
||||||
? { period, retry: sync.retry, state: "error" }
|
identity: `${accountId}:${period.from}:${period.to}`,
|
||||||
: { state: "loading" };
|
isError: analytics.isError || analytics.meta?.lastAttempt.state === "failed",
|
||||||
}
|
isFetching: analytics.isFetching,
|
||||||
|
});
|
||||||
|
|
||||||
const display = toIncomeDisplayModel(analytics.data, analytics.meta);
|
if (availability === "loading" && analytics.isLoading)
|
||||||
|
return { state: "loading" };
|
||||||
|
|
||||||
|
if (!analytics.data)
|
||||||
|
return availability === "unavailable"
|
||||||
|
? { period, state: "error" }
|
||||||
|
: { state: "loading" };
|
||||||
|
|
||||||
|
const display = toIncomeDisplayModel(analytics.data);
|
||||||
|
|
||||||
const onSubmit = (values: IncomeForm) => {
|
const onSubmit = (values: IncomeForm) => {
|
||||||
const from = parseDraftDate(values.from);
|
const from = parseDraftDate(values.from);
|
||||||
@@ -109,14 +112,9 @@ const useAccountIncomePageViewModel = (): AccountIncomePageViewModel => {
|
|||||||
display,
|
display,
|
||||||
form,
|
form,
|
||||||
formRevision: `${accountId}:${period.from}:${period.to}:${resetRevision}`,
|
formRevision: `${accountId}:${period.from}:${period.to}:${resetRevision}`,
|
||||||
lastSuccessfulAt: analytics.meta?.lastSuccessfulAt,
|
|
||||||
onReset,
|
onReset,
|
||||||
onSubmit,
|
onSubmit,
|
||||||
partial: analytics.meta?.availability !== "complete",
|
partial: analytics.meta?.completeness === "incomplete",
|
||||||
refreshError: analytics.isError || sync.sourceError || sync.transportError,
|
|
||||||
refreshing: analytics.isFetching || sync.refreshing,
|
|
||||||
retry: sync.retry,
|
|
||||||
sourceError: sync.sourceError,
|
|
||||||
state: "loaded",
|
state: "loaded",
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
+1
-3
@@ -1,6 +1,5 @@
|
|||||||
import type { FC } from "react";
|
import type { FC } from "react";
|
||||||
|
|
||||||
import { Button } from "@mantine/core";
|
|
||||||
import { StateView } from "@wealthledger/ui";
|
import { StateView } from "@wealthledger/ui";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
@@ -8,12 +7,11 @@ import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
|
|||||||
|
|
||||||
type ErrorProps = Extract<AccountIncomePageViewModel, { state: "error" }>;
|
type ErrorProps = Extract<AccountIncomePageViewModel, { state: "error" }>;
|
||||||
|
|
||||||
const AccountIncomePageError: FC<ErrorProps> = (props) => {
|
const AccountIncomePageError: FC<ErrorProps> = () => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StateView
|
<StateView
|
||||||
action={<Button onClick={props.retry}>{t("income.retry")}</Button>}
|
|
||||||
error
|
error
|
||||||
text={t("income.errorText")}
|
text={t("income.errorText")}
|
||||||
title={t("income.errorTitle")}
|
title={t("income.errorTitle")}
|
||||||
|
|||||||
+1
-53
@@ -2,23 +2,16 @@ import type { FC } from "react";
|
|||||||
|
|
||||||
import {
|
import {
|
||||||
Alert,
|
Alert,
|
||||||
Button,
|
|
||||||
Group,
|
|
||||||
Loader,
|
|
||||||
Stack,
|
Stack,
|
||||||
Text,
|
|
||||||
Title,
|
Title,
|
||||||
} from "@mantine/core";
|
} from "@mantine/core";
|
||||||
import { StateView } from "@wealthledger/ui";
|
import { StateView } from "@wealthledger/ui";
|
||||||
import { FormProvider } from "react-hook-form";
|
import { FormProvider } from "react-hook-form";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
import { SourceSyncStatus } from "@/shared/ui";
|
|
||||||
|
|
||||||
import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
|
import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
|
||||||
|
|
||||||
import classes from "../AccountIncomePage.module.css";
|
import classes from "../AccountIncomePage.module.css";
|
||||||
import { IncomeComparisons } from "./IncomeComparisons.view";
|
|
||||||
import { IncomePayments } from "./IncomePayments.view";
|
import { IncomePayments } from "./IncomePayments.view";
|
||||||
import { IncomePeriodForm } from "./IncomePeriodForm/IncomePeriodForm.view";
|
import { IncomePeriodForm } from "./IncomePeriodForm/IncomePeriodForm.view";
|
||||||
import { IncomeSummary } from "./IncomeSummary.view";
|
import { IncomeSummary } from "./IncomeSummary.view";
|
||||||
@@ -40,21 +33,14 @@ const AccountIncomePageLoadedSummary: FC<LoadedProps> = (props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
|
const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
|
||||||
const { display, form, onReset, onSubmit, refreshError, refreshing, retry }
|
const { display, form, onReset, onSubmit } = props;
|
||||||
= props;
|
|
||||||
|
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack className={classes.page} gap="lg">
|
<Stack className={classes.page} gap="lg">
|
||||||
<SourceSyncStatus lastSuccessfulAt={props.lastSuccessfulAt} />
|
|
||||||
|
|
||||||
<Title order={1}>{t("income.title")}</Title>
|
<Title order={1}>{t("income.title")}</Title>
|
||||||
|
|
||||||
<Button disabled={refreshing} onClick={retry} w="fit-content">
|
|
||||||
{t("investment.refresh")}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<FormProvider {...form}>
|
<FormProvider {...form}>
|
||||||
<IncomePeriodForm
|
<IncomePeriodForm
|
||||||
key={props.formRevision}
|
key={props.formRevision}
|
||||||
@@ -63,48 +49,10 @@ const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
|
|||||||
/>
|
/>
|
||||||
</FormProvider>
|
</FormProvider>
|
||||||
|
|
||||||
{!!refreshing && (
|
|
||||||
<Group aria-label={t("income.refreshing")} gap="xs" role="status">
|
|
||||||
<Loader size="sm" />
|
|
||||||
|
|
||||||
<Text>{t("income.refreshing")}</Text>
|
|
||||||
</Group>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!!refreshError && (
|
|
||||||
<Alert aria-live="polite" color="orange" role="status">
|
|
||||||
<Stack gap="sm">
|
|
||||||
<Text>
|
|
||||||
{t(
|
|
||||||
props.sourceError
|
|
||||||
? "investment.syncFailed"
|
|
||||||
: "income.refreshError",
|
|
||||||
)}
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
<Button onClick={retry} variant="default">
|
|
||||||
{t("income.retry")}
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<AccountIncomePageLoadedSummary {...props} />
|
<AccountIncomePageLoadedSummary {...props} />
|
||||||
|
|
||||||
<Alert color="blue">{t("income.taxBoundary")}</Alert>
|
<Alert color="blue">{t("income.taxBoundary")}</Alert>
|
||||||
|
|
||||||
<IncomeComparisons
|
|
||||||
comparison={display.previousComparison}
|
|
||||||
notice={t(`income.${display.previousNotice}`)}
|
|
||||||
title={t("income.previousPeriod")}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<IncomeComparisons
|
|
||||||
comparison={display.comparison}
|
|
||||||
notice={t(`income.${display.yearNotice}`)}
|
|
||||||
title={t("income.yearAgo")}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<IncomePayments entries={display.entries} />
|
<IncomePayments entries={display.entries} />
|
||||||
</Stack>
|
</Stack>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,167 +0,0 @@
|
|||||||
import type { FC } from "react";
|
|
||||||
|
|
||||||
import { Paper, Stack, Text, Title } from "@mantine/core";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
|
|
||||||
import { formatMoney } from "@/shared/lib";
|
|
||||||
|
|
||||||
import type { IncomeDisplayModel } from "../../../model/display";
|
|
||||||
|
|
||||||
import classes from "../AccountIncomePage.module.css";
|
|
||||||
|
|
||||||
type ComparisonProps = NonNullable<IncomeDisplayModel["comparison"]> & {
|
|
||||||
title: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
type ComparisonValuesProps = {
|
|
||||||
kind: "compared"
|
|
||||||
| "difference"
|
|
||||||
| "selected";
|
|
||||||
label: string;
|
|
||||||
percentages?: ComparisonProps["values"][number]["percentages"];
|
|
||||||
values: ComparisonProps["values"][number]["selected"];
|
|
||||||
};
|
|
||||||
|
|
||||||
type IncomeComparisonsProps = {
|
|
||||||
comparison: IncomeDisplayModel["comparison"];
|
|
||||||
notice: string;
|
|
||||||
title: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const IncomeComparisons: FC<IncomeComparisonsProps> = (props) => {
|
|
||||||
return (
|
|
||||||
<Stack>
|
|
||||||
<Title order={2}>{props.title}</Title>
|
|
||||||
|
|
||||||
{props.comparison
|
|
||||||
? <Comparison {...props.comparison} title={props.title} />
|
|
||||||
: (
|
|
||||||
<Paper className={classes.comparisonNotice} p="sm" radius="md">
|
|
||||||
<Text aria-live="polite" c="gray.7" role="status" size="sm">
|
|
||||||
{props.notice}
|
|
||||||
</Text>
|
|
||||||
</Paper>
|
|
||||||
)}
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const Comparison: FC<ComparisonProps> = (props) => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section aria-label={props.title} className={classes.comparison}>
|
|
||||||
<Stack gap="md">
|
|
||||||
{props.values.map(value => (
|
|
||||||
<Stack
|
|
||||||
aria-label={value.currency}
|
|
||||||
gap="xs"
|
|
||||||
key={value.currency}
|
|
||||||
role="group"
|
|
||||||
>
|
|
||||||
<div className={classes.comparisonGrid}>
|
|
||||||
<ComparisonValues
|
|
||||||
kind="selected"
|
|
||||||
label={props.selectedPeriod}
|
|
||||||
values={value.selected}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ComparisonValues
|
|
||||||
kind="compared"
|
|
||||||
label={props.comparedPeriod}
|
|
||||||
values={value.compared}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ComparisonValues
|
|
||||||
kind="difference"
|
|
||||||
label={t("income.difference")}
|
|
||||||
percentages={value.percentages}
|
|
||||||
values={value.difference}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Stack>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{props.values.length === 0 && (
|
|
||||||
<Text c="gray.7" size="sm">
|
|
||||||
{t("income.comparisonEmpty")}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
</Stack>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const ComparisonValues: FC<ComparisonValuesProps> = (props) => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const data_tone
|
|
||||||
= props.kind === "difference"
|
|
||||||
? differenceTone(props.values.total.value)
|
|
||||||
: undefined;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section
|
|
||||||
aria-label={props.label}
|
|
||||||
className={classes.comparisonPanel}
|
|
||||||
data-kind={props.kind}
|
|
||||||
data-tone={data_tone}
|
|
||||||
>
|
|
||||||
<Text className={classes.comparisonLabel} fw={600} size="sm">
|
|
||||||
{props.label}
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
<dl className={classes.comparisonValues}>
|
|
||||||
{(["total", "coupon", "dividend"] as const).map((key) => {
|
|
||||||
const money
|
|
||||||
// eslint-disable-next-line security/detect-object-injection -- This lookup uses a fixed typed key set, not an arbitrary external property name.
|
|
||||||
= props.values[key];
|
|
||||||
|
|
||||||
const percentage
|
|
||||||
// eslint-disable-next-line security/detect-object-injection -- This lookup uses a fixed typed key set, not an arbitrary external property name.
|
|
||||||
= props.percentages?.[key];
|
|
||||||
|
|
||||||
const tone
|
|
||||||
= props.kind === "difference"
|
|
||||||
? differenceTone(money.value)
|
|
||||||
: undefined;
|
|
||||||
|
|
||||||
const appearanceClass
|
|
||||||
= key === "total"
|
|
||||||
? classes.comparisonTotal
|
|
||||||
: classes.comparisonDetail;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={appearanceClass} key={key}>
|
|
||||||
<dt>{t(`income.${key}`)}</dt>
|
|
||||||
|
|
||||||
<dd data-tone={tone}>
|
|
||||||
<span>
|
|
||||||
{tone === "positive" ? "+" : ""}
|
|
||||||
|
|
||||||
{formatMoney(money)}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{!!percentage && (
|
|
||||||
<span className={classes.comparisonPercent}>
|
|
||||||
{percentage}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</dl>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
function differenceTone(value: string): "negative"
|
|
||||||
| "neutral"
|
|
||||||
| "positive" {
|
|
||||||
if (!/[1-9]/.test(value)) return "neutral";
|
|
||||||
|
|
||||||
return value.startsWith("-") ? "negative" : "positive";
|
|
||||||
}
|
|
||||||
|
|
||||||
export { IncomeComparisons };
|
|
||||||
+3
-10
@@ -1,6 +1,6 @@
|
|||||||
import type { FC, SubmitEventHandler } from "react";
|
import type { FC, SubmitEventHandler } from "react";
|
||||||
|
|
||||||
import { Button, Paper, Stack, Text } from "@mantine/core";
|
import { Button, Stack } from "@mantine/core";
|
||||||
import { DatePickerInput } from "@mantine/dates";
|
import { DatePickerInput } from "@mantine/dates";
|
||||||
|
|
||||||
import classes from "../../AccountIncomePage.module.css";
|
import classes from "../../AccountIncomePage.module.css";
|
||||||
@@ -27,15 +27,8 @@ const IncomePeriodForm: FC<IncomePeriodFormProps> = (props) => {
|
|||||||
} = useIncomePeriodFormVm();
|
} = useIncomePeriodFormVm();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Paper
|
<form onSubmit={props.onSubmit}>
|
||||||
component="form"
|
|
||||||
onSubmit={props.onSubmit}
|
|
||||||
p="md"
|
|
||||||
radius="md"
|
|
||||||
withBorder
|
|
||||||
>
|
|
||||||
<Stack gap="sm">
|
<Stack gap="sm">
|
||||||
<Text fw={700}>{t("income.period")}</Text>
|
|
||||||
|
|
||||||
<div className={classes.fields}>
|
<div className={classes.fields}>
|
||||||
<DatePickerInput
|
<DatePickerInput
|
||||||
@@ -71,7 +64,7 @@ const IncomePeriodForm: FC<IncomePeriodFormProps> = (props) => {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</Stack>
|
</Stack>
|
||||||
</Paper>
|
</form>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
+31
-32
@@ -18,6 +18,7 @@ import {
|
|||||||
LedgerEntryRow,
|
LedgerEntryRow,
|
||||||
} from "@/entities/broker-operation";
|
} from "@/entities/broker-operation";
|
||||||
import { configureAuthClient } from "@/shared/api";
|
import { configureAuthClient } from "@/shared/api";
|
||||||
|
import { defaultPeriod } from "@/shared/lib";
|
||||||
import { createTestQueryClient } from "@/test/query";
|
import { createTestQueryClient } from "@/test/query";
|
||||||
import { resource } from "@/test/resource";
|
import { resource } from "@/test/resource";
|
||||||
import { server } from "@/test/server";
|
import { server } from "@/test/server";
|
||||||
@@ -312,18 +313,20 @@ describe("AccountOperationsPage", () => {
|
|||||||
"allows resetting filters after a request failure for %s",
|
"allows resetting filters after a request failure for %s",
|
||||||
async (accountId) => {
|
async (accountId) => {
|
||||||
configureTestAuth();
|
configureTestAuth();
|
||||||
|
const [defaultFrom] = defaultPeriod();
|
||||||
server.use(
|
server.use(
|
||||||
http.get(
|
http.get(
|
||||||
"*/api/v1/brokerage-accounts/:accountId/operations",
|
"*/api/v1/brokerage-accounts/:accountId/operations",
|
||||||
({ request }) =>
|
({ request }) =>
|
||||||
new URL(request.url).searchParams.has("from")
|
new URL(request.url).searchParams.get("from")
|
||||||
? HttpResponse.json({ code: "VALIDATION_ERROR" }, { status: 400 })
|
=== `${defaultFrom}T00:00:00.000Z`
|
||||||
: HttpResponse.json(
|
? HttpResponse.json(
|
||||||
|
|
||||||
resource(
|
resource(
|
||||||
{ hasNext: false, items: [], nextCursor: null },
|
{ hasNext: false, items: [], nextCursor: null },
|
||||||
),
|
),
|
||||||
),
|
)
|
||||||
|
: HttpResponse.json({ code: "VALIDATION_ERROR" }, { status: 400 }),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
render(
|
render(
|
||||||
@@ -346,7 +349,7 @@ describe("AccountOperationsPage", () => {
|
|||||||
</MantineProvider>
|
</MantineProvider>
|
||||||
</QueryClientProvider>,
|
</QueryClientProvider>,
|
||||||
);
|
);
|
||||||
await screen.findByRole("button", { name: "Повторить" });
|
await screen.findByRole("button", { name: "Сбросить" });
|
||||||
fireEvent.click(screen.getByRole("button", { name: "Сбросить" }));
|
fireEvent.click(screen.getByRole("button", { name: "Сбросить" }));
|
||||||
await screen.findByLabelText("Период");
|
await screen.findByLabelText("Период");
|
||||||
expect(screen.getByLabelText("URL")).toBeEmptyDOMElement();
|
expect(screen.getByLabelText("URL")).toBeEmptyDOMElement();
|
||||||
@@ -484,15 +487,30 @@ describe("AccountOperationsPage", () => {
|
|||||||
);
|
);
|
||||||
renderPage();
|
renderPage();
|
||||||
expect(
|
expect(
|
||||||
await screen.findByText("Не удалось загрузить журнал"),
|
await screen.findByText("Не удалось загрузить журнал", undefined, {
|
||||||
|
timeout: 4000,
|
||||||
|
}),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("keeps a null operations envelope loading instead of a confirmed empty period", async () => {
|
||||||
|
configureTestAuth();
|
||||||
|
server.use(
|
||||||
|
http.get("*/api/v1/brokerage-accounts/:accountId/operations", () =>
|
||||||
|
HttpResponse.json(resource(null)),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
renderPage();
|
||||||
|
expect(
|
||||||
|
await screen.findByRole("status", { name: "Загрузка" }, { timeout: 4000 }),
|
||||||
|
).toBeVisible();
|
||||||
|
expect(screen.queryByText("Операций нет")).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it("keeps UTC operation boundaries in GET and source sync requests", async () => {
|
it("keeps UTC operation boundaries in GET and source sync requests", async () => {
|
||||||
configureTestAuth();
|
configureTestAuth();
|
||||||
const requested: Record<string, string>[] = [];
|
const requested: Record<string, string>[] = [];
|
||||||
const syncRequests: unknown[] = [];
|
|
||||||
server.use(
|
server.use(
|
||||||
http.get(
|
http.get(
|
||||||
"*/api/v1/brokerage-accounts/:accountId/operations",
|
"*/api/v1/brokerage-accounts/:accountId/operations",
|
||||||
@@ -503,9 +521,10 @@ it("keeps UTC operation boundaries in GET and source sync requests", async () =>
|
|||||||
resource(
|
resource(
|
||||||
null,
|
null,
|
||||||
{
|
{
|
||||||
sync: {
|
lastAttempt: {
|
||||||
errorCode: "TBANK_UNAVAILABLE",
|
finishedAt: "2026-08-14T00:01:00Z",
|
||||||
id: null,
|
problems: [],
|
||||||
|
startedAt: "2026-08-14T00:00:00Z",
|
||||||
state: "failed",
|
state: "failed",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@@ -513,14 +532,9 @@ it("keeps UTC operation boundaries in GET and source sync requests", async () =>
|
|||||||
);
|
);
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
http.post("*/api/v1/tbank-sync", async ({ request }) => {
|
|
||||||
syncRequests.push(await request.json());
|
|
||||||
|
|
||||||
return HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 });
|
|
||||||
}),
|
|
||||||
);
|
);
|
||||||
renderPage("?from=2024-02-29&to=2024-03-01&categories=trade");
|
renderPage("?from=2024-02-29&to=2024-03-01&categories=trade");
|
||||||
const retry = await screen.findByRole("button", { name: "Повторить" });
|
await screen.findByRole("button", { name: "Сбросить" });
|
||||||
expect(requested).toEqual([
|
expect(requested).toEqual([
|
||||||
{
|
{
|
||||||
categories: "trade",
|
categories: "trade",
|
||||||
@@ -529,20 +543,6 @@ it("keeps UTC operation boundaries in GET and source sync requests", async () =>
|
|||||||
to: "2024-03-01T23:59:59.999Z",
|
to: "2024-03-01T23:59:59.999Z",
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
expect(syncRequests).toEqual([]);
|
|
||||||
fireEvent.click(retry);
|
|
||||||
await waitFor(() =>
|
|
||||||
expect(syncRequests).toEqual([
|
|
||||||
{
|
|
||||||
accountId: "account-1",
|
|
||||||
categories: ["trade"],
|
|
||||||
from: "2024-02-29T00:00:00.000Z",
|
|
||||||
limit: 100,
|
|
||||||
screen: "operations",
|
|
||||||
to: "2024-03-01T23:59:59.999Z",
|
|
||||||
},
|
|
||||||
]),
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it("does not label incomplete empty operations as a confirmed empty period", async () => {
|
it("does not label incomplete empty operations as a confirmed empty period", async () => {
|
||||||
@@ -558,7 +558,7 @@ it("does not label incomplete empty operations as a confirmed empty period", asy
|
|||||||
items: [],
|
items: [],
|
||||||
nextCursor: null,
|
nextCursor: null,
|
||||||
},
|
},
|
||||||
{ availability: "partial" },
|
{ completeness: "incomplete" },
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
@@ -595,7 +595,6 @@ it("recovers an invalid cursor at the first page without clearing applied filter
|
|||||||
);
|
);
|
||||||
renderPage("?from=2026-08-01&to=2026-08-14&categories=trade");
|
renderPage("?from=2026-08-01&to=2026-08-14&categories=trade");
|
||||||
fireEvent.click(await screen.findByRole("button", { name: "Далее" }));
|
fireEvent.click(await screen.findByRole("button", { name: "Далее" }));
|
||||||
fireEvent.click(await screen.findByRole("button", { name: "Повторить" }));
|
|
||||||
await waitFor(() => expect(searches).toHaveLength(3));
|
await waitFor(() => expect(searches).toHaveLength(3));
|
||||||
assert.isDefined(searches[0]);
|
assert.isDefined(searches[0]);
|
||||||
assert.isDefined(searches[2]);
|
assert.isDefined(searches[2]);
|
||||||
|
|||||||
@@ -2,6 +2,8 @@ import { useQueryClient } from "@tanstack/react-query";
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { useParams } from "react-router";
|
import { useParams } from "react-router";
|
||||||
|
|
||||||
|
import type { InvestmentResourceMeta } from "@/shared/api";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
type BrokerageOperation,
|
type BrokerageOperation,
|
||||||
brokerageOperationsQueryOptions,
|
brokerageOperationsQueryOptions,
|
||||||
@@ -11,7 +13,13 @@ import {
|
|||||||
} from "@/entities/broker-operation";
|
} from "@/entities/broker-operation";
|
||||||
import { useScreenSync } from "@/features/tbank-connection";
|
import { useScreenSync } from "@/features/tbank-connection";
|
||||||
import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
|
import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
|
||||||
import { isValidPeriod, useUrlPeriod } from "@/shared/lib";
|
import {
|
||||||
|
defaultPeriod,
|
||||||
|
isValidPeriod,
|
||||||
|
moscowDate,
|
||||||
|
useInitialAvailability,
|
||||||
|
useUrlPeriod,
|
||||||
|
} from "@/shared/lib";
|
||||||
|
|
||||||
const operationCategorySet = new Set<string>(operationCategories);
|
const operationCategorySet = new Set<string>(operationCategories);
|
||||||
|
|
||||||
@@ -24,21 +32,19 @@ type AccountOperationsPageViewModel
|
|||||||
hasPrevious: boolean;
|
hasPrevious: boolean;
|
||||||
historyLoading?: boolean;
|
historyLoading?: boolean;
|
||||||
items: BrokerageOperation[];
|
items: BrokerageOperation[];
|
||||||
lastSuccessfulAt?: null | string;
|
maxDate: string;
|
||||||
onApply: () => void;
|
onApply: () => void;
|
||||||
onCategoriesChange: (value: string[]) => void;
|
onCategoriesChange: (value: string[]) => void;
|
||||||
onNext: () => void;
|
onNext: () => void;
|
||||||
onPeriodChange: (value: [null | string, null | string]) => void;
|
onPeriodChange: (value: [null | string, null | string]) => void;
|
||||||
|
onPeriodPopoverOpen: () => void;
|
||||||
onPrevious: () => void;
|
onPrevious: () => void;
|
||||||
onReset: () => void;
|
onReset: () => void;
|
||||||
partial?: boolean;
|
partial?: boolean;
|
||||||
refreshError?: boolean;
|
source?: InvestmentResourceMeta;
|
||||||
refreshing?: boolean;
|
|
||||||
retry?: () => void;
|
|
||||||
sourceError?: boolean;
|
|
||||||
state: "loaded";
|
state: "loaded";
|
||||||
}
|
}
|
||||||
| { onReset: () => void; retry: () => void; state: "error" }
|
| { onReset: () => void; state: "error" }
|
||||||
| { state: "loading" };
|
| { state: "loading" };
|
||||||
|
|
||||||
const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
|
const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
|
||||||
@@ -66,6 +72,8 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
|
|||||||
const [draftCategories, setDraftCategories]
|
const [draftCategories, setDraftCategories]
|
||||||
= useState<OperationCategory[]>(appliedCategories);
|
= useState<OperationCategory[]>(appliedCategories);
|
||||||
|
|
||||||
|
const [maxDate, setMaxDate] = useState(() => moscowDate(new Date()));
|
||||||
|
|
||||||
const firstPageQuery = {
|
const firstPageQuery = {
|
||||||
from: dateStart(appliedFrom),
|
from: dateStart(appliedFrom),
|
||||||
to: dateEnd(appliedTo),
|
to: dateEnd(appliedTo),
|
||||||
@@ -85,37 +93,52 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
|
|||||||
history.reset();
|
history.reset();
|
||||||
}
|
}
|
||||||
|
|
||||||
const sync = useScreenSync(
|
useScreenSync(
|
||||||
{ accountId, screen: "operations", ...firstPageQuery },
|
{ accountId, screen: "operations", ...firstPageQuery },
|
||||||
[operations],
|
[operations],
|
||||||
);
|
);
|
||||||
|
|
||||||
if (operations.isLoading) return { state: "loading" };
|
const availability = useInitialAvailability({
|
||||||
|
hasContent: !!operations.data,
|
||||||
|
identity: scope,
|
||||||
|
isError: operations.isError || operations.meta?.lastAttempt.state === "failed",
|
||||||
|
isFetching: operations.isFetching,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (availability === "loading" && operations.isLoading)
|
||||||
|
return { state: "loading" };
|
||||||
|
|
||||||
|
if (history.isRecoveringInvalidCursor)
|
||||||
|
return { state: "loading" };
|
||||||
|
|
||||||
const resetQueryKey = brokerageOperationsQueryOptions(accountId, {
|
const resetQueryKey = brokerageOperationsQueryOptions(accountId, {
|
||||||
limit: 100,
|
limit: 100,
|
||||||
}).queryKey;
|
}).queryKey;
|
||||||
|
|
||||||
const retry = () => history.retry(sync.retry);
|
|
||||||
|
|
||||||
const onReset = () => {
|
const onReset = () => {
|
||||||
setDraftPeriod([null, null]);
|
setDraftPeriod([appliedFrom, appliedTo]);
|
||||||
setDraftCategories([]);
|
setDraftCategories([]);
|
||||||
setSearchParameters({});
|
setSearchParameters({});
|
||||||
history.reset();
|
history.reset();
|
||||||
void queryClient.invalidateQueries({ queryKey: resetQueryKey });
|
void queryClient.invalidateQueries({ queryKey: resetQueryKey });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const isInvalidCursor = isApiErrorCode(
|
||||||
|
apiErrorCode(operations.error),
|
||||||
|
ApiErrorCode.InvalidOperationsCursor,
|
||||||
|
);
|
||||||
|
|
||||||
if (
|
if (
|
||||||
(operations.isError || operations.meta?.sync.state === "failed")
|
(isInvalidCursor || !operations.data)
|
||||||
&& (!operations.data
|
&& (operations.isError || operations.meta?.lastAttempt.state === "failed")
|
||||||
|| isApiErrorCode(
|
|
||||||
apiErrorCode(operations.error),
|
|
||||||
ApiErrorCode.InvalidOperationsCursor,
|
|
||||||
))
|
|
||||||
)
|
)
|
||||||
return { onReset, retry, state: "error" };
|
return { onReset, state: "error" };
|
||||||
if (!operations.data) return { state: "loading" };
|
|
||||||
|
if (!operations.data)
|
||||||
|
return availability === "unavailable"
|
||||||
|
? { onReset, state: "error" }
|
||||||
|
: { state: "loading" };
|
||||||
|
|
||||||
const nextCursor = operations.data.nextCursor;
|
const nextCursor = operations.data.nextCursor;
|
||||||
|
|
||||||
const isDirty
|
const isDirty
|
||||||
@@ -133,7 +156,7 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
|
|||||||
operations.meta?.coverage?.historyState === "loading"
|
operations.meta?.coverage?.historyState === "loading"
|
||||||
|| operations.meta?.coverage?.historyState === "partial",
|
|| operations.meta?.coverage?.historyState === "partial",
|
||||||
items: operations.data.items,
|
items: operations.data.items,
|
||||||
lastSuccessfulAt: operations.meta?.lastSuccessfulAt,
|
maxDate,
|
||||||
onApply: () => {
|
onApply: () => {
|
||||||
if (!isValidPeriod(draftFrom, draftTo)) return;
|
if (!isValidPeriod(draftFrom, draftTo)) return;
|
||||||
setSearchParameters({
|
setSearchParameters({
|
||||||
@@ -151,14 +174,14 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
|
|||||||
),
|
),
|
||||||
),
|
),
|
||||||
onNext: history.onNext,
|
onNext: history.onNext,
|
||||||
onPeriodChange: setDraftPeriod,
|
onPeriodChange: value => setDraftPeriod(
|
||||||
|
value[0] === null && value[1] === null ? defaultPeriod() : value,
|
||||||
|
),
|
||||||
|
onPeriodPopoverOpen: () => setMaxDate(moscowDate(new Date())),
|
||||||
onPrevious: history.onPrevious,
|
onPrevious: history.onPrevious,
|
||||||
onReset,
|
onReset,
|
||||||
partial: operations.meta?.availability !== "complete",
|
partial: operations.meta?.completeness === "incomplete",
|
||||||
refreshError: operations.isError || sync.sourceError || sync.transportError,
|
source: operations.meta,
|
||||||
refreshing: operations.isFetching || sync.refreshing,
|
|
||||||
retry,
|
|
||||||
sourceError: sync.sourceError,
|
|
||||||
state: "loaded",
|
state: "loaded",
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
+4
-10
@@ -1,6 +1,6 @@
|
|||||||
import type { FC } from "react";
|
import type { FC } from "react";
|
||||||
|
|
||||||
import { Button, Group } from "@mantine/core";
|
import { Button } from "@mantine/core";
|
||||||
import { StateView } from "@wealthledger/ui";
|
import { StateView } from "@wealthledger/ui";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
@@ -14,21 +14,15 @@ type AccountOperationsPageErrorProps = Extract<
|
|||||||
const AccountOperationsPageError: FC<AccountOperationsPageErrorProps> = (
|
const AccountOperationsPageError: FC<AccountOperationsPageErrorProps> = (
|
||||||
props,
|
props,
|
||||||
) => {
|
) => {
|
||||||
const { retry } = props;
|
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StateView
|
<StateView
|
||||||
action={(
|
action={(
|
||||||
<Group>
|
<Button onClick={props.onReset} variant="default">
|
||||||
<Button onClick={retry}>{t("ledger.retry")}</Button>
|
{t("ledger.reset")}
|
||||||
|
</Button>
|
||||||
<Button onClick={props.onReset} variant="default">
|
|
||||||
{t("ledger.reset")}
|
|
||||||
</Button>
|
|
||||||
</Group>
|
|
||||||
)}
|
)}
|
||||||
error
|
|
||||||
text={t("ledger.errorText")}
|
text={t("ledger.errorText")}
|
||||||
title={t("ledger.errorTitle")}
|
title={t("ledger.errorTitle")}
|
||||||
/>
|
/>
|
||||||
|
|||||||
+7
-22
@@ -5,7 +5,6 @@ import {
|
|||||||
Button,
|
Button,
|
||||||
Group,
|
Group,
|
||||||
MultiSelect,
|
MultiSelect,
|
||||||
Progress,
|
|
||||||
Stack,
|
Stack,
|
||||||
Title,
|
Title,
|
||||||
} from "@mantine/core";
|
} from "@mantine/core";
|
||||||
@@ -62,43 +61,29 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack gap="lg">
|
<Stack gap="lg">
|
||||||
<SourceSyncStatus lastSuccessfulAt={props.lastSuccessfulAt} />
|
|
||||||
|
|
||||||
<Title order={1}>{t("ledger.title")}</Title>
|
<Title order={1}>{t("ledger.title")}</Title>
|
||||||
|
|
||||||
<Button disabled={props.refreshing} onClick={props.retry} w="fit-content">
|
<SourceSyncStatus
|
||||||
{t("investment.refresh")}
|
lastAttempt={props.source?.lastAttempt}
|
||||||
</Button>
|
lastSuccessfulAt={props.source?.lastSuccessfulAt}
|
||||||
|
stale={props.source?.freshness === "stale"}
|
||||||
|
/>
|
||||||
|
|
||||||
{!!props.partial && <Alert role="status">{t("investment.partial")}</Alert>}
|
{!!props.partial && <Alert role="status">{t("investment.partial")}</Alert>}
|
||||||
|
|
||||||
{!!props.historyLoading && <Alert>{t("investment.history")}</Alert>}
|
{!!props.historyLoading && <Alert>{t("investment.history")}</Alert>}
|
||||||
|
|
||||||
{!!props.refreshing && <Progress animated aria-label={t("accounts.refreshing")} value={100} />}
|
|
||||||
|
|
||||||
{!!props.refreshError && (
|
|
||||||
<Alert aria-live="polite" color="yellow" role="status">
|
|
||||||
{t(
|
|
||||||
props.sourceError
|
|
||||||
? "investment.syncFailed"
|
|
||||||
: "accounts.refreshError",
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Button onClick={props.retry} variant="subtle">
|
|
||||||
{t("accounts.retry")}
|
|
||||||
</Button>
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Group align="end">
|
<Group align="end">
|
||||||
<DatePickerInput
|
<DatePickerInput
|
||||||
allowSingleDateInRange
|
allowSingleDateInRange
|
||||||
clearable
|
clearable
|
||||||
clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
|
clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
|
||||||
label={t("ledger.period")}
|
label={t("ledger.period")}
|
||||||
|
maxDate={props.maxDate}
|
||||||
onChange={props.onPeriodChange}
|
onChange={props.onPeriodChange}
|
||||||
popoverProps={{
|
popoverProps={{
|
||||||
middlewares: { shift: { crossAxis: true } },
|
middlewares: { shift: { crossAxis: true } },
|
||||||
|
onOpen: props.onPeriodPopoverOpen,
|
||||||
returnFocus: true,
|
returnFocus: true,
|
||||||
}}
|
}}
|
||||||
type="range"
|
type="range"
|
||||||
|
|||||||
@@ -10,20 +10,18 @@ const RECENT_EVENTS_LIMIT = 5;
|
|||||||
|
|
||||||
type AccountPageIncomeSummary
|
type AccountPageIncomeSummary
|
||||||
= | {
|
= | {
|
||||||
lastSuccessfulAt?: null | string;
|
|
||||||
refreshError?: boolean;
|
|
||||||
stale?: boolean;
|
|
||||||
state: "loaded";
|
|
||||||
summary: IncomeSummary;
|
|
||||||
to: string;
|
|
||||||
}
|
|
||||||
| { retry: () => Promise<unknown> | undefined; state: "error"; to: string }
|
|
||||||
| {
|
|
||||||
state: "empty"
|
state: "empty"
|
||||||
| "loading"
|
| "loading"
|
||||||
| "partial";
|
| "partial";
|
||||||
to: string;
|
to: string;
|
||||||
};
|
}
|
||||||
|
| { state: "error"; to: string }
|
||||||
|
| {
|
||||||
|
state: "loaded";
|
||||||
|
summary: IncomeSummary;
|
||||||
|
to: string;
|
||||||
|
}
|
||||||
|
;
|
||||||
|
|
||||||
type AccountPageRecentEvents = BrokerageEventsPreviewState;
|
type AccountPageRecentEvents = BrokerageEventsPreviewState;
|
||||||
|
|
||||||
@@ -48,29 +46,26 @@ type PreviewResource<T> = {
|
|||||||
isError: boolean;
|
isError: boolean;
|
||||||
meta?: Pick<InvestmentResourceMeta,
|
meta?: Pick<InvestmentResourceMeta,
|
||||||
"availability"
|
"availability"
|
||||||
|
| "completeness"
|
||||||
| "freshness"
|
| "freshness"
|
||||||
|
| "lastAttempt"
|
||||||
| "lastSuccessfulAt"
|
| "lastSuccessfulAt"
|
||||||
| "sync"
|
|
||||||
>;
|
>;
|
||||||
};
|
};
|
||||||
|
|
||||||
function toIncomeSummary(
|
function toIncomeSummary(
|
||||||
accountId: string | undefined,
|
accountId: string | undefined,
|
||||||
income: PreviewResource<IncomeSummary>,
|
income: PreviewResource<IncomeSummary>,
|
||||||
retry: () => Promise<unknown>,
|
|
||||||
): AccountPageIncomeSummary {
|
): AccountPageIncomeSummary {
|
||||||
const to = `/accounts/${accountId}/income`;
|
const to = `/accounts/${accountId}/income`;
|
||||||
if (!income.data && !income.isError && income.meta?.sync.state !== "failed")
|
if (!income.data && !income.isError && income.meta?.lastAttempt.state !== "failed")
|
||||||
return { state: "loading", to };
|
return { state: "loading", to };
|
||||||
if (income.meta?.availability === "partial") return { state: "partial", to };
|
if (income.meta?.completeness === "incomplete") return { state: "partial", to };
|
||||||
if (!income.data && (income.isError || income.meta?.sync.state === "failed"))
|
if (!income.data && (income.isError || income.meta?.lastAttempt.state === "failed"))
|
||||||
return { retry, state: "error", to };
|
return { state: "error", to };
|
||||||
if (!income.data?.totalsByCurrency.length) return { state: "empty", to };
|
if (!income.data?.totalsByCurrency.length) return { state: "empty", to };
|
||||||
|
|
||||||
return {
|
return {
|
||||||
lastSuccessfulAt: income.meta?.lastSuccessfulAt,
|
|
||||||
refreshError: income.isError || income.meta?.sync.state === "failed",
|
|
||||||
stale: income.meta?.freshness === "stale",
|
|
||||||
state: "loaded",
|
state: "loaded",
|
||||||
summary: income.data,
|
summary: income.data,
|
||||||
to,
|
to,
|
||||||
@@ -82,24 +77,21 @@ function toRecentEvents(
|
|||||||
events: PreviewResource<{ events: BrokerageEvent[] }>,
|
events: PreviewResource<{ events: BrokerageEvent[] }>,
|
||||||
): AccountPageRecentEvents {
|
): AccountPageRecentEvents {
|
||||||
const to = `/accounts/${accountId}/events`;
|
const to = `/accounts/${accountId}/events`;
|
||||||
if (!events.data && !events.isError && events.meta?.sync.state !== "failed")
|
if (!events.data && !events.isError && events.meta?.lastAttempt.state !== "failed")
|
||||||
return { state: "loading", to };
|
return { state: "loading", to };
|
||||||
if (events.meta?.availability === "partial")
|
if (events.meta?.completeness === "incomplete")
|
||||||
return {
|
return {
|
||||||
items: events.data?.events.slice(0, RECENT_EVENTS_LIMIT) ?? [],
|
items: events.data?.events.slice(0, RECENT_EVENTS_LIMIT) ?? [],
|
||||||
state: "partial",
|
state: "partial",
|
||||||
to,
|
to,
|
||||||
};
|
};
|
||||||
if (!events.data && (events.isError || events.meta?.sync.state === "failed"))
|
if (!events.data && (events.isError || events.meta?.lastAttempt.state === "failed"))
|
||||||
return { state: "error", to };
|
return { state: "error", to };
|
||||||
const items = events.data?.events.slice(0, RECENT_EVENTS_LIMIT) ?? [];
|
const items = events.data?.events.slice(0, RECENT_EVENTS_LIMIT) ?? [];
|
||||||
if (items.length === 0) return { state: "empty", to };
|
if (items.length === 0) return { state: "empty", to };
|
||||||
|
|
||||||
return {
|
return {
|
||||||
items,
|
items,
|
||||||
lastSuccessfulAt: events.meta?.lastSuccessfulAt,
|
|
||||||
refreshError: events.isError || events.meta?.sync.state === "failed",
|
|
||||||
stale: events.meta?.freshness === "stale",
|
|
||||||
state: "loaded",
|
state: "loaded",
|
||||||
to,
|
to,
|
||||||
};
|
};
|
||||||
@@ -113,14 +105,14 @@ function toRecentOperations(
|
|||||||
if (
|
if (
|
||||||
!operations.data
|
!operations.data
|
||||||
&& !operations.isError
|
&& !operations.isError
|
||||||
&& operations.meta?.sync.state !== "failed"
|
&& operations.meta?.lastAttempt.state !== "failed"
|
||||||
)
|
)
|
||||||
return { state: "loading", to };
|
return { state: "loading", to };
|
||||||
if (operations.meta?.availability === "partial")
|
if (operations.meta?.completeness === "incomplete")
|
||||||
return { items: operations.data?.items ?? [], state: "partial", to };
|
return { items: operations.data?.items ?? [], state: "partial", to };
|
||||||
if (
|
if (
|
||||||
!operations.data
|
!operations.data
|
||||||
&& (operations.isError || operations.meta?.sync.state === "failed")
|
&& (operations.isError || operations.meta?.lastAttempt.state === "failed")
|
||||||
)
|
)
|
||||||
return { state: "error", to };
|
return { state: "error", to };
|
||||||
if (!operations.data?.items.length) return { state: "empty", to };
|
if (!operations.data?.items.length) return { state: "empty", to };
|
||||||
@@ -129,7 +121,7 @@ function toRecentOperations(
|
|||||||
items: operations.data.items,
|
items: operations.data.items,
|
||||||
lastSuccessfulAt: operations.meta?.lastSuccessfulAt,
|
lastSuccessfulAt: operations.meta?.lastSuccessfulAt,
|
||||||
refreshError:
|
refreshError:
|
||||||
operations.isError || operations.meta?.sync.state === "failed",
|
operations.isError || operations.meta?.lastAttempt.state === "failed",
|
||||||
stale: operations.meta?.freshness === "stale",
|
stale: operations.meta?.freshness === "stale",
|
||||||
state: "loaded",
|
state: "loaded",
|
||||||
to,
|
to,
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import { MantineProvider } from "@mantine/core";
|
import { MantineProvider } from "@mantine/core";
|
||||||
import { type QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
import { type QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||||
import {
|
import {
|
||||||
fireEvent,
|
|
||||||
render,
|
render,
|
||||||
screen,
|
screen,
|
||||||
waitFor,
|
waitFor,
|
||||||
@@ -261,7 +260,7 @@ describe("AccountPage states", () => {
|
|||||||
it.each(["NOT_FOUND", "TBANK_NOT_CONNECTED", "INVALID_TBANK_TOKEN"])(
|
it.each(["NOT_FOUND", "TBANK_NOT_CONNECTED", "INVALID_TBANK_TOKEN"])(
|
||||||
"does not offer retry without cached data for %s",
|
"does not offer retry without cached data for %s",
|
||||||
(code) => {
|
(code) => {
|
||||||
renderPage(<AccountPageError code={code} retry={vi.fn()} />);
|
renderPage(<AccountPageError code={code} />);
|
||||||
expect(
|
expect(
|
||||||
screen.queryByRole("button", { name: "Повторить" }),
|
screen.queryByRole("button", { name: "Повторить" }),
|
||||||
).not.toBeInTheDocument();
|
).not.toBeInTheDocument();
|
||||||
@@ -274,12 +273,16 @@ describe("AccountPage states", () => {
|
|||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
it.each(["TBANK_UNAVAILABLE", "UNKNOWN"])("allows retry for %s", (code) => {
|
it.each(["TBANK_UNAVAILABLE", "UNKNOWN"])(
|
||||||
const retry = vi.fn();
|
"shows neutral unavailable without retry for %s",
|
||||||
renderPage(<AccountPageError code={code} retry={retry} />);
|
(code) => {
|
||||||
fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
|
renderPage(<AccountPageError code={code} />);
|
||||||
expect(retry).toHaveBeenCalledOnce();
|
expect(screen.getByRole("heading", { name: "Пока недоступно" }))
|
||||||
});
|
.toBeInTheDocument();
|
||||||
|
expect(screen.queryByRole("button", { name: "Повторить" }))
|
||||||
|
.not.toBeInTheDocument();
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
it("shows supplied cash separately without adding currency instruments or recalculating totals", () => {
|
it("shows supplied cash separately without adding currency instruments or recalculating totals", () => {
|
||||||
renderPage(
|
renderPage(
|
||||||
@@ -399,17 +402,59 @@ describe("AccountPage states", () => {
|
|||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("keeps a null portfolio envelope loading instead of an empty portfolio", async () => {
|
||||||
|
server.use(
|
||||||
|
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
|
||||||
|
HttpResponse.json(resource(null)),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
const queryClient = createTestQueryClient();
|
||||||
|
renderAccountRoute(queryClient);
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await screen.findByRole("status", { name: "Загрузка" }, { timeout: 4000 }),
|
||||||
|
).toBeVisible();
|
||||||
|
expect(screen.queryByText("Портфель пока пуст")).not.toBeInTheDocument();
|
||||||
|
expect(
|
||||||
|
queryClient.getQueryData(portfolioQueryOptions("account-1").queryKey),
|
||||||
|
).toMatchObject({ data: null });
|
||||||
|
});
|
||||||
|
|
||||||
|
it("keeps null events and income envelopes loading in the previews", async () => {
|
||||||
|
server.use(
|
||||||
|
http.get("*/api/v1/brokerage-accounts/:accountId/events", () =>
|
||||||
|
HttpResponse.json(resource(null)),
|
||||||
|
),
|
||||||
|
http.get("*/api/v1/brokerage-accounts/:accountId/income-summary", () =>
|
||||||
|
HttpResponse.json(resource(null)),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
renderAccountRoute(createTestQueryClient());
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await screen.findByText("Портфель пока пуст", undefined, {
|
||||||
|
timeout: 4000,
|
||||||
|
}),
|
||||||
|
).toBeVisible();
|
||||||
|
expect(
|
||||||
|
screen.getByRole("status", { name: "Загрузка будущих событий" }),
|
||||||
|
).toBeVisible();
|
||||||
|
expect(
|
||||||
|
screen.queryByText("На ближайшие 30 дней событий не найдено."),
|
||||||
|
).not.toBeInTheDocument();
|
||||||
|
expect(screen.getByText("Загрузка дохода текущего месяца")).toBeVisible();
|
||||||
|
expect(screen.queryByText("Нет текущих сумм")).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
it("renders a stale portfolio in upstream order with nullable values hidden", () => {
|
it("renders a stale portfolio in upstream order with nullable values hidden", () => {
|
||||||
renderPage(<AccountPageLoaded {...loadedProps()} />);
|
renderPage(<AccountPageLoaded {...loadedProps()} />);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { level: 1, name: "Портфель" }),
|
screen.getByRole("heading", { level: 1, name: "Портфель" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(screen.queryByText(/T-Bank временно недоступен/))
|
||||||
screen.getByText(
|
.not.toBeInTheDocument();
|
||||||
"T-Bank временно недоступен. Показан последний успешный снимок.",
|
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
|
||||||
),
|
|
||||||
).toBeInTheDocument();
|
|
||||||
expect(screen.getByRole("button", { name: "Акции" })).toBeInTheDocument();
|
expect(screen.getByRole("button", { name: "Акции" })).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("button", { name: "Облигации" }),
|
screen.getByRole("button", { name: "Облигации" }),
|
||||||
@@ -573,7 +618,7 @@ describe("AccountPage states", () => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("Не удалось загрузить последние события."),
|
screen.getByText("Пока недоступно"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(screen.getByText("Вторая")).toBeInTheDocument();
|
expect(screen.getByText("Вторая")).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
@@ -685,7 +730,7 @@ describe("AccountPage states", () => {
|
|||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
for (const amount of ["850,50 ₽", "0 USD", "1 000 ₽", "Сумма неизвестна"])
|
for (const amount of ["850,50 ₽", "0 USD", "1 000 ₽", "Сумма неизвестна"])
|
||||||
expect(content.getByText(amount)).toBeVisible();
|
expect(content.getByText(amount)).toBeVisible();
|
||||||
expect(content.getAllByText("Ожидаемая сумма")).toHaveLength(4);
|
expect(content.getAllByText("Прогноз")).toHaveLength(4);
|
||||||
expect(content.queryByText("Без движения денег")).not.toBeInTheDocument();
|
expect(content.queryByText("Без движения денег")).not.toBeInTheDocument();
|
||||||
expect(content.queryByText(/^\+/)).not.toBeInTheDocument();
|
expect(content.queryByText(/^\+/)).not.toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
@@ -742,13 +787,13 @@ describe("AccountPage states", () => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("Не удалось загрузить будущие события."),
|
screen.getByText("Данные появятся здесь, когда чтение восстановится."),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(screen.getByText("Вторая")).toBeInTheDocument();
|
expect(screen.getByText("Вторая")).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it.each([503])(
|
it.each([503])(
|
||||||
"preserves totals and UTC snapshot through refresh error %i, retry and success",
|
"preserves totals quietly through refresh error %i and success",
|
||||||
async (status) => {
|
async (status) => {
|
||||||
const initialPortfolio: Portfolio
|
const initialPortfolio: Portfolio
|
||||||
= {
|
= {
|
||||||
@@ -769,28 +814,6 @@ describe("AccountPage states", () => {
|
|||||||
let requestCount = 0;
|
let requestCount = 0;
|
||||||
let resolveRetry: ((response: Response) => void) | undefined;
|
let resolveRetry: ((response: Response) => void) | undefined;
|
||||||
server.use(
|
server.use(
|
||||||
http.post("*/api/v1/tbank-sync", () =>
|
|
||||||
HttpResponse.json(
|
|
||||||
{
|
|
||||||
id: "overview",
|
|
||||||
now: "2026-09-25T00:00:00Z",
|
|
||||||
scope: { accountId: "account-1", screen: "account" },
|
|
||||||
},
|
|
||||||
{ status: 202 },
|
|
||||||
),
|
|
||||||
),
|
|
||||||
http.get("*/api/v1/tbank-sync/:id", () =>
|
|
||||||
|
|
||||||
HttpResponse.json(
|
|
||||||
{
|
|
||||||
errorCode: null,
|
|
||||||
id: "overview",
|
|
||||||
now: "2026-09-25T00:00:00Z",
|
|
||||||
scope: { accountId: "account-1", screen: "account" },
|
|
||||||
state: "succeeded",
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () => {
|
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () => {
|
||||||
requestCount += 1;
|
requestCount += 1;
|
||||||
if (requestCount === 1)
|
if (requestCount === 1)
|
||||||
@@ -821,40 +844,30 @@ describe("AccountPage states", () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
expect(structure).toHaveTextContent("10 ₽");
|
expect(structure).toHaveTextContent("10 ₽");
|
||||||
const snapshotText = screen.getByText(/Данные получены/).textContent;
|
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
|
||||||
expect(snapshotText).toContain("10:00");
|
|
||||||
void queryClient.invalidateQueries({
|
void queryClient.invalidateQueries({
|
||||||
queryKey: portfolioQueryOptions("account-1").queryKey,
|
queryKey: portfolioQueryOptions("account-1").queryKey,
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(
|
await waitFor(() => expect(requestCount).toBe(2));
|
||||||
await screen.findByText(
|
expect(screen.queryByText(/Не удалось обновить портфель/))
|
||||||
"Не удалось обновить портфель. Показан последний полученный снимок.",
|
.not.toBeInTheDocument();
|
||||||
),
|
expect(screen.queryByText(/T-Bank временно недоступен/))
|
||||||
).toBeInTheDocument();
|
.not.toBeInTheDocument();
|
||||||
expect(
|
|
||||||
screen.getByText(
|
|
||||||
"T-Bank временно недоступен. Показан последний успешный снимок.",
|
|
||||||
),
|
|
||||||
).toBeInTheDocument();
|
|
||||||
expect(screen.getByText("Вторая")).toBeInTheDocument();
|
expect(screen.getByText("Вторая")).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByRole("definition").map(node => node.textContent),
|
screen.getAllByRole("definition").map(node => node.textContent),
|
||||||
).toEqual(["1 234,5 ₽", "0,5 $"]);
|
).toEqual(["1 234,5 ₽", "0,5 $"]);
|
||||||
// eslint-disable-next-line jest-dom/prefer-to-have-text-content -- The cached timestamp must remain exactly unchanged.
|
expect(screen.queryByRole("button", { name: "Повторить" }))
|
||||||
expect(screen.getByText(/Данные получены/).textContent).toBe(
|
.not.toBeInTheDocument();
|
||||||
snapshotText,
|
void queryClient.invalidateQueries({
|
||||||
);
|
queryKey: portfolioQueryOptions("account-1").queryKey,
|
||||||
fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
|
});
|
||||||
await waitFor(() => expect(requestCount).toBe(3));
|
await waitFor(() => expect(requestCount).toBe(3));
|
||||||
expect(structure).toHaveTextContent("10 ₽");
|
expect(structure).toHaveTextContent("10 ₽");
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByRole("definition").map(node => node.textContent),
|
screen.getAllByRole("definition").map(node => node.textContent),
|
||||||
).toEqual(["1 234,5 ₽", "0,5 $"]);
|
).toEqual(["1 234,5 ₽", "0,5 $"]);
|
||||||
// eslint-disable-next-line jest-dom/prefer-to-have-text-content -- The cached timestamp must remain exactly unchanged.
|
|
||||||
expect(screen.getByText(/Данные получены/).textContent).toBe(
|
|
||||||
snapshotText,
|
|
||||||
);
|
|
||||||
resolveRetry?.(
|
resolveRetry?.(
|
||||||
HttpResponse.json(
|
HttpResponse.json(
|
||||||
resource(
|
resource(
|
||||||
@@ -875,7 +888,7 @@ describe("AccountPage states", () => {
|
|||||||
screen.getAllByRole("definition").map(node => node.textContent),
|
screen.getAllByRole("definition").map(node => node.textContent),
|
||||||
).toEqual(["-0,5 $", "2,50 €"]),
|
).toEqual(["-0,5 $", "2,50 €"]),
|
||||||
);
|
);
|
||||||
expect(screen.getByText(/Данные получены/)).toHaveTextContent("11:30");
|
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
|
||||||
expect(structure).not.toHaveTextContent("10 ₽");
|
expect(structure).not.toHaveTextContent("10 ₽");
|
||||||
expect(structure).toHaveTextContent("Нет положительной стоимости");
|
expect(structure).toHaveTextContent("Нет положительной стоимости");
|
||||||
expect(
|
expect(
|
||||||
@@ -916,13 +929,12 @@ describe("AccountPage states", () => {
|
|||||||
expect(
|
expect(
|
||||||
screen.getAllByRole("definition").map(node => node.textContent),
|
screen.getAllByRole("definition").map(node => node.textContent),
|
||||||
).toEqual(["1 234,5 ₽", "0,5 $"]);
|
).toEqual(["1 234,5 ₽", "0,5 $"]);
|
||||||
expect(screen.getByText(/Данные получены/)).toHaveTextContent("10:00");
|
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.queryByRole("status", { name: "Загрузка" }),
|
screen.queryByRole("status", { name: "Загрузка" }),
|
||||||
).not.toBeInTheDocument();
|
).not.toBeInTheDocument();
|
||||||
expect(
|
expect(screen.queryByRole("status", { name: "Обновляем портфель" }))
|
||||||
screen.getByRole("status", { name: "Обновляем портфель" }),
|
.not.toBeInTheDocument();
|
||||||
).toBeInTheDocument();
|
|
||||||
|
|
||||||
resolveRefresh?.(HttpResponse.json(resource(portfolio)));
|
resolveRefresh?.(HttpResponse.json(resource(portfolio)));
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -18,10 +18,6 @@ const AccountPage: FC = () => {
|
|||||||
incomeSummary={viewModel.incomeSummary}
|
incomeSummary={viewModel.incomeSummary}
|
||||||
recentEvents={viewModel.recentEvents}
|
recentEvents={viewModel.recentEvents}
|
||||||
recentOperations={viewModel.recentOperations}
|
recentOperations={viewModel.recentOperations}
|
||||||
refreshError={viewModel.refreshError}
|
|
||||||
refreshing={viewModel.refreshing}
|
|
||||||
retry={viewModel.retry}
|
|
||||||
sourceError={viewModel.sourceError}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -35,10 +31,6 @@ const AccountPage: FC = () => {
|
|||||||
positionSections={viewModel.positionSections}
|
positionSections={viewModel.positionSections}
|
||||||
recentEvents={viewModel.recentEvents}
|
recentEvents={viewModel.recentEvents}
|
||||||
recentOperations={viewModel.recentOperations}
|
recentOperations={viewModel.recentOperations}
|
||||||
refreshError={viewModel.refreshError}
|
|
||||||
refreshing={viewModel.refreshing}
|
|
||||||
retry={viewModel.retry}
|
|
||||||
sourceError={viewModel.sourceError}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import type { FC, PropsWithChildren } from "react";
|
import type { FC, PropsWithChildren } from "react";
|
||||||
|
|
||||||
import { MantineProvider } from "@mantine/core";
|
import { MantineProvider } from "@mantine/core";
|
||||||
import { act, renderHook, waitFor } from "@testing-library/react";
|
import { renderHook, waitFor } from "@testing-library/react";
|
||||||
import { http, HttpResponse } from "msw";
|
import { http, HttpResponse } from "msw";
|
||||||
import { MemoryRouter, Route, Routes } from "react-router";
|
import { MemoryRouter, Route, Routes } from "react-router";
|
||||||
import { describe, expect, it, vi } from "vitest";
|
import { describe, expect, it, vi } from "vitest";
|
||||||
@@ -147,10 +147,10 @@ describe("useAccountPageViewModel", () => {
|
|||||||
HttpResponse.json(resource(portfolio)),
|
HttpResponse.json(resource(portfolio)),
|
||||||
),
|
),
|
||||||
http.get("*/api/v1/brokerage-accounts/:accountId/operations", () =>
|
http.get("*/api/v1/brokerage-accounts/:accountId/operations", () =>
|
||||||
HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 }),
|
HttpResponse.json({ code: "DEMO_FAILURE" }, { status: 400 }),
|
||||||
),
|
),
|
||||||
http.get("*/api/v1/brokerage-accounts/:accountId/events", () =>
|
http.get("*/api/v1/brokerage-accounts/:accountId/events", () =>
|
||||||
HttpResponse.json({ code: "MOEX_UNAVAILABLE" }, { status: 503 }),
|
HttpResponse.json({ code: "DEMO_FAILURE" }, { status: 400 }),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -173,14 +173,14 @@ it("keeps overview sections independent when their source data is incomplete", a
|
|||||||
mockLoadedAccountPage();
|
mockLoadedAccountPage();
|
||||||
server.use(
|
server.use(
|
||||||
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
|
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
|
||||||
HttpResponse.json(resource(portfolio, { availability: "partial" })),
|
HttpResponse.json(resource(portfolio, { completeness: "incomplete" })),
|
||||||
),
|
),
|
||||||
http.get("*/api/v1/brokerage-accounts/:accountId/operations", () =>
|
http.get("*/api/v1/brokerage-accounts/:accountId/operations", () =>
|
||||||
HttpResponse.json(
|
HttpResponse.json(
|
||||||
|
|
||||||
resource(
|
resource(
|
||||||
{ hasNext: false, items: [], nextCursor: null },
|
{ hasNext: false, items: [], nextCursor: null },
|
||||||
{ availability: "partial" },
|
{ completeness: "incomplete" },
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
@@ -188,7 +188,7 @@ it("keeps overview sections independent when their source data is incomplete", a
|
|||||||
HttpResponse.json(
|
HttpResponse.json(
|
||||||
resource(
|
resource(
|
||||||
{ events: [], incomeTotalsByCurrency: [] },
|
{ events: [], incomeTotalsByCurrency: [] },
|
||||||
{ availability: "partial" },
|
{ completeness: "incomplete" },
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
@@ -208,7 +208,7 @@ it("keeps overview sections independent when their source data is incomplete", a
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("refreshes every overview section through one account descriptor and observational reads", async () => {
|
it("keeps overview sections loaded without exposing technical retry", async () => {
|
||||||
configureTestAuth();
|
configureTestAuth();
|
||||||
|
|
||||||
const sections: Record<string, unknown>
|
const sections: Record<string, unknown>
|
||||||
@@ -219,48 +219,17 @@ it("refreshes every overview section through one account descriptor and observat
|
|||||||
portfolio,
|
portfolio,
|
||||||
};
|
};
|
||||||
|
|
||||||
const observed: string[] = [];
|
|
||||||
const scopes: unknown[] = [];
|
|
||||||
let version = "1";
|
|
||||||
server.use(
|
server.use(
|
||||||
...Object.entries(sections).map(([path, data]) =>
|
...Object.entries(sections).map(([path, data]) =>
|
||||||
http.get(
|
http.get(
|
||||||
`*/api/v1/brokerage-accounts/:accountId/${path}`,
|
`*/api/v1/brokerage-accounts/:accountId/${path}`,
|
||||||
({ request }) => {
|
() => {
|
||||||
if (new URL(request.url).searchParams.get("sync") === "observe")
|
|
||||||
observed.push(path);
|
|
||||||
|
|
||||||
return HttpResponse.json(
|
return HttpResponse.json(
|
||||||
resource(data, { dataRevision: version, resourceKey: path }),
|
resource(data, { dataRevision: "1", resourceKey: path }),
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
http.post("*/api/v1/tbank-sync", async ({ request }) => {
|
|
||||||
scopes.push(await request.json());
|
|
||||||
version = "2";
|
|
||||||
|
|
||||||
return HttpResponse.json(
|
|
||||||
{
|
|
||||||
id: "overview",
|
|
||||||
now: "2026-09-25T00:00:00Z",
|
|
||||||
scope: { accountId: "account-1", screen: "account" },
|
|
||||||
},
|
|
||||||
{ status: 202 },
|
|
||||||
);
|
|
||||||
}),
|
|
||||||
http.get("*/api/v1/tbank-sync/:id", () =>
|
|
||||||
|
|
||||||
HttpResponse.json(
|
|
||||||
{
|
|
||||||
errorCode: null,
|
|
||||||
id: "overview",
|
|
||||||
now: "2026-09-25T00:00:00Z",
|
|
||||||
scope: null,
|
|
||||||
state: "succeeded",
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const { result } = renderHook(() => useAccountPageViewModel(), {
|
const { result } = renderHook(() => useAccountPageViewModel(), {
|
||||||
@@ -275,11 +244,5 @@ it("refreshes every overview section through one account descriptor and observat
|
|||||||
state: "loaded",
|
state: "loaded",
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
await act(async () => {
|
expect(result.current).not.toHaveProperty("retry");
|
||||||
if (result.current.state === "loaded") await result.current.retry();
|
|
||||||
});
|
|
||||||
await waitFor(() =>
|
|
||||||
expect(new Set(observed)).toEqual(new Set(Object.keys(sections))),
|
|
||||||
);
|
|
||||||
expect(scopes).toEqual([{ accountId: "account-1", screen: "account" }]);
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import { useParams } from "react-router";
|
import { useParams } from "react-router";
|
||||||
|
|
||||||
import type { Portfolio } from "@/entities/portfolio";
|
import type { Portfolio } from "@/entities/portfolio";
|
||||||
|
import type { InvestmentResourceMeta } from "@/shared/api";
|
||||||
|
|
||||||
import { useBrokerageOperations } from "@/entities/broker-operation";
|
import { useBrokerageOperations } from "@/entities/broker-operation";
|
||||||
import {
|
import {
|
||||||
@@ -13,7 +14,8 @@ import {
|
|||||||
import { useIncomeSummary } from "@/entities/income";
|
import { useIncomeSummary } from "@/entities/income";
|
||||||
import { usePortfolio } from "@/entities/portfolio";
|
import { usePortfolio } from "@/entities/portfolio";
|
||||||
import { useScreenSync } from "@/features/tbank-connection";
|
import { useScreenSync } from "@/features/tbank-connection";
|
||||||
import { apiErrorCode } from "@/shared/api";
|
import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
|
||||||
|
import { useInitialAvailability } from "@/shared/lib";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
type AccountPagePositionSection,
|
type AccountPagePositionSection,
|
||||||
@@ -35,10 +37,6 @@ type AccountPageContent = {
|
|||||||
partial?: boolean;
|
partial?: boolean;
|
||||||
recentEvents: AccountPageRecentEvents;
|
recentEvents: AccountPageRecentEvents;
|
||||||
recentOperations: AccountPageRecentOperations;
|
recentOperations: AccountPageRecentOperations;
|
||||||
refreshError: boolean;
|
|
||||||
refreshing: boolean;
|
|
||||||
retry: () => Promise<unknown> | undefined;
|
|
||||||
sourceError?: boolean;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
type AccountPageEmptyViewModel = AccountPageContent & {
|
type AccountPageEmptyViewModel = AccountPageContent & {
|
||||||
@@ -48,15 +46,23 @@ type AccountPageEmptyViewModel = AccountPageContent & {
|
|||||||
type AccountPageLoadedViewModel = AccountPageContent & {
|
type AccountPageLoadedViewModel = AccountPageContent & {
|
||||||
portfolio: Portfolio;
|
portfolio: Portfolio;
|
||||||
positionSections: AccountPagePositionSection[];
|
positionSections: AccountPagePositionSection[];
|
||||||
|
source?: InvestmentResourceMeta;
|
||||||
state: "loaded";
|
state: "loaded";
|
||||||
};
|
};
|
||||||
|
|
||||||
type AccountPageViewModel
|
type AccountPageViewModel
|
||||||
= | AccountPageEmptyViewModel
|
= | AccountPageEmptyViewModel
|
||||||
| AccountPageLoadedViewModel
|
| AccountPageLoadedViewModel
|
||||||
| { code?: string; retry: () => Promise<unknown> | undefined; state: "error" }
|
| { code?: string; state: "error" }
|
||||||
| { state: "loading" };
|
| { state: "loading" };
|
||||||
|
|
||||||
|
function isPortfolioAccessFailure(code?: string) {
|
||||||
|
return isApiErrorCode(code, ApiErrorCode.Forbidden)
|
||||||
|
|| isApiErrorCode(code, ApiErrorCode.InvalidTbankToken)
|
||||||
|
|| isApiErrorCode(code, ApiErrorCode.NotFound)
|
||||||
|
|| isApiErrorCode(code, ApiErrorCode.TbankNotConnected);
|
||||||
|
}
|
||||||
|
|
||||||
function useAccountPageViewModel(): AccountPageViewModel {
|
function useAccountPageViewModel(): AccountPageViewModel {
|
||||||
const { accountId } = useParams();
|
const { accountId } = useParams();
|
||||||
const portfolio = usePortfolio(accountId);
|
const portfolio = usePortfolio(accountId);
|
||||||
@@ -69,7 +75,7 @@ function useAccountPageViewModel(): AccountPageViewModel {
|
|||||||
const income = useIncomeSummary(accountId);
|
const income = useIncomeSummary(accountId);
|
||||||
const accounts = useBrokerageAccounts();
|
const accounts = useBrokerageAccounts();
|
||||||
|
|
||||||
const sync = useScreenSync({ accountId, screen: "account" }, [
|
useScreenSync({ accountId, screen: "account" }, [
|
||||||
accounts,
|
accounts,
|
||||||
portfolio,
|
portfolio,
|
||||||
operations,
|
operations,
|
||||||
@@ -77,35 +83,31 @@ function useAccountPageViewModel(): AccountPageViewModel {
|
|||||||
income,
|
income,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
if (!portfolio.data) {
|
const code = apiErrorCode(portfolio.error);
|
||||||
if (portfolio.isError || portfolio.meta?.sync.state === "failed")
|
const isAccessFailure = isPortfolioAccessFailure(code);
|
||||||
return {
|
|
||||||
code: apiErrorCode(portfolio.error),
|
|
||||||
retry: sync.retry,
|
|
||||||
state: "error" as const,
|
|
||||||
};
|
|
||||||
|
|
||||||
return { state: "loading" as const };
|
const availability = useInitialAvailability({
|
||||||
}
|
hasContent: !!portfolio.data,
|
||||||
|
identity: accountId ?? "account",
|
||||||
|
isError: portfolio.isError || portfolio.meta?.lastAttempt.state === "failed",
|
||||||
|
isFetching: portfolio.isFetching,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isAccessFailure) return { code, state: "error" as const };
|
||||||
|
|
||||||
|
if (!portfolio.data)
|
||||||
|
return {
|
||||||
|
state: availability === "unavailable" ? "error" : "loading",
|
||||||
|
} as const;
|
||||||
|
|
||||||
const account = accounts.data?.find(item => item.id === accountId);
|
const account = accounts.data?.find(item => item.id === accountId);
|
||||||
const recentOperations = toRecentOperations(accountId, operations);
|
const recentOperations = toRecentOperations(accountId, operations);
|
||||||
const recentEvents = toRecentEvents(accountId, events);
|
const recentEvents = toRecentEvents(accountId, events);
|
||||||
|
|
||||||
const incomeSummary = toIncomeSummary(
|
const incomeSummary = toIncomeSummary(accountId, income);
|
||||||
accountId, income, () => income.refetch(),
|
|
||||||
);
|
|
||||||
|
|
||||||
const refresh = {
|
|
||||||
partial: portfolio.meta?.availability === "partial",
|
|
||||||
refreshError: portfolio.isError || sync.transportError || sync.sourceError,
|
|
||||||
refreshing: portfolio.isFetching || sync.refreshing,
|
|
||||||
retry: sync.retry,
|
|
||||||
sourceError: sync.sourceError,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (
|
if (
|
||||||
portfolio.meta?.availability === "complete"
|
portfolio.meta?.availability === "available"
|
||||||
&& portfolio.data.positions.length === 0
|
&& portfolio.data.positions.length === 0
|
||||||
&& portfolio.data.cashBalances.length === 0
|
&& portfolio.data.cashBalances.length === 0
|
||||||
)
|
)
|
||||||
@@ -116,19 +118,21 @@ function useAccountPageViewModel(): AccountPageViewModel {
|
|||||||
recentEvents,
|
recentEvents,
|
||||||
recentOperations,
|
recentOperations,
|
||||||
state: "empty" as const,
|
state: "empty" as const,
|
||||||
...refresh,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const isPartial = portfolio.meta?.completeness === "incomplete";
|
||||||
|
|
||||||
return {
|
return {
|
||||||
account,
|
account,
|
||||||
accountId,
|
accountId,
|
||||||
incomeSummary,
|
incomeSummary,
|
||||||
|
partial: isPartial,
|
||||||
portfolio: portfolio.data,
|
portfolio: portfolio.data,
|
||||||
positionSections: toAccountPagePositionSections(portfolio.data),
|
positionSections: toAccountPagePositionSections(portfolio.data),
|
||||||
recentEvents,
|
recentEvents,
|
||||||
recentOperations,
|
recentOperations,
|
||||||
|
source: portfolio.meta,
|
||||||
state: "loaded" as const,
|
state: "loaded" as const,
|
||||||
...refresh,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import { useTranslation } from "react-i18next";
|
|||||||
import type { BrokerageAccount } from "@/entities/brokerage-account";
|
import type { BrokerageAccount } from "@/entities/brokerage-account";
|
||||||
|
|
||||||
import { BrokerageEventsPreview } from "@/entities/brokerage-event";
|
import { BrokerageEventsPreview } from "@/entities/brokerage-event";
|
||||||
import { InvestmentRefreshState } from "@/features/tbank-connection";
|
import { PortfolioStructure } from "@/widgets/portfolio-structure";
|
||||||
|
|
||||||
import type {
|
import type {
|
||||||
AccountPageIncomeSummary,
|
AccountPageIncomeSummary,
|
||||||
@@ -17,7 +17,6 @@ import type {
|
|||||||
|
|
||||||
import { AccountHeading } from "./AccountHeading.view";
|
import { AccountHeading } from "./AccountHeading.view";
|
||||||
import { IncomeSummary } from "./IncomeSummary.view";
|
import { IncomeSummary } from "./IncomeSummary.view";
|
||||||
import { PortfolioStructure } from "./PortfolioStructure/PortfolioStructure";
|
|
||||||
import { RecentOperations } from "./RecentOperations.view";
|
import { RecentOperations } from "./RecentOperations.view";
|
||||||
|
|
||||||
type AccountPageEmptyProps = {
|
type AccountPageEmptyProps = {
|
||||||
@@ -26,10 +25,6 @@ type AccountPageEmptyProps = {
|
|||||||
incomeSummary?: AccountPageIncomeSummary;
|
incomeSummary?: AccountPageIncomeSummary;
|
||||||
recentEvents: AccountPageRecentEvents;
|
recentEvents: AccountPageRecentEvents;
|
||||||
recentOperations: AccountPageRecentOperations;
|
recentOperations: AccountPageRecentOperations;
|
||||||
refreshError?: boolean;
|
|
||||||
refreshing?: boolean;
|
|
||||||
retry?: () => void;
|
|
||||||
sourceError?: boolean;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const AccountPageEmpty: FC<AccountPageEmptyProps> = (props) => {
|
const AccountPageEmpty: FC<AccountPageEmptyProps> = (props) => {
|
||||||
@@ -45,14 +40,6 @@ const AccountPageEmpty: FC<AccountPageEmptyProps> = (props) => {
|
|||||||
<Stack>
|
<Stack>
|
||||||
<AccountHeading account={props.account} accountId={props.accountId} />
|
<AccountHeading account={props.account} accountId={props.accountId} />
|
||||||
|
|
||||||
<InvestmentRefreshState
|
|
||||||
labelScope="portfolio"
|
|
||||||
refreshError={props.refreshError ?? false}
|
|
||||||
refreshing={props.refreshing ?? false}
|
|
||||||
retry={props.retry}
|
|
||||||
sourceError={props.sourceError}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<StateView text={text} title={t("portfolio.emptyTitle")} />
|
<StateView text={text} title={t("portfolio.emptyTitle")} />
|
||||||
|
|
||||||
<PortfolioStructure
|
<PortfolioStructure
|
||||||
|
|||||||
@@ -7,10 +7,10 @@ import { Link } from "react-router";
|
|||||||
|
|
||||||
import { ApiErrorCode, isApiErrorCode } from "@/shared/api";
|
import { ApiErrorCode, isApiErrorCode } from "@/shared/api";
|
||||||
|
|
||||||
type AccountPageErrorProps = { code?: string; retry: () => void };
|
type AccountPageErrorProps = { code?: string };
|
||||||
|
|
||||||
const AccountPageError: FC<AccountPageErrorProps> = (props) => {
|
const AccountPageError: FC<AccountPageErrorProps> = (props) => {
|
||||||
const { code, retry } = props;
|
const { code } = props;
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
if (isApiErrorCode(code, ApiErrorCode.NotFound))
|
if (isApiErrorCode(code, ApiErrorCode.NotFound))
|
||||||
return (
|
return (
|
||||||
@@ -25,6 +25,7 @@ const AccountPageError: FC<AccountPageErrorProps> = (props) => {
|
|||||||
title={t("portfolio.accountUnavailableTitle")}
|
title={t("portfolio.accountUnavailableTitle")}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
if (
|
if (
|
||||||
isApiErrorCode(code, ApiErrorCode.TbankNotConnected)
|
isApiErrorCode(code, ApiErrorCode.TbankNotConnected)
|
||||||
|| isApiErrorCode(code, ApiErrorCode.InvalidTbankToken)
|
|| isApiErrorCode(code, ApiErrorCode.InvalidTbankToken)
|
||||||
@@ -41,22 +42,11 @@ const AccountPageError: FC<AccountPageErrorProps> = (props) => {
|
|||||||
title={t("portfolio.connectionErrorTitle")}
|
title={t("portfolio.connectionErrorTitle")}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
if (isApiErrorCode(code, ApiErrorCode.TbankUnavailable))
|
|
||||||
return (
|
|
||||||
<StateView
|
|
||||||
action={<Button onClick={retry}>{t("accounts.retry")}</Button>}
|
|
||||||
error
|
|
||||||
text={t("accounts.unavailableText")}
|
|
||||||
title={t("accounts.unavailableTitle")}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StateView
|
<StateView
|
||||||
action={<Button onClick={retry}>{t("accounts.retry")}</Button>}
|
text={t("states.unavailableText")}
|
||||||
error
|
title={t("states.unavailableTitle")}
|
||||||
text={t("states.errorText")}
|
|
||||||
title={t("states.errorTitle")}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user