@unitedstatespowersquadrons/components 1.3.4 → 1.3.6-1

package/.claude/settings.local.json

@@ -0,0 +1,10 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(yarn run test*)",
+      "Bash(yarn run vitest*)",
+      "Bash(yarn run tsc*)",
+      "Bash(yarn run eslint*)"
+    ]
+  }
+}

package/.github/workflows/main.yml

@@ -31,3 +31,12 @@ jobs:
         run: yarn
       - name: Run TSC
         run: yarn run tsc
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+      - name: Install Packages
+        run: yarn
+      - name: Run Tests
+        run: yarn run test

package/Badges/helpers.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import { badgeify, versionColor } from "./helpers";
+
+describe("badgeify", () => {
+  it("escapes hyphens", () => {
+    expect(badgeify("my-text")).toBe("my--text");
+  });
+
+  it("escapes underscores", () => {
+    expect(badgeify("my_text")).toBe("my__text");
+  });
+
+  it("replaces spaces with underscores", () => {
+    expect(badgeify("my text")).toBe("my_text");
+  });
+
+  it("returns undefined for undefined input", () => {
+    expect(badgeify(undefined)).toBeUndefined();
+  });
+});
+
+describe("versionColor", () => {
+  it("returns orange for v0.x versions", () => {
+    expect(versionColor("v0.1.0")).toBe("orange");
+  });
+
+  it("returns blue for v1+ versions", () => {
+    expect(versionColor("v1.0.0")).toBe("blue");
+    expect(versionColor("v2.3.1")).toBe("blue");
+  });
+});

package/Pagination.test.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Pagination from "./Pagination";
+
+describe("Pagination", () => {
+  it("renders the current page number", () => {
+    render(<Pagination maxPage={5} pageNumber={3} path="/items" />);
+
+    expect(screen.getByText("3")).toBeInTheDocument();
+  });
+
+  it("renders a label when provided", () => {
+    render(<Pagination label="Page" maxPage={5} pageNumber={2} path="/items" />);
+
+    expect(screen.getByText("Page")).toBeInTheDocument();
+  });
+
+  it("shows all navigation buttons on a middle page", () => {
+    render(<Pagination maxPage={5} pageNumber={3} path="/items" />);
+
+    expect(screen.getByTitle("First Page")).toBeInTheDocument();
+    expect(screen.getByTitle("Previous Page")).toBeInTheDocument();
+    expect(screen.getByTitle("Next Page")).toBeInTheDocument();
+    expect(screen.getByTitle("Last Page")).toBeInTheDocument();
+  });
+
+  it("hides First and Previous on page 1", () => {
+    render(<Pagination maxPage={5} pageNumber={1} path="/items" />);
+
+    expect(screen.queryByTitle("First Page")).not.toBeInTheDocument();
+    expect(screen.queryByTitle("Previous Page")).not.toBeInTheDocument();
+    expect(screen.getByTitle("Next Page")).toBeInTheDocument();
+    expect(screen.getByTitle("Last Page")).toBeInTheDocument();
+  });
+
+  it("hides Next and Last on the last page", () => {
+    render(<Pagination maxPage={5} pageNumber={5} path="/items" />);
+
+    expect(screen.getByTitle("First Page")).toBeInTheDocument();
+    expect(screen.getByTitle("Previous Page")).toBeInTheDocument();
+    expect(screen.queryByTitle("Next Page")).not.toBeInTheDocument();
+    expect(screen.queryByTitle("Last Page")).not.toBeInTheDocument();
+  });
+
+  it("hides First when on page 2 (only one page back)", () => {
+    render(<Pagination maxPage={5} pageNumber={2} path="/items" />);
+
+    expect(screen.queryByTitle("First Page")).not.toBeInTheDocument();
+    expect(screen.getByTitle("Previous Page")).toBeInTheDocument();
+  });
+
+  it("hides Last when on penultimate page", () => {
+    render(<Pagination maxPage={5} pageNumber={4} path="/items" />);
+
+    expect(screen.getByTitle("Next Page")).toBeInTheDocument();
+    expect(screen.queryByTitle("Last Page")).not.toBeInTheDocument();
+  });
+
+  it("constructs correct hrefs with params", () => {
+    render(<Pagination maxPage={3} pageNumber={2} params={{ filter: "active" }} path="/items" />);
+
+    const nextLink = screen.getByTitle("Next Page").closest("a");
+    expect(nextLink?.getAttribute("href")).toContain("page=3");
+    expect(nextLink?.getAttribute("href")).toContain("filter=active");
+    expect(nextLink?.getAttribute("href")).toMatch(/^\/items\?/);
+  });
+
+  it("renders nothing extra for a single page", () => {
+    render(<Pagination maxPage={1} pageNumber={1} path="/items" />);
+
+    expect(screen.queryByTitle("First Page")).not.toBeInTheDocument();
+    expect(screen.queryByTitle("Previous Page")).not.toBeInTheDocument();
+    expect(screen.queryByTitle("Next Page")).not.toBeInTheDocument();
+    expect(screen.queryByTitle("Last Page")).not.toBeInTheDocument();
+    expect(screen.getByText("1")).toBeInTheDocument();
+  });
+});

package/RailsForm.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { getCsrfTokenHeader } from "./railsFetchJson";
 
 interface Props {
   action: string;
@@ -11,8 +12,7 @@ interface Props {
 const RailsForm = (props: Props) => {
   const { action, children, fileUpload, id, method } = props;
 
-  const token = document.querySelector("meta[name='csrf-token']");
-  const csrfToken = token ? token.getAttribute("content")! : "";
+  const csrfToken = getCsrfTokenHeader();
 
   const formMethod = method === "get" ? "get" : "post";
 

package/Reducer/buildReducer.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useEffect, useMemo, useRef } from "react";
 import { Draft, produce } from "immer";
 import { useImmerReducer } from "use-immer";
-import { Cable, Channel, createConsumer } from "@rails/actioncable";
+import { Consumer, createConsumer, Subscription } from "@rails/actioncable";
 import { CableAction, DispatchFunc, ReducerHandler } from "./types";
 
 interface InitialAppProps<AppState> {
@@ -9,17 +9,17 @@ interface InitialAppProps<AppState> {
   children: React.ReactNode;
 }
 
-export default function buildReducer<AppState, AppAction>(
+export default function buildReducer<AppState extends object, AppAction>(
   reducer: (draft: Draft<AppState>, action: AppAction) => void,
   handlers: ReducerHandler<AppAction>[] = []
 ) {
   const StateContext = createContext<AppState | null>(null);
   const DispatchContext = createContext<React.Dispatch<AppAction> | null>(null);
-  const CableContext = createContext<Cable | null>(null);
-
-  const cable = createConsumer();
+  const CableContext = createContext<Consumer | null>(null);
 
   function AppProvider(props: InitialAppProps<AppState>) {
+    const cable = useMemo(() => createConsumer(), []);
+
     const [providerState, dispatch] = useImmerReducer(reducer, props.initialState, (state: AppState) => {
       return produce(state, draft => draft);
     });
@@ -61,7 +61,7 @@ export default function buildReducer<AppState, AppAction>(
 
   function useAppCableSubscription(dispatch: DispatchFunc<CableAction>, channel: string) {
     const appCable = useAppCable();
-    const channelRef = useRef<Channel>(null);
+    const channelRef = useRef<Subscription>(null);
 
     useEffect(() => {
       channelRef.current = appCable.subscriptions.create(

package/Reducer/buildUnreducibleState.tsx

@@ -5,7 +5,7 @@ interface InitialAppProps<AppState> {
   children: React.ReactNode;
 }
 
-export default function buildUnreducibleState<AppState>() {
+export default function buildUnreducibleState<AppState extends object>() {
   const StateContext = createContext<AppState | null>(null);
 
   const AppProvider = (props: InitialAppProps<AppState>) => {

package/Reducer/wrapDispatch.test.ts

@@ -0,0 +1,172 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import wrapDispatch from "./wrapDispatch";
+import { DispatchHandler, RailsResponse } from "./types";
+
+vi.mock("../railsFetchJson", () => ({
+  default: vi.fn(),
+}));
+
+import railsFetchJson from "../railsFetchJson";
+
+const mockFetch = vi.mocked(railsFetchJson);
+
+interface TestAction {
+  type: "update" | "other" | "saveComplete" | "saveFailed";
+  res?: RailsResponse;
+  value?: string;
+}
+
+const makeHandler = (href = "/api/save"): DispatchHandler<TestAction> => {
+  return (action) => {
+    if (action.type === "update") {
+      return { href };
+    }
+    return undefined;
+  };
+};
+
+describe("wrapDispatch", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    mockFetch.mockReset();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("always dispatches the action immediately", () => {
+    const dispatch = vi.fn();
+    const wrapped = wrapDispatch<TestAction>(dispatch, ["update"], makeHandler());
+
+    wrapped({ type: "update", value: "test" });
+
+    expect(dispatch).toHaveBeenCalledWith({ type: "update", value: "test" });
+  });
+
+  it("does not trigger handler for non-matching action types", () => {
+    const dispatch = vi.fn();
+    const wrapped = wrapDispatch<TestAction>(dispatch, ["update"], makeHandler());
+
+    wrapped({ type: "other" });
+
+    vi.advanceTimersByTime(300);
+    expect(mockFetch).not.toHaveBeenCalled();
+  });
+
+  it("debounces the fetch call", () => {
+    const dispatch = vi.fn();
+    const wrapped = wrapDispatch<TestAction>(dispatch, ["update"], makeHandler());
+
+    wrapped({ type: "update" });
+    expect(mockFetch).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(250);
+    expect(mockFetch).toHaveBeenCalledOnce();
+  });
+
+  it("cancels previous debounced call when a new action arrives", () => {
+    const dispatch = vi.fn();
+    const wrapped = wrapDispatch<TestAction>(dispatch, ["update"], makeHandler());
+
+    wrapped({ type: "update", value: "first" });
+    vi.advanceTimersByTime(100);
+
+    wrapped({ type: "update", value: "second" });
+    vi.advanceTimersByTime(250);
+
+    // Only one fetch should have fired (the second one)
+    expect(mockFetch).toHaveBeenCalledOnce();
+  });
+
+  it("skips debounce when skipDebounce is true", () => {
+    const dispatch = vi.fn();
+    const wrapped = wrapDispatch<TestAction>(
+      dispatch, ["update"], makeHandler(), true
+    );
+
+    wrapped({ type: "update" });
+
+    // Should fire immediately without waiting
+    expect(mockFetch).toHaveBeenCalledOnce();
+  });
+
+  it("dispatches saveComplete on successful fetch", async () => {
+    const dispatch = vi.fn();
+    const response: RailsResponse = { status: "OK", toasts: [] };
+    mockFetch.mockResolvedValue(response);
+
+    const wrapped = wrapDispatch<TestAction>(
+      dispatch, ["update"], makeHandler(), true
+    );
+
+    wrapped({ type: "update" });
+
+    // Let the promise resolve
+    await vi.advanceTimersByTimeAsync(0);
+
+    expect(dispatch).toHaveBeenCalledWith({ res: response, type: "saveComplete" });
+  });
+
+  it("dispatches saveFailed on fetch error", async () => {
+    const dispatch = vi.fn();
+    mockFetch.mockRejectedValue(new Error("Network error"));
+
+    const wrapped = wrapDispatch<TestAction>(
+      dispatch, ["update"], makeHandler(), true
+    );
+
+    wrapped({ type: "update" });
+    await vi.advanceTimersByTimeAsync(0);
+
+    expect(dispatch).toHaveBeenCalledWith({ type: "saveFailed" });
+  });
+
+  it("ignores DOMException (aborted requests)", async () => {
+    const dispatch = vi.fn();
+    mockFetch.mockRejectedValue(new DOMException("Aborted", "AbortError"));
+
+    const wrapped = wrapDispatch<TestAction>(
+      dispatch, ["update"], makeHandler(), true
+    );
+
+    wrapped({ type: "update" });
+    await vi.advanceTimersByTimeAsync(0);
+
+    // Should only have the initial dispatch, no saveFailed
+    expect(dispatch).toHaveBeenCalledOnce();
+    expect(dispatch).toHaveBeenCalledWith({ type: "update" });
+  });
+
+  it("does not call fetch when handler returns undefined", () => {
+    const dispatch = vi.fn();
+    const handler: DispatchHandler<TestAction> = () => undefined;
+    const wrapped = wrapDispatch<TestAction>(
+      dispatch, ["update"], handler, true
+    );
+
+    wrapped({ type: "update" });
+
+    expect(mockFetch).not.toHaveBeenCalled();
+  });
+
+  it("passes href and method from handler to fetch", () => {
+    const dispatch = vi.fn();
+    const handler: DispatchHandler<TestAction> = (action) => {
+      if (action.type === "update") {
+        return { href: "/api/custom", method: "PUT" };
+      }
+      return undefined;
+    };
+    const wrapped = wrapDispatch<TestAction>(
+      dispatch, ["update"], handler, true
+    );
+
+    wrapped({ type: "update" });
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      "/api/custom",
+      expect.objectContaining({ method: "PUT" })
+    );
+  });
+});

package/Reducer/wrapDispatch.tsx

@@ -48,7 +48,7 @@ export default function wrapDispatch<
     }
   };
 
-  const timers: { [id: string]: number } = {};
+  const timers: { [id: string]: ReturnType<typeof setTimeout> } = {};
   const abortControllers: { [id: string]: AbortController } = {};
 
   return (action: A) => {

package/Toasts/Toast.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import classNames from "classnames";
 import { createUseStyles } from "react-jss";
 import { DismissFunc, Toast_Status, ToastProps } from "./types";
@@ -6,10 +6,21 @@ import FontAwesomeIcon from "../FontAwesomeIcon";
 import Styles from "../Styles";
 
 interface Props {
+  allowedDomains?: string[] | undefined;
   dismiss: DismissFunc;
   toast: ToastProps;
 }
 
+const isAllowedUrl = (url: string, allowedDomains?: string[]): boolean => {
+  if (!allowedDomains) return false;
+  try {
+    const hostname = new URL(url).hostname;
+    return allowedDomains.some(domain => hostname === domain || hostname.endsWith(`.${domain}`));
+  } catch {
+    return false;
+  }
+};
+
 const useStyles = createUseStyles({
   dismissed: { opacity: "0" },
   error: {
@@ -72,16 +83,21 @@ const useStyles = createUseStyles({
 const Toast = (props: Props) => {
   const classes = useStyles();
 
-  const { dismiss, toast } = props;
+  const { allowedDomains, dismiss, toast } = props;
   const { body, dismissed, id, status, timeout, title } = toast;
 
   const handleDismiss = () => dismiss(id);
 
-  if (timeout > 0) setTimeout(handleDismiss, 2000 + timeout);
+  useEffect(() => {
+    if (timeout <= 0) return;
+
+    const timer = window.setTimeout(handleDismiss, 2000 + timeout);
+    return () => window.clearTimeout(timer);
+  }, [id, timeout]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const renderBodyLines = (bodyLines: string[]) => {
     return(bodyLines.map((line, index) => {
-      if (/^https?:\/\//.exec(line)) {
+      if (/^https?:\/\//.exec(line) && isAllowedUrl(line, allowedDomains)) {
         return(
           <div key={`line-${index}`}>
             <a href={line}>{line}</a>

package/Toasts/Toasts.tsx

@@ -7,6 +7,7 @@ import { DismissFunc, ToastProps, ToastRemoveAppAction } from "./types";
 import { DispatchFunc } from "../";
 
 interface BaseProps {
+  allowedDomains?: string[];
   toasts?: ToastProps[];
 }
 
@@ -39,7 +40,7 @@ const useStyles = createUseStyles({
 });
 
 const Toasts = (props: Props) => {
-  const { toasts } = props;
+  const { allowedDomains, toasts } = props;
   const classes = useStyles();
 
   const dismissFunc = (): DismissFunc => {
@@ -55,7 +56,9 @@ const Toasts = (props: Props) => {
 
   return (
     <div className={classNames("toastsContainer", classes.toastsContainer)}>
-      {toasts?.map(toast => <Toast dismiss={dismissFunc()} key={toast.id} toast={toast} />)}
+      {toasts?.map(toast => (
+        <Toast allowedDomains={allowedDomains} dismiss={dismissFunc()} key={toast.id} toast={toast} />
+      ))}
     </div>
   );
 };

package/Toasts/index.tsx

@@ -3,6 +3,3 @@ export * from "./toastHelpers";
 
 export * from "./types";
 export type * from "./types";
-
-// Legacy exports for compatibility
-export { createDismissToast } from "./toastHelpers";

package/Toasts/toastHelpers.test.ts

@@ -0,0 +1,175 @@
+import { describe, expect, it, vi } from "vitest";
+import { produce } from "immer";
+import { addToast, handleToasts, removeToast, removeToastById, createDismissToast } from "./toastHelpers";
+import { Toast_Status, ToastProps } from "./types";
+
+const makeToast = (overrides: Partial<ToastProps> = {}): ToastProps => ({
+  body: "Test body",
+  id: 1,
+  status: Toast_Status.SUCCESS,
+  timeout: 5000,
+  title: "Test title",
+  ...overrides,
+});
+
+const makeState = (overrides = {}) => ({
+  toastId: 0,
+  toasts: [] as ToastProps[],
+  ...overrides,
+});
+
+describe("addToast", () => {
+  it("adds a toast to the state", () => {
+    const state = makeState();
+    const toast = { body: "Hello", status: Toast_Status.SUCCESS, timeout: 3000, title: "Hi" };
+
+    const result = produce(state, draft => {
+      addToast(draft, toast);
+    });
+
+    expect(result.toasts).toHaveLength(1);
+    expect(result.toasts[0]?.title).toBe("Hi");
+    expect(result.toasts[0]?.body).toBe("Hello");
+  });
+
+  it("increments toastId", () => {
+    const state = makeState({ toastId: 5 });
+    const toast = { body: "Body", status: Toast_Status.NOTICE, timeout: 0, title: "Title" };
+
+    const result = produce(state, draft => {
+      addToast(draft, toast);
+    });
+
+    expect(result.toastId).toBe(6);
+    expect(result.toasts[0]?.id).toBe(6);
+  });
+
+  it("uses provided id when available", () => {
+    const state = makeState();
+    const toast = { body: "Body", id: 42, status: Toast_Status.SUCCESS, timeout: 0, title: "Title" };
+
+    const result = produce(state, draft => {
+      addToast(draft, toast);
+    });
+
+    expect(result.toasts[0]?.id).toBe(42);
+  });
+
+  it("prevents duplicate toasts with same body, status, and title", () => {
+    const existing = makeToast({ body: "Dup", id: 1, status: Toast_Status.ERROR, title: "Dup Title" });
+    const state = makeState({ toasts: [existing] });
+    const toast = { body: "Dup", status: Toast_Status.ERROR, timeout: 0, title: "Dup Title" };
+
+    const result = produce(state, draft => {
+      addToast(draft, toast);
+    });
+
+    expect(result.toasts).toHaveLength(1);
+  });
+
+  it("allows toasts with different body", () => {
+    const existing = makeToast({ body: "First", id: 1, title: "Title" });
+    const state = makeState({ toasts: [existing] });
+    const toast = { body: "Second", status: Toast_Status.SUCCESS, timeout: 0, title: "Title" };
+
+    const result = produce(state, draft => {
+      addToast(draft, toast);
+    });
+
+    expect(result.toasts).toHaveLength(2);
+  });
+
+  it("initializes toasts array if missing", () => {
+    const state = { toastId: 0 } as ReturnType<typeof makeState>;
+    const toast = { body: "Body", status: Toast_Status.SUCCESS, timeout: 0, title: "Title" };
+
+    const result = produce(state, draft => {
+      addToast(draft, toast);
+    });
+
+    expect(result.toasts).toHaveLength(1);
+  });
+});
+
+describe("removeToast", () => {
+  it("removes the specified toast", () => {
+    const toast = makeToast({ id: 1 });
+    const state = makeState({ toasts: [toast, makeToast({ id: 2 })] });
+
+    const result = produce(state, draft => {
+      removeToast(draft, draft.toasts[0]!);
+    });
+
+    expect(result.toasts).toHaveLength(1);
+    expect(result.toasts[0]?.id).toBe(2);
+  });
+});
+
+describe("removeToastById", () => {
+  it("removes a toast by its id", () => {
+    const state = makeState({ toasts: [makeToast({ id: 5 }), makeToast({ id: 6, title: "Keep" })] });
+
+    const result = produce(state, draft => {
+      removeToastById(draft, 5);
+    });
+
+    expect(result.toasts).toHaveLength(1);
+    expect(result.toasts[0]?.title).toBe("Keep");
+  });
+
+  it("does nothing when id is not found", () => {
+    const state = makeState({ toasts: [makeToast({ id: 1 })] });
+
+    const result = produce(state, draft => {
+      removeToastById(draft, 999);
+    });
+
+    expect(result.toasts).toHaveLength(1);
+  });
+});
+
+describe("handleToasts", () => {
+  it("adds multiple toasts", () => {
+    const state = makeState();
+    const toasts = [
+      { body: "A", status: Toast_Status.SUCCESS, timeout: 0, title: "First" },
+      { body: "B", status: Toast_Status.NOTICE, timeout: 0, title: "Second" },
+    ];
+
+    const result = produce(state, draft => {
+      handleToasts(draft, toasts);
+    });
+
+    expect(result.toasts).toHaveLength(2);
+  });
+
+  it("does nothing with empty array", () => {
+    const state = makeState();
+
+    const result = produce(state, draft => {
+      handleToasts(draft, []);
+    });
+
+    expect(result.toasts).toHaveLength(0);
+  });
+});
+
+describe("createDismissToast", () => {
+  it("dispatches dismissToast then removeToast after delay", () => {
+    vi.useFakeTimers();
+    const dispatch = vi.fn();
+    const dismiss = createDismissToast(dispatch);
+
+    dismiss(7);
+
+    expect(dispatch).toHaveBeenCalledWith({ toastId: 7, type: "dismissToast" });
+    expect(dispatch).toHaveBeenCalledOnce();
+
+    vi.advanceTimersByTime(2000);
+
+    expect(dispatch).toHaveBeenCalledWith({ toastId: 7, type: "removeToast" });
+    expect(dispatch).toHaveBeenCalledTimes(2);
+
+    vi.useRealTimers();
+  });
+});

package/eslint.config.mjs

@@ -1,6 +1,7 @@
 import globals from "globals";
 import eslint from "@eslint/js";
 import stylisticJs from "@stylistic/eslint-plugin";
+import perfectionist from "eslint-plugin-perfectionist";
 import react from "eslint-plugin-react";
 import reactHooks from "eslint-plugin-react-hooks";
 import importPlugin from "eslint-plugin-import";
@@ -152,7 +153,7 @@ export default tseslint.config(
       "stylistic/no-extra-semi": "error",
       "stylistic/semi": ["error", "always"],
       "stylistic/no-multiple-empty-lines": "error",
-      "stylistic/jsx-sort-props": "error",
+      "perfectionist/sort-jsx-props": "error",
       "stylistic/eol-last": "error",
       "stylistic/array-element-newline": [
         "error",
@@ -250,11 +251,16 @@ export default tseslint.config(
       "app/javascript/application.js",
       "app/javascript/mount.tsx",
       "eslint.config.mjs",
+      "vitest.config.ts",
+      "vitest.setup.ts",
+      "**/*.test.ts",
+      "**/*.test.tsx",
     ],
   },
   {
     plugins: {
       "stylistic": stylisticJs,
+      "perfectionist": perfectionist,
       "react": react,
       "react-hooks": reactHooks,
       "import": importPlugin,

package/mount.test.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mockRender = vi.fn();
+const mockCreateRoot = vi.fn(() => ({ render: mockRender }));
+
+vi.mock("react-dom/client", () => ({
+  default: { createRoot: (...args: unknown[]) => mockCreateRoot(...args) },
+  createRoot: (...args: unknown[]) => mockCreateRoot(...args),
+}));
+
+import mount from "./mount";
+
+const Greeting = (props: { name?: string }) => <div>Hello {props.name}</div>;
+const Inner = (props: { name?: string }) => <div>Inner {props.name}</div>;
+
+const setupAndMount = (
+  components: { [key: string]: React.ElementType | Record<string, unknown> },
+  mountPoints: { name: string; props?: object }[]
+) => {
+  for (const mp of mountPoints) {
+    const el = document.createElement("div");
+    el.setAttribute("data-react-component", mp.name);
+    if (mp.props) el.setAttribute("data-props", JSON.stringify(mp.props));
+    document.body.appendChild(el);
+  }
+  mount(components);
+  document.dispatchEvent(new Event("DOMContentLoaded"));
+};
+
+describe("mount", () => {
+  beforeEach(() => {
+    const newDoc = document.implementation.createHTMLDocument();
+    Object.defineProperty(window, "document", {
+      configurable: true,
+      value: newDoc,
+      writable: true,
+    });
+    mockCreateRoot.mockClear();
+    mockRender.mockClear();
+  });
+
+  it("mounts a component found by name", () => {
+    setupAndMount({ Greeting }, [{ name: "Greeting", props: { name: "World" } }]);
+
+    expect(mockCreateRoot).toHaveBeenCalledOnce();
+    expect(mockRender).toHaveBeenCalledOnce();
+  });
+
+  it("resolves dotted component names", () => {
+    setupAndMount(
+      { Nested: { Inner } },
+      [{ name: "Nested.Inner", props: { name: "Dot" } }]
+    );
+
+    expect(mockCreateRoot).toHaveBeenCalledOnce();
+    expect(mockRender).toHaveBeenCalledOnce();
+  });
+
+  it("resolves deeply nested component names", () => {
+    setupAndMount(
+      { A: { B: { C: { Inner } } } },
+      [{ name: "A.B.C.Inner", props: { name: "Deep" } }]
+    );
+
+    expect(mockCreateRoot).toHaveBeenCalledOnce();
+    expect(mockRender).toHaveBeenCalledOnce();
+  });
+
+  it("warns when component is not found", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    setupAndMount({ Greeting }, [{ name: "Missing" }]);
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      "No component found for: Missing",
+      expect.any(Object)
+    );
+    expect(mockCreateRoot).not.toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+
+  it("defaults to empty props when data-props is missing", () => {
+    setupAndMount({ Greeting }, [{ name: "Greeting" }]);
+
+    expect(mockCreateRoot).toHaveBeenCalledOnce();
+    expect(mockRender).toHaveBeenCalledOnce();
+  });
+
+  it("handles broken dotted name chain", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    setupAndMount(
+      { Nested: { Inner } },
+      [{ name: "Nested.Wrong.Deep" }]
+    );
+
+    expect(warnSpy).toHaveBeenCalled();
+    expect(mockCreateRoot).not.toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+
+  it("mounts multiple components", () => {
+    setupAndMount({ Greeting }, [
+      { name: "Greeting", props: { name: "A" } },
+      { name: "Greeting", props: { name: "B" } },
+    ]);
+
+    expect(mockCreateRoot).toHaveBeenCalledTimes(2);
+    expect(mockRender).toHaveBeenCalledTimes(2);
+  });
+});

package/mount.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 
-type Components = Record<string, React.ElementType>;
-type NestedComponents = Record<string, React.ElementType | Components>;
+type NestedComponents = { [key: string]: React.ElementType | NestedComponents };
 
 const findComponent = (
   components: NestedComponents,
@@ -25,7 +24,7 @@ const findComponent = (
   }
 
   // Return the specified component
-  return (current as Components)[componentName];
+  return (current as NestedComponents)[componentName] as React.ElementType | undefined;
 };
 
 export default function mount(components: NestedComponents): void {
@@ -33,22 +32,23 @@ export default function mount(components: NestedComponents): void {
     const mountPoints = document.querySelectorAll("[data-react-component]");
     mountPoints.forEach(mountPoint => {
       const { dataset } = mountPoint as HTMLElement;
-      const componentName = dataset["reactComponent"];
-      if (componentName) {
-        const Component = findComponent(components, componentName);
-        if (Component) {
-          const props = JSON.parse(dataset["props"] as string) as object;
-          const root = ReactDOM.createRoot(mountPoint);
-          root.render(<Component {...props} />);
-        } else {
-          // eslint-disable-next-line no-console
-          console.warn(
-            "WARNING: No component found for: ",
-            dataset["reactComponent"],
-            components
-          );
-        }
+      const componentName = dataset["reactComponent"]!;
+
+      const Component = findComponent(components, componentName);
+
+      if (!Component) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `No component found for: ${dataset["reactComponent"]}`,
+          components
+        );
+        return;
       }
+
+      const props = JSON.parse(dataset["props"] || "{}") as object;
+      const root = ReactDOM.createRoot(mountPoint);
+
+      root.render(<Component {...props} />);
     });
   });
 }

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.3.4",
+  "version": "1.3.6-1",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "repository": {
     "type": "git",
@@ -18,19 +19,21 @@
   "homepage": "https://github.com/unitedstatespowersquadrons/components#readme",
   "dependencies": {
     "@rails/actioncable": "^8.0.200",
-    "@types/actioncable": "^5.2.11",
     "@types/rails__actioncable": "^6.1.11",
     "classnames": "^2.5.1",
+    "eslint-plugin-perfectionist": "^5.9.0",
     "immer": "^10.1.1",
     "javascript-time-ago": "^2.6.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-jss": "^10.10.0",
-    "typescript": "^5.8.3",
     "use-immer": "^0.11.0"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^5.1.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.6.0",
+    "@testing-library/react": "^16.3.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "eslint": "^9.30.1",
@@ -38,6 +41,9 @@
     "eslint-plugin-import-newlines": "^1.4.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "typescript-eslint": "^8.36.0"
+    "jsdom": "^26.1.0",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.36.0",
+    "vitest": "^3.1.0"
   }
 }

package/railsFetchJson.test.ts

@@ -0,0 +1,137 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { getCsrfTokenHeader } from "./railsFetchJson";
+
+describe("getCsrfTokenHeader", () => {
+  afterEach(() => {
+    document.head.innerHTML = "";
+  });
+
+  it("returns the csrf token from the meta tag", () => {
+    const meta = document.createElement("meta");
+    meta.setAttribute("name", "csrf-token");
+    meta.setAttribute("content", "abc123");
+    document.head.appendChild(meta);
+
+    expect(getCsrfTokenHeader()).toBe("abc123");
+  });
+
+  it("returns empty string when meta tag is missing", () => {
+    expect(getCsrfTokenHeader()).toBe("");
+  });
+
+  it("returns empty string when meta tag has no content attribute", () => {
+    const meta = document.createElement("meta");
+    meta.setAttribute("name", "csrf-token");
+    document.head.appendChild(meta);
+
+    expect(getCsrfTokenHeader()).toBe("");
+  });
+});
+
+describe("railsFetchJson", () => {
+  let mockFetch: ReturnType<typeof vi.fn>;
+  let railsFetchJson: typeof import("./railsFetchJson").default;
+
+  const mockResponse = (body: object, ok = true, status = 200) => {
+    return Promise.resolve({
+      json: () => Promise.resolve(body),
+      ok,
+      status,
+      statusText: ok ? "OK" : "Internal Server Error",
+    });
+  };
+
+  beforeEach(async () => {
+    document.head.innerHTML = "";
+    mockFetch = vi.fn();
+    // Set up the mock before the module captures window.fetch
+    window.fetch = mockFetch as unknown as typeof fetch;
+    // Re-import to capture the mocked fetch
+    vi.resetModules();
+    const mod = await import("./railsFetchJson");
+    railsFetchJson = mod.default;
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("sends default headers", async () => {
+    mockFetch.mockReturnValue(mockResponse({ result: "ok" }));
+
+    await railsFetchJson("http://localhost/api/test");
+
+    expect(mockFetch).toHaveBeenCalledOnce();
+    const [url, options] = mockFetch.mock.calls[0]!;
+    expect(url).toBe("http://localhost/api/test");
+    expect(options.credentials).toBe("same-origin");
+
+    const headers = options.headers as Headers;
+    expect(headers.get("X-Requested-With")).toBe("XMLHttpRequest");
+    expect(headers.get("X-Usps-Client")).toBe("React-2025");
+  });
+
+  it("includes CSRF token from meta tag", async () => {
+    const meta = document.createElement("meta");
+    meta.setAttribute("name", "csrf-token");
+    meta.setAttribute("content", "token-xyz");
+    document.head.appendChild(meta);
+
+    mockFetch.mockReturnValue(mockResponse({}));
+
+    await railsFetchJson("http://localhost/api/test");
+
+    const headers = mockFetch.mock.calls[0]![1].headers as Headers;
+    expect(headers.get("X-CSRF-Token")).toBe("token-xyz");
+  });
+
+  it("sends JSON headers and body for non-GET with bodyJson", async () => {
+    mockFetch.mockReturnValue(mockResponse({ saved: true }));
+
+    await railsFetchJson("http://localhost/api/save", {
+      bodyJson: { name: "test" },
+      method: "POST",
+    });
+
+    const [, options] = mockFetch.mock.calls[0]!;
+    const headers = options.headers as Headers;
+    expect(headers.get("Content-Type")).toBe("application/json");
+    expect(headers.get("Accept")).toBe("application/json");
+    expect(options.body).toBe(JSON.stringify({ name: "test" }));
+  });
+
+  it("does not send JSON headers for GET requests", async () => {
+    mockFetch.mockReturnValue(mockResponse({ data: [] }));
+
+    await railsFetchJson("http://localhost/api/list", { method: "GET" });
+
+    const headers = mockFetch.mock.calls[0]![1].headers as Headers;
+    expect(headers.has("Content-Type")).toBe(false);
+  });
+
+  it("returns parsed JSON response", async () => {
+    mockFetch.mockReturnValue(mockResponse({ items: [1, 2, 3] }));
+
+    const result = await railsFetchJson<{ items: number[] }>("http://localhost/api/items");
+
+    expect(result).toEqual({ items: [1, 2, 3] });
+  });
+
+  it("throws on non-2xx response", async () => {
+    mockFetch.mockReturnValue(mockResponse({}, false, 500));
+
+    await expect(railsFetchJson("http://localhost/api/fail")).rejects.toThrow("HTTP 500");
+  });
+
+  it("merges custom headers", async () => {
+    mockFetch.mockReturnValue(mockResponse({}));
+
+    await railsFetchJson("http://localhost/api/test", {
+      headers: { "X-Custom": "value" },
+    });
+
+    const headers = mockFetch.mock.calls[0]![1].headers as Headers;
+    expect(headers.get("X-Custom")).toBe("value");
+    expect(headers.get("X-Requested-With")).toBe("XMLHttpRequest");
+  });
+});

package/railsFetchJson.tsx

@@ -6,7 +6,7 @@ interface FetchJsonOptions extends RequestInit {
 
 export const getCsrfTokenHeader = () => {
   const token = document.querySelector("meta[name='csrf-token']");
-  return token ? token.getAttribute("content")! : "";
+  return token?.getAttribute("content") ?? "";
 };
 
 const railsFetchJson = <T = object>(url: RequestInfo, options?: FetchJsonOptions) => {
@@ -15,10 +15,9 @@ const railsFetchJson = <T = object>(url: RequestInfo, options?: FetchJsonOptions
   delete(options.headers);
   const baseheaders = {
     ...optionHeaders,
-    Credentials: "same-origin",
     "X-CSRF-Token": getCsrfTokenHeader(),
-    "X-Exams-Client": "React-2025",
     "X-Requested-With": "XMLHttpRequest",
+    "X-Usps-Client": "React-2025",
   };
 
   const jsonPost = options.method !== "GET" && options?.bodyJson;
@@ -31,7 +30,10 @@ const railsFetchJson = <T = object>(url: RequestInfo, options?: FetchJsonOptions
 
   if (jsonPost) options.body = JSON.stringify(options.bodyJson);
 
-  return oldFetch(url, { headers, ...options }).then(res => res.json() as Promise<T>);
+  return oldFetch(url, { credentials: "same-origin", headers, ...options }).then(res => {
+    if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+    return res.json() as Promise<T>;
+  });
 };
 
 export default railsFetchJson;

package/tsconfig.json

@@ -26,6 +26,10 @@
     "node_modules",
     "public",
     "vendor",
-    "tmp"
+    "tmp",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "vitest.config.ts",
+    "vitest.setup.ts"
   ]
 }

package/types.ts

@@ -23,7 +23,7 @@ export interface HrefProps {
 
 type HttpMethod =
   | "POST" | "post"
-  | "PUT" | "put "
+  | "PUT" | "put"
   | "PATCH" | "patch"
   | "DELETE" | "delete";
 

package/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: ["./vitest.setup.ts"],
+  },
+});

package/vitest.setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";