@oneuptime/common 12.0.13 → 12.0.15

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

@@ -9,7 +9,7 @@ import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
 import IconProp from "../../../Types/Icon/IconProp";
 import React from "react";
-import { describe, expect, jest } from "@jest/globals";
+import { afterEach, describe, expect, jest } from "@jest/globals";
 
 describe("Button", () => {
   test("it should render correctly with title and icon", () => {
@@ -479,3 +479,177 @@ describe("Button disabled behaviour", () => {
     expect(handleClick).not.toBeCalled();
   });
 });
+
+describe("Button motion", () => {
+  /*
+   * Hover/focus colour changes ease in instead of snapping. The classes are
+   * appended once at the shared point every variant funnels through, so every
+   * style must carry them.
+   */
+  test.each(ALL_BUTTON_STYLES)(
+    "%s carries the shared colour-transition classes",
+    (_name: string, buttonStyle: ButtonStyleType) => {
+      expect(renderButton({ buttonStyle })).toHaveClass(
+        "transition-colors",
+        "duration-150",
+        "ease-out",
+      );
+    },
+  );
+});
+
+describe("Button link focus rings", () => {
+  /*
+   * LINK and SECONDARY_LINK used to have no ring at all, leaving keyboard
+   * users with no focus indicator on text links. focus-visible (rather than
+   * focus:) so mouse clicks do not flash a ring.
+   */
+  const LINK_STYLES: Array<[string, ButtonStyleType]> = [
+    ["LINK", ButtonStyleType.LINK],
+    ["SECONDARY_LINK", ButtonStyleType.SECONDARY_LINK],
+  ];
+
+  test.each(LINK_STYLES)(
+    "%s carries a focus-visible ring",
+    (_name: string, buttonStyle: ButtonStyleType) => {
+      expect(renderButton({ buttonStyle })).toHaveClass(
+        "focus:outline-none",
+        "focus-visible:ring-2",
+        "focus-visible:ring-indigo-500",
+        "focus-visible:ring-offset-2",
+      );
+    },
+  );
+});
+
+interface ListenerCall {
+  handler: unknown;
+}
+
+type FindKeydownCallsFunction = (
+  spy: ReturnType<typeof jest.spyOn>,
+) => Array<ListenerCall>;
+
+const findKeydownCalls: FindKeydownCallsFunction = (
+  spy: ReturnType<typeof jest.spyOn>,
+): Array<ListenerCall> => {
+  const calls: Array<Array<unknown>> = spy.mock.calls as unknown as Array<
+    Array<unknown>
+  >;
+
+  return calls
+    .filter((call: Array<unknown>): boolean => {
+      return call[0] === "keydown";
+    })
+    .map((call: Array<unknown>): ListenerCall => {
+      return { handler: call[1] };
+    });
+};
+
+describe("Button shortcut listener lifecycle", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  /*
+   * The regression this suite exists for: the shortcut effect had no
+   * dependency array and its cleanup passed a NEW arrow function to
+   * removeEventListener, which therefore never matched the one that was
+   * added — every render leaked a live window keydown listener.
+   */
+  test("unmount removes the same keydown handler that was added", () => {
+    const addSpy: ReturnType<typeof jest.spyOn> = jest.spyOn(
+      window,
+      "addEventListener",
+    );
+    const removeSpy: ReturnType<typeof jest.spyOn> = jest.spyOn(
+      window,
+      "removeEventListener",
+    );
+
+    const { unmount } = render(
+      <Button dataTestId="test-id" shortcutKey={ShortcutKey.Settings} />,
+    );
+
+    const adds: Array<ListenerCall> = findKeydownCalls(addSpy);
+
+    expect(adds).toHaveLength(1);
+    expect(findKeydownCalls(removeSpy)).toHaveLength(0);
+
+    unmount();
+
+    const removes: Array<ListenerCall> = findKeydownCalls(removeSpy);
+
+    expect(removes).toHaveLength(1);
+    /*
+     * removeEventListener only detaches when the handler identity matches the
+     * add; counting calls alone would let the old always-leaking cleanup pass.
+     */
+    expect(removes[0]?.handler).toBe(adds[0]?.handler);
+  });
+
+  test("re-rendering with the same props does not stack extra listeners", () => {
+    const addSpy: ReturnType<typeof jest.spyOn> = jest.spyOn(
+      window,
+      "addEventListener",
+    );
+
+    const { rerender } = render(
+      <Button dataTestId="test-id" shortcutKey={ShortcutKey.Settings} />,
+    );
+
+    rerender(
+      <Button dataTestId="test-id" shortcutKey={ShortcutKey.Settings} />,
+    );
+    rerender(
+      <Button dataTestId="test-id" shortcutKey={ShortcutKey.Settings} />,
+    );
+
+    expect(findKeydownCalls(addSpy)).toHaveLength(1);
+  });
+
+  test("a button without a shortcut registers no keydown listener", () => {
+    const addSpy: ReturnType<typeof jest.spyOn> = jest.spyOn(
+      window,
+      "addEventListener",
+    );
+
+    render(<Button dataTestId="test-id" />);
+
+    expect(findKeydownCalls(addSpy)).toHaveLength(0);
+  });
+
+  test("the shortcut key pressed on the page body fires onClick", () => {
+    const handleClick: () => void = jest.fn();
+
+    render(
+      <Button
+        dataTestId="test-id"
+        shortcutKey={ShortcutKey.Settings}
+        onClick={handleClick}
+      />,
+    );
+
+    fireEvent.keyDown(document.body, { key: "s" });
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  test("the shortcut stops firing after unmount", () => {
+    const handleClick: () => void = jest.fn();
+
+    const { unmount } = render(
+      <Button
+        dataTestId="test-id"
+        shortcutKey={ShortcutKey.Settings}
+        onClick={handleClick}
+      />,
+    );
+
+    unmount();
+
+    fireEvent.keyDown(document.body, { key: "s" });
+
+    expect(handleClick).not.toBeCalled();
+  });
+});

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

@@ -0,0 +1,236 @@
+/*
+ * CodeBlock language contract.
+ *
+ * CodeBlock renders through a trimmed highlight.js (lib/core + explicitly
+ * registered grammars in CodeBlock/LanguageRegistry.ts) instead of
+ * react-highlight, which eagerly imported all 194 grammars (~1.5MB). These
+ * tests pin the contract that trim relies on:
+ *
+ *   1. a registered language still produces real hljs token markup inside
+ *      the same <pre><code> shape react-highlight rendered;
+ *   2. an unknown language degrades to plain escaped text — no crash and no
+ *      hljs "Could not find the language" console noise;
+ *   3. every language a CodeBlock call site actually passes (the audit that
+ *      justified the trim) stays registered — removing a grammar from the
+ *      registry breaks this suite, not a docs page at runtime.
+ */
+import CodeBlock from "../../../UI/Components/CodeBlock/CodeBlock";
+import { resolveRegisteredLanguage } from "../../../UI/Components/CodeBlock/LanguageRegistry";
+import "@testing-library/jest-dom";
+import { render, RenderResult } from "@testing-library/react";
+import React, { ReactElement } from "react";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+
+/*
+ * Every `language` value passed to CodeBlock by a call site at the time of
+ * the react-highlight removal (grep of <CodeBlock usages in Dashboard +
+ * Detail.tsx), plus the deliberately-registered cheap companions. If a new
+ * call site introduces a language, add it here AND register its grammar in
+ * LanguageRegistry.ts.
+ */
+const AUDITED_CALL_SITE_LANGUAGES: Array<string> = [
+  // docs pages, Runner install, MCP pages, Telemetry snippets
+  "bash",
+  // MCP pages, AI agent task logs, subscriber templates (SMS)
+  "text",
+  // Detail.tsx FieldType.Code
+  "plaintext",
+  // MCP pages, logs, Detail.tsx JSON fields, webhook templates
+  "json",
+  // Detail.tsx HTML fields, email templates
+  "html",
+  // Detail.tsx CSS fields
+  "css",
+  // Detail.tsx FieldType.JavaScript, Telemetry snippets
+  "javascript",
+  // Slack / Microsoft Teams subscriber templates
+  "markdown",
+  // Telemetry Documentation per-language OTel snippets
+  "typescript",
+  "python",
+  "go",
+  "csharp",
+  "rust",
+  "php",
+  "ruby",
+  "elixir",
+  "cpp",
+  "swift",
+];
+
+// Registered as cheap future-proofing alongside the audited set.
+const COMPANION_LANGUAGES: Array<string> = [
+  "shell",
+  "yaml",
+  "sql",
+  "dockerfile",
+];
+
+// Built-in hljs aliases callers could plausibly reach for next.
+const EXPECTED_ALIASES: Array<string> = ["js", "ts", "sh", "yml", "md", "py"];
+
+/*
+ * jest.spyOn return types from @jest/globals vs @types/jest disagree in this
+ * repo, so annotate with just the surface these tests read.
+ */
+type SpyLike = {
+  mock: { calls: Array<Array<unknown>> };
+  mockRestore: () => void;
+};
+
+describe("CodeBlock language registry contract", () => {
+  let warnSpy: SpyLike;
+  let errorSpy: SpyLike;
+  let logSpy: SpyLike;
+
+  beforeEach(() => {
+    /*
+     * highlight.js reports unknown languages via console.warn (and older
+     * paths via console.log/error). Silence them so assertions below can
+     * prove they never fire, without polluting test output if they do.
+     */
+    warnSpy = jest
+      .spyOn(console, "warn")
+      .mockImplementation(() => {}) as unknown as SpyLike;
+    errorSpy = jest
+      .spyOn(console, "error")
+      .mockImplementation(() => {}) as unknown as SpyLike;
+    logSpy = jest
+      .spyOn(console, "log")
+      .mockImplementation(() => {}) as unknown as SpyLike;
+  });
+
+  afterEach(() => {
+    warnSpy.mockRestore();
+    errorSpy.mockRestore();
+    logSpy.mockRestore();
+  });
+
+  const getCodeElement: (container: HTMLElement) => HTMLElement = (
+    container: HTMLElement,
+  ): HTMLElement => {
+    const code: HTMLElement | null = container.querySelector("pre code");
+    expect(code).not.toBeNull();
+    return code as HTMLElement;
+  };
+
+  test("renders a registered language with hljs token markup in the pre > code shape", () => {
+    const jsonCode: string = '{ "status": "ok", "count": 2 }';
+    const { container }: RenderResult = render(
+      <CodeBlock code={jsonCode} language="json" />,
+    );
+
+    const code: HTMLElement = getCodeElement(container);
+
+    /*
+     * Same classes react-highlight produced: caller utilities + language-*
+     * marker + the theme-carrying hljs class.
+     */
+    expect(code).toHaveClass("hljs");
+    expect(code).toHaveClass("language-json");
+    expect(code).toHaveClass("p-4");
+
+    // Real token markup, not just escaped text.
+    const tokenSpans: NodeListOf<Element> =
+      code.querySelectorAll('[class*="hljs-"]');
+    expect(tokenSpans.length).toBeGreaterThan(0);
+
+    // Highlighting must not alter the visible source.
+    expect(code.textContent).toBe(jsonCode);
+  });
+
+  test("escapes HTML-looking source when highlighting (no element injection)", () => {
+    const htmlCode: string = '<script>alert("xss")</script>';
+    const { container }: RenderResult = render(
+      <CodeBlock code={htmlCode} language="html" />,
+    );
+
+    const code: HTMLElement = getCodeElement(container);
+
+    // The source must appear as text, never as a live element.
+    expect(code.querySelector("script")).toBeNull();
+    expect(code.textContent).toBe(htmlCode);
+  });
+
+  test("unknown language falls back to plain escaped text without crashing or warning", () => {
+    const snippet: string = "some <plain> text & symbols";
+    const { container }: RenderResult = render(
+      <CodeBlock code={snippet} language="definitely-not-a-language" />,
+    );
+
+    const code: HTMLElement = getCodeElement(container);
+
+    // Plain fallback: content intact, no token markup, no injected elements.
+    expect(code.textContent).toBe(snippet);
+    expect(code.querySelectorAll('[class*="hljs-"]').length).toBe(0);
+    // The theme class stays so the block still paints the dark background.
+    expect(code).toHaveClass("hljs");
+
+    // hljs was never invoked with the unknown name, so no console noise.
+    expect(warnSpy.mock.calls.length).toBe(0);
+    expect(errorSpy.mock.calls.length).toBe(0);
+    expect(logSpy.mock.calls.length).toBe(0);
+  });
+
+  test("resolveRegisteredLanguage returns null for unknown or blank languages", () => {
+    expect(resolveRegisteredLanguage("definitely-not-a-language")).toBeNull();
+    expect(resolveRegisteredLanguage("")).toBeNull();
+    expect(resolveRegisteredLanguage("   ")).toBeNull();
+  });
+
+  test("every audited call-site language is registered and renders", () => {
+    const allLanguages: Array<string> = [
+      ...AUDITED_CALL_SITE_LANGUAGES,
+      ...COMPANION_LANGUAGES,
+    ];
+
+    for (const language of allLanguages) {
+      // Registry-level guarantee: hljs can resolve the name (or its alias).
+      expect(resolveRegisteredLanguage(language)).not.toBeNull();
+
+      // Render-level guarantee: the block renders the source intact.
+      const snippet: string = `sample code for ${language}`;
+      const rendered: RenderResult = render(
+        <CodeBlock code={snippet} language={language} />,
+      );
+      const code: HTMLElement = getCodeElement(rendered.container);
+      expect(code).toHaveClass("hljs");
+      expect(code).toHaveClass(`language-${language}`);
+      expect(code.textContent).toBe(snippet);
+      rendered.unmount();
+    }
+
+    expect(warnSpy.mock.calls.length).toBe(0);
+    expect(errorSpy.mock.calls.length).toBe(0);
+  });
+
+  test("built-in hljs aliases resolve through the registered grammars", () => {
+    for (const alias of EXPECTED_ALIASES) {
+      expect(resolveRegisteredLanguage(alias)).not.toBeNull();
+    }
+  });
+
+  test("language lookup is case- and whitespace-insensitive", () => {
+    expect(resolveRegisteredLanguage(" JSON ")).toBe("json");
+    expect(resolveRegisteredLanguage("Bash")).toBe("bash");
+  });
+
+  test("a ReactElement code child renders plain without crashing", () => {
+    const child: ReactElement = <span data-testid="element-code">inline</span>;
+    const { container, getByTestId }: RenderResult = render(
+      <CodeBlock code={child} language="json" />,
+    );
+
+    const code: HTMLElement = getCodeElement(container);
+    expect(getByTestId("element-code")).toBeInTheDocument();
+    // No highlight pass ran over the element child.
+    expect(code.querySelectorAll('[class*="hljs-"]').length).toBe(0);
+  });
+});