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

import { MantineProvider } from "@mantine/core";
import { type QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { http, HttpResponse } from "msw";
import { MemoryRouter } from "react-router";
import { describe, expect, it, vi } from "vitest";

import { brokerageAccountsQueryKey } from "@/entities/brokerage-account";
import { configureAuthClient } from "@/shared/api";
import { createTestQueryClient } from "@/test/query";
import { resource } from "@/test/resource";
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",
	name: "Основной",
	openedOn: "2026-01-01",
	type: "BROKERAGE",
} as const;

function configureTestAuth() {
	configureAuthClient({
		accessToken: () => "test-token",
		clear: vi.fn(),
		refresh: () => Promise.resolve(true),
	});
}

function renderPage(queryClient: QueryClient) {
	configureTestAuth();

	return render(
		<QueryClientProvider client={queryClient}>
			<MantineProvider>
				<MemoryRouter>
					<AccountsPage />
				</MemoryRouter>
			</MantineProvider>
		</QueryClientProvider>,
	);
}

describe("AccountsPage", () => {
	it("loads accounts after retrying an initial HTTP failure", async () => {
		const modes: (null | string)[] = [];
		server.use(
			http.get("*/api/v1/brokerage-accounts", ({ request }) => {
				modes.push(new URL(request.url).searchParams.get("sync"));

				return modes.length === 1
					? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
					: HttpResponse.json(resource([account]));
			}),
		);
		renderPage(createTestQueryClient());
		fireEvent.click(await screen.findByRole("button", { name: "Повторить" }));
		expect(await screen.findByText(account.name)).toBeVisible();

		expect(modes).toEqual([null, "observe"]);
	});
	it.each([
		["loading", AccountsPageLoading, "status"],
		["empty", AccountsPageEmpty, undefined],
	] as const)("renders only the %s state", (_name, State, role) => {
		render(
			<MantineProvider>
				<State />
			</MantineProvider>,
		);
		// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
		if (role) expect(screen.getByRole(role)).toBeInTheDocument();
		else
			// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
			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>,
		);
		fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
		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 () => {
		let requestCount = 0;
		let resolveRefresh: ((response: Response) => void) | undefined;
		server.use(
			http.get("*/api/v1/brokerage-accounts", () => {
				requestCount += 1;
				if (requestCount === 1) return HttpResponse.json(resource([account]));

				{
					const deferred = Promise.withResolvers<Response>();
					resolveRefresh = deferred.resolve;

					return deferred.promise;
				}
			}),
		);
		const queryClient = createTestQueryClient();
		renderPage(queryClient);

		await screen.findByText(account.name);
		void queryClient.invalidateQueries({
			queryKey: brokerageAccountsQueryKey,
		});

		await waitFor(() => expect(requestCount).toBe(2));
		expect(screen.getByText(account.name)).toBeInTheDocument();
		expect(
			screen.getByRole("status", { name: "Обновляем данные" }),
		).toBeInTheDocument();

		resolveRefresh?.(HttpResponse.json(resource([account])));
	});

	it("keeps the cached account list and offers retry after a refresh error", async () => {
		const requests: unknown[] = [];
		server.use(
			http.post("*/api/v1/tbank-sync", async ({ request }) => {
				requests.push(await request.json());

				return HttpResponse.json(
					{ code: "TBANK_UNAVAILABLE" },
					{ status: 503 },
				);
			}),
		);
		let requestCount = 0;
		server.use(
			http.get("*/api/v1/brokerage-accounts", () => {
				requestCount += 1;
				if (requestCount === 1) return HttpResponse.json(resource([account]));

				return requestCount === 2
					? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
					: HttpResponse.json(resource([account]));
			}),
		);
		const queryClient = createTestQueryClient();
		renderPage(queryClient);

		await screen.findByText(account.name);
		void queryClient.invalidateQueries({
			queryKey: brokerageAccountsQueryKey,
		});

		const warning = await screen.findByText(
			"Не удалось обновить данные. Показаны последние полученные.",
		);

		expect(warning).toBeInTheDocument();
		expect(screen.getByText(account.name)).toBeInTheDocument();

		fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
		await waitFor(() => expect(requestCount).toBe(3));
		await waitFor(() => expect(warning).not.toBeInTheDocument());
		expect(screen.getByText(account.name)).toBeVisible();
		expect(requests).toEqual([]);
	});

	it("keeps a cached empty account list visible after a refresh error", async () => {
		let requestCount = 0;
		server.use(
			http.get("*/api/v1/brokerage-accounts", () => {
				requestCount += 1;

				return requestCount === 1
					? HttpResponse.json(resource([]))
					: HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 });
			}),
		);
		const queryClient = createTestQueryClient();
		renderPage(queryClient);

		await screen.findByText("Нет инвестиционных счетов");
		void queryClient.invalidateQueries({
			queryKey: brokerageAccountsQueryKey,
		});

		expect(
			await screen.findByText(
				"Не удалось обновить данные. Показаны последние полученные.",
			),
		).toBeInTheDocument();
		expect(screen.getByText("Нет инвестиционных счетов")).toBeInTheDocument();
	});
});

it.each(["idle", "failed"] as const)(
	"keeps partial empty membership distinct from no accounts (sync=%s)",
	async (state) => {
		server.use(
			http.get("*/api/v1/brokerage-accounts", () =>
				HttpResponse.json(resource([], {
					availability: "partial",
					sync: { errorCode: null, id: null, state },
				})),
			),
		);
		const client = createTestQueryClient();
		renderPage(client);
		await waitFor(() =>
			expect(client.getQueryData(brokerageAccountsQueryKey)).toMatchObject({
				data: [],
				meta: { availability: "partial" },
			}),
		);
		expect(screen.queryByText("Нет инвестиционных счетов"))
			.not.toBeInTheDocument();
		if (state === "failed")
			// eslint-disable-next-line vitest/no-conditional-expect -- Each fixed state has a different observable recovery contract.
			expect(await screen.findByRole("button", { name: "Повторить" }))
				.toBeVisible();
		else
			// eslint-disable-next-line vitest/no-conditional-expect -- Each fixed state has a different observable recovery contract.
			expect(screen.getByRole("status")).toBeVisible();
	},
);

it("keeps unknown membership loading instead of declaring no accounts", async () => {
	server.use(
		http.get("*/api/v1/brokerage-accounts", () =>
			HttpResponse.json(resource(null)),
		),
	);
	const client = createTestQueryClient();
	renderPage(client);
	await waitFor(() =>

		expect(client.getQueryData(brokerageAccountsQueryKey)).toMatchObject(
			{
				data: null,
			},
		),
	);
	expect(
		screen.queryByText("Нет инвестиционных счетов"),
	).not.toBeInTheDocument();
	expect(screen.getByRole("status")).toBeVisible();
});