@oneuptime/common 13.0.3 → 13.0.5

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

@@ -0,0 +1,342 @@
+import { describe, expect, it, jest, beforeEach } from "@jest/globals";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+import ObjectID from "../../../Types/ObjectID";
+import Permission, { UserPermission } from "../../../Types/Permission";
+import FieldType from "../../../UI/Components/Types/FieldType";
+import FormFieldSchemaType from "../../../UI/Components/Forms/Types/FormFieldSchemaType";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * CardModelDetail keeps its own refresher, handed to ModelDetail, and flips it
+ * whenever the page's refresher prop changes. That effect used to run on
+ * mount too, so ModelDetail saw a second refresher value right after its
+ * first render and every card sent two getItem requests on page load.
+ * ModelDetail drops the first response, so nothing looked wrong - it only
+ * wasted a request per card.
+ *
+ * getItem hands back a fresh Probe per call, as the real API does.
+ */
+
+const getItemMock: MockFunction = getJestMockFunction();
+const createOrUpdateMock: MockFunction = getJestMockFunction();
+
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getItem: (...args: Array<any>) => {
+        return getItemMock(...args);
+      },
+      createOrUpdate: (...args: Array<any>) => {
+        return createOrUpdateMock(...args);
+      },
+    },
+  };
+});
+
+const OWNER_PERMISSIONS: Array<Permission> = [
+  Permission.Public,
+  Permission.User,
+  Permission.CurrentUser,
+  Permission.ProjectOwner,
+];
+
+jest.mock("../../../UI/Utils/Permission", () => {
+  return {
+    __esModule: true,
+    default: {
+      getAllPermissions: () => {
+        return OWNER_PERMISSIONS;
+      },
+      getProjectPermissions: () => {
+        return {
+          permissions: OWNER_PERMISSIONS.map((permission: Permission) => {
+            return {
+              permission,
+              labelIds: [],
+              _type: "UserPermission",
+            } as UserPermission;
+          }),
+        };
+      },
+      getGlobalPermissions: () => {
+        return { globalPermissions: OWNER_PERMISSIONS };
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/User", () => {
+  return {
+    __esModule: true,
+    default: {
+      isMasterAdmin: () => {
+        return false;
+      },
+    },
+  };
+});
+
+import ModelDetail from "../../../UI/Components/ModelDetail/ModelDetail";
+import CardModelDetail from "../../../UI/Components/ModelDetail/CardModelDetail";
+import Probe from "../../../Models/DatabaseModels/Probe";
+
+/*
+ * These render real components that fetch, so give the waits enough room to
+ * survive a loaded CI box - the testing-library default of 1s flakes there.
+ */
+const WAIT_TIMEOUT: number = 20000;
+
+const PROBE_ID: string = "11111111-1111-4111-8111-111111111111";
+
+type CountDetailFetchesFunction = () => number;
+
+/*
+ * The edit modal's ModelForm also calls getItem to prefill. ModelDetail's
+ * request is the one that asks for _id; ModelForm's is built from the form
+ * fields only.
+ */
+const countDetailFetches: CountDetailFetchesFunction = (): number => {
+  return getItemMock.mock.calls.filter((call: Array<any>) => {
+    return Boolean(call[0]?.select?.["_id"]);
+  }).length;
+};
+
+type FlushFunction = () => Promise<void>;
+
+// Lets any effect-triggered follow-up fetch fire before asserting on counts.
+const flush: FlushFunction = async (): Promise<void> => {
+  await act(async () => {
+    await new Promise<void>((resolve: () => void) => {
+      setTimeout(resolve, 50);
+    });
+  });
+};
+
+interface ProbeCardProps {
+  refresher?: boolean | undefined;
+  modelDetailRefresher?: boolean | undefined;
+  isEditable?: boolean | undefined;
+}
+
+const ProbeCard: React.FunctionComponent<ProbeCardProps> = (
+  props: ProbeCardProps,
+): React.ReactElement => {
+  return (
+    <CardModelDetail<Probe>
+      name="Probe Details"
+      cardProps={{
+        title: "Probe Details",
+        description: "Here are more details for this probe.",
+      }}
+      {...(props.refresher !== undefined ? { refresher: props.refresher } : {})}
+      isEditable={props.isEditable || false}
+      formFields={[
+        {
+          field: { name: true },
+          title: "Name",
+          fieldType: FormFieldSchemaType.Text,
+          required: true,
+        },
+      ]}
+      modelDetailProps={{
+        modelType: Probe,
+        id: "probe-detail",
+        // A fresh ObjectID per render, exactly like a real page.
+        modelId: new ObjectID(PROBE_ID),
+        ...(props.modelDetailRefresher !== undefined
+          ? { refresher: props.modelDetailRefresher }
+          : {}),
+        fields: [
+          {
+            field: { name: true },
+            title: "Name",
+            fieldType: FieldType.Text,
+          },
+        ],
+      }}
+    />
+  );
+};
+
+describe("CardModelDetail refresher", () => {
+  let probeName: string;
+
+  beforeEach(() => {
+    probeName = "WBHQ";
+    getItemMock.mockReset();
+    getItemMock.mockImplementation((data: any) => {
+      const probe: Probe = new Probe();
+      probe.id = new ObjectID(data.id.toString());
+      probe.name = probeName;
+      return Promise.resolve(probe);
+    });
+    createOrUpdateMock.mockReset();
+    createOrUpdateMock.mockResolvedValue({ data: {} });
+  });
+
+  it("fetches exactly once on mount", async () => {
+    render(<ProbeCard />);
+
+    await screen.findByText("WBHQ", {}, { timeout: WAIT_TIMEOUT });
+    await flush();
+
+    expect(getItemMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("fetches exactly once on mount when the page passes a refresher", async () => {
+    render(<ProbeCard refresher={false} />);
+
+    await screen.findByText("WBHQ", {}, { timeout: WAIT_TIMEOUT });
+    await flush();
+
+    expect(getItemMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("refetches each time the page toggles its refresher", async () => {
+    const { rerender } = render(<ProbeCard refresher={false} />);
+
+    await screen.findByText("WBHQ", {}, { timeout: WAIT_TIMEOUT });
+    await flush();
+    expect(getItemMock).toHaveBeenCalledTimes(1);
+
+    probeName = "WBHQ renamed";
+    rerender(<ProbeCard refresher={true} />);
+
+    await screen.findByText("WBHQ renamed", {}, { timeout: WAIT_TIMEOUT });
+    await flush();
+    expect(getItemMock).toHaveBeenCalledTimes(2);
+
+    probeName = "WBHQ renamed again";
+    rerender(<ProbeCard refresher={false} />);
+
+    await screen.findByText(
+      "WBHQ renamed again",
+      {},
+      { timeout: WAIT_TIMEOUT },
+    );
+    await flush();
+    expect(getItemMock).toHaveBeenCalledTimes(3);
+  });
+
+  it("does not refetch when the page re-renders with the same refresher", async () => {
+    const { rerender } = render(<ProbeCard refresher={true} />);
+
+    await screen.findByText("WBHQ", {}, { timeout: WAIT_TIMEOUT });
+
+    rerender(<ProbeCard refresher={true} />);
+    rerender(<ProbeCard refresher={true} />);
+    await flush();
+
+    expect(getItemMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("refetches after saving the edit modal, and on a page toggle after that", async () => {
+    const { rerender } = render(
+      <ProbeCard isEditable={true} refresher={false} />,
+    );
+
+    await screen.findByText("WBHQ", {}, { timeout: WAIT_TIMEOUT });
+    await flush();
+    expect(countDetailFetches()).toBe(1);
+
+    await userEvent.click(
+      await screen.findByText("Edit Probe", {}, { timeout: WAIT_TIMEOUT }),
+    );
+
+    await waitFor(
+      () => {
+        expect(screen.getByDisplayValue("WBHQ")).toBeDefined();
+      },
+      { timeout: WAIT_TIMEOUT },
+    );
+
+    probeName = "WBHQ saved";
+    await userEvent.click(screen.getByText("Save Changes"));
+
+    await screen.findByText("WBHQ saved", {}, { timeout: WAIT_TIMEOUT });
+    await flush();
+
+    expect(createOrUpdateMock).toHaveBeenCalledTimes(1);
+    expect(countDetailFetches()).toBe(2);
+
+    /*
+     * The save flipped the internal refresher on its own. A page toggle after
+     * that still has to reach ModelDetail as a change.
+     */
+    probeName = "WBHQ toggled";
+    rerender(<ProbeCard isEditable={true} refresher={true} />);
+
+    await screen.findByText("WBHQ toggled", {}, { timeout: WAIT_TIMEOUT });
+    await flush();
+
+    expect(countDetailFetches()).toBe(3);
+  });
+
+  it("follows a refresher passed through modelDetailProps", async () => {
+    /*
+     * modelDetailProps is spread after CardModelDetail's own refresher, so a
+     * refresher there wins. Only that one toggles here, so the refetch can
+     * only have come from it.
+     */
+    const { rerender } = render(
+      <ProbeCard refresher={false} modelDetailRefresher={false} />,
+    );
+
+    await screen.findByText("WBHQ", {}, { timeout: WAIT_TIMEOUT });
+    await flush();
+    expect(getItemMock).toHaveBeenCalledTimes(1);
+
+    probeName = "WBHQ extended";
+    rerender(<ProbeCard refresher={false} modelDetailRefresher={true} />);
+
+    await screen.findByText("WBHQ extended", {}, { timeout: WAIT_TIMEOUT });
+    await flush();
+    expect(getItemMock).toHaveBeenCalledTimes(2);
+  });
+
+  it("adds no fetch of its own on a StrictMode mount", async () => {
+    /*
+     * StrictMode runs mount effects twice, so ModelDetail on its own already
+     * fetches more than once there. The card must not add to that - which a
+     * guard that only skips the effect's first run would.
+     */
+    const { unmount } = render(
+      <React.StrictMode>
+        <ModelDetail<Probe>
+          modelType={Probe}
+          id="probe-detail"
+          modelId={new ObjectID(PROBE_ID)}
+          refresher={false}
+          fields={[
+            {
+              field: { name: true },
+              title: "Name",
+              fieldType: FieldType.Text,
+            },
+          ]}
+        />
+      </React.StrictMode>,
+    );
+
+    await screen.findByText("WBHQ", {}, { timeout: WAIT_TIMEOUT });
+    await flush();
+
+    const bareDetailFetches: number = getItemMock.mock.calls.length;
+    unmount();
+    getItemMock.mockClear();
+
+    render(
+      <React.StrictMode>
+        <ProbeCard refresher={false} />
+      </React.StrictMode>,
+    );
+
+    await screen.findByText("WBHQ", {}, { timeout: WAIT_TIMEOUT });
+    await flush();
+
+    expect(getItemMock).toHaveBeenCalledTimes(bareDetailFetches);
+  });
+});

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

@@ -0,0 +1,79 @@
+import CheckboxElement from "../../../UI/Components/Checkbox/Checkbox";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import { describe, expect, test } from "@jest/globals";
+
+describe("Checkbox", () => {
+  test("uses its visible title as the accessible and clickable label", () => {
+    const onChange: MockFunction = getJestMockFunction();
+
+    render(
+      <CheckboxElement
+        initialValue={false}
+        onChange={onChange}
+        title="Detections"
+      />,
+    );
+
+    const checkbox: HTMLElement = screen.getByRole("checkbox", {
+      name: "Detections",
+    });
+    fireEvent.click(screen.getByText("Detections"));
+
+    expect(checkbox).toBeChecked();
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(true, undefined);
+  });
+
+  test("does not toggle a disabled checkbox when its label is clicked", () => {
+    const onChange: MockFunction = getJestMockFunction();
+
+    render(
+      <CheckboxElement
+        disabled={true}
+        initialValue={true}
+        onChange={onChange}
+        title="Alerts"
+      />,
+    );
+
+    const checkbox: HTMLElement = screen.getByRole("checkbox", {
+      name: "Alerts",
+    });
+    fireEvent.click(screen.getByText("Alerts"));
+
+    expect(checkbox).toBeChecked();
+    expect(checkbox).toBeDisabled();
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  test("gives each rendered description a unique association", () => {
+    render(
+      <>
+        <CheckboxElement description="First description" title="First" />
+        <CheckboxElement description="Second description" title="Second" />
+      </>,
+    );
+
+    const first: HTMLElement = screen.getByRole("checkbox", { name: "First" });
+    const second: HTMLElement = screen.getByRole("checkbox", {
+      name: "Second",
+    });
+    const firstDescriptionId: string =
+      first.getAttribute("aria-describedby") || "";
+    const secondDescriptionId: string =
+      second.getAttribute("aria-describedby") || "";
+
+    expect(firstDescriptionId).not.toBe("");
+    expect(secondDescriptionId).not.toBe("");
+    expect(firstDescriptionId).not.toBe(secondDescriptionId);
+    expect(document.getElementById(firstDescriptionId)).toHaveTextContent(
+      "First description",
+    );
+    expect(document.getElementById(secondDescriptionId)).toHaveTextContent(
+      "Second description",
+    );
+  });
+});

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

@@ -0,0 +1,142 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import React from "react";
+import CopyTextButton from "../../../UI/Components/CopyTextButton/CopyTextButton";
+
+/*
+ * Clipboard.copyToClipboard used to reject when the browser refused the write,
+ * which is what kept this button from saying "Copied!" after a failed copy. It
+ * now resolves `false` instead, so the button has to read the result: a green
+ * tick over text that never reached the clipboard is worse than no feedback,
+ * because the user pastes nothing and does not know why.
+ */
+
+type WriteTextMock = ReturnType<
+  typeof jest.fn<(text: string) => Promise<void>>
+>;
+
+const originalExecCommand: PropertyDescriptor | undefined =
+  Object.getOwnPropertyDescriptor(document, "execCommand");
+
+function installClipboard(writeText: WriteTextMock | undefined): void {
+  Object.defineProperty(navigator, "clipboard", {
+    value: writeText ? { writeText } : undefined,
+    configurable: true,
+  });
+}
+
+function installExecCommand(
+  execCommand: ((command: string) => boolean) | undefined,
+): void {
+  Object.defineProperty(document, "execCommand", {
+    value: execCommand,
+    configurable: true,
+    writable: true,
+  });
+}
+
+async function clickCopy(): Promise<void> {
+  await act(async () => {
+    fireEvent.click(screen.getByRole("button", { name: "Copy" }));
+  });
+}
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  installExecCommand(undefined);
+});
+
+afterEach(() => {
+  cleanup();
+  jest.useRealTimers();
+  if (originalExecCommand) {
+    Object.defineProperty(document, "execCommand", originalExecCommand);
+  } else {
+    installExecCommand(undefined);
+  }
+});
+
+describe("CopyTextButton", () => {
+  test("says Copied! for a moment once the text is on the clipboard", async () => {
+    const writeText: WriteTextMock = jest.fn<(text: string) => Promise<void>>(
+      async (): Promise<void> => {},
+    );
+    installClipboard(writeText);
+
+    render(<CopyTextButton textToBeCopied="trace-4bf92f35" />);
+    await clickCopy();
+
+    expect(writeText).toHaveBeenCalledWith("trace-4bf92f35");
+    expect(screen.getByRole("button", { name: "Copy" })).toHaveTextContent(
+      "Copied!",
+    );
+
+    await act(async () => {
+      jest.advanceTimersByTime(1010);
+    });
+
+    expect(screen.getByRole("button", { name: "Copy" })).toHaveTextContent(
+      "Copy",
+    );
+  });
+
+  test("does not say Copied! when the browser refuses the write", async () => {
+    const writeText: WriteTextMock = jest.fn<(text: string) => Promise<void>>(
+      async (): Promise<void> => {
+        throw new DOMException("Clipboard denied", "NotAllowedError");
+      },
+    );
+    installClipboard(writeText);
+
+    render(<CopyTextButton textToBeCopied="trace-4bf92f35" />);
+    await clickCopy();
+
+    expect(writeText).toHaveBeenCalledWith("trace-4bf92f35");
+    expect(screen.getByRole("button", { name: "Copy" })).not.toHaveTextContent(
+      "Copied!",
+    );
+  });
+
+  test("does not say Copied! when there is no clipboard at all", async () => {
+    installClipboard(undefined);
+
+    render(<CopyTextButton textToBeCopied="trace-4bf92f35" />);
+    await clickCopy();
+
+    expect(screen.getByRole("button", { name: "Copy" })).not.toHaveTextContent(
+      "Copied!",
+    );
+  });
+
+  test("still says Copied! when the legacy copy command succeeds", async () => {
+    installClipboard(undefined);
+    const execCommand: ReturnType<
+      typeof jest.fn<(command: string) => boolean>
+    > = jest.fn<(command: string) => boolean>((): boolean => {
+      return true;
+    });
+    installExecCommand(execCommand);
+
+    render(<CopyTextButton textToBeCopied="trace-4bf92f35" />);
+    await clickCopy();
+
+    expect(execCommand).toHaveBeenCalledWith("copy");
+    expect(screen.getByRole("button", { name: "Copy" })).toHaveTextContent(
+      "Copied!",
+    );
+  });
+});