@oneuptime/common 12.0.15 → 12.0.17

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

@@ -0,0 +1,248 @@
+import { describe, expect, jest, test, beforeEach } from "@jest/globals";
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import * as React from "react";
+import { ReactElement } from "react";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * The saved-views control is mounted by every ModelTable in the dashboard that
+ * passes a tableId - around 180 of them - and it fetches the user's saved views
+ * on mount, before anybody has gone looking for one.
+ *
+ * In issue #3305 that fetch was refused for a member whose team granted only
+ * "Monitor Viewer", and the component answered by rendering a ConfirmModal
+ * titled "Something went wrong..." over the page. A control nobody had touched
+ * took down the table it was sitting on, on every list in the product.
+ *
+ * The permission list that caused it is fixed. What is pinned here is the
+ * blast radius: a failed list load costs the control and nothing else, while a
+ * failure from an action the user actually took still gets a dialog.
+ */
+
+jest.mock("react-i18next", () => {
+  return {
+    useTranslation: () => {
+      return {
+        t: (key: string, opts?: { defaultValue?: string }): string => {
+          return opts?.defaultValue ?? key;
+        },
+      };
+    },
+  };
+});
+
+/*
+ * Both halves of the hook. ConfirmModal calls `translateValue`, and a mock that
+ * omits it makes the modal throw on render - which would let the assertion
+ * below pass for the wrong reason against a component that still shows it.
+ */
+jest.mock("../../../UI/Utils/Translation", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return {
+        translateString: (value: string | undefined): string | undefined => {
+          return value;
+        },
+        translateValue: (value: unknown): unknown => {
+          return value;
+        },
+      };
+    },
+  };
+});
+
+const getListMock: MockFunction = getJestMockFunction();
+
+/*
+ * The arrow wrappers are load bearing: jest.mock is hoisted above the compiled
+ * requires, so naming the mocks directly would capture them before their
+ * initializers have run.
+ */
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getList: (...args: Array<any>) => {
+        return getListMock(...args);
+      },
+      deleteItem: () => {
+        return Promise.resolve();
+      },
+    },
+  };
+});
+
+const projectId: string = "e6c4b9a0-1a2b-4c3d-8e5f-6a7b8c9d0e1f";
+
+jest.mock("../../../UI/Utils/Project", () => {
+  return {
+    __esModule: true,
+    default: {
+      getCurrentProjectId: () => {
+        return {
+          toString: () => {
+            return projectId;
+          },
+        };
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/User", () => {
+  return {
+    __esModule: true,
+    default: {
+      getUserId: () => {
+        return {
+          toString: () => {
+            return "c1d2e3f4-a5b6-4c7d-8e9f-0a1b2c3d4e5f";
+          },
+        };
+      },
+      isMasterAdmin: (): boolean => {
+        return false;
+      },
+    },
+  };
+});
+
+import TableViewElement from "../../../UI/Components/ModelTable/TableView";
+import Monitor from "../../../Models/DatabaseModels/Monitor";
+
+const PERMISSION_ERROR: string =
+  "You do not have permissions to read Table View. You need one of these permissions: Project Owner, Project Admin, Project Member, Viewer, Read Table View";
+
+type RenderControlFunction = (options?: {
+  hasSavableState?: boolean;
+}) => ReactElement;
+
+const renderControl: RenderControlFunction = (options?: {
+  hasSavableState?: boolean;
+}): ReactElement => {
+  return (
+    <TableViewElement<Monitor>
+      tableId="all-monitors-table"
+      onViewChange={() => {
+        // the parent's business, not this test's
+      }}
+      currentQuery={
+        options?.hasSavableState ? ({ isDisabled: true } as any) : ({} as any)
+      }
+      currentSortOrder={null}
+      currentSortBy={null}
+      currentItemsOnPage={10}
+      tableView={null}
+    />
+  );
+};
+
+describe("Saved views when the list cannot be loaded", () => {
+  beforeEach(() => {
+    getListMock.mockReset();
+  });
+
+  /*
+   * Waiting for the message to land before asserting is the load-bearing part.
+   * The list request is issued during mount, so a test that only waits for the
+   * call to have happened runs its assertions before the rejection is handled,
+   * and passes against a component that goes on to render the modal a tick
+   * later.
+   */
+  test("a refused list does not put a dialog over the page", async () => {
+    getListMock.mockRejectedValue(new Error(PERMISSION_ERROR) as never);
+
+    render(renderControl({ hasSavableState: true }));
+
+    fireEvent.click(await screen.findByText("Saved Views"));
+
+    await waitFor(() => {
+      expect(screen.getByText(PERMISSION_ERROR)).toBeInTheDocument();
+    });
+
+    /*
+     * The exact dialog the user in #3305 got, on every table they opened.
+     */
+    expect(screen.queryByTestId("modal")).not.toBeInTheDocument();
+    expect(
+      screen.queryByText("Something went wrong..."),
+    ).not.toBeInTheDocument();
+
+    // And the control it belongs to is still on the page.
+    expect(screen.getByText("Saved Views")).toBeInTheDocument();
+  });
+
+  /*
+   * The failure is not swallowed either - it is moved inside the control it
+   * belongs to, so somebody who opens the menu is told why it is empty.
+   */
+  test("the reason is kept, inside the control", async () => {
+    getListMock.mockRejectedValue(new Error(PERMISSION_ERROR) as never);
+
+    render(renderControl({ hasSavableState: true }));
+
+    // The menu renders its contents only once opened.
+    fireEvent.click(await screen.findByText("Saved Views"));
+
+    await waitFor(() => {
+      expect(screen.getByText(PERMISSION_ERROR)).toBeInTheDocument();
+    });
+
+    expect(screen.getByText(PERMISSION_ERROR)).toBeInTheDocument();
+    expect(screen.queryByTestId("modal")).not.toBeInTheDocument();
+  });
+
+  /*
+   * A user with nothing to save and no views to show never learns anything
+   * went wrong, because there was nothing to offer them either way.
+   */
+  test("nothing renders at all when there was nothing to offer", async () => {
+    getListMock.mockRejectedValue(new Error(PERMISSION_ERROR) as never);
+
+    const { container } = render(renderControl({ hasSavableState: false }));
+
+    await waitFor(() => {
+      expect(getListMock).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      expect(container).toBeEmptyDOMElement();
+    });
+  });
+
+  test("a successful load still lists the views", async () => {
+    getListMock.mockResolvedValue({
+      data: [
+        {
+          name: "My view",
+          id: {
+            toString: () => {
+              return "view-1";
+            },
+          },
+        },
+      ],
+      count: 1,
+      skip: 0,
+      limit: 10,
+    } as never);
+
+    render(renderControl({ hasSavableState: true }));
+
+    await waitFor(() => {
+      expect(screen.getByText("Saved Views")).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByText("Saved Views"));
+
+    await waitFor(() => {
+      expect(screen.getByText("My view")).toBeInTheDocument();
+    });
+
+    expect(
+      screen.queryByText("Something went wrong..."),
+    ).not.toBeInTheDocument();
+  });
+});

package/Tests/UI/Types/UseComponentOutsideClick.test.tsx

@@ -0,0 +1,226 @@
+import useComponentOutsideClick from "../../../UI/Types/UseComponentOutsideClick";
+import "@testing-library/jest-dom";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import React, { FunctionComponent, ReactElement } from "react";
+import { afterEach, describe, expect, test } from "@jest/globals";
+
+/*
+ * The hook behind almost every popover in the product — NavBar, SideMenu,
+ * MoreMenu, ProjectPicker, NotificationBell, the column selector, both
+ * saved-views dropdowns — and until now it had no tests of its own. It got
+ * them when a change to it shipped a regression that all 4,604 tests in
+ * Common/Tests/UI were blind to: a right-click inside an open panel left the
+ * "this gesture started inside" flag armed, and the next click that arrived
+ * without a mousedown of its own — a keyboard user pressing Enter on a control
+ * elsewhere, or code calling element.click() — was swallowed, leaving the
+ * panel open over the page.
+ *
+ * So the cases here are written as a pair of opposing pressures: the drag-out
+ * gesture the suppression exists to protect, and every route by which a
+ * dismissal must still get through.
+ */
+
+const PANEL_TEXT: string = "panel contents";
+
+const Harness: FunctionComponent = (): ReactElement => {
+  const { ref, isComponentVisible } = useComponentOutsideClick(true);
+
+  return (
+    <div>
+      <div ref={ref}>
+        {isComponentVisible ? (
+          <div>
+            <p>{PANEL_TEXT}</p>
+            <input aria-label="inside box" />
+          </div>
+        ) : null}
+      </div>
+      {/*
+       * A real control the user could tab to and activate. It deliberately
+       * does nothing of its own, so a test that finds the panel closed after
+       * activating it is reading the hook and not this button.
+       */}
+      <button type="button">outside control</button>
+    </div>
+  );
+};
+
+function isOpen(): boolean {
+  return screen.queryByText(PANEL_TEXT) !== null;
+}
+
+function insideBox(): HTMLElement {
+  return screen.getByLabelText("inside box");
+}
+
+function outsideControl(): HTMLElement {
+  return screen.getByRole("button", { name: "outside control" });
+}
+
+/*
+ * A real pointer click always carries detail >= 1; jsdom defaults it to 0,
+ * which is the value a keyboard activation or element.click() produces. The
+ * distinction is load-bearing here, so it is never left to the default.
+ */
+function pointerClick(target: HTMLElement | Document): void {
+  fireEvent.click(target as HTMLElement, { detail: 1 });
+}
+
+describe("useComponentOutsideClick — dismissing on an outside click", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("a plain click outside closes the component", () => {
+    render(<Harness />);
+
+    fireEvent.mouseDown(document.body);
+    pointerClick(document.body);
+
+    expect(isOpen()).toBe(false);
+  });
+
+  test("a click inside leaves it open", () => {
+    render(<Harness />);
+
+    fireEvent.mouseDown(insideBox());
+    pointerClick(insideBox());
+
+    expect(isOpen()).toBe(true);
+  });
+});
+
+describe("useComponentOutsideClick — a drag that leaves the component", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("selecting text inside and releasing outside does not dismiss", () => {
+    render(<Harness />);
+
+    /*
+     * The browser fires the click on the common ancestor of press and
+     * release, which is outside. Dismissing on that discards whatever the
+     * user was selecting — a half-typed search, most often.
+     */
+    fireEvent.mouseDown(insideBox());
+    pointerClick(document.body);
+
+    expect(isOpen()).toBe(true);
+  });
+
+  test("the reprieve lasts exactly one click", () => {
+    render(<Harness />);
+
+    fireEvent.mouseDown(insideBox());
+    pointerClick(document.body);
+    expect(isOpen()).toBe(true);
+
+    // The next outside click is nobody's drag, and must land.
+    pointerClick(document.body);
+
+    expect(isOpen()).toBe(false);
+  });
+});
+
+describe("useComponentOutsideClick — presses that never become a click", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("a right-click inside does not arm the suppression", () => {
+    render(<Harness />);
+
+    /*
+     * Right and middle presses fire mousedown and then go to contextmenu or
+     * auxclick — no click ever arrives to spend the flag. Deliberately NO
+     * outside mousedown before the activation below: one of those would reset
+     * the flag by itself and the case would pass either way.
+     */
+    fireEvent.mouseDown(insideBox(), { button: 2 });
+    fireEvent.contextMenu(insideBox());
+
+    fireEvent.click(outsideControl(), { detail: 0 });
+
+    expect(isOpen()).toBe(false);
+  });
+
+  test("a middle-click inside does not arm the suppression", () => {
+    render(<Harness />);
+
+    fireEvent.mouseDown(insideBox(), { button: 1 });
+
+    fireEvent.click(outsideControl(), { detail: 0 });
+
+    expect(isOpen()).toBe(false);
+  });
+
+  test("an outside press of its own also clears a stale flag", () => {
+    render(<Harness />);
+
+    fireEvent.mouseDown(insideBox(), { button: 2 });
+    fireEvent.contextMenu(insideBox());
+
+    /*
+     * The second line of defence, and the reason the two cases above avoid it:
+     * a fresh press anywhere re-answers "did this gesture start inside", so an
+     * ordinary click that follows one is never suppressed.
+     */
+    fireEvent.mouseDown(document.body);
+    pointerClick(document.body);
+
+    expect(isOpen()).toBe(false);
+  });
+
+  test("a keyboard-activated control outside still dismisses", () => {
+    render(<Harness />);
+
+    // An ordinary primary press inside, whose release never became a click.
+    fireEvent.mouseDown(insideBox());
+
+    /*
+     * Enter on a focused control dispatches a click with no mousedown and a
+     * detail of 0. No press can be responsible for it, so no press may
+     * suppress it — this is the case the regression landed on.
+     */
+    fireEvent.click(outsideControl(), { detail: 0 });
+
+    expect(isOpen()).toBe(false);
+  });
+
+  test("a programmatic element.click() outside still dismisses", () => {
+    render(<Harness />);
+
+    fireEvent.mouseDown(insideBox());
+
+    // What LogExport does with a temporary anchor to start a download.
+    const anchor: HTMLAnchorElement = document.createElement("a");
+    document.body.appendChild(anchor);
+
+    // Not a fireEvent, so React needs to be told to flush what it triggers.
+    act(() => {
+      anchor.click();
+    });
+
+    expect(isOpen()).toBe(false);
+
+    anchor.remove();
+  });
+
+  test("a press inside whose release never lands leaves nothing armed", () => {
+    render(<Harness />);
+
+    // Dragged into a native drag, or the target unmounted mid-gesture.
+    fireEvent.mouseDown(insideBox());
+
+    fireEvent.click(outsideControl(), { detail: 0 });
+
+    expect(isOpen()).toBe(false);
+  });
+});