The repo's first frontend test setup: Vitest, React Testing Library, jsdom. Scoped to the flows that lose money or leak data when broken, per spec 4. lib/api.ts collapses every failure into three the UI can act on: NotConnected (unreachable, or no URL baked in), ApiError 401 (redirect), and ApiError with the backend's own message, which is customer-facing and shown verbatim rather than replaced with something vaguer. The not-connected panel names the variable, the value baked in, and both reasons it fails -- unreachable from the browser, or missing from admin's ADMIN_ORIGIN. Proven by test before it existed. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
24 lines
1.1 KiB
TypeScript
24 lines
1.1 KiB
TypeScript
import { render, screen } from "@testing-library/react";
|
|
import { describe, expect, it } from "vitest";
|
|
import { NotConnectedPanel } from "./NotConnected";
|
|
|
|
describe("NotConnectedPanel", () => {
|
|
it("names the variable that is wrong and where it is set", () => {
|
|
render(<NotConnectedPanel url="https://admin.example.com" />);
|
|
|
|
expect(screen.getByRole("heading")).toHaveTextContent(
|
|
/not connected to the licensing service/i,
|
|
);
|
|
expect(screen.getByText(/ADMIN_API_URL/)).toBeInTheDocument();
|
|
expect(screen.getByText(/https:\/\/admin\.example\.com/)).toBeInTheDocument();
|
|
// The two mistakes that actually cause this, both named.
|
|
expect(screen.getByText(/reachable from your browser/i)).toBeInTheDocument();
|
|
expect(screen.getByText(/ADMIN_ORIGIN/)).toBeInTheDocument();
|
|
});
|
|
|
|
it("says the value is missing when no URL was baked in", () => {
|
|
render(<NotConnectedPanel url="" />);
|
|
expect(screen.getByText(/was not set when this app was built/i)).toBeInTheDocument();
|
|
});
|
|
});
|