Lucas WintherandClaude Opus 5
da0d1ac35c
A purchase in a currency with no configured exchange rate makes src/domain/fx.ts throw MissingRateError (correct behavior — never silently convert at a wrong rate). Nothing caught it: 5 of 6 routes call monthView/yearView/summaryView and threw during render, and with no error boundary anywhere in src/, the throw unmounted the entire React tree including the nav bar. Since the catch-all route redirects to the current month on first load, one un-rated foreign-currency purchase white-screened the app immediately on landing, with the only way out (Settings, where the rate is added) unreachable because the nav was gone too. Adds RouteErrorBoundary (a class component, as required for getDerivedStateFromError/componentDidCatch) that renders the thrown message plus a link to Settings and a "Try again" reset, and RouteErrorBoundaryReset, a wrapper that keys the boundary on the current route so it clears on navigation. Wraps only <Routes> in App.tsx, not <nav>, so navigation stays usable when a route throws. Also guards the happy-dom per-file GlobalRegistrator.register() call in registerSw.test.ts and the new ErrorBoundary.test.tsx with isRegistered, since Bun can run both files in one process. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
113 lines
3.3 KiB
TypeScript
113 lines
3.3 KiB
TypeScript
import { GlobalRegistrator } from "@happy-dom/global-registrator";
|
|
// Bun can run multiple test files in one process, and registerSw.test.ts
|
|
// registers happy-dom globally too — guard so both files can run together.
|
|
if (!GlobalRegistrator.isRegistered) {
|
|
GlobalRegistrator.register();
|
|
}
|
|
|
|
// Silences React's "environment not configured to support act(...)" warning;
|
|
// this file drives React purely through explicit `act()` calls below.
|
|
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
|
|
|
|
import { test, expect, afterEach } from "bun:test";
|
|
import { act } from "react";
|
|
import { createRoot, type Root } from "react-dom/client";
|
|
import { Link, MemoryRouter, useLocation } from "react-router";
|
|
import { RouteErrorBoundary, RouteErrorBoundaryReset } from "./ErrorBoundary.tsx";
|
|
|
|
let container: HTMLDivElement | null = null;
|
|
let root: Root | null = null;
|
|
|
|
function mount(children: React.ReactNode) {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
act(() => {
|
|
root!.render(children);
|
|
});
|
|
return container;
|
|
}
|
|
|
|
afterEach(() => {
|
|
if (root) {
|
|
act(() => {
|
|
root!.unmount();
|
|
});
|
|
root = null;
|
|
}
|
|
if (container) {
|
|
container.remove();
|
|
container = null;
|
|
}
|
|
});
|
|
|
|
function Thrower(): never {
|
|
throw new Error("No exchange rate configured for EUR");
|
|
}
|
|
|
|
function Fine() {
|
|
return <div>all good</div>;
|
|
}
|
|
|
|
test("a throwing child renders the fallback including the thrown message", () => {
|
|
const el = mount(
|
|
<MemoryRouter>
|
|
<RouteErrorBoundary>
|
|
<Thrower />
|
|
</RouteErrorBoundary>
|
|
</MemoryRouter>,
|
|
);
|
|
|
|
expect(el.textContent).toContain("This view could not be displayed");
|
|
expect(el.textContent).toContain("No exchange rate configured for EUR");
|
|
// The way back to Settings must still be present.
|
|
const link = el.querySelector("a[href*='/settings']");
|
|
expect(link).not.toBeNull();
|
|
// "Try again" control is present to retry without a full reload.
|
|
expect(el.textContent).toContain("Try again");
|
|
});
|
|
|
|
test("a non-throwing child renders normally", () => {
|
|
const el = mount(
|
|
<MemoryRouter>
|
|
<RouteErrorBoundary>
|
|
<Fine />
|
|
</RouteErrorBoundary>
|
|
</MemoryRouter>,
|
|
);
|
|
|
|
expect(el.textContent).toContain("all good");
|
|
expect(el.textContent).not.toContain("could not be displayed");
|
|
});
|
|
|
|
function View() {
|
|
const location = useLocation();
|
|
return (
|
|
<RouteErrorBoundaryReset>
|
|
{location.pathname === "/a" ? <Thrower /> : <Fine />}
|
|
</RouteErrorBoundaryReset>
|
|
);
|
|
}
|
|
|
|
test("RouteErrorBoundaryReset resets the error state when the route changes", () => {
|
|
const el = mount(
|
|
<MemoryRouter initialEntries={["/a"]}>
|
|
<Link to="/b">go to settings</Link>
|
|
<View />
|
|
</MemoryRouter>,
|
|
);
|
|
expect(el.textContent).toContain("No exchange rate configured for EUR");
|
|
|
|
// A real navigation (e.g. following the boundary's Settings link) changes
|
|
// the route; the boundary is keyed on location.pathname, so it should
|
|
// remount with a clean error state instead of staying stuck.
|
|
const link = el.querySelector("a");
|
|
expect(link).not.toBeNull();
|
|
act(() => {
|
|
link!.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
|
|
});
|
|
|
|
expect(el.textContent).toContain("all good");
|
|
expect(el.textContent).not.toContain("could not be displayed");
|
|
});
|