fix(auth,bank): guard switch-auth nav and surface banking retry
AuthForm disables the switch-auth Link while submit is pending so pointer click and Enter can no longer leave the auth route and lose the draft/error context. The form restores a true Link after the request settles. CardsPage/CardPage distinguish cold vs cached banking failures: - cold card/section errors expose accessible alert + retry - cached failures keep the previous data and offer a section GET retry - summary-only/history-only outages do not hide successful sections - notFound still skips the retry CTA Tests cover the pending link guard, cold/cached cards error with retry, summary failure with retry, and the prerequisite card list recovery. Closes #56, #57
This commit is contained in:
@@ -47,8 +47,9 @@ function renderCards(isFail = false, hasCategoryFailure = false) {
|
||||
),
|
||||
);
|
||||
|
||||
return render(
|
||||
<QueryClientProvider client={createTestQueryClient()}>
|
||||
const client = createTestQueryClient();
|
||||
render(
|
||||
<QueryClientProvider client={client}>
|
||||
<MantineProvider env="test">
|
||||
<MemoryRouter initialEntries={["/cards?month=2026-09"]}>
|
||||
<CardsPage />
|
||||
@@ -56,6 +57,8 @@ function renderCards(isFail = false, hasCategoryFailure = false) {
|
||||
</MantineProvider>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
|
||||
return client;
|
||||
}
|
||||
|
||||
describe("CardsPage", () => {
|
||||
@@ -232,4 +235,76 @@ describe("CardsPage", () => {
|
||||
});
|
||||
expect(screen.queryByRole("alert")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows a cold cards error with retry", async () => {
|
||||
renderCards(true);
|
||||
|
||||
expect(
|
||||
await screen.findByRole("alert", {}, { timeout: 5000 }),
|
||||
).toHaveTextContent("Не удалось загрузить данные карт.");
|
||||
expect(
|
||||
screen.getByRole("button", { name: "Повторить" }),
|
||||
).toBeInTheDocument();
|
||||
|
||||
server.use(
|
||||
http.get("*/api/v1/bank-cards", () =>
|
||||
HttpResponse.json([
|
||||
{
|
||||
archivedAt: null,
|
||||
balance: money("10000"),
|
||||
bankName: null,
|
||||
id: "a",
|
||||
lastFour: null,
|
||||
name: "Повседневная",
|
||||
openingBalance: money("10000"),
|
||||
openingDate: "2026-01-01",
|
||||
version: 1,
|
||||
},
|
||||
]),
|
||||
),
|
||||
);
|
||||
fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
|
||||
|
||||
await waitFor(() =>
|
||||
expect(screen.queryByRole("alert")).not.toBeInTheDocument(),
|
||||
);
|
||||
expect(
|
||||
screen.getByRole("link", { name: /Повседневная/ }),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows a cached cards error while keeping the grid", async () => {
|
||||
const view = renderCards();
|
||||
|
||||
await screen.findByRole("heading", { name: "Добавьте первую карту" });
|
||||
server.use(
|
||||
http.get("*/api/v1/bank-cards", () =>
|
||||
HttpResponse.json([
|
||||
{
|
||||
archivedAt: null,
|
||||
balance: money("10000"),
|
||||
bankName: null,
|
||||
id: "a",
|
||||
lastFour: null,
|
||||
name: "Повседневная",
|
||||
openingBalance: money("10000"),
|
||||
openingDate: "2026-01-01",
|
||||
version: 1,
|
||||
},
|
||||
]),
|
||||
),
|
||||
);
|
||||
await view.invalidateQueries();
|
||||
await screen.findByRole("link", { name: /Повседневная/ });
|
||||
|
||||
server.use(http.get("*/api/v1/bank-cards", () => HttpResponse.error()));
|
||||
await view.invalidateQueries();
|
||||
|
||||
expect(
|
||||
await screen.findByRole("alert", {}, { timeout: 5000 }),
|
||||
).toHaveTextContent("Не удалось обновить данные. Показаны последние полученные.");
|
||||
expect(
|
||||
screen.getByRole("link", { name: /Повседневная/ }),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -18,6 +18,7 @@ import { Link } from "react-router";
|
||||
|
||||
import {
|
||||
BankCardFace,
|
||||
BankFeedback,
|
||||
BankPeriodPicker,
|
||||
BankSummaryView,
|
||||
} from "@/entities/bank-card";
|
||||
@@ -51,15 +52,17 @@ const CardsPageViewCards: FC<CardsPageViewProps> = (props) => {
|
||||
);
|
||||
}
|
||||
|
||||
const text = t(vm.archive ? "bank.emptyHint" : "bank.noActive");
|
||||
if (!vm.cards.error) {
|
||||
const text = t(vm.archive ? "bank.emptyHint" : "bank.noActive");
|
||||
|
||||
return (
|
||||
<StateView
|
||||
action={<Button onClick={vm.onAddCard}>{t("bank.addCard")}</Button>}
|
||||
text={text}
|
||||
title={t("bank.empty")}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<StateView
|
||||
action={<Button onClick={vm.onAddCard}>{t("bank.addCard")}</Button>}
|
||||
text={text}
|
||||
title={t("bank.empty")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (vm.cards.isLoading) {
|
||||
@@ -103,6 +106,15 @@ const CardsPageView: FC<CardsPageViewProps> = (props) => {
|
||||
onChange={vm.onArchiveChange}
|
||||
/>
|
||||
|
||||
{vm.cards.error && (
|
||||
<BankFeedback
|
||||
cached={Boolean(vm.cards.data)}
|
||||
error={vm.cards.error}
|
||||
loadingError={!vm.cards.data}
|
||||
retry={vm.retryCards}
|
||||
/>
|
||||
)}
|
||||
|
||||
<CardsPageViewCards {...props} />
|
||||
|
||||
<Group align="flex-end" justify="space-between">
|
||||
@@ -123,9 +135,10 @@ const CardsPageView: FC<CardsPageViewProps> = (props) => {
|
||||
<BankSummaryView
|
||||
all
|
||||
data={vm.summary.data}
|
||||
error={vm.summary.isError}
|
||||
error={vm.summary.error}
|
||||
fetching={vm.summary.isFetching}
|
||||
loading={vm.summary.isLoading}
|
||||
retry={vm.retrySummary}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
@@ -39,6 +39,8 @@ function useCardsPageVm() {
|
||||
setArchive(event.currentTarget.checked),
|
||||
onCategories: () => setManagingCategories(true),
|
||||
period,
|
||||
retryCards: () => cards.refetch(),
|
||||
retrySummary: () => summary.refetch(),
|
||||
setPeriod: (value: [null | string, null | string]) => {
|
||||
if (value[0] && value[1]) setParameters({ from: value[0], to: value[1] });
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user