Tyler
109 lines
3.2 KiB
TypeScript
109 lines
3.2 KiB
TypeScript
// @vitest-environment happy-dom
|
|
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
|
|
|
|
import React, { act } from "react";
|
|
import { createRoot, type Root } from "react-dom/client";
|
|
import { describe, expect, it, vi } from "vitest";
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
import { RemitDrawerError } from "./RemitDrawerError";
|
|
|
|
function renderIntoContainer(element: React.ReactElement): {
|
|
container: HTMLDivElement;
|
|
unmount: () => void;
|
|
} {
|
|
const container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
|
const root: Root = createRoot(container);
|
|
act(() => {
|
|
root.render(
|
|
React.createElement(QueryClientProvider, { client: qc }, element)
|
|
);
|
|
});
|
|
return {
|
|
container,
|
|
unmount: () => {
|
|
act(() => root.unmount());
|
|
container.remove();
|
|
},
|
|
};
|
|
}
|
|
|
|
describe("RemitDrawerError", () => {
|
|
it("renders_not_found_message_and_close_button", () => {
|
|
const onClose = vi.fn();
|
|
const { container, unmount } = renderIntoContainer(
|
|
<RemitDrawerError kind="not_found" onClose={onClose} />
|
|
);
|
|
|
|
const root = container.firstElementChild as HTMLElement;
|
|
expect(root.getAttribute("role")).toBe("alert");
|
|
expect(
|
|
root.getAttribute("data-testid")?.includes("not_found")
|
|
).toBe(true);
|
|
|
|
const text = (container.textContent ?? "").toLowerCase();
|
|
expect(text).toContain("not found");
|
|
|
|
const closeBtn = container.querySelector(
|
|
'[data-testid="error-close"]'
|
|
) as HTMLButtonElement | null;
|
|
expect(closeBtn).not.toBeNull();
|
|
expect(closeBtn?.textContent?.toLowerCase()).toContain("close");
|
|
expect(onClose).not.toHaveBeenCalled();
|
|
act(() => {
|
|
closeBtn?.click();
|
|
});
|
|
expect(onClose).toHaveBeenCalledTimes(1);
|
|
|
|
unmount();
|
|
});
|
|
|
|
it("renders_network_message_and_retry_button", () => {
|
|
const onRetry = vi.fn();
|
|
const onClose = vi.fn();
|
|
const { container, unmount } = renderIntoContainer(
|
|
<RemitDrawerError kind="network" onRetry={onRetry} onClose={onClose} />
|
|
);
|
|
|
|
const text = (container.textContent ?? "").toLowerCase();
|
|
expect(
|
|
text.includes("network") ||
|
|
text.includes("connection") ||
|
|
text.includes("try again")
|
|
).toBe(true);
|
|
|
|
const retryBtn = container.querySelector(
|
|
'[data-testid="error-retry"]'
|
|
) as HTMLButtonElement | null;
|
|
expect(retryBtn).not.toBeNull();
|
|
act(() => {
|
|
retryBtn?.click();
|
|
});
|
|
expect(onRetry).toHaveBeenCalledTimes(1);
|
|
|
|
const closeBtn = container.querySelector(
|
|
'[data-testid="error-close"]'
|
|
) as HTMLButtonElement | null;
|
|
expect(closeBtn).not.toBeNull();
|
|
act(() => {
|
|
closeBtn?.click();
|
|
});
|
|
expect(onClose).toHaveBeenCalledTimes(1);
|
|
|
|
unmount();
|
|
});
|
|
|
|
it("omits_retry_button_when_onRetry_not_provided", () => {
|
|
const onClose = vi.fn();
|
|
const { container, unmount } = renderIntoContainer(
|
|
<RemitDrawerError kind="network" onClose={onClose} />
|
|
);
|
|
|
|
const retryBtn = container.querySelector('[data-testid="error-retry"]');
|
|
expect(retryBtn).toBeNull();
|
|
|
|
unmount();
|
|
});
|
|
});
|