@oneuptime/common 13.0.1 → 13.0.4

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

@@ -0,0 +1,405 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+/*
+ * The Dashboard has its own copy of react; Common's jest moduleNameMapper
+ * pins react and react-dom to this project's single copy for every
+ * importer (see the note at the top of ReplayStage.test.tsx).
+ */
+import * as React from "react";
+import { describe, expect, it } from "@jest/globals";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+import ReplayUserSessionsMenu, {
+  ReplayUserSessionsMenuProps,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/ReplayUserSessionsMenu";
+import { ReplayUserSessionItem } from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/ReplayUserSessions";
+
+/*
+ * The "N sessions" dropdown in the player header
+ * (github.com/OneUptime/oneuptime/issues/3705). Pinned: it opens and
+ * closes from its trigger, lists newest first with the current session
+ * marked and never re-opened, a click or Enter hands the chosen id to
+ * the shell and shuts the menu, Escape shuts it and returns focus to the
+ * trigger, the arrow keys move focus between rows, an outside click
+ * shuts it, and the live dot and error count appear only when earned.
+ */
+
+const NOW: number = Date.parse("2026-09-05T10:00:00.000Z");
+const HOUR_MS: number = 60 * 60 * 1000;
+const CURRENT_ID: string = "a1b2c3d4e5f60718293a4b5c6d7e8f90";
+
+function makeItem(
+  sessionId: string,
+  startTimeUnixMs: number,
+  overrides?: Partial<ReplayUserSessionItem>,
+): ReplayUserSessionItem {
+  return {
+    sessionId: sessionId,
+    startTimeUnixMs: startTimeUnixMs,
+    durationMs: 252000,
+    entryUrl: "https://app.acme.com/checkout?step=2",
+    browserName: "Chrome",
+    deviceType: "desktop",
+    hasError: false,
+    errorCount: 0,
+    isFinalized: true,
+    identifiedUserKey: "key",
+    visitorId: "visitor",
+    identifiedUserLabel: "jane@acme.com",
+    ...overrides,
+  };
+}
+
+/* Newest first, the current session in the middle, as the shell merges them. */
+const SESSIONS: Array<ReplayUserSessionItem> = [
+  makeItem("newest", NOW - 5 * 60 * 1000, {
+    isFinalized: false,
+    durationMs: 30000,
+    entryUrl: "https://app.acme.com/",
+  }),
+  makeItem(CURRENT_ID, NOW - 3 * HOUR_MS),
+  makeItem("oldest", NOW - 2 * 24 * HOUR_MS, {
+    errorCount: 3,
+    hasError: true,
+    entryUrl: "https://app.acme.com/orders/42",
+    browserName: "Safari",
+    deviceType: "mobile",
+  }),
+];
+
+function makeProps(
+  overrides?: Partial<ReplayUserSessionsMenuProps>,
+): ReplayUserSessionsMenuProps {
+  return {
+    kind: "identified",
+    sessions: SESSIONS,
+    currentSessionId: CURRENT_ID,
+    onOpenUserSession: getJestMockFunction(),
+    nowUnixMs: NOW,
+    ...overrides,
+  };
+}
+
+function openMenu(): HTMLElement {
+  fireEvent.click(screen.getByTestId("replay-user-sessions-button"));
+
+  return screen.getByTestId("replay-user-sessions-menu");
+}
+
+describe("ReplayUserSessionsMenu", () => {
+  it("is closed until the trigger is pressed, and the trigger says how many", () => {
+    render(<ReplayUserSessionsMenu {...makeProps()} />);
+
+    const button: HTMLElement = screen.getByTestId(
+      "replay-user-sessions-button",
+    );
+
+    expect(button).toHaveTextContent("3 sessions");
+    expect(button).toHaveAttribute("aria-haspopup", "listbox");
+    expect(button).toHaveAttribute("aria-expanded", "false");
+    expect(
+      screen.queryByTestId("replay-user-sessions-menu"),
+    ).not.toBeInTheDocument();
+
+    fireEvent.click(button);
+
+    expect(button).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByTestId("replay-user-sessions-menu")).toBeInTheDocument();
+
+    fireEvent.click(button);
+
+    expect(button).toHaveAttribute("aria-expanded", "false");
+    expect(
+      screen.queryByTestId("replay-user-sessions-menu"),
+    ).not.toBeInTheDocument();
+  });
+
+  /*
+   * The trigger opens a listbox and must say so: a screen reader promised
+   * a menu would then meet options where it expected menu items. And when
+   * the shell could not page the whole list back to the current session
+   * (ReplayUserSessionsState.isTruncated), the trigger must not describe
+   * what it opens as "every session".
+   */
+  it("announces a listbox, and says when the list is only part of the story", () => {
+    const { rerender } = render(<ReplayUserSessionsMenu {...makeProps()} />);
+    const button: () => HTMLElement = (): HTMLElement => {
+      return screen.getByTestId("replay-user-sessions-button");
+    };
+
+    expect(button()).toHaveAttribute("aria-haspopup", "listbox");
+    expect(button()).not.toHaveAttribute("data-truncated");
+    expect(button()).toHaveAttribute(
+      "title",
+      expect.stringContaining("Every session from this"),
+    );
+
+    rerender(<ReplayUserSessionsMenu {...makeProps({ isTruncated: true })} />);
+
+    expect(button()).toHaveAttribute("data-truncated", "true");
+    expect(button()).toHaveAttribute(
+      "title",
+      expect.stringContaining("than the switcher can show"),
+    );
+
+    fireEvent.click(button());
+
+    expect(screen.getByTestId("replay-user-sessions-menu")).toHaveTextContent(
+      /Some sessions from this (user|visitor)/,
+    );
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+
+  it("lists the sessions newest first in a listbox, with the current one marked", () => {
+    render(<ReplayUserSessionsMenu {...makeProps()} />);
+
+    const menu: HTMLElement = openMenu();
+
+    expect(menu).toHaveTextContent("Sessions from this user · past 30 days");
+
+    const listbox: HTMLElement = within(menu).getByRole("listbox");
+    const items: Array<HTMLElement> = within(listbox).getAllByRole("option");
+
+    expect(
+      items.map((item: HTMLElement): string | null => {
+        return item.getAttribute("data-session-id");
+      }),
+    ).toEqual(["newest", CURRENT_ID, "oldest"]);
+
+    expect(items[1]).toHaveAttribute("aria-selected", "true");
+    expect(items[1]).toHaveTextContent("Watching");
+    expect(items[1]?.className).toContain("bg-indigo-50");
+    expect(items[0]).toHaveAttribute("aria-selected", "false");
+    expect(items[0]).not.toHaveTextContent("Watching");
+    /* Only the current row is in the Tab sequence (roving tabindex). */
+    expect(items[1]).toHaveAttribute("tabindex", "0");
+    expect(items[0]).toHaveAttribute("tabindex", "-1");
+  });
+
+  it("describes each row: when, where, on what, how long, and its state", () => {
+    render(<ReplayUserSessionsMenu {...makeProps()} />);
+
+    const items: Array<HTMLElement> = within(openMenu()).getAllByTestId(
+      "replay-user-session-item",
+    );
+
+    expect(items[0]).toHaveTextContent("5 minutes ago");
+    expect(items[0]).toHaveTextContent("/");
+    expect(items[0]).toHaveTextContent("30s");
+    expect(
+      within(items[0] as HTMLElement).getByLabelText("Recording now"),
+    ).toBeInTheDocument();
+    expect(
+      within(items[0] as HTMLElement).queryByTestId(
+        "replay-user-session-errors",
+      ),
+    ).not.toBeInTheDocument();
+
+    expect(items[1]).toHaveTextContent("3 hours ago");
+    expect(items[1]).toHaveTextContent("/checkout?step=2");
+    expect(items[1]).toHaveTextContent("Chrome · desktop");
+    expect(items[1]).toHaveTextContent("4m 12s");
+
+    expect(items[2]).toHaveTextContent("2 days ago");
+    expect(items[2]).toHaveTextContent("/orders/42");
+    expect(items[2]).toHaveTextContent("Safari · mobile");
+    expect(
+      within(items[2] as HTMLElement).getByTestId("replay-user-session-errors"),
+    ).toHaveTextContent("3");
+    expect(
+      within(items[2] as HTMLElement).queryByLabelText("Recording now"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("names the visitor rather than the user when the link is the browser's id", () => {
+    render(<ReplayUserSessionsMenu {...makeProps({ kind: "visitor" })} />);
+
+    expect(openMenu()).toHaveTextContent(
+      "Sessions from this visitor · past 30 days",
+    );
+  });
+
+  it("a click hands the chosen session to the shell and closes the menu", () => {
+    const onOpenUserSession: MockFunction = getJestMockFunction();
+
+    render(
+      <ReplayUserSessionsMenu
+        {...makeProps({ onOpenUserSession: onOpenUserSession })}
+      />,
+    );
+
+    const items: Array<HTMLElement> = within(openMenu()).getAllByTestId(
+      "replay-user-session-item",
+    );
+
+    fireEvent.click(items[2] as HTMLElement);
+
+    expect(onOpenUserSession).toHaveBeenCalledTimes(1);
+    expect(onOpenUserSession).toHaveBeenCalledWith("oldest");
+    expect(
+      screen.queryByTestId("replay-user-sessions-menu"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("choosing the session already on screen only closes the menu", () => {
+    const onOpenUserSession: MockFunction = getJestMockFunction();
+
+    render(
+      <ReplayUserSessionsMenu
+        {...makeProps({ onOpenUserSession: onOpenUserSession })}
+      />,
+    );
+
+    const items: Array<HTMLElement> = within(openMenu()).getAllByTestId(
+      "replay-user-session-item",
+    );
+
+    fireEvent.click(items[1] as HTMLElement);
+
+    expect(onOpenUserSession).not.toHaveBeenCalled();
+    expect(
+      screen.queryByTestId("replay-user-sessions-menu"),
+    ).not.toBeInTheDocument();
+    expect(screen.getByTestId("replay-user-sessions-button")).toHaveFocus();
+  });
+
+  it("focuses the current row on open and moves with the arrow keys", () => {
+    render(<ReplayUserSessionsMenu {...makeProps()} />);
+
+    const listbox: HTMLElement = within(openMenu()).getByRole("listbox");
+    const items: Array<HTMLElement> = within(listbox).getAllByRole("option");
+
+    expect(items[1]).toHaveFocus();
+
+    fireEvent.keyDown(listbox, { key: "ArrowDown" });
+    expect(items[2]).toHaveFocus();
+
+    /* The list does not wrap: the oldest row is the end. */
+    fireEvent.keyDown(listbox, { key: "ArrowDown" });
+    expect(items[2]).toHaveFocus();
+
+    fireEvent.keyDown(listbox, { key: "ArrowUp" });
+    expect(items[1]).toHaveFocus();
+
+    fireEvent.keyDown(listbox, { key: "Home" });
+    expect(items[0]).toHaveFocus();
+
+    fireEvent.keyDown(listbox, { key: "End" });
+    expect(items[2]).toHaveFocus();
+  });
+
+  it("Enter and Space open the focused row", () => {
+    const onOpenUserSession: MockFunction = getJestMockFunction();
+
+    render(
+      <ReplayUserSessionsMenu
+        {...makeProps({ onOpenUserSession: onOpenUserSession })}
+      />,
+    );
+
+    let listbox: HTMLElement = within(openMenu()).getByRole("listbox");
+
+    fireEvent.keyDown(listbox, { key: "ArrowUp" });
+    fireEvent.keyDown(listbox, { key: "Enter" });
+
+    expect(onOpenUserSession).toHaveBeenLastCalledWith("newest");
+    expect(
+      screen.queryByTestId("replay-user-sessions-menu"),
+    ).not.toBeInTheDocument();
+
+    listbox = within(openMenu()).getByRole("listbox");
+
+    fireEvent.keyDown(listbox, { key: "ArrowDown" });
+    fireEvent.keyDown(listbox, { key: " " });
+
+    expect(onOpenUserSession).toHaveBeenLastCalledWith("oldest");
+    expect(onOpenUserSession).toHaveBeenCalledTimes(2);
+  });
+
+  it("Escape closes the menu, chooses nothing and returns focus to the trigger", () => {
+    const onOpenUserSession: MockFunction = getJestMockFunction();
+    const onWindowKey: MockFunction = getJestMockFunction();
+
+    render(
+      <ReplayUserSessionsMenu
+        {...makeProps({ onOpenUserSession: onOpenUserSession })}
+      />,
+    );
+
+    window.addEventListener("keydown", onWindowKey);
+
+    try {
+      const listbox: HTMLElement = within(openMenu()).getByRole("listbox");
+
+      fireEvent.keyDown(listbox, { key: "Escape" });
+
+      expect(onOpenUserSession).not.toHaveBeenCalled();
+      expect(
+        screen.queryByTestId("replay-user-sessions-menu"),
+      ).not.toBeInTheDocument();
+      expect(screen.getByTestId("replay-user-sessions-button")).toHaveFocus();
+      /* The player's own Escape (close panel, leave theater) must not also fire. */
+      expect(onWindowKey).not.toHaveBeenCalled();
+    } finally {
+      window.removeEventListener("keydown", onWindowKey);
+    }
+  });
+
+  it("closes on a click outside without choosing anything", () => {
+    const onOpenUserSession: MockFunction = getJestMockFunction();
+
+    render(
+      <div>
+        <button type="button" data-testid="elsewhere">
+          Elsewhere
+        </button>
+        <ReplayUserSessionsMenu
+          {...makeProps({ onOpenUserSession: onOpenUserSession })}
+        />
+      </div>,
+    );
+
+    openMenu();
+
+    const elsewhere: HTMLElement = screen.getByTestId("elsewhere");
+
+    fireEvent.mouseDown(elsewhere, { button: 0 });
+    fireEvent.click(elsewhere, { detail: 1 });
+
+    expect(
+      screen.queryByTestId("replay-user-sessions-menu"),
+    ).not.toBeInTheDocument();
+    expect(onOpenUserSession).not.toHaveBeenCalled();
+  });
+
+  it("stays open for a click inside the panel that is not on a row", () => {
+    render(<ReplayUserSessionsMenu {...makeProps()} />);
+
+    const menu: HTMLElement = openMenu();
+    const heading: HTMLElement = within(menu).getByText(
+      "Sessions from this user · past 30 days",
+    );
+
+    fireEvent.mouseDown(heading, { button: 0 });
+    fireEvent.click(heading, { detail: 1 });
+
+    expect(screen.getByTestId("replay-user-sessions-menu")).toBeInTheDocument();
+  });
+
+  it("falls back to the first row when the current session is not in the list", () => {
+    render(
+      <ReplayUserSessionsMenu
+        {...makeProps({ currentSessionId: "missing" })}
+      />,
+    );
+
+    const items: Array<HTMLElement> = within(openMenu()).getAllByRole("option");
+
+    expect(items[0]).toHaveFocus();
+    expect(items[0]).toHaveAttribute("tabindex", "0");
+    expect(
+      items.some((item: HTMLElement): boolean => {
+        return item.getAttribute("aria-selected") === "true";
+      }),
+    ).toBe(false);
+  });
+});

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

@@ -14,8 +14,8 @@ import { diagnoseRecordingHealth } from "../../../Utils/Rum/SessionReplayHealth"
 /*
  * The explained empty list. Every variant renders its cause, its quantity
  * and exactly one action; the range action calls the range setter with
- * the wider range; chips carry a remove button; never-installed embeds
- * the live setup guide and nothing else does.
+ * the wider range; chips carry a remove button; never-installed links to
+ * setup documentation without embedding another card in the table.
  */
 
 const postMock: MockFunction = getJestMockFunction();
@@ -275,15 +275,7 @@ describe("SessionReplayEmptyStateView variants", () => {
     expect(screen.getAllByTestId("list-empty-action").length).toBe(1);
   });
 
-  it("never-installed: embeds the live setup guide", async () => {
-    postMock.mockResolvedValue(
-      new HTTPResponse<JSONObject>(
-        200,
-        wireStatus({ lastConfigFetchAt: null, lastChunkReceivedAt: null }),
-        {},
-      ),
-    );
-
+  it("never-installed: offers one documentation link without embedding the guide", () => {
     renderView(
       reasonFor(
         makeStatus({ lastConfigFetchAt: null, lastChunkReceivedAt: null }),
@@ -294,12 +286,17 @@ describe("SessionReplayEmptyStateView variants", () => {
       "never-installed",
     );
     expect(screen.getByTestId("list-empty-title")).toHaveTextContent(
-      "Nothing has been recorded here yet",
+      "No recordings yet",
     );
-
-    await waitFor(() => {
-      expect(screen.getByTestId("setup-guide")).toBeInTheDocument();
-    });
+    expect(screen.getAllByTestId("list-empty-action")).toHaveLength(1);
+    expect(
+      screen.getByTestId("list-empty-action").closest("a"),
+    ).toHaveAttribute(
+      "href",
+      expect.stringContaining(`/rum/${APP_ID}/documentation`),
+    );
+    expect(screen.queryByTestId("setup-guide")).not.toBeInTheDocument();
+    expect(postMock).not.toHaveBeenCalled();
   });
 
   it("installed-not-uploading: explains from the policy with one action", () => {

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

@@ -0,0 +1,199 @@
+import "@testing-library/jest-dom";
+import { describe, expect, it } from "@jest/globals";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import * as React from "react";
+import SessionReplayFacets, {
+  getSessionReplayFacetOptions,
+  getSessionReplayFacetValue,
+  SESSION_REPLAY_FACETS,
+  SessionReplayFacet,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/SessionReplayFacets";
+import {
+  buildSessionReplayListFilters,
+  EMPTY_ADVANCED_FILTERS,
+  SessionReplayAdvancedFilters,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/SessionReplayListFilters";
+import { SessionReplaySummary } from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/SessionReplayTable";
+import { FilterChipDropdownOption } from "../../../../App/FeatureSet/Dashboard/src/Components/ResourceOwners/FilterChipDropdownTypes";
+
+function renderFacets(
+  filters: SessionReplayAdvancedFilters = EMPTY_ADVANCED_FILTERS,
+  signal: string = "all",
+): {
+  filtersChanged: Array<SessionReplayAdvancedFilters>;
+  signalsChanged: Array<string>;
+} {
+  const filtersChanged: Array<SessionReplayAdvancedFilters> = [];
+  const signalsChanged: Array<string> = [];
+  render(
+    <SessionReplayFacets
+      rows={[]}
+      filters={filters}
+      signal={signal}
+      onFiltersChange={(value: SessionReplayAdvancedFilters): void => {
+        filtersChanged.push(value);
+      }}
+      onSignalChange={(value: string): void => {
+        signalsChanged.push(value);
+      }}
+    />,
+  );
+  return { filtersChanged, signalsChanged };
+}
+
+function openFacet(field: string): void {
+  fireEvent.click(
+    within(screen.getByTestId(`session-facet-${field}`)).getByRole("button"),
+  );
+}
+
+describe("session replay standard facets", () => {
+  it("offers all seven facets on an empty application", () => {
+    renderFacets();
+    for (const name of [
+      "Signal",
+      "Browser",
+      "Operating system",
+      "Device",
+      "Country",
+      "Capture reason",
+      "Duration",
+    ]) {
+      expect(screen.getByRole("button", { name })).toBeInTheDocument();
+    }
+    expect(screen.getByTestId("session-replay-facets")).not.toHaveTextContent(
+      "0 sessions",
+    );
+  });
+
+  it.each([
+    ["browserName", "Chrome", "browserNames", ["Chrome"]],
+    ["osName", "macOS", "osNames", ["macOS"]],
+    ["deviceType", "Mobile", "deviceTypes", ["mobile"]],
+    ["countryCode", "United Kingdom (GB)", "countryCodes", ["GB"]],
+    ["minDurationSeconds", "At least 2 minutes", "minDurationMs", 120000],
+  ])(
+    "%s selects a server filter and keeps the other facets",
+    (
+      field: string | number | Array<string>,
+      label: string | number | Array<string>,
+      requestField: string | number | Array<string>,
+      value: string | number | Array<string>,
+    ) => {
+      const changes: ReturnType<typeof renderFacets> = renderFacets({
+        ...EMPTY_ADVANCED_FILTERS,
+        urlPrefix: "/checkout",
+      });
+      openFacet(field as string);
+      if (field === "countryCode") {
+        fireEvent.change(screen.getByPlaceholderText("Search country..."), {
+          target: { value: "United Kingdom" },
+        });
+      }
+      expect(screen.queryByRole("combobox")).toBeNull();
+      fireEvent.click(screen.getByRole("option", { name: label as string }));
+      expect(changes.filtersChanged).toHaveLength(1);
+      const next: SessionReplayAdvancedFilters = changes
+        .filtersChanged[0] as SessionReplayAdvancedFilters;
+      expect(next.urlPrefix).toBe("/checkout");
+      expect(buildSessionReplayListFilters("all", next)).toEqual({
+        urlPrefix: "/checkout",
+        [requestField as string]: value,
+      });
+    },
+  );
+
+  it("signals use the endpoint predicate without estimating counts", () => {
+    const changes: ReturnType<typeof renderFacets> = renderFacets();
+    openFacet("signal");
+    fireEvent.click(screen.getByRole("option", { name: /Playable/ }));
+    expect(changes.signalsChanged).toEqual(["playable"]);
+    expect(
+      buildSessionReplayListFilters(changes.signalsChanged[0] as string),
+    ).toEqual({ isPlayable: true });
+  });
+
+  it("clears one facet without removing the other filters", () => {
+    const changes: ReturnType<typeof renderFacets> = renderFacets({
+      ...EMPTY_ADVANCED_FILTERS,
+      browserName: "Chrome",
+      deviceType: "mobile",
+    });
+    fireEvent.click(
+      screen.getByRole("button", { name: "Clear Browser filter" }),
+    );
+    expect(changes.filtersChanged[0]).toEqual({
+      ...EMPTY_ADVANCED_FILTERS,
+      browserName: "",
+      deviceType: "mobile",
+    });
+  });
+
+  it("shows the effective capture reason for Slow and allows clearing it", () => {
+    const changes: ReturnType<typeof renderFacets> = renderFacets(
+      { ...EMPTY_ADVANCED_FILTERS, triggerReason: "error" },
+      "slow",
+    );
+    expect(screen.getByTestId("session-facet-triggerReason")).toHaveTextContent(
+      "Slow page",
+    );
+    fireEvent.click(
+      screen.getByRole("button", { name: "Clear Capture reason filter" }),
+    );
+    expect(changes.signalsChanged).toEqual(["all"]);
+    expect(changes.filtersChanged[0]?.triggerReason).toBe("");
+  });
+
+  it("keeps custom selected values and row suggestions without treating the page as all results", () => {
+    const facet: SessionReplayFacet =
+      SESSION_REPLAY_FACETS[0] as SessionReplayFacet;
+    const options: Array<FilterChipDropdownOption> =
+      getSessionReplayFacetOptions(
+        facet,
+        [
+          { browserName: "Customer browser" } as SessionReplaySummary,
+          { browserName: "Customer browser" } as SessionReplaySummary,
+          { browserName: "" } as SessionReplaySummary,
+        ],
+        "Saved browser",
+      );
+    expect(
+      options.filter((option: FilterChipDropdownOption): boolean => {
+        return option.value === "Customer browser";
+      }),
+    ).toHaveLength(1);
+    expect(options).toContainEqual({
+      value: "Saved browser",
+      label: "Saved browser",
+    });
+    expect(options).toContainEqual({ value: "Chrome", label: "Chrome" });
+    expect(
+      options.every((option: FilterChipDropdownOption): boolean => {
+        return !("count" in option);
+      }),
+    ).toBe(true);
+  });
+
+  it("normalizes country and duration like the applied request and ignores invalid duration", () => {
+    const filters: SessionReplayAdvancedFilters = {
+      ...EMPTY_ADVANCED_FILTERS,
+      countryCode: " gb ",
+      minDurationSeconds: " 120 ",
+    };
+    expect(getSessionReplayFacetValue("countryCode", filters, "all")).toBe(
+      "GB",
+    );
+    expect(
+      getSessionReplayFacetValue("minDurationSeconds", filters, "all"),
+    ).toBe("120");
+    for (const invalid of ["0", "-4", "abc", "Infinity"]) {
+      expect(
+        getSessionReplayFacetValue(
+          "minDurationSeconds",
+          { ...filters, minDurationSeconds: invalid },
+          "all",
+        ),
+      ).toBe("");
+    }
+  });
+});