117 lines
4.0 KiB
React
117 lines
4.0 KiB
React
// @vitest-environment jsdom
|
|
|
|
import { render, screen } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { describe, expect, it, vi } from "vitest";
|
|
|
|
import { deriveAsyncState } from "../../src/application/view-models/async-state.js";
|
|
import { AsyncSurface } from "../../src/presentation/components/async-surface.jsx";
|
|
import { createFailure } from "../../src/contracts/errors.js";
|
|
|
|
describe("async UI state matrix", () => {
|
|
it.each([
|
|
[{ isInitialLoading: true }, "initial-loading"],
|
|
[{ data: [{ id: "1" }] }, "success"],
|
|
[{ data: [] }, "empty"],
|
|
[
|
|
{ failure: createFailure("SERVER_FAILURE", "LIST", 0) },
|
|
"terminal-error",
|
|
],
|
|
])("derives base state %#", (signals, expected) => {
|
|
expect(deriveAsyncState(signals).base).toBe(expected);
|
|
});
|
|
|
|
it.each([
|
|
[{ data: ["value"], isFetching: true }, "refreshing"],
|
|
[{ data: ["value"], isStale: true, isDegraded: true }, "stale-degraded"],
|
|
[{ data: ["value"], isMutationPending: true }, "mutation-pending"],
|
|
[{ data: ["value"], hasMutationConflict: true }, "mutation-conflict"],
|
|
])("derives overlay state %#", (signals, indicator) => {
|
|
expect(deriveAsyncState(signals).indicator).toBe(indicator);
|
|
});
|
|
|
|
it("makes crossed overlay inputs mutually exclusive by priority", () => {
|
|
const state = deriveAsyncState({
|
|
data: ["value"],
|
|
isFetching: true,
|
|
isMutationPending: true,
|
|
hasMutationConflict: true,
|
|
});
|
|
expect(state.indicator).toBe("mutation-conflict");
|
|
expect(state.overlay).toMatchObject({
|
|
refreshing: false,
|
|
mutationPending: false,
|
|
mutationConflict: true,
|
|
});
|
|
});
|
|
|
|
it("keeps content visible while a non-blocking refresh runs", () => {
|
|
const state = deriveAsyncState({ data: ["value"], isFetching: true });
|
|
render(<AsyncSurface state={state}>existing content</AsyncSurface>);
|
|
|
|
expect(screen.getByText("existing content")).toBeVisible();
|
|
expect(screen.getByRole("status")).toHaveTextContent("refreshing");
|
|
});
|
|
|
|
it("connects stale retry and conflict resolution to real callbacks", async () => {
|
|
const user = userEvent.setup();
|
|
const retry = vi.fn();
|
|
const resolveConflict = vi.fn();
|
|
const stale = deriveAsyncState({
|
|
data: ["value"],
|
|
isStale: true,
|
|
isDegraded: true,
|
|
});
|
|
const view = render(
|
|
<AsyncSurface state={stale} onRetry={retry}>
|
|
existing content
|
|
</AsyncSurface>,
|
|
);
|
|
await user.click(screen.getByRole("button", { name: "다시 시도" }));
|
|
expect(retry).toHaveBeenCalledOnce();
|
|
|
|
const conflict = deriveAsyncState({
|
|
data: ["value"],
|
|
hasMutationConflict: true,
|
|
});
|
|
view.rerender(
|
|
<AsyncSurface
|
|
state={conflict}
|
|
onResolveConflict={resolveConflict}
|
|
>
|
|
existing content
|
|
</AsyncSurface>,
|
|
);
|
|
await user.click(screen.getByRole("button", { name: "충돌 해결" }));
|
|
expect(resolveConflict).toHaveBeenCalledOnce();
|
|
});
|
|
|
|
it("renders only safe error vocabulary", () => {
|
|
const failure = createFailure("SERVER_FAILURE", "LIST", 0, {
|
|
code: "SERVER_FAILURE",
|
|
});
|
|
const state = deriveAsyncState({ failure });
|
|
render(<AsyncSurface state={state} onRetry={vi.fn()} />);
|
|
|
|
expect(screen.getByRole("alert")).toHaveTextContent(
|
|
"요청을 완료하지 못했습니다.",
|
|
);
|
|
expect(screen.getByRole("alert")).toHaveAttribute(
|
|
"data-message-key",
|
|
failure.userMessageKey,
|
|
);
|
|
expect(screen.getByRole("button")).toHaveTextContent("다시 시도");
|
|
expect(screen.getByRole("alert")).not.toHaveTextContent("stack");
|
|
});
|
|
|
|
it("does not retain a terminal error after usable data is restored", () => {
|
|
const failed = deriveAsyncState({
|
|
failure: createFailure("SERVER_FAILURE", "LIST", 0),
|
|
});
|
|
const recovered = deriveAsyncState({ data: ["value"] });
|
|
expect(failed.base).toBe("terminal-error");
|
|
expect(recovered.base).toBe("success");
|
|
expect(recovered.failure).toBeUndefined();
|
|
});
|
|
});
|