@oneuptime/common 14.0.2 → 14.0.3

package/Tests/Server/Utils/SessionReplay/SessionReplayGateCachePolicy.test.ts

@@ -372,3 +372,106 @@ describe("SessionReplayGateCache.resolvePolicy names the refusal", (): void => {
     expect(resolution.refusal).toBeNull();
   });
 });
+
+/*
+ * RumApplication.sessionReplaySameOriginTracePropagation: the per-app switch
+ * for the recorder's automatic same-origin traceparent + tracestate. The
+ * column is NOT NULL DEFAULT true (on for existing applications too), so
+ * the gate reads anything but an explicit false as on - the model-default
+ * rule of the fallbacks above, not the feature-off rule of the origin list.
+ * Only an operator who switched it off gets it off.
+ */
+describe("SessionReplayGateCache same-origin trace propagation switch", (): void => {
+  beforeEach((): void => {
+    jest.clearAllMocks();
+    projectFindOneByMock.mockResolvedValue(projectRow());
+  });
+
+  async function resolveWith(
+    overrides?: Record<string, unknown>,
+  ): Promise<SessionReplayGatePolicy | null> {
+    appFindOneByMock.mockResolvedValue(appRow(overrides));
+
+    return await SessionReplayGateCache.getPolicy({
+      projectId: PROJECT_ID,
+      appIdentifier: "checkout-web",
+    });
+  }
+
+  it("selects the column from RumApplication", async (): Promise<void> => {
+    await resolveWith();
+
+    expect(appFindOneByMock).toHaveBeenCalled();
+
+    const select: Record<string, unknown> = (
+      appFindOneByMock.mock.calls[0]?.[0] as { select: Record<string, unknown> }
+    ).select;
+
+    expect(select["sessionReplaySameOriginTracePropagation"]).toBe(true);
+
+    /* Next to the cross-origin list it complements, which is still read. */
+    expect(select["sessionReplayTracePropagationOrigins"]).toBe(true);
+  });
+
+  it("an explicit false turns it off", async (): Promise<void> => {
+    const policy: SessionReplayGatePolicy | null = await resolveWith({
+      sessionReplaySameOriginTracePropagation: false,
+    });
+
+    expect(policy).not.toBeNull();
+    expect(policy?.sameOriginTracePropagation).toBe(false);
+  });
+
+  it("an explicit true keeps it on", async (): Promise<void> => {
+    const policy: SessionReplayGatePolicy | null = await resolveWith({
+      sessionReplaySameOriginTracePropagation: true,
+    });
+
+    expect(policy?.sameOriginTracePropagation).toBe(true);
+  });
+
+  it("an absent column reads as the DB default, on", async (): Promise<void> => {
+    const policy: SessionReplayGatePolicy | null = await resolveWith();
+
+    expect(policy).not.toBeNull();
+    expect(policy?.sameOriginTracePropagation).toBe(true);
+  });
+
+  it("a null column reads as the DB default, on", async (): Promise<void> => {
+    const policy: SessionReplayGatePolicy | null = await resolveWith({
+      sessionReplaySameOriginTracePropagation: null,
+    });
+
+    expect(policy?.sameOriginTracePropagation).toBe(true);
+  });
+
+  it("is independent of the cross-origin list: empty origins still propagate same-origin", async (): Promise<void> => {
+    const policy: SessionReplayGatePolicy | null = await resolveWith({
+      sessionReplayTracePropagationOrigins: [],
+    });
+
+    expect(policy?.tracePropagationOrigins).toEqual([]);
+    expect(policy?.sameOriginTracePropagation).toBe(true);
+  });
+
+  it("switching it off leaves the cross-origin list alone", async (): Promise<void> => {
+    const policy: SessionReplayGatePolicy | null = await resolveWith({
+      sessionReplaySameOriginTracePropagation: false,
+      sessionReplayTracePropagationOrigins: ["https://api.example.com"],
+    });
+
+    expect(policy?.sameOriginTracePropagation).toBe(false);
+    expect(policy?.tracePropagationOrigins).toEqual([
+      "https://api.example.com",
+    ]);
+  });
+
+  it("a refused application yields no policy at all, so nothing can propagate", async (): Promise<void> => {
+    const policy: SessionReplayGatePolicy | null = await resolveWith({
+      isSessionReplayEnabled: false,
+      sessionReplaySameOriginTracePropagation: true,
+    });
+
+    expect(policy).toBeNull();
+  });
+});

package/Tests/Types/Rum/WebVitals.test.ts

@@ -0,0 +1,173 @@
+import { describe, expect, test } from "@jest/globals";
+import {
+  describeWebVitalThresholds,
+  formatWebVitalThreshold,
+  WebVitalDefinition,
+  WebVitalDefinitions,
+} from "../../../Types/Rum/WebVitals";
+
+/*
+ * The web-vital definitions carry the plain-language description the RUM
+ * overview shows in each vital's (i) tooltip, and the thresholds its
+ * Good / Needs work / Poor chip is judged against. The tooltip's limits are
+ * derived from the thresholds rather than typed into the description, so a
+ * threshold change cannot leave the tooltip quoting the old number.
+ */
+
+function definition(key: string): WebVitalDefinition {
+  const found: WebVitalDefinition | undefined = WebVitalDefinitions.find(
+    (d: WebVitalDefinition): boolean => {
+      return d.key === key;
+    },
+  );
+
+  if (!found) {
+    throw new Error(`No web vital "${key}"`);
+  }
+
+  return found;
+}
+
+describe("WebVitalDefinitions descriptions", () => {
+  test("every vital has a description", () => {
+    for (const d of WebVitalDefinitions) {
+      expect(typeof d.description).toBe("string");
+      expect(d.description.trim().length).toBeGreaterThan(20);
+    }
+  });
+
+  test.each(
+    WebVitalDefinitions.map(
+      (d: WebVitalDefinition): [string, WebVitalDefinition] => {
+        return [d.key, d];
+      },
+    ),
+  )(
+    "%s: the description is one or two short sentences a tooltip can hold",
+    (_: string, d: WebVitalDefinition) => {
+      expect(d.description.length).toBeLessThanOrEqual(220);
+      expect(d.description).toMatch(/[.]$/);
+      expect(d.description).toBe(d.description.trim());
+      expect(d.description).not.toMatch(/\s{2,}/);
+    },
+  );
+
+  test.each(
+    WebVitalDefinitions.map(
+      (d: WebVitalDefinition): [string, WebVitalDefinition] => {
+        return [d.key, d];
+      },
+    ),
+  )(
+    "%s: the description does not quote a threshold (those are derived)",
+    (_: string, d: WebVitalDefinition) => {
+      /* No "2.5 s", "200 ms", "0.1" style numbers typed into the prose. */
+      expect(d.description).not.toMatch(/\d+(\.\d+)?\s?(ms|s)\b/);
+      expect(d.description).not.toMatch(/\b0\.\d+/);
+    },
+  );
+
+  test("the descriptions are distinct - no vital borrows another's text", () => {
+    const texts: Set<string> = new Set(
+      WebVitalDefinitions.map((d: WebVitalDefinition) => {
+        return d.description;
+      }),
+    );
+
+    expect(texts.size).toBe(WebVitalDefinitions.length);
+  });
+
+  test("each description explains its own vital in plain words", () => {
+    expect(definition("lcp").description).toMatch(/biggest|largest/i);
+    expect(definition("inp").description).toMatch(/click|tap|key/i);
+    expect(definition("cls").description).toMatch(/jump|shift|mov/i);
+    expect(definition("cls").description).toMatch(/lower is better/i);
+    expect(definition("fcp").description).toMatch(/first/i);
+    expect(definition("ttfb").description).toMatch(/first byte/i);
+    expect(definition("ttfb").description).toMatch(/server/i);
+  });
+
+  test("CLS says it is a score, not a time", () => {
+    expect(definition("cls").unit).toBe("score");
+    expect(definition("cls").description).toMatch(/score/i);
+    expect(definition("cls").description).toMatch(/not a time/i);
+  });
+});
+
+describe("formatWebVitalThreshold", () => {
+  test.each([
+    [200, "200 ms"],
+    [500, "500 ms"],
+    [800, "800 ms"],
+    [999, "999 ms"],
+    [1000, "1 s"],
+    [1800, "1.8 s"],
+    [2500, "2.5 s"],
+    [3000, "3 s"],
+    [4000, "4 s"],
+    [1234, "1.23 s"],
+    [0, "0 ms"],
+  ])("%d ms reads as %s", (value: number, expected: string) => {
+    expect(formatWebVitalThreshold(value, "ms")).toBe(expected);
+  });
+
+  test.each([
+    [0.1, "0.1"],
+    [0.25, "0.25"],
+    [0, "0"],
+    [1, "1"],
+  ])(
+    "a score of %d reads as %s, with no unit",
+    (value: number, expected: string) => {
+      expect(formatWebVitalThreshold(value, "score")).toBe(expected);
+    },
+  );
+});
+
+describe("describeWebVitalThresholds", () => {
+  test("words the published limits for each vital", () => {
+    expect(describeWebVitalThresholds(definition("lcp"))).toBe(
+      "Good below 2.5 s; poor at 4 s or more.",
+    );
+    expect(describeWebVitalThresholds(definition("inp"))).toBe(
+      "Good below 200 ms; poor at 500 ms or more.",
+    );
+    expect(describeWebVitalThresholds(definition("cls"))).toBe(
+      "Good below 0.1; poor at 0.25 or more.",
+    );
+    expect(describeWebVitalThresholds(definition("fcp"))).toBe(
+      "Good below 1.8 s; poor at 3 s or more.",
+    );
+    expect(describeWebVitalThresholds(definition("ttfb"))).toBe(
+      "Good below 800 ms; poor at 1.8 s or more.",
+    );
+  });
+
+  test("follows the thresholds, so a changed limit changes the words", () => {
+    expect(
+      describeWebVitalThresholds({
+        unit: "ms",
+        thresholds: { warn: 1200, danger: 2600 },
+      }),
+    ).toBe("Good below 1.2 s; poor at 2.6 s or more.");
+
+    expect(
+      describeWebVitalThresholds({
+        unit: "score",
+        thresholds: { warn: 0.05, danger: 0.5 },
+      }),
+    ).toBe("Good below 0.05; poor at 0.5 or more.");
+  });
+
+  test("the wording matches how the overview rates a value (strict below warn is Good, at danger is Poor)", () => {
+    /*
+     * WebVitalsCard: value < warn -> Good, value < danger -> Needs work,
+     * otherwise Poor. "Good below X" and "poor at Y or more" are exactly
+     * those two comparisons.
+     */
+    const words: string = describeWebVitalThresholds(definition("lcp"));
+
+    expect(words).toContain("below");
+    expect(words).toContain("or more");
+  });
+});

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

@@ -0,0 +1,413 @@
+import "@testing-library/jest-dom";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import FieldLabelElement from "../../../UI/Components/Detail/FieldLabel";
+import InfoCard from "../../../UI/Components/InfoCard/InfoCard";
+import Route from "../../../Types/API/Route";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * The (i) beside a summary card's title: FieldLabel draws it when given a
+ * `tooltip`, and InfoCard - the stat card on every Kubernetes, Proxmox and
+ * Ceph detail page - hands its own `tooltip` to FieldLabel.
+ *
+ * Some InfoCards are clickable (the card is a role="button" that navigates
+ * or toggles a filter). Asking what a number means must not activate the
+ * card: a click on the (i) is swallowed, and so are Enter and Space.
+ */
+
+const READY: string =
+  "Pods that passed their readiness check and receive traffic, out of the pods the workload wants.";
+
+async function hover(trigger: HTMLElement): Promise<void> {
+  fireEvent.mouseEnter(trigger);
+  await act(async () => {
+    jest.advanceTimersByTime(200);
+  });
+}
+
+beforeEach(() => {
+  jest.useFakeTimers();
+});
+
+afterEach(() => {
+  cleanup();
+  jest.useRealTimers();
+});
+
+describe("FieldLabel tooltip", () => {
+  test("without a tooltip there is no (i)", () => {
+    render(<FieldLabelElement title="Ready" />);
+
+    expect(screen.getByText("Ready")).toBeInTheDocument();
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  test.each([
+    ["empty", ""],
+    ["whitespace", "   "],
+  ])("an %s tooltip draws no (i)", (_: string, tooltip: string) => {
+    render(<FieldLabelElement title="Ready" tooltip={tooltip} />);
+
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  test("with a tooltip, an (i) named after the title sits beside it", () => {
+    render(<FieldLabelElement title="Ready" tooltip={READY} />);
+
+    const info: HTMLElement = screen.getByRole("button", {
+      name: "About Ready",
+    });
+
+    expect(info).toBeInTheDocument();
+    expect(info.closest("label")).toHaveTextContent("Ready");
+    // The label is uppercase and tracked; the (i) resets both.
+    expect(info).toHaveClass("normal-case", "tracking-normal");
+  });
+
+  test("the text is not in the page until someone reaches for it", () => {
+    render(<FieldLabelElement title="Ready" tooltip={READY} />);
+
+    expect(screen.queryByText(READY)).not.toBeInTheDocument();
+  });
+
+  test("hovering the (i) shows the text", async () => {
+    render(<FieldLabelElement title="Ready" tooltip={READY} />);
+
+    await hover(screen.getByRole("button", { name: "About Ready" }));
+
+    expect(screen.getByRole("tooltip")).toHaveTextContent(READY);
+  });
+
+  test("keyboard focus shows the text too", async () => {
+    render(<FieldLabelElement title="Ready" tooltip={READY} />);
+
+    const info: HTMLElement = screen.getByRole("button", {
+      name: "About Ready",
+    });
+
+    act(() => {
+      info.focus();
+    });
+    await act(async () => {
+      jest.advanceTimersByTime(200);
+    });
+
+    expect(screen.getByRole("tooltip")).toHaveTextContent(READY);
+  });
+
+  test("a visible description and a tooltip can sit together", () => {
+    render(
+      <FieldLabelElement
+        title="Ready"
+        description="Shown under the title."
+        tooltip={READY}
+      />,
+    );
+
+    expect(screen.getByText("Shown under the title.")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "About Ready" }),
+    ).toBeInTheDocument();
+  });
+
+  test("no title means no label and so no (i)", () => {
+    render(<FieldLabelElement tooltip={READY} />);
+
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  test("the (i) is not inside the side link", () => {
+    render(
+      <FieldLabelElement
+        title="Ready"
+        tooltip={READY}
+        sideLink={{ text: "View pods", url: new Route("/pods") }}
+      />,
+    );
+
+    const info: HTMLElement = screen.getByRole("button", {
+      name: "About Ready",
+    });
+
+    expect(info.closest("a")).toBeNull();
+  });
+});
+
+describe("InfoCard tooltip", () => {
+  test("a card without a tooltip draws no (i)", () => {
+    render(<InfoCard title="Ready" value="3/3" />);
+
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  test("a card passes its tooltip to the title", async () => {
+    render(<InfoCard title="Ready" value="3/3" tooltip={READY} />);
+
+    const info: HTMLElement = screen.getByRole("button", {
+      name: "About Ready",
+    });
+
+    await hover(info);
+
+    expect(screen.getByRole("tooltip")).toHaveTextContent(READY);
+    expect(screen.getByText("3/3")).toBeInTheDocument();
+  });
+
+  test("an inert card stays inert - the (i) is the only control", () => {
+    const { container } = render(
+      <InfoCard title="Ready" value="3/3" tooltip={READY} />,
+    );
+    const card: HTMLElement = container.firstElementChild as HTMLElement;
+
+    expect(screen.getAllByRole("button")).toHaveLength(1);
+    expect(card).not.toHaveAttribute("role");
+    expect(card).not.toHaveAttribute("tabindex");
+  });
+
+  test("the card's value can be an element and still sits beside the (i)", () => {
+    render(
+      <InfoCard
+        title="CPU"
+        value={<span data-testid="cpu-value">42%</span>}
+        tooltip="Processor time the pod used, as a share of one core."
+      />,
+    );
+
+    expect(screen.getByTestId("cpu-value")).toHaveTextContent("42%");
+    expect(
+      screen.getByRole("button", { name: "About CPU" }),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("a clickable InfoCard with a tooltip", () => {
+  interface Rendered {
+    card: HTMLElement;
+    info: HTMLElement;
+    onClick: MockFunction;
+  }
+
+  function renderClickable(isSelected?: boolean): Rendered {
+    const onClick: MockFunction = getJestMockFunction();
+
+    render(
+      <InfoCard
+        title="Ready"
+        value="3/3"
+        tooltip={READY}
+        onClick={onClick}
+        isSelected={isSelected}
+        ariaLabel="Show ready pods"
+      />,
+    );
+
+    return {
+      card: screen.getByRole("button", { name: "Show ready pods" }),
+      info: screen.getByRole("button", { name: "About Ready" }),
+      onClick,
+    };
+  }
+
+  /*
+   * A button's children are presentational, so an (i) inside the card's own
+   * button would be unreachable for a screen reader. The card is a plain
+   * container with a real button laid over it, and the (i) is a sibling of
+   * that button, lifted above it.
+   */
+  test("the (i) is its own button, never nested in the card's button", () => {
+    const { card, info } = renderClickable();
+
+    expect(card).not.toContainElement(info);
+    expect(info.closest("[role='button']")).toBeNull();
+    expect(card.tagName).toBe("BUTTON");
+    expect(card).toHaveAttribute("type", "button");
+    expect(info.tagName).toBe("BUTTON");
+    expect(info).toHaveAttribute("type", "button");
+    expect(card.parentElement).toContainElement(info);
+  });
+
+  test("the card's button covers the whole card and the (i) sits above it", () => {
+    const { card, info } = renderClickable();
+
+    expect(card).toHaveClass("absolute", "inset-0");
+    expect(card.parentElement).toHaveClass("relative");
+    expect(info).toHaveClass("relative", "z-10");
+  });
+
+  test("clicking the (i) does not activate the card", () => {
+    const { info, onClick } = renderClickable();
+
+    fireEvent.click(info);
+
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  test.each([
+    ["Enter", "Enter"],
+    ["Space", " "],
+  ])(
+    "pressing %s on the (i) does not activate the card",
+    (_: string, key: string) => {
+      const { info, onClick } = renderClickable();
+
+      fireEvent.keyDown(info, { key });
+
+      expect(onClick).not.toHaveBeenCalled();
+    },
+  );
+
+  test.each([["{Enter}"], ["[Space]"]])(
+    "a real keyboard %s on the focused (i) does not activate the card",
+    async (keys: string) => {
+      const user: ReturnType<typeof userEvent.setup> = userEvent.setup({
+        advanceTimers: (ms: number) => {
+          jest.advanceTimersByTime(ms);
+        },
+      });
+      const { info, onClick } = renderClickable();
+
+      act(() => {
+        info.focus();
+      });
+      await user.keyboard(keys);
+
+      expect(onClick).not.toHaveBeenCalled();
+    },
+  );
+
+  test("clicking the card itself still activates it", () => {
+    const { card, onClick } = renderClickable();
+
+    fireEvent.click(card);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  test("the title and value are not inside the card's button - they stay readable text", () => {
+    const { card } = renderClickable();
+
+    expect(card).not.toContainElement(screen.getByText("Ready"));
+    expect(card).not.toContainElement(screen.getByText("3/3"));
+    expect(card).toBeEmptyDOMElement();
+  });
+
+  test.each([["{Enter}"], ["[Space]"]])(
+    "a real keyboard %s on the focused card activates it",
+    async (keys: string) => {
+      const user: ReturnType<typeof userEvent.setup> = userEvent.setup({
+        advanceTimers: (ms: number) => {
+          jest.advanceTimersByTime(ms);
+        },
+      });
+      const { card, onClick } = renderClickable();
+
+      act(() => {
+        card.focus();
+      });
+      await user.keyboard(keys);
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+    },
+  );
+
+  test("Tab reaches the card first and then its (i)", async () => {
+    const user: ReturnType<typeof userEvent.setup> = userEvent.setup({
+      advanceTimers: (ms: number) => {
+        jest.advanceTimersByTime(ms);
+      },
+    });
+    const { card, info } = renderClickable();
+
+    await user.tab();
+    expect(card).toHaveFocus();
+
+    await user.tab();
+    expect(info).toHaveFocus();
+  });
+
+  test("other keys on the (i) still reach the card and are ignored by it", () => {
+    const { info, onClick } = renderClickable();
+
+    fireEvent.keyDown(info, { key: "a" });
+    fireEvent.keyDown(info, { key: "Tab" });
+
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  test("hovering the (i) of a clickable card shows the text without activating it", async () => {
+    const { info, onClick } = renderClickable();
+
+    await hover(info);
+
+    expect(screen.getByRole("tooltip")).toHaveTextContent(READY);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  test("a toggle card keeps its pressed state when it gains a tooltip", () => {
+    const { card } = renderClickable(true);
+
+    expect(card).toHaveAttribute("aria-pressed", "true");
+  });
+
+  test("the card keeps its own accessible name when it has one", () => {
+    const { card } = renderClickable();
+
+    expect(card).toHaveAttribute("aria-label", "Show ready pods");
+  });
+
+  test("without an aria-label, the card is named by its title and value - the (i)'s 'About' name does not leak in", () => {
+    render(
+      <InfoCard title="Ready" value="3/3" tooltip={READY} onClick={() => {}} />,
+    );
+
+    expect(
+      screen.getByRole("button", { name: "Ready 3/3" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "About Ready" }),
+    ).toBeInTheDocument();
+  });
+
+  test("an element value has no text to borrow, so the card is named by its title", () => {
+    render(
+      <InfoCard
+        title="Ready"
+        value={<span>3 of 3</span>}
+        tooltip={READY}
+        onClick={() => {}}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: "Ready" })).toBeInTheDocument();
+  });
+
+  test("a whitespace-only tooltip leaves a clickable card exactly as it was", () => {
+    render(
+      <InfoCard title="Ready" value="3/3" tooltip="   " onClick={() => {}} />,
+    );
+
+    const card: HTMLElement = screen.getByRole("button");
+
+    expect(card.tagName).toBe("DIV");
+    expect(card).toHaveAttribute("tabindex", "0");
+    expect(
+      screen.queryByRole("button", { name: /About/ }),
+    ).not.toBeInTheDocument();
+  });
+});