@peers-app/peers-ui 0.21.2 → 0.21.4

package/src/tabs-layout/network-status-indicator.test.tsx

@@ -0,0 +1,391 @@
+import type { INetworkConnectionInfo, INetworkStatusSummary } from "@peers-app/peers-sdk";
+import { TrustLevel } from "@peers-app/peers-sdk";
+import { act, fireEvent, render, waitFor } from "@testing-library/react";
+import moment from "moment";
+import {
+  connectionIdentityLabel,
+  formatRelativeSyncTime,
+  getNetworkStatusPresentation,
+  NetworkStatusIndicator,
+  SYNCED_STABLE_MS,
+  SYNCING_GREEN_MS,
+} from "./network-status-indicator";
+import type { INetworkStatusViewState } from "./use-network-status";
+
+const goToTabPath = jest.fn();
+const getConnections = jest.fn();
+let mockViewState: INetworkStatusViewState = { availability: "loading" };
+
+jest.mock("./tabs-state", () => ({
+  goToTabPath: (...args: unknown[]) => goToTabPath(...args),
+}));
+
+jest.mock("./use-network-status", () => ({
+  useNetworkStatus: () => mockViewState,
+}));
+
+jest.mock("../screens/network-viewer/network-viewer-ipc", () => ({
+  getNetworkDiagnosticsConsumer: () =>
+    Promise.resolve({
+      tools: {
+        getConnections: (...args: unknown[]) => getConnections(...args),
+      },
+    }),
+}));
+
+function status(overrides: Partial<INetworkStatusSummary>): INetworkStatusSummary {
+  return {
+    state: "synced",
+    connectionCount: 2,
+    syncingContextCount: 0,
+    errorCount: 0,
+    errors: [],
+    ...overrides,
+  };
+}
+
+function connection(overrides: Partial<INetworkConnectionInfo> = {}): INetworkConnectionInfo {
+  return {
+    deviceId: "device-1",
+    userId: "user-1",
+    userName: "Ada",
+    deviceName: "Laptop",
+    userTrustLevel: TrustLevel.Trusted,
+    deviceTrustLevel: TrustLevel.Trusted,
+    connectionState: "connected",
+    sharedGroups: ["group-a"],
+    roles: {},
+    pathType: "direct",
+    latencyMs: 10,
+    errorRate: 0,
+    isServer: false,
+    ...overrides,
+  };
+}
+
+describe("formatRelativeSyncTime", () => {
+  it("returns now for very recent syncs", () => {
+    const now = Date.parse("2026-07-28T23:43:06.000");
+    expect(formatRelativeSyncTime(now - 10_000, now)).toBe("now");
+  });
+
+  it("returns yesterday for the previous calendar day", () => {
+    const now = moment("2026-07-28T23:43:06").valueOf();
+    const yesterdayAfternoon = moment("2026-07-28T23:43:06")
+      .subtract(1, "day")
+      .hour(18)
+      .minute(0)
+      .second(0)
+      .valueOf();
+    expect(formatRelativeSyncTime(yesterdayAfternoon, now)).toBe("yesterday");
+  });
+
+  it("returns a short relative phrase otherwise", () => {
+    const now = Date.parse("2026-07-28T23:43:06.000");
+    expect(formatRelativeSyncTime(now - 5 * 60_000, now)).toBe("5 minutes ago");
+  });
+});
+
+describe("connectionIdentityLabel", () => {
+  it("prefers a friendly name", () => {
+    expect(connectionIdentityLabel("Ada", "00mabcdefghijklmnopqrs")).toEqual({
+      text: "Ada",
+      isId: false,
+      title: "Ada",
+    });
+  });
+
+  it("middle-ellipsizes raw ids", () => {
+    expect(connectionIdentityLabel(undefined, "00mabcdefghijklmnopqrs")).toEqual({
+      text: "00ma…pqrs",
+      isId: true,
+      title: "00mabcdefghijklmnopqrs",
+    });
+  });
+});
+
+describe("getNetworkStatusPresentation", () => {
+  it("uses a compact green check-circle when synced", () => {
+    expect(
+      getNetworkStatusPresentation({ availability: "ready", status: status({ state: "synced" }) }),
+    ).toMatchObject({
+      shortLabel: "Synced",
+      colorClass: "text-success",
+      iconClass: "bi-check-circle-fill",
+      compactIcon: true,
+    });
+  });
+
+  it("uses a solid red dot when in error", () => {
+    expect(
+      getNetworkStatusPresentation({
+        availability: "ready",
+        status: status({
+          state: "error",
+          errorCount: 1,
+          errors: [{ dataContextId: "context", message: "failed", occurredAt: 1 }],
+        }),
+      }),
+    ).toMatchObject({
+      shortLabel: "Error",
+      colorClass: "text-danger",
+      mark: "solid",
+    });
+  });
+
+  it("pulses green then switches to an indeterminate circle while syncing", () => {
+    const syncing: INetworkStatusViewState = {
+      availability: "ready",
+      status: status({ state: "syncing", syncingContextCount: 1 }),
+    };
+    expect(getNetworkStatusPresentation(syncing)).toMatchObject({
+      colorClass: "text-success",
+      mark: "pulse",
+    });
+    expect(getNetworkStatusPresentation(syncing, { syncingLongerThanGreenMs: true })).toMatchObject(
+      {
+        colorClass: "text-primary",
+        mark: "indeterminate",
+      },
+    );
+  });
+
+  it("holds a green pulse while waiting for stable synced", () => {
+    expect(
+      getNetworkStatusPresentation(
+        { availability: "ready", status: status({ state: "synced" }) },
+        { holdSyncingVisual: true, syncingLongerThanGreenMs: true },
+      ),
+    ).toMatchObject({
+      shortLabel: "Syncing",
+      colorClass: "text-success",
+      mark: "pulse",
+    });
+  });
+});
+
+describe("NetworkStatusIndicator", () => {
+  beforeEach(() => {
+    mockViewState = { availability: "loading" };
+    getConnections.mockReset();
+    getConnections.mockResolvedValue({ connections: [] });
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it.each([
+    [{ availability: "loading" }, /Network status loading/],
+    [{ availability: "unavailable" }, /Network status unavailable/],
+    [
+      { availability: "ready", status: status({ state: "offline", connectionCount: 0 }) },
+      /Network offline/,
+    ],
+    [
+      {
+        availability: "ready",
+        status: status({ state: "syncing", syncingContextCount: 1 }),
+      },
+      /Network syncing/,
+    ],
+    [{ availability: "ready", status: status({ state: "synced" }) }, /Network synced/],
+    [
+      {
+        availability: "ready",
+        status: status({
+          state: "error",
+          errorCount: 1,
+          errors: [{ dataContextId: "context", message: "failed", occurredAt: 1 }],
+        }),
+      },
+      /Network error/,
+    ],
+  ] satisfies Array<
+    [INetworkStatusViewState, RegExp]
+  >)("renders an accessible state for %#", (viewState, accessibleName) => {
+    mockViewState = viewState;
+    const view = render(<NetworkStatusIndicator />);
+    expect(view.getByRole("button", { name: accessibleName })).toBeTruthy();
+  });
+
+  it("renders a compact green check-circle when synced and a solid red error dot", () => {
+    mockViewState = { availability: "ready", status: status({ state: "synced" }) };
+    const view = render(<NetworkStatusIndicator />);
+    const syncedIcon = view.container.querySelector("i.bi-check-circle-fill");
+    expect(syncedIcon).toBeTruthy();
+    expect(syncedIcon).toHaveStyle({ fontSize: "0.7rem" });
+    expect(view.container.querySelector(".spinner-grow")).toBeNull();
+
+    mockViewState = {
+      availability: "ready",
+      status: status({
+        state: "error",
+        errorCount: 1,
+        errors: [{ dataContextId: "context", message: "failed", occurredAt: 1 }],
+      }),
+    };
+    view.rerender(<NetworkStatusIndicator />);
+    expect(view.container.querySelector(".bg-danger.rounded-circle")).toBeTruthy();
+  });
+
+  it("uses a slower green pulse while syncing", () => {
+    mockViewState = {
+      availability: "ready",
+      status: status({ state: "syncing", syncingContextCount: 1 }),
+    };
+    const view = render(<NetworkStatusIndicator />);
+    const pulse = view.container.querySelector(".spinner-grow.text-success");
+    expect(pulse).toHaveStyle({ animationDuration: "1.0s" });
+  });
+
+  it("pulses green while syncing, then an indeterminate circle after the green window", () => {
+    jest.useFakeTimers();
+    mockViewState = {
+      availability: "ready",
+      status: status({ state: "syncing", syncingContextCount: 1 }),
+    };
+    const view = render(<NetworkStatusIndicator />);
+    expect(view.container.querySelector(".spinner-grow.text-success")).toBeTruthy();
+
+    act(() => {
+      jest.advanceTimersByTime(SYNCING_GREEN_MS);
+    });
+    expect(view.container.querySelector(".spinner-border.text-primary")).toBeTruthy();
+    expect(view.container.querySelector(".spinner-grow.text-success")).toBeNull();
+  });
+
+  it("keeps the green syncing pulse through brief synced flaps until synced is stable", () => {
+    jest.useFakeTimers();
+    mockViewState = {
+      availability: "ready",
+      status: status({ state: "syncing", syncingContextCount: 1 }),
+    };
+    const view = render(<NetworkStatusIndicator />);
+    expect(view.container.querySelector(".spinner-grow.text-success")).toBeTruthy();
+
+    mockViewState = { availability: "ready", status: status({ state: "synced" }) };
+    view.rerender(<NetworkStatusIndicator />);
+    act(() => {
+      jest.advanceTimersByTime(SYNCED_STABLE_MS - 1);
+    });
+    expect(view.container.querySelector(".spinner-grow.text-success")).toBeTruthy();
+    expect(view.container.querySelector("i.bi-check-circle-fill")).toBeNull();
+
+    mockViewState = {
+      availability: "ready",
+      status: status({ state: "syncing", syncingContextCount: 1 }),
+    };
+    view.rerender(<NetworkStatusIndicator />);
+    expect(view.container.querySelector(".spinner-grow.text-success")).toBeTruthy();
+
+    mockViewState = { availability: "ready", status: status({ state: "synced" }) };
+    view.rerender(<NetworkStatusIndicator />);
+    act(() => {
+      jest.advanceTimersByTime(SYNCED_STABLE_MS);
+    });
+    expect(view.container.querySelector("i.bi-check-circle-fill")).toBeTruthy();
+    expect(view.container.querySelector(".spinner-grow")).toBeNull();
+  });
+
+  it("lists connected devices in the details popover", async () => {
+    getConnections.mockResolvedValue({
+      connections: [
+        connection({
+          deviceId: "device-1",
+          userName: "Ada",
+          deviceName: "Laptop",
+          sharedGroups: ["g1", "g2"],
+        }),
+      ],
+    });
+    mockViewState = { availability: "ready", status: status({ state: "synced" }) };
+    const view = render(<NetworkStatusIndicator />);
+    fireEvent.click(view.getByRole("button", { name: /Network synced/ }));
+
+    await waitFor(() => {
+      expect(view.getByRole("dialog", { name: "Network status details" })).toHaveTextContent("Ada");
+    });
+    expect(view.getByRole("dialog")).toHaveTextContent("Laptop");
+    expect(view.getByRole("dialog")).toHaveTextContent("2g");
+    expect(getConnections).toHaveBeenCalled();
+  });
+
+  it("shows middle-ellipsized ids when names are missing", async () => {
+    getConnections.mockResolvedValue({
+      connections: [
+        connection({
+          deviceId: "00mdeviceidabcdefghijklm",
+          userId: "00museridabcdefghijklmn",
+          userName: undefined,
+          deviceName: undefined,
+          sharedGroups: [],
+        }),
+      ],
+    });
+    mockViewState = { availability: "ready", status: status({ state: "synced" }) };
+    const view = render(<NetworkStatusIndicator />);
+    fireEvent.click(view.getByRole("button", { name: /Network synced/ }));
+
+    await waitFor(() => {
+      expect(view.getByRole("dialog")).toHaveTextContent("00mu…klmn");
+    });
+    expect(view.getByRole("dialog")).toHaveTextContent("00md…jklm");
+  });
+
+  it("shows an empty connected-devices message when there are none", async () => {
+    getConnections.mockResolvedValue({ connections: [] });
+    mockViewState = {
+      availability: "ready",
+      status: status({ state: "offline", connectionCount: 0 }),
+    };
+    const view = render(<NetworkStatusIndicator />);
+    fireEvent.click(view.getByRole("button", { name: /Network offline/ }));
+
+    await waitFor(() => {
+      expect(view.getByRole("dialog")).toHaveTextContent("No connected devices");
+    });
+  });
+
+  it("shows an error when connected devices fail to load", async () => {
+    getConnections.mockRejectedValue(new Error("offline"));
+    mockViewState = { availability: "ready", status: status({ state: "synced" }) };
+    const view = render(<NetworkStatusIndicator />);
+    fireEvent.click(view.getByRole("button", { name: /Network synced/ }));
+
+    await waitFor(() => {
+      expect(view.getByRole("dialog")).toHaveTextContent("Couldn't load devices");
+    });
+  });
+
+  it("updates on rerender and opens details before navigating to Network Viewer", async () => {
+    const view = render(<NetworkStatusIndicator />);
+    expect(view.getByRole("button", { name: /loading/ })).toBeTruthy();
+
+    mockViewState = {
+      availability: "ready",
+      status: status({
+        state: "error",
+        connectionCount: 3,
+        errorCount: 1,
+        errors: [{ dataContextId: "context", message: "sync failed", occurredAt: 1 }],
+      }),
+    };
+    view.rerender(<NetworkStatusIndicator />);
+    fireEvent.click(view.getByRole("button", { name: /Network error/ }));
+
+    expect(view.getByRole("dialog", { name: "Network status details" })).toHaveTextContent(
+      "sync failed",
+    );
+    await waitFor(() => {
+      expect(getConnections).toHaveBeenCalled();
+    });
+    fireEvent.keyDown(document, { key: "Escape" });
+    expect(view.queryByRole("dialog", { name: "Network status details" })).toBeNull();
+
+    fireEvent.click(view.getByRole("button", { name: /Network error/ }));
+    fireEvent.click(view.getByRole("button", { name: "Open Network Viewer" }));
+    expect(goToTabPath).toHaveBeenCalledWith("network-viewer");
+  });
+});