45 lines
2.3 KiB
TypeScript
45 lines
2.3 KiB
TypeScript
import { GlobalRegistrator } from "@happy-dom/global-registrator";
|
|
if (!GlobalRegistrator.isRegistered) GlobalRegistrator.register();
|
|
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
|
|
import { expect, test } from "bun:test";
|
|
import { act } from "react";
|
|
import { createRoot } from "react-dom/client";
|
|
import { CollapsibleSection } from "./Section.tsx";
|
|
|
|
test("sections collapse independently, preserve drafts and actions, and remember their state", () => {
|
|
const budgetKey = "budget2:test-expand-budget";
|
|
const purchasesKey = "budget2:test-expand-purchases";
|
|
localStorage.removeItem(budgetKey);
|
|
localStorage.removeItem(purchasesKey);
|
|
const container = document.createElement("div");
|
|
let root = createRoot(container);
|
|
const render = () => root.render(<>
|
|
<CollapsibleSection title="Budget" preferenceKey={budgetKey}><input aria-label="Budget draft" defaultValue="" /></CollapsibleSection>
|
|
<CollapsibleSection title="Purchases" preferenceKey={purchasesKey} action={<button>Add purchase</button>}><p>Purchase rows</p></CollapsibleSection>
|
|
</>);
|
|
try {
|
|
act(render);
|
|
const input = container.querySelector("input")!;
|
|
input.value = "Unsaved draft";
|
|
const collapse = container.querySelector('button[aria-label="Collapse Budget"]') as HTMLButtonElement;
|
|
act(() => collapse.click());
|
|
expect(input.closest("[hidden]")).not.toBeNull();
|
|
expect(container.querySelector('button[aria-label="Collapse Purchases"]')).not.toBeNull();
|
|
act(() => (container.querySelector('button[aria-label="Expand Budget"]') as HTMLButtonElement).click());
|
|
expect(input.value).toBe("Unsaved draft");
|
|
expect(input.closest("[hidden]")).toBeNull();
|
|
act(() => (container.querySelector('button[aria-label="Collapse Purchases"]') as HTMLButtonElement).click());
|
|
const add = [...container.querySelectorAll("button")].find(button => button.textContent === "Add purchase")!;
|
|
expect(add.closest("[hidden]")).toBeNull();
|
|
act(() => root.unmount());
|
|
root = createRoot(container);
|
|
act(render);
|
|
expect(container.querySelector('button[aria-label="Collapse Budget"]')).not.toBeNull();
|
|
expect(container.querySelector('button[aria-label="Expand Purchases"]')).not.toBeNull();
|
|
} finally {
|
|
act(() => root.unmount());
|
|
localStorage.removeItem(budgetKey);
|
|
localStorage.removeItem(purchasesKey);
|
|
}
|
|
});
|