@oneuptime/common 14.0.3 → 14.0.6

package/Tests/UI/Rum/ChunkLoader.test.ts

@@ -1845,6 +1845,82 @@ describe("ChunkLoader signal extraction", () => {
     expect(longTask?.offsetMs).toBe(9000);
   });
 
+  /*
+   * Issue #3975: an INP is now reported per single-page-app view, with
+   * the view's url and the slow interaction's attribution. Each field is
+   * read on its own, so one a newer or buggier recorder got wrong costs
+   * only that field.
+   */
+  it("carries an INP's view and attribution, dropping only the fields that are malformed", () => {
+    const rows: Array<ReplayTimelineEvent> = ChunkLoader.extractTimelineEvents(
+      makeEntry(0),
+      [
+        { type: 2, timestamp: CUSTOM_BASE_TS, data: {} },
+        custom(
+          "oneuptime.performance",
+          {
+            kind: "web-vital",
+            metric: "INP",
+            value: 480,
+            rating: "needs-improvement",
+            url: "https://shop.example.com/products",
+            navigationType: "soft",
+            interactionType: "pointer",
+            interactionTarget: "nav > a.product-link",
+            inputDelayMs: 5,
+            processingDurationMs: 305,
+            presentationDelayMs: 170,
+          },
+          CUSTOM_BASE_TS + 100,
+        ),
+        custom(
+          "oneuptime.performance",
+          {
+            kind: "web-vital",
+            metric: "INP",
+            value: 90,
+            rating: "good",
+            navigationType: "sideways",
+            interactionType: 7,
+            interactionTarget: "",
+            inputDelayMs: -3,
+            processingDurationMs: "12",
+            presentationDelayMs: 40,
+          },
+          CUSTOM_BASE_TS + 200,
+        ),
+      ],
+    );
+
+    const [attributed, malformed] = rows.filter(
+      (row: ReplayTimelineEvent): boolean => {
+        return row.metric === "INP";
+      },
+    );
+
+    expect(attributed).toEqual(
+      expect.objectContaining({
+        value: 480,
+        url: "https://shop.example.com/products",
+        navigationType: "soft",
+        interactionType: "pointer",
+        interactionTarget: "nav > a.product-link",
+        inputDelayMs: 5,
+        processingDurationMs: 305,
+        presentationDelayMs: 170,
+      }),
+    );
+
+    /* The row itself survives; only the bad fields are gone. */
+    expect(malformed?.value).toBe(90);
+    expect(malformed?.presentationDelayMs).toBe(40);
+    expect(malformed?.navigationType).toBeUndefined();
+    expect(malformed?.interactionType).toBeUndefined();
+    expect(malformed?.interactionTarget).toBeUndefined();
+    expect(malformed?.inputDelayMs).toBeUndefined();
+    expect(malformed?.processingDurationMs).toBeUndefined();
+  });
+
   it("turns rrweb Meta events into navigation rows carrying the viewport", () => {
     const rows: Array<ReplayTimelineEvent> = ChunkLoader.extractTimelineEvents(
       makeEntry(0),

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

@@ -19,6 +19,12 @@ import {
   derivePhase,
 } from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/Engine/ReplayEngineTypes";
 import { REPLAY_CONTROL_HEIGHT_CLASS } from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/ReplayUi";
+import {
+  LAPTOP_WIDTH_IN_PX,
+  PHONE_WIDTH_IN_PX,
+  TABLET_WIDTH_IN_PX,
+  isVisibleAtWidth,
+} from "../../ResponsiveVisibility";
 
 /*
  * The design decisions of the player redesign, held across components.
@@ -426,12 +432,24 @@ describe("transport row", () => {
 
     const responsive: Array<HTMLElement> = dividers.filter(
       (divider: HTMLElement): boolean => {
-        return Boolean(divider.parentElement?.className.includes("hidden"));
+        return !isVisibleAtWidth(divider, PHONE_WIDTH_IN_PX);
       },
     );
 
     expect(responsive).toHaveLength(1);
     expect(responsive[0]?.parentElement?.className).toContain("md:inline-flex");
+    expect(isVisibleAtWidth(responsive[0]!, TABLET_WIDTH_IN_PX)).toBe(true);
+    /*
+     * `max-md:hidden`, not the bare `hidden`: a foreign
+     * `.hidden { display: none !important }` rule would beat `md:inline-flex`
+     * and lose the hairline on a desktop too, where the row does not wrap.
+     */
+    expect(responsive[0]?.parentElement).not.toHaveClass("hidden");
+    expect(
+      isVisibleAtWidth(responsive[0]!, LAPTOP_WIDTH_IN_PX, {
+        withForeignHiddenRule: true,
+      }),
+    ).toBe(true);
   });
 
   /*

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

@@ -983,4 +983,57 @@ describe("ReplayRailDetail performance wording", () => {
     expect(screen.getByText("Long task")).toBeInTheDocument();
     expect(screen.queryByText("long-task")).toBeNull();
   });
+
+  /* Issue #3975: which view, which element, and where the time went. */
+  it("explains a slow INP: the view, the input, the element and the phase split", () => {
+    renderDetail(
+      performanceSignal({
+        kind: "web-vital",
+        durationMs: null,
+        budgetMs: null,
+        isOverBudget: true,
+        metric: "INP",
+        value: 480,
+        rating: "needs-improvement",
+        url: "https://shop.example.com/products",
+        atUnixMs: null,
+        navigationType: "soft",
+        interactionType: "pointer",
+        interactionTarget: "nav > a.product-link",
+        inputDelayMs: 5,
+        processingDurationMs: 305,
+        presentationDelayMs: 170,
+      }),
+    );
+
+    expect(
+      screen.getByText("Route change (single-page app)"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Pointer")).toBeInTheDocument();
+    expect(screen.getByText("nav > a.product-link")).toBeInTheDocument();
+    expect(screen.getByText("Input delay")).toBeInTheDocument();
+    expect(screen.getByText("Processing")).toBeInTheDocument();
+    expect(screen.getByText("Presentation")).toBeInTheDocument();
+    expect(screen.getByText("305ms")).toBeInTheDocument();
+  });
+
+  it("shows none of the INP rows for a recording that predates them", () => {
+    renderDetail(
+      performanceSignal({
+        kind: "web-vital",
+        durationMs: null,
+        budgetMs: null,
+        isOverBudget: false,
+        metric: "INP",
+        value: 120,
+        rating: "good",
+        url: null,
+        atUnixMs: null,
+      }),
+    );
+
+    expect(screen.queryByText("View")).toBeNull();
+    expect(screen.queryByText("Element")).toBeNull();
+    expect(screen.queryByText("Input delay")).toBeNull();
+  });
 });

package/Tests/UI/Rum/ReplaySignals.test.ts

@@ -646,6 +646,60 @@ describe("performance rows", () => {
     expect(signal.severity).toBe("info");
     expect(signal.title).not.toContain("0ms");
   });
+
+  /* Issue #3975: an INP per view, labelled with the route it measured. */
+  it("carries an INP's view and attribution into the detail, and the route into the subtitle", () => {
+    const signal: ReplaySignal = fromTimelineEvent(
+      makeEvent("performance", {
+        performanceKind: "web-vital",
+        metric: "INP",
+        value: 480,
+        rating: "needs-improvement",
+        url: "https://shop.example.com/products",
+        navigationType: "soft",
+        interactionType: "keyboard",
+        interactionTarget: "input#search",
+        inputDelayMs: 12,
+        processingDurationMs: 400,
+        presentationDelayMs: 68,
+      }),
+      { startTimeUnixMs: null },
+    );
+    const detail: ReplayPerformanceSignalDetail =
+      signal.detail as ReplayPerformanceSignalDetail;
+
+    expect(signal.title).toBe("INP 480ms needs improvement");
+    expect(signal.subtitle).toBe("/products");
+    expect(detail).toEqual(
+      expect.objectContaining({
+        navigationType: "soft",
+        interactionType: "keyboard",
+        interactionTarget: "input#search",
+        inputDelayMs: 12,
+        processingDurationMs: 400,
+        presentationDelayMs: 68,
+      }),
+    );
+  });
+
+  it("leaves the attribution empty for a recording that predates it", () => {
+    const detail: ReplayPerformanceSignalDetail = fromTimelineEvent(
+      makeEvent("performance", {
+        performanceKind: "web-vital",
+        metric: "INP",
+        value: 320,
+        rating: "poor",
+      }),
+      { startTimeUnixMs: null },
+    ).detail as ReplayPerformanceSignalDetail;
+
+    expect(detail.navigationType).toBeNull();
+    expect(detail.interactionType).toBeNull();
+    expect(detail.interactionTarget).toBeNull();
+    expect(detail.inputDelayMs).toBeNull();
+    expect(detail.processingDurationMs).toBeNull();
+    expect(detail.presentationDelayMs).toBeNull();
+  });
 });
 
 describe("custom and marker rows", () => {

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

@@ -8,6 +8,12 @@ import { fireEvent, render, screen, within } from "@testing-library/react";
 import * as React from "react";
 import { describe, expect, it } from "@jest/globals";
 import getJestMockFunction, { MockFunction } from "../../MockType";
+import {
+  LAPTOP_WIDTH_IN_PX,
+  PHONE_WIDTH_IN_PX,
+  TABLET_WIDTH_IN_PX,
+  isVisibleAtWidth,
+} from "../../ResponsiveVisibility";
 import ReplayTabSwitcher, {
   ReplayTabSwitcherProps,
   buildReplayTabPillTitle,
@@ -318,9 +324,21 @@ describe("ReplayTabSwitcher strip", () => {
       screen.getAllByTestId("replay-tab-pill")[0] as HTMLElement,
     ).getByText("· /checkout");
 
-    expect(page.className).toContain("hidden");
     expect(page.className).toContain("sm:inline");
     expect(page.className).toContain("truncate");
+    expect(isVisibleAtWidth(page, PHONE_WIDTH_IN_PX)).toBe(false);
+    expect(isVisibleAtWidth(page, TABLET_WIDTH_IN_PX)).toBe(true);
+    /*
+     * `max-sm:hidden`, not the bare `hidden`: a foreign
+     * `.hidden { display: none !important }` rule would beat `sm:inline` and
+     * strip the page from every pill at every width.
+     */
+    expect(page).not.toHaveClass("hidden");
+    expect(
+      isVisibleAtWidth(page, LAPTOP_WIDTH_IN_PX, {
+        withForeignHiddenRule: true,
+      }),
+    ).toBe(true);
   });
 
   it("leaves the page off a pill whose url the recorder never reported", () => {