refactor: align frontend ownership boundaries

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

src/app/routes/AppRoutes.test.tsx

@@ -1,25 +1,20 @@
 import { MantineProvider } from "@mantine/core";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, 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 } from "vitest";
 
 import { AuthProvider } from "@/features/auth";
-import {
-	AccountsPageEmpty,
-	AccountsPageError,
-	AccountsPageLoading,
-} from "@/pages/accounts";
+import { createTestQueryClient } from "@/test/query";
 import { server } from "@/test/server";
 import { theme } from "../theme";
 import { AppRoutes } from "./AppRoutes";
 
 describe("AppRoutes", () => {
-	afterEach(cleanup);
 	function renderRoutes(path: string) {
 		return render(
-			<QueryClientProvider client={new QueryClient()}>
+			<QueryClientProvider client={createTestQueryClient()}>
 				<MemoryRouter initialEntries={[path]}>
 					<MantineProvider theme={theme}>
 						<AuthProvider>
@@ -50,37 +45,6 @@ describe("AppRoutes", () => {
 		);
 	});
 
-	it("renders the T-Bank settings action for a missing connection", () => {
-		render(
-			<MantineProvider theme={theme}>
-				<MemoryRouter>
-					<AccountsPageError code="TBANK_NOT_CONNECTED" />
-				</MemoryRouter>
-			</MantineProvider>,
-		);
-
-		expect(
-			screen.getByRole("link", { name: "Открыть настройки T-Bank" }),
-		).toHaveAttribute("href", "/settings");
-	});
-
-	it("renders retry and settings actions when T-Bank is unavailable", () => {
-		const retry = vi.fn();
-		render(
-			<MantineProvider theme={theme}>
-				<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("redirects anonymous users from accounts", async () => {
 		renderRoutes("/accounts");
 
@@ -91,6 +55,40 @@ describe("AppRoutes", () => {
 		);
 	});
 
+	it("logs in through the public form and reaches the protected landing", async () => {
+		let credentials: unknown;
+		server.use(
+			http.post("*/api/v1/auth/login", async ({ request }) => {
+				credentials = await request.json();
+				return HttpResponse.json({
+					accessToken: "login-token",
+					user: { id: "user-1", email: "user@example.com" },
+				});
+			}),
+		);
+		renderRoutes("/accounts");
+
+		await screen.findByRole("heading", { level: 1, name: "Вход" });
+		fireEvent.change(screen.getByLabelText("Email"), {
+			target: { value: " User@Example.com " },
+		});
+		fireEvent.change(screen.getByLabelText("Пароль"), {
+			target: { value: "a secure password" },
+		});
+		fireEvent.click(screen.getByRole("button", { name: "Вход" }));
+
+		expect(
+			await screen.findByRole("heading", {
+				level: 2,
+				name: "Нет инвестиционных счетов",
+			}),
+		).toBeInTheDocument();
+		expect(credentials).toEqual({
+			email: "user@example.com",
+			password: "a secure password",
+		});
+	});
+
 	it("lazy-loads the protected shell for an authenticated accounts route", async () => {
 		server.use(
 			http.post("*/api/v1/auth/refresh", () =>
@@ -114,37 +112,4 @@ describe("AppRoutes", () => {
 			screen.getByRole("navigation", { name: "WealthLedger" }),
 		).toBeInTheDocument();
 	});
-
-	it.each([
-		["loading", AccountsPageLoading, "status"],
-		["error", AccountsPageError, "alert"],
-		["empty", AccountsPageEmpty, undefined],
-	] as const)("renders only the Accounts %s state", (_name, State, role) => {
-		render(
-			<MantineProvider theme={theme}>
-				<State />
-			</MantineProvider>,
-		);
-
-		if (role) {
-			expect(screen.getByRole(role)).toBeInTheDocument();
-		} else {
-			expect(
-				screen.getByRole("heading", {
-					level: 2,
-					name: "Нет инвестиционных счетов",
-				}),
-			).toBeInTheDocument();
-		}
-
-		expect(screen.queryAllByRole("status")).toHaveLength(
-			role === "status" ? 1 : 0,
-		);
-		expect(screen.queryAllByRole("alert")).toHaveLength(
-			role === "alert" ? 1 : 0,
-		);
-		expect(screen.queryAllByText("Нет инвестиционных счетов")).toHaveLength(
-			role ? 0 : 1,
-		);
-	});
 });

src/app/routes/AppRoutes.tsx

@@ -1,9 +1,8 @@
-import { Container, Group, Skeleton, Stack } from "@mantine/core";
-import type { FC, PropsWithChildren } from "react";
-import { lazy, Suspense } from "react";
-import { useTranslation } from "react-i18next";
-import { Navigate, Route, Routes, useLocation } from "react-router";
-import { useAuth } from "@/features/auth";
+import type { FC } from "react";
+import { lazy } from "react";
+import { Navigate, Route, Routes } from "react-router";
+import { LazyPage } from "./RouteFallback";
+import { Protected, Public } from "./RouteGuards";
 
 const AccountPage = lazy(async () => {
 	const { AccountPage } = await import("@/pages/account");
@@ -46,187 +45,96 @@ const ProtectedLayout = lazy(async () => {
 	return { default: ProtectedLayout };
 });
 
-type RouteSkeletonVariant = "auth" | "content" | "shell";
-
-type LazyPageProps = PropsWithChildren<{
-	variant: RouteSkeletonVariant;
-}>;
-
-const RouteSkeleton: FC<{ variant: RouteSkeletonVariant }> = (props) => {
-	const { variant } = props;
-	const { t } = useTranslation();
-
-	if (variant === "auth")
-		return (
-			<Container size={420} py="xl">
-				<Stack
-					aria-busy="true"
-					aria-label={t("states.loadingTitle")}
-					role="status"
-				>
-					<Skeleton height={32} width="45%" />
-					<Skeleton height={48} radius="sm" />
-					<Skeleton height={48} radius="sm" />
-					<Skeleton height={36} radius="sm" />
-				</Stack>
-			</Container>
-		);
-
-	if (variant === "shell")
-		return (
-			<Stack
-				aria-busy="true"
-				aria-label={t("states.loadingTitle")}
-				gap={0}
-				role="status"
-			>
-				<Group justify="space-between" p="md">
-					<Skeleton height={28} width={160} />
-					<Skeleton height={28} width={96} />
-				</Group>
-				<Container fluid p="md">
-					<Skeleton height={20} width="30%" />
-					<Stack mt="lg">
-						<Skeleton height={32} width="30%" />
-						<Skeleton height={160} radius="md" />
-					</Stack>
-				</Container>
-			</Stack>
-		);
-
-	return (
-		<Stack aria-busy="true" aria-label={t("states.loadingTitle")} role="status">
-			<Skeleton height={32} width="30%" />
-			<Skeleton height={160} radius="md" />
-		</Stack>
-	);
-};
-
-const LazyPage: FC<LazyPageProps> = (props) => {
-	const { children, variant } = props;
-
-	return (
-		<Suspense fallback={<RouteSkeleton variant={variant} />}>
-			{children}
-		</Suspense>
-	);
-};
-
-const Protected: FC<PropsWithChildren> = (props) => {
-	const { children } = props;
-	const { user, ready } = useAuth();
-	const location = useLocation();
-	if (!ready) return <RouteSkeleton variant="shell" />;
-	return user ? (
-		children
-	) : (
-		<Navigate
-			to="/login"
-			state={{ returnTo: `${location.pathname}${location.search}` }}
-			replace
+const AppRoutes: FC = () => (
+	<Routes>
+		<Route path="/" element={<Navigate to="/accounts" replace />} />
+		<Route
+			path="/login"
+			element={
+				<Public>
+					<LazyPage variant="auth">
+						<LoginPage />
+					</LazyPage>
+				</Public>
+			}
 		/>
-	);
-};
-
-const Public: FC<PropsWithChildren> = (props) => {
-	const { children } = props;
-	const { user, ready } = useAuth();
-	if (!ready) return <RouteSkeleton variant="shell" />;
-	return user ? <Navigate to="/accounts" replace /> : children;
-};
-
-const AppRoutes: FC = () => {
-	return (
-		<Routes>
-			<Route path="/" element={<Navigate to="/accounts" replace />} />
+		<Route
+			path="/register"
+			element={
+				<Public>
+					<LazyPage variant="auth">
+						<RegisterPage />
+					</LazyPage>
+				</Public>
+			}
+		/>
+		<Route
+			element={
+				<Protected>
+					<LazyPage variant="shell">
+						<ProtectedLayout />
+					</LazyPage>
+				</Protected>
+			}
+		>
 			<Route
-				path="/login"
-				element={
-					<Public>
-						<LazyPage variant="auth">
-							<LoginPage />
-						</LazyPage>
-					</Public>
-				}
-			/>
-			<Route
-				path="/register"
-				element={
-					<Public>
-						<LazyPage variant="auth">
-							<RegisterPage />
-						</LazyPage>
-					</Public>
-				}
-			/>
-			<Route
-				element={
-					<Protected>
-						<LazyPage variant="shell">
-							<ProtectedLayout />
-						</LazyPage>
-					</Protected>
-				}
-			>
-				<Route
-					path="/accounts"
-					element={
-						<LazyPage variant="content">
-							<AccountsPage />
-						</LazyPage>
-					}
-				/>
-				<Route
-					path="/accounts/:accountId"
-					element={
-						<LazyPage variant="content">
-							<AccountPage />
-						</LazyPage>
-					}
-				/>
-				<Route
-					path="/accounts/:accountId/events"
-					element={
-						<LazyPage variant="content">
-							<AccountEventsPage />
-						</LazyPage>
-					}
-				/>
-				<Route
-					path="/accounts/:accountId/income"
-					element={
-						<LazyPage variant="content">
-							<AccountIncomePage />
-						</LazyPage>
-					}
-				/>
-				<Route
-					path="/accounts/:accountId/operations"
-					element={
-						<LazyPage variant="content">
-							<AccountOperationsPage />
-						</LazyPage>
-					}
-				/>
-				<Route
-					path="/settings"
-					element={
-						<LazyPage variant="content">
-							<SettingsPage />
-						</LazyPage>
-					}
-				/>
-			</Route>
-			<Route
-				path="*"
+				path="/accounts"
 				element={
 					<LazyPage variant="content">
-						<NotFoundPage />
+						<AccountsPage />
 					</LazyPage>
 				}
 			/>
-		</Routes>
-	);
-};
+			<Route
+				path="/accounts/:accountId"
+				element={
+					<LazyPage variant="content">
+						<AccountPage />
+					</LazyPage>
+				}
+			/>
+			<Route
+				path="/accounts/:accountId/events"
+				element={
+					<LazyPage variant="content">
+						<AccountEventsPage />
+					</LazyPage>
+				}
+			/>
+			<Route
+				path="/accounts/:accountId/income"
+				element={
+					<LazyPage variant="content">
+						<AccountIncomePage />
+					</LazyPage>
+				}
+			/>
+			<Route
+				path="/accounts/:accountId/operations"
+				element={
+					<LazyPage variant="content">
+						<AccountOperationsPage />
+					</LazyPage>
+				}
+			/>
+			<Route
+				path="/settings"
+				element={
+					<LazyPage variant="content">
+						<SettingsPage />
+					</LazyPage>
+				}
+			/>
+		</Route>
+		<Route
+			path="*"
+			element={
+				<LazyPage variant="content">
+					<NotFoundPage />
+				</LazyPage>
+			}
+		/>
+	</Routes>
+);
 
 export { AppRoutes };

src/app/routes/RouteErrorBoundary.test.tsx

@@ -1,8 +1,8 @@
 import { MantineProvider } from "@mantine/core";
-import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import type { FC } from "react";
 import { MemoryRouter, useLocation, useNavigate } from "react-router";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { RouteErrorBoundary } from "./RouteErrorBoundary";
 
 let authenticated = false;
@@ -52,7 +52,6 @@ function renderBoundary(path: string) {
 }
 
 describe("RouteErrorBoundary", () => {
-	afterEach(cleanup);
 	it("offers login after a public route error without error details", () => {
 		authenticated = false;
 		renderBoundary("/login");

src/app/routes/RouteFallback.tsx

@@ -0,0 +1,68 @@
+import { Container, Group, Skeleton, Stack } from "@mantine/core";
+import type { FC, PropsWithChildren } from "react";
+import { Suspense } from "react";
+import { useTranslation } from "react-i18next";
+
+type RouteSkeletonVariant = "auth" | "content" | "shell";
+type LazyPageProps = PropsWithChildren<{ variant: RouteSkeletonVariant }>;
+
+const RouteSkeleton: FC<{ variant: RouteSkeletonVariant }> = (props) => {
+	const { variant } = props;
+	const { t } = useTranslation();
+
+	if (variant === "auth")
+		return (
+			<Container size={420} py="xl">
+				<Stack
+					aria-busy="true"
+					aria-label={t("states.loadingTitle")}
+					role="status"
+				>
+					<Skeleton height={32} width="45%" />
+					<Skeleton height={48} radius="sm" />
+					<Skeleton height={48} radius="sm" />
+					<Skeleton height={36} radius="sm" />
+				</Stack>
+			</Container>
+		);
+
+	if (variant === "shell")
+		return (
+			<Stack
+				aria-busy="true"
+				aria-label={t("states.loadingTitle")}
+				gap={0}
+				role="status"
+			>
+				<Group justify="space-between" p="md">
+					<Skeleton height={28} width={160} />
+					<Skeleton height={28} width={96} />
+				</Group>
+				<Container fluid p="md">
+					<Skeleton height={20} width="30%" />
+					<Stack mt="lg">
+						<Skeleton height={32} width="30%" />
+						<Skeleton height={160} radius="md" />
+					</Stack>
+				</Container>
+			</Stack>
+		);
+
+	return (
+		<Stack aria-busy="true" aria-label={t("states.loadingTitle")} role="status">
+			<Skeleton height={32} width="30%" />
+			<Skeleton height={160} radius="md" />
+		</Stack>
+	);
+};
+
+const LazyPage: FC<LazyPageProps> = (props) => {
+	const { children, variant } = props;
+	return (
+		<Suspense fallback={<RouteSkeleton variant={variant} />}>
+			{children}
+		</Suspense>
+	);
+};
+
+export { LazyPage, RouteSkeleton };

src/app/routes/RouteGuards.tsx

@@ -0,0 +1,29 @@
+import type { FC, PropsWithChildren } from "react";
+import { Navigate, useLocation } from "react-router";
+import { useAuth } from "@/features/auth";
+import { RouteSkeleton } from "./RouteFallback";
+
+const Protected: FC<PropsWithChildren> = (props) => {
+	const { children } = props;
+	const { user, ready } = useAuth();
+	const location = useLocation();
+	if (!ready) return <RouteSkeleton variant="shell" />;
+	return user ? (
+		children
+	) : (
+		<Navigate
+			to="/login"
+			state={{ returnTo: `${location.pathname}${location.search}` }}
+			replace
+		/>
+	);
+};
+
+const Public: FC<PropsWithChildren> = (props) => {
+	const { children } = props;
+	const { user, ready } = useAuth();
+	if (!ready) return <RouteSkeleton variant="shell" />;
+	return user ? <Navigate to="/accounts" replace /> : children;
+};
+
+export { Protected, Public };