@oneuptime/common 13.0.4 → 13.0.5

package/Tests/App/Dashboard/ExceptionBreadcrumbTimeline.test.tsx

@@ -0,0 +1,273 @@
+import "@testing-library/jest-dom";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@testing-library/react";
+import { afterEach, describe, expect, test } from "@jest/globals";
+import * as React from "react";
+import BreadcrumbTimeline, {
+  BreadcrumbEvent,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/Exceptions/BreadcrumbTimeline";
+import { JSONObject } from "../../../Types/JSON";
+
+const EXCEPTION_TIME: Date = new Date(2026, 8, 14, 11, 56, 0, 0);
+
+function event(
+  name: string,
+  offsetMs: number,
+  attributes: JSONObject = {},
+): BreadcrumbEvent {
+  const time: Date = new Date(EXCEPTION_TIME.getTime() + offsetMs);
+  return { name, time, timeUnixNano: time.getTime() * 1000000, attributes };
+}
+
+// Deliberately out of order: the timeline sorts by time.
+const EVENTS: Array<BreadcrumbEvent> = [
+  event("exception", 0, {
+    "exception.type": "InventoryReservationError",
+    "exception.message": "Could not reserve stock",
+    "exception.stacktrace": "at reserveInventory",
+  }),
+  event("http.request", -880, {
+    "http.method": "POST",
+    "http.url": "https://shop.example.com/api/checkout",
+  }),
+  event("db.query", -410, {
+    "db.system": "postgresql",
+    "db.statement": "SELECT * FROM stock WHERE sku = $1",
+  }),
+  event("db.query", -380, {
+    "db.system": "postgresql",
+    "db.statement": "SELECT * FROM stock WHERE sku = $1",
+  }),
+  event("cart.loaded", -640),
+  event("inventory.version_mismatch warning", -120, { level: "warning" }),
+];
+
+function rows(): Array<HTMLElement> {
+  return screen.queryAllByTestId("breadcrumb-row");
+}
+
+function summaries(): Array<string> {
+  return rows().map((row: HTMLElement) => {
+    return within(row).getByTestId("breadcrumb-summary").textContent || "";
+  });
+}
+
+function renderTimeline(
+  props: Partial<React.ComponentProps<typeof BreadcrumbTimeline>> = {},
+): void {
+  render(
+    <BreadcrumbTimeline
+      events={EVENTS}
+      exceptionTime={EXCEPTION_TIME}
+      {...props}
+    />,
+  );
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("BreadcrumbTimeline", () => {
+  test("lists events oldest to newest, folding identical neighbours", () => {
+    renderTimeline();
+
+    expect(summaries()).toEqual([
+      "POST https://shop.example.com/api/checkout",
+      "cart.loaded",
+      "SELECT * FROM stock WHERE sku = $1",
+      "inventory.version_mismatch warning",
+      "Could not reserve stock",
+    ]);
+    expect(
+      within(rows()[2]!).getByTestId("breadcrumb-count"),
+    ).toHaveTextContent("×2");
+    expect(rows()[4]).toHaveAttribute("data-category", "EXCEPTION");
+  });
+
+  test("describes the window before the exception", () => {
+    renderTimeline();
+
+    expect(
+      screen.getByText("6 events in the 880 ms before the exception"),
+    ).toBeInTheDocument();
+  });
+
+  test("shows times relative to the exception, and clock times on request", () => {
+    renderTimeline();
+
+    const times: () => Array<string> = (): Array<string> => {
+      return rows().map((row: HTMLElement) => {
+        return within(row).getByTestId("breadcrumb-time").textContent || "";
+      });
+    };
+
+    expect(times()).toEqual([
+      "-880 ms",
+      "-640 ms",
+      "-410 ms → -380 ms",
+      "-120 ms",
+      "at exception",
+    ]);
+
+    fireEvent.click(screen.getByTestId("breadcrumb-time-format-clock"));
+
+    expect(times()[0]).toBe("11:55:59.120");
+    expect(times()[4]).toBe("11:56:00.000");
+  });
+
+  test("uses clock times and no switch without an exception time", () => {
+    render(<BreadcrumbTimeline events={EVENTS} />);
+
+    expect(
+      screen.queryByTestId("breadcrumb-time-format"),
+    ).not.toBeInTheDocument();
+    expect(within(rows()[0]!).getByTestId("breadcrumb-time")).toHaveTextContent(
+      "11:55:59.120",
+    );
+    expect(screen.getByText("6 events")).toBeInTheDocument();
+  });
+
+  test("filters by category and clears back to everything", () => {
+    renderTimeline();
+
+    expect(screen.getByTestId("breadcrumb-filter-all")).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+
+    fireEvent.click(screen.getByTestId("breadcrumb-filter-DB"));
+
+    expect(summaries()).toEqual(["SELECT * FROM stock WHERE sku = $1"]);
+    expect(screen.getByTestId("breadcrumb-filter-DB")).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+    expect(
+      screen.getByText("2 of 6 events match the filters"),
+    ).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("breadcrumb-filter-EXCEPTION"));
+    expect(summaries()).toHaveLength(2);
+
+    fireEvent.click(screen.getByTestId("breadcrumb-filter-all"));
+    expect(summaries()).toHaveLength(5);
+  });
+
+  test("expands a row to its attributes, hiding noisy ones", () => {
+    renderTimeline();
+
+    const exceptionRow: HTMLElement = rows()[4]!;
+    const toggle: HTMLElement = within(exceptionRow).getAllByRole("button")[0]!;
+
+    expect(toggle).toHaveAttribute("aria-expanded", "false");
+    fireEvent.click(toggle);
+    expect(toggle).toHaveAttribute("aria-expanded", "true");
+
+    const attributes: HTMLElement = within(exceptionRow).getByTestId(
+      "breadcrumb-attributes",
+    );
+    expect(attributes).toHaveTextContent("exception.type");
+    expect(attributes).toHaveTextContent("InventoryReservationError");
+    expect(attributes).not.toHaveTextContent("exception.stacktrace");
+
+    // Clicking inside the details must not fold the row.
+    fireEvent.click(attributes);
+    expect(toggle).toHaveAttribute("aria-expanded", "true");
+
+    /*
+     * The details are not inside the toggle, so their copy buttons are
+     * separate controls and not part of the toggle's accessible name.
+     */
+    expect(toggle).not.toContainElement(attributes);
+    expect(within(toggle).queryAllByRole("button")).toHaveLength(0);
+    expect(within(attributes).getAllByRole("button").length).toBeGreaterThan(0);
+
+    fireEvent.click(toggle);
+    expect(
+      within(exceptionRow).queryByTestId("breadcrumb-detail"),
+    ).not.toBeInTheDocument();
+  });
+
+  test("a folded row lists each identical event's time", () => {
+    renderTimeline();
+
+    const dbRow: HTMLElement = rows()[2]!;
+    fireEvent.click(within(dbRow).getAllByRole("button")[0]!);
+
+    expect(within(dbRow).getByText("2 identical events")).toBeInTheDocument();
+    expect(within(dbRow).getByTestId("breadcrumb-detail")).toHaveTextContent(
+      "-410 ms",
+    );
+  });
+
+  test("rows are keyboard operable", () => {
+    renderTimeline();
+
+    const toggle: HTMLElement = within(rows()[0]!).getAllByRole("button")[0]!;
+
+    fireEvent.keyDown(toggle, { key: "Enter" });
+    expect(toggle).toHaveAttribute("aria-expanded", "true");
+
+    fireEvent.keyDown(toggle, { key: " " });
+    expect(toggle).toHaveAttribute("aria-expanded", "false");
+  });
+
+  test("shows the event name once when it is also the detail", () => {
+    render(
+      <BreadcrumbTimeline
+        events={[
+          event("InventoryReservationError", 0, {
+            "exception.type": "InventoryReservationError",
+            "exception.message": "Could not reserve stock",
+          }),
+        ]}
+        exceptionTime={EXCEPTION_TIME}
+      />,
+    );
+
+    const row: HTMLElement = rows()[0]!;
+    expect(
+      within(row).getAllByText("InventoryReservationError", { exact: true }),
+    ).toHaveLength(1);
+    expect(within(row).getByTestId("breadcrumb-summary")).toHaveTextContent(
+      "Could not reserve stock",
+    );
+  });
+
+  test("an event with no attributes is not clickable", () => {
+    renderTimeline();
+
+    expect(within(rows()[1]!).queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  test("keeps only the latest events and says so", () => {
+    renderTimeline({ maxEvents: 3 });
+
+    expect(summaries()).toEqual([
+      "SELECT * FROM stock WHERE sku = $1",
+      "inventory.version_mismatch warning",
+      "Could not reserve stock",
+    ]);
+    expect(screen.getByText(/latest 3 of 6/)).toBeInTheDocument();
+  });
+
+  test("shows an empty state without events", () => {
+    renderTimeline({ events: [] });
+
+    expect(screen.getByTestId("breadcrumbs-empty")).toHaveTextContent(
+      "No breadcrumbs",
+    );
+  });
+
+  test("hides the filter when every event is the same category", () => {
+    renderTimeline({ events: [EVENTS[2]!, EVENTS[3]!] });
+
+    expect(screen.queryByTestId("breadcrumb-filters")).not.toBeInTheDocument();
+  });
+});

package/Tests/App/Dashboard/ExceptionDetailSideMenu.test.tsx

@@ -0,0 +1,176 @@
+import { afterEach, beforeEach, describe, expect, test } from "@jest/globals";
+import "@testing-library/jest-dom";
+import { cleanup, screen } from "@testing-library/react";
+import * as React from "react";
+import ExceptionViewSideMenu from "../../../../App/FeatureSet/Dashboard/src/Pages/Exceptions/View/SideMenu";
+import ObjectID from "../../../Types/ObjectID";
+import {
+  DESKTOP_WIDTH,
+  MOBILE_WIDTH,
+  MenuLink,
+  PROJECT_ID,
+  goTo,
+  hrefsInMenu,
+  iconCountIn,
+  isExpanded,
+  linksIn,
+  mobileSummaryText,
+  renderMenu,
+  sectionTitlesInOrder,
+  setViewportWidth,
+  titlesInMenu,
+} from "./SideMenuHarness";
+
+const EXCEPTION_ID: string = "0193c0de-3333-4aaa-8bbb-000000000003";
+const EXCEPTION_PATH: string = `/dashboard/${PROJECT_ID}/exceptions/${EXCEPTION_ID}`;
+
+interface DetailPage {
+  title: string;
+  section: string;
+  path: string;
+}
+
+const DETAIL_PAGES: ReadonlyArray<DetailPage> = [
+  { title: "Overview", section: "Investigate", path: EXCEPTION_PATH },
+  {
+    title: "Stack Trace",
+    section: "Investigate",
+    path: `${EXCEPTION_PATH}/stack-trace`,
+  },
+  {
+    title: "Occurrences",
+    section: "Investigate",
+    path: `${EXCEPTION_PATH}/occurrences`,
+  },
+  {
+    title: "Context",
+    section: "Investigate",
+    path: `${EXCEPTION_PATH}/context`,
+  },
+  {
+    title: "Logs",
+    section: "Investigate",
+    path: `${EXCEPTION_PATH}/logs`,
+  },
+  {
+    title: "AI Assistance",
+    section: "Resolve",
+    path: `${EXCEPTION_PATH}/ai-assistance`,
+  },
+  {
+    title: "Settings",
+    section: "Manage",
+    path: `${EXCEPTION_PATH}/settings`,
+  },
+];
+
+async function renderExceptionMenu(): Promise<void> {
+  await renderMenu(
+    <ExceptionViewSideMenu modelId={new ObjectID(EXCEPTION_ID)} />,
+  );
+}
+
+describe("exception detail side menu", () => {
+  beforeEach(() => {
+    setViewportWidth(DESKTOP_WIDTH);
+    goTo(EXCEPTION_PATH);
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("renders the investigation, resolution, and management sections in order", async () => {
+    await renderExceptionMenu();
+
+    expect(sectionTitlesInOrder()).toEqual([
+      "Investigate",
+      "Resolve",
+      "Manage",
+    ]);
+  });
+
+  test("places each detail destination in its intended section", async () => {
+    await renderExceptionMenu();
+
+    expect(linksIn("Investigate")).toEqual([
+      { title: "Overview", href: EXCEPTION_PATH },
+      { title: "Stack Trace", href: `${EXCEPTION_PATH}/stack-trace` },
+      { title: "Occurrences", href: `${EXCEPTION_PATH}/occurrences` },
+      { title: "Context", href: `${EXCEPTION_PATH}/context` },
+      { title: "Logs", href: `${EXCEPTION_PATH}/logs` },
+    ]);
+    expect(linksIn("Resolve")).toEqual([
+      {
+        title: "AI Assistance",
+        href: `${EXCEPTION_PATH}/ai-assistance`,
+      },
+    ]);
+    expect(linksIn("Manage")).toEqual([
+      { title: "Settings", href: `${EXCEPTION_PATH}/settings` },
+    ]);
+  });
+
+  test("lists seven unique, fully populated destinations", async () => {
+    await renderExceptionMenu();
+
+    const hrefs: Array<string> = hrefsInMenu();
+    const titles: Array<string> = titlesInMenu();
+
+    expect(hrefs).toHaveLength(DETAIL_PAGES.length);
+    expect(hrefs).toEqual(Array.from(new Set(hrefs)));
+    expect(titles).toEqual(Array.from(new Set(titles)));
+
+    hrefs.forEach((href: string) => {
+      expect(href).toContain(EXCEPTION_PATH);
+      expect(href).not.toContain(":projectId");
+      expect(href).not.toContain(":modelId");
+      expect(href).not.toContain(":id");
+    });
+  });
+
+  test.each(DETAIL_PAGES)(
+    "marks $title active on desktop",
+    async (page: DetailPage) => {
+      goTo(page.path);
+      await renderExceptionMenu();
+
+      const activeLink: HTMLElement = screen.getByRole("link", {
+        name: page.title,
+      });
+
+      expect(activeLink).toHaveAttribute("href", page.path);
+      expect(activeLink).toHaveClass(
+        "bg-indigo-50",
+        "text-indigo-700",
+        "font-semibold",
+      );
+      expect(isExpanded(page.section)).toBe(true);
+      expect(document.querySelectorAll("a.bg-indigo-50")).toHaveLength(1);
+    },
+  );
+
+  test.each(DETAIL_PAGES)(
+    "the mobile summary identifies $section / $title",
+    async (page: DetailPage) => {
+      setViewportWidth(MOBILE_WIDTH);
+      goTo(page.path);
+      await renderExceptionMenu();
+
+      expect(mobileSummaryText()).toContain(`${page.section} / ${page.title}`);
+    },
+  );
+
+  test("every destination keeps a visible label and icon", async () => {
+    await renderExceptionMenu();
+
+    sectionTitlesInOrder().forEach((sectionTitle: string) => {
+      const links: Array<MenuLink> = linksIn(sectionTitle);
+
+      expect(iconCountIn(sectionTitle)).toBe(links.length);
+      links.forEach((link: MenuLink) => {
+        expect(link.title.trim()).not.toBe("");
+      });
+    });
+  });
+});