@oneuptime/common 14.0.11 → 14.0.12

package/Tests/UI/Components/Workflow/ComponentReturnValueViewer.test.tsx

@@ -0,0 +1,248 @@
+/*
+ * The Returns section of a step's settings dialog: what each value is, and
+ * the reference a later step uses to read it, with a button to copy it.
+ */
+
+import ComponentReturnValueViewer from "../../../../UI/Components/Workflow/ComponentReturnValueViewer";
+import {
+  ComponentInputType,
+  ReturnValue,
+} from "../../../../Types/Workflow/Component";
+import { afterEach, describe, expect, test } from "@jest/globals";
+import "@testing-library/jest-dom";
+import {
+  RenderResult,
+  act,
+  fireEvent,
+  render,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import React from "react";
+
+const RETURN_VALUES: Array<ReturnValue> = [
+  {
+    id: "request-headers",
+    name: "Request Headers",
+    description: "The headers the caller sent, by header name.",
+    type: ComponentInputType.StringDictionary,
+    required: false,
+  },
+  {
+    id: "request-body",
+    name: "Request Body",
+    description: "The body the caller sent.",
+    type: ComponentInputType.JSON,
+    required: false,
+  },
+];
+
+type SetClipboardFunction = (
+  writeText: ((text: string) => Promise<void>) | null,
+) => void;
+
+const setClipboard: SetClipboardFunction = (
+  writeText: ((text: string) => Promise<void>) | null,
+): void => {
+  Object.defineProperty(navigator, "clipboard", {
+    value: writeText ? { writeText: writeText } : undefined,
+    configurable: true,
+  });
+};
+
+afterEach(() => {
+  setClipboard(null);
+});
+
+describe("ComponentReturnValueViewer", () => {
+  test("one row per value, with its name, type and description", () => {
+    const { getAllByTestId }: RenderResult = render(
+      <ComponentReturnValueViewer
+        name=""
+        description=""
+        returnValues={RETURN_VALUES}
+        componentId="webhook-1"
+      />,
+    );
+
+    const rows: Array<HTMLElement> = getAllByTestId("workflow-return-value");
+
+    expect(rows).toHaveLength(2);
+    expect(rows[0]).toHaveTextContent("Request Headers");
+    expect(rows[0]).toHaveTextContent(
+      "The headers the caller sent, by header name.",
+    );
+    expect(
+      within(rows[0]!).getByTestId("workflow-return-value-type"),
+    ).toHaveTextContent("Dictionary of String");
+    expect(
+      within(rows[1]!).getByTestId("workflow-return-value-type"),
+    ).toHaveTextContent("JSON");
+  });
+
+  test("each row shows the exact reference that reads it", () => {
+    const { getAllByTestId }: RenderResult = render(
+      <ComponentReturnValueViewer
+        name=""
+        description=""
+        returnValues={RETURN_VALUES}
+        componentId="webhook-1"
+      />,
+    );
+
+    expect(
+      getAllByTestId("workflow-return-value-reference").map(
+        (reference: HTMLElement) => {
+          return reference.textContent;
+        },
+      ),
+    ).toEqual([
+      "{{local.components.webhook-1.returnValues.request-headers}}",
+      "{{local.components.webhook-1.returnValues.request-body}}",
+    ]);
+  });
+
+  test("a reference wraps only after its dots, never inside a name", () => {
+    const { getAllByTestId }: RenderResult = render(
+      <ComponentReturnValueViewer
+        name=""
+        description=""
+        returnValues={RETURN_VALUES}
+        componentId="webhook-1"
+      />,
+    );
+
+    const reference: HTMLElement = getAllByTestId(
+      "workflow-return-value-reference",
+    )[0]!;
+
+    // The old viewer set overflow-wrap: anywhere inline.
+    expect(reference.getAttribute("style") || "").not.toMatch(/overflow-wrap/);
+    expect(reference.className).not.toMatch(/break-all|break-words/);
+
+    const parts: Array<string> = Array.from(
+      reference.querySelectorAll("span"),
+    ).map((part: HTMLSpanElement) => {
+      return part.textContent || "";
+    });
+
+    expect(parts).toEqual([
+      "{{local.",
+      "components.",
+      "webhook-1.",
+      "returnValues.",
+      "request-headers}}",
+    ]);
+  });
+
+  test("every reference has its own copy button, named for the value", () => {
+    const { getByRole }: RenderResult = render(
+      <ComponentReturnValueViewer
+        name=""
+        description=""
+        returnValues={RETURN_VALUES}
+        componentId="webhook-1"
+      />,
+    );
+
+    expect(
+      getByRole("button", { name: "Copy the reference to Request Headers" }),
+    ).toBeInTheDocument();
+    expect(
+      getByRole("button", { name: "Copy the reference to Request Body" }),
+    ).toBeInTheDocument();
+  });
+
+  test("the copy button copies exactly that row's reference", async () => {
+    const copied: Array<string> = [];
+
+    setClipboard(async (text: string): Promise<void> => {
+      copied.push(text);
+    });
+
+    const { getByRole }: RenderResult = render(
+      <ComponentReturnValueViewer
+        name=""
+        description=""
+        returnValues={RETURN_VALUES}
+        componentId="webhook-1"
+      />,
+    );
+
+    await act(async () => {
+      fireEvent.click(
+        getByRole("button", { name: "Copy the reference to Request Body" }),
+      );
+    });
+
+    await waitFor(() => {
+      expect(copied).toEqual([
+        "{{local.components.webhook-1.returnValues.request-body}}",
+      ]);
+    });
+  });
+
+  test("references follow the step's identifier", () => {
+    const { getAllByTestId }: RenderResult = render(
+      <ComponentReturnValueViewer
+        name=""
+        description=""
+        returnValues={RETURN_VALUES}
+        componentId="ci-webhook"
+      />,
+    );
+
+    expect(
+      getAllByTestId("workflow-return-value-reference")[0],
+    ).toHaveTextContent(
+      "{{local.components.ci-webhook.returnValues.request-headers}}",
+    );
+  });
+
+  test("without an identifier it shows each value's id and nothing to copy", () => {
+    const { getAllByTestId, queryAllByRole, queryAllByTestId }: RenderResult =
+      render(
+        <ComponentReturnValueViewer
+          name=""
+          description=""
+          returnValues={RETURN_VALUES}
+        />,
+      );
+
+    expect(
+      getAllByTestId("workflow-return-value-id").map((id: HTMLElement) => {
+        return id.textContent;
+      }),
+    ).toEqual(["request-headers", "request-body"]);
+    expect(queryAllByTestId("workflow-return-value-reference")).toHaveLength(0);
+    expect(queryAllByRole("button")).toHaveLength(0);
+  });
+
+  test("says so when a step returns nothing", () => {
+    const { getByText, queryAllByTestId }: RenderResult = render(
+      <ComponentReturnValueViewer
+        name=""
+        description=""
+        returnValues={[]}
+        componentId="log-1"
+      />,
+    );
+
+    expect(getByText("This step does not return any data.")).toBeVisible();
+    expect(queryAllByTestId("workflow-return-value")).toHaveLength(0);
+  });
+
+  test("keeps its optional heading and description", () => {
+    const { getByText }: RenderResult = render(
+      <ComponentReturnValueViewer
+        name="Returns"
+        description="Data for later steps."
+        returnValues={RETURN_VALUES}
+        componentId="webhook-1"
+      />,
+    );
+
+    expect(getByText("Returns")).toBeVisible();
+    expect(getByText("Data for later steps.")).toBeVisible();
+  });
+});

package/Tests/UI/Components/Workflow/ComponentSettingsDeleteConfirmation.test.tsx

@@ -0,0 +1,245 @@
+import ComponentSettingsModal, {
+  ComponentProps as SettingsProps,
+} from "../../../../UI/Components/Workflow/ComponentSettingsModal";
+import ComponentMetadata, {
+  ComponentType,
+  NodeDataProp,
+  NodeType,
+} from "../../../../Types/Workflow/Component";
+import IconProp from "../../../../Types/Icon/IconProp";
+import ObjectID from "../../../../Types/ObjectID";
+import getJestMockFunction, { MockFunction } from "../../../MockType";
+import React, { ReactElement } from "react";
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, expect, jest, test } from "@jest/globals";
+
+/*
+ * Deleting a step from a workflow asked "Are you sure you want to delete this
+ * component? This action is not recoverable." - in a builder that can hold
+ * three "Send Email" steps. It now names the step by its kind and the
+ * identifier the workflow knows it by: "Send Email (send-email-2)".
+ *
+ * It also deletes that step. The dialog used to hand back its working copy,
+ * so a step whose identifier had been edited in the dialog and not saved was
+ * looked up on the canvas by the new identifier, matched nothing, and stayed
+ * while the dialog closed as though it had gone.
+ */
+jest.mock("../../../../UI/Components/Workflow/ArgumentsForm", () => {
+  return {
+    __esModule: true,
+    default: (): ReactElement => {
+      return <div data-testid="arguments-form" />;
+    },
+  };
+});
+
+jest.mock("../../../../UI/Components/Workflow/DocumentationViewer", () => {
+  return {
+    __esModule: true,
+    default: (): ReactElement => {
+      return <div data-testid="documentation-viewer" />;
+    },
+  };
+});
+
+const SEND_EMAIL_METADATA: ComponentMetadata = {
+  id: "send-email",
+  title: "Send Email",
+  description: "Send an email.",
+  category: "Email",
+  iconProp: IconProp.Email,
+  componentType: ComponentType.Component,
+  arguments: [],
+  returnValues: [],
+  inPorts: [{ id: "in", title: "In", description: "Start this step." }],
+  outPorts: [{ id: "out", title: "Out", description: "Continue." }],
+};
+
+const WEBHOOK_METADATA: ComponentMetadata = {
+  ...SEND_EMAIL_METADATA,
+  id: "webhook",
+  title: "Webhook",
+  description: "Start the workflow from a request.",
+  componentType: ComponentType.Trigger,
+  inPorts: [],
+};
+
+type MakeStepFunction = (
+  metadata: ComponentMetadata,
+  id: string,
+) => NodeDataProp;
+
+const makeStep: MakeStepFunction = (
+  metadata: ComponentMetadata,
+  id: string,
+): NodeDataProp => {
+  return {
+    id: id,
+    internalId: `internal-${id}`,
+    nodeType: NodeType.Node,
+    componentType: metadata.componentType,
+    metadataId: metadata.id,
+    metadata: metadata,
+    error: "",
+    arguments: {},
+    returnValues: {},
+  };
+};
+
+interface Harness {
+  onDelete: MockFunction;
+  onClose: MockFunction;
+}
+
+type RenderSettingsFunction = (
+  step: NodeDataProp,
+  overrides?: Partial<SettingsProps>,
+) => Harness;
+
+const renderSettings: RenderSettingsFunction = (
+  step: NodeDataProp,
+  overrides: Partial<SettingsProps> = {},
+): Harness => {
+  const onDelete: MockFunction = getJestMockFunction();
+  const onClose: MockFunction = getJestMockFunction();
+
+  render(
+    <ComponentSettingsModal
+      title={step.metadata.title}
+      description={step.metadata.description}
+      onClose={onClose}
+      onSave={getJestMockFunction()}
+      onDelete={onDelete}
+      component={step}
+      graphComponents={[step]}
+      workflowId={new ObjectID("11111111-1111-4111-8111-111111111111")}
+      {...overrides}
+    />,
+  );
+
+  return { onDelete, onClose };
+};
+
+type OpenDeleteFunction = () => HTMLElement;
+
+// Opens the step's Delete confirmation; returns it (the topmost dialog).
+const openDelete: OpenDeleteFunction = (): HTMLElement => {
+  fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+
+  const dialogs: Array<HTMLElement> = screen.getAllByRole("dialog");
+
+  return dialogs[dialogs.length - 1]!;
+};
+
+describe("the workflow step's Delete confirmation", () => {
+  test("names the step by its kind and its identifier", () => {
+    renderSettings(makeStep(SEND_EMAIL_METADATA, "send-email-2"));
+
+    const confirmation: HTMLElement = openDelete();
+
+    expect(
+      within(confirmation).getByTestId("confirm-modal-description"),
+    ).toHaveTextContent(
+      "Are you sure you want to delete Send Email (send-email-2)? This action cannot be undone.",
+    );
+    expect(
+      within(confirmation).getByTestId("delete-confirmation-name"),
+    ).toHaveTextContent(/^Send Email \(send-email-2\)$/);
+    expect(confirmation).not.toHaveTextContent("this component");
+  });
+
+  test("does not repeat an identifier that is the step's title", () => {
+    renderSettings(makeStep(SEND_EMAIL_METADATA, "Send Email"));
+
+    const confirmation: HTMLElement = openDelete();
+
+    expect(
+      within(confirmation).getByTestId("delete-confirmation-name"),
+    ).toHaveTextContent(/^Send Email$/);
+  });
+
+  test("names a trigger the same way, under its own title", () => {
+    renderSettings(makeStep(WEBHOOK_METADATA, "webhook-1"));
+
+    const confirmation: HTMLElement = openDelete();
+
+    expect(
+      within(confirmation).getByText("Delete Trigger"),
+    ).toBeInTheDocument();
+    expect(
+      within(confirmation).getByTestId("confirm-modal-description"),
+    ).toHaveTextContent("Are you sure you want to delete Webhook (webhook-1)?");
+  });
+
+  test("deletes the step it named", () => {
+    const harness: Harness = renderSettings(
+      makeStep(SEND_EMAIL_METADATA, "send-email-2"),
+    );
+
+    const confirmation: HTMLElement = openDelete();
+
+    fireEvent.click(
+      within(confirmation).getByRole("button", { name: "Delete" }),
+    );
+
+    expect(harness.onDelete).toHaveBeenCalledTimes(1);
+    expect((harness.onDelete.mock.calls[0]![0] as NodeDataProp).id).toBe(
+      "send-email-2",
+    );
+    expect(harness.onClose).toHaveBeenCalledTimes(1);
+  });
+
+  // The regression: an edited, unsaved identifier names no step on the canvas.
+  test("deletes the step on the canvas, not the dialog's unsaved edit of it", async () => {
+    const step: NodeDataProp = makeStep(SEND_EMAIL_METADATA, "send-email-2");
+    const harness: Harness = renderSettings(step);
+
+    fireEvent.change(screen.getByRole("textbox", { name: /^Identifier/ }), {
+      target: { value: "renamed-but-not-saved" },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByRole("textbox", { name: /^Identifier/ })).toHaveValue(
+        "renamed-but-not-saved",
+      );
+    });
+
+    const confirmation: HTMLElement = openDelete();
+
+    expect(
+      within(confirmation).getByTestId("delete-confirmation-name"),
+    ).toHaveTextContent(/^Send Email \(send-email-2\)$/);
+
+    fireEvent.click(
+      within(confirmation).getByRole("button", { name: "Delete" }),
+    );
+
+    expect(harness.onDelete).toHaveBeenCalledTimes(1);
+    expect(harness.onDelete.mock.calls[0]![0]).toBe(step);
+    expect((harness.onDelete.mock.calls[0]![0] as NodeDataProp).id).toBe(
+      "send-email-2",
+    );
+  });
+
+  test("deletes nothing when cancelled", () => {
+    const harness: Harness = renderSettings(
+      makeStep(SEND_EMAIL_METADATA, "send-email-2"),
+    );
+
+    const confirmation: HTMLElement = openDelete();
+
+    fireEvent.click(
+      within(confirmation).getByRole("button", { name: "Cancel" }),
+    );
+
+    expect(harness.onDelete).not.toHaveBeenCalled();
+    expect(harness.onClose).not.toHaveBeenCalled();
+  });
+});