@oneuptime/common 12.0.13 → 12.0.14

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

@@ -0,0 +1,118 @@
+import MoreMenu from "../../../UI/Components/MoreMenu/MoreMenu";
+import MoreMenuItem from "../../../UI/Components/MoreMenu/MoreMenuItem";
+import "@testing-library/jest-dom";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import { describe, expect, jest, test } from "@jest/globals";
+
+jest.mock("react-i18next", () => {
+  return {
+    useTranslation: () => {
+      return {
+        t: (key: string, options?: { defaultValue?: string }): string => {
+          return options?.defaultValue ?? key;
+        },
+      };
+    },
+  };
+});
+
+/*
+ * The menu mounts closed 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();
+        });
+      });
+    });
+  };
+
+type RenderMenuFunction = () => HTMLElement;
+
+const renderMenuTrigger: RenderMenuFunction = (): HTMLElement => {
+  render(
+    <MoreMenu dataTestId="more-menu-trigger">
+      <MoreMenuItem
+        key="first"
+        text="First action"
+        onClick={() => {
+          return;
+        }}
+      />
+      <MoreMenuItem
+        key="second"
+        text="Second action"
+        onClick={() => {
+          return;
+        }}
+      />
+    </MoreMenu>,
+  );
+
+  return screen.getByTestId("more-menu-trigger");
+};
+
+describe("MoreMenu entrance motion", () => {
+  test("the menu mounts faded and shrunk towards its top-right origin", () => {
+    const trigger: HTMLElement = renderMenuTrigger();
+
+    fireEvent.click(trigger);
+
+    const menu: HTMLElement = screen.getByRole("menu");
+
+    expect(menu).toHaveClass("opacity-0", "scale-95", "origin-top-right");
+    expect(menu).toHaveClass(
+      "transition",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  test("after the entrance frame the menu is opaque with no lingering transform", async () => {
+    const trigger: HTMLElement = renderMenuTrigger();
+
+    fireEvent.click(trigger);
+    await flushEntranceFrame();
+
+    const menu: HTMLElement = screen.getByRole("menu");
+
+    expect(menu).toHaveClass("opacity-100");
+
+    /*
+     * A settled menu carries no transform class at all: a lingering scale
+     * would make it the containing block for position:fixed descendants —
+     * the same invariant Modal pins.
+     */
+    expect(menu.className).not.toMatch(/(^|\s)(sm:)?(scale|translate)-/);
+  });
+
+  test("closing and reopening starts the entrance from the closed state again", async () => {
+    const trigger: HTMLElement = renderMenuTrigger();
+
+    fireEvent.click(trigger);
+    await flushEntranceFrame();
+
+    expect(screen.getByRole("menu")).toHaveClass("opacity-100");
+
+    // Toggle closed, then straight back open.
+    fireEvent.click(trigger);
+    expect(screen.queryByRole("menu")).toBeNull();
+
+    fireEvent.click(trigger);
+
+    expect(screen.getByRole("menu")).toHaveClass("opacity-0", "scale-95");
+
+    await flushEntranceFrame();
+
+    expect(screen.getByRole("menu")).toHaveClass("opacity-100");
+  });
+});

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

@@ -0,0 +1,178 @@
+/*
+ * The dashboard's command palette owns Cmd/Ctrl+K, so the NavBar grew a
+ * `disableCommandKShortcut` prop that stops it registering its own document
+ * keydown for the products menu. These tests pin the contract in BOTH
+ * directions: with the prop the menu must NOT open on Cmd+K (or the palette
+ * and the menu would double-fire on one keystroke), and without the prop the
+ * legacy shortcut must keep working for every other NavBar consumer.
+ */
+
+/*
+ * NavBar and its children translate labels through useTranslateValue, which
+ * needs a live i18next instance. Identity translations keep the test focused
+ * on the shortcut wiring. The factory must sit above the component import.
+ */
+jest.mock("../../../UI/Utils/Translation", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return {
+        translateString: (value: string | undefined) => {
+          return value;
+        },
+        translateValue: (value: unknown) => {
+          return value;
+        },
+      };
+    },
+  };
+});
+
+/*
+ * Navigation's current-route reads come from a location hook that only the
+ * real router wires up (Navigation.getCurrentRoute throws without it). Active
+ * state and navigation are irrelevant here, so stub the statics NavBar and its
+ * items touch.
+ */
+jest.mock("../../../UI/Utils/Navigation", () => {
+  return {
+    __esModule: true,
+    default: {
+      isStartWith: () => {
+        return false;
+      },
+      isOnThisPage: () => {
+        return false;
+      },
+      navigate: () => {},
+    },
+  };
+});
+
+import Navbar, {
+  MoreMenuItem,
+  NavItem,
+} from "../../../UI/Components/Navbar/NavBar";
+import Route from "../../../Types/API/Route";
+import IconProp from "../../../Types/Icon/IconProp";
+import "@testing-library/jest-dom";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import {
+  afterEach,
+  beforeAll,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+
+/*
+ * jsdom does not implement scrollIntoView; the menu modal calls it to keep the
+ * keyboard selection visible. A no-op is all the tests need.
+ */
+beforeAll(() => {
+  Element.prototype.scrollIntoView = (): void => {};
+});
+
+const homeItem: NavItem = {
+  id: "home-nav-bar-item",
+  title: "Home",
+  icon: IconProp.Home,
+  route: new Route("/dashboard/home"),
+  activeRoute: new Route("/dashboard/home"),
+};
+
+const moreMenuItems: Array<MoreMenuItem> = [
+  {
+    title: "Monitors",
+    description: "Monitor anything that can go down.",
+    route: new Route("/dashboard/project-id/monitors"),
+    icon: IconProp.AltGlobe,
+    iconColor: "blue",
+    category: "Essentials",
+  },
+];
+
+function pressCommandK(): void {
+  fireEvent.keyDown(document, { key: "k", metaKey: true });
+}
+
+describe("NavBar Cmd/Ctrl+K gating", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("without the prop, Cmd+K still toggles the products menu (legacy consumers keep their shortcut)", () => {
+    render(<Navbar items={[homeItem]} moreMenuItems={moreMenuItems} />);
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+
+    pressCommandK();
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+
+    // And the same chord closes it again — it is a toggle, not just an opener.
+    pressCommandK();
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  test("Ctrl+K works the same as Cmd+K when the shortcut is enabled", () => {
+    render(<Navbar items={[homeItem]} moreMenuItems={moreMenuItems} />);
+
+    fireEvent.keyDown(document, { key: "k", ctrlKey: true });
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+  });
+
+  test("with disableCommandKShortcut, Cmd+K does NOT open the products menu", () => {
+    render(
+      <Navbar
+        items={[homeItem]}
+        moreMenuItems={moreMenuItems}
+        disableCommandKShortcut={true}
+      />,
+    );
+
+    pressCommandK();
+    fireEvent.keyDown(document, { key: "k", ctrlKey: true });
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  test("with disableCommandKShortcut, the menu still opens from its trigger button", () => {
+    /*
+     * Disabling the shortcut must not disable the menu: the button path is the
+     * remaining way in, so it has to keep working.
+     */
+    render(
+      <Navbar
+        items={[homeItem]}
+        moreMenuItems={moreMenuItems}
+        disableCommandKShortcut={true}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Products"));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+  });
+
+  test("with disableCommandKShortcut, Cmd+K's default is not prevented (the palette may claim it)", () => {
+    render(
+      <Navbar
+        items={[homeItem]}
+        moreMenuItems={moreMenuItems}
+        disableCommandKShortcut={true}
+      />,
+    );
+
+    /*
+     * fireEvent returns false when some handler called preventDefault. With
+     * the NavBar listener unregistered, nothing here may swallow the chord —
+     * the whole point is leaving it free for the command palette's handler.
+     */
+    const defaultAllowed: boolean = fireEvent.keyDown(document, {
+      key: "k",
+      metaKey: true,
+    });
+    expect(defaultAllowed).toBe(true);
+  });
+});

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

@@ -40,13 +40,30 @@ describe("OrderedSateList", () => {
     render(<OrderedStatesList {...props} />);
     expect(props.data).toHaveLength(3);
   });
-  it("renders a ComponentLoader if isLoading prop is true", () => {
+  it("renders a skeleton stack if isLoading is true with nothing to show yet", () => {
     const props: ComponentProps<ItemData> = {
       ...defaultProps,
+      data: [],
       isLoading: true,
     };
     render(<OrderedStatesList {...props} />);
-    expect(screen.getByTestId("bar-loader")).toBeInTheDocument();
+    expect(
+      screen.getByTestId("ordered-states-list-skeleton-loader"),
+    ).toBeInTheDocument();
+  });
+  it("keeps existing states visible, dimmed, while refetching", () => {
+    const props: ComponentProps<ItemData> = {
+      ...defaultProps,
+      isLoading: true,
+    };
+    render(<OrderedStatesList {...props} />);
+    expect(
+      screen.queryByTestId("ordered-states-list-skeleton-loader"),
+    ).toBeNull();
+    expect(screen.getByText("item 1")).toBeInTheDocument();
+    expect(screen.getByTestId("ordered-states-list-content")).toHaveClass(
+      "opacity-60",
+    );
   });
   it("should render an error message if error prop is present", () => {
     const props: ComponentProps<ItemData> = {

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

@@ -0,0 +1,109 @@
+import SideOver, {
+  ComponentProps,
+} from "../../../UI/Components/SideOver/SideOver";
+import "@testing-library/jest-dom";
+import { resetPageScrollLockForTesting } from "../../../UI/Utils/PageScrollLock";
+import { act, render, screen } from "@testing-library/react";
+import React, { ReactElement } from "react";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+
+/*
+ * The panel mounts parked off the right edge and slides in 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();
+        });
+      });
+    });
+  };
+
+type GetPanelFunction = () => HTMLElement;
+
+const getPanel: GetPanelFunction = (): HTMLElement => {
+  return screen.getByTestId("side-over-layer").firstElementChild as HTMLElement;
+};
+
+describe("SideOver entrance motion", () => {
+  const childElement: ReactElement = <div key={0}>child element</div>;
+
+  const props: ComponentProps = {
+    title: "title",
+    description: "description",
+    onClose: jest.fn(),
+    onSubmit: jest.fn(),
+    children: childElement,
+  };
+
+  beforeEach(() => {
+    resetPageScrollLockForTesting();
+    document.body.style.overflow = "";
+    document.body.style.paddingRight = "";
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    resetPageScrollLockForTesting();
+    document.body.style.overflow = "";
+    document.body.style.paddingRight = "";
+  });
+
+  test("the panel mounts parked off the right edge with a transform transition", () => {
+    render(<SideOver {...props} />);
+
+    const panel: HTMLElement = getPanel();
+
+    expect(panel).toHaveClass("translate-x-full");
+    expect(panel).toHaveClass(
+      "transition-transform",
+      "duration-200",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+
+    // The layout contract the rest of the suite pins is untouched.
+    expect(panel).toHaveClass("pointer-events-auto", "w-full");
+  });
+
+  test("after the entrance frame the panel has settled with no lingering transform", async () => {
+    render(<SideOver {...props} />);
+
+    await flushEntranceFrame();
+
+    /*
+     * A settled panel carries no transform class at all: a lingering
+     * translate would make it the containing block for position:fixed
+     * descendants — the same invariant Modal pins.
+     */
+    expect(getPanel().className).not.toMatch(/(^|\s)(sm:)?(scale|translate)-/);
+  });
+
+  test("the close button eases colour changes and carries a focus-visible ring", () => {
+    render(<SideOver {...props} />);
+
+    const closeButton: HTMLElement = screen.getByTestId("close-button");
+
+    expect(closeButton).toHaveClass(
+      "transition-colors",
+      "duration-150",
+      "focus:outline-none",
+      "focus-visible:ring-2",
+      "focus-visible:ring-indigo-500",
+      "focus-visible:ring-offset-2",
+    );
+  });
+});

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

@@ -0,0 +1,71 @@
+import Skeleton, {
+  getSkeletonWidthClass,
+} from "../../../UI/Components/Skeleton/Skeleton";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { describe, expect, test } from "@jest/globals";
+
+describe("Skeleton", () => {
+  test("renders a pulsing gray placeholder block", () => {
+    render(<Skeleton />);
+
+    const skeleton: HTMLElement = screen.getByTestId("skeleton");
+    expect(skeleton).toBeInTheDocument();
+    expect(skeleton).toHaveClass("animate-pulse");
+    expect(skeleton).toHaveClass("rounded");
+    expect(skeleton).toHaveClass("bg-gray-200");
+  });
+
+  /*
+   * The block is decoration; the composing loading state (role="status")
+   * owns the announcement. Without this, a page of skeletons reads to a
+   * screen reader as dozens of empty groups.
+   */
+  test("hides itself from the accessibility tree", () => {
+    render(<Skeleton />);
+
+    expect(screen.getByTestId("skeleton")).toHaveAttribute(
+      "aria-hidden",
+      "true",
+    );
+  });
+
+  test("appends the caller's sizing classes", () => {
+    render(<Skeleton className="h-4 w-24" />);
+
+    const skeleton: HTMLElement = screen.getByTestId("skeleton");
+    expect(skeleton).toHaveClass("h-4");
+    expect(skeleton).toHaveClass("w-24");
+  });
+
+  /*
+   * Width variants must be a pure function of the index - a Math.random
+   * width re-rolls on every render, which flickers on screen and makes the
+   * DOM impossible to assert on.
+   */
+  test("cycles width variants deterministically by index", () => {
+    expect(getSkeletonWidthClass(0)).toBe("w-3/4");
+    expect(getSkeletonWidthClass(1)).toBe("w-1/2");
+    expect(getSkeletonWidthClass(2)).toBe("w-2/3");
+    expect(getSkeletonWidthClass(3)).toBe("w-3/4");
+
+    // Same index, same width - every time.
+    expect(getSkeletonWidthClass(7)).toBe(getSkeletonWidthClass(7));
+  });
+
+  test("applies the cycled width variant when given an index", () => {
+    render(<Skeleton widthVariantIndex={1} dataTestId="indexed-skeleton" />);
+
+    expect(screen.getByTestId("indexed-skeleton")).toHaveClass("w-1/2");
+  });
+
+  test("adds no width class when no index is given", () => {
+    render(<Skeleton />);
+
+    const skeleton: HTMLElement = screen.getByTestId("skeleton");
+    expect(skeleton).not.toHaveClass("w-3/4");
+    expect(skeleton).not.toHaveClass("w-1/2");
+    expect(skeleton).not.toHaveClass("w-2/3");
+  });
+});