@gusnips/react 0.9.28 → 0.9.30

package/src/keys.test.ts

@@ -0,0 +1,253 @@
+// @vitest-environment happy-dom
+import { QueryClient, QueryClientProvider, useMutation, useQuery } from "@tanstack/react-query";
+import { act, createElement, useLayoutEffect } from "react";
+import { createRoot } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  createKeyLifecycle,
+  KeyScopeChangedError,
+  useKeyReveals,
+  type KeyLifecycle,
+  type RevealedKey,
+} from "./keys.ts";
+
+interface KeyRecord {
+  id: string;
+  name: string;
+  prefix: string;
+}
+
+vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+
+const cleanups: (() => void)[] = [];
+afterEach(() => {
+  for (const cleanup of cleanups.splice(0)) cleanup();
+  document.body.replaceChildren();
+});
+
+function minted(id: string): RevealedKey<KeyRecord> {
+  const key = `sk_live_${id}_${"x".repeat(24)}`;
+  return { record: { id, name: `key ${id}`, prefix: key.slice(0, 10) }, key };
+}
+
+/** A request the test answers by hand, to hold it in flight across a navigation. */
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((yes) => {
+    resolve = yes;
+  });
+  return { promise, resolve };
+}
+
+function lifecycleIn(scope: string | null = "account-1:workspace-1") {
+  const keys = createKeyLifecycle<KeyRecord>();
+  keys.setScope(scope);
+  // Each test leaves the window as it found it: no unread secrets means no unload listener.
+  cleanups.push(() => keys.setScope(null));
+  return keys;
+}
+
+/** The prompt shows only when a listener cancels the event. */
+function closingPrompts(): boolean {
+  const event = new Event("beforeunload", { cancelable: true });
+  window.dispatchEvent(event);
+  return event.defaultPrevented;
+}
+
+describe("createKeyLifecycle", () => {
+  it("keeps every unread secret, newest first, and resolves only the record", async () => {
+    const keys = lifecycleIn();
+    const first = await keys.create(async () => minted("a"));
+    await keys.create(async () => minted("b"));
+
+    expect(first).toEqual(minted("a").record);
+    expect(keys.getSnapshot().map((one) => one.key)).toEqual([minted("b").key, minted("a").key]);
+    keys.dismiss("b");
+    expect(keys.getSnapshot()).toEqual([minted("a")]);
+  });
+
+  it("refuses a record that still holds the secret", async () => {
+    const keys = lifecycleIn();
+    // The whole answer passed as the record: the shape every donor's mutation cache ended up with.
+    const { record, key } = minted("a");
+    const answer = { ...record, key };
+    await expect(keys.create(async () => ({ record: answer, key }))).rejects.toThrow(
+      "still holds the secret",
+    );
+    expect(keys.getSnapshot()).toEqual([]);
+  });
+
+  it("sends nothing before a scope is set", async () => {
+    const keys = lifecycleIn(null);
+    const request = vi.fn(async () => minted("a"));
+    await expect(keys.create(request)).rejects.toThrow("setScope");
+    await expect(keys.revoke("a", request)).rejects.toThrow("setScope");
+    expect(request).not.toHaveBeenCalled();
+  });
+
+  it("a new scope forgets every secret and refuses answers from the old one", async () => {
+    const keys = lifecycleIn("account-1:workspace-1");
+    await keys.create(async () => minted("a"));
+    keys.setScope("account-1:workspace-1");
+    expect(keys.getSnapshot()).toHaveLength(1);
+
+    const late = deferred<RevealedKey<KeyRecord>>();
+    const creating = keys.create(() => late.promise);
+    // Signed out and straight back in as the same account: still not the scope that asked.
+    keys.setScope(null);
+    keys.setScope("account-1:workspace-1");
+    late.resolve(minted("b"));
+
+    const refused = await creating.catch((error: unknown) => error);
+    expect(refused).toBeInstanceOf(KeyScopeChangedError);
+    expect(refused).toMatchObject({ operation: "create" });
+    expect(keys.getSnapshot()).toEqual([]);
+  });
+
+  it("a failed revoke keeps the secret, and a success forgets only that key", async () => {
+    const keys = lifecycleIn();
+    await keys.create(async () => minted("a"));
+    await keys.create(async () => minted("b"));
+
+    await expect(
+      keys.revoke("a", async () => Promise.reject(new Error("offline"))),
+    ).rejects.toThrow("offline");
+    expect(keys.getSnapshot()).toHaveLength(2);
+
+    await keys.revoke("a", async () => undefined);
+    expect(keys.getSnapshot()).toEqual([minted("b")]);
+  });
+
+  it("a revoke answered after the scope changed forgets nothing in the new one", async () => {
+    const keys = lifecycleIn("account-1:workspace-1");
+    const late = deferred<void>();
+    const revoking = keys.revoke("a", () => late.promise);
+    keys.setScope("account-1:workspace-2");
+    await keys.create(async () => minted("a"));
+    late.resolve();
+
+    await expect(revoking).rejects.toMatchObject({ operation: "revoke" });
+    expect(keys.getSnapshot()).toEqual([minted("a")]);
+  });
+
+  it("asks before the tab closes only while a secret is unread, per lifecycle", async () => {
+    const one = lifecycleIn();
+    const other = lifecycleIn();
+    expect(closingPrompts()).toBe(false);
+
+    await one.create(async () => minted("a"));
+    await other.create(async () => minted("b"));
+    expect(closingPrompts()).toBe(true);
+
+    other.dismiss("b");
+    expect(closingPrompts()).toBe(true);
+    one.setScope(null);
+    expect(closingPrompts()).toBe(false);
+  });
+});
+
+describe("with react-query", () => {
+  function app(keys: KeyLifecycle<KeyRecord>, server: { list: KeyRecord[] }) {
+    const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    const element = document.createElement("div");
+    document.body.append(element);
+    const root = createRoot(element);
+    cleanups.push(() => act(() => root.unmount()));
+    let route: "keys" | "docs" = "keys";
+    let mint: ((request: () => Promise<RevealedKey<KeyRecord>>) => void) | undefined;
+    let shown: readonly RevealedKey<KeyRecord>[] = [];
+
+    function KeysPage() {
+      useQuery({ queryKey: ["keys"], queryFn: async () => server.list });
+      const create = useMutation({
+        mutationFn: (request: () => Promise<RevealedKey<KeyRecord>>) => keys.create(request),
+        onSuccess: () => client.invalidateQueries({ queryKey: ["keys"] }),
+      });
+      const reveals = useKeyReveals(keys);
+      useLayoutEffect(() => {
+        mint = create.mutate;
+        shown = reveals;
+      });
+      return createElement("p", null, reveals.map((one) => one.key).join(","));
+    }
+
+    const render = () =>
+      root.render(
+        createElement(
+          QueryClientProvider,
+          { client },
+          route === "keys" ? createElement(KeysPage) : createElement("p", null, "docs"),
+        ),
+      );
+    act(render);
+
+    return {
+      client,
+      element,
+      get shown() {
+        return shown;
+      },
+      mint(request: () => Promise<RevealedKey<KeyRecord>>) {
+        act(() => mint?.(request));
+      },
+      go(next: "keys" | "docs") {
+        route = next;
+        act(render);
+      },
+    };
+  }
+
+  it("a create in flight still reveals its secret after the page unmounts", async () => {
+    const keys = lifecycleIn();
+    const screen = app(keys, { list: [] });
+    const late = deferred<RevealedKey<KeyRecord>>();
+    screen.mint(() => late.promise);
+
+    screen.go("docs");
+    await act(async () => late.resolve(minted("a")));
+    expect(keys.getSnapshot()).toEqual([minted("a")]);
+
+    screen.go("keys");
+    expect(screen.shown).toEqual([minted("a")]);
+    expect(screen.element.textContent).toBe(minted("a").key);
+  });
+
+  it("no secret reaches the mutation cache or the list cache", async () => {
+    const keys = lifecycleIn();
+    const server = { list: [] as KeyRecord[] };
+    const screen = app(keys, server);
+    const { record, key } = minted("a");
+
+    screen.mint(async () => {
+      server.list = [record];
+      return { record, key };
+    });
+    await act(() =>
+      vi.waitFor(() => expect(screen.client.getQueryData(["keys"])).toEqual([record])),
+    );
+
+    const caches = JSON.stringify([
+      screen.client
+        .getMutationCache()
+        .getAll()
+        .map((mutation) => mutation.state),
+      screen.client
+        .getQueryCache()
+        .getAll()
+        .map((query) => query.state),
+    ]);
+    expect(caches).toContain(record.prefix);
+    expect(caches).not.toContain(key);
+    expect(keys.getSnapshot()).toEqual([{ record, key }]);
+  });
+
+  it("a prerender prints no secret", async () => {
+    const keys = lifecycleIn();
+    await keys.create(async () => minted("a"));
+    function Reveals() {
+      return createElement("p", null, useKeyReveals(keys).length);
+    }
+    expect(renderToString(createElement(Reveals))).toBe("<p>0</p>");
+  });
+});

package/src/keys.ts

@@ -0,0 +1,144 @@
+import { useSyncExternalStore } from "react";
+
+/**
+ * A new API key, the one time the server sends its secret. Three products wrote this flow, and
+ * each knew one part the others missed:
+ *
+ * - One kept unread secrets in a list outside the page, so a second key did not overwrite the
+ *   first and a trip to the docs did not lose either. The tab asked before closing only while one
+ *   was unread, and signing out forgot them all.
+ * - One kept the secret out of the list cache, folding only the record into it.
+ * - None kept it out of react-query's MUTATION cache. Each `mutationFn` resolved the whole answer,
+ *   secret included, so `mutation.data` held it, one of them under a comment promising it did not.
+ *
+ * So `create` takes the secret here and resolves only the record, and the request is the caller's.
+ * Forms, permissions, list queries, invalidation and copy feedback stay in the product.
+ */
+
+/** What your create request resolves: the record your list shows, and the secret beside it. */
+export interface RevealedKey<Record> {
+  readonly record: Record;
+  readonly key: string;
+}
+
+/** The account or workspace changed while a create or revoke was in flight. */
+export class KeyScopeChangedError extends Error {
+  readonly operation: "create" | "revoke";
+
+  constructor(operation: "create" | "revoke") {
+    super(
+      operation === "create"
+        ? "The account or workspace changed before the new key could be shown. If nobody saved it, revoke it from that workspace's keys."
+        : "The account or workspace changed while the key was being revoked. Check that workspace's keys to see whether it worked.",
+    );
+    this.name = "KeyScopeChangedError";
+    this.operation = operation;
+  }
+}
+
+export interface KeyLifecycle<Record> {
+  /**
+   * Who and where keys are made for: the signed-in account and the workspace, joined into one
+   * string, or `null` once signed out. Call it from your auth and workspace subscription, never
+   * from the keys page, which may not be mounted. A new scope forgets every unread secret and
+   * rejects requests started under the old one, including when the same account signs back in.
+   */
+  setScope(scope: string | null): void;
+  /**
+   * Run your create request, keep its secret here, and resolve only the record. Use it as a
+   * `mutationFn`: neither the result nor the variables carry the secret, and the reveal still
+   * lands when the page that asked has unmounted.
+   */
+  create(request: () => Promise<RevealedKey<Record>>): Promise<Record>;
+  /** Run your revoke request. Only a success, in the same scope, forgets that key's secret. */
+  revoke(id: string, request: () => Promise<unknown>): Promise<void>;
+  /** The person saved it. Wire this to "Done", never to a copy: a copy can fail. */
+  dismiss(id: string): void;
+  /** Unread secrets, newest first. */
+  getSnapshot(): readonly RevealedKey<Record>[];
+  subscribe(listener: () => void): () => void;
+}
+
+/**
+ * One per app, created at module scope, outside every route. Memory only: never storage, the URL
+ * or a query cache, so a reload loses an unread secret, and the tab asks before closing while one
+ * is unread. The listener comes and goes with the secrets because a page with a `beforeunload`
+ * listener is kept out of some browsers' back-forward cache.
+ */
+export function createKeyLifecycle<Record extends { readonly id: string }>(): KeyLifecycle<Record> {
+  let revealed: readonly RevealedKey<Record>[] = [];
+  let scope: string | null = null;
+  let generation = 0;
+  const listeners = new Set<() => void>();
+
+  // Per instance, so two lifecycles never remove each other's prompt.
+  function askBeforeLeaving(event: BeforeUnloadEvent): void {
+    event.preventDefault();
+    // Older Chrome and Safari prompt only when this is set too. The browser picks the words.
+    event.returnValue = "";
+  }
+
+  function publish(next: readonly RevealedKey<Record>[]): void {
+    const wasUnread = revealed.length > 0;
+    revealed = next;
+    if (wasUnread !== next.length > 0 && typeof window !== "undefined") {
+      if (next.length > 0) window.addEventListener("beforeunload", askBeforeLeaving);
+      else window.removeEventListener("beforeunload", askBeforeLeaving);
+    }
+    for (const listener of listeners) listener();
+  }
+
+  /** Runs `request` under the current scope and refuses an answer that outlived it. */
+  async function scoped<T>(operation: "create" | "revoke", request: () => Promise<T>): Promise<T> {
+    if (scope === null)
+      throw new Error("Call setScope with the signed-in account and workspace first.");
+    const started = generation;
+    const answer = await request();
+    if (started !== generation) throw new KeyScopeChangedError(operation);
+    return answer;
+  }
+
+  function dismiss(id: string): void {
+    const next = revealed.filter((one) => one.record.id !== id);
+    if (next.length !== revealed.length) publish(next);
+  }
+
+  return {
+    setScope(next) {
+      if (scope === next) return;
+      scope = next;
+      generation++;
+      if (revealed.length > 0) publish([]);
+    },
+    async create(request) {
+      const { record, key } = await scoped("create", request);
+      // The record goes on to react-query and often into the list cache. A request that passed
+      // the whole answer as the record would put the secret there, which is the bug this exists
+      // to end, so say so on the first try instead.
+      if (JSON.stringify(record).includes(key))
+        throw new Error("The record still holds the secret. Resolve it without the key field.");
+      publish([{ record, key }, ...revealed]);
+      return record;
+    },
+    async revoke(id, request) {
+      await scoped("revoke", request);
+      dismiss(id);
+    },
+    dismiss,
+    getSnapshot: () => revealed,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+  };
+}
+
+// The server has no unread secrets, and a prerender must never print one.
+const none: readonly never[] = [];
+
+/** Unread secrets, newest first. Unmounting the component forgets nothing. */
+export function useKeyReveals<Record>(
+  lifecycle: KeyLifecycle<Record>,
+): readonly RevealedKey<Record>[] {
+  return useSyncExternalStore(lifecycle.subscribe, lifecycle.getSnapshot, () => none);
+}

package/src/oauth.test.ts

@@ -0,0 +1,257 @@
+// @vitest-environment happy-dom
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  formatUserCode,
+  useConsentRequest,
+  useDeviceApproval,
+  type ConsentApi,
+  type ConsentView,
+  type DeviceApi,
+  type DeviceView,
+  type OAuthRefusal,
+} from "./oauth.ts";
+
+vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+
+const roots = new Set<Root>();
+afterEach(() => {
+  for (const root of roots) act(() => root.unmount());
+  roots.clear();
+  vi.restoreAllMocks();
+});
+
+/** Renders `hook` under a fresh query client and keeps its latest answer in `current`. */
+function mount<T>(hook: () => T) {
+  const seen: T[] = [];
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  function Probe() {
+    seen.push(hook());
+    return null;
+  }
+  const root = createRoot(document.createElement("div"));
+  roots.add(root);
+  act(() => root.render(createElement(QueryClientProvider, { client }, createElement(Probe))));
+  return {
+    client,
+    get current(): T {
+      const last = seen.at(-1);
+      if (last === undefined) throw new Error("The hook never rendered");
+      return last;
+    },
+  };
+}
+
+/**
+ * Lets pending promises and the renders they cause finish. react-query hands its updates to a
+ * scheduler that runs on a later task, so one tick is not always enough.
+ */
+const settle = () =>
+  act(async () => {
+    for (let tick = 0; tick < 5; tick++) await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+
+const VIEW: ConsentView = {
+  ok: true,
+  clientName: "Claude",
+  redirectHost: "claude.ai",
+  keyName: "Claude (claude.ai)",
+  cancelUrl: "https://claude.ai/cb?error=access_denied",
+};
+const REFUSAL: OAuthRefusal = {
+  ok: false,
+  reason: "redirect-mismatch",
+  message: "This app's sign-in link is not valid.",
+};
+
+describe("useConsentRequest", () => {
+  it("loads the request, approves with the page's choice, and leaves for the redirect", async () => {
+    const assign = vi.spyOn(window.location, "assign").mockImplementation(() => {});
+    let release!: () => void;
+    const api: ConsentApi<string> = {
+      describe: vi.fn(async () => VIEW),
+      approve: vi.fn(
+        () =>
+          new Promise<{ ok: true; redirectTo: string }>((resolve) => {
+            release = () => resolve({ ok: true, redirectTo: "https://claude.ai/cb?code=c1" });
+          }),
+      ),
+    };
+    const page = mount(() => useConsentRequest(api, "?client_id=x&state=s"));
+    expect(page.current.state).toEqual({ status: "loading" });
+    await settle();
+    expect(page.current.state).toEqual({ status: "ready", view: VIEW });
+    expect(api.describe).toHaveBeenCalledWith("client_id=x&state=s");
+
+    act(() => page.current.approve("ws-1"));
+    await settle();
+    expect(api.approve).toHaveBeenCalledWith("client_id=x&state=s", "ws-1");
+    expect(page.current.leaving).toBe(true);
+
+    release();
+    await settle();
+    expect(assign).toHaveBeenCalledWith("https://claude.ai/cb?code=c1");
+    // The page is going away: the button must not come back for a second press.
+    expect(page.current.leaving).toBe(true);
+  });
+
+  it("shows a refusal as a state and never redirects on it", async () => {
+    const assign = vi.spyOn(window.location, "assign").mockImplementation(() => {});
+    const page = mount(() =>
+      useConsentRequest({ describe: async () => REFUSAL, approve: vi.fn() }, "?client_id=x"),
+    );
+    await settle();
+    expect(page.current.state).toEqual({ status: "refused", refusal: REFUSAL });
+    expect(assign).not.toHaveBeenCalled();
+  });
+
+  it("turns a refusal from approve into the refused state, and stays put", async () => {
+    const assign = vi.spyOn(window.location, "assign").mockImplementation(() => {});
+    const page = mount(() =>
+      useConsentRequest({ describe: async () => VIEW, approve: async () => REFUSAL }, ""),
+    );
+    await settle();
+    act(() => page.current.approve());
+    await settle();
+    expect(page.current.state).toEqual({ status: "refused", refusal: REFUSAL });
+    expect(page.current.leaving).toBe(false);
+    expect(assign).not.toHaveBeenCalled();
+  });
+
+  it("offers a retry when the request failed to answer, and recovers", async () => {
+    let calls = 0;
+    const page = mount(() =>
+      useConsentRequest(
+        {
+          describe: async () => {
+            calls += 1;
+            if (calls === 1) throw new TypeError("Failed to fetch");
+            return VIEW;
+          },
+          approve: vi.fn(),
+        },
+        "?a=1",
+      ),
+    );
+    await settle();
+    const failed = page.current.state;
+    if (failed.status !== "failed") throw new Error(`expected failed, got ${failed.status}`);
+    expect(failed.error).toBeInstanceOf(TypeError);
+    act(() => failed.retry());
+    await settle();
+    expect(page.current.state).toEqual({ status: "ready", view: VIEW });
+  });
+
+  it("keeps an approve that did not answer beside the button, ready to press again", async () => {
+    const page = mount(() =>
+      useConsentRequest(
+        {
+          describe: async () => VIEW,
+          approve: async () => {
+            throw new TypeError("Failed to fetch");
+          },
+        },
+        "",
+      ),
+    );
+    await settle();
+    act(() => page.current.approve());
+    await settle();
+    expect(page.current.approveError).toBeInstanceOf(TypeError);
+    expect(page.current.leaving).toBe(false);
+    expect(page.current.state.status).toBe("ready");
+  });
+});
+
+const DEVICE: DeviceView = {
+  ok: true,
+  clientName: "Acme CLI",
+  userCode: "WDJB-MJHT",
+  keyName: "Acme CLI (device sign-in)",
+  expiresAt: "2026-10-16T12:10:00.000Z",
+};
+
+describe("useDeviceApproval", () => {
+  function deviceApi(overrides: Partial<DeviceApi> = {}) {
+    return {
+      describe: vi.fn<DeviceApi["describe"]>(overrides.describe ?? (async () => DEVICE)),
+      decide: vi.fn<DeviceApi["decide"]>(overrides.decide ?? (async () => ({ ok: true }))),
+    };
+  }
+
+  it("starts from the link's code, asks the server, and stays approved after the yes", async () => {
+    const api = deviceApi();
+    const page = mount(() => useDeviceApproval(api, "?code=wdjb-mjht"));
+    expect(page.current.code).toBe("WDJB-MJHT");
+    await settle();
+    expect(page.current.state).toEqual({ status: "ready", view: DEVICE });
+    expect(api.describe).toHaveBeenCalledWith("WDJBMJHT");
+
+    act(() => page.current.approve());
+    await settle();
+    expect(api.decide).toHaveBeenCalledWith("WDJBMJHT", "approve");
+    expect(page.current.state).toEqual({ status: "approved" });
+
+    // A refetch on focus would now hear "unknown code". It must not be asked.
+    api.describe.mockResolvedValue({ ok: false, reason: "unknown-code", message: "gone" });
+    await act(async () => page.client.invalidateQueries());
+    await settle();
+    expect(page.current.state).toEqual({ status: "approved" });
+    expect(api.describe).toHaveBeenCalledTimes(1);
+  });
+
+  it("waits for all eight letters before asking, and flags a vowel at once", async () => {
+    const api = deviceApi();
+    const page = mount(() => useDeviceApproval(api, ""));
+    expect(page.current.state).toEqual({ status: "typing" });
+    act(() => page.current.setCode("wdjb m"));
+    expect(page.current.code).toBe("WDJB-M");
+    act(() => page.current.setCode("WDJA"));
+    expect(page.current.invalidLetter).toBe(true);
+    act(() => page.current.setCode("WDJB MJHTX"));
+    expect(page.current.code).toBe("WDJB-MJHT");
+    await settle();
+    expect(api.describe).toHaveBeenCalledTimes(1);
+    expect(page.current.state.status).toBe("ready");
+  });
+
+  it("says no, and shows a code the server does not know as refused", async () => {
+    const said = mount(() => useDeviceApproval(deviceApi(), "?code=WDJBMJHT"));
+    await settle();
+    act(() => said.current.deny());
+    await settle();
+    expect(said.current.state).toEqual({ status: "denied" });
+
+    const unknown: OAuthRefusal = { ok: false, reason: "unknown-code", message: "expired" };
+    const gone = mount(() =>
+      useDeviceApproval(deviceApi({ describe: async () => unknown }), "?code=WDJBMJHT"),
+    );
+    await settle();
+    expect(gone.current.state).toEqual({ status: "refused", refusal: unknown });
+  });
+
+  it("shows a decision the server refused, and lets a new code start over", async () => {
+    const unknown: OAuthRefusal = { ok: false, reason: "unknown-code", message: "expired" };
+    const api = deviceApi({ decide: async () => unknown });
+    const page = mount(() => useDeviceApproval(api, "?code=WDJBMJHT"));
+    await settle();
+    act(() => page.current.approve());
+    await settle();
+    expect(page.current.state).toEqual({ status: "refused", refusal: unknown });
+    act(() => page.current.setCode("BCDF GHJK"));
+    await settle();
+    expect(page.current.state.status).toBe("ready");
+  });
+});
+
+describe("formatUserCode", () => {
+  it("writes what the field shows", () => {
+    expect(formatUserCode("")).toBe("");
+    expect(formatUserCode("wdj")).toBe("WDJ");
+    expect(formatUserCode("wdjb")).toBe("WDJB");
+    expect(formatUserCode("wdjbm")).toBe("WDJB-M");
+    expect(formatUserCode(" w-d j b m j h t z ")).toBe("WDJB-MJHT");
+  });
+});