@oneuptime/common 14.0.10 → 14.0.11

package/Tests/UI/Components/Forms/FormFieldYaml.test.tsx

@@ -1,61 +1,7 @@
 import "@testing-library/jest-dom";
 import React from "react";
 import { cleanup, render, screen } from "@testing-library/react";
-import { afterEach, describe, expect, jest, test } from "@jest/globals";
-
-/*
- * Monaco stand-in. Needed because FormField reaches CodeEditor through
- * YamlEditor, and CodeEditor calls configureMonacoLoader() at module scope.
- */
-jest.mock("@monaco-editor/react", () => {
-  return {
-    __esModule: true,
-    loader: { config: jest.fn() },
-    default: (editorProps: {
-      value?: string | undefined;
-      defaultLanguage?: string | undefined;
-      onChange?: ((value: string | undefined) => void) | undefined;
-      onMount?: ((editor: unknown, monaco: unknown) => void) | undefined;
-    }) => {
-      const hostRef: React.MutableRefObject<HTMLDivElement | null> =
-        React.useRef<HTMLDivElement | null>(null);
-
-      React.useEffect(() => {
-        if (!editorProps.onMount) {
-          return;
-        }
-
-        editorProps.onMount(
-          {
-            getDomNode: () => {
-              return hostRef.current;
-            },
-            getModel: () => {
-              return {
-                updateOptions: () => {
-                  return undefined;
-                },
-              };
-            },
-          },
-          {},
-        );
-        // eslint-disable-next-line
-      }, []);
-
-      return (
-        <div ref={hostRef}>
-          <textarea
-            data-testid="monaco"
-            data-language={editorProps.defaultLanguage}
-            value={editorProps.value || ""}
-            readOnly={true}
-          />
-        </div>
-      );
-    },
-  };
-});
+import { afterEach, describe, expect, test } from "@jest/globals";
 
 import FormField from "../../../../UI/Components/Forms/Fields/FormField";
 import Field from "../../../../UI/Components/Forms/Types/Field";
@@ -123,16 +69,15 @@ describe("FormField — a YAML field renders a YAML editor", () => {
     renderField();
 
     expect(screen.getByTestId("yaml-editor")).toBeInTheDocument();
-    expect(screen.getByTestId("monaco")).toBeInTheDocument();
+    expect(screen.getByTestId("code-editor-input")).toBeInTheDocument();
   });
 
-  test("Monaco is given the yaml grammar, not html or markdown", () => {
+  test("the editor is a YAML code editor, not html or markdown", () => {
     renderField();
 
-    expect(screen.getByTestId("monaco")).toHaveAttribute(
-      "data-language",
-      "yaml",
-    );
+    expect(
+      screen.getByTestId("yaml-editor").querySelector("[data-code-type]"),
+    ).toHaveAttribute("data-code-type", "yaml");
   });
 
   /*
@@ -150,17 +95,17 @@ describe("FormField — a YAML field renders a YAML editor", () => {
   test("the current value is shown in the editor", () => {
     renderField();
 
-    expect((screen.getByTestId("monaco") as HTMLTextAreaElement).value).toBe(
-      VALID_SIGMA_RULE,
-    );
+    expect(
+      (screen.getByTestId("code-editor-input") as HTMLTextAreaElement).value,
+    ).toBe(VALID_SIGMA_RULE);
   });
 
   test("an empty field renders an empty editor rather than crashing", () => {
     renderField(undefined, {} as FormValues<TestEntity>);
 
-    expect((screen.getByTestId("monaco") as HTMLTextAreaElement).value).toBe(
-      "",
-    );
+    expect(
+      (screen.getByTestId("code-editor-input") as HTMLTextAreaElement).value,
+    ).toBe("");
   });
 
   test("the field's label is still rendered above it", () => {
@@ -170,17 +115,17 @@ describe("FormField — a YAML field renders a YAML editor", () => {
   });
 
   /*
-   * Monaco renders nothing carrying the generated field id, so the label
-   * cannot use htmlFor without dangling (WCAG 1.3.1). It names the editor
-   * through aria-labelledby instead — and that has to land on Monaco's own
-   * focusable textarea, because the wrapper around it is a bare <div> and
-   * ARIA does not name a role=generic element.
+   * The editor's textarea does not carry the generated field id, so the
+   * label cannot use htmlFor without dangling (WCAG 1.3.1). It names the
+   * editor through aria-labelledby instead - on the textarea itself, the
+   * element that takes focus, because ARIA does not name a role=generic div.
    */
-  test("the field's label names Monaco's textarea", () => {
+  test("the field's label names the editor's textarea", () => {
     renderField();
 
     const labelId: string =
-      screen.getByTestId("monaco").getAttribute("aria-labelledby") || "";
+      screen.getByTestId("code-editor-input").getAttribute("aria-labelledby") ||
+      "";
 
     expect(labelId).not.toBe("");
     expect(document.getElementById(labelId)?.textContent).toContain(
@@ -192,7 +137,9 @@ describe("FormField — a YAML field renders a YAML editor", () => {
     renderField();
 
     const describedBy: string =
-      screen.getByTestId("monaco").getAttribute("aria-describedby") || "";
+      screen
+        .getByTestId("code-editor-input")
+        .getAttribute("aria-describedby") || "";
 
     expect(describedBy.split(" ").length).toBeGreaterThanOrEqual(2);
 

package/Tests/UI/Components/Forms/ModelFormOnBeforeCreateMiscData.test.tsx

@@ -0,0 +1,254 @@
+import "@testing-library/jest-dom";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import React from "react";
+import { JSONObject } from "../../../../Types/JSON";
+import Permission from "../../../../Types/Permission";
+
+/*
+ * What a create form's request carries besides the model: its misc data.
+ * Through the real ModelForm and BasicForm, with only the network stubbed.
+ *
+ * Pinned because declaring an incident from a template depends on it
+ * (IncidentCreateTemplateOwners.test.tsx): the page used to put the
+ * template's owners into the form's INITIAL VALUES, where no input held them,
+ * and they never reached the server. The misc data is built from the inputs
+ * that have an overrideFieldKey, and onBeforeCreate is handed that same
+ * object - so what it adds is what the request carries.
+ */
+
+type CapturedRequest = {
+  model: JSONObject;
+  miscDataProps: JSONObject;
+};
+
+let capturedRequests: Array<CapturedRequest> = [];
+let receivedFormValues: Array<JSONObject> = [];
+
+jest.mock("../../../../UI/Utils/Permission", () => {
+  return {
+    __esModule: true,
+    default: {
+      getAllPermissions: (): Array<Permission> => {
+        return [Permission.ProjectOwner, Permission.User, Permission.Public];
+      },
+      getProjectPermissions: (): null => {
+        return null;
+      },
+      getGlobalPermissions: (): { globalPermissions: Array<Permission> } => {
+        return {
+          globalPermissions: [
+            Permission.ProjectOwner,
+            Permission.User,
+            Permission.Public,
+          ],
+        };
+      },
+    },
+  };
+});
+
+jest.mock("../../../../UI/Utils/User", () => {
+  return {
+    __esModule: true,
+    default: {
+      isMasterAdmin: (): boolean => {
+        return false;
+      },
+      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;
+        },
+      };
+    },
+  };
+});
+
+jest.mock("../../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getItem: async (): Promise<null> => {
+        return null;
+      },
+      getList: async (): Promise<{
+        data: Array<unknown>;
+        count: number;
+        skip: number;
+        limit: number;
+      }> => {
+        return { data: [], count: 0, skip: 0, limit: 0 };
+      },
+      getCommonHeaders: (): JSONObject => {
+        return {};
+      },
+      createOrUpdate: async (data: {
+        model: JSONObject;
+        miscDataProps: JSONObject;
+      }): Promise<{ data: JSONObject }> => {
+        capturedRequests.push({
+          model: data.model,
+          miscDataProps: { ...data.miscDataProps },
+        });
+        return { data: data.model };
+      },
+    },
+  };
+});
+
+import Incident from "../../../../Models/DatabaseModels/Incident";
+import ModelForm, {
+  FormType,
+  ModelField,
+} from "../../../../UI/Components/Forms/ModelForm";
+import FormFieldSchemaType from "../../../../UI/Components/Forms/Types/FormFieldSchemaType";
+
+const USER_A: string = "0000000e-0000-4000-8000-000000000001";
+const TEAM_A: string = "0000000b-0000-4000-8000-000000000001";
+
+const TITLE_FIELD: ModelField<Incident> = {
+  field: { title: true },
+  title: "Title",
+  fieldType: FormFieldSchemaType.Text,
+  required: true,
+  placeholder: "Incident Title",
+};
+
+async function renderForm(data: {
+  initialValues?: JSONObject;
+  onBeforeCreate?: (
+    item: Incident,
+    miscDataProps: JSONObject,
+    formValues: JSONObject,
+  ) => Promise<Incident>;
+}): Promise<void> {
+  await act(async (): Promise<void> => {
+    render(
+      <ModelForm<Incident>
+        modelType={Incident}
+        id="declare-incident-form"
+        name="Declare Incident"
+        fields={[TITLE_FIELD]}
+        formType={FormType.Create}
+        initialValues={data.initialValues}
+        onBeforeCreate={async (
+          item: Incident,
+          miscDataProps: JSONObject,
+          formValues: JSONObject,
+        ): Promise<Incident> => {
+          receivedFormValues.push({ ...formValues });
+
+          if (data.onBeforeCreate) {
+            return await data.onBeforeCreate(item, miscDataProps, formValues);
+          }
+
+          return item;
+        }}
+        onSuccess={(): void => {
+          // Not asserted on.
+        }}
+        submitButtonText="Declare Incident"
+      />,
+    );
+  });
+}
+
+async function typeTitleAndSubmit(): Promise<void> {
+  fireEvent.change(screen.getByPlaceholderText("Incident Title"), {
+    target: { value: "Checkout is failing" },
+  });
+
+  await act(async (): Promise<void> => {
+    fireEvent.click(screen.getByRole("button", { name: "Declare Incident" }));
+  });
+}
+
+afterEach(() => {
+  cleanup();
+  capturedRequests = [];
+  receivedFormValues = [];
+});
+
+describe("a create form's misc data", () => {
+  test("an initial value no input holds never reaches the request - how template owners were lost", async () => {
+    await renderForm({
+      initialValues: { ownerUsers: [USER_A], ownerTeams: [TEAM_A] },
+    });
+
+    await typeTitleAndSubmit();
+
+    expect(capturedRequests).toHaveLength(1);
+    expect(capturedRequests[0]!.miscDataProps).toEqual({});
+    expect(capturedRequests[0]!.model["ownerUsers"]).toBeUndefined();
+    expect(capturedRequests[0]!.model["ownerTeams"]).toBeUndefined();
+  });
+
+  test("what onBeforeCreate adds to the misc data is what the request carries", async () => {
+    await renderForm({
+      onBeforeCreate: async (
+        item: Incident,
+        miscDataProps: JSONObject,
+      ): Promise<Incident> => {
+        miscDataProps["ownerUsers"] = [USER_A];
+        miscDataProps["ownerTeams"] = [TEAM_A];
+        return item;
+      },
+    });
+
+    await typeTitleAndSubmit();
+
+    expect(capturedRequests).toHaveLength(1);
+    expect(capturedRequests[0]!.miscDataProps).toEqual({
+      ownerUsers: [USER_A],
+      ownerTeams: [TEAM_A],
+    });
+    expect(capturedRequests[0]!.model["title"]).toBe("Checkout is failing");
+  });
+
+  test("what onBeforeCreate takes out of the misc data is not sent", async () => {
+    await renderForm({
+      onBeforeCreate: async (
+        item: Incident,
+        miscDataProps: JSONObject,
+      ): Promise<Incident> => {
+        miscDataProps["ownerUsers"] = [USER_A];
+        delete miscDataProps["ownerUsers"];
+        return item;
+      },
+    });
+
+    await typeTitleAndSubmit();
+
+    expect(capturedRequests[0]!.miscDataProps).toEqual({});
+  });
+
+  test("onBeforeCreate runs once per submit, before the request", async () => {
+    await renderForm({});
+
+    await typeTitleAndSubmit();
+
+    expect(receivedFormValues).toHaveLength(1);
+    expect(receivedFormValues[0]!["title"]).toBe("Checkout is failing");
+    expect(capturedRequests).toHaveLength(1);
+  });
+});

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

@@ -81,3 +81,35 @@ describe("Icon bars-and-arrow sort glyphs", () => {
     );
   });
 });
+
+/*
+ * The markdown editor's Indent and Outdent buttons show nothing but these
+ * glyphs, so each has to draw its own arrow -- in for Indent, out for
+ * Outdent -- and neither may fall through to an empty icon.
+ */
+describe("Icon indent and outdent", () => {
+  it("draws lines of text with an arrow pointing in for Indent", () => {
+    expect(getIconPath(IconProp.Indent)).toBe(
+      "M3.75 5.25h16.5M11.25 9.75h9M11.25 14.25h9M3.75 18.75h16.5M3.75 9l3 3-3 3",
+    );
+  });
+
+  it("draws the same lines with the arrow pointing out for Outdent", () => {
+    expect(getIconPath(IconProp.Outdent)).toBe(
+      "M3.75 5.25h16.5M11.25 9.75h9M11.25 14.25h9M3.75 18.75h16.5M6.75 9l-3 3 3 3",
+    );
+  });
+
+  it("draws two glyphs that differ from each other and from the list icons", () => {
+    const paths: Array<string> = [
+      getIconPath(IconProp.Indent),
+      getIconPath(IconProp.Outdent),
+      getIconPath(IconProp.ListBullet),
+      getIconPath(IconProp.List),
+    ];
+
+    expect(paths[0]).not.toBe(paths[1]);
+    expect(paths.slice(2)).not.toContain(paths[0]);
+    expect(paths.slice(2)).not.toContain(paths[1]);
+  });
+});

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

@@ -357,6 +357,37 @@ describe("Input", () => {
     expect(screen.getByText(error)).toBeInTheDocument();
   });
 
+  /*
+   * Every Input's error message had the same fixed id, so on a form with
+   * several fields in error each field was described by the first one's
+   * message -- "Your Email" read out as "Title is required.".
+   */
+  test("describes each input by its own error message", () => {
+    render(
+      <>
+        <Input error="Title is required." dataTestId="title" />
+        <Input error="Your Email is required." dataTestId="email" />
+      </>,
+    );
+    const title: HTMLElement = screen.getByTestId("title");
+    const email: HTMLElement = screen.getByTestId("email");
+
+    expect(title).toHaveAccessibleDescription("Title is required.");
+    expect(email).toHaveAccessibleDescription("Your Email is required.");
+    expect(title.getAttribute("aria-describedby")).not.toBe(
+      email.getAttribute("aria-describedby"),
+    );
+    expect(screen.getAllByRole("alert")).toHaveLength(2);
+  });
+
+  test("keeps the caller's own description when it has no error", () => {
+    render(<Input ariaDescribedby="picker-message" dataTestId="field" />);
+
+    expect(screen.getByTestId("field").getAttribute("aria-describedby")).toBe(
+      "picker-message",
+    );
+  });
+
   test("displays error icon", () => {
     const error: string = "error";