Tyler
120 lines
4.6 KiB
TypeScript
120 lines
4.6 KiB
TypeScript
// @vitest-environment happy-dom
|
|
// React Query's internal state updates need an `act`-aware environment or
|
|
// it logs noisy warnings. Match the convention from useClaimDetail.test.ts.
|
|
(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 } from "vitest";
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
import { ClaimDrawerSkeleton } from "./ClaimDrawerSkeleton";
|
|
|
|
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("ClaimDrawerSkeleton", () => {
|
|
it("renders_eight_to_twelve_skeleton_primitives", () => {
|
|
// The Skeleton primitive marks itself aria-busy="true" for AT.
|
|
// Counting aria-busy elements tells us how many primitives rendered,
|
|
// independent of layout or copy.
|
|
const { unmount } = renderIntoContainer(<ClaimDrawerSkeleton />);
|
|
|
|
const busyCount = document.querySelectorAll('[aria-busy="true"]').length;
|
|
expect(busyCount).toBeGreaterThanOrEqual(8);
|
|
expect(busyCount).toBeLessThanOrEqual(12);
|
|
|
|
unmount();
|
|
});
|
|
|
|
it("renders_one_primitives_per_drawer_section", () => {
|
|
// The skeleton must mirror the drawer's section structure so the
|
|
// layout doesn't jump when real data arrives. Each section gets a
|
|
// labelled testid primitive.
|
|
const { container, unmount } = renderIntoContainer(<ClaimDrawerSkeleton />);
|
|
|
|
const header = container.querySelector('[data-testid="skeleton-header"]');
|
|
const validation = container.querySelector(
|
|
'[data-testid="skeleton-validation"]'
|
|
);
|
|
const lines1 = container.querySelector('[data-testid="skeleton-lines-1"]');
|
|
const lines2 = container.querySelector('[data-testid="skeleton-lines-2"]');
|
|
const lines3 = container.querySelector('[data-testid="skeleton-lines-3"]');
|
|
const dx1 = container.querySelector('[data-testid="skeleton-dx-1"]');
|
|
const dx2 = container.querySelector('[data-testid="skeleton-dx-2"]');
|
|
const parties1 = container.querySelector(
|
|
'[data-testid="skeleton-parties-1"]'
|
|
);
|
|
const parties2 = container.querySelector(
|
|
'[data-testid="skeleton-parties-2"]'
|
|
);
|
|
const history = container.querySelector('[data-testid="skeleton-history"]');
|
|
|
|
// Every section primitive is present.
|
|
expect(header).not.toBeNull();
|
|
expect(validation).not.toBeNull();
|
|
expect(lines1).not.toBeNull();
|
|
expect(lines2).not.toBeNull();
|
|
expect(lines3).not.toBeNull();
|
|
expect(dx1).not.toBeNull();
|
|
expect(dx2).not.toBeNull();
|
|
expect(parties1).not.toBeNull();
|
|
expect(parties2).not.toBeNull();
|
|
expect(history).not.toBeNull();
|
|
|
|
// Header band should be visibly taller than the validation row — it
|
|
// hosts the claim id, status, billed amount etc.
|
|
// happy-dom doesn't do layout, so we read the inline styles the
|
|
// Skeleton primitive writes from `height`/`width` props.
|
|
const headerHeight = Number(
|
|
(header as HTMLElement).style.height.replace("px", "")
|
|
);
|
|
const validationHeight = Number(
|
|
(validation as HTMLElement).style.height.replace("px", "") || "36"
|
|
);
|
|
expect(headerHeight).toBeGreaterThan(validationHeight);
|
|
|
|
// Header should be wider than the dx rows (60% / 45%).
|
|
const headerWidth = (header as HTMLElement).style.width || "100%";
|
|
const dx1Width = (dx1 as HTMLElement).style.width;
|
|
// "100%" vs "60%" — compare as percentage strings.
|
|
const headerPct = Number(headerWidth.replace("%", ""));
|
|
const dx1Pct = Number(dx1Width.replace("%", ""));
|
|
expect(headerPct).toBeGreaterThan(dx1Pct);
|
|
|
|
// History block is taller than the validation row.
|
|
const historyHeight = Number(
|
|
(history as HTMLElement).style.height.replace("px", "")
|
|
);
|
|
expect(historyHeight).toBeGreaterThan(validationHeight);
|
|
|
|
unmount();
|
|
});
|
|
|
|
it("no_props_required", () => {
|
|
// The contract: "No props." Calling the component with no props
|
|
// must not throw and must render something.
|
|
expect(() => {
|
|
const { unmount } = renderIntoContainer(<ClaimDrawerSkeleton />);
|
|
unmount();
|
|
}).not.toThrow();
|
|
});
|
|
}); |