refactor: align frontend ownership boundaries

Close audit gaps across API drift, query policy, UI, and tests.

src/pages/accounts/ui/AccountsPage.test.tsx

@@ -1,13 +1,17 @@
 import { MantineProvider } from "@mantine/core";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { type QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from "@testing-library/react";
 import { HttpResponse, http } from "msw";
 import { MemoryRouter } from "react-router";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { brokerageAccountsQueryKey } from "@/entities/brokerage-account";
 import { configureAuthClient } from "@/shared/api";
+import { createTestQueryClient } from "@/test/query";
 import { server } from "@/test/server";
 import { AccountsPage } from "./AccountsPage";
+import { AccountsPageEmpty } from "./components/AccountsPageEmpty.view";
+import { AccountsPageError } from "./components/AccountsPageError.view";
+import { AccountsPageLoading } from "./components/AccountsPageLoading.view";
 
 const account = {
 	id: "account-1",
@@ -38,9 +42,36 @@ function renderPage(queryClient: QueryClient) {
 }
 
 describe("AccountsPage", () => {
-	afterEach(() => {
-		configureAuthClient(null);
-		cleanup();
+	it.each([
+		["loading", AccountsPageLoading, "status"],
+		["empty", AccountsPageEmpty, undefined],
+	] as const)("renders only the %s state", (_name, State, role) => {
+		render(
+			<MantineProvider>
+				<State />
+			</MantineProvider>,
+		);
+		if (role) expect(screen.getByRole(role)).toBeInTheDocument();
+		else
+			expect(
+				screen.getByRole("heading", { name: "Нет инвестиционных счетов" }),
+			).toBeInTheDocument();
+	});
+
+	it("routes connection errors to settings and keeps retry available", () => {
+		const retry = vi.fn();
+		render(
+			<MantineProvider>
+				<MemoryRouter>
+					<AccountsPageError code="TBANK_UNAVAILABLE" retry={retry} />
+				</MemoryRouter>
+			</MantineProvider>,
+		);
+		screen.getByRole("button", { name: "Повторить" }).click();
+		expect(retry).toHaveBeenCalledOnce();
+		expect(
+			screen.getByRole("link", { name: "Открыть настройки T-Bank" }),
+		).toHaveAttribute("href", "/settings");
 	});
 
 	it("keeps the cached account list visible during a background refresh", async () => {
@@ -55,7 +86,7 @@ describe("AccountsPage", () => {
 				});
 			}),
 		);
-		const queryClient = new QueryClient();
+		const queryClient = createTestQueryClient();
 		renderPage(queryClient);
 
 		await screen.findByText(account.name);
@@ -86,7 +117,7 @@ describe("AccountsPage", () => {
 				return HttpResponse.json([account]);
 			}),
 		);
-		const queryClient = new QueryClient();
+		const queryClient = createTestQueryClient();
 		renderPage(queryClient);
 
 		await screen.findByText(account.name);
@@ -116,7 +147,7 @@ describe("AccountsPage", () => {
 				);
 			}),
 		);
-		const queryClient = new QueryClient();
+		const queryClient = createTestQueryClient();
 		renderPage(queryClient);
 
 		await screen.findByText("Нет инвестиционных счетов");

src/pages/accounts/ui/AccountsPage.tsx

@@ -1,11 +1,9 @@
 import type { FC } from "react";
-import {
-	AccountsPageEmpty,
-	AccountsPageError,
-	AccountsPageLoaded,
-	AccountsPageLoading,
-} from "./AccountsPage.view";
 import { useAccountsPageViewModel } from "./AccountsPage.vm";
+import { AccountsPageEmpty } from "./components/AccountsPageEmpty.view";
+import { AccountsPageError } from "./components/AccountsPageError.view";
+import { AccountsPageLoaded } from "./components/AccountsPageLoaded.view";
+import { AccountsPageLoading } from "./components/AccountsPageLoading.view";
 
 const AccountsPage: FC = () => {
 	const viewModel = useAccountsPageViewModel();
@@ -29,9 +27,4 @@ const AccountsPage: FC = () => {
 	);
 };
 
-export {
-	AccountsPage,
-	AccountsPageEmpty,
-	AccountsPageError,
-	AccountsPageLoading,
-};
+export { AccountsPage };

src/pages/accounts/ui/AccountsPage.view.tsx

@@ -1,175 +0,0 @@
-import {
-	Alert,
-	Button,
-	Group,
-	Loader,
-	Skeleton,
-	Stack,
-	Text,
-	Title,
-} from "@mantine/core";
-import type { FC } from "react";
-import { useTranslation } from "react-i18next";
-import { Link } from "react-router";
-import type { BrokerageAccountCard } from "@/entities/brokerage-account";
-import { BrokerageAccountList } from "@/entities/brokerage-account";
-import { LoadingSkeleton, StateView } from "@/shared/ui";
-
-type AccountsPageErrorProps = {
-	code?: string;
-	retry?: () => void;
-};
-
-type AccountsPageEmptyProps = {
-	refreshing?: boolean;
-	refreshError?: boolean;
-	retry?: () => void;
-};
-
-type AccountsPageLoadedProps = {
-	accounts: BrokerageAccountCard[];
-	refreshing?: boolean;
-	refreshError?: boolean;
-	retry?: () => void;
-};
-
-type AccountsRefreshStateProps = {
-	refreshing: boolean;
-	refreshError: boolean;
-	retry?: () => void;
-};
-
-const AccountsPageLoading: FC = () => {
-	const { t } = useTranslation();
-
-	return (
-		<LoadingSkeleton label={t("states.loadingTitle")}>
-			<Skeleton height={32} width="30%" />
-			{[0, 1, 2].map((index) => (
-				<Skeleton key={index} height={116} radius="md" />
-			))}
-		</LoadingSkeleton>
-	);
-};
-
-const AccountsPageError: FC<AccountsPageErrorProps> = (props) => {
-	const { code, retry } = props;
-	const { t } = useTranslation();
-	const settingsAction = (
-		<Button component={Link} to="/settings" variant="light">
-			{t("accounts.openSettings")}
-		</Button>
-	);
-	if (code === "TBANK_NOT_CONNECTED")
-		return (
-			<StateView
-				error
-				title={t("accounts.notConnectedTitle")}
-				text={t("accounts.notConnectedText")}
-				action={settingsAction}
-			/>
-		);
-	if (code === "INVALID_TBANK_TOKEN")
-		return (
-			<StateView
-				error
-				title={t("accounts.invalidTokenTitle")}
-				text={t("accounts.invalidTokenText")}
-				action={settingsAction}
-			/>
-		);
-	if (code === "TBANK_UNAVAILABLE")
-		return (
-			<StateView
-				error
-				title={t("accounts.unavailableTitle")}
-				text={t("accounts.unavailableText")}
-				action={
-					<Stack align="flex-start">
-						<Button onClick={retry}>{t("accounts.retry")}</Button>
-						{settingsAction}
-					</Stack>
-				}
-			/>
-		);
-	return (
-		<StateView
-			error
-			title={t("states.errorTitle")}
-			text={t("states.errorText")}
-			action={<Button onClick={retry}>{t("accounts.retry")}</Button>}
-		/>
-	);
-};
-
-const AccountsPageEmpty: FC<AccountsPageEmptyProps> = (props) => {
-	const { refreshing = false, refreshError = false, retry } = props;
-	const { t } = useTranslation();
-
-	return (
-		<Stack>
-			<AccountsRefreshState
-				refreshing={refreshing}
-				refreshError={refreshError}
-				retry={retry}
-			/>
-			<StateView
-				title={t("accounts.emptyTitle")}
-				text={t("accounts.emptyText")}
-			/>
-		</Stack>
-	);
-};
-
-const AccountsPageLoaded: FC<AccountsPageLoadedProps> = (props) => {
-	const { accounts, refreshing = false, refreshError = false, retry } = props;
-	const { t } = useTranslation();
-
-	return (
-		<Stack>
-			<Title order={1}>{t("accounts.title")}</Title>
-			<AccountsRefreshState
-				refreshing={refreshing}
-				refreshError={refreshError}
-				retry={retry}
-			/>
-			<BrokerageAccountList accounts={accounts} />
-		</Stack>
-	);
-};
-
-const AccountsRefreshState: FC<AccountsRefreshStateProps> = (props) => {
-	const { refreshing, refreshError, retry } = props;
-	const { t } = useTranslation();
-	if (!refreshing && !refreshError) return null;
-
-	return (
-		<>
-			{refreshing ? (
-				<Group gap="xs" role="status" aria-label={t("accounts.refreshing")}>
-					<Loader size="sm" />
-					<Text c="dimmed" size="sm">
-						{t("accounts.refreshing")}
-					</Text>
-				</Group>
-			) : null}
-			{refreshError ? (
-				<Alert color="orange">
-					<Stack gap="sm">
-						<Text>{t("accounts.refreshError")}</Text>
-						<Button onClick={retry} variant="light">
-							{t("accounts.retry")}
-						</Button>
-					</Stack>
-				</Alert>
-			) : null}
-		</>
-	);
-};
-
-export {
-	AccountsPageEmpty,
-	AccountsPageError,
-	AccountsPageLoaded,
-	AccountsPageLoading,
-};

src/pages/accounts/ui/AccountsPage.vm.ts

@@ -1,8 +1,8 @@
 import {
 	brokerageAccountCards,
-	errorCode,
 	useBrokerageAccounts,
 } from "@/entities/brokerage-account";
+import { apiErrorCode } from "@/shared/api";
 
 function useAccountsPageViewModel() {
 	const accounts = useBrokerageAccounts();
@@ -11,7 +11,7 @@ function useAccountsPageViewModel() {
 		if (accounts.isError)
 			return {
 				state: "error" as const,
-				code: errorCode(accounts.error),
+				code: apiErrorCode(accounts.error),
 				retry: () => accounts.refetch(),
 			};
 	}

src/pages/accounts/ui/components/AccountsPageEmpty.view.tsx

@@ -0,0 +1,23 @@
+import { Stack } from "@mantine/core";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { StateView } from "@/shared/ui";
+import {
+	AccountsRefreshState,
+	type AccountsRefreshStateProps,
+} from "./AccountsRefreshState.view";
+
+const AccountsPageEmpty: FC<AccountsRefreshStateProps> = (props) => {
+	const { t } = useTranslation();
+	return (
+		<Stack>
+			<AccountsRefreshState {...props} />
+			<StateView
+				title={t("accounts.emptyTitle")}
+				text={t("accounts.emptyText")}
+			/>
+		</Stack>
+	);
+};
+
+export { AccountsPageEmpty };

src/pages/accounts/ui/components/AccountsPageError.view.tsx

@@ -0,0 +1,59 @@
+import { Button, Stack } from "@mantine/core";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { StateView } from "@/shared/ui";
+
+type AccountsPageErrorProps = { code?: string; retry?: () => void };
+
+const AccountsPageError: FC<AccountsPageErrorProps> = (props) => {
+	const { code, retry } = props;
+	const { t } = useTranslation();
+	const settingsAction = (
+		<Button component={Link} to="/settings" variant="light">
+			{t("accounts.openSettings")}
+		</Button>
+	);
+	if (code === "TBANK_NOT_CONNECTED")
+		return (
+			<StateView
+				error
+				title={t("accounts.notConnectedTitle")}
+				text={t("accounts.notConnectedText")}
+				action={settingsAction}
+			/>
+		);
+	if (code === "INVALID_TBANK_TOKEN")
+		return (
+			<StateView
+				error
+				title={t("accounts.invalidTokenTitle")}
+				text={t("accounts.invalidTokenText")}
+				action={settingsAction}
+			/>
+		);
+	if (code === "TBANK_UNAVAILABLE")
+		return (
+			<StateView
+				error
+				title={t("accounts.unavailableTitle")}
+				text={t("accounts.unavailableText")}
+				action={
+					<Stack align="flex-start">
+						<Button onClick={retry}>{t("accounts.retry")}</Button>
+						{settingsAction}
+					</Stack>
+				}
+			/>
+		);
+	return (
+		<StateView
+			error
+			title={t("states.errorTitle")}
+			text={t("states.errorText")}
+			action={<Button onClick={retry}>{t("accounts.retry")}</Button>}
+		/>
+	);
+};
+
+export { AccountsPageError };

src/pages/accounts/ui/components/AccountsPageLoaded.view.tsx

@@ -0,0 +1,29 @@
+import { Stack, Title } from "@mantine/core";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import {
+	type BrokerageAccountCard,
+	BrokerageAccountList,
+} from "@/entities/brokerage-account";
+import {
+	AccountsRefreshState,
+	type AccountsRefreshStateProps,
+} from "./AccountsRefreshState.view";
+
+type AccountsPageLoadedProps = AccountsRefreshStateProps & {
+	accounts: BrokerageAccountCard[];
+};
+
+const AccountsPageLoaded: FC<AccountsPageLoadedProps> = (props) => {
+	const { accounts, ...refresh } = props;
+	const { t } = useTranslation();
+	return (
+		<Stack>
+			<Title order={1}>{t("accounts.title")}</Title>
+			<AccountsRefreshState {...refresh} />
+			<BrokerageAccountList accounts={accounts} />
+		</Stack>
+	);
+};
+
+export { AccountsPageLoaded };

src/pages/accounts/ui/components/AccountsPageLoading.view.tsx

@@ -0,0 +1,18 @@
+import { Skeleton } from "@mantine/core";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { LoadingSkeleton } from "@/shared/ui";
+
+const AccountsPageLoading: FC = () => {
+	const { t } = useTranslation();
+	return (
+		<LoadingSkeleton label={t("states.loadingTitle")}>
+			<Skeleton height={32} width="30%" />
+			{[0, 1, 2].map((index) => (
+				<Skeleton key={index} height={116} radius="md" />
+			))}
+		</LoadingSkeleton>
+	);
+};
+
+export { AccountsPageLoading };

src/pages/accounts/ui/components/AccountsRefreshState.view.tsx

@@ -0,0 +1,39 @@
+import { Alert, Button, Group, Loader, Stack, Text } from "@mantine/core";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+
+type AccountsRefreshStateProps = {
+	refreshing?: boolean;
+	refreshError?: boolean;
+	retry?: () => void;
+};
+
+const AccountsRefreshState: FC<AccountsRefreshStateProps> = (props) => {
+	const { refreshing = false, refreshError = false, retry } = props;
+	const { t } = useTranslation();
+	if (!refreshing && !refreshError) return null;
+	return (
+		<>
+			{refreshing ? (
+				<Group gap="xs" role="status" aria-label={t("accounts.refreshing")}>
+					<Loader size="sm" />
+					<Text c="dimmed" size="sm">
+						{t("accounts.refreshing")}
+					</Text>
+				</Group>
+			) : null}
+			{refreshError ? (
+				<Alert color="orange">
+					<Stack gap="sm">
+						<Text>{t("accounts.refreshError")}</Text>
+						<Button onClick={retry} variant="light">
+							{t("accounts.retry")}
+						</Button>
+					</Stack>
+				</Alert>
+			) : null}
+		</>
+	);
+};
+
+export { AccountsRefreshState, type AccountsRefreshStateProps };