fix: preserve cached data during refresh failures

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

@@ -2,17 +2,22 @@ import { MantineProvider } from "@mantine/core";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import { HttpResponse, http } from "msw";
-import { MemoryRouter } from "react-router";
+import { MemoryRouter, Route, Routes } from "react-router";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import type { Portfolio } from "@/entities/portfolio";
 import { server } from "@/test/server";
 import {
+	AccountPage,
 	AccountPageEmpty,
 	AccountPageError,
 	AccountPageLoaded,
 	AccountPageLoading,
 } from "./AccountPage";
 
+vi.mock("@/features/auth", () => ({
+	useAuth: () => ({ accessToken: "test-token" }),
+}));
+
 function renderPage(ui: React.ReactNode) {
 	return render(
 		<QueryClientProvider client={new QueryClient()}>
@@ -23,6 +28,20 @@ function renderPage(ui: React.ReactNode) {
 	);
 }
 
+function renderAccountRoute(queryClient: QueryClient) {
+	return render(
+		<QueryClientProvider client={queryClient}>
+			<MantineProvider>
+				<MemoryRouter initialEntries={["/accounts/account-1"]}>
+					<Routes>
+						<Route path="/accounts/:accountId" element={<AccountPage />} />
+					</Routes>
+				</MemoryRouter>
+			</MantineProvider>
+		</QueryClientProvider>,
+	);
+}
+
 const portfolio: Portfolio = {
 	lastSuccessfulAt: "2026-08-13T10:00:00Z",
 	isStale: true,
@@ -169,4 +188,68 @@ describe("AccountPage states", () => {
 		);
 		expect(screen.getByText("Вторая")).toBeInTheDocument();
 	});
+
+	it("keeps the cached portfolio visible with distinct server and refresh warnings", async () => {
+		let requestCount = 0;
+		server.use(
+			http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () => {
+				requestCount += 1;
+				if (requestCount === 1) return HttpResponse.json(portfolio);
+				return HttpResponse.json(
+					{ code: "TBANK_UNAVAILABLE" },
+					{ status: 503 },
+				);
+			}),
+		);
+		const queryClient = new QueryClient();
+		renderAccountRoute(queryClient);
+
+		await screen.findByText("Вторая");
+		void queryClient.invalidateQueries({
+			queryKey: ["get", "/api/v1/brokerage-accounts/{accountId}/portfolio"],
+		});
+
+		expect(
+			await screen.findByText(
+				"Не удалось обновить портфель. Показан последний полученный снимок.",
+			),
+		).toBeInTheDocument();
+		expect(
+			screen.getByText(
+				"T-Bank временно недоступен. Показан последний успешный снимок.",
+			),
+		).toBeInTheDocument();
+		expect(screen.getByText("Вторая")).toBeInTheDocument();
+		screen.getByRole("button", { name: "Повторить" }).click();
+		await waitFor(() => expect(requestCount).toBe(3));
+	});
+
+	it("keeps the cached portfolio visible during a background refresh", async () => {
+		let requestCount = 0;
+		let resolveRefresh: ((response: Response) => void) | undefined;
+		server.use(
+			http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () => {
+				requestCount += 1;
+				if (requestCount === 1) return HttpResponse.json(portfolio);
+				return new Promise<Response>((resolve) => {
+					resolveRefresh = resolve;
+				});
+			}),
+		);
+		const queryClient = new QueryClient();
+		renderAccountRoute(queryClient);
+
+		await screen.findByText("Вторая");
+		void queryClient.invalidateQueries({
+			queryKey: ["get", "/api/v1/brokerage-accounts/{accountId}/portfolio"],
+		});
+
+		await waitFor(() => expect(requestCount).toBe(2));
+		expect(screen.getByText("Вторая")).toBeInTheDocument();
+		expect(
+			screen.getByRole("status", { name: "Обновляем портфель" }),
+		).toBeInTheDocument();
+
+		resolveRefresh?.(HttpResponse.json(portfolio));
+	});
 });