feat: improve card operations pagination and scroll behavior

src/pages/card/ui/CardPage.test.tsx

@@ -9,7 +9,7 @@ import {
 } from "@testing-library/react";
 import { HttpResponse, http } from "msw";
 import { MemoryRouter, Route, Routes } from "react-router";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { configureAuthClient } from "@/shared/api";
 import { createTestQueryClient } from "@/test/query";
 import { server } from "@/test/server";
@@ -71,10 +71,15 @@ function setup(
 		http.get("*/api/v1/bank-cards/a/operations", ({ request }) => {
 			requests.push(new URL(request.url).search);
 			return HttpResponse.json({
-				items: [operation],
-				page: 1,
-				total: 2,
-				hasNext: true,
+				items: [
+					{
+						...operation,
+						id: `operation-${new URL(request.url).searchParams.get("page")}`,
+					},
+				],
+				page: Number(new URL(request.url).searchParams.get("page")),
+				total: 30,
+				hasNext: Number(new URL(request.url).searchParams.get("page")) < 3,
 			});
 		}),
 		http.get("*/api/v1/bank-cards/summary", () =>
@@ -93,7 +98,7 @@ function setup(
 	const client = createTestQueryClient();
 	render(
 		<QueryClientProvider client={client}>
-			<MantineProvider>
+			<MantineProvider env="test">
 				<MemoryRouter initialEntries={["/cards/a?month=2026-08"]}>
 					<Routes>
 						<Route path="/cards/:cardId" element={<CardPage />} />
@@ -114,10 +119,22 @@ describe("CardPage", () => {
 		expect(screen.getByText("03.08.2026")).toBeInTheDocument();
 		expect(screen.getByText("−50,01 ₽")).toBeInTheDocument();
 		expect(screen.getByText("-50 ₽")).toBeInTheDocument();
+		expect(screen.getByRole("button", { name: "Назад" })).toBeDisabled();
+		expect(requests.every((value) => value.includes("limit=10"))).toBe(true);
 		fireEvent.click(screen.getByRole("button", { name: "Далее" }));
 		await waitFor(() =>
 			expect(requests.some((v) => v.includes("page=2"))).toBe(true),
 		);
+		const lastPage = await screen.findByRole("button", { name: "Страница 3" });
+		await waitFor(() => expect(lastPage).toBeEnabled());
+		fireEvent.click(lastPage);
+		await waitFor(() => expect(requests.at(-1)).toContain("page=3"));
+		await waitFor(() =>
+			expect(screen.getByRole("button", { name: "Далее" })).toBeDisabled(),
+		);
+		expect(
+			screen.getByRole("button", { name: "Страница 3" }),
+		).toHaveTextContent("3");
 		fireEvent.click(screen.getByLabelText("Месяц"));
 		fireEvent.click(await screen.findByRole("button", { name: "Jul" }));
 		await waitFor(() =>
@@ -129,6 +146,89 @@ describe("CardPage", () => {
 		);
 		expect(screen.getByText(/10\s000 ₽/)).toBeInTheDocument();
 	});
+	it("keeps the journal in place while the next page loads", async () => {
+		const scroll = vi.spyOn(window, "scrollBy").mockImplementation(() => {});
+		setup();
+		await screen.findByText("Перевод на «Запасная»");
+		const navigation = screen.getByRole("navigation", {
+			name: "Страницы операций",
+		});
+		const measure = vi
+			.spyOn(navigation, "getBoundingClientRect")
+			.mockReturnValue({ top: 600 } as DOMRect);
+		let release = () => {};
+		const pending = new Promise<void>((resolve) => {
+			release = resolve;
+		});
+		server.use(
+			http.get("*/api/v1/bank-cards/a/operations", async () => {
+				await pending;
+				return HttpResponse.json({
+					items: [{ ...operation, id: "next", description: "Новая страница" }],
+					page: 2,
+					total: 30,
+					hasNext: true,
+				});
+			}),
+		);
+		fireEvent.click(screen.getByRole("button", { name: "Далее" }));
+		await waitFor(() =>
+			expect(screen.getByRole("button", { name: "Далее" })).toBeDisabled(),
+		);
+		expect(screen.getByText("Перевод на «Запасная»")).toBeInTheDocument();
+		expect(screen.getByRole("button", { name: "Изменить" })).toBeDisabled();
+		expect(
+			screen.queryByLabelText("Загрузка операций"),
+		).not.toBeInTheDocument();
+		expect(scroll).not.toHaveBeenCalled();
+		measure.mockReturnValue({ top: 200 } as DOMRect);
+		release();
+		await screen.findByText(/Новая страница/);
+		const list = screen.getByText(/Новая страница/).closest("[aria-busy]");
+		expect(list?.parentElement?.style.minHeight).toBe("");
+		expect(scroll).toHaveBeenCalledExactlyOnceWith({
+			top: -400,
+			behavior: "instant",
+		});
+		measure.mockRestore();
+		scroll.mockRestore();
+		await waitFor(() =>
+			expect(screen.getByRole("button", { name: "Далее" })).toBeEnabled(),
+		);
+	});
+	it("changes page size, resets the page and shows all monthly operations", async () => {
+		const { requests } = setup();
+		await screen.findByText("Перевод на «Запасная»");
+		fireEvent.click(screen.getByRole("button", { name: "Страница 3" }));
+		await waitFor(() => expect(requests.at(-1)).toContain("page=3"));
+		await waitFor(() =>
+			expect(screen.getByRole("button", { name: "Страница 1" })).toBeEnabled(),
+		);
+		fireEvent.click(
+			screen.getByRole("combobox", { name: "Операций на странице" }),
+		);
+		fireEvent.click(await screen.findByRole("option", { name: "20" }));
+		await waitFor(() => {
+			expect(requests.at(-1)).toContain("limit=20");
+			expect(requests.at(-1)).toContain("page=1");
+		});
+		await waitFor(() =>
+			expect(screen.getByRole("button", { name: "Страница 1" })).toBeEnabled(),
+		);
+		fireEvent.click(
+			screen.getByRole("combobox", { name: "Операций на странице" }),
+		);
+		fireEvent.click(await screen.findByRole("option", { name: "Все" }));
+		await waitFor(() =>
+			expect(
+				screen.queryByRole("navigation", { name: "Страницы операций" }),
+			).not.toBeInTheDocument(),
+		);
+		await waitFor(() => expect(requests.at(-1)).toContain("limit=100"));
+		await waitFor(() =>
+			expect(screen.getAllByText("Перевод на «Запасная»")).toHaveLength(3),
+		);
+	});
 	it("keeps card and journal when summary fails", async () => {
 		setup({ summaryError: true });
 		await screen.findByRole("heading", { name: "Повседневная" });