@oneuptime/common 12.0.6 → 12.0.7

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

@@ -0,0 +1,214 @@
+import ModelDelete from "../../../UI/Components/ModelDelete/ModelDelete";
+import ModelAPI from "../../../UI/Utils/ModelAPI/ModelAPI";
+import Project from "../../../Models/DatabaseModels/Project";
+import ObjectID from "../../../Types/ObjectID";
+import { describe, expect, it, beforeEach } from "@jest/globals";
+import { getJestSpyOn } from "../../Spy";
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import React, { ReactElement } from "react";
+
+/*
+ * ModelDelete is the confirmation behind every "Delete <thing>" card in the
+ * product. Two things were added to it so the project delete can ask why the
+ * customer is leaving: content inside the confirmation, and a delete action
+ * the caller supplies. Both are optional, and the ~60 existing call sites pass
+ * neither - so the default path is pinned here just as hard as the new one.
+ */
+
+const MODEL_ID: ObjectID = new ObjectID("11111111-1111-4111-8111-111111111111");
+
+type RenderDeleteFunction = (props?: {
+  confirmationContent?: ReactElement | undefined;
+  onDelete?: (() => Promise<void>) | undefined;
+  onDeleteSuccess?: (() => void) | undefined;
+}) => void;
+
+const renderDelete: RenderDeleteFunction = (props?: {
+  confirmationContent?: ReactElement | undefined;
+  onDelete?: (() => Promise<void>) | undefined;
+  onDeleteSuccess?: (() => void) | undefined;
+}): void => {
+  render(
+    <ModelDelete
+      modelType={Project}
+      modelId={MODEL_ID}
+      onDeleteSuccess={props?.onDeleteSuccess || ((): void => {})}
+      {...(props?.confirmationContent
+        ? { confirmationContent: props.confirmationContent }
+        : {})}
+      {...(props?.onDelete ? { onDelete: props.onDelete } : {})}
+    />,
+  );
+};
+
+type OpenConfirmationFunction = () => void;
+
+const openConfirmation: OpenConfirmationFunction = (): void => {
+  // The card's own button - the card title has the same words but is a heading.
+  fireEvent.click(
+    screen.getByRole("button", { name: "Delete Project" }) as HTMLElement,
+  );
+};
+
+describe("ModelDelete", () => {
+  beforeEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("does not open the confirmation until the delete button is pressed", () => {
+    renderDelete();
+
+    expect(screen.queryByTestId("confirm-modal-description")).toBeNull();
+  });
+
+  it("asks for confirmation before deleting anything", async () => {
+    const deleteItem: jest.SpyInstance = getJestSpyOn(
+      ModelAPI,
+      "deleteItem",
+    ).mockResolvedValue(undefined);
+
+    renderDelete();
+    openConfirmation();
+
+    expect(screen.getByTestId("confirm-modal-description")).toBeInTheDocument();
+    expect(deleteItem).not.toHaveBeenCalled();
+  });
+
+  it("deletes the model by id when no custom delete is given", async () => {
+    const deleteItem: jest.SpyInstance = getJestSpyOn(
+      ModelAPI,
+      "deleteItem",
+    ).mockResolvedValue(undefined);
+
+    renderDelete();
+    openConfirmation();
+
+    fireEvent.click(screen.getByTestId("modal-footer-submit-button"));
+
+    await waitFor(() => {
+      expect(deleteItem).toHaveBeenCalledWith({
+        modelType: Project,
+        id: MODEL_ID,
+      });
+    });
+  });
+
+  it("renders the extra confirmation content inside the modal", () => {
+    renderDelete({
+      confirmationContent: (
+        <label data-testid="reason-field">
+          Why are you deleting this project?
+        </label>
+      ),
+    });
+
+    expect(screen.queryByTestId("reason-field")).toBeNull();
+
+    openConfirmation();
+
+    expect(screen.getByTestId("reason-field")).toBeInTheDocument();
+    expect(
+      screen.getByText("Why are you deleting this project?"),
+    ).toBeInTheDocument();
+    // The confirmation itself is still there.
+    expect(screen.getByTestId("confirm-modal-description")).toBeInTheDocument();
+  });
+
+  /*
+   * The project delete has to send the reason with it, which the generic
+   * DELETE cannot carry - so the caller supplies the whole request.
+   */
+  it("runs the caller's delete instead of the generic one", async () => {
+    const deleteItem: jest.SpyInstance = getJestSpyOn(
+      ModelAPI,
+      "deleteItem",
+    ).mockResolvedValue(undefined);
+
+    let customDeleteRan: boolean = false;
+
+    renderDelete({
+      onDelete: async (): Promise<void> => {
+        customDeleteRan = true;
+      },
+    });
+
+    openConfirmation();
+    fireEvent.click(screen.getByTestId("modal-footer-submit-button"));
+
+    await waitFor(() => {
+      expect(customDeleteRan).toBe(true);
+    });
+
+    expect(deleteItem).not.toHaveBeenCalled();
+  });
+
+  it("reports success after the caller's delete resolves", async () => {
+    let deletedSuccessfully: boolean = false;
+
+    renderDelete({
+      onDelete: async (): Promise<void> => {},
+      onDeleteSuccess: (): void => {
+        deletedSuccessfully = true;
+      },
+    });
+
+    openConfirmation();
+    fireEvent.click(screen.getByTestId("modal-footer-submit-button"));
+
+    await waitFor(() => {
+      expect(deletedSuccessfully).toBe(true);
+    });
+  });
+
+  /*
+   * A failed delete must not look like a successful one: the dashboard's
+   * success handler clears the current project and navigates away from it.
+   */
+  it("shows the error and does not report success when the delete fails", async () => {
+    let deletedSuccessfully: boolean = false;
+
+    renderDelete({
+      onDelete: async (): Promise<void> => {
+        throw new Error("Delete on Project is not allowed");
+      },
+      onDeleteSuccess: (): void => {
+        deletedSuccessfully = true;
+      },
+    });
+
+    openConfirmation();
+    fireEvent.click(screen.getByTestId("modal-footer-submit-button"));
+
+    await waitFor(() => {
+      expect(screen.getByText("Delete Error")).toBeInTheDocument();
+    });
+
+    expect(deletedSuccessfully).toBe(false);
+  });
+
+  it("closes the confirmation without deleting when it is dismissed", async () => {
+    const deleteItem: jest.SpyInstance = getJestSpyOn(
+      ModelAPI,
+      "deleteItem",
+    ).mockResolvedValue(undefined);
+
+    let customDeleteRan: boolean = false;
+
+    renderDelete({
+      onDelete: async (): Promise<void> => {
+        customDeleteRan = true;
+      },
+    });
+
+    openConfirmation();
+    fireEvent.click(screen.getByTestId("modal-footer-close-button"));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId("confirm-modal-description")).toBeNull();
+    });
+
+    expect(customDeleteRan).toBe(false);
+    expect(deleteItem).not.toHaveBeenCalled();
+  });
+});

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

@@ -1,4 +1,4 @@
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import {
   act,
   cleanup,

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

@@ -1,4 +1,4 @@
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import {
   act,
   cleanup,

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

@@ -1,4 +1,4 @@
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { act, cleanup, render, waitFor } from "@testing-library/react";
 import React from "react";
 import {

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

@@ -1,4 +1,4 @@
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { act, cleanup, render, waitFor } from "@testing-library/react";
 import React, { ReactElement } from "react";
 import {

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

@@ -14,7 +14,7 @@ import Monitor from "../../../../Models/DatabaseModels/Monitor";
 import MonitorCustomField from "../../../../Models/DatabaseModels/MonitorCustomField";
 import CustomFieldType from "../../../../Types/CustomField/CustomFieldType";
 import { JSONObject } from "../../../../Types/JSON";
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { cleanup, render } from "@testing-library/react";
 import React from "react";
 import { afterEach, describe, expect, test } from "@jest/globals";

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

@@ -3,7 +3,7 @@ import Navbar, {
   NavItem,
 } from "../../../UI/Components/Navbar/NavBar";
 import { describe, expect, it, beforeEach } from "@jest/globals";
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 import React from "react";
 import Route from "../../../Types/API/Route";

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

@@ -2,7 +2,7 @@ import OperatorSelector from "../../../UI/Components/Filters/OperatorSelector";
 import FilterOperator, {
   FilterOperatorLabel,
 } from "../../../UI/Components/Filters/Types/FilterOperator";
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";

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

@@ -2,7 +2,7 @@ import Pagination, {
   ComponentProps,
 } from "../../../UI/Components/Pagination/Pagination";
 import { describe, expect, jest } from "@jest/globals";
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import React from "react";
 import getJestMockFunction, { MockFunction } from "../../../Tests/MockType";

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

@@ -1,5 +1,5 @@
 import Pill, { PillSize } from "../../../UI/Components/Pill/Pill";
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 import Color from "../../../Types/Color";
 import IconProp from "../../../Types/Icon/IconProp";

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

@@ -1,5 +1,5 @@
 import ProbeElement from "../../../UI/Components/Probe/Probe";
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 import ObjectID from "../../../Types/ObjectID";
 import Probe from "../../../Models/DatabaseModels/Probe";

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

@@ -1,5 +1,5 @@
 import ProgressBar from "../../../UI/Components/ProgressBar/ProgressBar";
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 import * as React from "react";
 import { describe, expect, test } from "@jest/globals";

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

@@ -1,7 +1,7 @@
 import RadioButtons, {
   RadioButton,
 } from "../../../UI/Components/RadioButtons/GroupRadioButtons";
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { fireEvent, render } from "@testing-library/react";
 import React from "react";
 import { describe, expect, test } from "@jest/globals";

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

@@ -6,7 +6,7 @@ import SideMenuItem, {
 } from "../../../UI/Components/SideMenu/SideMenuItem";
 import * as Navigation from "../../../UI/Utils/Navigation";
 import { describe, expect, afterEach, jest } from "@jest/globals";
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
 // Types
 import Route from "../../../Types/API/Route";