@oneuptime/common 13.0.1 → 13.0.4

package/Tests/UI/Rum/ReplayStage.test.tsx

@@ -17,6 +17,7 @@ import ReplayStage, {
   REPLAY_STAGE_MIN_HEIGHT_REM,
   REPLAY_STAGE_THEATER_MAX_HEIGHT_VH,
   computeContainScale,
+  computeReplayStageHeight,
 } from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/ReplayStage";
 import {
   ReplayEngine,
@@ -238,6 +239,11 @@ afterEach(() => {
   document.body.innerHTML = "";
 });
 
+interface BoundingRectSpy {
+  mockReturnValue: (value: DOMRect) => unknown;
+  mockRestore: () => void;
+}
+
 describe("ReplayStage mounting", () => {
   it("attaches the engine's host into the stage on mount and detaches on unmount", () => {
     const engine: FakeEngine = new FakeEngine();
@@ -282,6 +288,165 @@ describe("ReplayStage mounting", () => {
 });
 
 describe("ReplayStage sizing", () => {
+  it("reserves the measured transport height without letting a short viewport erase the recording", () => {
+    expect(computeReplayStageHeight(900, 300, 260)).toBe(340);
+    expect(computeReplayStageHeight(1100, 300, 260)).toBe(540);
+    expect(computeReplayStageHeight(600, 350, 260)).toBe(256);
+  });
+
+  it("recalculates desktop height when transport size changes and keeps normal sizing on mobile", () => {
+    const engine: FakeEngine = new FakeEngine();
+    const originalWidth: number = window.innerWidth;
+    const originalHeight: number = window.innerHeight;
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      value: 1440,
+    });
+    Object.defineProperty(window, "innerHeight", {
+      configurable: true,
+      value: 900,
+    });
+
+    try {
+      const { rerender } = render(
+        <ReplayStage
+          engine={engine}
+          reservedBottomHeightPx={260}
+          viewportWidth={1200}
+          viewportHeight={760}
+        />,
+      );
+      expect(stageElement().style.maxHeight).toBe("640px");
+      expect(stageElement().style.aspectRatio).toBe("1200 / 760");
+      expect(stageElement().style.minHeight).toBe("16rem");
+
+      rerender(
+        <ReplayStage
+          engine={engine}
+          reservedBottomHeightPx={320}
+          viewportWidth={1200}
+          viewportHeight={760}
+        />,
+      );
+      expect(stageElement().style.maxHeight).toBe("580px");
+
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        value: 390,
+      });
+      act((): void => {
+        window.dispatchEvent(new Event("resize"));
+      });
+      expect(stageElement().style.maxHeight).toBe(
+        `${REPLAY_STAGE_MAX_HEIGHT_VH}vh`,
+      );
+      expect(stageElement().style.minHeight).toBe(
+        `${REPLAY_STAGE_MIN_HEIGHT_REM}rem`,
+      );
+    } finally {
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        value: originalWidth,
+      });
+      Object.defineProperty(window, "innerHeight", {
+        configurable: true,
+        value: originalHeight,
+      });
+    }
+  });
+
+  it("refits when a header notice moves the stage without changing its own size", () => {
+    const originalObserver: PropertyDescriptor | undefined =
+      Object.getOwnPropertyDescriptor(window, "ResizeObserver");
+    const originalWidth: number = window.innerWidth;
+    const originalHeight: number = window.innerHeight;
+    const observed: Array<Element> = [];
+    const callbacks: Array<ResizeObserverCallback> = [];
+    const instances: Array<ResizeObserver> = [];
+    class TestResizeObserver implements ResizeObserver {
+      public constructor(callback: ResizeObserverCallback) {
+        callbacks.push(callback);
+        instances.push(this);
+      }
+      public observe(target: Element): void {
+        observed.push(target);
+      }
+      public unobserve(): void {
+        return;
+      }
+      public disconnect(): void {
+        return;
+      }
+    }
+    Object.defineProperty(window, "ResizeObserver", {
+      configurable: true,
+      value: TestResizeObserver,
+    });
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      value: 1440,
+    });
+    Object.defineProperty(window, "innerHeight", {
+      configurable: true,
+      value: 900,
+    });
+
+    try {
+      const engine: FakeEngine = new FakeEngine();
+      render(
+        <div data-replay-layout="true">
+          <header>Recording details</header>
+          <ReplayStage engine={engine} reservedBottomHeightPx={260} />
+        </div>,
+      );
+      const stage: HTMLElement = stageElement();
+      const header: HTMLElement = document.querySelector(
+        "header",
+      ) as HTMLElement;
+      expect(observed).toContain(header);
+      expect(observed).toContain(stage);
+      /*
+       * Named structurally rather than as jest.SpiedFunction: jest.spyOn here
+       * is the one imported from @jest/globals, whose return type is
+       * jest-mock's SpyInstance, while `jest.SpiedFunction` resolves through
+       * the global @types/jest namespace. The two declarations do not assign
+       * to each other, so name only what this test uses.
+       */
+      const rectangle: BoundingRectSpy = jest.spyOn(
+        stage,
+        "getBoundingClientRect",
+      );
+      rectangle.mockReturnValue({ top: 200 } as DOMRect);
+      act((): void => {
+        callbacks[0]?.([], instances[0] as ResizeObserver);
+      });
+      expect(stage.style.maxHeight).toBe("440px");
+
+      // A clipboard fallback expands the header; no resize event is needed.
+      header.textContent = "Copy the link by hand";
+      rectangle.mockReturnValue({ top: 300 } as DOMRect);
+      act((): void => {
+        callbacks[0]?.([], instances[0] as ResizeObserver);
+      });
+      expect(stage.style.maxHeight).toBe("340px");
+      rectangle.mockRestore();
+    } finally {
+      if (originalObserver) {
+        Object.defineProperty(window, "ResizeObserver", originalObserver);
+      } else {
+        Reflect.deleteProperty(window, "ResizeObserver");
+      }
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        value: originalWidth,
+      });
+      Object.defineProperty(window, "innerHeight", {
+        configurable: true,
+        value: originalHeight,
+      });
+    }
+  });
+
   it("reserves the recorded aspect from the header viewport before the first frame", () => {
     const engine: FakeEngine = new FakeEngine();
 
@@ -509,14 +674,21 @@ describe("ReplayStage device frame and touch", () => {
 });
 
 describe("ReplayStage cursor", () => {
-  it("shortens the cursor transition with the playback speed", () => {
+  /*
+   * The transition has to be exactly one recorded sample interval long
+   * at the speed being played: shorter and the pointer arrives early and
+   * parks until the next sample, longer and it lags the click it caused.
+   * A recording that predates the faster cadence keeps the interval it
+   * was actually recorded at.
+   */
+  it("spans one legacy sample interval, scaled by the playback speed", () => {
     const engine: FakeEngine = new FakeEngine({ speed: 4 });
 
     render(<ReplayStage engine={engine} />);
 
     expect(
       stageElement().style.getPropertyValue("--oneuptime-replay-cursor-ms"),
-    ).toBe("20ms");
+    ).toBe("25ms");
 
     act((): void => {
       engine.update({ speed: 0.5 });
@@ -524,6 +696,41 @@ describe("ReplayStage cursor", () => {
 
     expect(
       stageElement().style.getPropertyValue("--oneuptime-replay-cursor-ms"),
-    ).toBe("160ms");
+    ).toBe("200ms");
+  });
+
+  it("uses the recorded cadence when the recording advertises it", () => {
+    const engine: FakeEngine = new FakeEngine({ speed: 1 });
+
+    render(
+      <ReplayStage
+        engine={engine}
+        recorderCapabilities={["click-events", "mousemove-50ms"]}
+      />,
+    );
+
+    expect(
+      stageElement().style.getPropertyValue("--oneuptime-replay-cursor-ms"),
+    ).toBe("50ms");
+
+    act((): void => {
+      engine.update({ speed: 0.5 });
+    });
+
+    expect(
+      stageElement().style.getPropertyValue("--oneuptime-replay-cursor-ms"),
+    ).toBe("100ms");
+  });
+
+  it("never falls below one frame, however fast the playback", () => {
+    const engine: FakeEngine = new FakeEngine({ speed: 8 });
+
+    render(
+      <ReplayStage engine={engine} recorderCapabilities={["mousemove-50ms"]} />,
+    );
+
+    expect(
+      stageElement().style.getPropertyValue("--oneuptime-replay-cursor-ms"),
+    ).toBe("16ms");
   });
 });

package/Tests/UI/Rum/ReplayTimeline.test.tsx

@@ -1,14 +1,17 @@
 import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
 import * as React from "react";
-import { describe, expect, it } from "@jest/globals";
+import { describe, expect, it, jest } from "@jest/globals";
 import ReplayTimeline, {
   ReplayTimelineProps,
 } from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/ReplayTimeline";
+import * as ReplayTimelineMath from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/ReplayTimelineMath";
 import {
+  ReplayActivityBucket,
   ReplayTimelineMarker,
   ReplayTrackBand,
   buildExactMarkers,
+  offsetToPercent,
 } from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/ReplayTimelineMath";
 import { ReplaySignal } from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/Rail/ReplaySignalTypes";
 
@@ -694,3 +697,179 @@ describe("ReplayTimeline activity lane", () => {
     expect(screen.getByTestId("timeline-activity").children).toHaveLength(2);
   });
 });
+
+/*
+ * The clock ticks the timeline ~30 times a second. Everything that is not
+ * the playhead must sit behind a memo that actually holds across ticks:
+ * the per-lane marker arrays are memoised in the parent (a fresh filter
+ * per render would defeat MarkerLane's memo AND its clusters useMemo),
+ * the key handler reads the clock through a ref so the slider's onKeyDown
+ * prop is stable, and the bands/activity/notice children get identical
+ * props from one tick to the next.
+ */
+describe("ReplayTimeline per-tick rendering", () => {
+  const TICK_MS: number = 33;
+  const TICKS: number = 100;
+
+  function busyProps(
+    overrides?: Partial<ReplayTimelineProps>,
+  ): ReplayTimelineProps {
+    const activity: Array<ReplayActivityBucket> = [];
+
+    for (let i: number = 0; i < 180; i++) {
+      activity.push({
+        chunkIndex: i,
+        startMs: (i * DURATION_MS) / 180,
+        endMs: ((i + 1) * DURATION_MS) / 180,
+        intensity: (i % 10) / 10,
+        isMeasured: true,
+      });
+    }
+
+    const bands: Array<ReplayTrackBand> = [];
+
+    for (let i: number = 0; i < 20; i++) {
+      const startMs: number = (i * DURATION_MS) / 20;
+      const endMs: number = ((i + 1) * DURATION_MS) / 20;
+
+      bands.push(
+        i % 4 === 3
+          ? {
+              kind: "gap",
+              startMs: startMs,
+              endMs: endMs,
+              label: "30s missing",
+            }
+          : { kind: "loaded", startMs: startMs, endMs: endMs, label: "" },
+      );
+    }
+
+    const signals: Array<ReplaySignal> = [];
+    const kinds: Array<ReplaySignal["kind"]> = [
+      "network",
+      "client-error",
+      "navigation",
+    ];
+
+    for (let i: number = 0; i < 800; i++) {
+      signals.push(
+        signal({
+          id: `sig-${i}`,
+          kind: kinds[i % 3] as ReplaySignal["kind"],
+          severity: i % 3 === 0 ? "error" : "info",
+          offsetMs: Math.floor((i * DURATION_MS) / 800),
+        }),
+      );
+    }
+
+    return makeProps({
+      activity: activity,
+      bands: bands,
+      markers: buildExactMarkers(signals),
+      ...overrides,
+    });
+  }
+
+  it("moves only the playhead and the slider values across 100 clock ticks", () => {
+    const props: ReplayTimelineProps = busyProps();
+    const view: ReturnType<typeof render> = render(
+      <ReplayTimeline {...props} />,
+    );
+
+    expect(props.markers.length).toBeGreaterThan(100);
+
+    /*
+     * Clusters, not single markers: busyProps packs more than 100 markers
+     * into the lanes, so every one of them is drawn as part of a cluster
+     * and "timeline-marker" never appears.
+     */
+    const firstMarker: HTMLElement = screen.getAllByTestId(
+      "timeline-marker-cluster",
+    )[0] as HTMLElement;
+    const firstActivityCell: Element | null =
+      screen.getByTestId("timeline-activity").firstElementChild;
+    const firstLoadedBand: HTMLElement = screen.getAllByTestId(
+      "timeline-loaded-band",
+    )[0] as HTMLElement;
+    const track: HTMLElement = screen.getByTestId("timeline-track");
+
+    let currentTimeMs: number = 0;
+
+    for (let tick: number = 1; tick <= TICKS; tick++) {
+      currentTimeMs = tick * TICK_MS;
+      view.rerender(
+        <ReplayTimeline {...props} currentTimeMs={currentTimeMs} />,
+      );
+    }
+
+    expect(screen.getByTestId("timeline-playhead").style.left).toBe(
+      `${offsetToPercent(currentTimeMs, DURATION_MS)}%`,
+    );
+    expect(track.getAttribute("aria-valuenow")).toBe(String(currentTimeMs));
+    expect(screen.getAllByTestId("timeline-marker-cluster")[0]).toBe(
+      firstMarker,
+    );
+    expect(screen.getByTestId("timeline-activity").firstElementChild).toBe(
+      firstActivityCell,
+    );
+    expect(screen.getAllByTestId("timeline-loaded-band")[0]).toBe(
+      firstLoadedBand,
+    );
+  });
+
+  it("clusters each lane once per markers array, not once per tick", () => {
+    const clusterSpy: ReturnType<typeof jest.spyOn> = jest.spyOn(
+      ReplayTimelineMath,
+      "clusterMarkers",
+    );
+
+    try {
+      const props: ReplayTimelineProps = busyProps();
+      const view: ReturnType<typeof render> = render(
+        <ReplayTimeline {...props} />,
+      );
+
+      /* One clustering pass per lane on mount. */
+      const callsAfterMount: number = clusterSpy.mock.calls.length;
+
+      expect(callsAfterMount).toBe(3);
+
+      for (let tick: number = 1; tick <= TICKS; tick++) {
+        view.rerender(
+          <ReplayTimeline {...props} currentTimeMs={tick * TICK_MS} />,
+        );
+      }
+
+      expect(clusterSpy.mock.calls.length).toBe(callsAfterMount);
+
+      /* A new markers array is a real change and re-clusters. */
+      view.rerender(<ReplayTimeline {...props} markers={[...props.markers]} />);
+
+      expect(clusterSpy.mock.calls.length).toBeGreaterThan(callsAfterMount);
+    } finally {
+      clusterSpy.mockRestore();
+    }
+  });
+
+  it("answers slider keys from the latest clock after ticking without a new handler", () => {
+    const seeks: Array<number> = [];
+    const props: ReplayTimelineProps = makeProps({
+      currentTimeMs: 65000,
+      onSeek: (offsetMs: number): void => {
+        seeks.push(offsetMs);
+      },
+    });
+    const view: ReturnType<typeof render> = render(
+      <ReplayTimeline {...props} />,
+    );
+
+    view.rerender(<ReplayTimeline {...props} currentTimeMs={120000} />);
+
+    const track: HTMLElement = screen.getByTestId("timeline-track");
+
+    fireEvent.keyDown(track, { key: "ArrowRight" });
+
+    expect(seeks).toEqual([125000]);
+    expect(track.getAttribute("aria-valuenow")).toBe("120000");
+  });
+});