16 Commits
Author SHA1 Message Date
codex-bot d910d624d6 test: remove timing races from screen-sync and route transition tests (#138) (#166)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 13s
Frontend verify / verify (push) Failing after 9m3s
2026-11-07 18:44:44 +03:00
codex-bot cc45352243 feat: clarify grouped coupon payouts (#162) (#165)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 11s
Frontend verify / verify (push) Failing after 7m26s
2026-11-07 11:18:07 +03:00
codex-bot ed0b5388ab fix: unify history and upcoming events labels (#161) (#163)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 12s
Frontend verify / verify (push) Failing after 7m18s
2026-11-07 10:50:51 +03:00
codex-bot 134c951178 fix: polish accounts portfolio summary (#159)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Failing after 7m26s
2026-11-06 15:17:27 +03:00
ksv741 2fd7d59e65 chore(release): 1.4.0
Frontend verify / commits (pull_request) Successful in 30s
Frontend verify / security (pull_request) Successful in 9s
Frontend verify / verify (pull_request) Successful in 5m31s
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 9s
Frontend verify / verify (push) Successful in 5m38s
Frontend image / publish (push) Successful in 7m13s
2026-11-06 07:45:29 +03:00
codex-bot 668f2ef70e fix: align audit findings for Events, currency and auth (WealthLedger/frontend#155)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Failing after 7m7s
2026-11-05 07:23:07 +03:00
codex-bot cadba8d075 refactor: share path-root query predicate (WealthLedger/frontend#142) (#154)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Failing after 7m42s
2026-11-04 22:58:58 +03:00
codex-bot 2db39f25d9 refactor: normalize view models and share breadcrumbs and titles (WealthLedger/frontend#143) (#153)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 11s
Frontend verify / verify (push) Failing after 8m19s
2026-11-04 21:14:29 +03:00
codex-bot 2d070ce2b5 refactor(api): consume bank operation oneOf contract (WealthLedger/frontend#144) (#152)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Failing after 8m20s
2026-11-04 20:47:51 +03:00
codex-bot 5077bd4f0b refactor: drop dead query helpers and simplify read deadline (WealthLedger/frontend#141) (#149)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 11s
Frontend verify / verify (push) Failing after 7m35s
2026-11-04 18:50:27 +03:00
codex-bot e2d143df46 refactor: move portfolio structure into account page, drop widgets (WealthLedger/frontend#139) (#140)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 12s
Frontend verify / verify (push) Failing after 7m51s
2026-11-04 18:01:00 +03:00
codex-bot ad93725a84 chore(deps): set Renovate release age, PR limit and update groups (WealthLedger/main#6) (#137)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Failing after 6m56s
2026-11-03 14:07:40 +03:00
codex-bot 8ce1e8e444 feat(investments): warn and offer retry after exhausted read retries (WealthLedger/frontend#55) (#136)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 9s
Frontend verify / verify (push) Failing after 7m5s
2026-11-03 09:49:08 +03:00
codex-bot aaee9591d7 chore(api): update OpenAPI snapshot with UpcomingEventsDto.window (WealthLedger/frontend#134) (#135)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 9s
Frontend verify / verify (push) Failing after 6m24s
2026-11-03 07:21:35 +03:00
codex-bot 9619dc9791 fix(account): show source metadata on empty account and income (WealthLedger/frontend#55) (#133)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Failing after 6m34s
2026-11-03 06:44:13 +03:00
codex-bot 71fbe7774d refactor: replace repeated lazy page wrappers with lazyPage helper (#131) (#132)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 8s
Frontend verify / verify (push) Failing after 6m34s
2026-11-02 07:31:25 +03:00
106 changed files with 2330 additions and 985 deletions
+6 -7
View File
@@ -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 → widgets → features → entities → shared app → pages → 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,14 +30,13 @@ 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 → widgets → features → entities → shared`. Локальный FSD profile: `app → pages → features → entities → shared`.
Widget собирает несколько нижних слоёв в самостоятельный UI-блок; компонент для Слой `widgets` не используется: композиция экрана и компонент для одной page
одной page остаётся у page. Form, mutation или click handler сами по себе не остаются у page. Form, mutation или click handler сами по себе не
требуют feature. Два callers не делают domain helper generic shared. требуют feature. Два callers не делают domain helper generic shared.
Slice именуется по ответственности, а не `helpers`, `hooks` или `types`. Slice именуется по ответственности, а не `helpers`, `hooks` или `types`.
@@ -49,12 +48,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`, `widgets`, `features`, `entities` не зависят от соседнего slice своего слоя; импортирует внутренний файл напрямую. Slices `pages`, `features`, `entities` не зависят от соседнего slice своего слоя;
композиция принадлежит вышележащему owner. Existing меж-slice исключения композиция принадлежит вышележащему owner. Existing меж-slice исключения
не являются разрешением добавлять новые. не являются разрешением добавлять новые.
Направление зависимостей, public imports и запрет соседних slices в Направление зависимостей, public imports и запрет соседних slices в
`pages`, `widgets`, `features`, `entities` проверяет `npm run deps`. Внутренние imports `pages`, `features`, `entities` проверяет `npm run deps`. Внутренние imports
одного slice и связи shared segments этот запрет не ограничивает. одного slice и связи shared segments этот запрет не ограничивает.
Knip проверяет использование exports, а не смысл placement. Knip проверяет использование exports, а не смысл placement.
+25
View File
@@ -1,5 +1,30 @@
# Changelog # Changelog
## [1.4.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.3.0...v1.4.0) (2026-11-06)
### Features
* **investments:** warn and offer retry after exhausted read retries (WealthLedger/frontend[#55](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/55)) ([#136](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/136)) ([8ce1e8e](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/8ce1e8e44486dcc23d4c074559ca2bb517880b60))
### Bug Fixes
* **account:** show source metadata on empty account and income (WealthLedger/frontend[#55](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/55)) ([#133](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/133)) ([9619dc9](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/9619dc979172dbc16391206e801ed67862d20116))
* align audit findings for Events, currency and auth (WealthLedger/frontend[#155](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/155)) ([668f2ef](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/668f2ef70e535a1222e7f600b1be4a31fefc6f8b))
### Refactoring
* **api:** consume bank operation oneOf contract (WealthLedger/frontend[#144](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/144)) ([#152](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/152)) ([2d070ce](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/2d070ce2b54bbee466ecf6cc18b437910f0c07f8))
* drop dead query helpers and simplify read deadline (WealthLedger/frontend[#141](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/141)) ([#149](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/149)) ([5077bd4](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/5077bd4f0baa4a59643e875485c2f08253cc198d))
* move portfolio structure into account page, drop widgets (WealthLedger/frontend[#139](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/139)) ([#140](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/140)) ([e2d143d](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/e2d143df46e650139e49b7c80a886008ede86d2a))
* normalize view models and share breadcrumbs and titles (WealthLedger/frontend[#143](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/143)) ([#153](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/153)) ([2db39f2](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/2db39f25d9478350ad56a1b2e2ca6496068257c5))
* replace repeated lazy page wrappers with lazyPage helper ([#131](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/131)) ([#132](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/132)) ([71fbe77](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/71fbe7774d3ed63fcb84bc644da997921bc049b2))
* share path-root query predicate (WealthLedger/frontend[#142](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/142)) ([#154](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/154)) ([cadba8d](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/cadba8d075daf9b20c0c9de97ad5bd8f5a3e74fc))
### Maintenance
* **api:** update OpenAPI snapshot with UpcomingEventsDto.window (WealthLedger/frontend[#134](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/134)) ([#135](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/135)) ([aaee959](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/aaee9591d7880193ee9b0c14339e8477264e4a94))
* **deps:** set Renovate release age, PR limit and update groups (WealthLedger/main[#6](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/6)) ([#137](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/137)) ([ad93725](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/ad93725a84615ec329631b71ed8db33337085740))
## [1.3.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.2.1...v1.3.0) (2026-11-01) ## [1.3.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.2.1...v1.3.0) (2026-11-01)
### Features ### Features
+5 -11
View File
@@ -29,17 +29,17 @@ module.exports = {
}, },
{ {
from: { from: {
path: "^src/(app|pages|widgets|features|entities|shared)/([^/]+)/", path: "^src/(app|pages|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|widgets|features|entities|shared)/([^/]+)/(?!index\.ts$)`, path: String.raw`^src/(app|pages|features|entities|shared)/([^/]+)/(?!index\.ts$)`,
pathNot: "^src/$1/$2/", pathNot: "^src/$1/$2/",
}, },
}, },
{ {
from: { path: "^src/(pages|widgets|features|entities)/([^/]+)/" }, from: { path: "^src/(pages|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,24 +48,18 @@ 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|widgets|pages|app)/" }, to: { path: "^src/(entities|features|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|widgets|pages|app)/" }, to: { path: "^src/(features|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)/" },
}, },
{ {
+9
View File
@@ -17,12 +17,21 @@ http {
default $http_x_forwarded_proto; default $http_x_forwarded_proto;
'' $scheme; '' $scheme;
} }
# One shared budget: the external proxy's client-IP forwarding is not verified.
map "$request_method:$uri" $auth_admission_key {
default "";
POST:/api/v1/auth/login auth;
POST:/api/v1/auth/register auth;
}
limit_req_zone $auth_admission_key zone=auth_admission:1m rate=2r/s;
limit_req_status 429;
server { server {
listen 8080; listen 8080;
server_name _; server_name _;
root /usr/share/nginx/html; root /usr/share/nginx/html;
resolver 127.0.0.11 valid=5s ipv6=off; resolver 127.0.0.11 valid=5s ipv6=off;
location /api/ { location /api/ {
limit_req zone=auth_admission burst=5 nodelay;
set $backend http://backend:3000; set $backend http://backend:3000;
proxy_pass $backend$request_uri; proxy_pass $backend$request_uri;
proxy_set_header Host $http_host; proxy_set_header Host $http_host;
+6 -1
View File
@@ -25,7 +25,11 @@ const readability = {
) )
context.report({ messageId: "schema", node }); context.report({ messageId: "schema", node });
}, },
FunctionDeclaration: checkParameters, FunctionDeclaration(node) {
checkParameters(node);
if (node.id?.name?.endsWith?.("ViewModel"))
context.report({ messageId: "vmName", node: node.id });
},
FunctionExpression: checkParameters, FunctionExpression: checkParameters,
ImportDeclaration(node) { ImportDeclaration(node) {
if ( if (
@@ -95,6 +99,7 @@ const readability = {
schema: "Declare Zod schemas in a dedicated *.schema.ts file.", schema: "Declare Zod schemas in a dedicated *.schema.ts file.",
svg: "Own SVG markup in packages/icons, and import its public component.", svg: "Own SVG markup in packages/icons, and import its public component.",
union: "Put complex union members on separate lines.", union: "Put complex union members on separate lines.",
vmName: "Name custom hooks use*Vm, not use*ViewModel.",
}, },
schema: [], schema: [],
type: "suggestion", type: "suggestion",
+2 -2
View File
@@ -1,12 +1,12 @@
{ {
"name": "wealth-ledger-frontend", "name": "wealth-ledger-frontend",
"version": "1.3.0", "version": "1.4.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "wealth-ledger-frontend", "name": "wealth-ledger-frontend",
"version": "1.3.0", "version": "1.4.0",
"workspaces": [ "workspaces": [
"packages/*" "packages/*"
], ],
+1 -1
View File
@@ -1,7 +1,7 @@
{ {
"name": "wealth-ledger-frontend", "name": "wealth-ledger-frontend",
"private": true, "private": true,
"version": "1.3.0", "version": "1.4.0",
"type": "module", "type": "module",
"engines": { "engines": {
"node": "24.22.1" "node": "24.22.1"
+16 -1
View File
@@ -1,15 +1,30 @@
{ {
"$schema": "https://docs.renovatebot.com/renovate-schema.json", "$schema": "https://docs.renovatebot.com/renovate-schema.json",
"extends": ["config:recommended", ":semanticCommitTypeAll(chore)"], "extends": ["config:recommended", ":semanticCommitTypeAll(chore)", "security:minimumReleaseAgeNpm"],
"timezone": "Europe/Moscow", "timezone": "Europe/Moscow",
"labels": ["dependencies"], "labels": ["dependencies"],
"dependencyDashboard": true, "dependencyDashboard": true,
"rangeStrategy": "pin", "rangeStrategy": "pin",
"prConcurrentLimit": 5,
"lockFileMaintenance": {
"enabled": true,
"schedule": ["before 4am on the first day of the month"]
},
"packageRules": [ "packageRules": [
{ {
"matchUpdateTypes": ["minor", "patch"], "matchUpdateTypes": ["minor", "patch"],
"groupName": "non-major dependencies" "groupName": "non-major dependencies"
}, },
{
"matchManagers": ["github-actions"],
"matchUpdateTypes": ["minor", "patch"],
"groupName": "non-major github actions"
},
{
"matchManagers": ["docker-compose", "dockerfile"],
"matchUpdateTypes": ["minor", "patch"],
"groupName": "non-major container images"
},
{ {
"matchUpdateTypes": ["major"], "matchUpdateTypes": ["major"],
"dependencyDashboardApproval": true "dependencyDashboardApproval": true
@@ -217,6 +217,7 @@ beforeEach(() => {
}), }),
), ),
incomeTotalsByCurrency: [], incomeTotalsByCurrency: [],
window: { from: "2026-09-01", to: "2026-10-01" },
}), }),
), ),
), ),
@@ -226,9 +227,9 @@ beforeEach(() => {
describe("All accounts routes", () => { describe("All accounts routes", () => {
it.each([ it.each([
["/accounts/all", "Все счета"], ["/accounts/all", "Все счета"],
["/accounts/all/operations", "Журнал операций"], ["/accounts/all/operations", "История операций"],
["/accounts/all/income?from=2026-08-01&to=2026-08-31", "Пассивный доход"], ["/accounts/all/income?from=2026-08-01&to=2026-08-31", "Пассивный доход"],
["/accounts/all/events", "Будущие события"], ["/accounts/all/events", "Предстоящие события"],
])("opens %s directly", async (path, title) => { ])("opens %s directly", async (path, title) => {
renderPage(path); renderPage(path);
expect( expect(
@@ -310,9 +311,9 @@ describe("All accounts routes", () => {
); );
for (const [suffix, tab] of [ for (const [suffix, tab] of [
["operations", "Операции"], ["operations", "История операций"],
["income", "Доход"], ["income", "Доход"],
["events", "События"], ["events", "Предстоящие события"],
]) { ]) {
fireEvent.click(screen.getByRole("tab", { name: tab })); fireEvent.click(screen.getByRole("tab", { name: tab }));
expect(screen.getByRole("link", { name: "Подробнее" })) expect(screen.getByRole("link", { name: "Подробнее" }))
+28 -94
View File
@@ -1,4 +1,4 @@
import type { FC } from "react"; import type { ComponentType, FC } from "react";
import { lazy } from "react"; import { lazy } from "react";
import { Navigate, Route, Routes } from "react-router"; import { Navigate, Route, Routes } from "react-router";
@@ -6,101 +6,35 @@ import { Navigate, Route, Routes } from "react-router";
import { LazyPage } from "../RouteFallback"; import { LazyPage } from "../RouteFallback";
import { Protected, Public } from "../RouteGuards"; import { Protected, Public } from "../RouteGuards";
const CardPage = lazy(async () => { // Pages use named exports; React.lazy needs a default export per dynamic import (one chunk each).
const { CardPage } = await import("@/pages/card"); function lazyPage<Name extends string>(
load: () => Promise<Record<Name, ComponentType>>,
name: Name,
) {
return lazy(async () => {
const page = await load();
return { default: CardPage }; // eslint-disable-next-line security/detect-object-injection -- `name` is a compile-time literal checked against the module's exports.
}); return { default: page[name] };
});
}
const CardsPage = lazy(async () => { const CardPage = lazyPage(async () => import("@/pages/card"), "CardPage");
const { CardsPage } = await import("@/pages/cards"); const CardsPage = lazyPage(async () => import("@/pages/cards"), "CardsPage");
const BondPage = lazyPage(async () => import("@/pages/bond"), "BondPage");
return { default: CardsPage }; const BondsPage = lazyPage(async () => import("@/pages/bonds"), "BondsPage");
}); const StockPage = lazyPage(async () => import("@/pages/stock"), "StockPage");
const StocksPage = lazyPage(async () => import("@/pages/stocks"), "StocksPage");
const BondPage = lazy(async () => { const AccountPage = lazyPage(async () => import("@/pages/account"), "AccountPage");
const { BondPage } = await import("@/pages/bond"); const AccountEventsPage = lazyPage(async () => import("@/pages/account-events"), "AccountEventsPage");
const AccountOperationsPage = lazyPage(async () => import("@/pages/account-operations"), "AccountOperationsPage");
return { default: BondPage }; const AccountIncomePage = lazyPage(async () => import("@/pages/account-income"), "AccountIncomePage");
}); const AccountsPage = lazyPage(async () => import("@/pages/accounts"), "AccountsPage");
const LoginPage = lazyPage(async () => import("@/pages/login"), "LoginPage");
const BondsPage = lazy(async () => { const NotFoundPage = lazyPage(async () => import("@/pages/not-found"), "NotFoundPage");
const { BondsPage } = await import("@/pages/bonds"); const RegisterPage = lazyPage(async () => import("@/pages/register"), "RegisterPage");
const SettingsPage = lazyPage(async () => import("@/pages/settings"), "SettingsPage");
return { default: BondsPage }; const ProtectedLayout = lazyPage(async () => import("../ProtectedLayout"), "ProtectedLayout");
});
const StockPage = lazy(async () => {
const { StockPage } = await import("@/pages/stock");
return { default: StockPage };
});
const StocksPage = lazy(async () => {
const { StocksPage } = await import("@/pages/stocks");
return { default: StocksPage };
});
const AccountPage = lazy(async () => {
const { AccountPage } = await import("@/pages/account");
return { default: AccountPage };
});
const AccountEventsPage = lazy(async () => {
const { AccountEventsPage } = await import("@/pages/account-events");
return { default: AccountEventsPage };
});
const AccountOperationsPage = lazy(async () => {
const { AccountOperationsPage } = await import("@/pages/account-operations");
return { default: AccountOperationsPage };
});
const AccountIncomePage = lazy(async () => {
const { AccountIncomePage } = await import("@/pages/account-income");
return { default: AccountIncomePage };
});
const AccountsPage = lazy(async () => {
const { AccountsPage } = await import("@/pages/accounts");
return { default: AccountsPage };
});
const LoginPage = lazy(async () => {
const { LoginPage } = await import("@/pages/login");
return { default: LoginPage };
});
const NotFoundPage = lazy(async () => {
const { NotFoundPage } = await import("@/pages/not-found");
return { default: NotFoundPage };
});
const RegisterPage = lazy(async () => {
const { RegisterPage } = await import("@/pages/register");
return { default: RegisterPage };
});
const SettingsPage = lazy(async () => {
const { SettingsPage } = await import("@/pages/settings");
return { default: SettingsPage };
});
const ProtectedLayout = lazy(async () => {
const { ProtectedLayout } = await import("../ProtectedLayout");
return { default: ProtectedLayout };
});
const AppRoutes: FC = () => ( const AppRoutes: FC = () => (
<Routes> <Routes>
@@ -1,6 +1,5 @@
import type { FC } from "react"; import type { FC } from "react";
import { useDocumentTitle } from "@mantine/hooks";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useCurrentRoute } from "@/app/model"; import { useCurrentRoute } from "@/app/model";
@@ -8,12 +7,12 @@ import { useBankCard } from "@/entities/bank-card";
import { useBond } from "@/entities/bond"; import { useBond } from "@/entities/bond";
import { useBrokerageAccounts } from "@/entities/brokerage-account"; import { useBrokerageAccounts } from "@/entities/brokerage-account";
import { useStock } from "@/entities/stock"; import { useStock } from "@/entities/stock";
import { useAppDocumentTitle } from "@/shared/ui";
type DocumentTitleProps = { title: string }; type DocumentTitleProps = { title: string };
const DocumentTitle: FC<DocumentTitleProps> = (props): undefined => { const DocumentTitle: FC<DocumentTitleProps> = (props): undefined => {
const { t } = useTranslation(); useAppDocumentTitle(props.title);
useDocumentTitle(`${props.title} — ${t("appName")}`);
}; };
type AccountDocumentTitleProps = { type AccountDocumentTitleProps = {
@@ -1,12 +1,12 @@
import type { FC, PropsWithChildren } from "react"; import type { FC, PropsWithChildren } from "react";
import { Button, Stack, Text, Title } from "@mantine/core"; import { Button, Stack, Text, Title } from "@mantine/core";
import { useDocumentTitle } from "@mantine/hooks";
import { Component } from "react"; import { Component } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Link, useLocation } from "react-router"; import { Link, useLocation } from "react-router";
import { useAuth } from "@/features/auth"; import { useAuth } from "@/features/auth";
import { useAppDocumentTitle } from "@/shared/ui";
type BoundaryProps = PropsWithChildren<{ type BoundaryProps = PropsWithChildren<{
authenticated: boolean; authenticated: boolean;
@@ -37,7 +37,7 @@ class Boundary extends Component<BoundaryProps, State> {
const RouteErrorFallback: FC<RouteErrorFallbackProps> = (props) => { const RouteErrorFallback: FC<RouteErrorFallbackProps> = (props) => {
const { authenticated } = props; const { authenticated } = props;
const { t } = useTranslation(); const { t } = useTranslation();
useDocumentTitle(`${t("routeError.title")} — ${t("appName")}`); useAppDocumentTitle(t("routeError.title"));
const to = authenticated ? "/accounts" : "/login"; const to = authenticated ? "/accounts" : "/login";
return ( return (
@@ -55,9 +55,9 @@ describe("AppBreadcrumbs", () => {
}); });
it.each([ it.each([
["operations", "Операции"], ["operations", "История операций"],
["OPERATIONS", "Операции"], ["OPERATIONS", "История операций"],
["events", "Будущие события"], ["events", "Предстоящие события"],
["income", "Пассивный доход"], ["income", "Пассивный доход"],
])("links to the account hierarchy from %s", (section, title) => { ])("links to the account hierarchy from %s", (section, title) => {
renderBreadcrumbs(`/accounts/account-1/${section}`, [ renderBreadcrumbs(`/accounts/account-1/${section}`, [
+17 -7
View File
@@ -7,10 +7,8 @@ import { useCurrentRoute } from "@/app/model";
import { AccountBreadcrumbs } from "./AccountBreadcrumbs"; import { AccountBreadcrumbs } from "./AccountBreadcrumbs";
import { AccountScopeSwitch } from "./AccountScopeSwitch/AccountScopeSwitch"; import { AccountScopeSwitch } from "./AccountScopeSwitch/AccountScopeSwitch";
import { BondBreadcrumbs } from "./BondBreadcrumbs";
import { BreadcrumbTrail } from "./BreadcrumbTrail"; import { BreadcrumbTrail } from "./BreadcrumbTrail";
import { CardBreadcrumbs } from "./CardBreadcrumbs"; import { EntityBreadcrumbs } from "./EntityBreadcrumbs";
import { StockBreadcrumbs } from "./StockBreadcrumbs";
const AppBreadcrumbs: FC = () => { const AppBreadcrumbs: FC = () => {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -26,9 +24,16 @@ const AppBreadcrumbs: FC = () => {
stock, stock,
} = useCurrentRoute(); } = useCurrentRoute();
if (bond) return <BondBreadcrumbs identifier={bond.params.bondId ?? ""} />; if (bond) {
if (stock) return <EntityBreadcrumbs identifier={bond.params.bondId ?? ""} kind="bond" />;
return <StockBreadcrumbs identifier={stock.params.stockId ?? ""} />; }
if (stock) {
return (
<EntityBreadcrumbs identifier={stock.params.stockId ?? ""} kind="stock" />
);
}
if (account && (section || !account.params.section)) if (account && (section || !account.params.section))
return ( return (
<Stack gap={0} mb="md"> <Stack gap={0} mb="md">
@@ -43,8 +48,13 @@ const AppBreadcrumbs: FC = () => {
/> />
</Stack> </Stack>
); );
if (card) return <CardBreadcrumbs identifier={card.params.cardId ?? ""} />;
if (card) {
return <EntityBreadcrumbs identifier={card.params.cardId ?? ""} kind="card" />;
}
if (cards) return <BreadcrumbTrail items={[{ label: t("bank.title") }]} />; if (cards) return <BreadcrumbTrail items={[{ label: t("bank.title") }]} />;
if (accounts) if (accounts)
return <BreadcrumbTrail items={[{ label: t("breadcrumbs.accounts") }]} />; return <BreadcrumbTrail items={[{ label: t("breadcrumbs.accounts") }]} />;
@@ -1,25 +0,0 @@
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { useBond } from "@/entities/bond";
import { BreadcrumbTrail } from "./BreadcrumbTrail";
type BondBreadcrumbsProps = { identifier: string };
const BondBreadcrumbs: FC<BondBreadcrumbsProps> = (props) => {
const { data } = useBond(props.identifier);
const { t } = useTranslation();
return (
<BreadcrumbTrail
items={[
{ label: t("bond.searchTitle"), to: "/bonds" },
{ label: data?.name ?? t("bond.instrument") },
]}
/>
);
};
export { BondBreadcrumbs };
@@ -39,4 +39,4 @@ const BreadcrumbTrail: FC<BreadcrumbTrailProps> = (props) => {
); );
}; };
export { BreadcrumbTrail }; export { BreadcrumbTrail, type Crumb };
@@ -1,25 +0,0 @@
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { useBankCard } from "@/entities/bank-card";
import { BreadcrumbTrail } from "./BreadcrumbTrail";
type CardBreadcrumbsProps = { identifier: string };
const CardBreadcrumbs: FC<CardBreadcrumbsProps> = (props) => {
const { data } = useBankCard(props.identifier);
const { t } = useTranslation();
return (
<BreadcrumbTrail
items={[
{ label: t("bank.title"), to: "/cards" },
{ label: data?.name ?? t("bank.card") },
]}
/>
);
};
export { CardBreadcrumbs };
@@ -0,0 +1,48 @@
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { useBankCard } from "@/entities/bank-card";
import { useBond } from "@/entities/bond";
import { useStock } from "@/entities/stock";
import type { Crumb } from "./BreadcrumbTrail";
import { BreadcrumbTrail } from "./BreadcrumbTrail";
type EntityBreadcrumbsProps = {
identifier: string;
kind:
| "bond"
| "card"
| "stock";
};
const EntityBreadcrumbs: FC<EntityBreadcrumbsProps> = (props) => {
const { identifier, kind } = props;
const { t } = useTranslation();
const bond = useBond(kind === "bond" ? identifier : "");
const card = useBankCard(kind === "card" ? identifier : "");
const stock = useStock(kind === "stock" ? identifier : "");
let parent: Crumb;
let name: string;
if (kind === "bond") {
parent = { label: t("bond.searchTitle"), to: "/bonds" };
name = bond.data?.name ?? t("bond.instrument");
}
else if (kind === "stock") {
parent = { label: t("stock.searchTitle"), to: "/stocks" };
name = stock.data?.name ?? t("stock.share");
}
else {
parent = { label: t("bank.title"), to: "/cards" };
name = card.data?.name ?? t("bank.card");
}
return <BreadcrumbTrail items={[parent, { label: name }]} />;
};
export { EntityBreadcrumbs };
@@ -1,25 +0,0 @@
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { useStock } from "@/entities/stock";
import { BreadcrumbTrail } from "./BreadcrumbTrail";
type StockBreadcrumbsProps = { identifier: string };
const StockBreadcrumbs: FC<StockBreadcrumbsProps> = (props) => {
const { data } = useStock(props.identifier);
const { t } = useTranslation();
return (
<BreadcrumbTrail
items={[
{ label: t("stock.searchTitle"), to: "/stocks" },
{ label: data?.name ?? t("stock.share") },
]}
/>
);
};
export { StockBreadcrumbs };
+4 -10
View File
@@ -5,6 +5,7 @@ import {
ApiErrorCode, ApiErrorCode,
apiErrorCode, apiErrorCode,
isApiErrorCode, isApiErrorCode,
isGetUnder,
} from "@/shared/api"; } from "@/shared/api";
import type { import type {
@@ -26,21 +27,14 @@ async function mutationData<T>(
return data; return data;
} }
const bankCardGetPredicate = isGetUnder(["/api/v1/bank-cards"]);
function useBankMutationOptions() { function useBankMutationOptions() {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const invalidate = () => const invalidate = () =>
queryClient.invalidateQueries({ queryClient.invalidateQueries({
predicate: ({ queryKey }) => { predicate: ({ queryKey }) => bankCardGetPredicate(queryKey),
const [method, path] = queryKey;
return (
method === "get"
&& typeof path === "string"
&& (path === "/api/v1/bank-cards"
|| path.startsWith("/api/v1/bank-cards/"))
);
},
}); });
return { return {
@@ -49,6 +49,10 @@ function entryLabelKey(operation: BrokerageOperation): string {
return `ledger.category.${operation.category}`; return `ledger.category.${operation.category}`;
} }
function isCouponPayment(operation: BrokerageOperation): boolean {
return isOperationType(operation.type, OperationType.Coupon);
}
function isIncomePayment(operation: BrokerageOperation): boolean { function isIncomePayment(operation: BrokerageOperation): boolean {
return [OperationType.Coupon, OperationType.Dividend].some(type => return [OperationType.Coupon, OperationType.Dividend].some(type =>
isOperationType(operation.type, type), isOperationType(operation.type, type),
@@ -131,6 +135,7 @@ function paymentPresentation(
export { export {
brokerageOperationGroupKey, brokerageOperationGroupKey,
entryLabelKey, entryLabelKey,
isCouponPayment,
isIncomePayment, isIncomePayment,
isZeroDecimal, isZeroDecimal,
operationLabelKey, operationLabelKey,
@@ -55,23 +55,27 @@ function renderGroup(
} }
describe("OperationGroup", () => { describe("OperationGroup", () => {
it("shows the header, exact total and separate card rows per account", () => { it("shows the received coupon and positive totals in flat account rows", () => {
renderGroup([ renderGroup([
operation("1", { id: "broker", name: "Брокерский" }, "0.1"), { ...operation("1", { id: "broker", name: "Брокерский" }, "0.1"), description: "Выплата купонов СФО ВТБ РКС Эталон 04" },
operation("2", { id: "iis", name: "ИИС" }, "0.2"), operation("2", { id: "iis", name: "ИИС" }, "0.2"),
]); ]);
expect(screen.getByText("Купон · BOND")).toBeInTheDocument(); expect(screen.getByText("Выплата купонов СФО ВТБ РКС Эталон 04")).toBeInTheDocument();
expect(screen.getByText("+0,3 ₽")).toBeInTheDocument(); expect(screen.getByText("+0,3 ₽")).toBeInTheDocument();
const accounts = within(screen.getByRole("list", { const accounts = within(screen.getByRole("list", {
name: /Купон · BOND, Исполнено 14\.08\.2026.*, \+0,3 ₽/, name: /Выплата купонов СФО ВТБ РКС Эталон 04, Исполнено 14\.08\.2026.*, \+0,3 ₽/,
})); }));
expect(accounts.getByRole("listitem", { name: "Брокерский, +0,1 ₽" })) expect(accounts.getByRole("listitem", { name: "Брокерский, +0,1 ₽" }))
.toHaveTextContent("Купон"); .toHaveTextContent("Купон");
expect(accounts.getByText("+0,1 ₽")).toHaveClass(/positive/);
expect(accounts.getByRole("listitem", { name: "ИИС, +0,2 ₽" })) expect(accounts.getByRole("listitem", { name: "ИИС, +0,2 ₽" }))
.toHaveTextContent("Купон"); .toHaveTextContent("Купон");
expect(accounts.getByText("+0,2 ₽")).toHaveClass(/positive/);
expect(accounts.getByRole("listitem", { name: "ИИС, +0,2 ₽" }))
.not.toHaveClass("EntryGroup_accountCardRow");
expect(accounts.queryByText(/Исполнено/)).not.toBeInTheDocument(); expect(accounts.queryByText(/Исполнено/)).not.toBeInTheDocument();
expect(accounts.queryByRole("link")).not.toBeInTheDocument(); expect(accounts.queryByRole("link")).not.toBeInTheDocument();
}); });
@@ -83,8 +87,10 @@ describe("OperationGroup", () => {
]); ]);
expect(screen.getByRole("list", { expect(screen.getByRole("list", {
name: /Купон · BOND, Исполнено .*Итог недоступен/, name: /Выплата купонов BOND, Исполнено .*Итог недоступен/,
})).toBeInTheDocument(); })).toBeInTheDocument();
expect(screen.getByText("Итог недоступен")).toBeInTheDocument();
expect(screen.getByText("—")).not.toHaveClass(/positive/);
}); });
it.each(["0", "0.000"])( it.each(["0", "0.000"])(
@@ -114,6 +120,7 @@ describe("OperationGroup", () => {
operation("2", { id: "iis", name: "ИИС" }, "-100"), operation("2", { id: "iis", name: "ИИС" }, "-100"),
]); ]);
expect(screen.getByText("0 ₽")).toBeInTheDocument(); expect(screen.getByText("0 ₽")).toBeInTheDocument();
expect(screen.getByText("−100 ₽")).toHaveClass(/negative/);
}); });
it("renders repeated ids inside one group as separate rows", () => { it("renders repeated ids inside one group as separate rows", () => {
@@ -123,7 +130,7 @@ describe("OperationGroup", () => {
]); ]);
expect(screen.getByText("+30 ₽")).toBeInTheDocument(); expect(screen.getByText("+30 ₽")).toBeInTheDocument();
const accounts = within(screen.getByRole("list", { name: /Купон/ })); const accounts = within(screen.getByRole("list", { name: /Выплата купонов/ }));
expect(accounts.getAllByText("Брокерский")).toHaveLength(1); expect(accounts.getAllByText("Брокерский")).toHaveLength(1);
expect(accounts.getAllByText("ИИС")).toHaveLength(1); expect(accounts.getAllByText("ИИС")).toHaveLength(1);
expect(accounts.getAllByRole("listitem")).toHaveLength(2); expect(accounts.getAllByRole("listitem")).toHaveLength(2);
@@ -9,12 +9,13 @@ import {
sumMoney, sumMoney,
totalText, totalText,
} from "@/shared/lib"; } from "@/shared/lib";
import { AccountCardRow, EntryGroup, EntryGroupTotal } from "@/shared/ui"; import { AccountCardRow, AccountRow, EntryGroup, EntryGroupTotal } from "@/shared/ui";
import type { BrokerageOperation } from "../api/useBrokerageOperations"; import type { BrokerageOperation } from "../api/useBrokerageOperations";
import { import {
entryLabelKey, entryLabelKey,
isCouponPayment,
isZeroDecimal, isZeroDecimal,
operationLabelKey, operationLabelKey,
paymentPresentation, paymentPresentation,
@@ -37,6 +38,8 @@ const OperationGroup: FC<OperationGroupProps> = (props) => {
? entryLabelKey(first) ? entryLabelKey(first)
: operationLabelKey(first.type)); : operationLabelKey(first.type));
const isCoupon = isCouponPayment(first);
const instrument const instrument
= first.ticker ?? first.instrumentType ?? t("ledger.noInstrument"); = first.ticker ?? first.instrumentType ?? t("ledger.noInstrument");
@@ -52,9 +55,21 @@ const OperationGroup: FC<OperationGroupProps> = (props) => {
: null; : null;
const date = formatSnapshotDay(first.occurredAt); const date = formatSnapshotDay(first.occurredAt);
const title = `${typeLabel} · ${instrument}`; const description = first.description.trim();
let title = `${typeLabel} · ${instrument}`;
if (isCoupon) {
title = description && description.toLocaleLowerCase() !== "купон"
? description
: t("ledger.couponPayment", { instrument });
}
const totalsText = totalText(totals, true); const totalsText = totalText(totals, true);
const totalTone = isCoupon && totals?.length && totals.every(total => !isZeroDecimal(total.value) && !total.value.startsWith("-"))
? "positive"
: "neutral";
const accessibleName = [ const accessibleName = [
title, title,
t("payout.executedAt", { date }), t("payout.executedAt", { date }),
@@ -63,13 +78,14 @@ const OperationGroup: FC<OperationGroupProps> = (props) => {
return ( return (
<EntryGroup <EntryGroup
flat={isCoupon}
header={( header={(
<EntryCard <EntryCard
imageSrc={instrumentLogoUrl(first.logoName)} imageSrc={instrumentLogoUrl(first.logoName)}
initial={(first.ticker?.trim()[0] ?? "?").toUpperCase()} initial={(first.ticker?.trim()[0] ?? "?").toUpperCase()}
metadata={t("payout.executedAt", { date })} metadata={t("payout.executedAt", { date })}
title={title} title={title}
tone="neutral" tone={totalTone}
value={<EntryGroupTotal isSigned totals={totals} />} value={<EntryGroupTotal isSigned totals={totals} />}
valueLabel={typeLabel} valueLabel={typeLabel}
wrap wrap
@@ -80,14 +96,15 @@ const OperationGroup: FC<OperationGroupProps> = (props) => {
{props.entries.map(({ key, operation }) => { {props.entries.map(({ key, operation }) => {
const payment = paymentPresentation(operation); const payment = paymentPresentation(operation);
return ( const accountRowProps = {
<AccountCardRow accountName: operation.account?.name ?? "—",
accountName={operation.account?.name ?? "—"} value: payment.amount,
key={key} valueLabel: t(payment.label),
value={payment.amount} };
valueLabel={t(payment.label)}
/> return isCoupon
); ? <AccountRow key={key} {...accountRowProps} tone={payment.tone} />
: <AccountCardRow key={key} {...accountRowProps} />;
})} })}
</EntryGroup> </EntryGroup>
); );
@@ -65,18 +65,32 @@
.summary { .summary {
font-variant-numeric: tabular-nums lining-nums; font-variant-numeric: tabular-nums lining-nums;
white-space: nowrap; align-items: flex-end;
}
.currencySummary {
min-width: 0;
} }
.total { .total {
color: var(--wl-color-text); color: var(--wl-color-text);
font-size: var(--mantine-font-size-lg); font-size: var(--mantine-font-size-lg);
line-height: var(--mantine-line-height-lg); line-height: var(--mantine-line-height-lg);
overflow-wrap: anywhere;
} }
.return, .return,
.cashValue { .cashValue {
font-variant-numeric: tabular-nums lining-nums; font-variant-numeric: tabular-nums lining-nums;
}
.return {
justify-content: flex-end;
min-width: 0;
overflow-wrap: anywhere;
}
.cashValue {
white-space: nowrap; white-space: nowrap;
} }
@@ -138,7 +152,11 @@
text-align: left; text-align: left;
} }
.balance > div { .summary {
align-items: flex-start;
}
.return {
justify-content: flex-start; justify-content: flex-start;
} }
} }
@@ -119,25 +119,26 @@ describe("BrokerageAccountList", () => {
expect(within(link).getByText("123 456 789 012 345 678 902,00 ₽")) expect(within(link).getByText("123 456 789 012 345 678 902,00 ₽"))
.toBeInTheDocument(); .toBeInTheDocument();
expect(within(link).getByText("Еще 1 валюта")).toBeInTheDocument(); expect(within(link).getByText("Еще 1 валюта")).toBeInTheDocument();
expect(within(link).getByText("+12,40 %")).toBeInTheDocument(); expect(within(link).getByText("+12,4 %")).toBeInTheDocument();
expect(within(link).getByText("+136 900 ₽")).toBeInTheDocument(); expect(within(link).getByText("+136 900 ₽")).toBeInTheDocument();
expect(within(link).getByText("−3,05 %")).toBeInTheDocument(); expect(within(link).getByText("−3,1 %")).toBeInTheDocument();
expect(within(link).getByText("−4,2 USD")).toBeInTheDocument(); expect(within(link).getByText("−4,2 $")).toBeInTheDocument();
const nullReturnLink = screen.getByRole("link", { name: /Без доходности/ }); const nullReturnLink = screen.getByRole("link", { name: /Без доходности/ });
expect(within(nullReturnLink).getByText("—")).toBeInTheDocument(); expect(within(nullReturnLink).getByText("—")).toBeInTheDocument();
expect(within(link).getByText("частично")).toBeInTheDocument(); expect(within(link).getByText("частично")).toBeInTheDocument();
expect(within(link).getByText("82 500,50 ₽")).toBeInTheDocument(); expect(within(link).getByText("82 500,50 ₽")).toBeInTheDocument();
expect(within(link).getAllByText("20,00 USD")).not.toHaveLength(0); expect(within(link).getAllByText("20,00 $")).not.toHaveLength(0);
expect(within(link).getByText("17 позиций")).toBeInTheDocument(); expect(within(link).getByText("17 позиций")).toBeInTheDocument();
expect(screen.getByRole("img", { expect(screen.getByRole("img", {
name: "Структура в RUB: Акции 50 %; Облигации 30 %; " name: "Структура в RUB: Акции 50,0 %; Облигации 30,0 %; "
+ "Другие активы 0 %; Свободные деньги 20 %", + "Другие активы 0,0 %; Свободные деньги 20,0 %",
})).toBeInTheDocument(); })).toBeInTheDocument();
const stockLegend = within(link).getByText(/Акции 50 %/); const stockLegend = within(link).getByText(/Акции 50,0 %/);
expect(stockLegend).toHaveTextContent("● Акции 50 %"); expect(stockLegend).toHaveTextContent("● Акции 50,0 %");
// eslint-disable-next-line testing-library/no-node-access -- The legend is aria-hidden, so only DOM traversal reaches its container. // eslint-disable-next-line testing-library/no-node-access -- The legend is aria-hidden, so only DOM traversal reaches its container.
expect(stockLegend.parentElement).toHaveAttribute("aria-hidden", "true"); expect(stockLegend.parentElement).toHaveAttribute("aria-hidden", "true");
expect(within(link).queryByText(/Другие активы 0 %/)).not.toBeInTheDocument(); expect(within(link).queryByText(/Другие активы 0,0 %/))
.not.toBeInTheDocument();
expect(link).toHaveTextContent("По данным брокера"); expect(link).toHaveTextContent("По данным брокера");
expect(link).toHaveTextContent("Структура RUB: Акции 100"); expect(link).toHaveTextContent("Структура RUB: Акции 100");
}); });
@@ -15,6 +15,11 @@ import classes from "./BrokerageAccountList.module.css";
const DECIMAL_PART_COUNT = 2; const DECIMAL_PART_COUNT = 2;
const STRUCTURE_CATEGORY_ORDER = ["STOCK", "BOND", "OTHER", "CASH"] as const; const STRUCTURE_CATEGORY_ORDER = ["STOCK", "BOND", "OTHER", "CASH"] as const;
const percentFormatter = new Intl.NumberFormat("ru-RU", {
maximumFractionDigits: 1,
minimumFractionDigits: 1,
});
type AvailableSummary = Extract< type AvailableSummary = Extract<
BrokerageAccountCard["summary"], BrokerageAccountCard["summary"],
{ state: "available" } { state: "available" }
@@ -37,20 +42,15 @@ type StructureCurrency = PortfolioSummary["structure"]["currencies"][number];
function formatPercent(value: null | string) { function formatPercent(value: null | string) {
if (value === null) return "—"; if (value === null) return "—";
const formatted = `${value.replace(".", ",")}\u{A0}%`; const rounded = percentFormatter.format(Math.abs(Number(value)));
if (isZero(value)) let sign = "";
return value.startsWith("-") ? formatted.slice(1) : formatted; if (rounded !== "0,0") sign = value.startsWith("-") ? "−" : "+";
return value.startsWith("-") ? `−${formatted.slice(1)}` : `+${formatted}`; return `${sign}${rounded}\u{A0}%`;
} }
function formatStructurePercent(value: string) { function formatStructurePercent(value: string) {
let trimmed = value; return percentFormatter.format(Number(value));
while (trimmed.includes(".") && trimmed.endsWith("0"))
trimmed = trimmed.slice(0, -1);
if (trimmed.endsWith(".")) trimmed = trimmed.slice(0, -1);
return trimmed.replace(".", ",");
} }
function isZero(value: string) { function isZero(value: string) {
@@ -65,22 +65,18 @@ const ReturnValue: FC<ReturnValueProps> = (props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { item } = props; const { item } = props;
const isNegative = item.percent !== null const displayedPercent = formatPercent(item.percent);
&& item.percent.startsWith("-") const isNegative = displayedPercent.startsWith("−");
&& !isZero(item.percent); const isPositive = displayedPercent.startsWith("+");
const isPositive = item.percent !== null
&& !item.percent.startsWith("-")
&& !isZero(item.percent);
let toneClass = classes.neutral; let toneClass = classes.neutral;
if (isNegative) toneClass = classes.negative; if (isNegative) toneClass = classes.negative;
else if (isPositive) toneClass = classes.positive; else if (isPositive) toneClass = classes.positive;
return ( return (
<Group className={classes.return} gap="xs" wrap="nowrap"> <Group className={classes.return} gap="xs" wrap="wrap">
<Text className={toneClass} fw={700} size="sm"> <Text className={toneClass} fw={700} size="sm">
{formatPercent(item.percent)} {displayedPercent}
</Text> </Text>
<Text className={toneClass} size="sm"> <Text className={toneClass} size="sm">
@@ -200,35 +196,35 @@ const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => {
return ( return (
<Stack className={classes.balance} gap="xs"> <Stack className={classes.balance} gap="xs">
<Group align="flex-start" gap="lg" justify="flex-end" wrap="nowrap"> <Stack className={classes.summary} gap="sm">
<Stack className={classes.summary} gap={4}> {summary.totals.map((total) => {
{summary.totals.map(total => ( const item = summary.portfolio.unrealizedReturnByCurrency.find(
<Text className={classes.total} fw={700} key={total.currency}> returnItem => returnItem.currency === total.currency,
{formatMoney(total, { withRoundedCents: true })} );
</Text>
))}
{!!summary.remainingCurrencyCount && ( return (
<Text c="dimmed" size="sm"> <Stack
{t("accounts.remainingCurrencies", { className={classes.currencySummary}
count: summary.remainingCurrencyCount, gap={2}
})} key={total.currency}
</Text> >
)} <Text className={classes.total} fw={700}>
</Stack> {formatMoney(total, { withRoundedCents: true })}
</Text>
<Stack gap={4}> {item && <ReturnValue item={item} />}
{summary.totals.map((total) => { </Stack>
const item = summary.portfolio.unrealizedReturnByCurrency.find( );
returnItem => returnItem.currency === total.currency, })}
);
return item {!!summary.remainingCurrencyCount && (
? <ReturnValue item={item} key={total.currency} /> <Text c="dimmed" size="sm">
: null; {t("accounts.remainingCurrencies", {
})} count: summary.remainingCurrencyCount,
</Stack> })}
</Group> </Text>
)}
</Stack>
{summary.portfolio.cashBalances.length > 0 && ( {summary.portfolio.cashBalances.length > 0 && (
<Group className={classes.cash} gap="xs" justify="flex-end"> <Group className={classes.cash} gap="xs" justify="flex-end">
@@ -103,7 +103,7 @@ describe("BrokerageEventGroup", () => {
event({ id: "iis", name: "ИИС" }, "200"), event({ id: "iis", name: "ИИС" }, "200"),
]); ]);
expect(screen.getByRole("list", { name: /10 USD.*200 ₽/ })) expect(screen.getByRole("list", { name: /10 \$.*200 ₽/ }))
.toBeInTheDocument(); .toBeInTheDocument();
}); });
@@ -1,4 +1,4 @@
import { describe, expect, it } from "vitest"; import { describe, expect, it, vi } from "vitest";
import { resource } from "@/test/resource"; import { resource } from "@/test/resource";
@@ -76,4 +76,29 @@ describe("instrument source and transport presentation", () => {
loading: false, loading: false,
}); });
}); });
it("carries the retry of an exhausted read and only of that read", () => {
const refetch = vi.fn(() => Promise.resolve());
const state = section({
data: { rows: [] },
error: { code: "TBANK_UNAVAILABLE", status: 503 },
isError: true,
isFetching: false,
refetch,
});
expect(state.readRetry?.exhausted).toBe(true);
state.readRetry?.onRetry();
expect(refetch).toHaveBeenCalledOnce();
});
it("offers no retry for access loss or a healthy read", () => {
const base = { data: undefined, isFetching: false, refetch: vi.fn() };
expect(section({ ...base, error: { code: "NOT_FOUND" }, isError: true })
.readRetry?.exhausted).toBe(false);
expect(section({ ...base, error: null, isError: false })
.readRetry?.exhausted).toBe(false);
});
}); });
@@ -1,10 +1,11 @@
import type { InvestmentResourceMeta } from "@/shared/api"; import { type InvestmentResourceMeta, readRetry } from "@/shared/api";
type SectionState = { type SectionState = {
error: boolean; error: boolean;
hasData: boolean; hasData: boolean;
loading: boolean; loading: boolean;
partial?: boolean; partial?: boolean;
readRetry?: ReturnType<typeof readRetry>;
}; };
function hasSectionData(data: unknown) { function hasSectionData(data: unknown) {
@@ -13,8 +14,11 @@ function hasSectionData(data: unknown) {
function section(query: { function section(query: {
data: unknown; data: unknown;
error?: unknown;
isError: boolean; isError: boolean;
isFetching?: boolean;
meta?: InvestmentResourceMeta; meta?: InvestmentResourceMeta;
refetch?: () => Promise<unknown>;
}): SectionState { }): SectionState {
const isError = query.isError || query.meta?.lastAttempt.state === "failed"; const isError = query.isError || query.meta?.lastAttempt.state === "failed";
const hasData = hasSectionData(query.data); const hasData = hasSectionData(query.data);
@@ -24,6 +28,17 @@ function section(query: {
hasData, hasData,
loading: !hasData && !isError, loading: !hasData && !isError,
partial: query.meta?.completeness === "incomplete", partial: query.meta?.completeness === "incomplete",
// Each section retries only its own GET, so sections recover independently.
readRetry: query.refetch
? readRetry([
{
error: query.error,
isError: query.isError,
isFetching: query.isFetching ?? false,
refetch: query.refetch,
},
])
: undefined,
}; };
} }
@@ -12,6 +12,8 @@ import {
import { LoadingSkeleton } from "@wealthledger/ui"; import { LoadingSkeleton } from "@wealthledger/ui";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { ReadRetry } 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";
@@ -81,6 +83,8 @@ const InstrumentSection: FC<InstrumentSectionProps> = (props) => {
</Alert> </Alert>
)} )}
{!!props.state.readRetry && <ReadRetry {...props.state.readRetry} />}
{sectionContent} {sectionContent}
</Paper> </Paper>
); );
@@ -2,19 +2,18 @@ import type { QueryClient } from "@tanstack/react-query";
import { import {
apiQueryClient, apiQueryClient,
isGetUnder,
type paths, type paths,
} from "@/shared/api"; } from "@/shared/api";
type TbankConnectionStatus type TbankConnectionStatus
= paths["/api/v1/tbank-connection"]["get"]["responses"][200]["content"]["application/json"]; = paths["/api/v1/tbank-connection"]["get"]["responses"][200]["content"]["application/json"];
function isInvestmentPath(path: string) { const investmentGetPredicate = isGetUnder([
return [ "/api/v1/brokerage-accounts",
"/api/v1/brokerage-accounts", "/api/v1/stocks",
"/api/v1/stocks", "/api/v1/bonds",
"/api/v1/bonds", ]);
].some(root => path === root || path.startsWith(`${root}/`));
}
const tbankConnectionQueryOptions = () => const tbankConnectionQueryOptions = () =>
apiQueryClient.queryOptions("get", "/api/v1/tbank-connection"); apiQueryClient.queryOptions("get", "/api/v1/tbank-connection");
@@ -27,15 +26,7 @@ function commitTbankConnectionBoundary(
) { ) {
queryClient.setQueryData(tbankConnectionQueryKey, status); queryClient.setQueryData(tbankConnectionQueryKey, status);
void queryClient.resetQueries({ void queryClient.resetQueries({
predicate: ({ queryKey }) => { predicate: ({ queryKey }) => investmentGetPredicate(queryKey),
const [method, path] = queryKey;
return (
method === "get"
&& typeof path === "string"
&& isInvestmentPath(path)
);
},
}); });
} }
@@ -10,6 +10,9 @@ import { server } from "@/test/server";
import { useScreenSync } from "../index"; import { useScreenSync } from "../index";
const TRANSPORT_ATTEMPTS = 3;
const TRANSPORT_RECOVERY_MS = 3000;
function auth() { function auth() {
configureAuthClient({ configureAuthClient({
accessToken: () => "synthetic", accessToken: () => "synthetic",
@@ -28,11 +31,13 @@ describe("read-only screen synchronization", () => {
gets += 1; gets += 1;
syncModes.push(new URL(request.url).searchParams.get("sync")); syncModes.push(new URL(request.url).searchParams.get("sync"));
return gets === 1 // The transport retries a transient read twice (1 s, 2 s) on its own.
return gets <= TRANSPORT_ATTEMPTS
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 }) ? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(resource([])); : HttpResponse.json(resource([]));
}), }),
); );
vi.useFakeTimers();
const { result } = renderHook( const { result } = renderHook(
() => { () => {
@@ -46,12 +51,26 @@ describe("read-only screen synchronization", () => {
{ wrapper: createQueryWrapper().wrapper }, { wrapper: createQueryWrapper().wrapper },
); );
await waitFor(() => expect(gets).toBe(1)); try {
await act(async () => result.current.sync.retry()); // Exhaust the transport back-off so the query settles in error.
await waitFor(() => expect(result.current.accounts.data).toEqual([])); await vi.waitFor(async () => {
await act(() => vi.advanceTimersByTimeAsync(TRANSPORT_RECOVERY_MS));
expect(result.current.sync.transportError).toBe(true);
});
expect(gets).toBe(TRANSPORT_ATTEMPTS);
expect(gets).toBe(2); await act(async () => result.current.sync.retry());
expect(syncModes).toEqual([null, null]); await vi.waitFor(async () => {
await act(() => vi.advanceTimersByTimeAsync(0));
expect(result.current.accounts.data).toEqual([]);
});
}
finally {
vi.useRealTimers();
}
expect(gets).toBe(TRANSPORT_ATTEMPTS + 1);
expect(syncModes).toEqual(Array.from({ length: gets }, () => null));
}); });
it("refreshes the currently open resources together", async () => { it("refreshes the currently open resources together", async () => {
@@ -4,16 +4,16 @@ import {
TbankConnectionError, TbankConnectionError,
TbankConnectionLoading, TbankConnectionLoading,
} from "./TbankConnectionSection.view"; } from "./TbankConnectionSection.view";
import { useTbankConnectionViewModel } from "./TbankConnectionSection.vm"; import { useTbankConnectionSectionVm } from "./TbankConnectionSection.vm";
import { TbankConnectionSectionLoaded } from "./TbankConnectionSectionLoaded"; import { TbankConnectionSectionLoaded } from "./TbankConnectionSectionLoaded";
const TbankConnectionSection: FC = () => { const TbankConnectionSection: FC = () => {
const viewModel = useTbankConnectionViewModel(); const vm = useTbankConnectionSectionVm();
if (viewModel.state === "loading") return <TbankConnectionLoading />; if (vm.state === "loading") return <TbankConnectionLoading />;
return viewModel.state === "error" return vm.state === "error"
? <TbankConnectionError retry={viewModel.retry} /> ? <TbankConnectionError retry={vm.retry} />
: <TbankConnectionSectionLoaded {...viewModel} />; : <TbankConnectionSectionLoaded {...vm} />;
}; };
export { TbankConnectionSection }; export { TbankConnectionSection };
@@ -2,7 +2,7 @@ import { useAuthenticatedQuery } from "@/shared/api";
import { tbankConnectionQueryOptions } from "../../model/connection-boundary"; import { tbankConnectionQueryOptions } from "../../model/connection-boundary";
function useTbankConnectionViewModel() { function useTbankConnectionSectionVm() {
const status = useAuthenticatedQuery({ const status = useAuthenticatedQuery({
...tbankConnectionQueryOptions(), ...tbankConnectionQueryOptions(),
}); });
@@ -22,4 +22,4 @@ function useTbankConnectionViewModel() {
}; };
} }
export { useTbankConnectionViewModel }; export { useTbankConnectionSectionVm };
@@ -26,7 +26,7 @@ import { resource } from "@/test/resource";
import { server } from "@/test/server"; import { server } from "@/test/server";
import { AccountEventsPage } from "./AccountEventsPage"; import { AccountEventsPage } from "./AccountEventsPage";
import { useAccountEventsPageViewModel } from "./AccountEventsPage.vm"; import { useAccountEventsPageVm } from "./AccountEventsPage.vm";
const Navigation: FC = () => { const Navigation: FC = () => {
const location = useLocation(); const location = useLocation();
@@ -100,7 +100,7 @@ describe("Upcoming event date filters", () => {
); );
const queryClient = createTestQueryClient(); const queryClient = createTestQueryClient();
const { result } = renderHook(() => useAccountEventsPageViewModel(), { const { result } = renderHook(() => useAccountEventsPageVm(), {
wrapper: ({ children }) => ( wrapper: ({ children }) => (
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<MemoryRouter initialEntries={["?from=2099-02-01"]}> <MemoryRouter initialEntries={["?from=2099-02-01"]}>
@@ -146,7 +146,7 @@ describe("Upcoming event date filters", () => {
const queryClient = createTestQueryClient(); const queryClient = createTestQueryClient();
const { result } = renderHook( const { result } = renderHook(
() => useAccountEventsPageViewModel(), () => useAccountEventsPageVm(),
{ {
wrapper: ({ children }) => ( wrapper: ({ children }) => (
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
@@ -176,7 +176,11 @@ describe("Upcoming event date filters", () => {
({ request }) => { ({ request }) => {
searches.push(new URL(request.url).search); searches.push(new URL(request.url).search);
return HttpResponse.json(resource({ events: [] })); return HttpResponse.json(resource({
calculatedAt: "2026-08-14T00:00:00Z",
events: [],
window: { from: "2026-08-14", to: "2026-09-13" },
}));
}, },
), ),
); );
@@ -223,7 +227,11 @@ describe("Upcoming event date filters", () => {
"*/api/v1/brokerage-accounts/:accountId/events", "*/api/v1/brokerage-accounts/:accountId/events",
({ request }) => ({ request }) =>
new URL(request.url).searchParams.get("from") === defaultFrom new URL(request.url).searchParams.get("from") === defaultFrom
? HttpResponse.json(resource({ events: [] })) ? HttpResponse.json(resource({
calculatedAt: "2026-08-14T00:00:00Z",
events: [],
window: { from: "2026-08-14", to: "2026-09-13" },
}))
: HttpResponse.json({ code: "VALIDATION_ERROR" }, { status: 400 }), : HttpResponse.json({ code: "VALIDATION_ERROR" }, { status: 400 }),
), ),
); );
@@ -256,6 +264,7 @@ describe("Upcoming event date filters", () => {
calculatedAt: "2099-01-01T00:00:00Z", calculatedAt: "2099-01-01T00:00:00Z",
events: [], events: [],
incomeTotalsByCurrency: [], incomeTotalsByCurrency: [],
window: { from: "2099-01-01", to: "2099-01-31" },
}), }),
); );
}, },
@@ -264,6 +273,7 @@ describe("Upcoming event date filters", () => {
renderEvents(accountId, ["?from=2026-02-01&to=2026-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.2026 – 28.02.2026"); expect(from).toHaveTextContent("01.02.2026 – 28.02.2026");
expect(screen.getByText(/Прогноз от .* на 01\.01\.2099 – 31\.01\.2099/)).toBeVisible();
expect(screen.getByRole("button", { name: "Применить" })).toBeDisabled(); expect(screen.getByRole("button", { name: "Применить" })).toBeDisabled();
expect(searches).toEqual(["?from=2026-02-01&to=2026-02-28"]); expect(searches).toEqual(["?from=2026-02-01&to=2026-02-28"]);
@@ -320,7 +330,7 @@ describe("Upcoming event date filters", () => {
expect(screen.getByLabelText("URL")).toBeEmptyDOMElement(); expect(screen.getByLabelText("URL")).toBeEmptyDOMElement();
expect(screen.getByRole("button", { name: "Применить" })).toBeDisabled(); expect(screen.getByRole("button", { name: "Применить" })).toBeDisabled();
expect( expect(
screen.getByText("За выбранный период событий не найдено"), screen.getByText("На выбранный период предстоящих событий не найдено"),
).toBeVisible(); ).toBeVisible();
}, },
); );
@@ -361,7 +371,7 @@ it("retains the previous complete forecast when its source refresh fails", async
); );
const queryClient = createTestQueryClient(); const queryClient = createTestQueryClient();
const { result } = renderHook(() => useAccountEventsPageViewModel(), { const { result } = renderHook(() => useAccountEventsPageVm(), {
wrapper: ({ children }) => ( wrapper: ({ children }) => (
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<MemoryRouter initialEntries={["/accounts/all/events"]}> <MemoryRouter initialEntries={["/accounts/all/events"]}>
@@ -0,0 +1,167 @@
import { MantineProvider } from "@mantine/core";
import { QueryClientProvider } from "@tanstack/react-query";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { http, HttpResponse } from "msw";
import { MemoryRouter, Route, Routes } from "react-router";
import { describe, expect, it, vi } from "vitest";
import { configureAuthClient } from "@/shared/api";
import { createTestQueryClient } from "@/test/query";
import { resource } from "@/test/resource";
import { server } from "@/test/server";
import { AccountEventsPage } from "./AccountEventsPage";
// Automatic read retries wait 1s + 2s before the failure is final.
const RETRIES_EXHAUSTED_MS = 6000;
const TEST_MS = 10_000;
const snapshot = resource({
accountId: "account-1",
calculatedAt: "2026-08-14T00:00:00Z",
events: [
{
date: "2026-10-01",
dateKind: "event",
displayName: "Synthetic coupon",
figi: null,
instrumentUid: null,
isin: null,
logoName: null,
projectedAmount: { currency: "RUB", value: "123.45" },
ticker: "SYN",
type: "coupon",
},
],
incomeTotalsByCurrency: [{ currency: "RUB", value: "123.45" }],
window: { from: "2026-08-14", to: "2026-09-13" },
});
function renderEvents() {
configureAuthClient({
accessToken: () => "token",
clear: vi.fn(),
refresh: () => Promise.resolve(true),
});
const queryClient = createTestQueryClient();
render(
<QueryClientProvider client={queryClient}>
<MantineProvider env="test">
<MemoryRouter initialEntries={["/accounts/account-1/events"]}>
<Routes>
<Route
element={<AccountEventsPage />}
path="/accounts/:accountId/events"
/>
</Routes>
</MemoryRouter>
</MantineProvider>
</QueryClientProvider>,
);
return { queryClient };
}
describe("AccountEventsPage read retry", () => {
it(
"offers retry after an initial failure and recovers in place",
{ timeout: TEST_MS },
async () => {
let isFailing = true;
let requests = 0;
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/events", () => {
requests += 1;
return isFailing
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(snapshot);
}),
);
renderEvents();
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
expect(requests).toBe(3);
isFailing = false;
fireEvent.click(retry);
expect(await screen.findByText("Купон · Synthetic coupon")).toBeInTheDocument();
expect(requests).toBe(4);
},
);
it(
"keeps cached events, warns and retries the same GET",
{ timeout: TEST_MS },
async () => {
let isFailing = false;
let requests = 0;
let imports = 0;
server.use(
http.post("*/api/v1/tbank-sync", () => {
imports += 1;
return HttpResponse.json({}, { status: 202 });
}),
http.get("*/api/v1/brokerage-accounts/:accountId/events", () => {
requests += 1;
return isFailing
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(snapshot);
}),
);
const { queryClient } = renderEvents();
await screen.findByText("Купон · Synthetic coupon");
expect(screen.getByText(/Прогноз от .* на 14\.08\.2026 – 13\.09\.2026/)).toBeVisible();
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
isFailing = true;
void queryClient.invalidateQueries({
queryKey: ["get", "/api/v1/brokerage-accounts/{accountId}/events"],
});
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
expect(screen.getByText("Не удалось обновить данные")).toBeInTheDocument();
expect(screen.getByText("Купон · Synthetic coupon")).toBeInTheDocument();
expect(screen.getByText(/Прогноз от .* на 14\.08\.2026 – 13\.09\.2026/)).toBeVisible();
expect(requests).toBe(4);
isFailing = false;
fireEvent.click(retry);
await waitFor(() =>
expect(screen.queryByText("Не удалось обновить данные"))
.not.toBeInTheDocument());
expect(requests).toBe(5);
expect(imports).toBe(0);
},
);
it("does not offer a plain retry when the account is gone", async () => {
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/events", () =>
HttpResponse.json({ code: "NOT_FOUND" }, { status: 404 })),
);
renderEvents();
await waitFor(() =>
expect(screen.queryByRole("heading", { name: "Загрузка" }))
.not.toBeInTheDocument());
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
});
});
@@ -47,6 +47,7 @@ describe("AccountEventsPage", () => {
accountId: "account", accountId: "account",
calculatedAt: "2026-08-14T00:00:00Z", calculatedAt: "2026-08-14T00:00:00Z",
events: [], events: [],
window: { from: "2026-08-14", to: "2026-09-13" },
}, },
isError: false, isError: false,
isLoading: false, isLoading: false,
@@ -136,6 +137,7 @@ describe("AccountEventsPage", () => {
type: "offer", type: "offer",
}, },
], ],
window: { from: "2026-08-14", to: "2026-09-13" },
}, },
isError: false, isError: false,
isLoading: false, isLoading: false,
@@ -169,15 +171,18 @@ describe("AccountEventsPage", () => {
expect(screen.getAllByText("O")).toHaveLength(2); expect(screen.getAllByText("O")).toHaveLength(2);
}); });
it("renders empty and quiet error states", async () => { it("renders empty and error states with retry", async () => {
const { rerender } = renderPage(); const { rerender } = renderPage();
expect( expect(
screen.getByText("За выбранный период событий не найдено"), screen.getByText("На выбранный период предстоящих событий не найдено"),
).toBeInTheDocument(); ).toBeInTheDocument();
query.mockReturnValue({ query.mockReturnValue({
data: undefined, data: undefined,
error: { code: "TBANK_UNAVAILABLE", status: 503 },
isError: true, isError: true,
isFetching: false,
isLoading: false, isLoading: false,
refetch: vi.fn(),
} as never); } as never);
rerender( rerender(
<MantineProvider> <MantineProvider>
@@ -187,7 +192,7 @@ describe("AccountEventsPage", () => {
</MantineProvider>, </MantineProvider>,
); );
expect(await screen.findByRole("button", { name: "Сбросить" })).toBeVisible(); expect(await screen.findByRole("button", { name: "Сбросить" })).toBeVisible();
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument(); expect(screen.getByRole("button", { name: "Повторить" })).toBeVisible();
}); });
it("shows a structural busy state before events are available", () => { it("shows a structural busy state before events are available", () => {
@@ -234,7 +239,7 @@ describe("AccountEventsPage", () => {
"true", "true",
); );
expect( expect(
screen.queryByText("За выбранный период событий не найдено"), screen.queryByText("На выбранный период предстоящих событий не найдено"),
).not.toBeInTheDocument(); ).not.toBeInTheDocument();
}); });
@@ -273,6 +278,7 @@ describe("AccountEventsPage", () => {
accountId: "all", accountId: "all",
calculatedAt: "2026-08-14T00:00:00Z", calculatedAt: "2026-08-14T00:00:00Z",
events: [...events], events: [...events],
window: { from: "2026-08-14", to: "2026-09-13" },
}, },
isError: false, isError: false,
isLoading: false, isLoading: false,
@@ -1,17 +1,17 @@
import type { FC } from "react"; import type { FC } from "react";
import { useAccountEventsPageViewModel } from "./AccountEventsPage.vm"; import { useAccountEventsPageVm } from "./AccountEventsPage.vm";
import { AccountEventsPageError } from "./components/AccountEventsPageError.view"; import { AccountEventsPageError } from "./components/AccountEventsPageError.view";
import { AccountEventsPageLoaded } from "./components/AccountEventsPageLoaded.view"; import { AccountEventsPageLoaded } from "./components/AccountEventsPageLoaded.view";
import { AccountEventsPageLoading } from "./components/AccountEventsPageLoading.view"; import { AccountEventsPageLoading } from "./components/AccountEventsPageLoading.view";
const AccountEventsPage: FC = () => { const AccountEventsPage: FC = () => {
const viewModel = useAccountEventsPageViewModel(); const vm = useAccountEventsPageVm();
if (viewModel.state === "loading") return <AccountEventsPageLoading />; if (vm.state === "loading") return <AccountEventsPageLoading />;
return viewModel.state === "error" return vm.state === "error"
? <AccountEventsPageError {...viewModel} /> ? <AccountEventsPageError {...vm} />
: <AccountEventsPageLoaded {...viewModel} />; : <AccountEventsPageLoaded {...vm} />;
}; };
export { AccountEventsPage }; export { AccountEventsPage };
@@ -1,13 +1,12 @@
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 { type InvestmentResourceMeta, readRetry } from "@/shared/api";
import { import {
defaultPeriod, defaultPeriod,
isValidPeriod, isValidPeriod,
@@ -19,6 +18,7 @@ import {
type AccountEventsPageViewModel type AccountEventsPageViewModel
= | { = | {
allAccounts: boolean; allAccounts: boolean;
calculatedAt: string;
canApply: boolean; canApply: boolean;
draftPeriod: [null | string, null | string]; draftPeriod: [null | string, null | string];
events: BrokerageEvent[]; events: BrokerageEvent[];
@@ -28,14 +28,20 @@ type AccountEventsPageViewModel
onPeriodPopoverOpen: () => void; onPeriodPopoverOpen: () => void;
onReset: () => void; onReset: () => void;
partial?: boolean; partial?: boolean;
readRetry: ReturnType<typeof readRetry>;
source?: InvestmentResourceMeta; source?: InvestmentResourceMeta;
state: "loaded"; state: "loaded";
totalVisible: boolean; totalVisible: boolean;
window: { from: string; to: string };
}
| {
onReset: () => void;
readRetry: ReturnType<typeof readRetry>;
state: "error";
} }
| { onReset: () => void; state: "error" }
| { state: "loading" }; | { state: "loading" };
function useAccountEventsPageViewModel(): AccountEventsPageViewModel { function useAccountEventsPageVm(): AccountEventsPageViewModel {
const { accountId = "" } = useParams(); const { accountId = "" } = useParams();
const { const {
@@ -83,6 +89,8 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
isFetching: events.isFetching, isFetching: events.isFetching,
}); });
const retry = readRetry([events]);
if (availability === "loading" && events.isLoading) if (availability === "loading" && events.isLoading)
return { state: "loading" }; return { state: "loading" };
@@ -94,15 +102,17 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
if ((events.isError || events.meta?.lastAttempt.state === "failed") && !events.data) if ((events.isError || events.meta?.lastAttempt.state === "failed") && !events.data)
return { return {
onReset, onReset,
readRetry: retry,
state: "error", state: "error",
}; };
if (!events.data) if (!events.data)
return availability === "unavailable" return availability === "unavailable"
? { onReset, state: "error" } ? { onReset, readRetry: retry, state: "error" }
: { state: "loading" }; : { state: "loading" };
return { return {
allAccounts: accountId === "all", allAccounts: accountId === "all",
calculatedAt: events.data.calculatedAt,
canApply: canApply:
(draftFrom !== appliedFrom || draftTo !== appliedTo) (draftFrom !== appliedFrom || draftTo !== appliedTo)
&& isValidPeriod(draftFrom, draftTo), && isValidPeriod(draftFrom, draftTo),
@@ -122,10 +132,12 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
onPeriodPopoverOpen: () => setMinDate(moscowDate(new Date())), onPeriodPopoverOpen: () => setMinDate(moscowDate(new Date())),
onReset, onReset,
partial: events.meta?.completeness === "incomplete", partial: events.meta?.completeness === "incomplete",
readRetry: retry,
source: events.meta, source: events.meta,
state: "loaded", state: "loaded",
totalVisible: events.meta?.completeness === "complete", totalVisible: events.meta?.completeness === "complete",
window: events.data.window,
}; };
} }
export { type AccountEventsPageViewModel, useAccountEventsPageViewModel }; export { type AccountEventsPageViewModel, useAccountEventsPageVm };
@@ -4,7 +4,12 @@ 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 }; import { ReadRetryButton, type ReadRetryProps } from "@/shared/ui";
type AccountEventsPageErrorProps = {
onReset: () => void;
readRetry: ReadRetryProps;
};
const AccountEventsPageError: FC<AccountEventsPageErrorProps> = (props) => { const AccountEventsPageError: FC<AccountEventsPageErrorProps> = (props) => {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -13,6 +18,13 @@ const AccountEventsPageError: FC<AccountEventsPageErrorProps> = (props) => {
<StateView <StateView
action={( action={(
<Group> <Group>
{props.readRetry.exhausted && (
<ReadRetryButton
onRetry={props.readRetry.onRetry}
retrying={props.readRetry.retrying}
/>
)}
<Button onClick={props.onReset} variant="default"> <Button onClick={props.onReset} variant="default">
{t("ledger.reset")} {t("ledger.reset")}
</Button> </Button>
@@ -17,8 +17,8 @@ import {
brokerageEventGroupKey, brokerageEventGroupKey,
brokerageEventKey, brokerageEventKey,
} from "@/entities/brokerage-event"; } from "@/entities/brokerage-event";
import { groupItems } from "@/shared/lib"; import { formatDate, formatSnapshotTime, groupItems } from "@/shared/lib";
import { SourceSyncStatus } from "@/shared/ui"; import { ReadRetry, SourceSyncStatus } from "@/shared/ui";
import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm"; import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm";
@@ -83,10 +83,20 @@ const AccountEventsPageLoaded: FC<AccountEventsPageLoadedProps> = (props) => {
stale={props.source?.freshness === "stale"} stale={props.source?.freshness === "stale"}
/> />
<ReadRetry {...props.readRetry} />
{!!props.partial && <Alert role="status">{t("investment.partial")}</Alert>} {!!props.partial && <Alert role="status">{t("investment.partial")}</Alert>}
<Text c="dimmed">{t("events.hint")}</Text> <Text c="dimmed">{t("events.hint")}</Text>
<Text c="dimmed" size="sm">
{t("events.forecastWindow", {
date: formatSnapshotTime(props.calculatedAt),
from: formatDate(props.window.from),
to: formatDate(props.window.to),
})}
</Text>
<Group align="end"> <Group align="end">
<DatePickerInput <DatePickerInput
allowSingleDateInRange allowSingleDateInRange
@@ -26,6 +26,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
import type { IncomeAnalytics } from "@/entities/income"; import type { IncomeAnalytics } from "@/entities/income";
import { configureAuthClient } from "@/shared/api"; import { configureAuthClient } from "@/shared/api";
import { formatSnapshotTime } 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";
@@ -33,10 +34,14 @@ import { server } from "@/test/server";
import { toIncomeDisplayModel } from "../../model/display"; import { toIncomeDisplayModel } from "../../model/display";
import { AccountIncomePage } from "./AccountIncomePage"; import { AccountIncomePage } from "./AccountIncomePage";
import { import {
useAccountIncomePageViewModel, useAccountIncomePageVm,
} from "./AccountIncomePage.vm"; } from "./AccountIncomePage.vm";
import { IncomePayments } from "./components/IncomePayments.view"; import { IncomePayments } from "./components/IncomePayments.view";
// Automatic read retries wait 1s + 2s before the failure is final.
const RETRIES_EXHAUSTED_MS = 6000;
const TEST_MS = 10_000;
const analytics const analytics
= { = {
accountId: "account-1", accountId: "account-1",
@@ -166,7 +171,7 @@ describe("AccountIncomePage", () => {
); );
const queryClient = createTestQueryClient(); const queryClient = createTestQueryClient();
const { result } = renderHook(() => useAccountIncomePageViewModel(), { const { result } = renderHook(() => useAccountIncomePageVm(), {
wrapper: ({ children }) => ( wrapper: ({ children }) => (
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<MemoryRouter initialEntries={["?from=2024-02-29&to=2024-03-01"]}> <MemoryRouter initialEntries={["?from=2024-02-29&to=2024-03-01"]}>
@@ -403,21 +408,124 @@ describe("AccountIncomePage", () => {
expect(screen.queryByText(/Сравнение с/)).not.toBeInTheDocument(); expect(screen.queryByText(/Сравнение с/)).not.toBeInTheDocument();
}); });
it("shows a quiet realized error", async () => { it.each([
["full", analytics],
["empty", { ...analytics, buckets: [], entries: [], instruments: [], totalsByCurrency: [] }],
])("shows the server source time and last attempt for a %s result", async (_name, data) => {
server.use( server.use(
http.get( http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
"*/api/v1/brokerage-accounts/account-1/income-analytics", HttpResponse.json(
() => new HttpResponse(null, { status: 503 }), resource(data, {
freshness: "stale",
lastAttempt: {
finishedAt: "2026-08-27T01:00:00Z",
problems: [],
startedAt: "2026-08-27T00:59:00Z",
state: "failed",
},
lastSuccessfulAt: "2026-08-26T12:00:00Z",
}),
),
), ),
); );
renderPage(); renderPage();
expect( expect(await screen.findByText(/^Данные на /)).toHaveTextContent(
await screen.findByText("Не удалось рассчитать пассивный доход", undefined, { formatSnapshotTime("2026-08-26T12:00:00Z"),
timeout: 4000, );
}), expect(screen.getByText("Обновление не удалось")).toBeInTheDocument();
).toBeInTheDocument(); expect(screen.getByText("Данные требуют обновления")).toBeInTheDocument();
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument(); expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
}); });
it(
"offers retry after an initial failure and recovers in place",
{ timeout: TEST_MS },
async () => {
let isFailing = true;
let requests = 0;
server.use(
http.get(
"*/api/v1/brokerage-accounts/account-1/income-analytics",
() => {
requests += 1;
return isFailing
? new HttpResponse(null, { status: 503 })
: HttpResponse.json(resource(analytics));
},
),
);
renderPage();
expect(
await screen.findByText(
"Не удалось рассчитать пассивный доход",
undefined,
{ timeout: RETRIES_EXHAUSTED_MS },
),
).toBeInTheDocument();
const retry = screen.getByRole("button", { name: "Повторить" });
expect(requests).toBe(3);
isFailing = false;
fireEvent.click(retry);
expect(
await screen.findByRole("region", { name: "Выплаты" }),
).toBeInTheDocument();
expect(requests).toBe(4);
},
);
it(
"keeps cached income, warns and retries the same GET",
{ timeout: TEST_MS },
async () => {
let isFailing = false;
let requests = 0;
server.use(
http.get(
"*/api/v1/brokerage-accounts/account-1/income-analytics",
() => {
requests += 1;
return isFailing
? HttpResponse.json(
{ code: "TBANK_UNAVAILABLE" },
{ status: 503 },
)
: HttpResponse.json(resource(analytics));
},
),
);
const { queryClient } = renderPage();
await screen.findByRole("region", { name: "Выплаты" });
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
isFailing = true;
void queryClient.invalidateQueries({
queryKey: ["get", "/api/v1/brokerage-accounts/{accountId}/income-analytics"],
});
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
expect(screen.getByText("Не удалось обновить данные")).toBeInTheDocument();
expect(screen.getByRole("region", { name: "Выплаты" })).toBeInTheDocument();
expect(requests).toBe(4);
isFailing = false;
fireEvent.click(retry);
await waitFor(() =>
expect(screen.queryByText("Не удалось обновить данные"))
.not.toBeInTheDocument());
expect(requests).toBe(5);
},
);
}); });
const LocationProbe: FC = () => { const LocationProbe: FC = () => {
@@ -677,7 +785,7 @@ describe("income period and snapshot boundary", () => {
expect(screen.queryByText("USD")).not.toBeInTheDocument(); expect(screen.queryByText("USD")).not.toBeInTheDocument();
const cards = screen.getAllByRole("listitem"); const cards = screen.getAllByRole("listitem");
expect(cards).toHaveLength(3); expect(cards).toHaveLength(3);
expect(cards[0]).toHaveTextContent("+10 USD"); expect(cards[0]).toHaveTextContent("+10 $");
expect(cards[1]).toHaveTextContent("−2 ₽"); expect(cards[1]).toHaveTextContent("−2 ₽");
expect(cards[2]).toHaveTextContent("−3 ₽"); expect(cards[2]).toHaveTextContent("−3 ₽");
expect(screen.queryByText(/Итого:|Выплат:/)).not.toBeInTheDocument(); expect(screen.queryByText(/Итого:|Выплат:/)).not.toBeInTheDocument();
@@ -709,11 +817,11 @@ describe("income period and snapshot boundary", () => {
); );
renderPage(undefined, "all"); renderPage(undefined, "all");
expect(await screen.findByText("Купон · BOND")).toBeInTheDocument(); expect(await screen.findByText("Выплата купонов BOND")).toBeInTheDocument();
expect(screen.getByText("+30 ₽")).toBeInTheDocument(); expect(screen.getByText("+30 ₽")).toBeInTheDocument();
const accounts = within(screen.getByRole("list", { const accounts = within(screen.getByRole("list", {
name: /Купон · BOND, Исполнено/, name: /Выплата купонов BOND, Исполнено/,
})); }));
expect(accounts.getByText("Брокерский")).toBeInTheDocument(); expect(accounts.getByText("Брокерский")).toBeInTheDocument();
@@ -748,7 +856,7 @@ describe("income period and snapshot boundary", () => {
expect(await screen.findByText("+30 ₽")).toBeInTheDocument(); expect(await screen.findByText("+30 ₽")).toBeInTheDocument();
const accounts = within(screen.getByRole("list", { const accounts = within(screen.getByRole("list", {
name: /Купон · BOND/, name: /Выплата купонов BOND/,
})); }));
expect(accounts.getAllByRole("listitem")).toHaveLength(2); expect(accounts.getAllByRole("listitem")).toHaveLength(2);
@@ -781,7 +889,7 @@ describe("income period and snapshot boundary", () => {
); );
const view = renderPage(undefined, "all"); const view = renderPage(undefined, "all");
await screen.findByText("Купон · BOND"); await screen.findByText("Выплата купонов BOND");
expect(screen.queryByText("+30 ₽")).not.toBeInTheDocument(); expect(screen.queryByText("+30 ₽")).not.toBeInTheDocument();
view.unmount(); view.unmount();
@@ -1,17 +1,17 @@
import type { FC } from "react"; import type { FC } from "react";
import { useAccountIncomePageViewModel } from "./AccountIncomePage.vm"; import { useAccountIncomePageVm } from "./AccountIncomePage.vm";
import { AccountIncomePageError } from "./components/AccountIncomePageError.view"; import { AccountIncomePageError } from "./components/AccountIncomePageError.view";
import { AccountIncomePageLoaded } from "./components/AccountIncomePageLoaded.view"; import { AccountIncomePageLoaded } from "./components/AccountIncomePageLoaded.view";
import { AccountIncomePageLoading } from "./components/AccountIncomePageLoading.view"; import { AccountIncomePageLoading } from "./components/AccountIncomePageLoading.view";
const AccountIncomePage: FC = () => { const AccountIncomePage: FC = () => {
const viewModel = useAccountIncomePageViewModel(); const vm = useAccountIncomePageVm();
if (viewModel.state === "loading") return <AccountIncomePageLoading />; if (vm.state === "loading") return <AccountIncomePageLoading />;
return viewModel.state === "error" return vm.state === "error"
? <AccountIncomePageError {...viewModel} /> ? <AccountIncomePageError {...vm} />
: <AccountIncomePageLoaded {...viewModel} />; : <AccountIncomePageLoaded {...vm} />;
}; };
export { AccountIncomePage }; export { AccountIncomePage };
@@ -5,6 +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 { type InvestmentResourceMeta, readRetry } from "@/shared/api";
import { isValidPeriod, moscowDate, useInitialAvailability } from "@/shared/lib"; import { isValidPeriod, moscowDate, useInitialAvailability } from "@/shared/lib";
import { import {
@@ -30,16 +31,19 @@ type AccountIncomePageViewModel
onReset: () => void; onReset: () => void;
onSubmit: (values: IncomeForm) => void; onSubmit: (values: IncomeForm) => void;
partial?: boolean; partial?: boolean;
readRetry: ReturnType<typeof readRetry>;
source?: InvestmentResourceMeta;
state: "loaded"; state: "loaded";
totalVisible: boolean; totalVisible: boolean;
} }
| { | {
period: IncomePeriod; period: IncomePeriod;
readRetry: ReturnType<typeof readRetry>;
state: "error"; state: "error";
} }
| { state: "loading" }; | { state: "loading" };
const useAccountIncomePageViewModel = (): AccountIncomePageViewModel => { const useAccountIncomePageVm = (): AccountIncomePageViewModel => {
const { accountId = "" } = useParams(); const { accountId = "" } = useParams();
const [searchParameters, setSearchParameters] = useSearchParams(); const [searchParameters, setSearchParameters] = useSearchParams();
@@ -84,12 +88,14 @@ const useAccountIncomePageViewModel = (): AccountIncomePageViewModel => {
isFetching: analytics.isFetching, isFetching: analytics.isFetching,
}); });
const retry = readRetry([analytics]);
if (availability === "loading" && analytics.isLoading) if (availability === "loading" && analytics.isLoading)
return { state: "loading" }; return { state: "loading" };
if (!analytics.data) if (!analytics.data)
return availability === "unavailable" return availability === "unavailable"
? { period, state: "error" } ? { period, readRetry: retry, state: "error" }
: { state: "loading" }; : { state: "loading" };
const display = toIncomeDisplayModel(analytics.data); const display = toIncomeDisplayModel(analytics.data);
@@ -116,6 +122,8 @@ const useAccountIncomePageViewModel = (): AccountIncomePageViewModel => {
onReset, onReset,
onSubmit, onSubmit,
partial: analytics.meta?.completeness === "incomplete", partial: analytics.meta?.completeness === "incomplete",
readRetry: retry,
source: analytics.meta,
state: "loaded", state: "loaded",
totalVisible: analytics.meta?.completeness === "complete", totalVisible: analytics.meta?.completeness === "complete",
}; };
@@ -138,5 +146,5 @@ function isValidIncomePeriod(period: IncomePeriod): boolean {
export { export {
type AccountIncomePageViewModel, type AccountIncomePageViewModel,
useAccountIncomePageViewModel, useAccountIncomePageVm,
}; };
@@ -3,15 +3,27 @@ import type { FC } from "react";
import { StateView } from "@wealthledger/ui"; import { StateView } from "@wealthledger/ui";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { ReadRetryButton } from "@/shared/ui";
import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm"; import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
type ErrorProps = Extract<AccountIncomePageViewModel, { state: "error" }>; type ErrorProps = Extract<AccountIncomePageViewModel, { state: "error" }>;
const AccountIncomePageError: FC<ErrorProps> = () => { const AccountIncomePageError: FC<ErrorProps> = (props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const retry = props.readRetry.exhausted
? (
<ReadRetryButton
onRetry={props.readRetry.onRetry}
retrying={props.readRetry.retrying}
/>
)
: undefined;
return ( return (
<StateView <StateView
action={retry}
error error
text={t("income.errorText")} text={t("income.errorText")}
title={t("income.errorTitle")} title={t("income.errorTitle")}
@@ -9,6 +9,8 @@ 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 { ReadRetry, 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";
@@ -49,6 +51,14 @@ const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
/> />
</FormProvider> </FormProvider>
<SourceSyncStatus
lastAttempt={props.source?.lastAttempt}
lastSuccessfulAt={props.source?.lastSuccessfulAt}
stale={props.source?.freshness === "stale"}
/>
<ReadRetry {...props.readRetry} />
<AccountIncomePageLoadedSummary {...props} /> <AccountIncomePageLoadedSummary {...props} />
<Alert color="blue">{t("income.taxBoundary")}</Alert> <Alert color="blue">{t("income.taxBoundary")}</Alert>
@@ -90,9 +90,13 @@ function configureTestAuth() {
}); });
} }
function renderPage(search = "", accountId = "account-1") { function renderPage(
search = "",
accountId = "account-1",
queryClient = createTestQueryClient(),
) {
return render( return render(
<QueryClientProvider client={createTestQueryClient()}> <QueryClientProvider client={queryClient}>
<MantineProvider> <MantineProvider>
<MemoryRouter <MemoryRouter
initialEntries={[`/accounts/${accountId}/operations${search}`]} initialEntries={[`/accounts/${accountId}/operations${search}`]}
@@ -109,6 +113,18 @@ function renderPage(search = "", accountId = "account-1") {
); );
} }
// Automatic read retries wait 1s + 2s before the failure is final.
const RETRIES_EXHAUSTED_MS = 6000;
const TEST_MS = 10_000;
const loadedOperations = {
accountId: "account-1",
hasNext: false,
items: [operation],
nextCursor: null,
observedAt: "2026-08-14T00:00:00Z",
};
describe("LedgerEntryRow", () => { describe("LedgerEntryRow", () => {
it("marks cashless operations without rendering operation details", () => { it("marks cashless operations without rendering operation details", () => {
render( render(
@@ -424,7 +440,7 @@ describe("AccountOperationsPage", () => {
renderPage(); renderPage();
expect( expect(
await screen.findByRole("heading", { name: "Журнал операций" }), await screen.findByRole("heading", { name: "История операций" }),
).toBeInTheDocument(); ).toBeInTheDocument();
expect( expect(
screen.queryByRole("link", { name: "К счету" }), screen.queryByRole("link", { name: "К счету" }),
@@ -466,7 +482,7 @@ describe("AccountOperationsPage", () => {
renderPage(); renderPage();
expect( expect(
await screen.findByRole("heading", { name: "Журнал операций" }), await screen.findByRole("heading", { name: "История операций" }),
).toBeInTheDocument(); ).toBeInTheDocument();
await waitFor(() => expect(searches.length).toBeGreaterThan(0)); await waitFor(() => expect(searches.length).toBeGreaterThan(0));
const countBefore = searches.length; const countBefore = searches.length;
@@ -505,7 +521,7 @@ describe("AccountOperationsPage", () => {
renderPage(); renderPage();
expect( expect(
await screen.findByRole("heading", { name: "Журнал операций" }), await screen.findByRole("heading", { name: "История операций" }),
).toBeInTheDocument(); ).toBeInTheDocument();
fireEvent.click(screen.getByRole("combobox", { name: "Категории" })); fireEvent.click(screen.getByRole("combobox", { name: "Категории" }));
fireEvent.click(await screen.findByText("Налог")); fireEvent.click(await screen.findByText("Налог"));
@@ -545,20 +561,87 @@ describe("AccountOperationsPage", () => {
).toBeInTheDocument(); ).toBeInTheDocument();
}); });
it("renders an error state", async () => { it(
configureTestAuth(); "renders an error state with retry that recovers in place",
server.use( { timeout: TEST_MS },
http.get("*/api/v1/brokerage-accounts/:accountId/operations", () => async () => {
HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 }), configureTestAuth();
), let isFailing = true;
); let requests = 0;
renderPage(); server.use(
expect( http.get("*/api/v1/brokerage-accounts/:accountId/operations", () => {
await screen.findByText("Не удалось загрузить журнал", undefined, { requests += 1;
timeout: 4000,
}), return isFailing
).toBeInTheDocument(); ? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
}); : HttpResponse.json(resource(loadedOperations));
}),
);
renderPage();
expect(
await screen.findByText("Не удалось загрузить историю операций", undefined, {
timeout: RETRIES_EXHAUSTED_MS,
}),
).toBeInTheDocument();
expect(requests).toBe(3);
isFailing = false;
fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
expect(await screen.findByText("Покупка акций")).toBeInTheDocument();
expect(requests).toBe(4);
},
);
it(
"keeps cached operations, warns and retries the same GET",
{ timeout: TEST_MS },
async () => {
configureTestAuth();
let isFailing = false;
let requests = 0;
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/operations", () => {
requests += 1;
return isFailing
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(resource(loadedOperations));
}),
);
const queryClient = createTestQueryClient();
renderPage("", "account-1", queryClient);
await screen.findByText("Покупка акций");
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
isFailing = true;
void queryClient.invalidateQueries({
queryKey: [
"get",
"/api/v1/brokerage-accounts/{accountId}/operations",
],
});
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
expect(screen.getByText("Не удалось обновить данные")).toBeInTheDocument();
expect(screen.getByText("Покупка акций")).toBeInTheDocument();
expect(requests).toBe(4);
isFailing = false;
fireEvent.click(retry);
await waitFor(() =>
expect(screen.queryByText("Не удалось обновить данные"))
.not.toBeInTheDocument());
expect(requests).toBe(5);
},
);
it("keeps a null operations envelope loading instead of a confirmed empty period", async () => { it("keeps a null operations envelope loading instead of a confirmed empty period", async () => {
configureTestAuth(); configureTestAuth();
@@ -704,10 +787,10 @@ describe("all-account operation groups", () => {
fireEvent.click(screen.getByRole("button", { name: "Далее" })); fireEvent.click(screen.getByRole("button", { name: "Далее" }));
const accounts = await screen.findByRole("list", { const accounts = await screen.findByRole("list", {
name: /Купон · BOND, Исполнено/, name: /Выплата купонов BOND, Исполнено/,
}); });
expect(screen.getByText("Купон · BOND")).toBeInTheDocument(); expect(screen.getByText("Выплата купонов BOND")).toBeInTheDocument();
expect(screen.getByText("+200 ₽")).toBeInTheDocument(); expect(screen.getByText("+200 ₽")).toBeInTheDocument();
expect(within(accounts).getAllByRole("listitem")).toHaveLength(2); expect(within(accounts).getAllByRole("listitem")).toHaveLength(2);
@@ -6,15 +6,15 @@ import { AccountOperationsPageLoaded } from "./components/AccountOperationsPageL
import { AccountOperationsPageLoading } from "./components/AccountOperationsPageLoading.view"; import { AccountOperationsPageLoading } from "./components/AccountOperationsPageLoading.view";
const AccountOperationsPage: FC = () => { const AccountOperationsPage: FC = () => {
const viewModel = useAccountOperationsPageVm(); const vm = useAccountOperationsPageVm();
if (viewModel.state === "loading") { if (vm.state === "loading") {
return <AccountOperationsPageLoading />; return <AccountOperationsPageLoading />;
} }
return viewModel.state === "error" return vm.state === "error"
? <AccountOperationsPageError {...viewModel} /> ? <AccountOperationsPageError {...vm} />
: <AccountOperationsPageLoaded {...viewModel} />; : <AccountOperationsPageLoaded {...vm} />;
}; };
export { AccountOperationsPage }; export { AccountOperationsPage };
@@ -12,7 +12,12 @@ import {
useBrokerageOperationHistory, useBrokerageOperationHistory,
} 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,
readRetry,
} from "@/shared/api";
import { import {
defaultPeriod, defaultPeriod,
isValidPeriod, isValidPeriod,
@@ -42,11 +47,16 @@ type AccountOperationsPageViewModel
onPrevious: () => void; onPrevious: () => void;
onReset: () => void; onReset: () => void;
partial?: boolean; partial?: boolean;
readRetry: ReturnType<typeof readRetry>;
source?: InvestmentResourceMeta; source?: InvestmentResourceMeta;
state: "loaded"; state: "loaded";
totalVisible: boolean; totalVisible: boolean;
} }
| { onReset: () => void; state: "error" } | {
onReset: () => void;
readRetry: ReturnType<typeof readRetry>;
state: "error";
}
| { state: "loading" }; | { state: "loading" };
const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => { const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
@@ -107,6 +117,8 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
isFetching: operations.isFetching, isFetching: operations.isFetching,
}); });
const retry = readRetry([operations]);
if (availability === "loading" && operations.isLoading) if (availability === "loading" && operations.isLoading)
return { state: "loading" }; return { state: "loading" };
@@ -134,11 +146,11 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
(isInvalidCursor || !operations.data) (isInvalidCursor || !operations.data)
&& (operations.isError || operations.meta?.lastAttempt.state === "failed") && (operations.isError || operations.meta?.lastAttempt.state === "failed")
) )
return { onReset, state: "error" }; return { onReset, readRetry: retry, state: "error" };
if (!operations.data) if (!operations.data)
return availability === "unavailable" return availability === "unavailable"
? { onReset, state: "error" } ? { onReset, readRetry: retry, state: "error" }
: { state: "loading" }; : { state: "loading" };
const nextCursor = operations.data.nextCursor; const nextCursor = operations.data.nextCursor;
@@ -182,6 +194,7 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
onPrevious: history.onPrevious, onPrevious: history.onPrevious,
onReset, onReset,
partial: operations.meta?.completeness === "incomplete", partial: operations.meta?.completeness === "incomplete",
readRetry: retry,
source: operations.meta, source: operations.meta,
state: "loaded", state: "loaded",
totalVisible: operations.meta?.completeness === "complete", totalVisible: operations.meta?.completeness === "complete",
@@ -1,9 +1,11 @@
import type { FC } from "react"; import type { FC } from "react";
import { Button } from "@mantine/core"; 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";
import { ReadRetryButton } from "@/shared/ui";
import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm"; import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
type AccountOperationsPageErrorProps = Extract< type AccountOperationsPageErrorProps = Extract<
@@ -19,9 +21,18 @@ const AccountOperationsPageError: FC<AccountOperationsPageErrorProps> = (
return ( return (
<StateView <StateView
action={( action={(
<Button onClick={props.onReset} variant="default"> <Group gap="sm" justify="center">
{t("ledger.reset")} {props.readRetry.exhausted && (
</Button> <ReadRetryButton
onRetry={props.readRetry.onRetry}
retrying={props.readRetry.retrying}
/>
)}
<Button onClick={props.onReset} variant="default">
{t("ledger.reset")}
</Button>
</Group>
)} )}
text={t("ledger.errorText")} text={t("ledger.errorText")}
title={t("ledger.errorTitle")} title={t("ledger.errorTitle")}
@@ -19,7 +19,7 @@ import {
OperationGroup, OperationGroup,
} from "@/entities/broker-operation"; } from "@/entities/broker-operation";
import { groupItems } from "@/shared/lib"; import { groupItems } from "@/shared/lib";
import { SourceSyncStatus } from "@/shared/ui"; import { ReadRetry, SourceSyncStatus } from "@/shared/ui";
import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm"; import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
@@ -102,6 +102,8 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
stale={props.source?.freshness === "stale"} stale={props.source?.freshness === "stale"}
/> />
<ReadRetry {...props.readRetry} />
{!!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>}
+22 -4
View File
@@ -23,7 +23,7 @@ function sections(positions: Portfolio["positions"]) {
} }
describe("account position sections", () => { describe("account position sections", () => {
it("excludes currency instruments only from display, preserving order and share denominators", () => { it("excludes currency mirrors from display and share denominators", () => {
const otherTypes = [ const otherTypes = [
"OPTION", "OPTION",
"OTHER", "OTHER",
@@ -73,12 +73,30 @@ describe("account position sections", () => {
"FIGI-FUND", "FIGI-FUND",
...otherTypes.map(type => `FIGI-${type}-NEXT`), ...otherTypes.map(type => `FIGI-${type}-NEXT`),
]); ]);
expect(sections[0]?.groups[0]?.positions[0].shareText).toBe("40 %"); expect(sections[0]?.groups[0]?.positions[0].shareText).toBe("50 %");
expect(sections[1]?.groups[0]?.positions[0].shareText).toBe("20 %"); expect(sections[1]?.groups[0]?.positions[0].shareText).toBe("25 %");
expect(sections[2]?.groups[1]?.positions[0].shareText).toBe("20 %"); expect(sections[2]?.groups[1]?.positions[0].shareText).toBe("25 %");
expect(snapshot).toEqual(original); expect(snapshot).toEqual(original);
}); });
it("keeps all-account positions from both accounts without counting mirrored cash", () => {
const result = sections([
makePosition({ account: { id: "a", name: "Основной" }, currentValue: { currency: "RUB", value: "100" } }),
makePosition({ account: { id: "a", name: "Основной" }, currentValue: { currency: "RUB", value: "50" }, type: "CURRENCY" }),
makePosition({ account: { id: "b", name: "ИИС" }, currentValue: { currency: "RUB", value: "100" } }),
]);
const visible = result.flatMap(section =>
section.groups.flatMap(group => group.positions));
expect(visible)
.toEqual(expect.arrayContaining([
expect.objectContaining({ account: { id: "a", name: "Основной" }, shareText: "50 %" }),
expect.objectContaining({ account: { id: "b", name: "ИИС" }, shareText: "50 %" }),
]));
expect(visible).toHaveLength(2);
});
it("prepares grouped position sections with derived display data", () => { it("prepares grouped position sections with derived display data", () => {
expect( expect(
toAccountPagePositionSections(portfolio).map(({ groups, kind }) => ({ toAccountPagePositionSections(portfolio).map(({ groups, kind }) => ({
+1 -1
View File
@@ -152,7 +152,7 @@ function toAccountPagePositionSections(
const denominators = new Map<string, number>(); const denominators = new Map<string, number>();
for (const position of portfolio.positions) { for (const position of portfolio.positions) {
if (!position.currentValue) continue; if (position.type === "CURRENCY" || !position.currentValue) continue;
const currency = position.currentValue.currency; const currency = position.currentValue.currency;
denominators.set( denominators.set(
currency, currency,
@@ -18,6 +18,7 @@ import type { BrokerageEvent } from "@/entities/brokerage-event";
import { type Portfolio, portfolioQueryOptions } from "@/entities/portfolio"; import { type Portfolio, portfolioQueryOptions } from "@/entities/portfolio";
import { configureAuthClient } from "@/shared/api"; import { configureAuthClient } from "@/shared/api";
import { formatSnapshotTime } 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";
@@ -59,6 +60,10 @@ function configureTestAuth() {
}); });
} }
// Automatic read retries wait 1s + 2s before the failure is final.
const RETRIES_EXHAUSTED_MS = 6000;
const TEST_MS = 10_000;
function renderAccountRoute(queryClient: QueryClient, accountId = "account-1") { function renderAccountRoute(queryClient: QueryClient, accountId = "account-1") {
configureTestAuth(); configureTestAuth();
@@ -231,6 +236,37 @@ describe("AccountPage states", () => {
.toHaveAccessibleDescription(/Акция: 100 ₽, 100 %/); .toHaveAccessibleDescription(/Акция: 100 ₽, 100 %/);
}); });
it("shows server source time and attempt for an empty account", async () => {
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
HttpResponse.json(resource(
{
...portfolio,
cashBalances: [],
isStale: false,
positions: [],
totalsByCurrency: [],
},
{
lastAttempt: {
finishedAt: "2026-08-14T01:00:00Z",
problems: [],
startedAt: "2026-08-14T00:59:00Z",
state: "failed",
},
lastSuccessfulAt: "2026-08-13T12:00:00Z",
},
)),
),
);
renderAccountRoute(createTestQueryClient());
expect(await screen.findByText(/^Данные на /)).toHaveTextContent(
formatSnapshotTime("2026-08-13T12:00:00Z"),
);
expect(screen.getByText("Обновление не удалось")).toBeInTheDocument();
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
});
it("expands and resets other when switching slice", () => { it("expands and resets other when switching slice", () => {
const positions = [400, 250, 150, 100, 50, 30, 20].map( const positions = [400, 250, 150, 100, 50, 30, 20].map(
(value, index) => position({ (value, index) => position({
@@ -814,9 +850,9 @@ describe("AccountPage states", () => {
expect( expect(
screen.getByRole("heading", { name: "Портфель пока пуст" }), screen.getByRole("heading", { name: "Портфель пока пуст" }),
).toBeInTheDocument(); ).toBeInTheDocument();
expect(screen.getByRole("link", { name: "Открыть журнал" })) expect(screen.getByRole("link", { name: "Открыть историю операций" }))
.toBeInTheDocument(); .toBeInTheDocument();
expect(screen.getByRole("link", { name: "Открыть будущие события" })) expect(screen.getByRole("link", { name: "Открыть предстоящие события" }))
.toBeInTheDocument(); .toBeInTheDocument();
expect(screen.getByRole("link", { name: "Открыть пассивный доход" })) expect(screen.getByRole("link", { name: "Открыть пассивный доход" }))
.toBeInTheDocument(); .toBeInTheDocument();
@@ -857,10 +893,10 @@ describe("AccountPage states", () => {
}), }),
).toBeVisible(); ).toBeVisible();
expect( expect(
screen.getByRole("status", { name: "Загрузка будущих событий" }), screen.getByRole("status", { name: "Загрузка предстоящих событий" }),
).toBeVisible(); ).toBeVisible();
expect( expect(
screen.queryByText("На ближайшие 30 дней событий не найдено."), screen.queryByText("На ближайшие 30 дней предстоящих событий не найдено."),
).not.toBeInTheDocument(); ).not.toBeInTheDocument();
expect(screen.getByText("Загрузка дохода текущего месяца")).toBeVisible(); expect(screen.getByText("Загрузка дохода текущего месяца")).toBeVisible();
expect(screen.queryByText("Нет текущих сумм")).not.toBeInTheDocument(); expect(screen.queryByText("Нет текущих сумм")).not.toBeInTheDocument();
@@ -874,7 +910,6 @@ describe("AccountPage states", () => {
).toBeInTheDocument(); ).toBeInTheDocument();
expect(screen.queryByText(/T-Bank временно недоступен/)) expect(screen.queryByText(/T-Bank временно недоступен/))
.not.toBeInTheDocument(); .not.toBeInTheDocument();
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
expect(screen.getByRole("radio", { name: "Акции" })).toBeInTheDocument(); expect(screen.getByRole("radio", { name: "Акции" })).toBeInTheDocument();
expect( expect(
screen.getByRole("radio", { name: "Облигации" }), screen.getByRole("radio", { name: "Облигации" }),
@@ -1041,7 +1076,7 @@ describe("AccountPage states", () => {
/>, />,
); );
fireEvent.click(screen.getByRole("tab", { name: "Операции" })); fireEvent.click(screen.getByRole("tab", { name: "История операций" }));
expect( expect(
screen.getByText("Пока недоступно"), screen.getByText("Пока недоступно"),
).toBeInTheDocument(); ).toBeInTheDocument();
@@ -1080,7 +1115,7 @@ describe("AccountPage states", () => {
/>, />,
); );
fireEvent.click(screen.getByRole("tab", { name: "Операции" })); fireEvent.click(screen.getByRole("tab", { name: "История операций" }));
expect(screen.getByText("Сделка")).toBeInTheDocument(); expect(screen.getByText("Сделка")).toBeInTheDocument();
expect(screen.getByText("−12 ₽")).toBeInTheDocument(); expect(screen.getByText("−12 ₽")).toBeInTheDocument();
}); });
@@ -1134,8 +1169,8 @@ describe("AccountPage states", () => {
/>, />,
); );
fireEvent.click(screen.getByRole("tab", { name: "События" })); fireEvent.click(screen.getByRole("tab", { name: "Предстоящие события" }));
const section = screen.getByRole("tabpanel", { name: "События" }); const section = screen.getByRole("tabpanel", { name: "Предстоящие события" });
const content = within(section); const content = within(section);
const text = section.textContent ?? ""; const text = section.textContent ?? "";
@@ -1156,7 +1191,7 @@ describe("AccountPage states", () => {
expect( expect(
content.getByText("11.09.2026 · Дата реестра · RU000A0JX0J2"), content.getByText("11.09.2026 · Дата реестра · RU000A0JX0J2"),
).toBeVisible(); ).toBeVisible();
for (const amount of ["850,50 ₽", "0 USD", "1 000 ₽", "Сумма неизвестна"]) for (const amount of ["850,50 ₽", "0 $", "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();
@@ -1176,15 +1211,15 @@ describe("AccountPage states", () => {
/>, />,
); );
fireEvent.click(screen.getByRole("tab", { name: "События" })); fireEvent.click(screen.getByRole("tab", { name: "Предстоящие события" }));
const content = within( const content = within(
screen.getByRole("tabpanel", { name: "События" }), screen.getByRole("tabpanel", { name: "Предстоящие события" }),
); );
if (state === "loading") { if (state === "loading") {
const skeleton = content.getByRole("status", { const skeleton = content.getByRole("status", {
name: "Загрузка будущих событий", name: "Загрузка предстоящих событий",
}); });
// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch. // eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
@@ -1195,7 +1230,7 @@ describe("AccountPage states", () => {
else { else {
// eslint-disable-next-line vitest/no-conditional-expect -- The table case deterministically selects the empty state. // eslint-disable-next-line vitest/no-conditional-expect -- The table case deterministically selects the empty state.
expect( expect(
content.getByText("На ближайшие 30 дней событий не найдено."), content.getByText("На ближайшие 30 дней предстоящих событий не найдено."),
).toBeVisible(); ).toBeVisible();
} }
@@ -1216,7 +1251,7 @@ describe("AccountPage states", () => {
/>, />,
); );
fireEvent.click(screen.getByRole("tab", { name: "События" })); fireEvent.click(screen.getByRole("tab", { name: "Предстоящие события" }));
expect( expect(
screen.getByText("Данные появятся здесь, когда чтение восстановится."), screen.getByText("Данные появятся здесь, когда чтение восстановится."),
).toBeInTheDocument(); ).toBeInTheDocument();
@@ -1224,6 +1259,110 @@ describe("AccountPage states", () => {
expect(screen.getByText("Вторая")).toBeInTheDocument(); expect(screen.getByText("Вторая")).toBeInTheDocument();
}); });
it(
"keeps cached totals, then warns and retries the same portfolio GET",
{ timeout: TEST_MS },
async () => {
let isFailing = false;
let requests = 0;
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () => {
requests += 1;
if (isFailing)
return HttpResponse.json(
{ code: "TBANK_UNAVAILABLE" },
{ status: 503 },
);
return HttpResponse.json(resource(
requests === 1
? portfolio
: { ...portfolio, totalsByCurrency: [{ currency: "RUB", value: "999" }] },
{ resourceKey: "portfolio" },
));
}),
);
const queryClient = createTestQueryClient();
renderAccountRoute(queryClient);
await screen.findByText("Вторая");
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
isFailing = true;
void queryClient.invalidateQueries({
queryKey: portfolioQueryOptions("account-1").queryKey,
});
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
expect(screen.getByText("Не удалось обновить данные")).toBeInTheDocument();
expect(screen.getByText("Вторая")).toBeInTheDocument();
expect(screen.getByText("1 234,5 ₽")).toBeInTheDocument();
// One cached read plus the three automatic attempts.
expect(requests).toBe(4);
isFailing = false;
fireEvent.click(retry);
expect(await screen.findByText("999 ₽")).toBeInTheDocument();
expect(requests).toBe(5);
expect(screen.queryByText("Не удалось обновить данные"))
.not.toBeInTheDocument();
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
},
);
it(
"offers retry after an initial temporary failure and recovers in place",
{ timeout: TEST_MS },
async () => {
let isFailing = true;
let requests = 0;
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () => {
requests += 1;
return isFailing
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(resource(portfolio, { resourceKey: "portfolio" }));
}),
);
renderAccountRoute(createTestQueryClient());
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
expect(requests).toBe(3);
isFailing = false;
fireEvent.click(retry);
expect(await screen.findByText("Вторая")).toBeInTheDocument();
expect(requests).toBe(4);
},
);
it.each(["NOT_FOUND", "UNAUTHORIZED"])(
"does not offer a plain retry for %s after a cached portfolio",
async (code) => {
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
HttpResponse.json({ code }, { status: code === "NOT_FOUND" ? 404 : 401 })),
);
renderAccountRoute(createTestQueryClient());
await waitFor(() =>
expect(screen.queryByRole("heading", { name: "Загрузка" })).not.toBeInTheDocument());
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
},
);
it.each([503])( it.each([503])(
"preserves totals quietly through refresh error %i and success", "preserves totals quietly through refresh error %i and success",
async (status) => { async (status) => {
@@ -1276,7 +1415,7 @@ describe("AccountPage states", () => {
}); });
expect(structure).toHaveTextContent("10 ₽"); expect(structure).toHaveTextContent("10 ₽");
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument(); expect(screen.getByText(/^Данные на /)).toBeInTheDocument();
void queryClient.invalidateQueries({ void queryClient.invalidateQueries({
queryKey: portfolioQueryOptions("account-1").queryKey, queryKey: portfolioQueryOptions("account-1").queryKey,
}); });
@@ -1320,7 +1459,7 @@ describe("AccountPage states", () => {
screen.getAllByRole("definition").map(node => node.textContent), screen.getAllByRole("definition").map(node => node.textContent),
).toEqual(["-0,5 $"]), ).toEqual(["-0,5 $"]),
); );
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument(); expect(screen.getByText(/^Данные на /)).toHaveTextContent("Данные на");
expect(structure).not.toHaveTextContent("10 ₽"); expect(structure).not.toHaveTextContent("10 ₽");
expect(structure).toHaveTextContent("Нет положительной стоимости"); expect(structure).toHaveTextContent("Нет положительной стоимости");
expect( expect(
@@ -1361,7 +1500,7 @@ describe("AccountPage states", () => {
expect( expect(
screen.getAllByRole("definition").map(node => node.textContent), screen.getAllByRole("definition").map(node => node.textContent),
).toEqual(["1 234,5 ₽"]); ).toEqual(["1 234,5 ₽"]);
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument(); expect(screen.getByText(/^Данные на /)).toBeInTheDocument();
expect( expect(
screen.queryByRole("status", { name: "Загрузка" }), screen.queryByRole("status", { name: "Загрузка" }),
).not.toBeInTheDocument(); ).not.toBeInTheDocument();
@@ -1383,8 +1522,8 @@ describe("AccountPage states", () => {
.toBeVisible(); .toBeVisible();
expect(screen.queryByText("Вторая")).not.toBeInTheDocument(); expect(screen.queryByText("Вторая")).not.toBeInTheDocument();
fireEvent.click(screen.getByRole("tab", { name: "Операции" })); fireEvent.click(screen.getByRole("tab", { name: "История операций" }));
expect(screen.getByText("Последних событий пока нет.")).toBeVisible(); expect(screen.getByText("Последних операций пока нет.")).toBeVisible();
}); });
it("links operation, event and income previews to their detail pages", () => { it("links operation, event and income previews to their detail pages", () => {
@@ -1399,8 +1538,8 @@ describe("AccountPage states", () => {
); );
for (const [tab, href] of [ for (const [tab, href] of [
["Операции", "/accounts/account-1/operations"], ["История операций", "/accounts/account-1/operations"],
["События", "/accounts/account-1/events"], ["Предстоящие события", "/accounts/account-1/events"],
["Доход", "/accounts/account-1/income"], ["Доход", "/accounts/account-1/income"],
]) { ]) {
fireEvent.click(screen.getByRole("tab", { name: tab })); fireEvent.click(screen.getByRole("tab", { name: tab }));
@@ -1516,7 +1655,7 @@ describe("AccountPage states", () => {
await screen.findByRole("heading", { level: 1, name: "Все счета" }); await screen.findByRole("heading", { level: 1, name: "Все счета" });
const operationGroup = screen.getByRole("list", { const operationGroup = screen.getByRole("list", {
name: /Купон · BOND, Исполнено/, name: /Выплата купонов BOND, Исполнено/,
}); });
expect(screen.getByText("+500 ₽")).toBeInTheDocument(); expect(screen.getByText("+500 ₽")).toBeInTheDocument();
@@ -1,45 +1,48 @@
import type { FC } from "react"; import type { FC } from "react";
import { useAccountPageViewModel } from "./AccountPage.vm"; import { useAccountPageVm } from "./AccountPage.vm";
import { AccountPageEmpty } from "./components/AccountPageEmpty.view"; import { AccountPageEmpty } from "./components/AccountPageEmpty.view";
import { AccountPageError } from "./components/AccountPageError.view"; import { AccountPageError } from "./components/AccountPageError.view";
import { AccountPageLoaded } from "./components/AccountPageLoaded.view"; import { AccountPageLoaded } from "./components/AccountPageLoaded.view";
import { AccountPageLoading } from "./components/AccountPageLoading/AccountPageLoading.view"; import { AccountPageLoading } from "./components/AccountPageLoading/AccountPageLoading.view";
const AccountPage: FC = () => { const AccountPage: FC = () => {
const viewModel = useAccountPageViewModel(); const vm = useAccountPageVm();
if (viewModel.state === "loading") return <AccountPageLoading />; if (vm.state === "loading") return <AccountPageLoading />;
if (viewModel.state === "error") return <AccountPageError {...viewModel} />; if (vm.state === "error") return <AccountPageError {...vm} />;
if (viewModel.state === "empty") if (vm.state === "empty")
return ( return (
<AccountPageEmpty <AccountPageEmpty
account={viewModel.account} account={vm.account}
accountId={viewModel.accountId} accountId={vm.accountId}
incomeSummary={viewModel.incomeSummary} incomeSummary={vm.incomeSummary}
recentEvents={viewModel.recentEvents} readRetry={vm.readRetry}
recentOperations={viewModel.recentOperations} recentEvents={vm.recentEvents}
recentOperations={vm.recentOperations}
source={vm.source}
/> />
); );
return ( return (
<AccountPageLoaded <AccountPageLoaded
account={viewModel.account} account={vm.account}
accountId={viewModel.accountId} accountId={vm.accountId}
concentration={viewModel.concentration} concentration={vm.concentration}
currency={viewModel.currency} currency={vm.currency}
incomeSummary={viewModel.incomeSummary} incomeSummary={vm.incomeSummary}
onCurrencyChange={viewModel.onCurrencyChange} onCurrencyChange={vm.onCurrencyChange}
onSliceChange={viewModel.onSliceChange} onSliceChange={vm.onSliceChange}
onTabChange={viewModel.onTabChange} onTabChange={vm.onTabChange}
partial={viewModel.partial} partial={vm.partial}
portfolio={viewModel.portfolio} portfolio={vm.portfolio}
positionSections={viewModel.positionSections} positionSections={vm.positionSections}
recentEvents={viewModel.recentEvents} readRetry={vm.readRetry}
recentOperations={viewModel.recentOperations} recentEvents={vm.recentEvents}
slice={viewModel.slice} recentOperations={vm.recentOperations}
source={viewModel.source} slice={vm.slice}
tab={viewModel.tab} source={vm.source}
unrealizedReturns={viewModel.unrealizedReturns} tab={vm.tab}
unrealizedReturns={vm.unrealizedReturns}
/> />
); );
}; };
@@ -12,7 +12,7 @@ import { resource } from "@/test/resource";
import { server } from "@/test/server"; import { server } from "@/test/server";
import { portfolio } from "../../model/positions.fixtures"; import { portfolio } from "../../model/positions.fixtures";
import { useAccountPageViewModel } from "./AccountPage.vm"; import { useAccountPageVm } from "./AccountPage.vm";
function configureTestAuth() { function configureTestAuth() {
configureAuthClient({ configureAuthClient({
@@ -102,12 +102,12 @@ function mockLoadedAccountPage() {
); );
} }
describe("useAccountPageViewModel", () => { describe("useAccountPageVm", () => {
it("prepares recent operations and events state for presentation views", async () => { it("prepares recent operations and events state for presentation views", async () => {
configureTestAuth(); configureTestAuth();
mockLoadedAccountPage(); mockLoadedAccountPage();
const { result } = renderHook(() => useAccountPageViewModel(), { const { result } = renderHook(() => useAccountPageVm(), {
wrapper: createWrapper(), wrapper: createWrapper(),
}); });
@@ -154,7 +154,7 @@ describe("useAccountPageViewModel", () => {
), ),
); );
const { result } = renderHook(() => useAccountPageViewModel(), { const { result } = renderHook(() => useAccountPageVm(), {
wrapper: createWrapper(), wrapper: createWrapper(),
}); });
@@ -194,7 +194,7 @@ it("keeps overview sections independent when their source data is incomplete", a
), ),
); );
const { result } = renderHook(() => useAccountPageViewModel(), { const { result } = renderHook(() => useAccountPageVm(), {
wrapper: createWrapper(), wrapper: createWrapper(),
}); });
@@ -232,7 +232,7 @@ it("keeps overview sections loaded without exposing technical retry", async () =
), ),
); );
const { result } = renderHook(() => useAccountPageViewModel(), { const { result } = renderHook(() => useAccountPageVm(), {
wrapper: createWrapper(), wrapper: createWrapper(),
}); });
@@ -16,7 +16,7 @@ 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, apiErrorCode, isApiErrorCode } from "@/shared/api"; import { apiErrorCode, isBrokerageAccessLoss, readRetry } from "@/shared/api";
import { useInitialAvailability } from "@/shared/lib"; import { useInitialAvailability } from "@/shared/lib";
import { import {
@@ -45,8 +45,10 @@ type AccountPageContent = {
accountId?: string; accountId?: string;
incomeSummary: AccountPageIncomeSummary; incomeSummary: AccountPageIncomeSummary;
partial?: boolean; partial?: boolean;
readRetry: AccountPageReadRetry;
recentEvents: AccountPageRecentEvents; recentEvents: AccountPageRecentEvents;
recentOperations: AccountPageRecentOperations; recentOperations: AccountPageRecentOperations;
source?: InvestmentResourceMeta;
}; };
type AccountPageEmptyViewModel = AccountPageContent & { type AccountPageEmptyViewModel = AccountPageContent & {
@@ -62,25 +64,20 @@ type AccountPageLoadedViewModel = AccountPageContent & {
portfolio: Portfolio; portfolio: Portfolio;
positionSections: AccountPagePositionSection[]; positionSections: AccountPagePositionSection[];
slice: Slice; slice: Slice;
source?: InvestmentResourceMeta;
state: "loaded"; state: "loaded";
tab: string; tab: string;
unrealizedReturns: Portfolio["totalsByCurrency"]; unrealizedReturns: Portfolio["totalsByCurrency"];
}; };
type AccountPageReadRetry = ReturnType<typeof readRetry>;
type AccountPageViewModel type AccountPageViewModel
= | AccountPageEmptyViewModel = | AccountPageEmptyViewModel
| AccountPageLoadedViewModel | AccountPageLoadedViewModel
| { code?: string; state: "error" } | { code?: string; readRetry: AccountPageReadRetry; state: "error" }
| { state: "loading" }; | { state: "loading" };
function isPortfolioAccessFailure(code?: string) { function useAccountPageVm(): AccountPageViewModel {
return isApiErrorCode(code, ApiErrorCode.InvalidTbankToken)
|| isApiErrorCode(code, ApiErrorCode.NotFound)
|| isApiErrorCode(code, ApiErrorCode.TbankNotConnected);
}
function useAccountPageViewModel(): AccountPageViewModel {
const { accountId } = useParams(); const { accountId } = useParams();
const { t } = useTranslation(); const { t } = useTranslation();
@@ -119,7 +116,9 @@ function useAccountPageViewModel(): AccountPageViewModel {
]); ]);
const code = apiErrorCode(portfolio.error); const code = apiErrorCode(portfolio.error);
const isAccessFailure = isPortfolioAccessFailure(code); // The portfolio drives this screen; the retry repeats only its GET.
const retry = readRetry([portfolio]);
const isAccessFailure = isBrokerageAccessLoss(code);
const availability = useInitialAvailability({ const availability = useInitialAvailability({
hasContent: !!portfolio.data, hasContent: !!portfolio.data,
@@ -128,12 +127,13 @@ function useAccountPageViewModel(): AccountPageViewModel {
isFetching: portfolio.isFetching, isFetching: portfolio.isFetching,
}); });
if (isAccessFailure) return { code, state: "error" as const }; if (isAccessFailure)
return { code, readRetry: retry, state: "error" as const };
if (!portfolio.data) if (!portfolio.data)
return { return availability === "unavailable"
state: availability === "unavailable" ? "error" : "loading", ? { code, readRetry: retry, state: "error" as const }
} as const; : { state: "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);
@@ -150,8 +150,10 @@ function useAccountPageViewModel(): AccountPageViewModel {
account, account,
accountId, accountId,
incomeSummary, incomeSummary,
readRetry: retry,
recentEvents, recentEvents,
recentOperations, recentOperations,
source: portfolio.meta,
state: "empty" as const, state: "empty" as const,
}; };
@@ -186,6 +188,7 @@ function useAccountPageViewModel(): AccountPageViewModel {
partial: isPartial, partial: isPartial,
portfolio: portfolio.data, portfolio: portfolio.data,
positionSections: toAccountPagePositionSections(portfolio.data), positionSections: toAccountPagePositionSections(portfolio.data),
readRetry: retry,
recentEvents, recentEvents,
recentOperations, recentOperations,
slice: current.slice, slice: current.slice,
@@ -196,4 +199,4 @@ function useAccountPageViewModel(): AccountPageViewModel {
}; };
} }
export { useAccountPageViewModel }; export { useAccountPageVm };
@@ -5,9 +5,10 @@ import { StateView } from "@wealthledger/ui";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import type { BrokerageAccount } from "@/entities/brokerage-account"; import type { BrokerageAccount } from "@/entities/brokerage-account";
import type { InvestmentResourceMeta } from "@/shared/api";
import { BrokerageEventsPreview } from "@/entities/brokerage-event"; import { BrokerageEventsPreview } from "@/entities/brokerage-event";
import { PortfolioStructure } from "@/widgets/portfolio-structure"; import { ReadRetry, type ReadRetryProps, SourceSyncStatus } from "@/shared/ui";
import type { import type {
AccountPageIncomeSummary, AccountPageIncomeSummary,
@@ -17,14 +18,17 @@ 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 = {
account?: BrokerageAccount; account?: BrokerageAccount;
accountId?: string; accountId?: string;
incomeSummary?: AccountPageIncomeSummary; incomeSummary?: AccountPageIncomeSummary;
readRetry?: ReadRetryProps;
recentEvents: AccountPageRecentEvents; recentEvents: AccountPageRecentEvents;
recentOperations: AccountPageRecentOperations; recentOperations: AccountPageRecentOperations;
source?: InvestmentResourceMeta;
}; };
const AccountPageEmpty: FC<AccountPageEmptyProps> = (props) => { const AccountPageEmpty: FC<AccountPageEmptyProps> = (props) => {
@@ -40,6 +44,14 @@ const AccountPageEmpty: FC<AccountPageEmptyProps> = (props) => {
<Stack> <Stack>
<AccountHeading account={props.account} accountId={props.accountId} /> <AccountHeading account={props.account} accountId={props.accountId} />
<SourceSyncStatus
lastAttempt={props.source?.lastAttempt}
lastSuccessfulAt={props.source?.lastSuccessfulAt}
stale={props.source?.freshness === "stale"}
/>
{!!props.readRetry && <ReadRetry {...props.readRetry} />}
<StateView text={text} title={t("portfolio.emptyTitle")} /> <StateView text={text} title={t("portfolio.emptyTitle")} />
<PortfolioStructure <PortfolioStructure
@@ -6,8 +6,12 @@ import { useTranslation } from "react-i18next";
import { Link } from "react-router"; import { Link } from "react-router";
import { ApiErrorCode, isApiErrorCode } from "@/shared/api"; import { ApiErrorCode, isApiErrorCode } from "@/shared/api";
import { ReadRetryButton, type ReadRetryProps } from "@/shared/ui";
type AccountPageErrorProps = { code?: string }; type AccountPageErrorProps = {
code?: string;
readRetry?: ReadRetryProps;
};
const AccountPageError: FC<AccountPageErrorProps> = (props) => { const AccountPageError: FC<AccountPageErrorProps> = (props) => {
const { code } = props; const { code } = props;
@@ -43,8 +47,18 @@ const AccountPageError: FC<AccountPageErrorProps> = (props) => {
/> />
); );
const retry = props.readRetry?.exhausted
? (
<ReadRetryButton
onRetry={props.readRetry.onRetry}
retrying={props.readRetry.retrying}
/>
)
: undefined;
return ( return (
<StateView <StateView
action={retry}
text={t("states.unavailableText")} text={t("states.unavailableText")}
title={t("states.unavailableTitle")} title={t("states.unavailableTitle")}
/> />
@@ -15,8 +15,7 @@ import type { InvestmentResourceMeta } from "@/shared/api";
import { BrokerageEventsPreview } from "@/entities/brokerage-event"; import { BrokerageEventsPreview } from "@/entities/brokerage-event";
import { formatMoney } from "@/shared/lib"; import { formatMoney } from "@/shared/lib";
import { SourceSyncStatus } from "@/shared/ui"; import { ReadRetry, type ReadRetryProps, SourceSyncStatus } from "@/shared/ui";
import { PortfolioStructure } from "@/widgets/portfolio-structure";
import type { Concentration as ConcentrationModel, Slice } from "../../../model/concentration"; import type { Concentration as ConcentrationModel, Slice } from "../../../model/concentration";
import type { AccountPagePositionSection } from "../../../model/positions"; import type { AccountPagePositionSection } from "../../../model/positions";
@@ -31,6 +30,7 @@ import { AccountHeading } from "./AccountHeading.view";
import { Concentration } from "./Concentration/Concentration.view"; import { Concentration } from "./Concentration/Concentration.view";
import { CurrencyCards } from "./CurrencyCards/CurrencyCards.view"; import { CurrencyCards } from "./CurrencyCards/CurrencyCards.view";
import { IncomeSummary } from "./IncomeSummary.view"; import { IncomeSummary } from "./IncomeSummary.view";
import { PortfolioStructure } from "./PortfolioStructure/PortfolioStructure";
import { PositionSection } from "./PositionSection.view"; import { PositionSection } from "./PositionSection.view";
import { RecentOperations } from "./RecentOperations.view"; import { RecentOperations } from "./RecentOperations.view";
@@ -46,6 +46,7 @@ type AccountPageLoadedProps = {
partial?: boolean; partial?: boolean;
portfolio: Portfolio; portfolio: Portfolio;
positionSections: AccountPagePositionSection[]; positionSections: AccountPagePositionSection[];
readRetry?: ReadRetryProps;
recentEvents: AccountPageRecentEvents; recentEvents: AccountPageRecentEvents;
recentOperations: AccountPageRecentOperations; recentOperations: AccountPageRecentOperations;
slice: Slice; slice: Slice;
@@ -86,6 +87,8 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
stale={props.source?.freshness === "stale"} stale={props.source?.freshness === "stale"}
/> />
{!!props.readRetry && <ReadRetry {...props.readRetry} />}
{props.partial {props.partial
? tab !== "concentration" && ( ? tab !== "concentration" && (
<Alert role="status">{t("investment.partial")}</Alert> <Alert role="status">{t("investment.partial")}</Alert>
@@ -28,7 +28,7 @@ const meta = {
}, },
}, },
tags: ["autodocs"], tags: ["autodocs"],
title: "Widgets/PortfolioStructure", title: "Product/PortfolioStructure",
} satisfies Meta<typeof PortfolioStructure>; } satisfies Meta<typeof PortfolioStructure>;
export default meta; export default meta;
@@ -60,7 +60,7 @@ describe("portfolio structure", () => {
screen.getByRole("combobox", { name: "Валюта структуры портфеля" }), screen.getByRole("combobox", { name: "Валюта структуры портфеля" }),
); );
fireEvent.click(screen.getByRole("option", { name: "USD" })); fireEvent.click(screen.getByRole("option", { name: "USD" }));
expect(screen.getByRole("list")).toHaveTextContent("60 USD"); expect(screen.getByRole("list")).toHaveTextContent("60 $");
expect(screen.getByRole("list")).not.toHaveTextContent("₽"); expect(screen.getByRole("list")).not.toHaveTextContent("₽");
view.rerender(ui({ currencies: [rub], unvaluedCategories: [] })); view.rerender(ui({ currencies: [rub], unvaluedCategories: [] }));
expect(screen.getByRole("list")).toHaveTextContent("60 ₽"); expect(screen.getByRole("list")).toHaveTextContent("60 ₽");
@@ -1,6 +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 { render, screen, waitFor } from "@testing-library/react"; import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { http, HttpResponse } from "msw"; import { http, HttpResponse } from "msw";
import { MemoryRouter } from "react-router"; import { MemoryRouter } from "react-router";
import { describe, expect, it, vi } from "vitest"; import { describe, expect, it, vi } from "vitest";
@@ -110,7 +110,9 @@ describe("AccountsPage", () => {
renderPage(client); renderPage(client);
expect(await screen.findByText("175,30 ₽")).toBeInTheDocument(); expect(await screen.findByText("175,30 ₽")).toBeInTheDocument();
expect(screen.getAllByText("20,00 USD")).not.toHaveLength(0); expect(screen.getAllByText("20,00 $")).not.toHaveLength(0);
expect(screen.queryByText("Ваши инвестиции по счетам"))
.not.toBeInTheDocument();
expect(screen.getByText("5 счетов")).toBeInTheDocument(); expect(screen.getByText("5 счетов")).toBeInTheDocument();
expect(screen.getByText("Нет текущих сумм")).toBeInTheDocument(); expect(screen.getByText("Нет текущих сумм")).toBeInTheDocument();
expect(screen.getByText( expect(screen.getByText(
@@ -261,6 +263,101 @@ describe("AccountsPage", () => {
}); });
}); });
// Automatic read retries wait 1s + 2s before the failure is final.
const RETRIES_EXHAUSTED_MS = 6000;
const TEST_MS = 10_000;
describe("exhausted read retries", () => {
it(
"keeps the cached list, warns and retries the same accounts GET",
{ timeout: TEST_MS },
async () => {
let isFailing = false;
let requests = 0;
server.use(
http.get("*/api/v1/brokerage-accounts", () => {
requests += 1;
if (isFailing)
return HttpResponse.json(
{ code: "TBANK_UNAVAILABLE" },
{ status: 503 },
);
return HttpResponse.json(resource([account]));
}),
);
const queryClient = createTestQueryClient();
renderPage(queryClient);
await screen.findByText("Основной");
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
isFailing = true;
void queryClient.invalidateQueries({
queryKey: brokerageAccountsQueryKey,
});
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
expect(screen.getByText("Не удалось обновить данные")).toBeInTheDocument();
expect(screen.getByText("Основной")).toBeInTheDocument();
expect(requests).toBe(4);
isFailing = false;
fireEvent.click(retry);
await waitFor(() =>
expect(screen.queryByText("Не удалось обновить данные"))
.not.toBeInTheDocument());
expect(requests).toBe(5);
expect(screen.getByText("Основной")).toBeInTheDocument();
},
);
it(
"offers retry on the unavailable state after an initial failure",
{ timeout: TEST_MS },
async () => {
let isFailing = true;
server.use(
http.get("*/api/v1/brokerage-accounts", () =>
isFailing
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(resource([account]))),
);
renderPage(createTestQueryClient());
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
isFailing = false;
fireEvent.click(retry);
expect(await screen.findByText("Основной")).toBeInTheDocument();
},
);
it("does not offer a plain retry when the connection is lost", async () => {
server.use(
http.get("*/api/v1/brokerage-accounts", () =>
HttpResponse.json({ code: "TBANK_NOT_CONNECTED" }, { status: 409 })),
);
renderPage(createTestQueryClient());
expect(await screen.findByRole("link", { name: "Открыть настройки T-Bank" }))
.toBeInTheDocument();
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
});
});
it.each(["none", "failed"] as const)( it.each(["none", "failed"] as const)(
"keeps incomplete empty membership distinct from no accounts (attempt=%s)", "keeps incomplete empty membership distinct from no accounts (attempt=%s)",
async (state) => { async (state) => {
@@ -1,21 +1,22 @@
import type { FC } from "react"; import type { FC } from "react";
import { useAccountsPageViewModel } from "./AccountsPage.vm"; import { useAccountsPageVm } from "./AccountsPage.vm";
import { AccountsPageEmpty } from "./components/AccountsPageEmpty.view"; import { AccountsPageEmpty } from "./components/AccountsPageEmpty.view";
import { AccountsPageError } from "./components/AccountsPageError.view"; import { AccountsPageError } from "./components/AccountsPageError.view";
import { AccountsPageLoaded } from "./components/AccountsPageLoaded.view"; import { AccountsPageLoaded } from "./components/AccountsPageLoaded.view";
import { AccountsPageLoading } from "./components/AccountsPageLoading.view"; import { AccountsPageLoading } from "./components/AccountsPageLoading.view";
const AccountsPage: FC = () => { const AccountsPage: FC = () => {
const viewModel = useAccountsPageViewModel(); const vm = useAccountsPageVm();
if (viewModel.state === "loading") return <AccountsPageLoading />; if (vm.state === "loading") return <AccountsPageLoading />;
if (viewModel.state === "error") return <AccountsPageError {...viewModel} />; if (vm.state === "error") return <AccountsPageError {...vm} />;
if (viewModel.state === "empty") return <AccountsPageEmpty />; if (vm.state === "empty") return <AccountsPageEmpty />;
return ( return (
<AccountsPageLoaded <AccountsPageLoaded
accounts={viewModel.accounts} accounts={vm.accounts}
meta={viewModel.meta} meta={vm.meta}
readRetry={vm.readRetry}
/> />
); );
}; };
@@ -4,25 +4,38 @@ import {
useBrokerageAccounts, useBrokerageAccounts,
} from "@/entities/brokerage-account"; } from "@/entities/brokerage-account";
import { useScreenSync } from "@/features/tbank-connection"; import { useScreenSync } from "@/features/tbank-connection";
import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api"; import {
ApiErrorCode,
apiErrorCode,
isApiErrorCode,
readRetry,
} from "@/shared/api";
import { useInitialAvailability } from "@/shared/lib"; import { useInitialAvailability } from "@/shared/lib";
type AccountsPageReadRetry = ReturnType<typeof readRetry>;
type AccountsPageViewModel type AccountsPageViewModel
= | { accounts: BrokerageAccountCard[]; meta: NonNullable<ReturnType<typeof useBrokerageAccounts>["meta"]>; state: "loaded" } = | {
| { code?: string; state: "error" } accounts: BrokerageAccountCard[];
| { state: "empty" } meta: NonNullable<ReturnType<typeof useBrokerageAccounts>["meta"]>;
| { state: "loading" }; readRetry: AccountsPageReadRetry;
state: "loaded";
}
| { code?: string; readRetry: AccountsPageReadRetry; state: "error" }
| { state: "empty" }
| { state: "loading" };
function isAccountsAccessFailure(code?: string) { function isAccountsAccessFailure(code?: string) {
return isApiErrorCode(code, ApiErrorCode.InvalidTbankToken) return isApiErrorCode(code, ApiErrorCode.InvalidTbankToken)
|| isApiErrorCode(code, ApiErrorCode.TbankNotConnected); || isApiErrorCode(code, ApiErrorCode.TbankNotConnected);
} }
function useAccountsPageViewModel(): AccountsPageViewModel { function useAccountsPageVm(): AccountsPageViewModel {
const accounts = useBrokerageAccounts(); const accounts = useBrokerageAccounts();
useScreenSync({ screen: "accounts" }, [accounts]); useScreenSync({ screen: "accounts" }, [accounts]);
const code = apiErrorCode(accounts.error); const code = apiErrorCode(accounts.error);
const retry = readRetry([accounts]);
const isAccessFailure = isAccountsAccessFailure(code); const isAccessFailure = isAccountsAccessFailure(code);
const hasResult = !!accounts.data const hasResult = !!accounts.data
@@ -36,12 +49,13 @@ function useAccountsPageViewModel(): AccountsPageViewModel {
isFetching: accounts.isFetching, isFetching: accounts.isFetching,
}); });
if (isAccessFailure) return { code, state: "error" as const }; if (isAccessFailure)
return { code, readRetry: retry, state: "error" as const };
if (!hasResult || !accounts.data) if (!hasResult || !accounts.data)
return { return availability === "unavailable"
state: availability === "unavailable" ? "error" : "loading", ? { code, readRetry: retry, state: "error" as const }
} as const; : { state: "loading" as const };
if (accounts.data.length === 0) if (accounts.data.length === 0)
return { return {
@@ -54,8 +68,9 @@ function useAccountsPageViewModel(): AccountsPageViewModel {
return { return {
accounts: brokerageAccountCards(accounts.data, meta.dependencies), accounts: brokerageAccountCards(accounts.data, meta.dependencies),
meta, meta,
readRetry: retry,
state: "loaded" as const, state: "loaded" as const,
}; };
} }
export { useAccountsPageViewModel }; export { useAccountsPageVm };
@@ -6,8 +6,12 @@ import { useTranslation } from "react-i18next";
import { Link } from "react-router"; import { Link } from "react-router";
import { ApiErrorCode, isApiErrorCode } from "@/shared/api"; import { ApiErrorCode, isApiErrorCode } from "@/shared/api";
import { ReadRetryButton, type ReadRetryProps } from "@/shared/ui";
type AccountsPageErrorProps = { code?: string }; type AccountsPageErrorProps = {
code?: string;
readRetry?: ReadRetryProps;
};
const AccountsPageError: FC<AccountsPageErrorProps> = (props) => { const AccountsPageError: FC<AccountsPageErrorProps> = (props) => {
const { code } = props; const { code } = props;
@@ -38,8 +42,18 @@ const AccountsPageError: FC<AccountsPageErrorProps> = (props) => {
/> />
); );
const retry = props.readRetry?.exhausted
? (
<ReadRetryButton
onRetry={props.readRetry.onRetry}
retrying={props.readRetry.retrying}
/>
)
: undefined;
return ( return (
<StateView <StateView
action={retry}
text={t("states.unavailableText")} text={t("states.unavailableText")}
title={t("states.unavailableTitle")} title={t("states.unavailableTitle")}
/> />
@@ -0,0 +1,21 @@
.summary {
min-width: 0;
padding-bottom: var(--mantine-spacing-lg);
border-bottom: 1px solid var(--wl-color-border);
}
.primaryTotal {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-variant-numeric: tabular-nums;
line-height: 1.2;
overflow-wrap: anywhere;
}
.otherTotal {
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.meta {
padding-top: var(--mantine-spacing-xs);
}
@@ -1,6 +1,6 @@
import type { FC } from "react"; import type { FC } from "react";
import { Button, SimpleGrid, Stack, Text, Title } from "@mantine/core"; import { Button, Group, Stack, Text, Title } from "@mantine/core";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Link } from "react-router"; import { Link } from "react-router";
@@ -11,7 +11,9 @@ import {
BrokerageAccountList, BrokerageAccountList,
} from "@/entities/brokerage-account"; } from "@/entities/brokerage-account";
import { formatMoney } from "@/shared/lib"; import { formatMoney } from "@/shared/lib";
import { SourceSyncStatus } from "@/shared/ui"; import { ReadRetry, type ReadRetryProps, SourceSyncStatus } from "@/shared/ui";
import classes from "./AccountsPageLoaded.module.css";
const DECIMAL_BASE = 10n; const DECIMAL_BASE = 10n;
const DECIMAL_PART_COUNT = 2; const DECIMAL_PART_COUNT = 2;
@@ -20,6 +22,7 @@ const ZERO = 0n;
type AccountsPageLoadedProps = { type AccountsPageLoadedProps = {
accounts: BrokerageAccountCard[]; accounts: BrokerageAccountCard[];
meta: InvestmentResourceMeta; meta: InvestmentResourceMeta;
readRetry?: ReadRetryProps;
}; };
type Money = { currency: string; value: string }; type Money = { currency: string; value: string };
@@ -86,52 +89,57 @@ function sumDecimals(values: string[]) {
const AccountsPageLoaded: FC<AccountsPageLoadedProps> = (props) => { const AccountsPageLoaded: FC<AccountsPageLoadedProps> = (props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { excludedCount, totals } = accountTotals(props.accounts); const { excludedCount, totals } = accountTotals(props.accounts);
const primaryTotal = totals.find(total => total.currency === "RUB") ?? totals[0];
const otherTotals = totals.filter(total => total !== primaryTotal);
return ( return (
<Stack gap="lg"> <Stack gap="lg">
<Stack gap={4}> <Title order={1}>{t("accounts.title")}</Title>
<Title order={1}>{t("accounts.title")}</Title>
<Stack className={classes.summary} gap="xs">
<Text c="dimmed" size="sm"> <Text c="dimmed" size="sm">
{t("accounts.subtitle")} {t("accounts.currentValue")}
</Text> </Text>
</Stack>
<Stack gap="xs"> {primaryTotal
<SimpleGrid cols={{ base: 1, xs: 2 }} spacing="xs"> ? (
<Stack gap={4}> <Text className={classes.primaryTotal} fw={700}>
<Text c="dimmed" size="sm"> {formatMoney(primaryTotal, { withRoundedCents: true })}
{t("accounts.currentValue")}
</Text>
{totals.length > 0
? totals.map(total => (
<Text fw={700} key={total.currency} size="lg">
{formatMoney(total, { withRoundedCents: true })}
</Text>
))
: <Text c="dimmed">{t("accounts.summaryNoTotals")}</Text>}
</Stack>
<Stack gap={4}>
<Text fw={600}>{t("accounts.count", {
count: props.accounts.length,
})}
</Text>
{excludedCount > 0 && (
<Text c="dimmed" size="sm">
{t("accounts.summaryExcluded", { count: excludedCount })}
</Text> </Text>
)
: (
<Text c="dimmed">{t("accounts.summaryNoTotals")}</Text>
)} )}
</Stack>
</SimpleGrid>
<SourceSyncStatus {otherTotals.length > 0 && (
lastAttempt={props.meta.lastAttempt} <Group gap="md" wrap="wrap">
lastSuccessfulAt={props.meta.lastSuccessfulAt} {otherTotals.map(total => (
stale={props.meta.freshness === "stale"} <Text className={classes.otherTotal} key={total.currency}>
/> {formatMoney(total, { withRoundedCents: true })}
</Text>
))}
</Group>
)}
<Group className={classes.meta} gap="xs" wrap="wrap">
<Text c="dimmed" size="xs">
{t("accounts.count", { count: props.accounts.length })}
</Text>
<SourceSyncStatus
lastAttempt={props.meta.lastAttempt}
lastSuccessfulAt={props.meta.lastSuccessfulAt}
stale={props.meta.freshness === "stale"}
/>
</Group>
{excludedCount > 0 && (
<Text c="dimmed" size="sm">
{t("accounts.summaryExcluded", { count: excludedCount })}
</Text>
)}
{!!props.readRetry && <ReadRetry {...props.readRetry} />}
</Stack> </Stack>
<Button <Button
+17 -2
View File
@@ -347,14 +347,29 @@ describe("bond page", () => {
it("keeps market content and sold-position history when coupons fail", async () => { it("keeps market content and sold-position history when coupons fail", async () => {
setup({ failCoupons: true, noPosition: true }); setup({ failCoupons: true, noPosition: true });
await screen.findByText("98,125 %"); await screen.findByText("98,125 %");
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
expect( expect(
screen.queryByRole("heading", { name: "Моя позиция" }), screen.queryByRole("heading", { name: "Моя позиция" }),
).not.toBeInTheDocument(); ).not.toBeInTheDocument();
expect( expect(
screen.getByRole("heading", { name: "Моя история событий" }), screen.getByRole("heading", { name: "История операций" }),
).toBeVisible(); ).toBeVisible();
}); });
it(
"offers a local retry for the failed coupons section only",
{ timeout: 10_000 },
async () => {
setup({ failCoupons: true });
await screen.findByText("98,125 %");
// Automatic read retries wait 1s + 2s before the failure is final.
await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: 6000 },
);
expect(screen.getAllByRole("button", { name: "Повторить" })).toHaveLength(1);
expect(screen.getByText("98,125 %")).toBeVisible();
},
);
it("preserves cached quote without manual refresh", async () => { it("preserves cached quote without manual refresh", async () => {
const controls = setup({ path: `/bonds/${uid}?period=year&events=trades` }); const controls = setup({ path: `/bonds/${uid}?period=year&events=trades` });
await screen.findByText("98,125 %"); await screen.findByText("98,125 %");
@@ -120,11 +120,52 @@ const useOperationFormVm = (props: OperationFormProps) => {
body: { ...body, version }, body: { ...body, version },
id: props.operation.id, id: props.operation.id,
}); });
else else {
await operationCreation.mutateAsync({ const base = {
amount: body.amount,
cardId: values.cardId,
date: values.date,
description: values.description,
id: intent, id: intent,
...body, };
});
switch (values.kind) {
case "expense": {
await operationCreation.mutateAsync({
...base,
categoryId: values.categoryId || defaultCategoryId,
kind: values.kind,
});
break;
}
case "refund": {
await operationCreation.mutateAsync({
...base,
kind: values.kind,
originalExpenseId: values.originalExpenseId,
});
break;
}
case "topup": {
await operationCreation.mutateAsync({
...base,
kind: values.kind,
});
break;
}
case "transfer": {
await operationCreation.mutateAsync({
...base,
kind: values.kind,
targetCardId: values.targetCardId,
});
break;
}
}
}
notifications.show({ notifications.show({
id: "bank-operation-saved-" + actionId, id: "bank-operation-saved-" + actionId,
+2 -2
View File
@@ -1,13 +1,13 @@
import type { FC } from "react"; import type { FC } from "react";
import { useDocumentTitle } from "@mantine/hooks";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { AuthPageLayout, LoginForm } from "@/features/auth"; import { AuthPageLayout, LoginForm } from "@/features/auth";
import { useAppDocumentTitle } from "@/shared/ui";
const LoginPage: FC = () => { const LoginPage: FC = () => {
const { t } = useTranslation(); const { t } = useTranslation();
useDocumentTitle(`${t("auth.login")} — ${t("appName")}`); useAppDocumentTitle(t("auth.login"));
return ( return (
<AuthPageLayout title={t("auth.login")}> <AuthPageLayout title={t("auth.login")}>
+3 -2
View File
@@ -1,14 +1,15 @@
import type { FC } from "react"; import type { FC } from "react";
import { Button, Stack, Title } from "@mantine/core"; import { Button, Stack, Title } from "@mantine/core";
import { useDocumentTitle } from "@mantine/hooks";
import { StateView } from "@wealthledger/ui"; import { StateView } from "@wealthledger/ui";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Link } from "react-router"; import { Link } from "react-router";
import { useAppDocumentTitle } from "@/shared/ui";
const NotFoundPage: FC = () => { const NotFoundPage: FC = () => {
const { t } = useTranslation(); const { t } = useTranslation();
useDocumentTitle(`${t("notFound.title")} — ${t("appName")}`); useAppDocumentTitle(t("notFound.title"));
return ( return (
<Stack> <Stack>
+2 -2
View File
@@ -1,13 +1,13 @@
import type { FC } from "react"; import type { FC } from "react";
import { useDocumentTitle } from "@mantine/hooks";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { AuthPageLayout, RegisterForm } from "@/features/auth"; import { AuthPageLayout, RegisterForm } from "@/features/auth";
import { useAppDocumentTitle } from "@/shared/ui";
const RegisterPage: FC = () => { const RegisterPage: FC = () => {
const { t } = useTranslation(); const { t } = useTranslation();
useDocumentTitle(`${t("auth.register")} — ${t("appName")}`); useAppDocumentTitle(t("auth.register"));
return ( return (
<AuthPageLayout title={t("auth.register")}> <AuthPageLayout title={t("auth.register")}>
@@ -1,13 +1,24 @@
import type { FC } from "react"; import type { FC } from "react";
import { Button, Stack, Title } from "@mantine/core"; import { Button, Stack, Title } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { useAuth } from "@/features/auth";
import { TbankConnectionSection } from "@/features/tbank-connection"; import { TbankConnectionSection } from "@/features/tbank-connection";
import { useSettingsPageVm } from "./SettingsPage.vm";
const SettingsPage: FC = () => { const SettingsPage: FC = () => {
const { onLogout, t } = useSettingsPageVm(); const { t } = useTranslation();
const { logout } = useAuth();
// eslint-disable-next-line frontend/readability -- the page VM was removed as degenerate (frontend#143); a one-off error-swallowing logout is not a ViewModel.
const onLogout = async () => {
try {
await logout();
}
catch {
// The session is already cleared; the route guard owns navigation.
}
};
return ( return (
<Stack> <Stack>
@@ -1,21 +0,0 @@
import { useTranslation } from "react-i18next";
import { useAuth } from "@/features/auth";
function useSettingsPageVm() {
const { t } = useTranslation();
const { logout } = useAuth();
const onLogout = async () => {
try {
await logout();
}
catch {
// The session is already cleared; the route guard owns navigation.
}
};
return { onLogout, t };
}
export { useSettingsPageVm };
@@ -81,6 +81,7 @@ function setup(
candles?: NonNullable<StockPageVm["candles"]>["candles"]; candles?: NonNullable<StockPageVm["candles"]>["candles"];
cursorError?: string; cursorError?: string;
failCompany?: boolean; failCompany?: boolean;
failCompanyAfter?: { value: boolean };
failStock?: boolean; failStock?: boolean;
metrics?: NonNullable<StockPageVm["company"]>["metrics"]; metrics?: NonNullable<StockPageVm["company"]>["metrics"];
noPosition?: boolean; noPosition?: boolean;
@@ -133,7 +134,7 @@ function setup(
), ),
); );
if (params.section === "company") if (params.section === "company")
return options.failCompany return (options.failCompanyAfter?.value ?? options.failCompany)
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 }) ? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json( : HttpResponse.json(
@@ -396,7 +397,6 @@ describe("stock page", () => {
screen.queryByRole("heading", { name: "Моя позиция" }), screen.queryByRole("heading", { name: "Моя позиция" }),
).not.toBeInTheDocument(); ).not.toBeInTheDocument();
expect(screen.getByRole("heading", { name: "График цены" })).toBeVisible(); expect(screen.getByRole("heading", { name: "График цены" })).toBeVisible();
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
}); });
it("keeps successful sections visible when company data is initially missing", async () => { it("keeps successful sections visible when company data is initially missing", async () => {
const { requests } = setup({ failCompany: true }); const { requests } = setup({ failCompany: true });
@@ -404,8 +404,39 @@ describe("stock page", () => {
const previousRequests = requests.length; const previousRequests = requests.length;
expect(screen.getByText("Зачисление дивидендов")).toBeVisible(); expect(screen.getByText("Зачисление дивидендов")).toBeVisible();
expect(requests).toHaveLength(previousRequests); expect(requests).toHaveLength(previousRequests);
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
}); });
it(
"retries only the failed company section and recovers it in place",
{ timeout: 10_000 },
async () => {
const failing = { value: true };
const { requests } = setup({ failCompanyAfter: failing });
await screen.findByText("Зачисление дивидендов");
// Automatic read retries wait 1s + 2s before the failure is final.
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: 6000 },
);
expect(screen.getByRole("heading", { name: "График цены" })).toBeVisible();
expect(screen.getAllByRole("button", { name: "Повторить" })).toHaveLength(1);
const before = requests.length;
const companyBefore = requests.filter(url => url.pathname.endsWith("/company")).length;
failing.value = false;
fireEvent.click(retry);
await waitFor(() =>
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument());
expect(requests.filter(url => url.pathname.endsWith("/company")))
.toHaveLength(companyBefore + 1);
expect(requests.length - before).toBe(1);
expect(screen.getByText("Описание компании")).toBeVisible();
},
);
it("sends instrument-filtered continuation, restores it on returning to the filter and changes chart period", async () => { it("sends instrument-filtered continuation, restores it on returning to the filter and changes chart period", async () => {
const { requests } = setup(); const { requests } = setup();
await screen.findByText("Зачисление дивидендов"); await screen.findByText("Зачисление дивидендов");
@@ -459,7 +490,7 @@ describe("stock page", () => {
fireEvent.click(screen.getByRole("button", { name: "Далее" })); fireEvent.click(screen.getByRole("button", { name: "Далее" }));
controls.recoverOperations(); controls.recoverOperations();
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument(); expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
expect(screen.getByRole("heading", { name: "Моя история событий" })).toBeVisible(); expect(screen.getByRole("heading", { name: "История операций" })).toBeVisible();
}, },
); );
it("keeps the last quote without manual refresh", async () => { it("keeps the last quote without manual refresh", async () => {
+40 -52
View File
@@ -6,10 +6,7 @@ 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 { import { useAuthenticatedQuery } from "./authenticated-query";
useAuthenticatedQueries,
useAuthenticatedQuery,
} from "./authenticated-query";
import { apiQueryClient, configureAuthClient } from "./client"; import { apiQueryClient, configureAuthClient } from "./client";
const useSingleQuery = () => const useSingleQuery = () =>
@@ -17,58 +14,49 @@ const useSingleQuery = () =>
apiQueryClient.queryOptions("get", "/api/v1/brokerage-accounts"), apiQueryClient.queryOptions("get", "/api/v1/brokerage-accounts"),
); );
const useMultipleQueries = () =>
useAuthenticatedQueries([
apiQueryClient.queryOptions("get", "/api/v1/brokerage-accounts"),
])[0];
describe("useAuthenticatedQuery", () => { describe("useAuthenticatedQuery", () => {
it.each(["single", "multiple"])( it("keeps protected queries idle without a session and loads after session configuration", async () => {
"keeps %s protected queries idle without a session and loads after session configuration", const requests = vi.fn();
async (mode) => { server.use(
const requests = vi.fn(); http.get("*/api/v1/brokerage-accounts", () => {
server.use( requests();
http.get("*/api/v1/brokerage-accounts", () => {
requests();
return HttpResponse.json( return HttpResponse.json(
resource([ resource([
{ {
id: "account-1", id: "account-1",
name: "Основной", name: "Основной",
openedOn: "2024-08-13", openedOn: "2024-08-13",
type: "BROKERAGE", type: "BROKERAGE",
}, },
]), ]),
); );
}), }),
); );
const { result } = renderHook( const { result } = renderHook(useSingleQuery, {
mode === "single" ? useSingleQuery : useMultipleQueries, wrapper: createQueryWrapper().wrapper,
{ wrapper: createQueryWrapper().wrapper }, });
);
await new Promise(resolve => setTimeout(resolve, 0)); await new Promise(resolve => setTimeout(resolve, 0));
expect(requests).not.toHaveBeenCalled(); expect(requests).not.toHaveBeenCalled();
expect(result.current?.fetchStatus).toBe("idle"); expect(result.current?.fetchStatus).toBe("idle");
configureAuthClient({ configureAuthClient({
accessToken: () => "token", accessToken: () => "token",
clear: vi.fn(), clear: vi.fn(),
refresh: () => Promise.resolve(true), refresh: () => Promise.resolve(true),
}); });
await waitFor(() => expect(result.current?.isSuccess).toBe(true)); await waitFor(() => expect(result.current?.isSuccess).toBe(true));
expect(requests).toHaveBeenCalledOnce(); expect(requests).toHaveBeenCalledOnce();
expect(result.current?.data?.data).toEqual([ expect(result.current?.data?.data).toEqual([
{ {
id: "account-1", id: "account-1",
name: "Основной", name: "Основной",
openedOn: "2024-08-13", openedOn: "2024-08-13",
type: "BROKERAGE", type: "BROKERAGE",
}, },
]); ]);
}, });
);
}); });
+1 -21
View File
@@ -1,6 +1,5 @@
import { import {
type QueryKey, type QueryKey,
useQueries,
useQuery, useQuery,
type UseQueryOptions, type UseQueryOptions,
type UseQueryResult, type UseQueryResult,
@@ -12,25 +11,6 @@ import {
subscribeAuthenticatedSession, subscribeAuthenticatedSession,
} from "./client"; } from "./client";
function useAuthenticatedQueries<TData, TError, TQueryKey extends QueryKey>(
queries: UseQueryOptions<TData, TError, TData, TQueryKey>[],
) {
const hasSession = useHasAuthenticatedSession();
return useQueries({
queries: queries.map(
(options): UseQueryOptions<TData, TError, TData, TQueryKey> => ({
...options,
enabled: query =>
hasSession
&& (typeof options.enabled === "function"
? options.enabled(query)
: (options.enabled ?? true)),
}),
),
});
}
function useAuthenticatedQuery< function useAuthenticatedQuery<
TQueryFunctionData = unknown, TQueryFunctionData = unknown,
TError = Error, TError = Error,
@@ -58,4 +38,4 @@ function useHasAuthenticatedSession() {
); );
} }
export { useAuthenticatedQueries, useAuthenticatedQuery }; export { useAuthenticatedQuery };
+35 -35
View File
@@ -3,7 +3,12 @@ import createQueryClient from "openapi-react-query";
import type { paths } from "./generated/schema"; import type { paths } from "./generated/schema";
import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "./problem-details"; import {
ApiErrorCode,
apiErrorCode,
isApiErrorCode,
isBrokerageAccessLoss,
} from "./problem-details";
const HTTP_UNAUTHORIZED = 401; const HTTP_UNAUTHORIZED = 401;
const HTTP_REQUEST_TIMEOUT = 408; const HTTP_REQUEST_TIMEOUT = 408;
@@ -165,12 +170,8 @@ function isNetworkFailure(error: unknown): boolean {
} }
function isPermanentCode(code?: string): boolean { function isPermanentCode(code?: string): boolean {
return [ return isBrokerageAccessLoss(code)
ApiErrorCode.InvalidTbankToken, || isApiErrorCode(code, ApiErrorCode.Unauthorized);
ApiErrorCode.NotFound,
ApiErrorCode.TbankNotConnected,
ApiErrorCode.Unauthorized,
].some(permanent => isApiErrorCode(code, permanent));
} }
function isTransientReadFailure( function isTransientReadFailure(
@@ -207,51 +208,50 @@ function parseJson(body: string): unknown {
} }
async function readAttempt(request: Request): Promise<ReadAttempt> { async function readAttempt(request: Request): Promise<ReadAttempt> {
const controller = new AbortController(); // Manual timeout (not AbortSignal.timeout) so fake-timer tests can advance it.
const failure: { reason?: "abort" | "timeout" } = {}; const timeout = new AbortController();
const timer = setTimeout(() => timeout.abort(), GET_DEADLINE_MS);
const { promise: deadline, reject: rejectDeadline } const signal = AbortSignal.any([request.signal, timeout.signal]);
= Promise.withResolvers<never>();
const timeout = setTimeout(() => {
failure.reason = "timeout";
controller.abort();
rejectDeadline(abortError());
}, GET_DEADLINE_MS);
const abort = () => {
failure.reason = "abort";
controller.abort();
rejectDeadline(abortError());
};
request.signal.addEventListener("abort", abort, { once: true });
const timedRequest = new Request(request, { signal: controller.signal });
try { try {
const response = await Promise.race([fetch(timedRequest), deadline]); // MSW keeps a stalled body readable after abort, so keep the race.
const body = await Promise.race([response.text(), deadline]); const response = await Promise.race([
const problem = parseJson(body); fetch(new Request(request, { signal })),
rejectOnAbort(signal),
]);
const body = await Promise.race([response.text(), rejectOnAbort(signal)]);
return { return {
problem, problem: parseJson(body),
reason: "transient", reason: "transient",
response: new Response(body, response), response: new Response(body, response),
}; };
} }
catch (error) { catch (error) {
if (failure.reason === "abort") return { reason: "abort" }; if (request.signal.aborted) return { reason: "abort" };
if (failure.reason === "timeout" || isNetworkFailure(error)) // Timeout or network failure: retryable.
if (timeout.signal.aborted || isNetworkFailure(error))
return { reason: "transient" }; return { reason: "transient" };
throw error; throw error;
} }
finally { finally {
clearTimeout(timeout); clearTimeout(timer);
request.signal.removeEventListener("abort", abort);
} }
} }
function rejectOnAbort(signal: AbortSignal): Promise<never> {
return new Promise((_resolve, reject) => {
// The signal is either already aborted or one of two parents firing once.
signal.addEventListener(
"abort",
() => reject(abortError()),
{ once: true },
);
});
}
function retryAfterMs(response: Response): number | undefined { function retryAfterMs(response: Response): number | undefined {
const header = response.headers.get("Retry-After"); const header = response.headers.get("Retry-After");
if (!header) return undefined; if (!header) return undefined;
+80 -24
View File
@@ -775,6 +775,77 @@ export interface components {
*/ */
password: string; password: string;
}; };
RubMoneyInputDto: {
/** @enum {string} */
currency: "RUB";
value: string;
};
CreateExpenseOperationDto: {
/** Format: uuid */
id: string;
/** Format: uuid */
cardId: string;
amount: components["schemas"]["RubMoneyInputDto"];
/** Format: date */
date: string;
description?: string;
/**
* @description discriminator enum property added by openapi-typescript
* @enum {string}
*/
kind: "expense";
/** Format: uuid */
categoryId?: string;
};
CreateTopupOperationDto: {
/** Format: uuid */
id: string;
/** Format: uuid */
cardId: string;
amount: components["schemas"]["RubMoneyInputDto"];
/** Format: date */
date: string;
description?: string;
/**
* @description discriminator enum property added by openapi-typescript
* @enum {string}
*/
kind: "topup";
};
CreateTransferOperationDto: {
/** Format: uuid */
id: string;
/** Format: uuid */
cardId: string;
amount: components["schemas"]["RubMoneyInputDto"];
/** Format: date */
date: string;
description?: string;
/**
* @description discriminator enum property added by openapi-typescript
* @enum {string}
*/
kind: "transfer";
/** Format: uuid */
targetCardId: string;
};
CreateRefundOperationDto: {
/** Format: uuid */
id: string;
/** Format: uuid */
cardId: string;
amount: components["schemas"]["RubMoneyInputDto"];
/** Format: date */
date: string;
description?: string;
/**
* @description discriminator enum property added by openapi-typescript
* @enum {string}
*/
kind: "refund";
/** Format: uuid */
originalExpenseId: string;
};
MoneyDto: { MoneyDto: {
currency: string; currency: string;
value: string; value: string;
@@ -792,11 +863,6 @@ export interface components {
archivedAt: string | null; archivedAt: string | null;
version: number; version: number;
}; };
RubMoneyInputDto: {
/** @enum {string} */
currency: "RUB";
value: string;
};
CreateBankCardDto: { CreateBankCardDto: {
/** Format: uuid */ /** Format: uuid */
id: string; id: string;
@@ -841,24 +907,6 @@ export interface components {
net: components["schemas"]["MoneyDto"]; net: components["schemas"]["MoneyDto"];
categories: components["schemas"]["BankSummaryCategoryDto"][]; categories: components["schemas"]["BankSummaryCategoryDto"][];
}; };
CreateBankOperationDto: {
/** Format: uuid */
id: string;
/** @enum {string} */
kind: "expense" | "topup" | "transfer" | "refund";
/** Format: uuid */
cardId: string;
/** Format: uuid */
targetCardId?: string;
/** Format: uuid */
categoryId?: string;
/** Format: uuid */
originalExpenseId?: string;
amount: components["schemas"]["RubMoneyInputDto"];
/** Format: date */
date: string;
description?: string;
};
BankOperationDto: { BankOperationDto: {
id: string; id: string;
/** @enum {string} */ /** @enum {string} */
@@ -1232,6 +1280,12 @@ export interface components {
data: components["schemas"]["IncomeAnalyticsDto"] | null; data: components["schemas"]["IncomeAnalyticsDto"] | null;
meta: components["schemas"]["IncomeAnalyticsMetaDto"]; meta: components["schemas"]["IncomeAnalyticsMetaDto"];
}; };
UpcomingEventsWindowDto: {
/** Format: date */
from: string;
/** Format: date */
to: string;
};
UpcomingEventDto: { UpcomingEventDto: {
account?: components["schemas"]["AccountReferenceDto"]; account?: components["schemas"]["AccountReferenceDto"];
/** @enum {string} */ /** @enum {string} */
@@ -1252,6 +1306,8 @@ export interface components {
accountId: string; accountId: string;
/** Format: date-time */ /** Format: date-time */
calculatedAt: string; calculatedAt: string;
/** @description Inclusive UTC window the saved forecast was calculated for. Unchanged by the requested from/to filter. */
window: components["schemas"]["UpcomingEventsWindowDto"];
events: components["schemas"]["UpcomingEventDto"][]; events: components["schemas"]["UpcomingEventDto"][];
incomeTotalsByCurrency: components["schemas"]["MoneyDto"][]; incomeTotalsByCurrency: components["schemas"]["MoneyDto"][];
}; };
@@ -2590,7 +2646,7 @@ export interface operations {
}; };
requestBody: { requestBody: {
content: { content: {
"application/json": components["schemas"]["CreateBankOperationDto"]; "application/json": components["schemas"]["CreateExpenseOperationDto"] | components["schemas"]["CreateTopupOperationDto"] | components["schemas"]["CreateTransferOperationDto"] | components["schemas"]["CreateRefundOperationDto"];
}; };
}; };
responses: { responses: {
+8 -1
View File
@@ -7,7 +7,14 @@ export {
configureAuthClient, configureAuthClient,
} from "./client"; } from "./client";
export type { paths } from "./generated/schema"; export type { paths } from "./generated/schema";
export { ApiErrorCode, apiErrorCode, isApiErrorCode } from "./problem-details"; export {
ApiErrorCode,
apiErrorCode,
isApiErrorCode,
isBrokerageAccessLoss,
} from "./problem-details";
export { isGetUnder } from "./query-predicate";
export { isReadFailureExhausted, readRetry } from "./read-failure";
export { export {
type InvestmentResourceMeta, type InvestmentResourceMeta,
+13 -1
View File
@@ -1,6 +1,11 @@
import { expect, it } from "vitest"; import { expect, it } from "vitest";
import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "./problem-details"; import {
ApiErrorCode,
apiErrorCode,
isApiErrorCode,
isBrokerageAccessLoss,
} from "./problem-details";
it("matches known codes and preserves unknown wire codes for fallback handling", () => { it("matches known codes and preserves unknown wire codes for fallback handling", () => {
expect( expect(
@@ -16,3 +21,10 @@ it("matches known codes and preserves unknown wire codes for fallback handling",
expect(apiErrorCode(null)).toBeUndefined(); expect(apiErrorCode(null)).toBeUndefined();
expect(apiErrorCode({})).toBeUndefined(); expect(apiErrorCode({})).toBeUndefined();
}); });
it("separates brokerage access loss from UNAUTHORIZED, temporary and unknown codes", () => {
for (const code of ["INVALID_TBANK_TOKEN", "NOT_FOUND", "TBANK_NOT_CONNECTED"])
expect(isBrokerageAccessLoss(code)).toBe(true);
for (const code of ["UNAUTHORIZED", "TBANK_UNAVAILABLE", "FUTURE_PROVIDER_ERROR", undefined])
expect(isBrokerageAccessLoss(code)).toBe(false);
});
+11 -1
View File
@@ -41,4 +41,14 @@ function isApiErrorCode(
return value === expected; return value === expected;
} }
export { ApiErrorCode, apiErrorCode, isApiErrorCode }; // Confirmed loss of access to the brokerage data. UNAUTHORIZED is a session
// failure with its own refresh/sign-out path, so it is deliberately excluded.
function isBrokerageAccessLoss(code?: string): boolean {
return [
ApiErrorCode.InvalidTbankToken,
ApiErrorCode.NotFound,
ApiErrorCode.TbankNotConnected,
].some(loss => isApiErrorCode(code, loss));
}
export { ApiErrorCode, apiErrorCode, isApiErrorCode, isBrokerageAccessLoss };
+26
View File
@@ -0,0 +1,26 @@
import { describe, expect, it } from "vitest";
import { isGetUnder } from "./query-predicate";
describe("isGetUnder", () => {
it("matches the root itself and nested paths for get queries only", () => {
const predicate = isGetUnder(["/api/v1/bank-cards"]);
expect(predicate(["get", "/api/v1/bank-cards"])).toBe(true);
expect(predicate(["get", "/api/v1/bank-cards/{id}"])).toBe(true);
expect(predicate(["get", "/api/v1/bank-cards"])).toBe(true);
expect(predicate(["get", "/api/v1/bank-cardsx"])).toBe(false);
expect(predicate(["post", "/api/v1/bank-cards"])).toBe(false);
expect(predicate(["get", "/api/v1/other"])).toBe(false);
});
it("checks every root and tolerates init and non-string parts", () => {
const predicate = isGetUnder(["/api/v1/stocks", "/api/v1/bonds"]);
expect(predicate(["get", "/api/v1/stocks/{uid}/quote", { params: {} }]))
.toBe(true);
expect(predicate(["get", "/api/v1/bonds"])).toBe(true);
expect(predicate([undefined, "/api/v1/stocks"])).toBe(false);
expect(predicate(["get", undefined])).toBe(false);
});
});
+18
View File
@@ -0,0 +1,18 @@
import type { QueryKey } from "@tanstack/react-query";
// openapi-react-query shapes query keys as [method, path, init].
function isGetUnder(roots: readonly string[]) {
const predicate = (queryKey: QueryKey) => {
const [method, path] = queryKey as readonly [unknown, unknown];
return (
method === "get"
&& typeof path === "string"
&& roots.some(root => path === root || path.startsWith(`${root}/`))
);
};
return predicate;
}
export { isGetUnder };
+80
View File
@@ -0,0 +1,80 @@
import { describe, expect, it, vi } from "vitest";
import { isReadFailureExhausted, readRetry } from "./read-failure";
const transient = { code: "TBANK_UNAVAILABLE", status: 503 };
const settled = { isError: true, isFetching: false };
describe("isReadFailureExhausted", () => {
it("is true for a settled transient failure, even without a code", () => {
expect(isReadFailureExhausted({ ...settled, error: transient })).toBe(true);
expect(
isReadFailureExhausted({
...settled,
error: new TypeError("Network request failed"),
}),
).toBe(true);
});
it("stays true while a manual retry runs and false without a failure", () => {
expect(
isReadFailureExhausted({
error: transient,
isError: true,
isFetching: true,
}),
).toBe(true);
expect(
isReadFailureExhausted({
error: null,
isError: false,
isFetching: false,
}),
).toBe(false);
});
it.each([
"INVALID_TBANK_TOKEN",
"NOT_FOUND",
"TBANK_NOT_CONNECTED",
"UNAUTHORIZED",
])("is false for %s, which has its own action", (code) => {
expect(isReadFailureExhausted({ ...settled, error: { code } })).toBe(false);
});
});
describe("readRetry", () => {
it("refetches only the failed reads and reports a running retry", () => {
const failedRefetch = vi.fn(() => Promise.resolve());
const healthyRefetch = vi.fn(() => Promise.resolve());
const retry = readRetry([
{ ...settled, error: transient, refetch: failedRefetch },
{
error: null,
isError: false,
isFetching: true,
refetch: healthyRefetch,
},
{ ...settled, error: { code: "NOT_FOUND" }, refetch: healthyRefetch },
]);
expect(retry).toMatchObject({ exhausted: true, retrying: false });
retry.onRetry();
expect(failedRefetch).toHaveBeenCalledOnce();
expect(healthyRefetch).not.toHaveBeenCalled();
});
it("is not exhausted while every read is healthy", () => {
expect(
readRetry([
{
error: null,
isError: false,
isFetching: false,
refetch: vi.fn(() => Promise.resolve()),
},
]).exhausted,
).toBe(false);
});
});
+37
View File
@@ -0,0 +1,37 @@
import {
ApiErrorCode,
apiErrorCode,
isApiErrorCode,
isBrokerageAccessLoss,
} from "./problem-details";
type ReadState = { error: unknown; isError: boolean; isFetching: boolean };
type RetryableRead = ReadState & { refetch: () => Promise<unknown> };
// Automatic retries run inside one fetchAppRead call and Query's own retry is
// off, so a query in the error state has exhausted them. The state stays
// "error" while a manual retry runs, which keeps the warning in place. Access
// loss and a lost session keep their own actions and never offer a plain retry.
function isReadFailureExhausted(state: ReadState): boolean {
if (!state.isError) return false;
const code = apiErrorCode(state.error);
return !isBrokerageAccessLoss(code)
&& !isApiErrorCode(code, ApiErrorCode.Unauthorized);
}
// Retry repeats only the GET of the failed queries, never a source sync.
function readRetry(reads: RetryableRead[]) {
const failed = reads.filter(read => isReadFailureExhausted(read));
return {
exhausted: failed.length > 0,
onRetry: () => {
void Promise.allSettled(failed.map(read => read.refetch()));
},
retrying: failed.some(read => read.isFetching),
};
}
export { isReadFailureExhausted, readRetry };
-73
View File
@@ -37,38 +37,6 @@ function auth() {
} }
describe("persistent resource query lifecycle", () => { describe("persistent resource query lifecycle", () => {
it("observes once into the canonical cache without another import", async () => {
auth();
const modes: (null | string)[] = [];
let observations = 0;
server.use(
http.get(
"*/api/v1/brokerage-accounts/:accountId/portfolio",
({ request }) => {
const mode = new URL(request.url).searchParams.get("sync");
modes.push(mode);
if (mode) observations += 1;
return HttpResponse.json(
resource(snapshot, {
dataRevision: observations > 0 ? "new" : "old",
}),
);
},
),
);
const { queryClient, wrapper } = createQueryWrapper();
const { result } = renderHook(() => usePrivateResource("a"), { wrapper });
await waitFor(() => expect(result.current.isSuccess).toBe(true));
await act(() => result.current.observe());
await waitFor(() => expect(result.current.meta?.dataRevision).toBe("new"));
expect(modes).toEqual([null, "observe"]);
expect(queryClient.getQueryCache().getAll()).toHaveLength(1);
expect(
queryClient.getQueryData(resourceOptions("a").queryKey),
).toMatchObject({ data: snapshot, meta: { dataRevision: "new" } });
});
it("keeps successful HTTP state distinct from missing or failed source data", async () => { it("keeps successful HTTP state distinct from missing or failed source data", async () => {
auth(); auth();
server.use( server.use(
@@ -136,47 +104,6 @@ describe("persistent resource query lifecycle", () => {
expect(result.current.isSuccess).toBe(true); expect(result.current.isSuccess).toBe(true);
expect(result.current.isPending).toBe(false); expect(result.current.isPending).toBe(false);
}); });
it("keeps the observed snapshot when an older query finishes later", async () => {
auth();
const { promise: blocked, resolve: release }
= Promise.withResolvers<void>();
let isStarted = false;
server.use(
http.get(
"*/api/v1/brokerage-accounts/:accountId/portfolio",
async ({ request }) => {
if (!new URL(request.url).searchParams.has("sync")) {
isStarted = true;
await blocked;
return HttpResponse.json(resource({ ...snapshot, isStale: true }));
}
return HttpResponse.json(resource(snapshot));
},
),
);
const { result } = renderHook(() => usePrivateResource("a"), {
wrapper: createQueryWrapper().wrapper,
});
await waitFor(() => expect(isStarted).toBe(true));
// Capture the observation promise before releasing the old handler; the
// final assertion must follow its settlement, not the handler release.
let observation: Promise<unknown> = Promise.resolve();
await act(async () => {
observation = result.current.observe() ?? Promise.resolve();
await observation;
});
await act(async () => {
release();
await observation;
});
expect(result.current.data).toEqual(snapshot);
});
it("clears private snapshots on confirmed access loss and fences another pending success", async () => { it("clears private snapshots on confirmed access loss and fences another pending success", async () => {
auth(); auth();
let isDenied = false; let isDenied = false;
+6 -65
View File
@@ -1,6 +1,5 @@
import { import {
type QueryClient, type QueryClient,
type QueryFunctionContext,
useQueryClient, useQueryClient,
type UseQueryOptions, type UseQueryOptions,
} from "@tanstack/react-query"; } from "@tanstack/react-query";
@@ -9,8 +8,7 @@ import { useEffect } from "react";
import type { components, paths } from "./generated/schema"; import type { components, paths } from "./generated/schema";
import { useAuthenticatedQuery } from "./authenticated-query"; import { useAuthenticatedQuery } from "./authenticated-query";
import { getAuthenticatedSessionSnapshot } from "./client"; import { apiErrorCode, isBrokerageAccessLoss } from "./problem-details";
import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "./problem-details";
type InvestmentResourceMeta = components["schemas"]["InvestmentResourceMetaDto"]; type InvestmentResourceMeta = components["schemas"]["InvestmentResourceMetaDto"];
@@ -31,7 +29,7 @@ type ResourcePath = {
type ResourceQueryKey = readonly [ type ResourceQueryKey = readonly [
"get", "get",
ResourcePath, ResourcePath,
{ params?: { path?: object; query?: { sync?: "observe" } } }?, { params?: { path?: object; query?: object } }?,
]; ];
function invalidateResourceAccess( function invalidateResourceAccess(
@@ -39,15 +37,7 @@ function invalidateResourceAccess(
group: string, group: string,
error: unknown, error: unknown,
) { ) {
const errorCode = apiErrorCode(error); if (!isBrokerageAccessLoss(apiErrorCode(error))) return;
if (
[
ApiErrorCode.InvalidTbankToken,
ApiErrorCode.NotFound,
ApiErrorCode.TbankNotConnected,
].every(code => !isApiErrorCode(errorCode, code))
)
return;
const affected = { const affected = {
predicate: (cached: { meta?: Record<string, unknown> }) => predicate: (cached: { meta?: Record<string, unknown> }) =>
@@ -65,22 +55,6 @@ function invalidateResourceAccess(
}); });
} }
// Keep endpoint and parameters intact. The generated queryFn accepts the
// optional sync mode even for a cache key originally created without init.
function observationKey<K extends readonly unknown[]>(key: K): K {
const [method, path, init] = key as unknown as [
string,
string,
{ params?: { path?: object; query?: object } }?,
];
return [method, path, {
...init,
params: { ...init?.params, query: { ...init?.params?.query, sync: "observe" } },
}] as unknown as K;
}
// Observation changes transport mode, never the generated cache identity.
function useResourceQuery< function useResourceQuery<
T extends Resource, T extends Resource,
E = unknown, E = unknown,
@@ -100,50 +74,17 @@ function useResourceQuery<
if (group) invalidateResourceAccess(client, group, query.error); if (group) invalidateResourceAccess(client, group, query.error);
}, [client, group, query.error]); }, [client, group, query.error]);
const observe = async () => {
const queryFunction = options.queryFn;
if (
typeof queryFunction !== "function"
|| !query.isEnabled
|| !getAuthenticatedSessionSnapshot()
)
return;
// Cancellation is synchronous; start the replacement in the same boundary.
void client.cancelQueries({ exact: true, queryKey: options.queryKey });
return client.query({
...options,
queryFn: async (context: QueryFunctionContext<K>) => {
const queryKey = observationKey(context.queryKey);
return queryFunction({ ...context, queryKey });
},
retry: false,
// Keep the cache envelope independent of observer projection.
select: undefined,
staleTime: 0,
});
};
const data: T["data"] | undefined = query.data?.data; const data: T["data"] | undefined = query.data?.data;
const meta: T["meta"] | undefined = query.data?.meta; const meta: T["meta"] | undefined = query.data?.meta;
// Project resource fields; refetch still returns the transport envelope. // Project resource fields; refetch still returns the transport envelope.
// queryKey is kept for screen-sync cache bookkeeping.
return { return {
// eslint-disable-next-line @tanstack/query/no-rest-destructuring -- Single projection point; consumers already depend on the whole query state.
...query,
data: data ?? undefined, data: data ?? undefined,
error: query.error,
fetchStatus: query.fetchStatus,
isEnabled: query.isEnabled,
isError: query.isError,
isFetching: query.isFetching,
isLoading: query.isLoading,
isPending: query.isPending,
isSuccess: query.isSuccess,
meta, meta,
observe,
queryKey: options.queryKey, queryKey: options.queryKey,
refetch: query.refetch,
status: query.status,
sync: query.data && "sync" in query.data ? query.data.sync : undefined, sync: query.data && "sync" in query.data ? query.data.sync : undefined,
}; };
} }
+230 -72
View File
@@ -1053,7 +1053,29 @@
"content": { "content": {
"application/json": { "application/json": {
"schema": { "schema": {
"$ref": "#/components/schemas/CreateBankOperationDto" "oneOf": [
{
"$ref": "#/components/schemas/CreateExpenseOperationDto"
},
{
"$ref": "#/components/schemas/CreateTopupOperationDto"
},
{
"$ref": "#/components/schemas/CreateTransferOperationDto"
},
{
"$ref": "#/components/schemas/CreateRefundOperationDto"
}
],
"discriminator": {
"propertyName": "kind",
"mapping": {
"expense": "#/components/schemas/CreateExpenseOperationDto",
"topup": "#/components/schemas/CreateTopupOperationDto",
"transfer": "#/components/schemas/CreateTransferOperationDto",
"refund": "#/components/schemas/CreateRefundOperationDto"
}
}
} }
} }
} }
@@ -5340,6 +5362,187 @@
"password" "password"
] ]
}, },
"RubMoneyInputDto": {
"type": "object",
"properties": {
"currency": {
"type": "string",
"enum": [
"RUB"
]
},
"value": {
"type": "string",
"pattern": "^-?[0-9]+(\\.[0-9]{1,2})?$"
}
},
"required": [
"currency",
"value"
]
},
"CreateExpenseOperationDto": {
"type": "object",
"properties": {
"id": {
"type": "string",
"format": "uuid"
},
"cardId": {
"type": "string",
"format": "uuid"
},
"amount": {
"$ref": "#/components/schemas/RubMoneyInputDto"
},
"date": {
"type": "string",
"format": "date"
},
"description": {
"type": "string",
"maxLength": 500
},
"kind": {
"type": "string",
"enum": [
"expense"
]
},
"categoryId": {
"type": "string",
"format": "uuid"
}
},
"required": [
"id",
"cardId",
"amount",
"date",
"kind"
]
},
"CreateTopupOperationDto": {
"type": "object",
"properties": {
"id": {
"type": "string",
"format": "uuid"
},
"cardId": {
"type": "string",
"format": "uuid"
},
"amount": {
"$ref": "#/components/schemas/RubMoneyInputDto"
},
"date": {
"type": "string",
"format": "date"
},
"description": {
"type": "string",
"maxLength": 500
},
"kind": {
"type": "string",
"enum": [
"topup"
]
}
},
"required": [
"id",
"cardId",
"amount",
"date",
"kind"
]
},
"CreateTransferOperationDto": {
"type": "object",
"properties": {
"id": {
"type": "string",
"format": "uuid"
},
"cardId": {
"type": "string",
"format": "uuid"
},
"amount": {
"$ref": "#/components/schemas/RubMoneyInputDto"
},
"date": {
"type": "string",
"format": "date"
},
"description": {
"type": "string",
"maxLength": 500
},
"kind": {
"type": "string",
"enum": [
"transfer"
]
},
"targetCardId": {
"type": "string",
"format": "uuid"
}
},
"required": [
"id",
"cardId",
"amount",
"date",
"kind",
"targetCardId"
]
},
"CreateRefundOperationDto": {
"type": "object",
"properties": {
"id": {
"type": "string",
"format": "uuid"
},
"cardId": {
"type": "string",
"format": "uuid"
},
"amount": {
"$ref": "#/components/schemas/RubMoneyInputDto"
},
"date": {
"type": "string",
"format": "date"
},
"description": {
"type": "string",
"maxLength": 500
},
"kind": {
"type": "string",
"enum": [
"refund"
]
},
"originalExpenseId": {
"type": "string",
"format": "uuid"
}
},
"required": [
"id",
"cardId",
"amount",
"date",
"kind",
"originalExpenseId"
]
},
"MoneyDto": { "MoneyDto": {
"type": "object", "type": "object",
"properties": { "properties": {
@@ -5411,25 +5614,6 @@
"version" "version"
] ]
}, },
"RubMoneyInputDto": {
"type": "object",
"properties": {
"currency": {
"type": "string",
"enum": [
"RUB"
]
},
"value": {
"type": "string",
"pattern": "^-?[0-9]+(\\.[0-9]{1,2})?$"
}
},
"required": [
"currency",
"value"
]
},
"CreateBankCardDto": { "CreateBankCardDto": {
"type": "object", "type": "object",
"properties": { "properties": {
@@ -5599,58 +5783,6 @@
"categories" "categories"
] ]
}, },
"CreateBankOperationDto": {
"type": "object",
"properties": {
"id": {
"type": "string",
"format": "uuid"
},
"kind": {
"type": "string",
"enum": [
"expense",
"topup",
"transfer",
"refund"
]
},
"cardId": {
"type": "string",
"format": "uuid"
},
"targetCardId": {
"type": "string",
"format": "uuid"
},
"categoryId": {
"type": "string",
"format": "uuid"
},
"originalExpenseId": {
"type": "string",
"format": "uuid"
},
"amount": {
"$ref": "#/components/schemas/RubMoneyInputDto"
},
"date": {
"type": "string",
"format": "date"
},
"description": {
"type": "string",
"maxLength": 500
}
},
"required": [
"id",
"kind",
"cardId",
"amount",
"date"
]
},
"BankOperationDto": { "BankOperationDto": {
"type": "object", "type": "object",
"properties": { "properties": {
@@ -7243,6 +7375,23 @@
"meta" "meta"
] ]
}, },
"UpcomingEventsWindowDto": {
"type": "object",
"properties": {
"from": {
"type": "string",
"format": "date"
},
"to": {
"type": "string",
"format": "date"
}
},
"required": [
"from",
"to"
]
},
"UpcomingEventDto": { "UpcomingEventDto": {
"type": "object", "type": "object",
"properties": { "properties": {
@@ -7324,6 +7473,14 @@
"type": "string", "type": "string",
"format": "date-time" "format": "date-time"
}, },
"window": {
"description": "Inclusive UTC window the saved forecast was calculated for. Unchanged by the requested from/to filter.",
"allOf": [
{
"$ref": "#/components/schemas/UpcomingEventsWindowDto"
}
]
},
"events": { "events": {
"type": "array", "type": "array",
"items": { "items": {
@@ -7340,6 +7497,7 @@
"required": [ "required": [
"accountId", "accountId",
"calculatedAt", "calculatedAt",
"window",
"events", "events",
"incomeTotalsByCurrency" "incomeTotalsByCurrency"
] ]
+29 -26
View File
@@ -51,7 +51,6 @@ const ru = {
incomplete: "{{category}}: доля неизвестна", incomplete: "{{category}}: доля неизвестна",
label: "Структура в {{currency}}: {{value}}", label: "Структура в {{currency}}: {{value}}",
}, },
subtitle: "Ваши инвестиции по счетам",
summaryEmpty: "Нет текущих сумм", summaryEmpty: "Нет текущих сумм",
summaryExcluded_few: summaryExcluded_few:
"Ещё {{count}} счёта не включены: нет актуального портфеля", "Ещё {{count}} счёта не включены: нет актуального портфеля",
@@ -275,7 +274,7 @@ const ru = {
COUPON_TYPE_VARIABLE: "Переменный", COUPON_TYPE_VARIABLE: "Переменный",
}, },
couponWindow: couponWindow:
"Календарь выпуска с {{from}} по {{to}}. Личные зачисления показаны в истории событий.", "Календарь выпуска с {{from}} по {{to}}. Полученные выплаты показаны в истории операций.",
couponYield: "Текущая купонная доходность, годовых", couponYield: "Текущая купонная доходность, годовых",
couponYieldNote: couponYieldNote:
"Купонная доходность = ближайший купон × 365 / дней в купонном периоде / цена без НКД × 100 %. Это годовая оценка при сохранении размера купона и номинала, без налогов, комиссий и реинвестирования; для плавающего или переменного купона будущий доход изменится.", "Купонная доходность = ближайший купон × 365 / дней в купонном периоде / цена без НКД × 100 %. Это годовая оценка при сохранении размера купона и номинала, без налогов, комиссий и реинвестирования; для плавающего или переменного купона будущий доход изменится.",
@@ -344,10 +343,10 @@ const ru = {
breadcrumbs: { breadcrumbs: {
accountFallback: "Счет", accountFallback: "Счет",
accounts: "Брокерские счета", accounts: "Брокерские счета",
events: "Будущие события", events: "Предстоящие события",
income: "Пассивный доход", income: "Пассивный доход",
label: "Хлебные крошки", label: "Хлебные крошки",
operations: "Операции", operations: "История операций",
settings: "Настройки", settings: "Настройки",
}, },
entryGroup: { entryGroup: {
@@ -357,19 +356,20 @@ const ru = {
dateKind: { event: "Дата события", registry: "Дата реестра" }, dateKind: { event: "Дата события", registry: "Дата реестра" },
emptyText: emptyText:
"Доступные источники не сообщили о купонах, дивидендах, погашениях или офертах в этом периоде.", "Доступные источники не сообщили о купонах, дивидендах, погашениях или офертах в этом периоде.",
emptyTitle: "За выбранный период событий не найдено", emptyTitle: "На выбранный период предстоящих событий не найдено",
errorText: "Попробуйте запросить прогноз еще раз.", errorText: "Попробуйте загрузить предстоящие события ещё раз.",
errorTitle: "Не удалось загрузить будущие события", errorTitle: "Не удалось загрузить предстоящие события",
forecastWindow: "Прогноз от {{date}} на {{from}} – {{to}}",
hint: "Прогноз рассчитан по текущей позиции до налогов. Покрытие зависит от доступных данных MOEX.", hint: "Прогноз рассчитан по текущей позиции до налогов. Покрытие зависит от доступных данных MOEX.",
noAmount: "Сумма неизвестна", noAmount: "Сумма неизвестна",
open: "Открыть будущие события", open: "Открыть предстоящие события",
projectedAmount: "Ожидаемая сумма", projectedAmount: "Ожидаемая сумма",
recentEmpty: "На ближайшие 30 дней событий не найдено.", recentEmpty: "На ближайшие 30 дней предстоящих событий не найдено.",
recentError: "Не удалось загрузить будущие события.", recentError: "Не удалось загрузить предстоящие события.",
recentLoading: "Загрузка будущих событий", recentLoading: "Загрузка предстоящих событий",
recentTitle: "Будущие события", recentTitle: "Предстоящие события",
retry: "Повторить", retry: "Повторить",
title: "Будущие события", title: "Предстоящие события",
type: { type: {
coupon: "Купон", coupon: "Купон",
dividend: "Дивиденд", dividend: "Дивиденд",
@@ -421,7 +421,9 @@ const ru = {
}, },
history: "История догружается", history: "История догружается",
partial: "Период загружен не полностью", partial: "Период загружен не полностью",
readFailed: "Не удалось обновить данные",
refresh: "Обновить", refresh: "Обновить",
retry: "Повторить",
sourceTime: "Данные на {{date}}", sourceTime: "Данные на {{date}}",
stale: "Данные требуют обновления", stale: "Данные требуют обновления",
syncFailed: syncFailed:
@@ -441,6 +443,7 @@ const ru = {
transfer: "Перевод", transfer: "Перевод",
}, },
clearPeriod: "Очистить период", clearPeriod: "Очистить период",
couponPayment: "Выплата купонов {{instrument}}",
emptyText: "Измените период или фильтры.", emptyText: "Измените период или фильтры.",
emptyTitle: "Операций нет", emptyTitle: "Операций нет",
entryLabel: { entryLabel: {
@@ -449,14 +452,14 @@ const ru = {
dividend: "Дивиденд", dividend: "Дивиденд",
}, },
}, },
errorText: "Попробуйте запросить операции еще раз.", errorText: "Попробуйте загрузить историю операций ещё раз.",
errorTitle: "Не удалось загрузить журнал", errorTitle: "Не удалось загрузить историю операций",
from: "С", from: "С",
next: "Далее", next: "Далее",
noInstrument: "Без инструмента", noInstrument: "Без инструмента",
noMoney: "Без движения денег", noMoney: "Без движения денег",
occurredAt: "Исполнено {{date}}", occurredAt: "Исполнено {{date}}",
open: "Открыть журнал", open: "Открыть историю операций",
operationType: { operationType: {
buy: "Покупка", buy: "Покупка",
coupon: "Купон", coupon: "Купон",
@@ -473,13 +476,13 @@ const ru = {
previous: "Назад", previous: "Назад",
price: "Цена: {{value}}", price: "Цена: {{value}}",
quantity: "{{value}} шт.", quantity: "{{value}} шт.",
recentEmpty: "Последних событий пока нет.", recentEmpty: "Последних операций пока нет.",
recentError: "Не удалось загрузить последние события.", recentError: "Не удалось загрузить последние операции.",
recentLoading: "Загрузка последних событий", recentLoading: "Загрузка последних операций",
recentTitle: "Последние события", recentTitle: "Последние операции",
reset: "Сбросить", reset: "Сбросить",
retry: "Повторить", retry: "Повторить",
title: "Журнал операций", title: "История операций",
to: "По", to: "По",
}, },
navigation: { navigation: {
@@ -580,9 +583,9 @@ const ru = {
}, },
tabs: { tabs: {
cash: "Деньги", cash: "Деньги",
events: "События", events: "Предстоящие события",
income: "Доход", income: "Доход",
operations: "Операции", operations: "История операций",
positions: "Позиции", positions: "Позиции",
}, },
title: "Портфель", title: "Портфель",
@@ -635,10 +638,10 @@ const ru = {
dividendNote: dividendNote:
"Личная сумма — оценка по текущему количеству, не гарантия выплаты. Налоги не сопоставлены; дата выплаты компании может отличаться от дня зачисления на ваш счёт.", "Личная сумма — оценка по текущему количеству, не гарантия выплаты. Налоги не сопоставлены; дата выплаты компании может отличаться от дня зачисления на ваш счёт.",
dividendWindow: dividendWindow:
"События компании с {{from}} по {{to}}. Личные зачисления показаны отдельно в истории событий.", "События компании с {{from}} по {{to}}. Полученные выплаты показаны отдельно в истории операций.",
estimateUnavailable: estimateUnavailable:
"Данные позиции не удалось обновить. Личная оценка недоступна или рассчитана по сохранённой позиции.", "Данные позиции не удалось обновить. Личная оценка недоступна или рассчитана по сохранённой позиции.",
eventFilter: "Фильтр событий", eventFilter: "Фильтр операций",
eventPrice: "Цена: {{value}}", eventPrice: "Цена: {{value}}",
eventQuantity: "{{value}} шт.", eventQuantity: "{{value}} шт.",
exchanges: { exchanges: {
@@ -654,7 +657,7 @@ const ru = {
trades: "Сделки", trades: "Сделки",
}, },
forming: "Формируется", forming: "Формируется",
history: "Моя история событий", history: "История операций",
historyNote: historyNote:
"Операции по этой акции на доступных открытых счетах, включая периоды до текущего года. Дата сделки — дата операции брокера; количество — исполненная часть. История закрытых счетов не включена.", "Операции по этой акции на доступных открытых счетах, включая периоды до текущего года. Дата сделки — дата операции брокера; количество — исполненная часть. История закрытых счетов не включена.",
incomplete: "Последняя свеча ещё формируется: её цена может измениться.", incomplete: "Последняя свеча ещё формируется: её цена может измениться.",
+1 -1
View File
@@ -33,7 +33,7 @@ describe("shared display helpers", () => {
"-1 234 567,89 ₽", "-1 234 567,89 ₽",
); );
expect(formatMoney({ currency: "RUB", value: "10" })).toBe("10 ₽"); expect(formatMoney({ currency: "RUB", value: "10" })).toBe("10 ₽");
expect(formatMoney({ currency: "USD", value: "0.5" })).toBe("0,5 USD"); expect(formatMoney({ currency: "USD", value: "0.5" })).toBe("0,5 $");
expect(formatMoney({ currency: "RUB", value: "0001234.50" })).toBe( expect(formatMoney({ currency: "RUB", value: "0001234.50" })).toBe(
"0 001 234,50 ₽", "0 001 234,50 ₽",
); );
+4 -1
View File
@@ -86,7 +86,10 @@ function formatMoney(
? `${integerPart}.${normalizedFraction}` ? `${integerPart}.${normalizedFraction}`
: integerPart; : integerPart;
const currency = money.currency === "RUB" ? "₽" : money.currency; let currency = money.currency;
if (currency === "RUB") currency = "₽";
else if (currency === "USD") currency = "$";
const formatted = `${formatDecimal(decimal)} ${currency}`; const formatted = `${formatDecimal(decimal)} ${currency}`;
if (!withSign) return formatted; if (!withSign) return formatted;
@@ -4,6 +4,40 @@
background: var(--wl-color-subtle); background: var(--wl-color-subtle);
} }
.flat {
background: var(--wl-color-surface);
}
.flat > :first-child {
border: 0;
background: transparent;
}
.flat .accounts {
padding-bottom: var(--mantine-spacing-md);
}
.flat .accountRow {
padding-block: var(--mantine-spacing-md);
}
.flat .accountRow:last-child {
padding-bottom: 0;
}
.flat .accountRow > :first-child {
min-width: 0;
overflow-wrap: anywhere;
}
.positive {
color: var(--wl-color-positive);
}
.negative {
color: var(--wl-color-negative);
}
.accounts { .accounts {
padding: 0 var(--mantine-spacing-md) var(--mantine-spacing-sm); padding: 0 var(--mantine-spacing-md) var(--mantine-spacing-sm);
list-style: none; list-style: none;
@@ -38,4 +72,12 @@
.accountRow { .accountRow {
align-items: flex-start; align-items: flex-start;
} }
.flat .accountRow {
flex-wrap: wrap;
}
.flat .accountValue {
white-space: normal;
}
} }
+23 -14
View File
@@ -9,11 +9,15 @@ import classes from "./EntryGroup.module.css";
type AccountRowProps = { type AccountRowProps = {
accountName: string; accountName: string;
tone?: "negative"
| "neutral"
| "positive";
value: string; value: string;
valueLabel: string; valueLabel: string;
}; };
type EntryGroupProps = PropsWithChildren<{ type EntryGroupProps = PropsWithChildren<{
flat?: boolean;
header: ReactNode; header: ReactNode;
label: string; label: string;
}>; }>;
@@ -25,13 +29,14 @@ type EntryGroupTotalProps = {
const AccountRow: FC<AccountRowProps> = (props) => { const AccountRow: FC<AccountRowProps> = (props) => {
const accessibleName = `${props.accountName}, ${props.value}`; const accessibleName = `${props.accountName}, ${props.value}`;
const valueClass = props.tone ? classes[props.tone] : undefined;
return ( return (
<li aria-label={accessibleName} className={classes.accountRow}> <li aria-label={accessibleName} className={classes.accountRow}>
<Text>{props.accountName}</Text> <Text>{props.accountName}</Text>
<Stack className={classes.accountValue} gap={2}> <Stack className={classes.accountValue} gap={2}>
<Text fw={700}>{props.value}</Text> <Text className={valueClass} fw={700}>{props.value}</Text>
<Text c="dimmed" size="xs">{props.valueLabel}</Text> <Text c="dimmed" size="xs">{props.valueLabel}</Text>
</Stack> </Stack>
@@ -53,20 +58,24 @@ const AccountCardRow: FC<AccountRowProps> = props => (
</li> </li>
); );
const EntryGroup: FC<EntryGroupProps> = props => ( const EntryGroup: FC<EntryGroupProps> = (props) => {
<Paper className={classes.group} component="li" withBorder> const groupClass = props.flat ? `${classes.group} ${classes.flat}` : classes.group;
{props.header}
<Stack return (
aria-label={props.label} <Paper className={groupClass} component="li" withBorder>
className={classes.accounts} {props.header}
component="ul"
gap={0} <Stack
> aria-label={props.label}
{props.children} className={classes.accounts}
</Stack> component="ul"
</Paper> gap={0}
); >
{props.children}
</Stack>
</Paper>
);
};
const EntryGroupTotal: FC<EntryGroupTotalProps> = (props) => { const EntryGroupTotal: FC<EntryGroupTotalProps> = (props) => {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -0,0 +1,37 @@
import { MantineProvider } from "@mantine/core";
import { fireEvent, render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { ReadRetry } from "./ReadRetry";
function renderRetry(props: Parameters<typeof ReadRetry>[0]) {
return render(
<MantineProvider>
<ReadRetry {...props} />
</MantineProvider>,
);
}
describe("ReadRetry", () => {
it("renders nothing until the automatic retries are exhausted", () => {
renderRetry({ exhausted: false, onRetry: vi.fn() });
expect(screen.queryByRole("status")).not.toBeInTheDocument();
expect(screen.queryByRole("button")).not.toBeInTheDocument();
});
it("announces the failure politely and retries on activation", () => {
const onRetry = vi.fn();
renderRetry({ exhausted: true, onRetry });
expect(screen.getByRole("status")).toHaveTextContent("Не удалось обновить данные");
fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
expect(onRetry).toHaveBeenCalledOnce();
});
it("disables the action while the retry runs", () => {
renderRetry({ exhausted: true, onRetry: vi.fn(), retrying: true });
expect(screen.getByRole("button", { name: "Повторить" })).toBeDisabled();
});
});

Some files were not shown because too many files have changed in this diff Show More