refactor: simplify auth and instrument pages
Frontend verify / commits (pull_request) Successful in 24s
Frontend verify / security (pull_request) Failing after 9s
Frontend verify / verify (pull_request) Skipped

This commit is contained in:
2026-09-29 05:45:08 +03:00
parent 32a77860c8
commit b404c1802a
38 changed files with 644 additions and 790 deletions
@@ -1,5 +1,4 @@
.tile,
.cash {
.tile {
border-color: var(--mantine-color-gray-3);
background: var(--mantine-color-gray-0);
}
@@ -52,15 +51,10 @@
margin-block: 5px;
}
.tile,
.cash {
.tile {
padding: var(--mantine-spacing-md);
}
.cash {
display: flex;
justify-content: space-between;
}
.positive {
color: var(--wl-color-positive);
@@ -212,10 +212,10 @@ describe("AccountPage states", () => {
for (const link of links)
expect(link).toHaveAttribute(
"href",
`/${collection}/${type === "STOCK" ? slug : uid}`,
`/${collection}/${uid}`,
);
});
expect(requests).toHaveBeenCalledTimes(type === "STOCK" ? 1 : 0);
expect(requests).not.toHaveBeenCalled();
expect(
screen.queryByText("Название из карточки инструмента"),
).not.toBeInTheDocument();
@@ -234,43 +234,6 @@ describe("AccountPage states", () => {
},
);
it.each(["unavailable", "noncanonical"])(
"keeps exact UID links and the portfolio visible when ticker is %s",
async (scenario) => {
const uid = "c190ff1f-1447-4227-b543-316332699ca5";
const requests = vi.fn();
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
HttpResponse.json(
resource({
...portfolio,
positions: [
{
...portfolio.positions[0],
instrumentUid: uid,
ticker: "SBERP",
},
],
}),
),
),
http.get("*/api/v1/stocks/:uid", () => {
requests();
return scenario === "unavailable"
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(resource({ instrumentUid: uid, slug: uid }));
}),
);
renderAccountRoute(createTestQueryClient());
await waitFor(() => expect(requests).toHaveBeenCalledOnce());
const links = await screen.findAllByRole("link", { name: "Вторая" });
expect(links).toHaveLength(2);
for (const link of links)
expect(link).toHaveAttribute("href", `/stocks/${uid}`);
},
);
it("keeps the account and positions visible for an older HTTP response without structure", async () => {
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
@@ -6,63 +6,14 @@ import { http, HttpResponse } from "msw";
import { MemoryRouter, Route, Routes } from "react-router";
import { describe, expect, it, vi } from "vitest";
import type { Portfolio } from "@/entities/portfolio";
import { configureAuthClient } from "@/shared/api";
import { createQueryWrapper } from "@/test/query";
import { resource } from "@/test/resource";
import { server } from "@/test/server";
import { toAccountPagePositionSections } from "../../model/positions";
import { portfolio } from "../../model/positions.fixtures";
import { useAccountPageViewModel } from "./AccountPage.vm";
const portfolio: Portfolio
= {
cashBalances: [{ currency: "USD", value: "1" }],
isStale: true,
lastSuccessfulAt: "2026-08-13T10:00:00Z",
positions: [
{
absoluteReturn: { currency: "RUB", value: "10" },
averagePurchasePrice: null,
currentValue: { currency: "RUB", value: "100" },
displayName: "Акция",
figi: "FIGI-STOCK",
isin: null,
logoName: "akciya.png",
quantity: "2",
ticker: null,
type: "STOCK",
},
{
absoluteReturn: { currency: "RUB", value: "-5" },
averagePurchasePrice: { currency: "RUB", value: "45" },
currentValue: { currency: "RUB", value: "50" },
displayName: "Облигация",
figi: "FIGI-BOND",
isin: "RU000A0JX0J2",
logoName: null,
quantity: "1",
ticker: null,
type: "BOND",
},
{
absoluteReturn: null,
averagePurchasePrice: null,
currentValue: null,
displayName: "Фонд",
figi: "FIGI-FUND",
isin: null,
logoName: "fond.png",
quantity: "3",
ticker: null,
type: "FUND",
},
],
structure: { currencies: [], unvaluedCategories: [] },
totalsByCurrency: [{ currency: "RUB", value: "150" }],
};
function configureTestAuth() {
configureAuthClient({
accessToken: () => "test-token",
@@ -152,109 +103,6 @@ function mockLoadedAccountPage() {
}
describe("useAccountPageViewModel", () => {
it("excludes currency instruments only from display, preserving order and share denominators", () => {
const otherTypes = [
"OPTION",
"OTHER",
"FUTURE",
"STRUCTURED_NOTE",
"DIGITAL_FINANCIAL_ASSET",
"FUND",
] as const;
const snapshot: Portfolio = {
...portfolio,
cashBalances: [{ currency: "RUB", value: "1000" }],
positions: [
...portfolio.positions,
{
...portfolio.positions[0],
currentValue: { currency: "RUB", value: "50" },
figi: "FIGI-CURRENCY",
type: "CURRENCY",
},
...otherTypes.map(
type =>
({
...portfolio.positions[2],
currentValue:
type === "OPTION" ? { currency: "RUB", value: "50" } : null,
figi: `FIGI-${type}-NEXT`,
type,
}),
),
],
structure: { currencies: [], unvaluedCategories: [] },
totalsByCurrency: [{ currency: "RUB", value: "1250" }],
};
const original = structuredClone(snapshot);
const sections = toAccountPagePositionSections(snapshot);
expect(sections.map(section => section.kind)).toEqual([
"stocks",
"bonds",
"other",
]);
expect(sections[2].groups.map(group => group.positions[0].figi)).toEqual([
"FIGI-FUND",
...otherTypes.map(type => `FIGI-${type}-NEXT`),
]);
expect(sections[0].groups[0].positions[0].shareText).toBe("40 %");
expect(sections[1].groups[0].positions[0].shareText).toBe("20 %");
expect(sections[2].groups[1].positions[0].shareText).toBe("20 %");
expect(snapshot).toEqual(original);
});
it("prepares grouped position sections with derived display data", () => {
expect(
toAccountPagePositionSections(portfolio).map(({ groups, kind }) => ({
kind,
positions: groups.flatMap(group => group.positions),
})),
).toMatchObject([
{
kind: "stocks",
positions: [
{
displayName: "Акция",
logoSrc: "https://invest-brands.cdn-tinkoff.ru/akciyax160.png",
returnText: "+10 ₽",
returnTone: "positive",
shareText: "66,7 %",
},
],
},
{
kind: "bonds",
positions: [
{
displayName: "Облигация",
logoSrc: null,
returnText: "-5 ₽",
returnTone: "negative",
shareText: "33,3 %",
},
],
},
{
kind: "other",
positions: [
{
displayName: "Фонд",
logoSrc: null,
returnText: null,
returnTone: undefined,
shareText: null,
},
],
},
]);
});
it("prepares recent operations and events state for presentation views", async () => {
configureTestAuth();
mockLoadedAccountPage();
@@ -14,7 +14,6 @@ import {
} from "@/entities/brokerage-event";
import { type IncomeSummary, useIncomeSummary } from "@/entities/income";
import { usePortfolio } from "@/entities/portfolio";
import { useStocks } from "@/entities/stock";
import { useScreenSync } from "@/features/tbank-connection";
import { apiErrorCode } from "@/shared/api";
@@ -168,14 +167,6 @@ function useAccountPageViewModel(): AccountPageViewModel {
const { accountId } = useParams();
const portfolio = usePortfolio(accountId);
const stocks = useStocks(
portfolio.data?.positions.flatMap(position =>
position.type === "STOCK" && position.instrumentUid
? [position.instrumentUid]
: [],
) ?? [],
);
const operations = useBrokerageOperations(accountId, {
limit: 5,
});
@@ -236,10 +227,7 @@ function useAccountPageViewModel(): AccountPageViewModel {
accountId,
incomeSummary,
portfolio: portfolio.data,
positionSections: toAccountPagePositionSections(
portfolio.data,
stocks,
),
positionSections: toAccountPagePositionSections(portfolio.data),
recentEvents,
recentOperations,
state: "loaded" as const,
@@ -3,50 +3,16 @@ import { render, screen, within } from "@testing-library/react";
import { MemoryRouter } from "react-router";
import { describe, expect, it } from "vitest";
import type { Portfolio } from "@/entities/portfolio";
import { toAccountPagePositionSections } from "../../model/positions";
import { portfolio, position, second } from "../../model/positions.fixtures";
import { PositionSection } from "./components/PositionSection.view";
const position: Portfolio["positions"][number]
= {
absoluteReturn: { currency: "RUB", value: "25" },
account: { id: "a", name: "Основной" },
averagePurchasePrice: { currency: "RUB", value: "280" },
currentValue: { currency: "RUB", value: "375" },
displayName: "Сбербанк",
figi: "FIGI-SBER",
isin: "RU0009029540",
logoName: null,
quantity: "1.25",
ticker: "SBER",
type: "STOCK",
};
const second
= {
...position,
absoluteReturn: null,
account: { id: "b", name: "ИИС" },
averagePurchasePrice: null,
currentValue: null,
quantity: "-2",
};
function sections(positions: Portfolio["positions"]) {
return toAccountPagePositionSections({
cashBalances: [],
isStale: false,
lastSuccessfulAt: "2026-09-09T12:00:00Z",
positions,
structure: { currencies: [], unvaluedCategories: [] },
totalsByCurrency: [],
});
}
describe("Positions grouped by security", () => {
it("shows one security with exact per-account quantities and valuations", () => {
const section = sections([position, second])[0];
const section = toAccountPagePositionSections({
...portfolio, positions: [position, second],
})[0];
render(
<MantineProvider>
<MemoryRouter>
@@ -76,75 +42,4 @@ describe("Positions grouped by security", () => {
expect(within(rows[1]).getByText("Количество: -2")).toBeInTheDocument();
expect(rows[1]).not.toHaveTextContent("₽");
});
it("uses ISIN only when FIGI is absent, never merging by name or ticker", () => {
expect(
sections([
{
...position,
figi: null,
},
{ ...second, figi: null },
])[0].groups,
).toHaveLength(1);
expect(
sections([position, { ...second, figi: "OTHER-FIGI" }])[0].groups,
).toHaveLength(2);
expect(
sections([
{
...position,
figi: null,
isin: null,
},
{
...second,
figi: null,
isin: null,
},
])[0].groups,
).toHaveLength(2);
});
it("preserves one-account cards and does not merge repeated rows on the same account", () => {
expect(
sections([position, { ...second, account: position.account }])[0].groups,
).toHaveLength(2);
expect(
sections([
{ ...position, account: undefined },
{ ...second, account: undefined },
])[0].groups,
).toHaveLength(2);
});
it("keeps currencies and purchase prices attached to their source positions", () => {
const source = [
position,
{
...second,
averagePurchasePrice: { currency: "USD", value: "0.99" },
currentValue: { currency: "USD", value: "1.01" },
},
];
const before = structuredClone(source);
const [group] = sections(source)[0].groups;
expect(
group.positions.map(item => [
item.quantity,
item.currentValue,
item.averagePurchasePrice,
]),
).toEqual(
source.map(item => [
item.quantity,
item.currentValue,
item.averagePurchasePrice,
]),
);
expect(source).toEqual(before);
});
});