fix: stabilize frontend query cache contracts
This commit is contained in:
@@ -0,0 +1,99 @@
|
||||
import { MantineProvider } from "@mantine/core";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import {
|
||||
cleanup,
|
||||
fireEvent,
|
||||
render,
|
||||
screen,
|
||||
waitFor,
|
||||
} from "@testing-library/react";
|
||||
import { HttpResponse, http } from "msw";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
import { apiQueryClient } from "@/shared/api";
|
||||
import { server } from "@/test/server";
|
||||
import { TbankConnectionSection } from "./TbankConnectionSection";
|
||||
|
||||
vi.mock("@/features/auth", () => ({
|
||||
useAuth: () => ({ accessToken: "test-token" }),
|
||||
}));
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
const brokerageAccountsQueryKey = apiQueryClient.queryOptions(
|
||||
"get",
|
||||
"/api/v1/brokerage-accounts",
|
||||
).queryKey;
|
||||
|
||||
function renderSection(client: QueryClient) {
|
||||
return render(
|
||||
<MantineProvider>
|
||||
<QueryClientProvider client={client}>
|
||||
<TbankConnectionSection />
|
||||
</QueryClientProvider>
|
||||
</MantineProvider>,
|
||||
);
|
||||
}
|
||||
|
||||
function seededClient() {
|
||||
const client = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } },
|
||||
});
|
||||
client.setQueryData(brokerageAccountsQueryKey, [
|
||||
{
|
||||
id: "account-1",
|
||||
name: "Основной счет",
|
||||
type: "BROKERAGE",
|
||||
openedOn: null,
|
||||
},
|
||||
]);
|
||||
return client;
|
||||
}
|
||||
|
||||
describe("TbankConnectionSection", () => {
|
||||
it("updates the generated status cache and invalidates accounts after connecting", async () => {
|
||||
const client = seededClient();
|
||||
renderSection(client);
|
||||
|
||||
await screen.findByText("Не подключено");
|
||||
fireEvent.change(screen.getByLabelText("Token T-Bank"), {
|
||||
target: { value: "replacement-token" },
|
||||
});
|
||||
fireEvent.click(screen.getByRole("button", { name: "Подключить" }));
|
||||
|
||||
await waitFor(() =>
|
||||
expect(
|
||||
screen.getByRole("button", { name: "Заменить token" }),
|
||||
).toBeInTheDocument(),
|
||||
);
|
||||
expect(client.getQueryState(brokerageAccountsQueryKey)?.isInvalidated).toBe(
|
||||
true,
|
||||
);
|
||||
});
|
||||
|
||||
it("updates the generated status cache and invalidates accounts after deleting", async () => {
|
||||
server.use(
|
||||
http.get("*/api/v1/tbank-connection", () =>
|
||||
HttpResponse.json({
|
||||
connected: true,
|
||||
connectedAt: "2026-08-14T00:00:00Z",
|
||||
}),
|
||||
),
|
||||
);
|
||||
const client = seededClient();
|
||||
renderSection(client);
|
||||
|
||||
fireEvent.click(
|
||||
await screen.findByRole("button", { name: "Удалить подключение" }),
|
||||
);
|
||||
fireEvent.click(await screen.findByRole("button", { name: /^Удалить$/ }));
|
||||
|
||||
await waitFor(() =>
|
||||
expect(
|
||||
screen.getByRole("button", { name: "Подключить" }),
|
||||
).toBeInTheDocument(),
|
||||
);
|
||||
expect(client.getQueryState(brokerageAccountsQueryKey)?.isInvalidated).toBe(
|
||||
true,
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -17,7 +17,10 @@ import {
|
||||
TbankConnectionError,
|
||||
TbankConnectionLoading,
|
||||
} from "./TbankConnectionSection.view";
|
||||
import { useTbankConnectionViewModel } from "./TbankConnectionSection.vm";
|
||||
import {
|
||||
tbankConnectionQueryKey,
|
||||
useTbankConnectionViewModel,
|
||||
} from "./TbankConnectionSection.vm";
|
||||
|
||||
type Status =
|
||||
paths["/api/v1/tbank-connection"]["get"]["responses"][200]["content"]["application/json"];
|
||||
@@ -49,18 +52,18 @@ function TbankConnectionSectionLoaded({ status }: { status: Status }) {
|
||||
} = useForm<{ token: string }>();
|
||||
const update = apiQueryClient.useMutation("put", "/api/v1/tbank-connection", {
|
||||
onSuccess: (data) => {
|
||||
queryClient.setQueryData(["tbank-connection"], data);
|
||||
queryClient.setQueryData(tbankConnectionQueryKey, data);
|
||||
queryClient.invalidateQueries({ queryKey: brokerageAccountsQueryKey });
|
||||
reset();
|
||||
},
|
||||
onError: (error) => setRequestError(errorCode(error)),
|
||||
onError: (error) => setRequestError(errorCode(error) ?? "REQUEST_ERROR"),
|
||||
});
|
||||
const remove = apiQueryClient.useMutation(
|
||||
"delete",
|
||||
"/api/v1/tbank-connection",
|
||||
{
|
||||
onSuccess: () => {
|
||||
queryClient.setQueryData<Status>(["tbank-connection"], {
|
||||
queryClient.setQueryData<Status>(tbankConnectionQueryKey, {
|
||||
connected: false,
|
||||
connectedAt: null,
|
||||
});
|
||||
|
||||
@@ -2,12 +2,16 @@ import { useQuery } from "@tanstack/react-query";
|
||||
import { useAuth } from "@/features/auth";
|
||||
import { apiQueryClient } from "@/shared/api";
|
||||
|
||||
const tbankConnectionQueryOptions = () =>
|
||||
apiQueryClient.queryOptions("get", "/api/v1/tbank-connection");
|
||||
|
||||
export const tbankConnectionQueryKey = tbankConnectionQueryOptions().queryKey;
|
||||
|
||||
export function useTbankConnectionViewModel() {
|
||||
const { accessToken } = useAuth();
|
||||
const status = useQuery({
|
||||
queryKey: ["tbank-connection"],
|
||||
...tbankConnectionQueryOptions(),
|
||||
enabled: Boolean(accessToken),
|
||||
...apiQueryClient.queryOptions("get", "/api/v1/tbank-connection"),
|
||||
});
|
||||
if (status.isPending) return { state: "loading" as const };
|
||||
if (status.isError)
|
||||
|
||||
Reference in New Issue
Block a user