feat: replace account page accordion with tabs and show open position result (#112)
This commit was merged in pull request #113.
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import { MantineProvider } from "@mantine/core";
|
||||
import { type QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import {
|
||||
fireEvent,
|
||||
render,
|
||||
screen,
|
||||
waitFor,
|
||||
@@ -23,7 +24,10 @@ import type {
|
||||
AccountPageRecentOperations,
|
||||
} from "../../model/previews";
|
||||
|
||||
import { toAccountPagePositionSections } from "../../model/positions";
|
||||
import {
|
||||
toAccountPagePositionSections,
|
||||
toUnrealizedReturns,
|
||||
} from "../../model/positions";
|
||||
import { AccountPage } from "./AccountPage";
|
||||
import { AccountPageEmpty } from "./components/AccountPageEmpty.view";
|
||||
import { AccountPageError } from "./components/AccountPageError.view";
|
||||
@@ -142,6 +146,7 @@ function loadedProps(nextPortfolio: Portfolio = portfolio) {
|
||||
positionSections: toAccountPagePositionSections(nextPortfolio),
|
||||
recentEvents: emptyRecentEvents,
|
||||
recentOperations: emptyRecentOperations,
|
||||
unrealizedReturns: toUnrealizedReturns(nextPortfolio.positions),
|
||||
};
|
||||
}
|
||||
|
||||
@@ -246,7 +251,7 @@ describe("AccountPage states", () => {
|
||||
).toHaveTextContent("Данные о структуре портфеля пока недоступны.");
|
||||
expect(
|
||||
screen.getAllByRole("definition").map(node => node.textContent),
|
||||
).toEqual(["1 234,5 ₽", "0,5 $"]);
|
||||
).toEqual(["1 234,5 ₽"]);
|
||||
});
|
||||
it("keeps initial placeholders decorative without amounts or focus targets", () => {
|
||||
const { container } = renderPage(<AccountPageLoading />);
|
||||
@@ -309,8 +314,10 @@ describe("AccountPage states", () => {
|
||||
/>,
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByRole("tab", { name: "Деньги" }));
|
||||
|
||||
const balances = within(
|
||||
screen.getByRole("region", { name: "Денежные остатки" }),
|
||||
screen.getByRole("tabpanel", { name: "Деньги" }),
|
||||
);
|
||||
|
||||
expect(
|
||||
@@ -318,7 +325,12 @@ describe("AccountPage states", () => {
|
||||
).toEqual(["234,500000000000000001 ₽", "-0,5 $", "3,00 XYZ"]);
|
||||
expect(
|
||||
screen.getAllByRole("definition").map(node => node.textContent),
|
||||
).toEqual(["1 234,5 ₽", "234,500000000000000001 ₽", "-0,5 $", "3,00 XYZ"]);
|
||||
).toEqual([
|
||||
"1 234,5 ₽",
|
||||
"234,500000000000000001 ₽",
|
||||
"-0,5 $",
|
||||
"3,00 XYZ",
|
||||
]);
|
||||
expect(screen.queryByText("Торгуемая валюта")).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByText(/полная оценка|общая стоимость/i),
|
||||
@@ -341,6 +353,7 @@ describe("AccountPage states", () => {
|
||||
);
|
||||
renderAccountRoute(createTestQueryClient());
|
||||
await screen.findByRole("heading", { level: 1, name: "Портфель" });
|
||||
fireEvent.click(screen.getByRole("tab", { name: "Деньги" }));
|
||||
expect(screen.getByRole("definition")).toHaveTextContent("0,5 $");
|
||||
expect(screen.queryByText("Портфель пока пуст")).not.toBeInTheDocument();
|
||||
},
|
||||
@@ -381,9 +394,10 @@ describe("AccountPage states", () => {
|
||||
).not.toBeInTheDocument();
|
||||
expect(screen.queryByText("Торгуемая валюта")).not.toBeInTheDocument();
|
||||
expect(screen.queryByText("Портфель пока пуст")).not.toBeInTheDocument();
|
||||
fireEvent.click(screen.getByRole("tab", { name: "Деньги" }));
|
||||
expect(
|
||||
within(
|
||||
screen.getByRole("region", { name: "Денежные остатки" }),
|
||||
screen.getByRole("tabpanel", { name: "Деньги" }),
|
||||
).queryByRole("definition"),
|
||||
).not.toBeInTheDocument();
|
||||
expect(
|
||||
@@ -395,11 +409,25 @@ describe("AccountPage states", () => {
|
||||
},
|
||||
);
|
||||
|
||||
it("renders the empty state", () => {
|
||||
renderPage(<AccountPageEmpty {...emptyProps()} />);
|
||||
it("renders the empty state with self-descriptive preview links", () => {
|
||||
renderPage(
|
||||
<AccountPageEmpty
|
||||
{...emptyProps()}
|
||||
incomeSummary={{
|
||||
state: "empty",
|
||||
to: "/accounts/account-1/income",
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
expect(
|
||||
screen.getByRole("heading", { name: "Портфель пока пуст" }),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.getByRole("link", { name: "Открыть журнал" }))
|
||||
.toBeInTheDocument();
|
||||
expect(screen.getByRole("link", { name: "Открыть будущие события" }))
|
||||
.toBeInTheDocument();
|
||||
expect(screen.getByRole("link", { name: "Открыть пассивный доход" }))
|
||||
.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("keeps a null portfolio envelope loading instead of an empty portfolio", async () => {
|
||||
@@ -455,18 +483,22 @@ describe("AccountPage states", () => {
|
||||
expect(screen.queryByText(/T-Bank временно недоступен/))
|
||||
.not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: "Акции" })).toBeInTheDocument();
|
||||
expect(screen.getByRole("radio", { name: "Акции" })).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByRole("button", { name: "Облигации" }),
|
||||
screen.getByRole("radio", { name: "Облигации" }),
|
||||
).toBeInTheDocument();
|
||||
|
||||
const positions = screen
|
||||
.getAllByText(/Вторая|Первая/)
|
||||
.map(element => element.textContent);
|
||||
|
||||
expect(positions).toEqual(["Вторая", "Первая"]);
|
||||
expect(screen.getByText("10 ₽")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getAllByRole<HTMLInputElement>("radio").map(radio => radio.value),
|
||||
).toEqual(["stocks", "bonds"]);
|
||||
expect(screen.getByText("Вторая")).toBeInTheDocument();
|
||||
expect(screen.getByText("-1 ₽")).toBeInTheDocument();
|
||||
expect(screen.getByRole("img", { name: "Вторая" })).toHaveAttribute(
|
||||
"src",
|
||||
"https://invest-brands.cdn-tinkoff.ru/vtorayax160.png",
|
||||
);
|
||||
fireEvent.click(screen.getByRole("radio", { name: "Облигации" }));
|
||||
expect(screen.getByText("10 ₽")).toBeInTheDocument();
|
||||
expect(screen.queryByText(/Доход:/)).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText("Средняя цена: 11 ₽ · Доля: 100 %"),
|
||||
@@ -475,10 +507,6 @@ describe("AccountPage states", () => {
|
||||
screen.getByText("Количество: 1 · RU000A0JX0J2"),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.queryByText("—")).not.toBeInTheDocument();
|
||||
expect(screen.getByRole("img", { name: "Вторая" })).toHaveAttribute(
|
||||
"src",
|
||||
"https://invest-brands.cdn-tinkoff.ru/vtorayax160.png",
|
||||
);
|
||||
});
|
||||
|
||||
it.each(["STOCK", "BOND"] as const)(
|
||||
@@ -515,8 +543,11 @@ describe("AccountPage states", () => {
|
||||
expect(screen.getByText("Б")).toBeInTheDocument();
|
||||
expect(screen.getByText("Н")).toBeInTheDocument();
|
||||
expect(screen.getAllByRole("img")).toHaveLength(1);
|
||||
for (const value of ["+3 ₽", "+2 ₽", "0 ₽"])
|
||||
|
||||
for (const value of ["+3 ₽", "+2 ₽", "0 ₽"]) {
|
||||
expect(screen.getByText(value)).toBeInTheDocument();
|
||||
}
|
||||
|
||||
expect(screen.queryByText(/Доход:/)).not.toBeInTheDocument();
|
||||
},
|
||||
);
|
||||
@@ -564,6 +595,7 @@ describe("AccountPage states", () => {
|
||||
expect(screen.queryByText("STOCK-ISIN")).not.toBeInTheDocument();
|
||||
expect(screen.getByText("Количество: 2 · FALLBACK-ISIN"))
|
||||
.toBeInTheDocument();
|
||||
fireEvent.click(screen.getByRole("radio", { name: "Облигации" }));
|
||||
expect(screen.getByText("Количество: 3 · BOND-ISIN"))
|
||||
.toBeInTheDocument();
|
||||
expect(screen.queryByText("OFZ")).not.toBeInTheDocument();
|
||||
@@ -617,9 +649,11 @@ describe("AccountPage states", () => {
|
||||
/>,
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByRole("tab", { name: "Операции" }));
|
||||
expect(
|
||||
screen.getByText("Пока недоступно"),
|
||||
).toBeInTheDocument();
|
||||
fireEvent.click(screen.getByRole("tab", { name: "Позиции" }));
|
||||
expect(screen.getByText("Вторая")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
@@ -654,6 +688,7 @@ describe("AccountPage states", () => {
|
||||
/>,
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByRole("tab", { name: "Операции" }));
|
||||
expect(screen.getByText("Сделка")).toBeInTheDocument();
|
||||
expect(screen.getByText("−12 ₽")).toBeInTheDocument();
|
||||
});
|
||||
@@ -707,7 +742,8 @@ describe("AccountPage states", () => {
|
||||
/>,
|
||||
);
|
||||
|
||||
const section = screen.getByRole("region", { name: "Будущие события" });
|
||||
fireEvent.click(screen.getByRole("tab", { name: "События" }));
|
||||
const section = screen.getByRole("tabpanel", { name: "События" });
|
||||
const content = within(section);
|
||||
const text = section.textContent ?? "";
|
||||
|
||||
@@ -734,7 +770,7 @@ describe("AccountPage states", () => {
|
||||
expect(content.queryByText("Без движения денег")).not.toBeInTheDocument();
|
||||
expect(content.queryByText(/^\+/)).not.toBeInTheDocument();
|
||||
expect(
|
||||
content.getByRole("link", { name: "Открыть будущие события" }),
|
||||
content.getByRole("link", { name: "Подробнее" }),
|
||||
).toHaveAttribute("href", "/accounts/account-1/events");
|
||||
});
|
||||
|
||||
@@ -748,8 +784,10 @@ describe("AccountPage states", () => {
|
||||
/>,
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByRole("tab", { name: "События" }));
|
||||
|
||||
const content = within(
|
||||
screen.getByRole("region", { name: "Будущие события" }),
|
||||
screen.getByRole("tabpanel", { name: "События" }),
|
||||
);
|
||||
|
||||
if (state === "loading") {
|
||||
@@ -770,7 +808,7 @@ describe("AccountPage states", () => {
|
||||
}
|
||||
|
||||
expect(
|
||||
content.getByRole("link", { name: "Открыть будущие события" }),
|
||||
content.getByRole("link", { name: "Подробнее" }),
|
||||
).toHaveAttribute("href", "/accounts/account-1/events");
|
||||
},
|
||||
);
|
||||
@@ -786,9 +824,11 @@ describe("AccountPage states", () => {
|
||||
/>,
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByRole("tab", { name: "События" }));
|
||||
expect(
|
||||
screen.getByText("Данные появятся здесь, когда чтение восстановится."),
|
||||
).toBeInTheDocument();
|
||||
fireEvent.click(screen.getByRole("tab", { name: "Позиции" }));
|
||||
expect(screen.getByText("Вторая")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
@@ -857,7 +897,7 @@ describe("AccountPage states", () => {
|
||||
expect(screen.getByText("Вторая")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getAllByRole("definition").map(node => node.textContent),
|
||||
).toEqual(["1 234,5 ₽", "0,5 $"]);
|
||||
).toEqual(["1 234,5 ₽"]);
|
||||
expect(screen.queryByRole("button", { name: "Повторить" }))
|
||||
.not.toBeInTheDocument();
|
||||
void queryClient.invalidateQueries({
|
||||
@@ -867,7 +907,7 @@ describe("AccountPage states", () => {
|
||||
expect(structure).toHaveTextContent("10 ₽");
|
||||
expect(
|
||||
screen.getAllByRole("definition").map(node => node.textContent),
|
||||
).toEqual(["1 234,5 ₽", "0,5 $"]);
|
||||
).toEqual(["1 234,5 ₽"]);
|
||||
resolveRetry?.(
|
||||
HttpResponse.json(
|
||||
resource(
|
||||
@@ -886,7 +926,7 @@ describe("AccountPage states", () => {
|
||||
await waitFor(() =>
|
||||
expect(
|
||||
screen.getAllByRole("definition").map(node => node.textContent),
|
||||
).toEqual(["-0,5 $", "2,50 €"]),
|
||||
).toEqual(["-0,5 $"]),
|
||||
);
|
||||
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
|
||||
expect(structure).not.toHaveTextContent("10 ₽");
|
||||
@@ -928,7 +968,7 @@ describe("AccountPage states", () => {
|
||||
expect(screen.getByText("Вторая")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getAllByRole("definition").map(node => node.textContent),
|
||||
).toEqual(["1 234,5 ₽", "0,5 $"]);
|
||||
).toEqual(["1 234,5 ₽"]);
|
||||
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByRole("status", { name: "Загрузка" }),
|
||||
@@ -938,4 +978,96 @@ describe("AccountPage states", () => {
|
||||
|
||||
resolveRefresh?.(HttpResponse.json(resource(portfolio)));
|
||||
});
|
||||
|
||||
it("opens positions by default and switches between local tabs", () => {
|
||||
renderPage(<AccountPageLoaded {...loadedProps()} />);
|
||||
|
||||
expect(screen.getByRole("tab", { name: "Позиции" }))
|
||||
.toHaveAttribute("aria-selected", "true");
|
||||
expect(screen.getByText("Вторая")).toBeVisible();
|
||||
|
||||
fireEvent.click(screen.getByRole("tab", { name: "Деньги" }));
|
||||
expect(screen.getByRole("tabpanel", { name: "Деньги" }))
|
||||
.toBeVisible();
|
||||
expect(screen.queryByText("Вторая")).not.toBeInTheDocument();
|
||||
|
||||
fireEvent.click(screen.getByRole("tab", { name: "Операции" }));
|
||||
expect(screen.getByText("Последних событий пока нет.")).toBeVisible();
|
||||
});
|
||||
|
||||
it("links operation, event and income previews to their detail pages", () => {
|
||||
renderPage(
|
||||
<AccountPageLoaded
|
||||
{...loadedProps()}
|
||||
incomeSummary={{
|
||||
state: "empty",
|
||||
to: "/accounts/account-1/income",
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
|
||||
for (const [tab, href] of [
|
||||
["Операции", "/accounts/account-1/operations"],
|
||||
["События", "/accounts/account-1/events"],
|
||||
["Доход", "/accounts/account-1/income"],
|
||||
]) {
|
||||
fireEvent.click(screen.getByRole("tab", { name: tab }));
|
||||
expect(screen.getByRole("link", { name: "Подробнее" }))
|
||||
.toHaveAttribute("href", href);
|
||||
}
|
||||
});
|
||||
|
||||
it("filters positions by the kinds present in the portfolio", () => {
|
||||
renderPage(<AccountPageLoaded {...loadedProps()} />);
|
||||
|
||||
expect(
|
||||
screen.getAllByRole<HTMLInputElement>("radio").map(radio => radio.value),
|
||||
).toEqual(["stocks", "bonds"]);
|
||||
expect(screen.getByText("Вторая")).toBeVisible();
|
||||
expect(screen.queryByText("Первая")).not.toBeInTheDocument();
|
||||
fireEvent.click(screen.getByRole("radio", { name: "Облигации" }));
|
||||
expect(screen.getByText("Первая")).toBeVisible();
|
||||
expect(screen.queryByText("Вторая")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("hides the position filter when only one kind exists", () => {
|
||||
renderPage(
|
||||
<AccountPageLoaded
|
||||
{...loadedProps({
|
||||
...portfolio,
|
||||
positions: [portfolio.positions[0]],
|
||||
})}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.queryByRole("radiogroup", { name: "Тип позиции" }))
|
||||
.not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("hides unrealized returns for a partial portfolio", () => {
|
||||
renderPage(<AccountPageLoaded {...loadedProps()} partial />);
|
||||
|
||||
expect(screen.queryByRole("region", { name: "Нереализованный результат" }))
|
||||
.not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("omits an unrealized currency total when any return is incomplete", () => {
|
||||
renderPage(
|
||||
<AccountPageLoaded
|
||||
{...loadedProps({
|
||||
...portfolio,
|
||||
positions: [
|
||||
position({ absoluteReturn: { currency: "RUB", value: "10" } }),
|
||||
position({
|
||||
absoluteReturn: null,
|
||||
currentValue: { currency: "RUB", value: "100" },
|
||||
}),
|
||||
],
|
||||
})}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.queryByRole("region", { name: "Нереализованный результат" }))
|
||||
.not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user