@oneuptime/common 12.0.13 → 12.0.14

package/Tests/UI/Components/TableLoadingStates.test.tsx

@@ -0,0 +1,279 @@
+import "@testing-library/jest-dom";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import { cleanup, render, screen } from "@testing-library/react";
+import * as React from "react";
+import Table, { BulkActionProps } from "../../../UI/Components/Table/Table";
+import Columns from "../../../UI/Components/Table/Types/Columns";
+import FieldType from "../../../UI/Components/Types/FieldType";
+import SortOrder from "../../../Types/BaseDatabase/SortOrder";
+import { ButtonStyleType } from "../../../UI/Components/Button/Button";
+
+/*
+ * The table's four loading-adjacent faces, and the order they win in.
+ *
+ * A first load has nothing to show, so it shows the SHAPE of what is coming:
+ * skeleton rows whose cell structure mirrors the header exactly (drag handle,
+ * bulk checkbox, one cell per visible column). A refetch DOES have something
+ * to show - the parent never clears `data` while fetching - so the stale rows
+ * stay on screen, dimmed and unclickable, instead of being torn down to
+ * placeholders. Error and empty only speak once loading has finished; a stale
+ * error surfacing mid-refetch over live rows was the bug this priority
+ * prevents.
+ */
+
+jest.mock("react-i18next", () => {
+  return {
+    useTranslation: () => {
+      return {
+        t: (key: string, opts?: { defaultValue?: string }): string => {
+          return opts?.defaultValue ?? key;
+        },
+      };
+    },
+  };
+});
+
+interface Row {
+  _id?: string | undefined;
+  name?: string | undefined;
+  status?: string | undefined;
+}
+
+const columns: Columns<Row> = [
+  { title: "Name", type: FieldType.Text, key: "name" },
+  { title: "Status", type: FieldType.Text, key: "status", hideOnMobile: true },
+];
+
+const data: Array<Row> = [
+  { _id: "1", name: "Alpha", status: "Up" },
+  { _id: "2", name: "Beta", status: "Down" },
+];
+
+const bulkActions: BulkActionProps<Row> = {
+  buttons: [
+    {
+      title: "Archive",
+      buttonStyleType: ButtonStyleType.NORMAL,
+      onClick: (): Promise<void> => {
+        return Promise.resolve();
+      },
+    },
+  ],
+};
+
+interface RenderTableOptions {
+  data?: Array<Row> | undefined;
+  isLoading?: boolean | undefined;
+  error?: string | undefined;
+  itemsOnPage?: number | undefined;
+  enableDragAndDrop?: boolean | undefined;
+  withBulkActions?: boolean | undefined;
+  noItemsMessage?: string | undefined;
+}
+
+type RenderTableFunction = (options: RenderTableOptions) => void;
+
+const renderTable: RenderTableFunction = (
+  options: RenderTableOptions,
+): void => {
+  render(
+    <Table<Row>
+      id="test-table"
+      data={options.data ?? data}
+      columns={columns}
+      currentPageNumber={1}
+      totalItemsCount={(options.data ?? data).length}
+      itemsOnPage={options.itemsOnPage ?? 10}
+      error={options.error ?? ""}
+      isLoading={options.isLoading ?? false}
+      singularLabel="Monitor"
+      pluralLabel="Monitors"
+      sortOrder={SortOrder.Ascending}
+      sortBy={null}
+      onSortChanged={() => {}}
+      onNavigateToPage={() => {}}
+      noItemsMessage={options.noItemsMessage}
+      enableDragAndDrop={options.enableDragAndDrop}
+      matchBulkSelectedItemByField={options.withBulkActions ? "_id" : undefined}
+      bulkActions={options.withBulkActions ? bulkActions : undefined}
+      bulkSelectedItems={options.withBulkActions ? [] : undefined}
+    />,
+  );
+};
+
+/*
+ * The table decides mobile vs desktop from window.innerWidth at mount
+ * (< 768 = mobile). jsdom defaults to 1024, so desktop is the baseline and
+ * mobile tests must set the width BEFORE rendering.
+ */
+const setViewportWidth: (width: number) => void = (width: number): void => {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    writable: true,
+    value: width,
+  });
+};
+
+afterEach(() => {
+  cleanup();
+  setViewportWidth(1024);
+});
+
+describe("first load (nothing to show yet)", () => {
+  test("renders skeleton rows instead of a spinner", () => {
+    renderTable({ isLoading: true, data: [] });
+
+    expect(screen.getByTestId("table-skeleton-loader")).toBeInTheDocument();
+    expect(screen.queryByTestId("component-loader")).toBeNull();
+  });
+
+  test("announces itself as a polite status with a Loading label", () => {
+    renderTable({ isLoading: true, data: [] });
+
+    const loader: HTMLElement = screen.getByTestId("table-skeleton-loader");
+    expect(loader).toHaveAttribute("role", "status");
+    expect(loader).toHaveAttribute("aria-live", "polite");
+    expect(loader).toHaveTextContent("Loading");
+  });
+
+  test("renders one skeleton row per item on the page", () => {
+    renderTable({ isLoading: true, data: [], itemsOnPage: 5 });
+
+    const loader: HTMLElement = screen.getByTestId("table-skeleton-loader");
+    expect(loader.querySelectorAll("tr")).toHaveLength(5);
+  });
+
+  test("caps skeleton rows at 10 even for a 25-row page", () => {
+    renderTable({ isLoading: true, data: [], itemsOnPage: 25 });
+
+    const loader: HTMLElement = screen.getByTestId("table-skeleton-loader");
+    expect(loader.querySelectorAll("tr")).toHaveLength(10);
+  });
+
+  test("a plain table gets one skeleton cell per column", () => {
+    renderTable({ isLoading: true, data: [] });
+
+    const loader: HTMLElement = screen.getByTestId("table-skeleton-loader");
+    const firstRow: Element = loader.querySelectorAll("tr")[0] as Element;
+    expect(firstRow.querySelectorAll("td")).toHaveLength(columns.length);
+  });
+
+  /*
+   * The header renders extra leading cells for the drag handle and the bulk
+   * checkbox. Skeleton rows must mirror them or every placeholder sits one
+   * or two columns to the left of the header it is standing in for.
+   */
+  test("drag and bulk each add their leading skeleton cell", () => {
+    renderTable({
+      isLoading: true,
+      data: [],
+      enableDragAndDrop: true,
+      withBulkActions: true,
+    });
+
+    const loader: HTMLElement = screen.getByTestId("table-skeleton-loader");
+    const firstRow: Element = loader.querySelectorAll("tr")[0] as Element;
+    expect(firstRow.querySelectorAll("td")).toHaveLength(columns.length + 2);
+  });
+
+  test("skeleton cells carry the real rows' padding classes", () => {
+    renderTable({ isLoading: true, data: [] });
+
+    const loader: HTMLElement = screen.getByTestId("table-skeleton-loader");
+    const cells: NodeListOf<Element> = loader
+      .querySelectorAll("tr")[0]!
+      .querySelectorAll("td");
+
+    // Same classes as TableRow's cells: last cell gets pr-6, the rest pr-3.
+    expect(cells[0]).toHaveClass("py-4", "pl-4", "pr-3", "whitespace-nowrap");
+    expect(cells[cells.length - 1]).toHaveClass("pr-6");
+  });
+});
+
+describe("mobile first load", () => {
+  test("renders a card-shaped stack, not table markup inside a div", () => {
+    setViewportWidth(500);
+    renderTable({ isLoading: true, data: [], itemsOnPage: 5 });
+
+    const loader: HTMLElement = screen.getByTestId("table-skeleton-loader");
+    expect(loader.tagName).toBe("DIV");
+    /*
+     * The old loader emitted a <tbody> into the mobile <div> wrapper -
+     * invalid HTML that React happened to tolerate. Nothing table-shaped
+     * may remain on mobile.
+     */
+    expect(document.querySelector("tbody")).toBeNull();
+    expect(loader.querySelectorAll(":scope > div")).toHaveLength(5);
+  });
+
+  test("hideOnMobile columns get no placeholder line", () => {
+    setViewportWidth(500);
+    renderTable({ isLoading: true, data: [], itemsOnPage: 3 });
+
+    const loader: HTMLElement = screen.getByTestId("table-skeleton-loader");
+    const firstCard: Element = loader.querySelectorAll(
+      ":scope > div",
+    )[0] as Element;
+
+    // One label/value group per VISIBLE column: Status is hideOnMobile.
+    expect(firstCard.querySelectorAll(".flex.flex-col")).toHaveLength(1);
+  });
+});
+
+describe("refetch with rows already on screen", () => {
+  test("keeps the real rows and shows no skeletons", () => {
+    renderTable({ isLoading: true });
+
+    expect(screen.getByText("Alpha")).toBeInTheDocument();
+    expect(screen.getByText("Beta")).toBeInTheDocument();
+    expect(screen.queryByTestId("table-skeleton-loader")).toBeNull();
+  });
+
+  test("dims the stale rows and blocks pointer events on them", () => {
+    renderTable({ isLoading: true });
+
+    const content: HTMLElement = screen.getByTestId("table-content");
+    expect(content).toHaveClass("opacity-60");
+    expect(content).toHaveClass("pointer-events-none");
+  });
+
+  test("an idle table is neither dimmed nor blocked", () => {
+    renderTable({});
+
+    const content: HTMLElement = screen.getByTestId("table-content");
+    expect(content).not.toHaveClass("opacity-60");
+    expect(content).not.toHaveClass("pointer-events-none");
+  });
+
+  /*
+   * Loading outranks error: mid-refetch the error prop can only be stale
+   * (the parent clears it before every fetch), so surfacing it over live
+   * rows would report a failure that is not happening.
+   */
+  test("a stale error does not interrupt the dimmed rows", () => {
+    renderTable({ isLoading: true, error: "stale failure" });
+
+    expect(screen.getByText("Alpha")).toBeInTheDocument();
+    expect(screen.queryByText("stale failure")).toBeNull();
+  });
+});
+
+describe("after loading finishes", () => {
+  test("an error replaces the rows", () => {
+    renderTable({ isLoading: false, error: "Something went wrong" });
+
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+    expect(screen.queryByTestId("table-skeleton-loader")).toBeNull();
+  });
+
+  test("an empty result shows the no-items message, not skeletons", () => {
+    renderTable({
+      isLoading: false,
+      data: [],
+      noItemsMessage: "No monitors here",
+    });
+
+    expect(screen.getByText("No monitors here")).toBeInTheDocument();
+    expect(screen.queryByTestId("table-skeleton-loader")).toBeNull();
+  });
+});

package/Tests/UI/Components/Tabs.test.tsx

@@ -69,6 +69,30 @@ describe("Tabs", () => {
     expect(getByTestId("tab-tab2")).toHaveClass(activeClass);
   });
 
+  test("tabs ease colour changes and carry a focus-visible ring", () => {
+    const onTabChange: MockFunction = getJestMockFunction();
+
+    const { getByTestId } = render(
+      <Tabs tabs={tabs} onTabChange={onTabChange} />,
+    );
+
+    /*
+     * Selected and unselected tabs share the base classes, so asserting one
+     * of each covers the whole strip. The ring is focus-visible (not focus:)
+     * so mouse clicks do not flash it.
+     */
+    for (const tabTestId of ["tab-tab1", "tab-tab2"]) {
+      expect(getByTestId(tabTestId)).toHaveClass(
+        "transition-colors",
+        "duration-150",
+        "focus:outline-none",
+        "focus-visible:ring-2",
+        "focus-visible:ring-indigo-500",
+        "focus-visible:ring-offset-2",
+      );
+    }
+  });
+
   test("it should handle empty tabs array gracefully", () => {
     const tabs: Array<Tab> = [];
     const onTabChange: MockFunction = getJestMockFunction();

package/Tests/UI/Components/Toast.test.tsx

@@ -1,19 +1,77 @@
 import Toast, { ToastType } from "../../../UI/Components/Toast/Toast";
 import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";
 import * as React from "react";
-import { describe, expect, test } from "@jest/globals";
+import { describe, expect, jest, test } from "@jest/globals";
+
+/*
+ * The toast mounts closed (faded, nudged down) and opens on the next
+ * animation frame, so anything asserting the settled look has to let that
+ * frame run first — the same choreography Modal.test.tsx flushes.
+ */
+type FlushEntranceFrameFunction = () => Promise<void>;
+
+const flushEntranceFrame: FlushEntranceFrameFunction =
+  async (): Promise<void> => {
+    await act(async () => {
+      await new Promise<void>((resolve: () => void) => {
+        requestAnimationFrame(() => {
+          resolve();
+        });
+      });
+    });
+  };
 
 describe("Test for Toast.tsx", () => {
-  test("should render the component", () => {
+  test("should render the toast card", () => {
     render(
       <Toast type={ToastType.SUCCESS} title="Spread" description="Love" />,
     );
-    expect(screen.getByTestId("toast")).toHaveClass(
-      "pointer-events-none fixed z-40 top-0 left-0 right-0  flex items-end px-4 py-6 sm:items-start sm:p-6",
+
+    /*
+     * The card itself, not a fixed strip: positioning now belongs to the ONE
+     * region container ToastInit renders (see ToastStacking.test.tsx), so
+     * stacked toasts no longer paint on top of each other at top-0.
+     */
+    const toast: HTMLElement = screen.getByTestId("toast");
+
+    expect(toast).toHaveClass(
+      "pointer-events-auto",
+      "w-full",
+      "max-w-sm",
+      "rounded-lg",
+      "bg-white",
+      "shadow-lg",
     );
+    expect(toast).not.toHaveClass("fixed");
+  });
+
+  test("enters by fading and lifting in from a closed state", async () => {
+    render(
+      <Toast type={ToastType.SUCCESS} title="Spread" description="Love" />,
+    );
+
+    const toast: HTMLElement = screen.getByTestId("toast");
+
+    expect(toast).toHaveClass("opacity-0", "translate-y-2");
+
+    await flushEntranceFrame();
+
+    expect(toast).toHaveClass("opacity-100");
+    /*
+     * A settled toast carries no transform class — a lingering translate
+     * would make the card the containing block for position:fixed
+     * descendants.
+     */
+    expect(toast.className).not.toMatch(/(^|\s)(scale|translate)-/);
   });
 
   test("should have close button", () => {
@@ -59,16 +117,81 @@ describe("Test for Toast.tsx", () => {
     render(<Toast type={ToastType.NORMAL} title="Spread" description="Love" />);
     expect(screen.getByTestId("toast-icon")).toHaveClass("text-gray-400");
   });
-  test("simulates button click and sets the state to flase, closing the toast", async () => {
+
+  test("clicking close fades the toast out and only then unmounts it", async () => {
     const user: UserEvent = userEvent.setup();
 
     render(
       <Toast type={ToastType.SUCCESS} title="Spread" description="Love" />,
     );
 
+    await flushEntranceFrame();
+
     const closeButton: HTMLButtonElement = screen.getByTestId("close-button");
     await user.click(closeButton);
 
-    expect(screen.queryByTestId("toast")).toBeFalsy();
+    /*
+     * The exit runs as a fade with a delayed unmount, so immediately after
+     * the click the card is still mounted, at zero opacity.
+     */
+    expect(screen.getByTestId("toast")).toHaveClass("opacity-0");
+
+    await waitFor(() => {
+      expect(screen.queryByTestId("toast")).toBeFalsy();
+    });
+  });
+
+  /*
+   * Owners (ToastInit) may hand the toast a NEW onClose identity on any
+   * re-render. The exit timer must not restart because of that — it keys off
+   * isLeaving alone and reads the latest onClose through a ref — otherwise a
+   * re-render mid-fade would leave an invisible pointer-events-auto card
+   * intercepting clicks past the original deadline.
+   */
+  test("a re-render with a new onClose mid-exit neither restarts the timer nor calls a stale handler", () => {
+    jest.useFakeTimers();
+
+    try {
+      const staleOnClose: () => void = jest.fn();
+      const latestOnClose: () => void = jest.fn();
+
+      const { rerender } = render(
+        <Toast
+          type={ToastType.SUCCESS}
+          title="Spread"
+          description="Love"
+          onClose={staleOnClose}
+        />,
+      );
+
+      fireEvent.click(screen.getByTestId("close-button"));
+
+      // 100ms into the 150ms exit fade the owner re-renders the toast…
+      act(() => {
+        jest.advanceTimersByTime(100);
+      });
+      rerender(
+        <Toast
+          type={ToastType.SUCCESS}
+          title="Spread"
+          description="Love"
+          onClose={latestOnClose}
+        />,
+      );
+
+      // …the card is still mid-fade…
+      expect(screen.getByTestId("toast")).toHaveClass("opacity-0");
+
+      // …and the ORIGINAL 150ms deadline still unmounts it 50ms later.
+      act(() => {
+        jest.advanceTimersByTime(50);
+      });
+
+      expect(screen.queryByTestId("toast")).toBeFalsy();
+      expect(latestOnClose).toHaveBeenCalledTimes(1);
+      expect(staleOnClose).not.toHaveBeenCalled();
+    } finally {
+      jest.useRealTimers();
+    }
   });
 });

package/Tests/UI/Components/ToastStacking.test.tsx

@@ -0,0 +1,198 @@
+import ToastLayout, {
+  ShowToastNotification,
+} from "../../../UI/Components/Toast/ToastInit";
+import { ToastType } from "../../../UI/Components/Toast/Toast";
+import "@testing-library/jest-dom";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import React from "react";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+
+/*
+ * ToastInit used to render every toast as its own fixed strip at top-0 (the
+ * index prop that was supposed to offset them was never passed), so stacked
+ * toasts painted on top of each other and only the last one was readable.
+ * The contract pinned here: ONE fixed region, cards stacked in a flex column
+ * in insertion order.
+ */
+
+type ShowToastFunction = (title: string, onClose?: () => void) => void;
+
+const showToast: ShowToastFunction = (
+  title: string,
+  onClose?: () => void,
+): void => {
+  act(() => {
+    ShowToastNotification({
+      title,
+      description: `${title} description`,
+      type: ToastType.SUCCESS,
+      onClose,
+    });
+  });
+};
+
+describe("Toast stacking", () => {
+  afterEach(() => {
+    cleanup();
+    jest.clearAllMocks();
+  });
+
+  test("renders one fixed region that keeps its slot in the z-index ladder", () => {
+    render(<ToastLayout />);
+
+    const region: HTMLElement = screen.getByTestId("toast-region");
+
+    /*
+     * z-40 is deliberate: above SideOver (z-30), below Modal (z-50). The
+     * region itself takes no pointer events; only the cards inside do.
+     */
+    expect(region).toHaveClass(
+      "pointer-events-none",
+      "fixed",
+      "z-40",
+      "top-0",
+      "left-0",
+      "right-0",
+    );
+    expect(region).toHaveClass("sm:items-start", "sm:p-6");
+    expect(region).toHaveAttribute("aria-live", "assertive");
+  });
+
+  test("stacks multiple toasts in one region, in insertion order", () => {
+    render(<ToastLayout />);
+
+    showToast("First");
+    showToast("Second");
+    showToast("Third");
+
+    const toasts: Array<HTMLElement> = screen.getAllByTestId("toast");
+
+    expect(toasts).toHaveLength(3);
+
+    // All three cards live inside the ONE region, not three fixed strips.
+    const region: HTMLElement = screen.getByTestId("toast-region");
+
+    for (const toast of toasts) {
+      expect(region).toContainElement(toast);
+      expect(toast).not.toHaveClass("fixed");
+    }
+
+    // The stack is a flex column with a gap, so cards never overlap.
+    const stack: HTMLElement = toasts[0]?.parentElement as HTMLElement;
+
+    expect(stack).toHaveClass("flex", "flex-col", "gap-4");
+    expect(toasts[1]?.parentElement).toBe(stack);
+    expect(toasts[2]?.parentElement).toBe(stack);
+
+    const titles: Array<string | null> = screen
+      .getAllByTestId("title")
+      .map((title: HTMLElement) => {
+        return title.textContent;
+      });
+
+    expect(titles).toEqual(["First", "Second", "Third"]);
+  });
+
+  test("dismissing one toast removes only that toast and calls its onClose", async () => {
+    const onCloseFirst: () => void = jest.fn();
+
+    render(<ToastLayout />);
+
+    showToast("First", onCloseFirst);
+    showToast("Second");
+
+    const closeButtons: Array<HTMLElement> =
+      screen.getAllByTestId("close-button");
+
+    expect(closeButtons).toHaveLength(2);
+
+    fireEvent.click(closeButtons[0] as HTMLElement);
+
+    /*
+     * The exit fade delays the unmount, so removal is awaited rather than
+     * asserted synchronously.
+     */
+    await waitFor(() => {
+      expect(screen.getAllByTestId("toast")).toHaveLength(1);
+    });
+
+    expect(onCloseFirst).toHaveBeenCalledTimes(1);
+    expect(screen.getByTestId("title")).toHaveTextContent("Second");
+  });
+
+  test("a toast dispatched after a dismissal still stacks below the survivors", async () => {
+    render(<ToastLayout />);
+
+    showToast("First");
+    showToast("Second");
+
+    fireEvent.click(screen.getAllByTestId("close-button")[0] as HTMLElement);
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId("toast")).toHaveLength(1);
+    });
+
+    showToast("Third");
+
+    const titles: Array<string | null> = screen
+      .getAllByTestId("title")
+      .map((title: HTMLElement) => {
+        return title.textContent;
+      });
+
+    expect(titles).toEqual(["Second", "Third"]);
+  });
+
+  /*
+   * Regression: dispatching a toast re-renders the whole stack, and the
+   * layout used to hand every card a freshly created onClose on each render.
+   * A dismissed card mid-exit-fade saw the new prop, cleared its unmount
+   * timer, and re-armed it — so a burst of toasts could keep an invisible
+   * pointer-events-auto card alive indefinitely, intercepting clicks.
+   */
+  test("a toast dispatched during another toast's exit fade does not restart its unmount timer", () => {
+    jest.useFakeTimers();
+
+    try {
+      const onCloseFirst: () => void = jest.fn();
+
+      render(<ToastLayout />);
+
+      showToast("First", onCloseFirst);
+
+      fireEvent.click(screen.getByTestId("close-button"));
+
+      // 100ms into the 150ms exit fade a second toast re-renders the stack.
+      act(() => {
+        jest.advanceTimersByTime(100);
+      });
+      showToast("Second");
+
+      expect(screen.getAllByTestId("toast")).toHaveLength(2);
+
+      // The ORIGINAL 150ms deadline holds: 50ms later the first card is gone.
+      act(() => {
+        jest.advanceTimersByTime(50);
+      });
+
+      expect(onCloseFirst).toHaveBeenCalledTimes(1);
+
+      const titles: Array<string | null> = screen
+        .getAllByTestId("title")
+        .map((title: HTMLElement) => {
+          return title.textContent;
+        });
+
+      expect(titles).toEqual(["Second"]);
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+});