feat(account): add concentration tab with top-5 slices and chart (WealthLedger/main#48) (#127)

src/pages/account/ui/AccountPage/AccountPage.test.tsx

@@ -8,7 +8,9 @@ import {
 	within,
 } from "@testing-library/react";
 import { http, HttpResponse } from "msw";
-import { MemoryRouter, Route, Routes } from "react-router";
+import { useState } from "react";
+import { getI18n } from "react-i18next";
+import { MemoryRouter, Route, Routes, useNavigate } from "react-router";
 import { describe, expect, it, vi } from "vitest";
 
 import type { BrokerageOperation } from "@/entities/broker-operation";
@@ -25,6 +27,7 @@ import type {
 	AccountPageRecentOperations,
 } from "../../model/previews";
 
+import { toConcentration } from "../../model/concentration";
 import {
 	toAccountPagePositionSections,
 	toUnrealizedReturns,
@@ -35,6 +38,19 @@ import { AccountPageError } from "./components/AccountPageError.view";
 import { AccountPageLoaded } from "./components/AccountPageLoaded.view";
 import { AccountPageLoading } from "./components/AccountPageLoading/AccountPageLoading.view";
 
+function AccountSwitcher() {
+	const navigate = useNavigate();
+
+	return (
+		<button
+			onClick={() => navigate("/accounts/account-2")}
+			type="button"
+		>
+			Другой счёт
+		</button>
+	);
+}
+
 function configureTestAuth() {
 	configureAuthClient({
 		accessToken: () => "test-token",
@@ -50,6 +66,8 @@ function renderAccountRoute(queryClient: QueryClient, accountId = "account-1") {
 		<QueryClientProvider client={queryClient}>
 			<MantineProvider>
 				<MemoryRouter initialEntries={[`/accounts/${accountId}`]}>
+					<AccountSwitcher />
+
 					<Routes>
 						<Route element={<AccountPage />} path="/accounts/:accountId" />
 					</Routes>
@@ -84,8 +102,10 @@ const portfolio
 				displayName: "Вторая",
 				figi: "FIGI-2",
 				isin: null,
+				issuer: null,
 				logoName: "vtoraya.png",
 				quantity: "2",
+				sector: null,
 				ticker: null,
 				type: "STOCK",
 			},
@@ -96,8 +116,10 @@ const portfolio
 				displayName: "Первая",
 				figi: "FIGI-1",
 				isin: "RU000A0JX0J2",
+				issuer: null,
 				logoName: null,
 				quantity: "1",
+				sector: null,
 				ticker: null,
 				type: "BOND",
 			},
@@ -116,8 +138,10 @@ function position(
 		displayName: "Инструмент",
 		figi: null,
 		isin: null,
+		issuer: null,
 		logoName: null,
 		quantity: "1",
+		sector: null,
 		ticker: null,
 		type: "STOCK",
 		...overrides,
@@ -134,6 +158,19 @@ const emptyRecentEvents: AccountPageRecentEvents = {
 	to: "/accounts/account-1/events",
 };
 
+function concentrationLabels() {
+	const i18n = getI18n();
+
+	return {
+		missingIssuer: i18n.t("portfolio.concentration.missingIssuer"),
+		missingSector: i18n.t("portfolio.concentration.missingSector"),
+		other: i18n.t("portfolio.concentration.other"),
+		sector: (code: string) => i18n.t(`stock.sectors.${code}`, {
+			defaultValue: code,
+		}),
+	};
+}
+
 function emptyProps() {
 	return {
 		recentEvents: emptyRecentEvents,
@@ -141,17 +178,357 @@ function emptyProps() {
 	};
 }
 
+const LoadedHarness = (
+	props: Omit<Partial<Parameters<typeof AccountPageLoaded>[0]>, "onTabChange">,
+) => {
+	const [tab, setTab] = useState(props.tab ?? "positions");
+
+	return (
+		<AccountPageLoaded
+			{...loadedProps()}
+			{...props}
+			onTabChange={value => setTab(value ?? "positions")}
+			tab={tab}
+		/>
+	);
+};
+
 function loadedProps(nextPortfolio: Portfolio = portfolio) {
 	return {
+		concentration: null,
+		currency: null,
+		onCurrencyChange: vi.fn(),
+		onSliceChange: vi.fn(),
 		portfolio: nextPortfolio,
 		positionSections: toAccountPagePositionSections(nextPortfolio),
 		recentEvents: emptyRecentEvents,
 		recentOperations: emptyRecentOperations,
+		slice: "stocks" as const,
 		unrealizedReturns: toUnrealizedReturns(nextPortfolio.positions),
 	};
 }
 
 describe("AccountPage states", () => {
+	it("shows concentration only for a loaded individual account", async () => {
+		server.use(
+			http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
+				HttpResponse.json(resource({
+					...portfolio,
+					positions: [position({
+						currentValue: { currency: "RUB", value: "100" },
+						displayName: "Акция",
+					})],
+				})),
+			),
+		);
+		const client = createTestQueryClient();
+		renderAccountRoute(client);
+		const tab = await screen.findByRole("tab", { name: "Концентрация" });
+		expect(tab).toHaveAttribute("aria-selected", "false");
+		fireEvent.click(tab);
+		expect(screen.getAllByText("100 ₽")).toHaveLength(2);
+		expect(screen.getByRole("img", { name: "Распределение позиций" }))
+			.toHaveAccessibleDescription(/Акция: 100 ₽, 100 %/);
+	});
+
+	it("expands and resets other when switching slice", () => {
+		const positions = [400, 250, 150, 100, 50, 30, 20].map(
+			(value, index) => position({
+				currentValue: { currency: "RUB", value: String(value) },
+				displayName: `Акция ${index + 1}`,
+			}),
+		);
+
+		const data = { ...portfolio, positions };
+
+		const model = toConcentration(
+			data, "stocks", "RUB", concentrationLabels(),
+		);
+
+		const props = loadedProps(data);
+		renderPage(
+			<LoadedHarness
+				{...props}
+				accountId="a"
+				concentration={model}
+				currency="RUB"
+				tab="concentration"
+			/>,
+		);
+		const other = screen.getByRole("button", { name: /Прочее/ });
+		expect(other).toHaveAttribute("aria-expanded", "false");
+		fireEvent.click(other);
+		expect(other).toHaveAttribute("aria-expanded", "true");
+		expect(screen.getByText("Акция 7")).toBeInTheDocument();
+		fireEvent.click(screen.getByRole("radio", { name: "Секторы" }));
+		expect(props.onSliceChange).toHaveBeenCalledWith("sectors");
+	});
+
+	it.each([
+		[2, "2 элемента"],
+		[5, "5 элементов"],
+		[21, "21 элемент"],
+	])("pluralizes the other count %d as %s", (count, expected) => {
+		const values = [400, 250, 150, 100, 50];
+
+		const rest = Array.from(
+			{ length: count },
+			(_, index) => 20 + index,
+		);
+
+		const positions = [...values, ...rest].map(
+			(value, index) => position({
+				currentValue: { currency: "RUB", value: String(value) },
+				displayName: `Акция ${index + 1}`,
+			}),
+		);
+
+		renderPage(
+			<LoadedHarness
+				{...loadedProps({ ...portfolio, positions })}
+				accountId="a"
+				concentration={toConcentration(
+					{ ...portfolio, positions },
+					"stocks",
+					"RUB",
+					concentrationLabels(),
+				)}
+				currency="RUB"
+				tab="concentration"
+			/>,
+		);
+
+		const other = screen.getByRole("button", { name: /Прочее/ });
+		expect(other).toHaveTextContent(expected);
+	});
+
+	it("shows ticker subtitles and stocks rows with logos, issuers without", () => {
+		const positions = [
+			position({
+				currentValue: { currency: "RUB", value: "300" },
+				displayName: "Сбербанк",
+				ticker: "SBER",
+			}),
+		];
+
+		const data = { ...portfolio, positions };
+
+		const view = renderPage(
+			<LoadedHarness
+				{...loadedProps(data)}
+				accountId="a"
+				concentration={toConcentration(
+					data, "stocks", "RUB", concentrationLabels(),
+				)}
+				currency="RUB"
+				tab="concentration"
+			/>,
+		);
+
+		expect(screen.getByText("SBER")).toBeInTheDocument();
+
+		view.unmount();
+
+		renderPage(
+			<LoadedHarness
+				{...loadedProps(data)}
+				accountId="a"
+				concentration={toConcentration(
+					data, "issuers", "RUB", concentrationLabels(),
+				)}
+				currency="RUB"
+				slice="issuers"
+				tab="concentration"
+			/>,
+		);
+
+		expect(screen.queryByText("SBER")).not.toBeInTheDocument();
+	});
+
+	it("hides the currency select when only one currency is available", () => {
+		const data = { ...portfolio, positions: [position({
+			currentValue: { currency: "RUB", value: "100" },
+			displayName: "Акция",
+		})] };
+
+		renderPage(
+			<LoadedHarness
+				{...loadedProps(data)}
+				accountId="a"
+				concentration={toConcentration(
+					data, "stocks", "RUB", concentrationLabels(),
+				)}
+				currency="RUB"
+				tab="concentration"
+			/>,
+		);
+
+		expect(screen.queryByRole("combobox", { name: "Валюта концентрации" }))
+			.not.toBeInTheDocument();
+	});
+
+	it("shows sector labels including government and unknown codes", () => {
+		const positions = [
+			position({
+				currentValue: { currency: "RUB", value: "300" },
+				displayName: "А",
+				sector: "government",
+			}),
+			position({
+				currentValue: { currency: "RUB", value: "100" },
+				displayName: "Б",
+				sector: "unknown_code",
+			}),
+		];
+
+		const data = { ...portfolio, positions };
+
+		renderPage(
+			<LoadedHarness
+				{...loadedProps(data)}
+				accountId="a"
+				concentration={toConcentration(
+					data, "sectors", "RUB", concentrationLabels(),
+				)}
+				currency="RUB"
+				slice="sectors"
+				tab="concentration"
+			/>,
+		);
+
+		expect(screen.getByText("Государственный сектор")).toBeInTheDocument();
+		expect(screen.getByText("unknown_code")).toBeInTheDocument();
+	});
+
+	it("describes ranked segments with amounts and shares", () => {
+		const data = { ...portfolio, positions: [
+			position({
+				currentValue: { currency: "RUB", value: "300" },
+				displayName: "Первая акция",
+			}),
+			position({
+				currentValue: { currency: "RUB", value: "100" },
+				displayName: "Вторая акция",
+			}),
+			...[50, 40, 30, 20, 10].map((value, index) => position({
+				currentValue: { currency: "RUB", value: String(value) },
+				displayName: `Остаток ${index + 1}`,
+			})),
+		] };
+
+		renderPage(
+			<LoadedHarness
+				{...loadedProps(data)}
+				accountId="a"
+				concentration={toConcentration(
+					data, "stocks", "RUB", concentrationLabels(),
+				)}
+				currency="RUB"
+				tab="concentration"
+			/>,
+		);
+
+		const chart = screen.getByRole("img", { name: "Распределение позиций" });
+
+		expect(chart).toHaveAccessibleDescription(
+			/Первая акция: 300 ₽, 54,5 %; Вторая акция: 100 ₽, 18,2 %; Остаток 1: 50 ₽, 9,1 %; Остаток 2: 40 ₽, 7,3 %; Остаток 3: 30 ₽, 5,5 %; Прочее: 30 ₽, 5,5 %/,
+		);
+		expect(screen.getByRole("button", { name: /Прочее/ }))
+			.toBeInTheDocument();
+	});
+
+	it("does not duplicate the partial warning on the concentration tab", () => {
+		const data = { ...portfolio, positions: [position({
+			currentValue: { currency: "RUB", value: "100" },
+			displayName: "Акция",
+		})] };
+
+		renderPage(
+			<LoadedHarness
+				{...loadedProps(data)}
+				accountId="a"
+				concentration={toConcentration(
+					data, "stocks", "RUB", concentrationLabels(),
+				)}
+				currency="RUB"
+				partial
+				tab="concentration"
+			/>,
+		);
+
+		expect(screen.getAllByRole("status"))
+			.toHaveLength(1);
+	});
+
+	it("keeps slice and currency while switching page tabs and resets on account change", async () => {
+		const multiCurrency = { ...portfolio, positions:
+			["RUB", "USD"].flatMap(currency =>
+				[400, 250, 150, 100, 50, 30, 20].map((value, index) =>
+					position({
+						currentValue: { currency, value: String(value) },
+						displayName: `${currency} акция ${index + 1}`,
+						sector: "energy", type: "STOCK",
+					}),
+				),
+			) };
+
+		server.use(
+			http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
+				HttpResponse.json(resource(multiCurrency)),
+			),
+		);
+		const client = createTestQueryClient();
+		renderAccountRoute(client);
+
+		fireEvent.click(await screen.findByRole("tab", { name: "Концентрация" }));
+		fireEvent.click(screen.getByRole("button", { name: /Прочее/ }));
+		expect(screen.getByRole("button", { name: /Прочее/ }))
+			.toHaveAttribute("aria-expanded", "true");
+		fireEvent.click(screen.getByRole("combobox", { name: "Валюта концентрации" }));
+		fireEvent.click(screen.getByRole("option", { name: "USD" }));
+		expect(screen.getByRole("button", { name: /Прочее/ }))
+			.toHaveAttribute("aria-expanded", "false");
+		fireEvent.click(screen.getByRole("button", { name: /Прочее/ }));
+		fireEvent.click(screen.getByRole("radio", { name: "Секторы" }));
+		fireEvent.click(screen.getByRole("radio", { name: "Акции" }));
+		expect(screen.getByRole("button", { name: /Прочее/ }))
+			.toHaveAttribute("aria-expanded", "false");
+		fireEvent.click(screen.getByRole("radio", { name: "Секторы" }));
+		expect(screen.getByRole("combobox", { name: "Валюта концентрации" }))
+			.toHaveValue("USD");
+
+		fireEvent.click(screen.getByRole("tab", { name: "Позиции" }));
+		fireEvent.click(screen.getByRole("tab", { name: "Концентрация" }));
+
+		expect(screen.getByRole("radio", { name: "Секторы" }))
+			.toBeChecked();
+		expect(screen.getByRole("combobox", { name: "Валюта концентрации" }))
+			.toHaveValue("USD");
+		fireEvent.click(screen.getByRole("button", { name: "Другой счёт" }));
+		fireEvent.click(await screen.findByRole("tab", { name: "Концентрация" }));
+		expect(screen.getByRole("radio", { name: "Акции" })).toBeChecked();
+		expect(screen.getByRole("combobox", { name: "Валюта концентрации" }))
+			.toHaveValue("RUB");
+	});
+
+	it("falls back to the first currency when the selected one disappears", () => {
+		const data = { ...portfolio, positions: [
+			position({
+				currentValue: { currency: "USD", value: "200" },
+			}),
+			position({
+				currentValue: { currency: "RUB", value: "100" },
+			}),
+		] };
+
+		const model = toConcentration(
+			data, "stocks", "EUR", concentrationLabels(),
+		);
+
+		expect(model.currencies).toEqual(["RUB", "USD"]);
+		expect(model.total).toBe("100");
+		expect(model.items.map(item => item.amount)).toEqual(["100"]);
+	});
 	it("shows the loaded portfolio source sync status", async () => {
 		server.use(
 			http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
@@ -306,7 +683,7 @@ describe("AccountPage states", () => {
 
 	it("shows supplied cash separately without adding currency instruments or recalculating totals", () => {
 		renderPage(
-			<AccountPageLoaded
+			<LoadedHarness
 				{...loadedProps({
 					...portfolio,
 					cashBalances: [
@@ -490,7 +867,7 @@ describe("AccountPage states", () => {
 	});
 
 	it("renders a stale portfolio in upstream order with nullable values hidden", () => {
-		renderPage(<AccountPageLoaded {...loadedProps()} />);
+		renderPage(<LoadedHarness {...loadedProps()} />);
 
 		expect(
 			screen.getByRole("heading", { level: 1, name: "Портфель" }),
@@ -528,7 +905,7 @@ describe("AccountPage states", () => {
 		"renders %s logos, fallbacks and signed returns including zero",
 		(type) => {
 			renderPage(
-				<AccountPageLoaded
+				<LoadedHarness
 					{...loadedProps({
 						...portfolio,
 						positions: [
@@ -571,7 +948,7 @@ describe("AccountPage states", () => {
 		"groups %s supporting metrics into quiet single lines",
 		(type) => {
 			renderPage(
-				<AccountPageLoaded
+				<LoadedHarness
 					{...loadedProps({
 						...portfolio,
 						positions: [position({
@@ -593,7 +970,7 @@ describe("AccountPage states", () => {
 
 	it("uses the ticker only for stock cards and otherwise keeps the ISIN", () => {
 		renderPage(
-			<AccountPageLoaded
+			<LoadedHarness
 				{...loadedProps({
 					...portfolio,
 					positions: [
@@ -618,7 +995,7 @@ describe("AccountPage states", () => {
 
 	it("keeps other-position cards compact with labeled return and no logo", () => {
 		renderPage(
-			<AccountPageLoaded
+			<LoadedHarness
 				{...loadedProps({
 					...portfolio,
 					positions: [position({
@@ -636,7 +1013,7 @@ describe("AccountPage states", () => {
 
 	it("uses the cached account title when available", () => {
 		renderPage(
-			<AccountPageLoaded
+			<LoadedHarness
 				{...loadedProps()}
 
 				account={{
@@ -655,7 +1032,7 @@ describe("AccountPage states", () => {
 
 	it("keeps the portfolio visible when recent operations fail", () => {
 		renderPage(
-			<AccountPageLoaded
+			<LoadedHarness
 				{...loadedProps()}
 				recentOperations={{
 					state: "error",
@@ -674,7 +1051,7 @@ describe("AccountPage states", () => {
 
 	it("uses the ledger row for a recent outgoing trade operation", () => {
 		renderPage(
-			<AccountPageLoaded
+			<LoadedHarness
 				{...loadedProps()}
 
 				recentOperations={{
@@ -724,7 +1101,7 @@ describe("AccountPage states", () => {
 			};
 
 		renderPage(
-			<AccountPageLoaded
+			<LoadedHarness
 				{...loadedProps()}
 
 				recentEvents={{
@@ -793,7 +1170,7 @@ describe("AccountPage states", () => {
 		"keeps the upcoming %s state and calendar action",
 		(state) => {
 			renderPage(
-				<AccountPageLoaded
+				<LoadedHarness
 					{...loadedProps()}
 					recentEvents={{ state, to: "/accounts/account-1/events" }}
 				/>,
@@ -830,7 +1207,7 @@ describe("AccountPage states", () => {
 
 	it("keeps the portfolio visible when upcoming events fail", () => {
 		renderPage(
-			<AccountPageLoaded
+			<LoadedHarness
 				{...loadedProps()}
 				recentEvents={{
 					state: "error",
@@ -995,7 +1372,7 @@ describe("AccountPage states", () => {
 	});
 
 	it("opens positions by default and switches between local tabs", () => {
-		renderPage(<AccountPageLoaded {...loadedProps()} />);
+		renderPage(<LoadedHarness {...loadedProps()} />);
 
 		expect(screen.getByRole("tab", { name: "Позиции" }))
 			.toHaveAttribute("aria-selected", "true");
@@ -1012,7 +1389,7 @@ describe("AccountPage states", () => {
 
 	it("links operation, event and income previews to their detail pages", () => {
 		renderPage(
-			<AccountPageLoaded
+			<LoadedHarness
 				{...loadedProps()}
 				incomeSummary={{
 					state: "empty",
@@ -1033,7 +1410,7 @@ describe("AccountPage states", () => {
 	});
 
 	it("filters positions by the kinds present in the portfolio", () => {
-		renderPage(<AccountPageLoaded {...loadedProps()} />);
+		renderPage(<LoadedHarness {...loadedProps()} />);
 
 		expect(
 			screen.getAllByRole<HTMLInputElement>("radio").map(radio => radio.value),
@@ -1047,7 +1424,7 @@ describe("AccountPage states", () => {
 
 	it("hides the position filter when only one kind exists", () => {
 		renderPage(
-			<AccountPageLoaded
+			<LoadedHarness
 				{...loadedProps({
 					...portfolio,
 					positions: [portfolio.positions[0]],
@@ -1060,7 +1437,7 @@ describe("AccountPage states", () => {
 	});
 
 	it("hides unrealized returns for a partial portfolio", () => {
-		renderPage(<AccountPageLoaded {...loadedProps()} partial />);
+		renderPage(<LoadedHarness {...loadedProps()} partial />);
 
 		expect(screen.queryByRole("region", { name: "Нереализованный результат" }))
 			.not.toBeInTheDocument();
@@ -1068,7 +1445,7 @@ describe("AccountPage states", () => {
 
 	it("omits an unrealized currency total when any return is incomplete", () => {
 		renderPage(
-			<AccountPageLoaded
+			<LoadedHarness
 				{...loadedProps({
 					...portfolio,
 					positions: [