@oneuptime/common 12.0.31 → 12.0.32

package/Tests/UI/Components/Charts/ChartClickDoubleClickDisambiguation.test.tsx

@@ -0,0 +1,221 @@
+import "@testing-library/jest-dom";
+import { afterEach, beforeEach, describe, expect, test } from "@jest/globals";
+import { act, cleanup, render } from "@testing-library/react";
+import React from "react";
+import getJestMockFunction, { MockFunction } from "../../../MockType";
+
+/*
+ * A double-click is delivered as TWO plain clicks and only then a
+ * `dblclick`. On a dashboard panel a plain click already means something —
+ * it pins the bucket and opens the investigation inspector — so wiring
+ * double-click-to-reset naively would pop that inspector twice on the way
+ * to resetting the board, and leave it open on top of the result.
+ *
+ * The chart library solves it by holding the click open for
+ * DOUBLE_CLICK_DISAMBIGUATION_MS and cancelling it when the double-click
+ * lands. That delay is a real cost, so it is armed ONLY when a reset
+ * handler is supplied — every other chart in the product keeps instant
+ * clicks. These tests pin both halves of that bargain.
+ *
+ * recharts' own chart root is mocked here so the chart-level handlers can
+ * be invoked with a known active index: jsdom reports every element as
+ * 0x0, so a real click would never resolve to a bucket and the assertions
+ * would pass for the wrong reason. The wiring from recharts' DOM into
+ * these handlers is covered separately by ChartDoubleClickReset.test.tsx.
+ */
+
+/*
+ * Deliberately NOT a React props interface: the mock chart below takes an
+ * untyped bag and this is just how the captured handlers are read back.
+ * Typing the mock's parameter would trip react/no-unused-prop-types, since
+ * the mock renders none of them.
+ */
+type CapturedChartHandlers = {
+  onClick?: ((chartState: Record<string, unknown>) => void) | undefined;
+  onDoubleClick?: ((...args: Array<unknown>) => void) | undefined;
+};
+
+const mockChartPropsRef: { current: CapturedChartHandlers } = { current: {} };
+
+jest.mock("recharts", () => {
+  const actual: Record<string, any> = jest.requireActual("recharts");
+  return {
+    ...actual,
+    ResponsiveContainer: ({ children }: { children: React.ReactElement }) => {
+      return children;
+    },
+    LineChart: (props: Record<string, unknown>): React.ReactElement => {
+      mockChartPropsRef.current = props as CapturedChartHandlers;
+      return React.createElement("div", { "data-testid": "chart-root" });
+    },
+  };
+});
+
+import { LineChart } from "../../../../UI/Components/Charts/ChartLibrary/LineChart/LineChart";
+import { DOUBLE_CLICK_DISAMBIGUATION_MS } from "../../../../UI/Components/Charts/ChartLibrary/Utils/DoubleClick";
+import {
+  CHART_DATA_POINT_DATE_KEY,
+  CHART_DATA_POINT_X_AXIS_KEY,
+} from "../../../../UI/Components/Charts/ChartLibrary/Types/ChartDataPoint";
+
+const BUCKET_MS: number = 60 * 1000;
+const FIRST_BUCKET: Date = new Date("2026-08-10T00:00:00.000Z");
+const CLICKED_ROW_INDEX: number = 2;
+
+function buildRows(): Array<Record<string, number | string>> {
+  const rows: Array<Record<string, number | string>> = [];
+  for (let index: number = 0; index < 6; index++) {
+    const bucketDate: Date = new Date(
+      FIRST_BUCKET.getTime() + index * BUCKET_MS,
+    );
+    rows.push({
+      [CHART_DATA_POINT_X_AXIS_KEY]: bucketDate.toISOString(),
+      [CHART_DATA_POINT_DATE_KEY]: bucketDate.getTime(),
+      CPU: 10 + index,
+    });
+  }
+  return rows;
+}
+
+function renderChart(options: {
+  onBucketClick: MockFunction;
+  onTimeRangeReset?: MockFunction | undefined;
+}): void {
+  render(
+    <LineChart
+      data={buildRows()}
+      index={CHART_DATA_POINT_X_AXIS_KEY}
+      categories={["CPU"]}
+      showLegend={false}
+      onBucketClick={
+        options.onBucketClick as unknown as (
+          bucketStart: Date,
+          bucketEnd: Date,
+          valuesAtBucket: Record<string, number | string>,
+        ) => void
+      }
+      onTimeRangeReset={
+        options.onTimeRangeReset as unknown as (() => void) | undefined
+      }
+    />,
+  );
+}
+
+function clickBucket(): void {
+  act(() => {
+    mockChartPropsRef.current.onClick?.({
+      activeTooltipIndex: CLICKED_ROW_INDEX,
+    });
+  });
+}
+
+function doubleClick(): void {
+  act(() => {
+    mockChartPropsRef.current.onDoubleClick?.({}, {});
+  });
+}
+
+function advancePastTheDoubleClickWindow(): void {
+  act(() => {
+    jest.advanceTimersByTime(DOUBLE_CLICK_DISAMBIGUATION_MS + 10);
+  });
+}
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  mockChartPropsRef.current = {};
+});
+
+afterEach(() => {
+  cleanup();
+  jest.useRealTimers();
+});
+
+describe("chart click vs. double-click disambiguation", () => {
+  test("with no reset handler, a bucket click is delivered immediately", () => {
+    const onBucketClick: MockFunction = getJestMockFunction();
+    renderChart({ onBucketClick });
+
+    // No onDoubleClick is even handed to recharts when reset is off.
+    expect(mockChartPropsRef.current.onDoubleClick).toBeUndefined();
+
+    clickBucket();
+
+    expect(onBucketClick.mock.calls.length).toBe(1);
+    expect(onBucketClick.mock.calls[0]?.[0]).toEqual(
+      new Date(FIRST_BUCKET.getTime() + CLICKED_ROW_INDEX * BUCKET_MS),
+    );
+    // The bucket covers its full width, derived from the adjacent rows.
+    expect(onBucketClick.mock.calls[0]?.[1]).toEqual(
+      new Date(FIRST_BUCKET.getTime() + (CLICKED_ROW_INDEX + 1) * BUCKET_MS),
+    );
+  });
+
+  test("with a reset handler, a single click still reaches the bucket — just later", () => {
+    const onBucketClick: MockFunction = getJestMockFunction();
+    const onTimeRangeReset: MockFunction = getJestMockFunction();
+    renderChart({ onBucketClick, onTimeRangeReset });
+
+    clickBucket();
+
+    // Held open, in case a second click is coming.
+    expect(onBucketClick.mock.calls.length).toBe(0);
+
+    advancePastTheDoubleClickWindow();
+
+    expect(onBucketClick.mock.calls.length).toBe(1);
+    expect(onTimeRangeReset.mock.calls.length).toBe(0);
+  });
+
+  test("a double-click resets and never pins a bucket", () => {
+    const onBucketClick: MockFunction = getJestMockFunction();
+    const onTimeRangeReset: MockFunction = getJestMockFunction();
+    renderChart({ onBucketClick, onTimeRangeReset });
+
+    // Exactly what the browser delivers: click, click, then dblclick.
+    clickBucket();
+    clickBucket();
+    doubleClick();
+
+    expect(onTimeRangeReset.mock.calls.length).toBe(1);
+
+    advancePastTheDoubleClickWindow();
+
+    // Neither click may survive the reset.
+    expect(onBucketClick.mock.calls.length).toBe(0);
+  });
+
+  test("a click after a double-click still works", () => {
+    const onBucketClick: MockFunction = getJestMockFunction();
+    const onTimeRangeReset: MockFunction = getJestMockFunction();
+    renderChart({ onBucketClick, onTimeRangeReset });
+
+    clickBucket();
+    clickBucket();
+    doubleClick();
+    advancePastTheDoubleClickWindow();
+
+    clickBucket();
+    advancePastTheDoubleClickWindow();
+
+    expect(onBucketClick.mock.calls.length).toBe(1);
+    expect(onTimeRangeReset.mock.calls.length).toBe(1);
+  });
+
+  test("unmounting mid-gesture drops the pending click instead of firing it", () => {
+    const onBucketClick: MockFunction = getJestMockFunction();
+    const onTimeRangeReset: MockFunction = getJestMockFunction();
+    renderChart({ onBucketClick, onTimeRangeReset });
+
+    clickBucket();
+    cleanup();
+    advancePastTheDoubleClickWindow();
+
+    /*
+     * A widget can be unmounted by the very reset the user is performing
+     * (the board re-queries and re-renders); a timer that outlives it would
+     * call back into a dead component.
+     */
+    expect(onBucketClick.mock.calls.length).toBe(0);
+  });
+});

package/Tests/UI/Components/Charts/ChartDoubleClickReset.test.tsx

@@ -0,0 +1,220 @@
+import "@testing-library/jest-dom";
+import { afterEach, describe, expect, test } from "@jest/globals";
+import {
+  RenderResult,
+  cleanup,
+  fireEvent,
+  render,
+} from "@testing-library/react";
+import React from "react";
+import getJestMockFunction, { MockFunction } from "../../../MockType";
+
+/*
+ * ResponsiveContainer measures its parent, which is always 0x0 in jsdom, so
+ * the chart renders nothing — including no `.recharts-wrapper` for the
+ * events below to land on — without a fixed size. Same shim the other chart
+ * suites use.
+ */
+jest.mock("recharts", () => {
+  const actual: Record<string, any> = jest.requireActual("recharts");
+  return {
+    ...actual,
+    ResponsiveContainer: ({ children }: { children: React.ReactElement }) => {
+      return React.cloneElement(children, { width: 600, height: 300 });
+    },
+  };
+});
+
+import AreaChartElement from "../../../../UI/Components/Charts/Area/AreaChart";
+import BarChartElement from "../../../../UI/Components/Charts/Bar/BarChart";
+import LineChartElement from "../../../../UI/Components/Charts/Line/LineChart";
+import ChartCurve from "../../../../UI/Components/Charts/Types/ChartCurve";
+import DataPoint from "../../../../UI/Components/Charts/Types/DataPoint";
+import SeriesPoint from "../../../../UI/Components/Charts/Types/SeriesPoints";
+import {
+  XAxis as ChartXAxis,
+  XAxisAggregateType,
+} from "../../../../UI/Components/Charts/Types/XAxis/XAxis";
+import XAxisType from "../../../../UI/Components/Charts/Types/XAxis/XAxisType";
+import YAxis, {
+  YAxisPrecision,
+} from "../../../../UI/Components/Charts/Types/YAxis/YAxis";
+import YAxisType from "../../../../UI/Components/Charts/Types/YAxis/YAxisType";
+
+/*
+ * Drag-to-select on a dashboard panel now retimes the WHOLE dashboard, so
+ * every panel needs a way back out of the zoom that does not depend on
+ * finding a particular widget: double-clicking any of them.
+ *
+ * That gesture is wired at the chart library, not at the widget card, for
+ * two reasons pinned here: it must reach recharts' own plot surface (the
+ * card sits under the edit overlay and the resize handles), and it must be
+ * OPT-IN — a chart handed no reset handler has to behave exactly as it did
+ * before, because a double-click is also two plain clicks and those still
+ * mean "pin this bucket" everywhere else in the product.
+ */
+
+const START: Date = new Date("2026-08-10T00:00:00.000Z");
+const END: Date = new Date("2026-08-10T01:00:00.000Z");
+
+function buildPoints(): Array<DataPoint> {
+  const points: Array<DataPoint> = [];
+  for (let index: number = 0; index < 10; index++) {
+    points.push({
+      x: new Date(START.getTime() + index * 60 * 1000),
+      y: 90 + index,
+    });
+  }
+  return points;
+}
+
+function buildSeries(): Array<SeriesPoint> {
+  return [{ seriesName: "CPU", data: buildPoints() }];
+}
+
+const X_AXIS: ChartXAxis = {
+  legend: "Time",
+  options: {
+    type: XAxisType.Time,
+    min: START,
+    max: END,
+    aggregateType: XAxisAggregateType.Average,
+  },
+};
+
+const Y_AXIS: YAxis = {
+  legend: "%",
+  options: {
+    type: YAxisType.Number,
+    min: "auto",
+    max: 100,
+    precision: YAxisPrecision.TwoDecimals,
+    formatter: (value: number): string => {
+      return `${value}%`;
+    },
+  },
+};
+
+interface ChartUnderTest {
+  name: string;
+  render: (onTimeRangeReset: (() => void) | undefined) => React.ReactElement;
+}
+
+const CHARTS: Array<ChartUnderTest> = [
+  {
+    name: "LineChart",
+    render: (
+      onTimeRangeReset: (() => void) | undefined,
+    ): React.ReactElement => {
+      return (
+        <LineChartElement
+          data={buildSeries()}
+          xAxis={X_AXIS}
+          yAxis={Y_AXIS}
+          curve={ChartCurve.MONOTONE}
+          heightInPx={300}
+          showLegend={false}
+          sync={false}
+          syncid="double-click-reset-test"
+          onTimeRangeReset={onTimeRangeReset}
+        />
+      );
+    },
+  },
+  {
+    name: "AreaChart",
+    render: (
+      onTimeRangeReset: (() => void) | undefined,
+    ): React.ReactElement => {
+      return (
+        <AreaChartElement
+          data={buildSeries()}
+          xAxis={X_AXIS}
+          yAxis={Y_AXIS}
+          curve={ChartCurve.MONOTONE}
+          heightInPx={300}
+          showLegend={false}
+          sync={false}
+          syncid="double-click-reset-test"
+          onTimeRangeReset={onTimeRangeReset}
+        />
+      );
+    },
+  },
+  {
+    /*
+     * A bar panel cannot ORIGINATE a zoom — it has no drag-to-select — but
+     * it must still be able to end one, or a board whose only panel under
+     * the pointer is a bar chart would be a dead end.
+     */
+    name: "BarChart",
+    render: (
+      onTimeRangeReset: (() => void) | undefined,
+    ): React.ReactElement => {
+      return (
+        <BarChartElement
+          data={buildSeries()}
+          xAxis={X_AXIS}
+          yAxis={Y_AXIS}
+          heightInPx={300}
+          showLegend={false}
+          sync={false}
+          syncid="double-click-reset-test"
+          onTimeRangeReset={onTimeRangeReset}
+        />
+      );
+    },
+  },
+];
+
+function plotSurface(rendered: RenderResult): Element {
+  const surface: Element | null =
+    rendered.container.querySelector(".recharts-wrapper");
+  if (!surface) {
+    throw new Error("chart did not render a plot surface");
+  }
+  return surface;
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("chart double-click to reset the time range", () => {
+  for (const chart of CHARTS) {
+    describe(chart.name, () => {
+      test("double-clicking the plot calls back exactly once", () => {
+        const onTimeRangeReset: MockFunction = getJestMockFunction();
+        const rendered: RenderResult = render(
+          chart.render(onTimeRangeReset as unknown as () => void),
+        );
+
+        fireEvent.doubleClick(plotSurface(rendered));
+
+        expect(onTimeRangeReset.mock.calls.length).toBe(1);
+      });
+
+      test("a plain click is not a reset", () => {
+        const onTimeRangeReset: MockFunction = getJestMockFunction();
+        const rendered: RenderResult = render(
+          chart.render(onTimeRangeReset as unknown as () => void),
+        );
+
+        fireEvent.click(plotSurface(rendered));
+
+        expect(onTimeRangeReset.mock.calls.length).toBe(0);
+      });
+
+      test("a chart with no reset handler still renders and swallows the gesture", () => {
+        const rendered: RenderResult = render(chart.render(undefined));
+
+        // No handler wired, so this must be inert rather than throwing.
+        fireEvent.doubleClick(plotSurface(rendered));
+
+        expect(
+          rendered.container.querySelector(".recharts-wrapper"),
+        ).not.toBeNull();
+      });
+    });
+  }
+});