@oneuptime/common 13.0.0 → 13.0.1

package/Tests/App/StatusPage/StatusPageOverviewLiveAndSearch.test.tsx

@@ -1,6 +1,13 @@
 import "@testing-library/jest-dom";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
 import React, { act } from "react";
+import { SpyInstance } from "jest-mock";
 import {
   afterEach,
   beforeEach,
@@ -16,6 +23,10 @@ import { JSONObject } from "../../../Types/JSON";
 import ObjectID from "../../../Types/ObjectID";
 import LocalStorage from "../../../UI/Utils/LocalStorage";
 import Navigation from "../../../UI/Utils/Navigation";
+import MonitorStatusTimeline from "../../../Models/DatabaseModels/MonitorStatusTimeline";
+import StatusPageResourceUptimeUtil from "../../../Utils/StatusPage/ResourceUptime";
+import UptimeUtil from "../../../Utils/Uptime/UptimeUtil";
+import Overview from "../../../../App/FeatureSet/StatusPage/src/Pages/Overview/Overview";
 
 /*
  * Contract under test - the two things the status page overview gained: it
@@ -109,58 +120,57 @@ jest.mock(
  * factory that closes over module scope is a load-order trap.
  */
 jest.mock("react-i18next", () => {
+  /*
+   * A real i18next translation function is stable between language changes.
+   * Keeping the same function here makes render-cache assertions realistic.
+   */
+  const t: (
+    key: string,
+    opts?: { defaultValue?: string } & Record<string, unknown>,
+  ) => string = (
+    key: string,
+    opts?: { defaultValue?: string } & Record<string, unknown>,
+  ): string => {
+    let out: string = opts?.defaultValue ?? key;
+
+    for (const name of Object.keys(opts || {})) {
+      const raw: unknown = (opts as Record<string, unknown>)[name];
+
+      // Common's translateValue also passes i18next's boolean options.
+      if (
+        name === "defaultValue" ||
+        (typeof raw !== "string" && typeof raw !== "number")
+      ) {
+        continue;
+      }
+
+      const value: string = String(raw);
+
+      if (out.includes(`{{${name}}}`)) {
+        out = out.split(`{{${name}}}`).join(value);
+      } else {
+        out = `${out} ${value}`;
+      }
+    }
+
+    return out;
+  };
+
   return {
-    /*
-     * The status page's own i18n bootstrap does i18n.use(initReactI18next) at
-     * import time, so the mock has to keep that export alive or the module
-     * graph fails before a single test runs.
-     */
+    // The status page's i18n bootstrap needs this at import time.
     initReactI18next: {
       type: "3rdParty",
       init: () => {},
     },
     useTranslation: () => {
       return {
-        t: (
-          key: string,
-          opts?: { defaultValue?: string } & Record<string, unknown>,
-        ): string => {
-          let out: string = opts?.defaultValue ?? key;
-
-          for (const name of Object.keys(opts || {})) {
-            const raw: unknown = (opts as Record<string, unknown>)[name];
-
-            /*
-             * defaultValue is not an interpolation value, and neither are
-             * i18next's own switches - Common's translateValue passes
-             * keySeparator and nsSeparator as booleans on every call.
-             */
-            if (
-              name === "defaultValue" ||
-              (typeof raw !== "string" && typeof raw !== "number")
-            ) {
-              continue;
-            }
-
-            const value: string = String(raw);
-
-            if (out.includes(`{{${name}}}`)) {
-              out = out.split(`{{${name}}}`).join(value);
-            } else {
-              out = `${out} ${value}`;
-            }
-          }
-
-          return out;
-        },
+        t: t,
         i18n: { resolvedLanguage: "en", language: "en" },
       };
     },
   };
 });
 
-import Overview from "../../../../App/FeatureSet/StatusPage/src/Pages/Overview/Overview";
-
 type ObjectIdJson = { _type: string; value: string };
 
 function objectId(value: string): ObjectIdJson {
@@ -286,6 +296,150 @@ function overviewPayload(
   };
 }
 
+const SEARCH_SNAPSHOT_TIME: Date = new Date("2026-09-09T12:00:00.000Z");
+/*
+ * Browser performance tests cover 90 days; seven days keeps these calculation-
+ * count regressions fast while still rendering real history for 40 resources.
+ */
+const SEARCH_HISTORY_DAYS: number = 7;
+const OFFLINE_STATUS_ID: string = "66666666-6666-4666-8666-666666666666";
+const MONITOR_GROUP_ID: string = "90000000-0000-4000-8000-000000000040";
+const LARGE_PAGE_GROUPS: Array<{
+  id: string;
+  name: string;
+  parentId?: string | undefined;
+}> = [
+  { id: "group-platform", name: "Platform" },
+  { id: "group-europe", name: "Europe", parentId: "group-platform" },
+  { id: "group-core", name: "Core", parentId: "group-europe" },
+  { id: "group-east", name: "Pool East", parentId: "group-core" },
+  { id: "group-west", name: "Pool West", parentId: "group-core" },
+];
+
+function largeOverviewPayload(updated: boolean = false): JSONObject {
+  const operationalStatus: JSONObject = {
+    _id: OPERATIONAL_STATUS_ID,
+    name: "Operational",
+    priority: 1,
+    isOperationalState: true,
+    color: color("#22c55e"),
+  };
+  const offlineStatus: JSONObject = {
+    _id: OFFLINE_STATUS_ID,
+    name: "Offline",
+    priority: 2,
+    isOperationalState: false,
+    color: color("#ef4444"),
+  };
+  const startDate: Date = new Date(
+    SEARCH_SNAPSHOT_TIME.getTime() - SEARCH_HISTORY_DAYS * 24 * 60 * 60 * 1000,
+  );
+  const midpoint: Date = new Date(
+    SEARCH_SNAPSHOT_TIME.getTime() -
+      (SEARCH_HISTORY_DAYS / 2) * 24 * 60 * 60 * 1000,
+  );
+  const resources: Array<JSONObject> = [];
+  const timelines: Array<JSONObject> = [];
+
+  for (let index: number = 1; index <= 40; index++) {
+    const suffix: string = index.toString().padStart(12, "0");
+    const monitorId: string = `80000000-0000-4000-8000-${suffix}`;
+    const resourceId: string = `70000000-0000-4000-8000-${suffix}`;
+    const name: string = `Service ${index.toString().padStart(2, "0")}`;
+    const isDown: boolean = updated && (index === 1 || index === 40);
+    const hasRecovered: boolean = updated && index === 2;
+
+    const resourceData: JSONObject = {
+      ...resource({
+        id: resourceId,
+        name: name,
+        groupId: index <= 20 ? "group-east" : "group-west",
+      }),
+      monitorId: objectId(monitorId),
+      monitor: {
+        _id: monitorId,
+        name: name,
+        currentMonitorStatusId: objectId(
+          isDown ? OFFLINE_STATUS_ID : OPERATIONAL_STATUS_ID,
+        ),
+      },
+      showStatusHistoryChart: true,
+      showUptimePercent: true,
+    };
+
+    /*
+     * The final resource is a monitor group so the same search and refresh
+     * assertions exercise both kinds of status-page resource.
+     */
+    if (index === 40) {
+      delete resourceData["monitor"];
+      delete resourceData["monitorId"];
+      resourceData["monitorGroupId"] = objectId(MONITOR_GROUP_ID);
+    }
+    resources.push(resourceData);
+
+    const initialStatus: JSONObject = hasRecovered
+      ? offlineStatus
+      : operationalStatus;
+    timelines.push({
+      _id: `timeline-initial-${index}`,
+      monitorId: objectId(monitorId),
+      monitorStatusId: objectId(
+        hasRecovered ? OFFLINE_STATUS_ID : OPERATIONAL_STATUS_ID,
+      ),
+      monitorStatus: initialStatus,
+      startsAt: { _type: "DateTime", value: startDate.toISOString() },
+      ...(isDown || hasRecovered
+        ? { endsAt: { _type: "DateTime", value: midpoint.toISOString() } }
+        : {}),
+    });
+
+    if (isDown || hasRecovered) {
+      timelines.push({
+        _id: `timeline-changed-${index}`,
+        monitorId: objectId(monitorId),
+        monitorStatusId: objectId(
+          isDown ? OFFLINE_STATUS_ID : OPERATIONAL_STATUS_ID,
+        ),
+        monitorStatus: isDown ? offlineStatus : operationalStatus,
+        startsAt: { _type: "DateTime", value: midpoint.toISOString() },
+      });
+    }
+  }
+
+  return {
+    ...overviewPayload(),
+    statusPage: {
+      _id: STATUS_PAGE_ID,
+      showUptimeHistoryInDays: SEARCH_HISTORY_DAYS,
+      showOverallUptimePercentOnStatusPage: true,
+      downtimeMonitorStatuses: [offlineStatus],
+      defaultBarColor: color("#22c55e"),
+    },
+    resourceGroups: LARGE_PAGE_GROUPS.map(
+      (data: (typeof LARGE_PAGE_GROUPS)[number]): JSONObject => {
+        return {
+          ...group(data),
+          isExpandedByDefault: true,
+          showUptimePercent: true,
+        };
+      },
+    ),
+    statusPageResources: resources,
+    monitorStatuses: [operationalStatus, offlineStatus],
+    monitorStatusTimelines: timelines,
+    monitorsInGroup: {
+      [MONITOR_GROUP_ID]: [objectId("80000000-0000-4000-8000-000000000040")],
+    },
+    monitorGroupCurrentStatuses: {
+      [MONITOR_GROUP_ID]: objectId(
+        updated ? OFFLINE_STATUS_ID : OPERATIONAL_STATUS_ID,
+      ),
+    },
+    overallStatus: updated ? offlineStatus : operationalStatus,
+  };
+}
+
 function successResponse(data: JSONObject): HTTPResponse<JSONObject> {
   return new HTTPResponse<JSONObject>(200, data, {});
 }
@@ -490,6 +644,344 @@ describe("Status page overview - searching for a resource", () => {
   });
 });
 
+describe("Status page overview - searching a large page with uptime history", () => {
+  const navigate: typeof Navigation.navigate = Navigation.navigate;
+
+  function observeHistoryWork(): {
+    timelines: SpyInstance<
+      typeof StatusPageResourceUptimeUtil.getMonitorStatusTimelineForResource
+    >;
+    groupUptime: SpyInstance<
+      typeof StatusPageResourceUptimeUtil.calculateAvgUptimePercentOfStatusPageGroup
+    >;
+    groupStatus: SpyInstance<
+      typeof StatusPageResourceUptimeUtil.getCurrentStatusPageGroupStatus
+    >;
+    overallUptime: SpyInstance<
+      typeof StatusPageResourceUptimeUtil.calculateAvgUptimePercentageOfAllResources
+    >;
+    uptime: SpyInstance<typeof UptimeUtil.calculateUptimePercentage>;
+    events: SpyInstance<typeof UptimeUtil.getNonOverlappingMonitorEvents>;
+  } {
+    return {
+      timelines: jest.spyOn(
+        StatusPageResourceUptimeUtil,
+        "getMonitorStatusTimelineForResource",
+      ),
+      groupUptime: jest.spyOn(
+        StatusPageResourceUptimeUtil,
+        "calculateAvgUptimePercentOfStatusPageGroup",
+      ),
+      groupStatus: jest.spyOn(
+        StatusPageResourceUptimeUtil,
+        "getCurrentStatusPageGroupStatus",
+      ),
+      overallUptime: jest.spyOn(
+        StatusPageResourceUptimeUtil,
+        "calculateAvgUptimePercentageOfAllResources",
+      ),
+      uptime: jest.spyOn(UptimeUtil, "calculateUptimePercentage"),
+      events: jest.spyOn(UptimeUtil, "getNonOverlappingMonitorEvents"),
+    };
+  }
+
+  type HistoryWork = ReturnType<typeof observeHistoryWork>;
+
+  function payloadWorkCounts(work: HistoryWork): Record<string, number> {
+    return {
+      timelines: work.timelines.mock.calls.length,
+      groupUptime: work.groupUptime.mock.calls.length,
+      groupStatus: work.groupStatus.mock.calls.length,
+      overallUptime: work.overallUptime.mock.calls.length,
+    };
+  }
+
+  function monitorWorkCounts(
+    work: HistoryWork,
+    monitorId: string,
+  ): Record<string, number> {
+    const containsMonitor: (
+      timelines: Array<MonitorStatusTimeline>,
+    ) => boolean = (timelines: Array<MonitorStatusTimeline>): boolean => {
+      return timelines.some((timeline: MonitorStatusTimeline): boolean => {
+        return timeline.monitorId?.toString() === monitorId;
+      });
+    };
+
+    return {
+      uptime: work.uptime.mock.calls.filter(
+        (
+          call: Parameters<typeof UptimeUtil.calculateUptimePercentage>,
+        ): boolean => {
+          return containsMonitor(call[0]);
+        },
+      ).length,
+      events: work.events.mock.calls.filter(
+        (
+          call: Parameters<typeof UptimeUtil.getNonOverlappingMonitorEvents>,
+        ): boolean => {
+          return containsMonitor(call[0]);
+        },
+      ).length,
+    };
+  }
+
+  beforeEach(() => {
+    postCallCount = 0;
+    localStorage.clear();
+    LocalStorage.setItem("statusPageId", new ObjectID(STATUS_PAGE_ID));
+    window.history.replaceState({}, "", "/");
+    Navigation.navigate = (): void => {};
+    setDocumentVisibility("visible");
+    jest.useFakeTimers();
+    jest.setSystemTime(SEARCH_SNAPSHOT_TIME);
+    mockRespondToPost = (): PostResponse => {
+      return successResponse(largeOverviewPayload());
+    };
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+    Navigation.navigate = navigate;
+    jest.restoreAllMocks();
+  });
+
+  test("successive keystrokes reuse all unchanged history and uptime calculations", async () => {
+    const work: HistoryWork = observeHistoryWork();
+    await renderOverview();
+
+    expect(screen.getAllByTestId("day-uptime-graph")).toHaveLength(40);
+    expect(screen.getAllByTestId("uptime-bar").length).toBeGreaterThan(
+      40 * (SEARCH_HISTORY_DAYS - 1),
+    );
+    expect(screen.getAllByTestId("status-page-group-header")).toHaveLength(5);
+    expect(work.groupUptime).toHaveBeenCalled();
+    expect(work.overallUptime).toHaveBeenCalled();
+    expect(work.events).toHaveBeenCalled();
+
+    const payloadCounts: Record<string, number> = payloadWorkCounts(work);
+    const uptimeCount: number = work.uptime.mock.calls.length;
+    const eventCount: number = work.events.mock.calls.length;
+    const callsAfterLoad: number = postCallCount;
+    const input: HTMLElement = searchInput();
+    input.focus();
+
+    /*
+     * The same 40 charts survive each query. Advancing time catches Date
+     * objects recreated on each input render even when their props look alike.
+     */
+    for (const query of ["s", "se", "ser", "serv", "servi", "service"]) {
+      act(() => {
+        jest.advanceTimersByTime(1000);
+      });
+      await typeSearch(query);
+      expect(input).toHaveValue(query);
+      expect(input).toHaveFocus();
+      expect(
+        screen.getByTestId("status-page-resource-search-count"),
+      ).toHaveTextContent("40 of 40 resources");
+      expect(screen.getAllByTestId("day-uptime-graph")).toHaveLength(40);
+      expect(payloadWorkCounts(work)).toEqual(payloadCounts);
+      expect(work.uptime).toHaveBeenCalledTimes(uptimeCount);
+      expect(work.events).toHaveBeenCalledTimes(eventCount);
+    }
+
+    await typeSearch("SERVICE");
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("status-page-resource-search-clear"));
+    });
+
+    expect(searchInput()).toBe(input);
+    expect(input).toHaveValue("");
+    expect(input).toHaveFocus();
+    expect(screen.getAllByTestId("day-uptime-graph")).toHaveLength(40);
+    expect(payloadWorkCounts(work)).toEqual(payloadCounts);
+    expect(work.uptime).toHaveBeenCalledTimes(uptimeCount);
+    expect(work.events).toHaveBeenCalledTimes(eventCount);
+    expect(postCallCount).toBe(callsAfterLoad);
+  });
+
+  test("narrowing and clearing a query preserves the surviving chart and its calculations", async () => {
+    const work: HistoryWork = observeHistoryWork();
+    await renderOverview();
+
+    const payloadCounts: Record<string, number> = payloadWorkCounts(work);
+    const monitorId: string = "80000000-0000-4000-8000-000000000001";
+    const monitorCounts: Record<string, number> = monitorWorkCounts(
+      work,
+      monitorId,
+    );
+    const chart: HTMLElement = screen.getAllByTestId("day-uptime-graph")[0]!;
+    const input: HTMLElement = searchInput();
+    input.focus();
+
+    await typeSearch("service 0");
+    expect(screen.getAllByTestId("day-uptime-graph")).toHaveLength(9);
+    await typeSearch("service 01");
+
+    expect(screen.getByText("Service 01")).toBeInTheDocument();
+    expect(screen.queryByText("Service 02")).not.toBeInTheDocument();
+    expect(screen.queryByText("Pool West")).not.toBeInTheDocument();
+    expect(screen.getByTestId("day-uptime-graph")).toBe(chart);
+    expect(
+      screen.getByTestId("status-page-resource-search-count"),
+    ).toHaveTextContent("1 of 40 resources");
+    for (const ancestor of ["Platform", "Europe", "Core", "Pool East"]) {
+      expect(screen.getByText(ancestor)).toBeInTheDocument();
+    }
+    expect(monitorWorkCounts(work, monitorId)).toEqual(monitorCounts);
+    expect(payloadWorkCounts(work)).toEqual(payloadCounts);
+
+    await act(async () => {
+      fireEvent.keyDown(input, { key: "Escape" });
+    });
+
+    expect(input).toHaveValue("");
+    expect(input).toHaveFocus();
+    expect(screen.getAllByTestId("day-uptime-graph")).toHaveLength(40);
+    expect(screen.getAllByTestId("day-uptime-graph")[0]).toBe(chart);
+    expect(screen.getByText("Service 40")).toBeInTheDocument();
+    /*
+     * Charts that return to the DOM mount again; the continuously visible
+     * chart and the data derived from the loaded payload stay reusable.
+     */
+    expect(monitorWorkCounts(work, monitorId)).toEqual(monitorCounts);
+    expect(payloadWorkCounts(work)).toEqual(payloadCounts);
+  });
+
+  test("replacement, no results, and clearing reuse the loaded data and keep input focus", async () => {
+    const work: HistoryWork = observeHistoryWork();
+    await renderOverview();
+
+    const payloadCounts: Record<string, number> = payloadWorkCounts(work);
+    const callsAfterLoad: number = postCallCount;
+    const input: HTMLElement = searchInput();
+    input.focus();
+
+    await typeSearch("service 01");
+    await typeSearch("service 40");
+    expect(screen.getByText("Service 40")).toBeInTheDocument();
+    expect(screen.queryByText("Service 01")).not.toBeInTheDocument();
+    expect(screen.getByText("Pool West")).toBeInTheDocument();
+    expect(screen.queryByText("Pool East")).not.toBeInTheDocument();
+
+    await typeSearch("missing resource");
+    expect(screen.getByText("No matching resources")).toBeInTheDocument();
+    expect(screen.queryByTestId("day-uptime-graph")).not.toBeInTheDocument();
+    expect(
+      screen.getByTestId("status-page-resource-search-count"),
+    ).toHaveTextContent("0 of 40 resources");
+    expect(input).toHaveFocus();
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("status-page-resource-search-clear"));
+    });
+
+    expect(input).toHaveValue("");
+    expect(input).toHaveFocus();
+    expect(screen.queryByText("No matching resources")).not.toBeInTheDocument();
+    expect(screen.getAllByTestId("day-uptime-graph")).toHaveLength(40);
+    expect(screen.getAllByTestId("status-page-group-header")).toHaveLength(5);
+    expect(payloadWorkCounts(work)).toEqual(payloadCounts);
+    expect(postCallCount).toBe(callsAfterLoad);
+  });
+
+  test("matching a group keeps all its descendants at four nested levels", async () => {
+    await renderOverview();
+
+    await typeSearch("pool east");
+
+    expect(
+      screen.getByTestId("status-page-resource-search-count"),
+    ).toHaveTextContent("20 of 40 resources");
+    expect(screen.getAllByTestId("day-uptime-graph")).toHaveLength(20);
+    expect(screen.getByText("Service 01")).toBeInTheDocument();
+    expect(screen.getByText("Service 20")).toBeInTheDocument();
+    expect(screen.queryByText("Service 21")).not.toBeInTheDocument();
+    expect(screen.queryByText("Pool West")).not.toBeInTheDocument();
+    for (const ancestor of ["Platform", "Europe", "Core", "Pool East"]) {
+      expect(screen.getByText(ancestor)).toBeInTheDocument();
+    }
+
+    await typeSearch("europe");
+    expect(screen.getAllByTestId("day-uptime-graph")).toHaveLength(40);
+    expect(
+      screen.getByTestId("status-page-resource-search-count"),
+    ).toHaveTextContent("40 of 40 resources");
+  });
+
+  test("refresh invalidates cached history, status, uptime, and the reporting window", async () => {
+    const work: HistoryWork = observeHistoryWork();
+    await renderOverview();
+    await typeSearch("service");
+
+    const payloadCounts: Record<string, number> = payloadWorkCounts(work);
+    const initialWindowEnd: Date = work.uptime.mock.calls[0]![3]!.endDate;
+    const input: HTMLElement = searchInput();
+    input.focus();
+    expect(screen.getByRole("status")).toHaveTextContent("Operational");
+    expect(
+      screen.queryByText("50overview.uptimeSuffix"),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getAllByTestId("status-page-group-rollup")[0],
+    ).toHaveTextContent("100overview.uptimeSuffix");
+
+    jest.setSystemTime(
+      new Date(SEARCH_SNAPSHOT_TIME.getTime() + 5 * 60 * 1000),
+    );
+    mockRespondToPost = (): PostResponse => {
+      return successResponse(largeOverviewPayload(true));
+    };
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("status-page-refresh-button"));
+    });
+
+    expect(input).toHaveValue("service");
+    expect(input).toHaveFocus();
+    expect(screen.getAllByTestId("day-uptime-graph")).toHaveLength(40);
+    expect(screen.getByRole("status")).toHaveTextContent("Offline");
+    expect(
+      screen.getAllByTestId("status-page-group-rollup")[0],
+    ).toHaveTextContent("Offline");
+    expect(screen.getByText("50overview.uptimeSuffix")).toBeInTheDocument();
+    expect(
+      screen.getByText("Service 40").parentElement?.parentElement,
+    ).toHaveTextContent("Offline");
+    const recoveredChart: HTMLElement =
+      screen.getAllByTestId("day-uptime-graph")[1]!;
+    expect(
+      within(recoveredChart)
+        .getAllByTestId("uptime-bar")
+        .some((bar: HTMLElement): boolean => {
+          return bar.style.backgroundColor === "rgb(239, 68, 68)";
+        }),
+    ).toBe(true);
+    expect(work.timelines.mock.calls.length).toBeGreaterThan(
+      payloadCounts["timelines"]!,
+    );
+    expect(work.groupUptime.mock.calls.length).toBeGreaterThan(
+      payloadCounts["groupUptime"]!,
+    );
+    expect(work.groupStatus.mock.calls.length).toBeGreaterThan(
+      payloadCounts["groupStatus"]!,
+    );
+    const refreshedWindowEnd: Date =
+      work.uptime.mock.calls[work.uptime.mock.calls.length - 1]![3]!.endDate;
+    expect(refreshedWindowEnd.getTime()).toBeGreaterThan(
+      initialWindowEnd.getTime(),
+    );
+
+    const refreshedCounts: Record<string, number> = payloadWorkCounts(work);
+    const refreshedUptimeCount: number = work.uptime.mock.calls.length;
+    const refreshedEventCount: number = work.events.mock.calls.length;
+    await typeSearch("SERVICE");
+    expect(payloadWorkCounts(work)).toEqual(refreshedCounts);
+    expect(work.uptime).toHaveBeenCalledTimes(refreshedUptimeCount);
+    expect(work.events).toHaveBeenCalledTimes(refreshedEventCount);
+  });
+});
+
 describe("Status page overview - keeping itself current", () => {
   const navigate: typeof Navigation.navigate = Navigation.navigate;
 

package/Tests/App/StatusPage/StatusPageResourceSearchBox.test.tsx

@@ -2,6 +2,7 @@ import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 import { describe, expect, jest, test } from "@jest/globals";
+import ResourceSearchBox from "../../../../App/FeatureSet/StatusPage/src/Components/Search/ResourceSearchBox";
 
 jest.mock("react-i18next", () => {
   return {
@@ -26,8 +27,6 @@ jest.mock("react-i18next", () => {
   };
 });
 
-import ResourceSearchBox from "../../../../App/FeatureSet/StatusPage/src/Components/Search/ResourceSearchBox";
-
 /*
  * Contract under test - the field that answers "which of these is mine?".
  *
@@ -53,6 +52,7 @@ function renderBox(
       onChange={props.onChange || onChange}
       matchedCount={props.matchedCount === undefined ? 12 : props.matchedCount}
       totalCount={props.totalCount === undefined ? 12 : props.totalCount}
+      isPending={props.isPending}
     />,
   );
 
@@ -96,6 +96,20 @@ describe("ResourceSearchBox", () => {
 });
 
 describe("ResourceSearchBox - the result count", () => {
+  test("marks the previous count busy while the next results are rendering", () => {
+    renderBox({
+      value: "0660",
+      matchedCount: 40,
+      totalCount: 40,
+      isPending: true,
+    });
+
+    expect(input()).toHaveValue("0660");
+    expect(
+      screen.getByTestId("status-page-resource-search-count"),
+    ).toHaveAttribute("aria-busy", "true");
+  });
+
   test("says how much of the page survived the query", () => {
     renderBox({ value: "checkout", matchedCount: 3, totalCount: 42 });
 
@@ -122,6 +136,9 @@ describe("ResourceSearchBox - the result count", () => {
     expect(
       screen.getByTestId("status-page-resource-search-count"),
     ).toHaveAttribute("aria-live", "polite");
+    expect(
+      screen.getByTestId("status-page-resource-search-count"),
+    ).toHaveAttribute("aria-busy", "false");
   });
 
   test("the field points at the count so it is read with the field", () => {

package/Tests/Fixtures/MobilePasskeyUser.json

@@ -0,0 +1,8 @@
+{
+  "_id": "11111111-1111-4111-8111-111111111111",
+  "email": { "_type": "Email", "value": "passkey@example.com" },
+  "name": { "_type": "Name", "value": "Passkey Tester" },
+  "isMasterAdmin": false,
+  "isEmailVerified": true,
+  "isBlocked": false
+}