@oneuptime/common 12.0.30 → 12.0.31

package/Tests/UI/Components/ModelTable/BaseModelTableDeleteAndEmptyStates.test.tsx

@@ -0,0 +1,341 @@
+import "@testing-library/jest-dom";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import React from "react";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+
+/*
+ * Two sentences a table shows constantly, both of which used to say less than
+ * they knew.
+ *
+ * The per-row delete confirmation said "Are you sure you want to delete this
+ * monitor?" - equally true of the row that was clicked and of the twenty
+ * either side of it, which is exactly the wrong moment to be vague. The table
+ * has the row in hand when it renders that dialog.
+ *
+ * And an empty table said "No monitor" whether the project had nothing in it
+ * or a search had simply missed, so a typo in the search box was
+ * indistinguishable from an empty account.
+ */
+
+jest.mock("../../../../UI/Utils/Permission", () => {
+  return {
+    __esModule: true,
+    default: {
+      getAllPermissions: (): Array<unknown> => {
+        return [];
+      },
+      getProjectPermissions: (): null => {
+        return null;
+      },
+      getGlobalPermissions: (): null => {
+        return null;
+      },
+    },
+  };
+});
+
+jest.mock("../../../../UI/Utils/User", () => {
+  return {
+    __esModule: true,
+    default: {
+      isMasterAdmin: (): boolean => {
+        return true;
+      },
+      getUserId: (): null => {
+        return null;
+      },
+    },
+  };
+});
+
+jest.mock("../../../../UI/Utils/Translation", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return {
+        translateString: (value: string | undefined): string | undefined => {
+          return value;
+        },
+        translateValue: (value: unknown): unknown => {
+          return value;
+        },
+      };
+    },
+  };
+});
+
+import BaseModelTable, {
+  BaseTableCallbacks,
+  ComponentProps as BaseModelTableProps,
+} from "../../../../UI/Components/ModelTable/BaseModelTable";
+import TableFilterUrlState from "../../../../UI/Utils/TableFilterUrlState";
+import PermissionGate from "../../../../UI/Utils/PermissionGate";
+import FieldType from "../../../../UI/Components/Types/FieldType";
+import Monitor from "../../../../Models/DatabaseModels/Monitor";
+import Incident from "../../../../Models/DatabaseModels/Incident";
+import ListResult from "../../../../Types/BaseDatabase/ListResult";
+import { JSONObject } from "../../../../Types/JSON";
+
+const MONITOR_ROWS: Array<JSONObject> = [
+  { _id: "monitor-1", name: "Checkout API", description: "Payments" },
+  { _id: "monitor-2", name: "Billing Worker", description: "Invoices" },
+];
+
+// Incidents key on `title`, not `name` - the deriver has to know both.
+const INCIDENT_ROWS: Array<JSONObject> = [
+  { _id: "incident-1", title: "Checkout is down", description: "Sev1" },
+];
+
+// Neither `name` nor `title`, so the generic wording has to survive.
+const UNNAMED_ROWS: Array<JSONObject> = [
+  { _id: "monitor-9", description: "No name on this one" },
+];
+
+interface TableOptions {
+  rows?: Array<JSONObject> | undefined;
+  initialFilterData?: JSONObject | undefined;
+  nameColumnTitle?: string | undefined;
+  nameColumnField?: string | undefined;
+  singularName?: string | undefined;
+  pluralName?: string | undefined;
+  noItemsMessage?: string | undefined;
+}
+
+type MakePropsFunction = (
+  options: TableOptions,
+) => BaseModelTableProps<Monitor>;
+
+const makeProps: MakePropsFunction = (
+  options: TableOptions,
+): BaseModelTableProps<Monitor> => {
+  const rows: Array<JSONObject> = options.rows ?? MONITOR_ROWS;
+
+  const callbacks: BaseTableCallbacks<Monitor> = {
+    deleteItem: async (): Promise<void> => {
+      return undefined;
+    },
+    getModelFromJSON: (item: JSONObject): Monitor => {
+      return item as unknown as Monitor;
+    },
+    getJSONFromModel: (item: Monitor): JSONObject => {
+      return item as unknown as JSONObject;
+    },
+    addSlugToSelect: (select: unknown): unknown => {
+      return select;
+    },
+    getList: async (data: {
+      skip: number;
+      limit: number;
+    }): Promise<ListResult<Monitor>> => {
+      return {
+        data: rows as unknown as Array<Monitor>,
+        count: rows.length,
+        skip: data.skip,
+        limit: data.limit,
+      };
+    },
+    toJSONArray: (): Array<JSONObject> => {
+      return [];
+    },
+    updateById: async (): Promise<void> => {
+      return undefined;
+    },
+    showCreateEditModal: (): React.ReactElement => {
+      return <div data-testid="create-edit-modal" />;
+    },
+  } as unknown as BaseTableCallbacks<Monitor>;
+
+  return {
+    modelType: options.nameColumnField === "title" ? Incident : Monitor,
+    id: "monitors-table",
+    name: "Monitors",
+    singularName: options.singularName ?? "Monitor",
+    pluralName: options.pluralName ?? "Monitors",
+    userPreferencesKey: "monitors-delete-table",
+    urlStateKey: "monitors-delete-table",
+    columns: [
+      {
+        field: { [options.nameColumnField ?? "name"]: true },
+        title: options.nameColumnTitle ?? "Name",
+        type: FieldType.Text,
+      },
+      {
+        field: { description: true },
+        title: "Description",
+        type: FieldType.LongText,
+      },
+    ],
+    filters: [],
+    cardProps: { title: "Monitors", description: "All monitors" },
+    isCreateable: false,
+    isEditable: false,
+    isDeleteable: true,
+    isViewable: false,
+    noItemsMessage: options.noItemsMessage,
+    initialFilterData: options.initialFilterData,
+    callbacks: callbacks,
+  } as unknown as BaseModelTableProps<Monitor>;
+};
+
+type RenderTableFunction = (
+  options?: TableOptions | undefined,
+) => ReturnType<typeof render>;
+
+const renderTable: RenderTableFunction = (
+  options?: TableOptions | undefined,
+): ReturnType<typeof render> => {
+  return render(<BaseModelTable<Monitor> {...makeProps(options || {})} />);
+};
+
+type FindButtonsFunction = (label: string) => Array<HTMLButtonElement>;
+
+const findButtons: FindButtonsFunction = (
+  label: string,
+): Array<HTMLButtonElement> => {
+  return Array.from(
+    document.querySelectorAll<HTMLButtonElement>("button"),
+  ).filter((button: HTMLButtonElement) => {
+    return (button.textContent || "").trim().startsWith(label);
+  });
+};
+
+beforeEach(() => {
+  PermissionGate.clearPermissionPropsCache();
+  window.history.replaceState(window.history.state, "", "/dashboard/monitors");
+  TableFilterUrlState.resetClaimedKeys();
+  window.localStorage.clear();
+});
+
+afterEach(() => {
+  cleanup();
+  jest.restoreAllMocks();
+});
+
+describe("per-row delete confirmation", () => {
+  test("names the row that was clicked", async () => {
+    renderTable();
+
+    await waitFor(() => {
+      expect(findButtons("Delete").length).toBeGreaterThan(0);
+    });
+
+    // Second row, to prove the dialog follows the click and not the first row.
+    fireEvent.click(findButtons("Delete")[1]!);
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId("confirm-modal-description"),
+      ).toBeInTheDocument();
+    });
+
+    expect(screen.getByTestId("confirm-modal-description")).toHaveTextContent(
+      'Are you sure you want to delete "Billing Worker"?',
+    );
+    expect(screen.getByTestId("confirm-modal-description")).toHaveTextContent(
+      "This action cannot be undone",
+    );
+  });
+
+  test("uses a title-keyed row's title", async () => {
+    renderTable({
+      rows: INCIDENT_ROWS,
+      nameColumnField: "title",
+      nameColumnTitle: "Title",
+      singularName: "Incident",
+      pluralName: "Incidents",
+    });
+
+    await waitFor(() => {
+      expect(findButtons("Delete").length).toBeGreaterThan(0);
+    });
+
+    fireEvent.click(findButtons("Delete")[0]!);
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId("confirm-modal-description"),
+      ).toBeInTheDocument();
+    });
+
+    expect(screen.getByTestId("confirm-modal-description")).toHaveTextContent(
+      'Are you sure you want to delete "Checkout is down"?',
+    );
+  });
+
+  test("falls back to the generic wording when the row has no name to give", async () => {
+    renderTable({ rows: UNNAMED_ROWS });
+
+    await waitFor(() => {
+      expect(findButtons("Delete").length).toBeGreaterThan(0);
+    });
+
+    fireEvent.click(findButtons("Delete")[0]!);
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId("confirm-modal-description"),
+      ).toBeInTheDocument();
+    });
+
+    expect(screen.getByTestId("confirm-modal-description")).toHaveTextContent(
+      "Are you sure you want to delete this monitor?",
+    );
+  });
+});
+
+describe("empty table message", () => {
+  test('says "yet", pluralised, when there is simply nothing here', async () => {
+    renderTable({ rows: [] });
+
+    await waitFor(() => {
+      expect(screen.getByText("No monitors yet.")).toBeInTheDocument();
+    });
+  });
+
+  test("still lets a caller supply its own empty-state copy", async () => {
+    renderTable({ rows: [], noItemsMessage: "Connect your first monitor." });
+
+    await waitFor(() => {
+      expect(
+        screen.getByText("Connect your first monitor."),
+      ).toBeInTheDocument();
+    });
+  });
+
+  /*
+   * The other half of the same branch: an active filter means the emptiness is
+   * the filter's doing, not the project's, and the caller's "create your first
+   * one" copy would be the wrong thing to offer someone whose filter just
+   * missed.
+   */
+  test("says the filter missed, when a filter is applied", async () => {
+    renderTable({
+      rows: [],
+      initialFilterData: { name: "nothing-matches-this" },
+      noItemsMessage: "Connect your first monitor.",
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByText("No monitors match your search or filters."),
+      ).toBeInTheDocument();
+    });
+
+    expect(
+      screen.queryByText("Connect your first monitor."),
+    ).not.toBeInTheDocument();
+  });
+});

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

@@ -88,7 +88,7 @@ describe("OrderedSateList", () => {
       onRefreshClick: jest.fn(),
     };
     render(<OrderedStatesList {...props} />);
-    const refreshButton: HTMLElement = screen.getByRole("refresh-button");
+    const refreshButton: HTMLElement = screen.getByTestId("refresh-button");
     refreshButton.click();
     expect(props.onRefreshClick).toHaveBeenCalled();
   });
@@ -110,8 +110,8 @@ describe("OrderedSateList", () => {
     };
     render(<OrderedStatesList {...props} />);
     expect(screen.getByText("Failed to load data")).toBeInTheDocument();
-    expect(screen.getByRole("refresh-button")).toBeInTheDocument();
-    screen.getByRole("refresh-button").click();
+    expect(screen.getByTestId("refresh-button")).toBeInTheDocument();
+    screen.getByTestId("refresh-button").click();
     expect(props.onRefreshClick).toHaveBeenCalled();
   });
   it("renders ErrorMessage with default message and callback when data is empty and noItemsMessage is not defined", () => {
@@ -125,8 +125,8 @@ describe("OrderedSateList", () => {
     expect(
       screen.getByText(`No ${props.singularLabel.toLowerCase()}`),
     ).toBeInTheDocument();
-    expect(screen.getByRole("refresh-button")).toBeInTheDocument();
-    screen.getByRole("refresh-button").click();
+    expect(screen.getByTestId("refresh-button")).toBeInTheDocument();
+    screen.getByTestId("refresh-button").click();
     expect(props.onRefreshClick).toHaveBeenCalled();
   });
   it("should render custom title element provided by getTitleElement function", () => {

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

@@ -901,7 +901,7 @@ describe("PendingProjectInvitations", () => {
         expect(screen.getByTestId("invitations-error")).toBeInTheDocument();
       });
 
-      fireEvent.click(screen.getByRole("refresh-button"));
+      fireEvent.click(screen.getByTestId("refresh-button"));
 
       await waitFor(() => {
         expect(getInvitationCards()).toHaveLength(1);

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

@@ -0,0 +1,195 @@
+import "@testing-library/jest-dom";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import * as React from "react";
+import Table 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";
+
+/*
+ * Two things a table owes anyone not driving it with a mouse on a wide screen.
+ *
+ * Sorting was mouse-only: the handler sat on the <th>, which is not focusable
+ * and does not answer Enter or Space, even though aria-sort was already
+ * telling assistive technology the column WAS sortable. It sits on a button
+ * inside the header cell now.
+ *
+ * And `hideOnMobile` - about 200 column declarations across the product say
+ * it - was honoured by the header, the skeleton rows, and the desktop row, but
+ * not by the mobile card, which is the one layout it exists for.
+ */
+
+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 },
+  // No key, so this one is not sortable and must stay a plain cell.
+  { title: "Notes", type: FieldType.Text },
+];
+
+const data: Array<Row> = [
+  { _id: "1", name: "Alpha", status: "Up" },
+  { _id: "2", name: "Beta", status: "Down" },
+];
+
+interface RenderTableOptions {
+  sortBy?: keyof Row | null | undefined;
+  sortOrder?: SortOrder | undefined;
+  onSortChanged?:
+    | ((sortBy: keyof Row | null, sortOrder: SortOrder) => void)
+    | undefined;
+}
+
+type RenderTableFunction = (options?: RenderTableOptions | undefined) => void;
+
+const renderTable: RenderTableFunction = (
+  options?: RenderTableOptions | undefined,
+): void => {
+  render(
+    <Table<Row>
+      id="test-table"
+      data={data}
+      columns={columns}
+      currentPageNumber={1}
+      totalItemsCount={data.length}
+      itemsOnPage={10}
+      error=""
+      isLoading={false}
+      singularLabel="Monitor"
+      pluralLabel="Monitors"
+      sortOrder={options?.sortOrder ?? SortOrder.Ascending}
+      sortBy={options?.sortBy ?? null}
+      onSortChanged={options?.onSortChanged ?? (() => {})}
+      onNavigateToPage={() => {}}
+    />,
+  );
+};
+
+/*
+ * 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("sortable column headers", () => {
+  test("a sortable header is a real button, so it is focusable", () => {
+    renderTable();
+
+    const sortButton: HTMLElement = screen.getByRole("button", {
+      name: "Name",
+    });
+
+    expect(sortButton.tagName).toBe("BUTTON");
+    expect(sortButton).toHaveAttribute("type", "button");
+
+    sortButton.focus();
+    expect(sortButton).toHaveFocus();
+  });
+
+  test("activating the header button sorts the column", () => {
+    const sortCalls: Array<[keyof Row | null, SortOrder]> = [];
+
+    renderTable({
+      onSortChanged: (sortBy: keyof Row | null, sortOrder: SortOrder) => {
+        sortCalls.push([sortBy, sortOrder]);
+      },
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Name" }));
+
+    expect(sortCalls).toEqual([["name", SortOrder.Descending]]);
+  });
+
+  test("the sort direction still round-trips", () => {
+    const sortCalls: Array<[keyof Row | null, SortOrder]> = [];
+
+    renderTable({
+      sortBy: "name",
+      sortOrder: SortOrder.Descending,
+      onSortChanged: (sortBy: keyof Row | null, sortOrder: SortOrder) => {
+        sortCalls.push([sortBy, sortOrder]);
+      },
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: /Name/ }));
+
+    expect(sortCalls).toEqual([["name", SortOrder.Ascending]]);
+  });
+
+  test("a column that cannot be sorted gets no button", () => {
+    renderTable();
+
+    expect(
+      screen.queryByRole("button", { name: "Notes" }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByText("Notes")).toBeInTheDocument();
+  });
+
+  test("the header still announces sort state to assistive technology", () => {
+    renderTable({ sortBy: "name", sortOrder: SortOrder.Ascending });
+
+    const headers: Array<HTMLElement> = screen.getAllByRole("columnheader");
+    const nameHeader: HTMLElement | undefined = headers.find(
+      (header: HTMLElement) => {
+        return header.textContent?.includes("Name");
+      },
+    );
+
+    expect(nameHeader).toHaveAttribute("aria-sort", "ascending");
+  });
+});
+
+describe("hideOnMobile columns", () => {
+  test("the mobile card leaves out columns marked hideOnMobile", () => {
+    setViewportWidth(375);
+    renderTable();
+
+    // "Name" is shown on every breakpoint.
+    expect(screen.getAllByText("Alpha").length).toBeGreaterThan(0);
+
+    /*
+     * "Status" is hideOnMobile. Its header is already filtered out on mobile;
+     * the row used to render it anyway, which is the regression this pins.
+     */
+    expect(screen.queryByText("Up")).not.toBeInTheDocument();
+    expect(screen.queryByText("Down")).not.toBeInTheDocument();
+  });
+
+  test("the desktop row is untouched", () => {
+    setViewportWidth(1280);
+    renderTable();
+
+    expect(screen.getByText("Up")).toBeInTheDocument();
+    expect(screen.getByText("Down")).toBeInTheDocument();
+  });
+});