PairDevice.test.tsx

1// @vitest-environment jsdom2//3// PairDeviceView is relay-only: the extension always DISPLAYS an invitation for4// another device to scan. LAN pairing codes went with LAN sync5// (docs/sync-lan-retirement.md), so there is no code-entry mode to test.6//7// chrome messaging is mocked the way the popup uses it:8//   - shared/bridge `sendMessage` is mocked (popup → bg)9//   - chrome.runtime.onMessage.{add,remove}Listener is faked so the test can10//     fire ADOPTION_SOURCE_* pushes (bg → popup)1112import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";1314// --- mock the background bridge (popup → bg) -------------------------------15const { mockSendMessage } = vi.hoisted(() => ({ mockSendMessage: vi.fn() }));16vi.mock("../../shared/bridge", () => ({ sendMessage: mockSendMessage }));1718const SOURCE_INVITATION =19  "peach-pair-v1:eyJyZWxheSI6IndzczovL3JlbGF5LnBlYWNocGFzc3dvcmRzLmNvbSIsInRva2VuIjoiQUFFQ0F3UUZCZ2NJQ1FvTERBME9EdyJ9";2021import { PairDeviceView } from "./PairDevice";22import { renderView, inputText } from "./view-test-utils";2324// --- fake chrome.runtime push channel (bg → popup) ------------------------25type RuntimeListener = (msg: { type?: string; payload?: unknown }) => void;26let listeners: RuntimeListener[] = [];2728function pushFromBackground(type: string, payload: unknown): void {29  for (const l of [...listeners]) l({ type, payload });30}3132beforeEach(() => {33  listeners = [];34  mockSendMessage.mockReset();35  mockSendMessage.mockImplementation((msg: { type?: string }) => {36    if (msg?.type === "START_ADOPTION_SOURCE") {37      return Promise.resolve({38        ok: true,39        data: { invitation: SOURCE_INVITATION },40      });41    }42    if (msg?.type === "ADOPTION_SOURCE_CONFIRM") {43      return Promise.resolve({ ok: true, data: { valid: true } });44    }45    if (msg?.type === "GET_SYNC_SETTINGS" || msg?.type === "SET_SYNC_SETTINGS") {46      return Promise.resolve({47        ok: true,48        data: { mode: "public", relayUrl: "wss://relay.peachpasswords.com" },49      });50    }51    return Promise.resolve({ ok: true });52  });53  (globalThis as unknown as { chrome: unknown }).chrome = {54    runtime: {55      onMessage: {56        addListener: (fn: RuntimeListener) => { listeners.push(fn); },57        removeListener: (fn: RuntimeListener) => { listeners = listeners.filter((l) => l !== fn); },58      },59    },60  };61});6263describe("PairDevice — relay adoption source", () => {64  const cleanups: Array<() => void> = [];65  afterEach(() => {66    while (cleanups.length) cleanups.pop()!();67  });6869  function mount() {70    const rendered = renderView(71      <PairDeviceView72        isPro={true}73        onBack={() => {}}74        onLearnPro={() => {}}75      />,76    );77    cleanups.push(rendered.dispose);78    return rendered;79  }8081  it("opens the relay room before rendering its QR, and offers no manual copy", async () => {82    const { container } = mount();83    await vi.waitFor(() => {84      expect(container.textContent).toContain("Scan this in Peach");85    });8687    expect(mockSendMessage).toHaveBeenCalledWith({88      type: "START_ADOPTION_SOURCE",89    });90    expect(container.querySelector("svg.peach-pair-qr")).toBeTruthy();91    // The QR is the default — the text form is behind an explicit fallback.92    expect(container.querySelector("#pairing-invitation-manual")).toBeNull();93    expect(container.textContent).toContain("single-use token");94  });9596  it("offers the same invitation as text when a camera won't cooperate", async () => {97    const { container } = mount();98    await vi.waitFor(() => {99      expect(container.textContent).toContain("Scan this in Peach");100    });101102    const toggle = () =>103      [...container.querySelectorAll<HTMLButtonElement>("button")].find((b) =>104        /Show a code instead|Show the QR instead/.test(b.textContent ?? ""),105      )!;106    toggle().click();107108    const text = container.querySelector<HTMLTextAreaElement>("#pairing-invitation-manual");109    expect(text?.value).toBe(SOURCE_INVITATION);110    // One invitation, two renderings — never two live codes on screen.111    expect(container.querySelector("svg.peach-pair-qr")).toBeNull();112113    toggle().click();114    expect(container.querySelector("#pairing-invitation-manual")).toBeNull();115    expect(container.querySelector("svg.peach-pair-qr")).toBeTruthy();116  });117118  // Moment 1 (docs/sync-relay-surfacing.md): present, but never a step.119  it("names the relay in force without making it a decision", async () => {120    const { container } = mount();121    await vi.waitFor(() => {122      expect(container.textContent).toContain("Scan this in Peach");123    });124125    const summary = container.querySelector(".peach-sync-mode-summary");126    expect(summary?.textContent).toContain("Using Public relay");127    // Quiet means quiet: no selector on screen until asked for.128    expect(container.querySelector(".peach-sync-mode")).toBeNull();129130    container.querySelector<HTMLButtonElement>(".peach-sync-mode-change")!.click();131    await vi.waitFor(() => {132      expect(container.querySelectorAll(".peach-sync-mode")).toHaveLength(3);133    });134    // The expanded selector is taller than the popup, so the QR folds away.135    expect(container.querySelector("svg.peach-pair-qr")).toBeNull();136  });137138  it("rebuilds the invitation when the relay changes, since the code carries it", async () => {139    const { container } = mount();140    await vi.waitFor(() => {141      expect(container.textContent).toContain("Scan this in Peach");142    });143    const opened = () =>144      mockSendMessage.mock.calls.filter(145        ([m]) => (m as { type?: string })?.type === "START_ADOPTION_SOURCE",146      ).length;147    expect(opened()).toBe(1);148149    container.querySelector<HTMLButtonElement>(".peach-sync-mode-change")!.click();150    await vi.waitFor(() => {151      expect(container.querySelectorAll(".peach-sync-mode")).toHaveLength(3);152    });153    const noSync = [...container.querySelectorAll<HTMLButtonElement>("button.peach-sync-mode")].find(154      (b) => b.textContent?.includes("No sync"),155    )!;156    noSync.click();157158    await vi.waitFor(() => {159      expect(mockSendMessage).toHaveBeenCalledWith({ type: "CANCEL_ADOPTION_SOURCE" });160      expect(opened()).toBe(2);161    });162  });163164  it("requires the matching SAS and master password before sharing", async () => {165    const { container } = mount();166    await vi.waitFor(() => {167      expect(container.textContent).toContain("Scan this in Peach");168    });169170    pushFromBackground("ADOPTION_SOURCE_SAS", {171      sas: "48219371",172      receiverDeviceName: "June's phone",173    });174    expect(container.textContent).toContain("June's phone");175    expect(container.textContent).toContain("48219371");176177    inputText(178      container.querySelector("#adoption-consent-password") as HTMLInputElement,179      "correct horse battery staple",180    );181    const approve = Array.from(container.querySelectorAll("button")).find(182      (button) => button.textContent?.includes("Share vault"),183    ) as HTMLButtonElement;184    approve.click();185    await vi.waitFor(() => {186      expect(mockSendMessage).toHaveBeenCalledWith({187        type: "ADOPTION_SOURCE_CONFIRM",188        payload: { password: "correct horse battery staple" },189      });190    });191    await vi.waitFor(() => {192      expect(container.textContent).toContain("Waiting for the new device");193    });194  });195});