@oneuptime/common 12.0.13 → 12.0.15

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

@@ -0,0 +1,113 @@
+/*
+ * Perf contract for MarkdownViewer's mermaid integration (linear-polish):
+ * mermaid's pre-bundled build is ~4.5MB — it used to be statically imported
+ * and initialized at module scope, which dragged it into the Dashboard's
+ * eager first-load graph through every markdown call site. The contract now
+ * is: importing MarkdownViewer and rendering plain markdown must NEVER load
+ * mermaid; only a rendered mermaid diagram may trigger the dynamic import,
+ * and theme initialization must happen after that load.
+ *
+ * The jest module registry is the probe: the "mermaid" factory below flips a
+ * sentinel when the module is actually required, which under ts-jest's
+ * CommonJS output happens exactly when the component executes its dynamic
+ * import(). (Common/jest.config.json maps "mermaid" to a stub via
+ * moduleNameMapper, but an explicit jest.mock factory takes precedence.)
+ */
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+
+interface MockMermaidState {
+  required: boolean;
+  initializeCalls: Array<unknown>;
+  renderCalls: Array<string>;
+}
+
+const mockMermaidState: MockMermaidState = {
+  required: false,
+  initializeCalls: [],
+  renderCalls: [],
+};
+
+jest.mock("mermaid", () => {
+  // Runs only when something actually requires mermaid — the sentinel.
+  mockMermaidState.required = true;
+  return {
+    __esModule: true,
+    default: {
+      initialize: (config: unknown): void => {
+        mockMermaidState.initializeCalls.push(config);
+      },
+      render: (_id: string, chart: string): Promise<{ svg: string }> => {
+        mockMermaidState.renderCalls.push(chart);
+        return Promise.resolve({
+          svg: '<svg><g data-diagram="true"></g></svg>',
+        });
+      },
+    },
+  };
+});
+
+import "@testing-library/jest-dom";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import React from "react";
+import MarkdownViewer, {
+  MermaidDiagram,
+} from "../../../UI/Components/Markdown.tsx/MarkdownViewer";
+
+/*
+ * Captured immediately after the static import above: if MarkdownViewer ever
+ * regresses to a module-scope `import mermaid from "mermaid"` (or a
+ * module-scope initialize call), this flips to true before any test runs.
+ */
+const mermaidRequiredAtModuleLoad: boolean = mockMermaidState.required;
+
+afterEach(() => {
+  cleanup();
+});
+
+/*
+ * NOTE: test order inside this file is load-bearing. The sentinel is
+ * one-directional (a module stays required for the rest of the process), so
+ * the "never loads" assertions must run before the test that legitimately
+ * triggers the load.
+ */
+describe("MarkdownViewer lazy mermaid contract", () => {
+  test("importing the MarkdownViewer module does not require mermaid", () => {
+    expect(mermaidRequiredAtModuleLoad).toBe(false);
+  });
+
+  test("rendering plain markdown does not require mermaid", () => {
+    render(
+      <MarkdownViewer
+        text={"# Hello\n\nJust **plain** markdown with `inline code`."}
+      />,
+    );
+
+    const rendered: HTMLElement = screen.getByTestId("react-markdown");
+    expect(rendered).toBeInTheDocument();
+    expect(mockMermaidState.required).toBe(false);
+    expect(mockMermaidState.initializeCalls).toHaveLength(0);
+  });
+
+  test("rendering a mermaid diagram dynamically loads mermaid, then initializes and renders", async () => {
+    const chart: string = "graph TD; A-->B";
+    const { container } = render(<MermaidDiagram chart={chart} />);
+
+    // The load + render pipeline is async (dynamic import then render()).
+    await waitFor((): void => {
+      expect(mockMermaidState.renderCalls).toContain(chart);
+    });
+
+    expect(mockMermaidState.required).toBe(true);
+
+    /*
+     * Theme setup must run post-load and before render: with no module-scope
+     * initialization left, the only way initialize() can have been called is
+     * from the diagram's own effect after the dynamic import resolved.
+     */
+    expect(mockMermaidState.initializeCalls.length).toBeGreaterThan(0);
+
+    await waitFor((): void => {
+      expect(container.querySelector("svg")).not.toBeNull();
+    });
+  });
+});

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

@@ -0,0 +1,110 @@
+/*
+ * Retry contract for MarkdownViewer's lazy mermaid load (linear-polish):
+ * loadMermaid() caches the dynamic-import promise module-wide so multiple
+ * diagrams share one load — but a REJECTED load (flaky network, a deploy
+ * rotating hashed chunk names) must not be cached forever. The contract is:
+ * the diagram that triggered the failed load shows its error state, and the
+ * next diagram mount retries the import from scratch.
+ *
+ * This lives in its own file rather than MarkdownLazy.test.tsx because that
+ * file's sentinel design is one-directional: once its legitimate-load test
+ * has run, jest's mock registry AND the component's module-scope cache both
+ * hold the successfully resolved module for the rest of the process, so a
+ * failure can no longer be staged there (jest.resetModules() is no escape —
+ * it would fork React's identity out from under @testing-library). Here the
+ * FIRST require of "mermaid" throws instead: jest memoizes a mock factory's
+ * result only after it returns, so a throwing factory is re-invoked on the
+ * next require — which is exactly the retry path under test.
+ */
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+
+interface MockMermaidState {
+  factoryAttempts: number;
+  failNextRequire: boolean;
+  renderCalls: Array<string>;
+}
+
+const mockMermaidState: MockMermaidState = {
+  factoryAttempts: 0,
+  failNextRequire: true,
+  renderCalls: [],
+};
+
+jest.mock("mermaid", () => {
+  // Runs on every require until it returns once — then jest memoizes it.
+  mockMermaidState.factoryAttempts++;
+  if (mockMermaidState.failNextRequire) {
+    mockMermaidState.failNextRequire = false;
+    throw new Error("simulated mermaid chunk load failure");
+  }
+  return {
+    __esModule: true,
+    default: {
+      initialize: (): void => {
+        // theme setup is exercised in MarkdownLazy.test.tsx — a no-op here.
+      },
+      render: (_id: string, chart: string): Promise<{ svg: string }> => {
+        mockMermaidState.renderCalls.push(chart);
+        return Promise.resolve({
+          svg: '<svg><g data-diagram="true"></g></svg>',
+        });
+      },
+    },
+  };
+});
+
+import "@testing-library/jest-dom";
+import { cleanup, render, waitFor } from "@testing-library/react";
+import React from "react";
+import { MermaidDiagram } from "../../../UI/Components/Markdown.tsx/MarkdownViewer";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("MarkdownViewer mermaid load retry contract", () => {
+  test("a failed chunk load surfaces as the diagram's error state, and the next mount retries and succeeds", async () => {
+    const chart: string = "graph TD; A-->B";
+
+    /*
+     * First mount: the dynamic import rejects (the mock factory throws on
+     * the first require). The diagram must fall into its error path, not
+     * hang or crash the tree.
+     */
+    const first: ReturnType<typeof render> = render(
+      <MermaidDiagram chart={chart} />,
+    );
+
+    await waitFor((): void => {
+      expect(
+        first.container.querySelector("pre.text-red-500")?.textContent,
+      ).toContain("Error rendering diagram");
+    });
+
+    expect(mockMermaidState.factoryAttempts).toBe(1);
+    expect(mockMermaidState.renderCalls).toHaveLength(0);
+
+    first.unmount();
+
+    /*
+     * Second mount: the rejected load must NOT have been cached — the
+     * component retries the import, which now succeeds, and the diagram
+     * renders. Before the fix, the module-scope promise cache pinned the
+     * first rejection forever and this mount showed the error again.
+     */
+    const second: ReturnType<typeof render> = render(
+      <MermaidDiagram chart={chart} />,
+    );
+
+    await waitFor((): void => {
+      expect(mockMermaidState.renderCalls).toContain(chart);
+    });
+
+    expect(mockMermaidState.factoryAttempts).toBe(2);
+
+    await waitFor((): void => {
+      expect(second.container.querySelector("svg")).not.toBeNull();
+    });
+    expect(second.container.querySelector("pre.text-red-500")).toBeNull();
+  });
+});

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

@@ -50,6 +50,7 @@ jest.mock("../../../../UI/Utils/Project", () => {
 import useCustomFieldColumns, {
   CustomFieldColumnsResult,
 } from "../../../../UI/Components/ModelTable/useCustomFieldColumns";
+import ModelListCache from "../../../../UI/Utils/ModelListCache";
 import { CustomFieldDefinition } from "../../../../UI/Components/ModelTable/CustomFieldColumns";
 import BaseModel from "../../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import IncidentCustomField from "../../../../Models/DatabaseModels/IncidentCustomField";
@@ -115,6 +116,13 @@ afterEach(() => {
   cleanup();
   getListMock.mockReset();
   getCurrentProjectIdMock.mockReset();
+  /*
+   * The hook now reads through ModelListCache, whose module-level cache and
+   * in-flight dedup survive between tests. Every test here uses the same
+   * model + project + shape (one key), so without a reset one test's request
+   * - resolved or deliberately never-resolving - would be served to the next.
+   */
+  ModelListCache.invalidateAll();
 });
 
 describe("useCustomFieldColumns — isLoading on the first render", () => {