98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
import "@mantine/core/styles.css";
|
|
import "@wealthledger/ui/styles.css";
|
|
|
|
import "@/shared/i18n";
|
|
import { MantineProvider } from "@mantine/core";
|
|
// eslint-disable-next-line testing-library/no-manual-cleanup -- Vitest globals are disabled, so RTL cannot register its automatic afterEach cleanup.
|
|
import { cleanup, render, screen } from "@testing-library/react";
|
|
import { cssVariablesResolver, theme } from "@wealthledger/ui/theme";
|
|
import { afterEach, assert, expect, it } from "vitest";
|
|
|
|
import type { AccountPagePosition, AccountPagePositionSection } from "../../model/positions";
|
|
|
|
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 otherType = kind === "bonds" ? "BOND" : "FUND";
|
|
|
|
const positions: AccountPagePosition[] = [1, 2, 3].map(
|
|
|
|
index =>
|
|
({
|
|
absoluteReturn: null,
|
|
averagePurchasePrice: null,
|
|
currentValue: { currency: "RUB", value: "1000" },
|
|
displayName: `Инструмент ${index}`,
|
|
figi: null,
|
|
isin: null,
|
|
logoName: null,
|
|
logoSrc: null,
|
|
quantity: "10",
|
|
returnText: null,
|
|
shareText: null,
|
|
ticker: null,
|
|
type: kind === "stocks" ? "STOCK" : otherType,
|
|
}),
|
|
);
|
|
|
|
const { unmount } = render(
|
|
<MantineProvider
|
|
cssVariablesResolver={cssVariablesResolver}
|
|
forceColorScheme="light"
|
|
theme={theme}
|
|
>
|
|
<PositionSection
|
|
section={{
|
|
groups: positions.map(position => ({
|
|
key: position.displayName,
|
|
positions: [position],
|
|
})),
|
|
kind,
|
|
}}
|
|
/>
|
|
</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];
|
|
assert.isDefined(previous);
|
|
|
|
if (kind === "other" && width === 1280) {
|
|
// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
|
|
expect(current.top, context).toBeCloseTo(previous.top, 0);
|
|
// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
|
|
expect(current.left, context).toBeGreaterThan(previous.right);
|
|
}
|
|
else {
|
|
// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
|
|
expect(current.left, context).toBeCloseTo(previous.left, 0);
|
|
// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
|
|
expect(current.top, context).toBeGreaterThan(previous.bottom);
|
|
}
|
|
}
|
|
|
|
unmount();
|
|
}
|
|
});
|