66 lines
3.1 KiB
TypeScript
66 lines
3.1 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 { createSeedDataset } from "../../domain/seed.ts";
|
|
import { monthView } from "../../domain/views.ts";
|
|
import { store } from "../../store/index.ts";
|
|
import { MonthPieShowcase } from "./MonthPieShowcase.tsx";
|
|
|
|
test("hiding the breakdown stays remembered after remount and leaves its control reachable", () => {
|
|
localStorage.removeItem("budget2:show-month-breakdown");
|
|
const data = createSeedDataset("2026-09");
|
|
const original = { get: store.get, subscribe: store.subscribe };
|
|
store.get = () => data;
|
|
store.subscribe = () => () => {};
|
|
const container = document.createElement("div");
|
|
let root = createRoot(container);
|
|
const render = () => root.render(<MonthPieShowcase view={monthView(data, "2026-09")} baseCurrency="DKK" />);
|
|
try {
|
|
act(render);
|
|
const toggle = container.querySelector('input[type="checkbox"]') as HTMLInputElement;
|
|
expect(toggle).not.toBeNull();
|
|
expect(toggle.checked).toBe(true);
|
|
act(() => toggle.click());
|
|
expect(container.querySelector('svg[role="img"]')).toBeNull();
|
|
act(() => root.unmount());
|
|
root = createRoot(container);
|
|
act(render);
|
|
const remembered = container.querySelector('input[type="checkbox"]') as HTMLInputElement;
|
|
expect(remembered.checked).toBe(false);
|
|
act(() => remembered.click());
|
|
expect(container.querySelector('svg[role="img"]')).not.toBeNull();
|
|
} finally {
|
|
act(() => root.unmount());
|
|
Object.assign(store, original);
|
|
localStorage.removeItem("budget2:show-month-breakdown");
|
|
}
|
|
});
|
|
|
|
test("pie showcase switches between spending and allocations", () => {
|
|
const data = createSeedDataset("2026-09");
|
|
data.posts[0]!.rules = [{ from: "2026-09", rule: { kind: "fixed", amount: { amount: 250, currency: "DKK" } } }];
|
|
data.months[0]!.income = { amount: 1000, currency: "DKK" };
|
|
data.purchases.push({ id: "p", date: "2026-09", description: "Games", total: { amount: 50, currency: "DKK" }, splitMode: "percent", splits: [{ postId: data.posts[0]!.id, value: 100, absorbsRemainder: true }], schedule: null });
|
|
const original = { get: store.get, subscribe: store.subscribe };
|
|
store.get = () => data;
|
|
store.subscribe = () => () => {};
|
|
const container = document.createElement("div");
|
|
const root = createRoot(container);
|
|
try {
|
|
act(() => root.render(<MonthPieShowcase view={monthView(data, "2026-09")} baseCurrency="DKK" />));
|
|
expect(container.textContent).toContain("50.00 DKK");
|
|
const allocation = [...container.querySelectorAll("button")].find((button) => button.textContent === "Allocated")!;
|
|
act(() => allocation.click());
|
|
expect(allocation.getAttribute("aria-pressed")).toBe("true");
|
|
expect(container.textContent).toContain("250.00 DKK");
|
|
expect(container.querySelector("svg[role='img']")).not.toBeNull();
|
|
} finally {
|
|
act(() => root.unmount());
|
|
Object.assign(store, original);
|
|
}
|
|
});
|