@oneuptime/common 12.0.6 → 12.0.8

package/Tests/Types/Workflow/Templates.test.ts

@@ -0,0 +1,403 @@
+/*
+ * Every shipped template is checked against the real component registry and
+ * against the same linter the builder runs.
+ *
+ * A template is the first workflow a lot of people will ever see, so one with
+ * a mistyped argument id, a reference to a return value that does not exist,
+ * or an edge leaving a port the component does not have would be worse than
+ * shipping no templates at all — it teaches the wrong thing and looks broken
+ * on arrival. Writing these tests caught exactly that: the Log component's
+ * argument is "value" (not "log-message"), the Schedule trigger's is
+ * "schedule" (not "schedule-at"), the Manual trigger leaves by "success" and
+ * the Schedule trigger by "execute" (neither is "out").
+ */
+
+import {
+  WorkflowTemplate,
+  buildGraphForTemplate,
+  getTemplateGraphSpec,
+  getWorkflowTemplates,
+} from "../../../Types/Workflow/Templates";
+import Components from "../../../Types/Workflow/Components";
+import ComponentMetadata, {
+  Argument,
+  ComponentType,
+  NodeDataProp,
+  Port,
+  ReturnValue,
+} from "../../../Types/Workflow/Component";
+import { JSONObject } from "../../../Types/JSON";
+import {
+  LintGraphEdge,
+  LintGraphNode,
+  WorkflowLintIssue,
+  WorkflowLintResult,
+  WorkflowLintSeverity,
+  lintWorkflowGraph,
+} from "../../../UI/Components/Workflow/GraphLint";
+import { describe, expect, test } from "@jest/globals";
+
+const templates: Array<WorkflowTemplate> = getWorkflowTemplates();
+
+type FindMetadataFunction = (
+  metadataId: string,
+) => ComponentMetadata | undefined;
+
+const findMetadata: FindMetadataFunction = (
+  metadataId: string,
+): ComponentMetadata | undefined => {
+  return Components.find((component: ComponentMetadata) => {
+    return component.id === metadataId;
+  });
+};
+
+let idCounter: number = 0;
+
+type GenerateIdFunction = () => string;
+
+const generateId: GenerateIdFunction = (): string => {
+  idCounter++;
+  return `generated-${idCounter}`;
+};
+
+/**
+ * Build a template's graph and hydrate each node with its real metadata, the
+ * way the builder does on load. Without the metadata the linter cannot check
+ * arguments or return values.
+ */
+type HydrateFunction = (templateId: string) => {
+  nodes: Array<LintGraphNode>;
+  edges: Array<LintGraphEdge>;
+};
+
+const hydrate: HydrateFunction = (
+  templateId: string,
+): { nodes: Array<LintGraphNode>; edges: Array<LintGraphEdge> } => {
+  const graph: JSONObject = buildGraphForTemplate(
+    templateId,
+    generateId,
+  ) as JSONObject;
+
+  const rawNodes: Array<JSONObject> = graph["nodes"] as Array<JSONObject>;
+  const rawEdges: Array<JSONObject> = graph["edges"] as Array<JSONObject>;
+
+  const nodes: Array<LintGraphNode> = rawNodes.map(
+    (node: JSONObject): LintGraphNode => {
+      const data: JSONObject = node["data"] as JSONObject;
+      const metadata: ComponentMetadata | undefined = findMetadata(
+        data["metadataId"] as string,
+      );
+
+      return {
+        id: node["id"] as string,
+        data: {
+          ...(data as unknown as NodeDataProp),
+          metadata: metadata as ComponentMetadata,
+        },
+      };
+    },
+  );
+
+  const edges: Array<LintGraphEdge> = rawEdges.map(
+    (edge: JSONObject): LintGraphEdge => {
+      return {
+        source: edge["source"] as string,
+        target: edge["target"] as string,
+      };
+    },
+  );
+
+  return { nodes: nodes, edges: edges };
+};
+
+describe("workflow templates", () => {
+  test("there is at least one", () => {
+    expect(templates.length).toBeGreaterThan(0);
+  });
+
+  test("each has a unique id", () => {
+    const ids: Array<string> = templates.map((template: WorkflowTemplate) => {
+      return template.id;
+    });
+
+    expect(new Set(ids).size).toBe(ids.length);
+  });
+
+  test("each is described well enough to choose between them", () => {
+    for (const template of templates) {
+      expect(template.name.length).toBeGreaterThan(0);
+      expect(template.description.length).toBeGreaterThan(0);
+      expect(template.teaches.length).toBeGreaterThan(0);
+      expect(template.workflowName.length).toBeGreaterThan(0);
+      expect(template.workflowDescription.length).toBeGreaterThan(0);
+    }
+  });
+
+  test("an unknown template id yields nothing rather than throwing", () => {
+    expect(getTemplateGraphSpec("does-not-exist")).toBeNull();
+    expect(buildGraphForTemplate("does-not-exist", generateId)).toBeNull();
+  });
+});
+
+describe.each(
+  templates.map((template: WorkflowTemplate) => {
+    return [template.id, template] as [string, WorkflowTemplate];
+  }),
+)("template %s", (templateId: string) => {
+  test("every component it uses exists in the registry", () => {
+    const spec: { nodes: Array<{ metadataId: string }> } = getTemplateGraphSpec(
+      templateId,
+    ) as { nodes: Array<{ metadataId: string }> };
+
+    for (const node of spec.nodes) {
+      expect(findMetadata(node.metadataId)).toBeDefined();
+    }
+  });
+
+  test("every argument it sets is a real argument on that component", () => {
+    const spec: {
+      nodes: Array<{ metadataId: string; args?: JSONObject | undefined }>;
+    } = getTemplateGraphSpec(templateId) as {
+      nodes: Array<{ metadataId: string; args?: JSONObject | undefined }>;
+    };
+
+    for (const node of spec.nodes) {
+      const metadata: ComponentMetadata = findMetadata(
+        node.metadataId,
+      ) as ComponentMetadata;
+
+      for (const argumentId of Object.keys(node.args || {})) {
+        const argument: Argument | undefined = metadata.arguments.find(
+          (candidate: Argument) => {
+            return candidate.id === argumentId;
+          },
+        );
+
+        expect(argument).toBeDefined();
+      }
+    }
+  });
+
+  /*
+   * The runner looks up outPorts[sourceHandle] to decide what runs next. A
+   * port id that does not exist means the workflow silently stops after the
+   * first step.
+   */
+  test("every edge leaves a port the component actually has", () => {
+    const spec: {
+      nodes: Array<{ componentId: string; metadataId: string }>;
+      edges: Array<{ fromComponentId: string; fromPort: string }>;
+    } = getTemplateGraphSpec(templateId) as {
+      nodes: Array<{ componentId: string; metadataId: string }>;
+      edges: Array<{ fromComponentId: string; fromPort: string }>;
+    };
+
+    for (const edge of spec.edges) {
+      const node: { metadataId: string } = spec.nodes.find(
+        (candidate: { componentId: string }) => {
+          return candidate.componentId === edge.fromComponentId;
+        },
+      ) as { metadataId: string };
+
+      const metadata: ComponentMetadata = findMetadata(
+        node.metadataId,
+      ) as ComponentMetadata;
+
+      const port: Port | undefined = metadata.outPorts.find(
+        (candidate: Port) => {
+          return candidate.id === edge.fromPort;
+        },
+      );
+
+      expect(port).toBeDefined();
+    }
+  });
+
+  test("every required argument is filled in", () => {
+    const spec: {
+      nodes: Array<{ metadataId: string; args?: JSONObject | undefined }>;
+    } = getTemplateGraphSpec(templateId) as {
+      nodes: Array<{ metadataId: string; args?: JSONObject | undefined }>;
+    };
+
+    for (const node of spec.nodes) {
+      const metadata: ComponentMetadata = findMetadata(
+        node.metadataId,
+      ) as ComponentMetadata;
+
+      for (const argument of metadata.arguments) {
+        if (!argument.required) {
+          continue;
+        }
+
+        expect(Object.keys(node.args || {})).toContain(argument.id);
+      }
+    }
+  });
+
+  test("every {{...}} reference points at a return value that exists", () => {
+    const spec: {
+      nodes: Array<{ componentId: string; metadataId: string }>;
+    } = getTemplateGraphSpec(templateId) as {
+      nodes: Array<{ componentId: string; metadataId: string }>;
+    };
+
+    const graph: { nodes: Array<LintGraphNode>; edges: Array<LintGraphEdge> } =
+      hydrate(templateId);
+
+    const references: Array<string> = [];
+
+    for (const node of graph.nodes) {
+      for (const value of Object.values(node.data.arguments || {})) {
+        if (typeof value !== "string") {
+          continue;
+        }
+
+        const matches: Array<string> = value.match(/{{(.*?)}}/g) || [];
+        references.push(...matches);
+      }
+    }
+
+    for (const reference of references) {
+      const path: string = reference.slice(2, -2);
+      const parts: Array<string> = path.split(".");
+
+      expect(parts[0]).toBe("local");
+      expect(parts[1]).toBe("components");
+
+      const referencedNode: { metadataId: string } = spec.nodes.find(
+        (candidate: { componentId: string }) => {
+          return candidate.componentId === parts[2];
+        },
+      ) as { metadataId: string };
+
+      expect(referencedNode).toBeDefined();
+      expect(parts[3]).toBe("returnValues");
+
+      const metadata: ComponentMetadata = findMetadata(
+        referencedNode.metadataId,
+      ) as ComponentMetadata;
+
+      const returnValue: ReturnValue | undefined = metadata.returnValues.find(
+        (candidate: ReturnValue) => {
+          return candidate.id === parts[4];
+        },
+      );
+
+      expect(returnValue).toBeDefined();
+    }
+  });
+
+  /*
+   * The end-to-end check: run the shipped template through the same linter the
+   * builder applies to a graph someone is editing. Zero errors is the bar.
+   */
+  test("passes the builder's own graph checks with no errors", () => {
+    const result: WorkflowLintResult = lintWorkflowGraph(hydrate(templateId));
+
+    const errors: Array<WorkflowLintIssue> = result.issues.filter(
+      (issue: WorkflowLintIssue) => {
+        return issue.severity === WorkflowLintSeverity.Error;
+      },
+    );
+
+    expect(
+      errors.map((issue: WorkflowLintIssue) => {
+        return issue.message;
+      }),
+    ).toEqual([]);
+  });
+
+  test("has exactly one trigger, and it is a real trigger component", () => {
+    const spec: {
+      nodes: Array<{ metadataId: string; componentType: ComponentType }>;
+    } = getTemplateGraphSpec(templateId) as {
+      nodes: Array<{ metadataId: string; componentType: ComponentType }>;
+    };
+
+    const triggers: Array<{ metadataId: string }> = spec.nodes.filter(
+      (node: { componentType: ComponentType }) => {
+        return node.componentType === ComponentType.Trigger;
+      },
+    );
+
+    expect(triggers).toHaveLength(1);
+
+    const metadata: ComponentMetadata = findMetadata(
+      triggers[0]?.metadataId as string,
+    ) as ComponentMetadata;
+
+    expect(metadata.componentType).toBe(ComponentType.Trigger);
+  });
+
+  /*
+   * Two workflows created from one template must not share react-flow ids, or
+   * editing one would be liable to disturb the other on import/export.
+   */
+  test("builds fresh node ids each time", () => {
+    const first: JSONObject = buildGraphForTemplate(
+      templateId,
+      generateId,
+    ) as JSONObject;
+    const second: JSONObject = buildGraphForTemplate(
+      templateId,
+      generateId,
+    ) as JSONObject;
+
+    const firstIds: Array<string> = (first["nodes"] as Array<JSONObject>).map(
+      (node: JSONObject) => {
+        return node["id"] as string;
+      },
+    );
+    const secondIds: Array<string> = (second["nodes"] as Array<JSONObject>).map(
+      (node: JSONObject) => {
+        return node["id"] as string;
+      },
+    );
+
+    for (const id of firstIds) {
+      expect(secondIds).not.toContain(id);
+    }
+  });
+
+  test("keeps stable component ids, because references point at them", () => {
+    const first: JSONObject = buildGraphForTemplate(
+      templateId,
+      generateId,
+    ) as JSONObject;
+    const second: JSONObject = buildGraphForTemplate(
+      templateId,
+      generateId,
+    ) as JSONObject;
+
+    type ComponentIdsFunction = (graph: JSONObject) => Array<string>;
+
+    const componentIds: ComponentIdsFunction = (
+      graph: JSONObject,
+    ): Array<string> => {
+      return (graph["nodes"] as Array<JSONObject>).map((node: JSONObject) => {
+        return (node["data"] as JSONObject)["id"] as string;
+      });
+    };
+
+    expect(componentIds(first)).toEqual(componentIds(second));
+  });
+
+  test("edges connect nodes that are in the graph", () => {
+    const graph: JSONObject = buildGraphForTemplate(
+      templateId,
+      generateId,
+    ) as JSONObject;
+
+    const nodeIds: Array<string> = (graph["nodes"] as Array<JSONObject>).map(
+      (node: JSONObject) => {
+        return node["id"] as string;
+      },
+    );
+
+    for (const edge of graph["edges"] as Array<JSONObject>) {
+      expect(nodeIds).toContain(edge["source"] as string);
+      expect(nodeIds).toContain(edge["target"] as string);
+    }
+  });
+});

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

@@ -1,5 +1,5 @@
 import NotFound, { ComponentProps } from "../../../UI/Components/404";
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
 import Route from "../../../Types/API/Route";
 import Email from "../../../Types/Email";

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

@@ -1,5 +1,5 @@
 import Alert, { AlertType } from "../../../UI/Components/Alerts/Alert";
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 import { describe, expect, jest } from "@jest/globals";

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

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

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

@@ -2,7 +2,7 @@ import BasicForm from "../../../UI/Components/Forms/BasicForm";
 import Fields from "../../../UI/Components/Forms/Types/Fields";
 import FormFieldSchemaType from "../../../UI/Components/Forms/Types/FormFieldSchemaType";
 import FormValues from "../../../UI/Components/Forms/Types/FormValues";
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";
@@ -11,6 +11,21 @@ import * as React from "react";
 import { describe, expect } from "@jest/globals";
 import getJestMockFunction, { MockFunction } from "../../../Tests/MockType";
 
+/*
+ * Type without userEvent's default inter-keystroke await. Input keeps a display
+ * value in state, syncs it from props, and then writes it straight onto the DOM
+ * node -- so a keystroke that arrives before React has committed the previous
+ * one gets overwritten by the stale value and is destroyed rather than merely
+ * delayed. Nothing recovers it, and the form submits "test@sample.cm". With
+ * `delay: null` the whole string is dispatched inside a single act(), where
+ * effects flush between keys, so that window never opens. Measured on a loaded
+ * machine: the default pacing dropped characters in 4 runs out of 6, this in 0
+ * out of 8.
+ */
+function setupUser(): UserEvent {
+  return userEvent.setup({ delay: null });
+}
+
 describe("BasicForm test", () => {
   const fields: Fields<FormValues<any>> = [
     {
@@ -65,6 +80,11 @@ describe("BasicForm test", () => {
     expect(forgotPasswordText).toHaveTextContent("Forgot password?");
   });
 
+  /*
+   * The explicit timeout: typing 24 characters re-validates the whole form once
+   * per keystroke, which finishes well inside a second locally but has no
+   * headroom left against Jest's 5s default on a loaded runner.
+   */
   test("Should accept values and submit if valid", async () => {
     const handleSubmit: MockFunction = getJestMockFunction();
     const onSubmitSuccessful: MockFunction = getJestMockFunction();
@@ -82,7 +102,7 @@ describe("BasicForm test", () => {
         submitButtonText="Login"
       />,
     );
-    const user: UserEvent = userEvent.setup();
+    const user: UserEvent = setupUser();
     await user.type(screen.getByTestId("email"), "test@sample.com");
     await user.type(screen.getByTestId("password"), "12345678");
 
@@ -101,7 +121,7 @@ describe("BasicForm test", () => {
         onSubmitSuccessful,
       );
     });
-  });
+  }, 30000);
 
   test("Should display error if values are invalid", async () => {
     const handleSubmit: MockFunction = getJestMockFunction();
@@ -117,19 +137,28 @@ describe("BasicForm test", () => {
         submitButtonText="Login"
       />,
     );
-    const user: UserEvent = userEvent.setup();
+    const user: UserEvent = setupUser();
     await user.type(screen.getByTestId("email"), "humed");
     await user.type(screen.getByTestId("password"), "1238");
 
     const loginButton: HTMLButtonElement = screen.getByTestId("Login");
     await user.click(loginButton);
 
-    const errorComponent: HTMLElement[] =
-      screen.getAllByTestId("error-message");
+    /*
+     * Both errors have to be waited for. The email error is already on screen
+     * -- it was raised while the user was still typing -- but the password one
+     * only lands once the submit-time validation has flushed, so reading the
+     * list straight after the click finds a single error and indexes off the
+     * end of it.
+     */
+    await waitFor(() => {
+      const errorComponent: HTMLElement[] =
+        screen.getAllByTestId("error-message");
 
-    expect(errorComponent[0]?.innerHTML).toEqual("Email is not valid.");
-    expect(errorComponent[1]?.innerHTML).toEqual(
-      "Password cannot be less than 6 characters.",
-    );
+      expect(errorComponent[0]?.innerHTML).toEqual("Email is not valid.");
+      expect(errorComponent[1]?.innerHTML).toEqual(
+        "Password cannot be less than 6 characters.",
+      );
+    });
   });
 });

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

@@ -4,7 +4,7 @@ import Button, {
 } from "../../../UI/Components/Button/Button";
 import ButtonType from "../../../UI/Components/Button/ButtonTypes";
 import ShortcutKey from "../../../UI/Components/ShortcutKey/ShortcutKey";
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
 import IconProp from "../../../Types/Icon/IconProp";
 import React from "react";

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

@@ -3,7 +3,7 @@ import Card, {
   CardButtonSchema,
   ComponentProps,
 } from "../../../UI/Components/Card/Card";
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
 import IconProp from "../../../Types/Icon/IconProp";
 import React, { ReactElement } from "react";

package/Tests/UI/Components/Charts/AxisTickColor.test.tsx

@@ -1,7 +1,7 @@
 import { AreaChart } from "../../../../UI/Components/Charts/ChartLibrary/AreaChart/AreaChart";
 import { BarChart } from "../../../../UI/Components/Charts/ChartLibrary/BarChart/BarChart";
 import { LineChart } from "../../../../UI/Components/Charts/ChartLibrary/LineChart/LineChart";
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { render } from "@testing-library/react";
 import React from "react";
 import { describe, expect, test } from "@jest/globals";

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

@@ -1,5 +1,5 @@
 import ColorViewer from "../../../UI/Components/ColorViewer/ColorViewer";
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { fireEvent, render } from "@testing-library/react";
 import Color from "../../../Types/Color";
 import * as React from "react";

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

@@ -1,6 +1,12 @@
 import ComponentsModal from "../../../UI/Components/Workflow/ComponentsModal";
 import { describe, expect, it } from "@jest/globals";
-import "@testing-library/jest-dom/extend-expect";
+/*
+ * The main entry, not "/extend-expect": the latter no longer ships type
+ * declarations, so every jest-dom matcher in this file fails to typecheck and
+ * the whole suite is skipped before a single assertion runs. This suite is one
+ * of only two that exercise SideOver, so it has to actually run.
+ */
+import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
 import IconProp from "../../../Types/Icon/IconProp";
 import ComponentMetadata, {