@oneuptime/common 14.0.10 → 14.0.12

package/Tests/UI/Components/Workflow/IncomingEmailTriggerPanelI18n.test.ts

@@ -0,0 +1,164 @@
+import { IncomingEmailTriggerPanelCopy } from "../../../../UI/Components/Workflow/IncomingEmailTriggerPanel";
+import { describe, expect, test } from "@jest/globals";
+import fs from "fs";
+import path from "path";
+
+/*
+ * The Incoming Email trigger's address panel is drawn in the dashboard, which
+ * looks every string up in its locale files by its English text. A string
+ * with no entry silently stays English, so this holds every sentence the
+ * panel and its Reset address confirmation show to all seventeen files.
+ */
+
+const LOCALES_DIR: string = path.join(
+  __dirname,
+  "..",
+  "..",
+  "..",
+  "..",
+  "..",
+  "App",
+  "FeatureSet",
+  "Dashboard",
+  "src",
+  "Locales",
+);
+
+const OTHER_LOCALES: Array<string> = [
+  "de",
+  "fr",
+  "es",
+  "it",
+  "pt",
+  "nl",
+  "da",
+  "no",
+  "sv",
+  "ru",
+  "ja",
+  "ko",
+  "zh-CN",
+  "zh-TW",
+  "hi",
+  "fa",
+];
+
+type ReadLocaleFunction = (locale: string) => Record<string, string>;
+
+const readLocale: ReadLocaleFunction = (
+  locale: string,
+): Record<string, string> => {
+  return JSON.parse(
+    fs.readFileSync(path.join(LOCALES_DIR, `${locale}.json`), "utf8"),
+  );
+};
+
+const ENGLISH: Record<string, string> = readLocale("en");
+
+const PANEL_STRINGS: Array<string> = Array.from(
+  new Set(Object.values(IncomingEmailTriggerPanelCopy)),
+);
+
+describe("the Incoming Email trigger panel in every dashboard language", () => {
+  test("the scan found the panel's strings, so the checks below are not vacuous", () => {
+    expect(PANEL_STRINGS.length).toBeGreaterThanOrEqual(20);
+    expect(PANEL_STRINGS).toContain("Reset address");
+    expect(PANEL_STRINGS).toContain("How to set up inbound email");
+  });
+
+  test("English maps every string to itself", () => {
+    for (const text of PANEL_STRINGS) {
+      expect({ text, english: ENGLISH[text] }).toEqual({ text, english: text });
+    }
+  });
+
+  test.each(OTHER_LOCALES)("%s translates every string", (locale: string) => {
+    const translations: Record<string, string> = readLocale(locale);
+
+    for (const text of PANEL_STRINGS) {
+      const translated: string | undefined = translations[text];
+
+      expect({ locale, text, has: typeof translated === "string" }).toEqual({
+        locale,
+        text,
+        has: true,
+      });
+      expect((translated || "").trim().length).toBeGreaterThan(0);
+
+      // Sentences are translated, not left in English.
+      if (text.split(" ").length > 3) {
+        expect({ locale, text, same: translated === text }).toEqual({
+          locale,
+          text,
+          same: false,
+        });
+      }
+    }
+  });
+
+  test.each(OTHER_LOCALES)(
+    "%s keeps OneUptime's name as it is",
+    (locale: string) => {
+      const translations: Record<string, string> = readLocale(locale);
+
+      for (const text of PANEL_STRINGS) {
+        if (text.includes("OneUptime")) {
+          expect(translations[text]).toContain("OneUptime");
+        }
+      }
+    },
+  );
+
+  test("the leak sentence names the address, rather than borrowing the webhook's", () => {
+    /*
+     * "If it leaks, reset it." is the Webhook trigger's, and Dutch and
+     * Portuguese translate its "it" as "the URL" or with the URL's gender.
+     */
+    expect(IncomingEmailTriggerPanelCopy.resetIfLeaked).not.toBe(
+      "If it leaks, reset it.",
+    );
+    expect(IncomingEmailTriggerPanelCopy.resetIfLeaked).toContain("address");
+  });
+
+  test("the panel draws no text that bypasses the lookup", () => {
+    /*
+     * Text written straight into JSX would stay English in every language.
+     * Everything the panel says goes through translate(), or is handed to a
+     * Button or ConfirmModal, which look their own titles up.
+     */
+    const source: string = fs
+      .readFileSync(
+        path.join(
+          __dirname,
+          "..",
+          "..",
+          "..",
+          "..",
+          "UI",
+          "Components",
+          "Workflow",
+          "IncomingEmailTriggerPanel.tsx",
+        ),
+        "utf8",
+      )
+      .replace(/\/\*[\s\S]*?\*\//g, " ")
+      .replace(/\/\/.*$/gm, " ");
+
+    // Text between a tag's ">" and the next "<"; an arrow's "=>" is no tag.
+    const jsxText: RegExp = /(?<!=)>\s*([A-Za-z][^<>{}]*?)\s*</g;
+
+    const rawJsxText: Array<string> = Array.from(
+      source.matchAll(jsxText),
+      (match: RegExpMatchArray): string => {
+        return match[1]!;
+      },
+    );
+
+    expect(rawJsxText).toEqual([]);
+
+    // And the scan does catch text written into a tag.
+    expect(Array.from("<p>Keep it private</p>".matchAll(jsxText)).length).toBe(
+      1,
+    );
+  });
+});

package/Tests/UI/Components/Workflow/ModelColumnEditor.render.test.tsx

@@ -26,31 +26,6 @@ jest.mock("../../../../UI/Utils/API/API", () => {
   };
 });
 
-/*
- * Monaco cannot run in jsdom. A textarea that echoes the value is enough to
- * assert what the JSON view was handed and to type into it.
- */
-jest.mock("@monaco-editor/react", () => {
-  return {
-    __esModule: true,
-    loader: { config: jest.fn() },
-    default: (editorProps: {
-      value?: string | undefined;
-      onChange?: ((value: string | undefined) => void) | undefined;
-    }) => {
-      return (
-        <textarea
-          data-testid="monaco"
-          value={editorProps.value || ""}
-          onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => {
-            editorProps.onChange?.(event.target.value);
-          }}
-        />
-      );
-    },
-  };
-});
-
 import HTTPErrorResponse from "../../../../Types/API/HTTPErrorResponse";
 import HTTPResponse from "../../../../Types/API/HTTPResponse";
 import TableColumnType from "../../../../Types/Database/TableColumnType";
@@ -61,6 +36,7 @@ import ModelColumnEditor, {
 } from "../../../../UI/Components/Workflow/ModelColumnEditor";
 import { ModelSchemaColumn } from "../../../../UI/Components/Workflow/ModelSchema";
 import API from "../../../../UI/Utils/API/API";
+import { chipsIn, keys, placeCaret } from "./ValuePicker/ValuePickerTestUtils";
 import getJestMockFunction, { MockFunction } from "../../../MockType";
 import { afterEach, beforeEach, describe, expect, test } from "@jest/globals";
 import "@testing-library/jest-dom";
@@ -70,6 +46,7 @@ import {
   render,
   waitFor,
 } from "@testing-library/react";
+import userEvent, { UserEvent } from "@testing-library/user-event";
 
 type MakeColumnFunction = (
   overrides: Partial<ModelSchemaColumn> & { id: string },
@@ -163,7 +140,6 @@ type RenderEditorProps = {
   initialValue?: string | undefined;
   recordIntent?: RecordIntent | undefined;
   onChange?: MockFunction | undefined;
-  valueSuggestions?: Array<string> | undefined;
 };
 
 type RenderEditorFunction = (props?: RenderEditorProps) => RenderResult;
@@ -177,7 +153,6 @@ const renderEditor: RenderEditorFunction = (
       mode={props?.mode || ModelColumnEditorMode.Record}
       initialValue={props?.initialValue}
       recordIntent={props?.recordIntent}
-      valueSuggestions={props?.valueSuggestions}
       onChange={
         (props?.onChange as unknown as (value: string) => void) ||
         ((): void => {})
@@ -350,6 +325,7 @@ describe("opening a step does not rewrite what it does", () => {
 
   test("editing a value is reported, with the exact JSON that will be stored", async () => {
     const onChange: MockFunction = getJestMockFunction();
+    const user: UserEvent = userEvent.setup({ delay: null });
 
     const { findByTestId }: RenderResult = renderEditor({
       initialValue: '{"name":"Acknowledged"}',
@@ -357,9 +333,13 @@ describe("opening a step does not rewrite what it does", () => {
       onChange: onChange,
     });
 
-    fireEvent.change(await findByTestId("model-column-value-name"), {
-      target: { value: "Resolved" },
-    });
+    // A text cell is the chip editor: select what is there and type over it.
+    placeCaret(
+      await findByTestId("model-column-value-name"),
+      0,
+      "Acknowledged".length,
+    );
+    await user.paste("Resolved");
 
     expect(onChange).toHaveBeenCalledWith('{"name":"Resolved"}');
   });
@@ -444,7 +424,13 @@ describe("editing as JSON", () => {
 
     fireEvent.click(await findByTestId("model-column-json-toggle"));
 
-    expect(getByTestId("monaco")).toHaveValue('{"name":"Acknowledged"}');
+    // The real code editor: its textarea holds the document.
+    expect(getByTestId("code-editor-input")).toHaveValue(
+      '{"name":"Acknowledged"}',
+    );
+    expect(
+      document.querySelector('[data-code-type="json"]'),
+    ).toBeInTheDocument();
   });
 
   test("a key added in the JSON view is there as a field on the way back", async () => {
@@ -461,7 +447,7 @@ describe("editing as JSON", () => {
     );
 
     fireEvent.click(await findByTestId("model-column-json-toggle"));
-    fireEvent.change(getByTestId("monaco"), {
+    fireEvent.change(getByTestId("code-editor-input"), {
       target: { value: '{"name":"Acknowledged","color":"#ffffff"}' },
     });
     fireEvent.click(getByTestId("model-column-json-toggle"));
@@ -481,13 +467,15 @@ describe("editing as JSON", () => {
     );
 
     fireEvent.click(await findByTestId("model-column-json-toggle"));
-    fireEvent.change(getByTestId("monaco"), {
+    fireEvent.change(getByTestId("code-editor-input"), {
       target: { value: '{"name":{"nested":"value"}}' },
     });
     fireEvent.click(getByTestId("model-column-json-toggle"));
 
     // Still on JSON, with the edit intact and a reason given.
-    expect(getByTestId("monaco")).toHaveValue('{"name":{"nested":"value"}}');
+    expect(getByTestId("code-editor-input")).toHaveValue(
+      '{"name":{"nested":"value"}}',
+    );
     expect(getByText(/can't go back to fields/)).toBeInTheDocument();
   });
 
@@ -526,14 +514,21 @@ describe("values the rows keep faithfully", () => {
   });
 
   test("a reference is shown as a reference on a numeric column", async () => {
-    const { findByDisplayValue }: RenderResult = renderEditor({
+    const { findByTestId, getByTestId }: RenderResult = renderEditor({
       initialValue: '{"order":"{{local.variables.position}}"}',
       recordIntent: RecordIntent.Update,
-      valueSuggestions: ["{{local.variables.position}}"],
     });
 
+    // The value, as a chip, with "abc" to type a number again.
+    const cell: HTMLElement = await findByTestId("model-column-value-order");
+
+    expect(chipsIn(cell)).toHaveLength(1);
+    expect(chipsIn(cell)[0]).toHaveAttribute(
+      "title",
+      "{{local.variables.position}}",
+    );
     expect(
-      await findByDisplayValue("{{local.variables.position}}"),
+      getByTestId("model-column-value-order-type-a-value"),
     ).toBeInTheDocument();
   });
 });
@@ -644,23 +639,24 @@ describe("an edit reaches the workflow, whatever the cell was holding", () => {
     expect(onChange).toHaveBeenLastCalledWith('{"name":"Acknowledged"}');
   });
 
-  test("typing {{ turns the cell into a reference there and then", async () => {
-    const { findByTestId, getByTestId }: RenderResult = renderEditor({
+  test("a reference typed into a text cell becomes a chip there and then", async () => {
+    const user: UserEvent = userEvent.setup({ delay: null });
+    const { findByTestId }: RenderResult = renderEditor({
       initialValue: '{"name":"Acknowledged"}',
       recordIntent: RecordIntent.Update,
     });
 
-    fireEvent.change(await findByTestId("model-column-value-name"), {
-      target: { value: "{{local.variables.stateName}}" },
-    });
+    const cell: HTMLElement = await findByTestId("model-column-value-name");
 
-    expect(
-      getByTestId("model-column-value-name-reference-toggle"),
-    ).toHaveAttribute("aria-pressed", "true");
+    placeCaret(cell, 0, "Acknowledged".length);
+    await user.keyboard(keys("{{local.variables.stateName}}"));
+
+    expect(chipsIn(cell)).toHaveLength(1);
   });
 
   test("and the reference is what gets stored", async () => {
     const onChange: MockFunction = getJestMockFunction();
+    const user: UserEvent = userEvent.setup({ delay: null });
 
     const { findByTestId }: RenderResult = renderEditor({
       initialValue: '{"name":"Acknowledged"}',
@@ -668,9 +664,12 @@ describe("an edit reaches the workflow, whatever the cell was holding", () => {
       onChange: onChange,
     });
 
-    fireEvent.change(await findByTestId("model-column-value-name"), {
-      target: { value: "{{local.variables.stateName}}" },
-    });
+    placeCaret(
+      await findByTestId("model-column-value-name"),
+      0,
+      "Acknowledged".length,
+    );
+    await user.paste("{{local.variables.stateName}}");
 
     expect(onChange).toHaveBeenLastCalledWith(
       '{"name":"{{local.variables.stateName}}"}',