Chore: homepage tests (#6278)

src/components/toggles/color.test.jsx

@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { ColorContext } from "utils/contexts/color";
+
+// Stub Popover/Transition to always render children.
+vi.mock("@headlessui/react", async () => {
+  const React = await import("react");
+  const { Fragment } = React;
+
+  function passthrough({ as: As = "div", children, ...props }) {
+    if (As === Fragment) return <>{typeof children === "function" ? children({ open: true }) : children}</>;
+    const content = typeof children === "function" ? children({ open: true }) : children;
+    return <As {...props}>{content}</As>;
+  }
+
+  function Popover({ children }) {
+    return <div>{typeof children === "function" ? children({ open: true }) : children}</div>;
+  }
+  function PopoverButton(props) {
+    return <button type="button" {...props} />;
+  }
+  function PopoverPanel(props) {
+    return <div {...props} />;
+  }
+  Popover.Button = PopoverButton;
+  Popover.Panel = PopoverPanel;
+
+  return { Popover, Transition: passthrough };
+});
+
+import ColorToggle from "./color";
+
+describe("components/toggles/color", () => {
+  it("renders nothing when no active color is set", () => {
+    const { container } = render(
+      <ColorContext.Provider value={{ color: null, setColor: vi.fn() }}>
+        <ColorToggle />
+      </ColorContext.Provider>,
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("invokes setColor when a color button is clicked", () => {
+    const setColor = vi.fn();
+    render(
+      <ColorContext.Provider value={{ color: "slate", setColor }}>
+        <ColorToggle />
+      </ColorContext.Provider>,
+    );
+
+    // Buttons contain a sr-only span with the color name.
+    const blue = screen.getByText("blue").closest("button");
+    fireEvent.click(blue);
+    expect(setColor).toHaveBeenCalledWith("blue");
+  });
+});

src/components/toggles/revalidate.test.jsx

@@ -0,0 +1,27 @@
+// @vitest-environment jsdom
+
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import Revalidate from "./revalidate";
+
+describe("components/toggles/revalidate", () => {
+  it("calls /api/revalidate and reloads when ok", async () => {
+    const reload = vi.fn();
+    const fetchSpy = vi.spyOn(globalThis, "fetch").mockResolvedValueOnce({ ok: true });
+    vi.stubGlobal("location", { reload });
+
+    render(<Revalidate />);
+    const icon = document.querySelector("svg");
+    fireEvent.click(icon);
+
+    // allow promise chain to flush
+    await Promise.resolve();
+
+    expect(fetchSpy).toHaveBeenCalledWith("/api/revalidate");
+    expect(reload).toHaveBeenCalledTimes(1);
+
+    fetchSpy.mockRestore();
+    vi.unstubAllGlobals();
+  });
+});

src/components/toggles/theme.test.jsx

@@ -0,0 +1,46 @@
+// @vitest-environment jsdom
+
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { ThemeContext } from "utils/contexts/theme";
+
+import ThemeToggle from "./theme";
+
+describe("components/toggles/theme", () => {
+  it("renders nothing when theme is missing", () => {
+    const { container } = render(
+      <ThemeContext.Provider value={{ theme: null, setTheme: vi.fn() }}>
+        <ThemeToggle />
+      </ThemeContext.Provider>,
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("toggles from dark to light when clicked", () => {
+    const setTheme = vi.fn();
+    render(
+      <ThemeContext.Provider value={{ theme: "dark", setTheme }}>
+        <ThemeToggle />
+      </ThemeContext.Provider>,
+    );
+
+    // The toggle is a clickable icon rendered as an svg (react-icons).
+    const toggles = document.querySelectorAll("svg");
+    fireEvent.click(toggles[1]);
+    expect(setTheme).toHaveBeenCalledWith("light");
+  });
+
+  it("toggles from light to dark when clicked", () => {
+    const setTheme = vi.fn();
+    render(
+      <ThemeContext.Provider value={{ theme: "light", setTheme }}>
+        <ThemeToggle />
+      </ThemeContext.Provider>,
+    );
+
+    const toggles = document.querySelectorAll("svg");
+    fireEvent.click(toggles[1]);
+    expect(setTheme).toHaveBeenCalledWith("dark");
+  });
+});