chore: bring develop into release sync branch (WealthLedger/main#30) #87
@@ -0,0 +1,7 @@
|
||||
function errorCode(error: unknown): string | undefined {
|
||||
return typeof error === "object" && error !== null && "code" in error
|
||||
? String(error.code)
|
||||
: undefined;
|
||||
}
|
||||
|
||||
export { errorCode };
|
||||
@@ -3,7 +3,7 @@ import type { FC } from "react";
|
||||
import { Alert, Button, Group, Text } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { apiErrorCode } from "@/shared/api";
|
||||
import { errorCode } from "../model/error-code";
|
||||
|
||||
type BankFeedbackProps = {
|
||||
cached?: boolean;
|
||||
@@ -14,7 +14,7 @@ type BankFeedbackProps = {
|
||||
|
||||
const BankFeedback: FC<BankFeedbackProps> = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const code = apiErrorCode(props.error);
|
||||
const code = errorCode(props.error);
|
||||
|
||||
return (
|
||||
<Alert color="orange" role="alert">
|
||||
|
||||
@@ -10,6 +10,7 @@ import { formatMoney } from "@/shared/lib";
|
||||
import type { BankSummary } from "../../api/types";
|
||||
|
||||
import { bankOperationAppearance } from "../../model/operation-appearance";
|
||||
import { BankFeedback } from "../BankFeedback";
|
||||
import classes from "./BankSummary.module.css";
|
||||
|
||||
const CATEGORY_COLUMNS = 2;
|
||||
@@ -17,9 +18,10 @@ const CATEGORY_COLUMNS = 2;
|
||||
type BankSummaryViewProps = {
|
||||
all?: boolean;
|
||||
data?: BankSummary;
|
||||
error: boolean;
|
||||
error: unknown;
|
||||
fetching: boolean;
|
||||
loading: boolean;
|
||||
retry?: () => void;
|
||||
};
|
||||
|
||||
const BankSummaryViewCategories: FC<BankSummaryViewProps> = (props) => {
|
||||
@@ -122,7 +124,14 @@ const BankSummaryView: FC<BankSummaryViewProps> = (props) => {
|
||||
|
||||
<BankSummaryViewCategories {...props} />
|
||||
|
||||
{props.error && !props.data && <Text role="alert">{t("bank.error")}</Text>}
|
||||
{Boolean(props.error) && (
|
||||
<BankFeedback
|
||||
cached={Boolean(props.data)}
|
||||
error={props.error}
|
||||
loadingError={!props.data}
|
||||
retry={props.retry}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -30,4 +30,44 @@ describe("AuthForm", () => {
|
||||
await waitFor(() => expect(onSubmit).not.toHaveBeenCalled());
|
||||
expect(await screen.findByText("Пароли не совпадают")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it.each([
|
||||
["register", "Регистрация", "Уже есть аккаунт? Войти"],
|
||||
["login", "Вход", "Нет аккаунта? Зарегистрироваться"],
|
||||
])("blocks the switch-auth link while %s is submitting", async (_mode, submitLabel, linkLabel) => {
|
||||
const { promise, resolve } = Promise.withResolvers<void>();
|
||||
const onSubmit = vi.fn(() => promise);
|
||||
render(
|
||||
<MantineProvider>
|
||||
<MemoryRouter>
|
||||
<AuthForm
|
||||
onSubmit={onSubmit}
|
||||
register={_mode === "register"}
|
||||
/>
|
||||
</MemoryRouter>
|
||||
</MantineProvider>,
|
||||
);
|
||||
|
||||
fireEvent.change(screen.getByLabelText("Email"), {
|
||||
target: { value: "user@example.com" },
|
||||
});
|
||||
fireEvent.change(screen.getByLabelText("Пароль"), {
|
||||
target: { value: "a secure password" },
|
||||
});
|
||||
|
||||
if (_mode === "register") {
|
||||
fireEvent.change(screen.getByLabelText("Подтвердите пароль"), {
|
||||
target: { value: "a secure password" },
|
||||
});
|
||||
}
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: submitLabel }));
|
||||
|
||||
await waitFor(() => expect(onSubmit).toHaveBeenCalled());
|
||||
expect(screen.queryByRole("link", { name: linkLabel })).not.toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: linkLabel })).toBeDisabled();
|
||||
|
||||
resolve();
|
||||
await screen.findByRole("link", { name: linkLabel });
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { FC } from "react";
|
||||
import type { FC, ReactNode } from "react";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Alert, Button, Fieldset, PasswordInput, Stack, TextInput } from "@mantine/core";
|
||||
@@ -15,7 +15,7 @@ import {
|
||||
|
||||
type AuthFormProps = {
|
||||
onSubmit: (email: string, password: string) => Promise<void>;
|
||||
register?: true;
|
||||
register?: boolean;
|
||||
};
|
||||
|
||||
const AuthForm: FC<AuthFormProps> = (props) => {
|
||||
@@ -45,6 +45,24 @@ const AuthForm: FC<AuthFormProps> = (props) => {
|
||||
});
|
||||
|
||||
const to = register ? "/login" : "/register";
|
||||
const switchLabel = t(register ? "auth.haveAccount" : "auth.noAccount");
|
||||
|
||||
let switchLink: ReactNode;
|
||||
|
||||
if (isSubmitting) {
|
||||
switchLink = (
|
||||
<Button aria-disabled disabled variant="subtle">
|
||||
{switchLabel}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
else {
|
||||
switchLink = (
|
||||
<Button component={Link} to={to} variant="subtle">
|
||||
{switchLabel}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
@@ -77,9 +95,7 @@ const AuthForm: FC<AuthFormProps> = (props) => {
|
||||
{t(register ? "auth.register" : "auth.login")}
|
||||
</Button>
|
||||
|
||||
<Button component={Link} to={to} variant="subtle">
|
||||
{t(register ? "auth.haveAccount" : "auth.noAccount")}
|
||||
</Button>
|
||||
{switchLink}
|
||||
</Stack>
|
||||
</Fieldset>
|
||||
</form>
|
||||
|
||||
@@ -17,6 +17,7 @@ import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router";
|
||||
|
||||
import {
|
||||
BankFeedback,
|
||||
bankOperationAppearance,
|
||||
} from "@/entities/bank-card";
|
||||
|
||||
@@ -108,6 +109,17 @@ const CardHistory: FC<CardHistoryProps> = (props) => {
|
||||
return <Text>{t("bank.noOperations")}</Text>;
|
||||
}
|
||||
|
||||
if (vm.history.error) {
|
||||
return (
|
||||
<BankFeedback
|
||||
cached={Boolean(vm.rows)}
|
||||
error={vm.history.error}
|
||||
loadingError={!vm.rows}
|
||||
retry={vm.history.refetch}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (vm.history.loading) {
|
||||
return (
|
||||
<LoadingSkeleton label={t("bank.loadingHistory")}>
|
||||
|
||||
@@ -316,12 +316,47 @@ describe("CardPage", () => {
|
||||
setup({ summaryError: true });
|
||||
await screen.findByRole("heading", { name: "Повседневная" });
|
||||
expect(
|
||||
screen.queryByRole("alert"),
|
||||
).not.toBeInTheDocument();
|
||||
await screen.findByText("Перевод на «Запасная»"),
|
||||
).toBeInTheDocument();
|
||||
expect(await screen.findByRole("alert", {}, { timeout: 5000 })).toHaveTextContent(
|
||||
"Не удалось загрузить данные карт.",
|
||||
);
|
||||
expect(screen.queryByText("0 ₽")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("recovers summary with retry while keeping card and journal", async () => {
|
||||
const { summaryRequests } = setup({ summaryError: true });
|
||||
await screen.findByRole("heading", { name: "Повседневная" });
|
||||
expect(
|
||||
await screen.findByText("Перевод на «Запасная»"),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.queryByText("0 ₽")).not.toBeInTheDocument();
|
||||
|
||||
const retry = await screen.findByRole(
|
||||
"button",
|
||||
{ name: "Повторить" },
|
||||
{ timeout: 5000 },
|
||||
);
|
||||
|
||||
const requestsBefore = summaryRequests.length;
|
||||
server.use(
|
||||
http.get("*/api/v1/bank-cards/summary", ({ request }) => {
|
||||
summaryRequests.push(new URL(request.url).search);
|
||||
|
||||
return HttpResponse.json({
|
||||
cardId: "a",
|
||||
categories: [],
|
||||
expenses: money("0"),
|
||||
net: money("-50"),
|
||||
refunds: money("50"),
|
||||
});
|
||||
}),
|
||||
);
|
||||
fireEvent.click(retry);
|
||||
|
||||
await waitFor(() =>
|
||||
expect(screen.queryByRole("alert")).not.toBeInTheDocument(),
|
||||
);
|
||||
expect(summaryRequests).toHaveLength(requestsBefore + 1);
|
||||
});
|
||||
it("keeps cached card and history after refetch failure", async () => {
|
||||
const { client } = setup();
|
||||
@@ -331,9 +366,8 @@ describe("CardPage", () => {
|
||||
http.get("*/api/v1/bank-cards/a/operations", () => HttpResponse.error()),
|
||||
);
|
||||
await client.invalidateQueries();
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole("alert")).not.toBeInTheDocument();
|
||||
});
|
||||
const alerts = await screen.findAllByRole("alert", {}, { timeout: 5000 });
|
||||
expect(alerts.length).toBeGreaterThanOrEqual(1);
|
||||
expect(
|
||||
screen.getByRole("heading", { name: "Повседневная" }),
|
||||
).toBeInTheDocument();
|
||||
@@ -401,11 +435,11 @@ describe("CardPage", () => {
|
||||
]);
|
||||
});
|
||||
it("recovers the prerequisite card list while preserving the visible balance and journal", async () => {
|
||||
setup({ cardsError: true });
|
||||
const { client } = setup({ cardsError: true });
|
||||
await screen.findByText("Перевод на «Запасная»");
|
||||
expect(
|
||||
screen.queryByRole("alert"),
|
||||
).not.toBeInTheDocument();
|
||||
await screen.findByRole("alert", {}, { timeout: 5000 }),
|
||||
).toHaveTextContent("Не удалось загрузить данные карт.");
|
||||
expect(
|
||||
screen.getByRole("button", { name: "Добавить операцию" }),
|
||||
).toBeDisabled();
|
||||
@@ -414,6 +448,7 @@ describe("CardPage", () => {
|
||||
HttpResponse.json([card, { ...card, id: "b", name: "Запасная" }]),
|
||||
),
|
||||
);
|
||||
await client.invalidateQueries();
|
||||
await waitFor(() =>
|
||||
expect(
|
||||
screen.getByRole("button", { name: "Добавить операцию" }),
|
||||
|
||||
@@ -75,6 +75,11 @@ const CardPageView: FC<CardPageViewProps> = (props) => {
|
||||
{t("bank.back")}
|
||||
</Button>
|
||||
|
||||
{!vm.notFound && (
|
||||
<Button onClick={vm.cardRetry} variant="default">
|
||||
{t("bank.retry")}
|
||||
</Button>
|
||||
)}
|
||||
</Group>
|
||||
)}
|
||||
error
|
||||
@@ -128,18 +133,27 @@ const CardPageView: FC<CardPageViewProps> = (props) => {
|
||||
)}
|
||||
|
||||
{card.archivedAt && <Text>{t("bank.archiveHint")}</Text>}
|
||||
|
||||
{vm.cardError && vm.card && (
|
||||
<BankFeedback
|
||||
cached
|
||||
error={vm.cardError}
|
||||
retry={vm.cardRetry}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
{vm.cardsFeedback && (
|
||||
<BankFeedback
|
||||
{...vm.cardsFeedback}
|
||||
loadingError
|
||||
retry={vm.cardsRetry}
|
||||
/>
|
||||
)}
|
||||
|
||||
<BankPeriodPicker onChange={vm.setPeriod} period={vm.period} />
|
||||
|
||||
<BankSummaryView {...vm.summary} />
|
||||
<BankSummaryView {...vm.summary} retry={vm.summary.refetch} />
|
||||
|
||||
<Group align="end" justify="space-between">
|
||||
<Group gap="xs">
|
||||
@@ -183,8 +197,6 @@ const CardPageView: FC<CardPageViewProps> = (props) => {
|
||||
<CardHistory history={vm.history} period={vm.period} rows={vm.rows} />
|
||||
</Stack>
|
||||
|
||||
{vm.history.error && !vm.rows && <Text role="alert">{t("bank.error")}</Text>}
|
||||
|
||||
{vm.history.page !== undefined && vm.pageSize !== "all" && (
|
||||
<Group
|
||||
aria-label={t("bank.pagination")}
|
||||
|
||||
@@ -97,13 +97,16 @@ function useCardPageVm() {
|
||||
archivePending: updateCard.isPending,
|
||||
canAddOperation: !card.data?.archivedAt && Boolean(cards.data),
|
||||
card: card.data,
|
||||
cardError: card.error,
|
||||
cardLoading: card.isLoading,
|
||||
cardRefreshError: card.isError,
|
||||
cardRefreshing: card.isFetching,
|
||||
cardRetry: () => card.refetch(),
|
||||
cards: cards.data,
|
||||
cardsFeedback: cards.isError
|
||||
? { cached: Boolean(cards.data), error: cards.error }
|
||||
: undefined,
|
||||
cardsRetry: () => cards.refetch(),
|
||||
closeDeletion: () => setDeleting(null),
|
||||
closeEditing: () => setEditingCard(false),
|
||||
closeOperation: () => setOperation(null),
|
||||
@@ -112,9 +115,10 @@ function useCardPageVm() {
|
||||
editingCard,
|
||||
history: {
|
||||
changingPage: history.isPlaceholderData,
|
||||
error: history.isError,
|
||||
error: history.error,
|
||||
loading: history.isLoading,
|
||||
page: history.data?.page,
|
||||
refetch: () => history.refetch(),
|
||||
},
|
||||
notFound: isApiErrorCode(
|
||||
apiErrorCode(card.error),
|
||||
@@ -139,9 +143,10 @@ function useCardPageVm() {
|
||||
},
|
||||
summary: {
|
||||
data: summary.data,
|
||||
error: summary.isError,
|
||||
error: summary.error,
|
||||
fetching: summary.isFetching,
|
||||
loading: summary.isLoading,
|
||||
refetch: () => summary.refetch(),
|
||||
},
|
||||
toggleArchive: () => {
|
||||
if (!card.data) return;
|
||||
|
||||
@@ -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