refactor: colocate frontend component files

2026-09-23 08:34:58 +03:00
parent 85fcfe3d07
commit b987fd8e78
190 changed files with 131 additions and 108 deletions
@@ -0,0 +1,306 @@
+import { MantineProvider } from "@mantine/core";
+import { renderHook, waitFor } from "@testing-library/react";
+import { HttpResponse, http } from "msw";
+import type { FC, PropsWithChildren } from "react";
+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 { server } from "@/test/server";
+import {
+	toAccountPagePositionSections,
+	useAccountPageViewModel,
+} from "./AccountPage.vm";
+
+const portfolio: Portfolio = {
+	lastSuccessfulAt: "2026-08-13T10:00:00Z",
+	isStale: true,
+	totalsByCurrency: [{ currency: "RUB", value: "150" }],
+	positions: [
+		{
+			figi: "FIGI-STOCK",
+			displayName: "Акция",
+			type: "STOCK",
+			quantity: "2",
+			currentValue: { currency: "RUB", value: "100" },
+			averagePurchasePrice: null,
+			absoluteReturn: { currency: "RUB", value: "10" },
+			isin: null,
+			ticker: null,
+			logoName: "akciya.png",
+		},
+		{
+			figi: "FIGI-BOND",
+			displayName: "Облигация",
+			type: "BOND",
+			quantity: "1",
+			currentValue: { currency: "RUB", value: "50" },
+			averagePurchasePrice: { currency: "RUB", value: "45" },
+			absoluteReturn: { currency: "RUB", value: "-5" },
+			isin: "RU000A0JX0J2",
+			ticker: null,
+			logoName: null,
+		},
+		{
+			figi: "FIGI-FUND",
+			displayName: "Фонд",
+			type: "FUND",
+			quantity: "3",
+			currentValue: null,
+			averagePurchasePrice: null,
+			absoluteReturn: null,
+			isin: null,
+			ticker: null,
+			logoName: "fond.png",
+		},
+	],
+	structure: { currencies: [], unvaluedCategories: [] },
+	cashBalances: [{ currency: "USD", value: "1" }],
+};
+
+function configureTestAuth() {
+	configureAuthClient({
+		accessToken: () => "test-token",
+		refresh: async () => true,
+		clear: vi.fn(),
+	});
+}
+
+function createWrapper() {
+	const { wrapper: QueryWrapper } = createQueryWrapper();
+	const Wrapper: FC<PropsWithChildren> = (props) => (
+		<QueryWrapper>
+			<MantineProvider>
+				<MemoryRouter initialEntries={["/accounts/account-1"]}>
+					<Routes>
+						<Route path="/accounts/:accountId" element={props.children} />
+					</Routes>
+				</MemoryRouter>
+			</MantineProvider>
+		</QueryWrapper>
+	);
+	return Wrapper;
+}
+
+function mockLoadedAccountPage() {
+	server.use(
+		http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
+			HttpResponse.json(portfolio),
+		),
+		http.get("*/api/v1/brokerage-accounts/:accountId/operations", () =>
+			HttpResponse.json({
+				accountId: "account-1",
+				items: [
+					{
+						id: "operation-1",
+						occurredAt: "2026-08-13T10:00:00Z",
+						type: "Buy",
+						category: "trade",
+						description: "Покупка акции",
+						figi: "FIGI-STOCK",
+						instrumentUid: null,
+						ticker: "STK",
+						instrumentType: "share",
+						payment: { currency: "RUB", value: "-100" },
+						quantity: "1",
+						price: null,
+						accruedInterest: null,
+						commission: null,
+					},
+				],
+				nextCursor: null,
+				hasNext: false,
+				observedAt: "2026-08-13T10:00:00Z",
+			}),
+		),
+		http.get("*/api/v1/brokerage-accounts/:accountId/events", () =>
+			HttpResponse.json({
+				accountId: "account-1",
+				calculatedAt: "2026-08-13T10:00:00Z",
+				events: Array.from({ length: 6 }, (_, index) => ({
+					type: "coupon",
+					date: `2026-09-${String(index + 1).padStart(2, "0")}`,
+					dateKind: "event",
+					figi: `FIGI-EVENT-${index}`,
+					instrumentUid: null,
+					ticker: `BND${index}`,
+					displayName: `Купон ${index}`,
+					projectedAmount: { currency: "RUB", value: String(index + 1) },
+				})),
+			}),
+		),
+	);
+}
+
+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,
+			totalsByCurrency: [{ currency: "RUB", value: "1250" }],
+			structure: { currencies: [], unvaluedCategories: [] },
+			cashBalances: [{ currency: "RUB", value: "1000" }],
+			positions: [
+				...portfolio.positions,
+				{
+					...portfolio.positions[0],
+					figi: "FIGI-CURRENCY",
+					type: "CURRENCY",
+					currentValue: { currency: "RUB", value: "50" },
+				},
+				...otherTypes.map((type) => ({
+					...portfolio.positions[2],
+					figi: `FIGI-${type}-NEXT`,
+					type,
+					currentValue:
+						type === "OPTION" ? { currency: "RUB", value: "50" } : null,
+				})),
+			],
+		};
+		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", async () => {
+		configureTestAuth();
+		mockLoadedAccountPage();
+
+		const { result } = renderHook(() => useAccountPageViewModel(), {
+			wrapper: createWrapper(),
+		});
+
+		await waitFor(() => expect(result.current.state).toBe("loaded"));
+		const loaded = result.current as Extract<
+			typeof result.current,
+			{ state: "loaded" }
+		>;
+		expect(
+			loaded.positionSections.map(({ kind, groups }) => ({
+				kind,
+				positions: groups.flatMap((group) => group.positions),
+			})),
+		).toMatchObject([
+			{
+				kind: "stocks",
+				positions: [
+					{
+						displayName: "Акция",
+						shareText: "66,7 %",
+						returnText: "+10 ₽",
+						returnTone: "positive",
+						logoSrc: "https://invest-brands.cdn-tinkoff.ru/akciyax160.png",
+					},
+				],
+			},
+			{
+				kind: "bonds",
+				positions: [
+					{
+						displayName: "Облигация",
+						shareText: "33,3 %",
+						returnText: "-5 ₽",
+						returnTone: "negative",
+						logoSrc: null,
+					},
+				],
+			},
+			{
+				kind: "other",
+				positions: [
+					{
+						displayName: "Фонд",
+						shareText: null,
+						returnText: null,
+						returnTone: undefined,
+						logoSrc: null,
+					},
+				],
+			},
+		]);
+	});
+
+	it("prepares recent operations and events state for presentation views", async () => {
+		configureTestAuth();
+		mockLoadedAccountPage();
+
+		const { result } = renderHook(() => useAccountPageViewModel(), {
+			wrapper: createWrapper(),
+		});
+
+		await waitFor(() =>
+			expect(
+				(result.current as { recentEvents?: { state: string } }).recentEvents,
+			)?.toMatchObject({ state: "loaded" }),
+		);
+		const loaded = result.current as Extract<
+			typeof result.current,
+			{ state: "loaded" }
+		>;
+		expect(loaded.recentOperations).toMatchObject({
+			state: "loaded",
+			to: "/accounts/account-1/operations",
+			items: [{ id: "operation-1", description: "Покупка акции" }],
+		});
+		expect(loaded.recentEvents).toMatchObject({
+			state: "loaded",
+			to: "/accounts/account-1/events",
+			items: [
+				{ ticker: "BND0" },
+				{ ticker: "BND1" },
+				{ ticker: "BND2" },
+				{ ticker: "BND3" },
+				{ ticker: "BND4" },
+			],
+		});
+	});
+
+	it("keeps recent errors isolated in the ViewModel presentation state", async () => {
+		configureTestAuth();
+		server.use(
+			http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
+				HttpResponse.json(portfolio),
+			),
+			http.get("*/api/v1/brokerage-accounts/:accountId/operations", () =>
+				HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 }),
+			),
+			http.get("*/api/v1/brokerage-accounts/:accountId/events", () =>
+				HttpResponse.json({ code: "MOEX_UNAVAILABLE" }, { status: 503 }),
+			),
+		);
+
+		const { result } = renderHook(() => useAccountPageViewModel(), {
+			wrapper: createWrapper(),
+		});
+
+		await waitFor(() =>
+			expect(result.current).toMatchObject({
+				state: "loaded",
+				recentOperations: { state: "error" },
+				recentEvents: { state: "error" },
+			}),
+		);
+	});
+});