refactor: simplify resource queries and layout tests

2026-09-27 18:53:12 +03:00
parent 5e076470aa
commit c1b08735e3
18 changed files with 508 additions and 122 deletions
@@ -660,26 +660,6 @@ describe("AccountPage states", () => {
 		).toBeInTheDocument();
 	});

-	it("renders the bonds section as a single-column grid on any screen width", () => {
-		renderPage(
-			<AccountPageLoaded
-				{...loadedProps({
-					...portfolio,
-					positions: [portfolio.positions[1]],
-				})}
-			/>,
-		);
-		const singleColumnGrids = Array.from(document.querySelectorAll("style"))
-			.map((style) => (style.textContent ?? "").replace(/\s/g, ""))
-			.filter(
-				(css) =>
-					css.includes("--sg-cols:1") &&
-					!css.includes("@media") &&
-					!/--sg-cols:[23]/.test(css),
-			);
-		expect(singleColumnGrids).toHaveLength(1);
-	});
-
 	it("keeps other-position cards compact with labeled return and no logo", () => {
 		renderPage(
 			<AccountPageLoaded
@@ -0,0 +1,76 @@
+import "@mantine/core/styles.css";
+import "@wealthledger/ui/styles.css";
+import "@/shared/i18n";
+import { MantineProvider } from "@mantine/core";
+import { cleanup, render, screen } from "@testing-library/react";
+import { cssVariablesResolver, theme } from "@wealthledger/ui/theme";
+import { afterEach, expect, it } from "vitest";
+import type {
+	AccountPagePosition,
+	AccountPagePositionSection,
+} from "./AccountPage.vm";
+import { PositionSection } from "./components/PositionSection.view";
+
+afterEach(cleanup);
+
+it("keeps expanded positions vertical while other positions adapt to the viewport", () => {
+	const kinds: AccountPagePositionSection["kind"][] = [
+		"stocks",
+		"bonds",
+		"other",
+	];
+	const width = window.innerWidth;
+	expect([375, 1280]).toContain(width);
+	for (const kind of kinds) {
+		const positions: AccountPagePosition[] = [1, 2, 3].map((index) => ({
+			figi: null,
+			displayName: `Инструмент ${index}`,
+			type: kind === "stocks" ? "STOCK" : kind === "bonds" ? "BOND" : "FUND",
+			quantity: "10",
+			currentValue: { currency: "RUB", value: "1000" },
+			averagePurchasePrice: null,
+			absoluteReturn: null,
+			isin: null,
+			ticker: null,
+			logoName: null,
+			shareText: null,
+			returnText: null,
+			logoSrc: null,
+		}));
+		const { unmount } = render(
+			<MantineProvider
+				theme={theme}
+				cssVariablesResolver={cssVariablesResolver}
+				forceColorScheme="light"
+			>
+				<PositionSection
+					section={{
+						kind,
+						groups: positions.map((position) => ({
+							key: position.displayName,
+							positions: [position],
+						})),
+					}}
+				/>
+			</MantineProvider>,
+		);
+		const bounds = positions.map((position) =>
+			screen.getByText(position.displayName).getBoundingClientRect(),
+		);
+		const context = `${kind} at ${width}px`;
+		for (const [index, current] of bounds.entries()) {
+			expect(current.width, context).toBeGreaterThan(0);
+			expect(current.height, context).toBeGreaterThan(0);
+			if (index === 0) continue;
+			const previous = bounds[index - 1];
+			if (kind === "other" && width === 1280) {
+				expect(current.top, context).toBeCloseTo(previous.top, 0);
+				expect(current.left, context).toBeGreaterThan(previous.right);
+			} else {
+				expect(current.left, context).toBeCloseTo(previous.left, 0);
+				expect(current.top, context).toBeGreaterThan(previous.bottom);
+			}
+		}
+		unmount();
+	}
+});