@oneuptime/common 14.0.8 → 14.0.10

package/Tests/App/Dashboard/MetricMonitorPreviewZoomLabel.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, test } from "@jest/globals";
+import { getZoomedWindowLabel } from "../../../../App/FeatureSet/Dashboard/src/Components/Monitor/MetricMonitor/MetricMonitorPreview";
+import InBetween from "../../../Types/BaseDatabase/InBetween";
+import OneUptimeDate from "../../../Types/Date";
+
+/*
+ * The metric monitor preview's header names the window a zoom shows (issue
+ * #4105). It used the full date on both ends - "Sep 29 2026, 05:12:00 AM
+ * GMT - Sep 29 2026, 05:34:00 AM GMT" - which wrapped the card's
+ * description onto a second line at 1280px and moved the chart down 23px on
+ * every zoom, and back up on every reset. It now names the window the way
+ * the explorers' time pickers name a custom range.
+ */
+
+function window(start: string, end: string): InBetween<Date> {
+  return new InBetween<Date>(new Date(start), new Date(end));
+}
+
+describe("getZoomedWindowLabel", () => {
+  test("a zoom within one day names the day once", () => {
+    const zoom: InBetween<Date> = window(
+      "2026-09-29T12:12:00.000Z",
+      "2026-09-29T12:34:00.000Z",
+    );
+
+    const label: string = getZoomedWindowLabel(zoom);
+
+    expect(label).toBe(
+      `${OneUptimeDate.getDateAsLocalShortDateTimeString(zoom.startValue)} - ${OneUptimeDate.getLocalTimeString(
+        zoom.endValue,
+        { use12HourFormat: OneUptimeDate.getUserPrefers12HourFormat() },
+      )}`,
+    );
+    // The day appears once, not twice.
+    const day: string = OneUptimeDate.getDateAsLocalShortDateTimeString(
+      zoom.startValue,
+    ).split(",")[0]!;
+    expect(label.split(day)).toHaveLength(2);
+  });
+
+  test("a zoom across midnight names both days", () => {
+    const zoom: InBetween<Date> = window(
+      "2026-09-28T12:00:00.000Z",
+      "2026-09-30T12:00:00.000Z",
+    );
+
+    expect(getZoomedWindowLabel(zoom)).toBe(
+      `${OneUptimeDate.getDateAsLocalShortDateTimeString(zoom.startValue)} - ${OneUptimeDate.getDateAsLocalShortDateTimeString(zoom.endValue)}`,
+    );
+  });
+
+  test("it is far shorter than the full date on both ends", () => {
+    const zoom: InBetween<Date> = window(
+      "2026-09-29T12:12:00.000Z",
+      "2026-09-29T12:34:00.000Z",
+    );
+    const fullDates: string = `${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+      zoom.startValue,
+      false,
+      true,
+    )} - ${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+      zoom.endValue,
+      false,
+      true,
+    )}`;
+
+    expect(getZoomedWindowLabel(zoom).length).toBeLessThan(
+      fullDates.length * 0.6,
+    );
+    expect(getZoomedWindowLabel(zoom)).not.toMatch(/\d{4}/);
+  });
+});

package/Tests/App/Dashboard/MetricRowSparklineTimeRangeZoom.test.tsx

@@ -0,0 +1,204 @@
+import "@testing-library/jest-dom";
+import { afterEach, describe, expect, test } from "@jest/globals";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import * as React from "react";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+import MetricRow from "../../../../App/FeatureSet/Dashboard/src/Components/Metrics/MetricRow";
+import { SparklinePoint } from "../../../../App/FeatureSet/Dashboard/src/Components/Metrics/MetricSparkline";
+import { TimeRangeZoomProvider } from "../../../UI/Components/Charts/TimeRangeZoom/TimeRangeZoomContext";
+import { TimeRangeZoom } from "../../../UI/Components/Charts/TimeRangeZoom/UseTimeRangeZoom";
+import { RESET_TIME_RANGE_ZOOM_BUTTON_TEST_ID } from "../../../UI/Components/Charts/TimeRangeZoom/ResetTimeRangeZoomButton";
+import {
+  TIME_RANGE_ZOOM_HINT_RESET_TEXT,
+  TIME_RANGE_ZOOM_HINT_TEST_ID,
+  TIME_RANGE_ZOOM_HINT_TEXT,
+} from "../../../UI/Components/Charts/TimeRangeZoom/TimeRangeZoomHint";
+import MetricType from "../../../Models/DatabaseModels/MetricType";
+import TimeRange from "../../../Types/Time/TimeRange";
+import ValueFormatter from "../../../Utils/ValueFormatter";
+
+/*
+ * Issue #4105 leaves one kind of time chart out on purpose: the sparkline
+ * in each row of a metric list (the Metrics page and every resource's
+ * Metrics tab). The row is a button that opens the metric in the metric
+ * explorer, where every chart zooms; a drag or a double-click across a
+ * 160x40 thumbnail inside that button would fight the row's own click.
+ * These pin that the sparkline stays out of the zoom even when a zooming
+ * page encloses the list.
+ */
+
+const METRIC: MetricType = {
+  name: "http.server.request.duration",
+  unit: "ms",
+} as MetricType;
+
+const POINTS: Array<SparklinePoint> = [
+  { time: "2026-09-28T11:00:00.000Z", value: 12 },
+  { time: "2026-09-28T11:15:00.000Z", value: 18 },
+  { time: "2026-09-28T11:30:00.000Z", value: 9 },
+  { time: "2026-09-28T11:45:00.000Z", value: 21 },
+];
+
+interface ZoomingPage {
+  zoom: TimeRangeZoom;
+  zoomToTimeRange: MockFunction;
+  resetZoom: MockFunction;
+}
+
+function zoomingPage(): ZoomingPage {
+  const zoomToTimeRange: MockFunction = getJestMockFunction();
+  const resetZoom: MockFunction = getJestMockFunction();
+  return {
+    zoomToTimeRange: zoomToTimeRange,
+    resetZoom: resetZoom,
+    // Already zoomed, so a reset would be on offer to anything that took it.
+    zoom: {
+      isZoomed: true,
+      rangeBeforeZoom: { range: TimeRange.PAST_ONE_HOUR },
+      zoomToTimeRange: zoomToTimeRange as unknown as (
+        startTime: Date,
+        endTime: Date,
+      ) => void,
+      resetZoom: resetZoom as unknown as () => void,
+    },
+  };
+}
+
+// MetricSparkline's own box (w-40 h-10): the only part a reader could drag.
+function sparklineBox(row: HTMLElement): HTMLElement {
+  const box: HTMLElement | null = row.querySelector(".w-40.h-10");
+  if (!box) {
+    throw new Error("The row rendered no sparkline");
+  }
+  return box;
+}
+
+function dragAndDoubleClick(target: HTMLElement): void {
+  fireEvent.mouseDown(target, { clientX: 10, clientY: 10, button: 0 });
+  fireEvent.mouseMove(target, { clientX: 60, clientY: 10, buttons: 1 });
+  fireEvent.mouseUp(target, { clientX: 120, clientY: 10, button: 0 });
+  fireEvent.doubleClick(target);
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("metric list sparklines stay out of the page's zoom", () => {
+  test("a drag or a double-click on a clickable row's sparkline never zooms or resets the page; the row still opens", () => {
+    const page: ZoomingPage = zoomingPage();
+    const onClick: MockFunction = getJestMockFunction();
+
+    render(
+      <TimeRangeZoomProvider zoom={page.zoom}>
+        <MetricRow metric={METRIC} sparklinePoints={POINTS} onClick={onClick} />
+      </TimeRangeZoomProvider>,
+    );
+
+    const row: HTMLElement = screen.getByTestId("metric-row");
+    expect(row.tagName).toBe("BUTTON");
+
+    dragAndDoubleClick(sparklineBox(row));
+
+    expect(page.zoomToTimeRange).not.toHaveBeenCalled();
+    expect(page.resetZoom).not.toHaveBeenCalled();
+
+    // The row's own click is untouched: it opens the metric, once per click.
+    fireEvent.click(sparklineBox(row));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  test("a plain row (no drill-down) keeps its sparkline out of the zoom as well", () => {
+    const page: ZoomingPage = zoomingPage();
+
+    render(
+      <TimeRangeZoomProvider zoom={page.zoom}>
+        <MetricRow metric={METRIC} sparklinePoints={POINTS} />
+      </TimeRangeZoomProvider>,
+    );
+
+    const row: HTMLElement = screen.getByTestId("metric-row");
+    expect(row.tagName).toBe("DIV");
+
+    dragAndDoubleClick(sparklineBox(row));
+
+    expect(page.zoomToTimeRange).not.toHaveBeenCalled();
+    expect(page.resetZoom).not.toHaveBeenCalled();
+  });
+
+  test("the row advertises no zoom: no hint, no reset, no drag cursor", () => {
+    const page: ZoomingPage = zoomingPage();
+
+    render(
+      <TimeRangeZoomProvider zoom={page.zoom}>
+        <MetricRow
+          metric={METRIC}
+          sparklinePoints={POINTS}
+          onClick={() => {
+            return undefined;
+          }}
+        />
+      </TimeRangeZoomProvider>,
+    );
+
+    const row: HTMLElement = screen.getByTestId("metric-row");
+    expect(screen.queryByTestId(TIME_RANGE_ZOOM_HINT_TEST_ID)).toBeNull();
+    expect(
+      screen.queryByTestId(RESET_TIME_RANGE_ZOOM_BUTTON_TEST_ID),
+    ).toBeNull();
+    // Neither of the words a hint would show, zoomed or not.
+    expect(row).not.toHaveTextContent(TIME_RANGE_ZOOM_HINT_TEXT);
+    expect(row).not.toHaveTextContent(TIME_RANGE_ZOOM_HINT_RESET_TEXT);
+    expect(sparklineBox(row)).not.toHaveClass("cursor-crosshair");
+    expect(row.querySelector(".cursor-crosshair")).toBeNull();
+  });
+
+  test("hovering the sparkline still reads the value under the cursor", () => {
+    render(
+      <TimeRangeZoomProvider zoom={zoomingPage().zoom}>
+        <MetricRow
+          metric={METRIC}
+          sparklinePoints={POINTS}
+          lastValue={21}
+          onClick={() => {
+            return undefined;
+          }}
+        />
+      </TimeRangeZoomProvider>,
+    );
+
+    const box: HTMLElement = sparklineBox(screen.getByTestId("metric-row"));
+    /*
+     * jsdom lays nothing out, so give the box a width for the hover to map
+     * the cursor across.
+     */
+    box.getBoundingClientRect = (): DOMRect => {
+      return {
+        x: 0,
+        y: 0,
+        left: 0,
+        top: 0,
+        right: 160,
+        bottom: 40,
+        width: 160,
+        height: 40,
+        toJSON: () => {
+          return {};
+        },
+      } as DOMRect;
+    };
+
+    const formatted: (value: number) => string = (value: number): string => {
+      return ValueFormatter.formatValue(value, "ms", {
+        metricName: METRIC.name || "",
+      });
+    };
+    expect(screen.getByText(formatted(21))).toBeInTheDocument();
+
+    fireEvent.mouseMove(box, { clientX: 0, clientY: 10 });
+
+    // The first point replaces the last value while hovered.
+    expect(screen.getByText(formatted(12))).toBeInTheDocument();
+    expect(screen.queryByText(formatted(21))).toBeNull();
+  });
+});

package/Tests/App/Dashboard/MetricViewFirstResultLands.test.tsx

@@ -0,0 +1,408 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import * as React from "react";
+import { MemoryRouter } from "react-router-dom";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * MetricView's first results must land, whatever order its two mount-time
+ * loads finish in (found while pinning where its own "Reset zoom" sits,
+ * issue #4105).
+ *
+ * On mount the view loads the metric catalog and, once it is in, fetched
+ * the results with the data of its FIRST render. Its fetch effect also
+ * fetches whenever the view has a window it has not fetched - and a host
+ * that sets its window after mount (the monitor step forms, the Criteria
+ * page's step preview) gets there before the catalog is in. The catalog's
+ * late fetch then superseded that one with the first render's data: with
+ * no window it dropped the only result (the preview stayed empty, and the
+ * first zoom swapped the charts, and the Reset zoom with them, for a
+ * loader); with an earlier window it drew that stale window's results.
+ *
+ * Here the catalog answers at once, after the host has set its window:
+ * the order that lost the first result.
+ */
+
+const getListMock: MockFunction = getJestMockFunction();
+const getItemMock: MockFunction = getJestMockFunction();
+const fetchResultsMock: MockFunction = getJestMockFunction();
+
+interface MockChartsProps {
+  metricResults: Array<{ data: Array<{ value: number }> }>;
+  onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+}
+
+// What each render of the charts was handed.
+const mockChartsRenders: Array<MockChartsProps> = [];
+
+const MOCK_DRAG: { start: Date; end: Date } = {
+  start: new Date("2026-09-28T11:20:00.000Z"),
+  end: new Date("2026-09-28T11:30:00.000Z"),
+};
+
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Metrics/MetricCharts",
+  () => {
+    return {
+      __esModule: true,
+      default: (props: MockChartsProps): React.ReactElement => {
+        mockChartsRenders.push(props);
+        return (
+          <div data-testid="metric-charts">
+            <button
+              type="button"
+              onClick={() => {
+                props.onTimeRangeSelect?.(MOCK_DRAG.start, MOCK_DRAG.end);
+              }}
+            >
+              Drag across the chart
+            </button>
+          </div>
+        );
+      },
+    };
+  },
+);
+
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Metrics/Utils/Metrics",
+  () => {
+    return {
+      __esModule: true,
+      default: {
+        fetchResults: (...args: Array<unknown>) => {
+          return fetchResultsMock(...args);
+        },
+        // The catalog answers at once.
+        loadAllMetricsTypes: () => {
+          return Promise.resolve({ metricTypes: [], telemetryServices: [] });
+        },
+        getMetricTypes: () => {
+          return Promise.resolve([]);
+        },
+        clearQueryTopNOverridesForScope: () => {
+          return undefined;
+        },
+      },
+    };
+  },
+);
+
+jest.mock("../../../UI/Components/Dropdown/Dropdown", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <select />;
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getList: (...args: Array<unknown>) => {
+        return getListMock(...args);
+      },
+      getItem: (...args: Array<unknown>) => {
+        return getItemMock(...args);
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/Project", () => {
+  return {
+    __esModule: true,
+    default: {
+      getCurrentProjectId: () => {
+        return new ObjectID("99999999-9999-4999-8999-999999999999");
+      },
+    },
+  };
+});
+
+import MetricView from "../../../../App/FeatureSet/Dashboard/src/Components/Metrics/MetricView";
+import MetricMonitorStepForm from "../../../../App/FeatureSet/Dashboard/src/Components/Form/Monitor/MetricMonitor/MetricMonitorStepForm";
+import MonitorStepMetricPreview from "../../../../App/FeatureSet/Dashboard/src/Components/Monitor/MonitorSteps/MonitorStepMetricPreview";
+import { RESET_TIME_RANGE_ZOOM_BUTTON_TEST_ID } from "../../../UI/Components/Charts/TimeRangeZoom/ResetTimeRangeZoomButton";
+import InBetween from "../../../Types/BaseDatabase/InBetween";
+import MetricsAggregationType from "../../../Types/Metrics/MetricsAggregationType";
+import MetricsViewConfig from "../../../Types/Metrics/MetricsViewConfig";
+import MetricViewData from "../../../Types/Metrics/MetricViewData";
+import MonitorStepMetricMonitor, {
+  MonitorStepMetricMonitorUtil,
+} from "../../../Types/Monitor/MonitorStepMetricMonitor";
+import ObjectID from "../../../Types/ObjectID";
+import RollingTime from "../../../Types/RollingTime/RollingTime";
+
+const NOW: Date = new Date("2026-09-28T12:00:00.000Z");
+const HOUR_AGO: Date = new Date("2026-09-28T11:00:00.000Z");
+const TWO_HOURS_AGO: Date = new Date("2026-09-28T10:00:00.000Z");
+
+function viewConfig(): MetricsViewConfig {
+  return {
+    queryConfigs: [
+      {
+        metricAliasData: {
+          metricVariable: "a",
+          title: "cpu",
+          description: "",
+          legend: "",
+          legendUnit: "",
+        },
+        metricQueryData: {
+          filterData: {
+            metricName: "cpu.usage",
+            aggegationType: MetricsAggregationType.Avg,
+          },
+        },
+      },
+    ],
+    formulaConfigs: [],
+  };
+}
+
+interface FetchRequest {
+  metricViewData: MetricViewData;
+}
+
+/*
+ * Every fetch answers at once with one row whose value is the start of
+ * the window asked for, in epoch minutes: what the charts draw says which
+ * window's result the view committed.
+ */
+function answerWithWindowStart(): void {
+  fetchResultsMock.mockImplementation((request: unknown) => {
+    const start: Date = (request as FetchRequest).metricViewData
+      .startAndEndDate!.startValue;
+    return Promise.resolve([
+      {
+        data: [{ timestamp: start, value: start.getTime() / 60_000 }],
+        truncated: false,
+      },
+    ]);
+  });
+}
+
+function drawnValues(): Array<number> {
+  const last: MockChartsProps | undefined =
+    mockChartsRenders[mockChartsRenders.length - 1];
+  if (!last) {
+    throw new Error("The charts have not rendered");
+  }
+  return (last.metricResults[0]?.data || []).map(
+    (row: { value: number }): number => {
+      return row.value;
+    },
+  );
+}
+
+function fetchedStarts(): Array<number> {
+  return fetchResultsMock.mock.calls.map((call: Array<unknown>): number => {
+    return (
+      call[0] as FetchRequest
+    ).metricViewData.startAndEndDate!.startValue.getTime();
+  });
+}
+
+async function settle(): Promise<void> {
+  for (let i: number = 0; i < 5; i++) {
+    await act(async () => {
+      await Promise.resolve();
+    });
+  }
+  jest.setSystemTime(NOW);
+}
+
+const MetricFormHost: React.FunctionComponent = (): React.ReactElement => {
+  const [step, setStep] = React.useState<MonitorStepMetricMonitor>({
+    ...MonitorStepMetricMonitorUtil.getDefault(),
+    metricViewConfig: viewConfig(),
+    rollingTime: RollingTime.Past1Hour,
+  });
+  return (
+    <MetricMonitorStepForm monitorStepMetricMonitor={step} onChange={setStep} />
+  );
+};
+
+beforeEach(() => {
+  jest.useFakeTimers({ doNotFake: ["nextTick", "setImmediate"] });
+  jest.setSystemTime(NOW);
+  mockChartsRenders.length = 0;
+  getListMock.mockReset();
+  getItemMock.mockReset();
+  fetchResultsMock.mockReset();
+  getListMock.mockResolvedValue({ data: [], count: 0, skip: 0, limit: 0 });
+  getItemMock.mockResolvedValue(null);
+  answerWithWindowStart();
+});
+
+afterEach(() => {
+  cleanup();
+  jest.useRealTimers();
+});
+
+describe("a host that sets its window after mount", () => {
+  test("the Metric monitor form's preview draws its first result", async () => {
+    render(
+      <MemoryRouter>
+        <MetricFormHost />
+      </MemoryRouter>,
+    );
+    await settle();
+
+    expect(screen.getByTestId("metric-charts")).toBeInTheDocument();
+    expect(drawnValues()).toEqual([HOUR_AGO.getTime() / 60_000]);
+  });
+
+  test("the Criteria page's step preview draws its first result", async () => {
+    render(
+      <MemoryRouter>
+        <MonitorStepMetricPreview
+          metricsViewConfig={viewConfig()}
+          rollingTime={RollingTime.Past1Hour}
+        />
+      </MemoryRouter>,
+    );
+    await settle();
+
+    expect(drawnValues()).toEqual([HOUR_AGO.getTime() / 60_000]);
+  });
+
+  test("its window is fetched once, and nothing else is", async () => {
+    render(
+      <MemoryRouter>
+        <MetricFormHost />
+      </MemoryRouter>,
+    );
+    await settle();
+
+    expect(fetchedStarts()).toEqual([HOUR_AGO.getTime()]);
+  });
+
+  test("the first zoom's refetch keeps the charts up, and the Reset zoom with them", async () => {
+    render(
+      <MemoryRouter>
+        <MetricFormHost />
+      </MemoryRouter>,
+    );
+    await settle();
+    // The zoom's fetch is still out.
+    fetchResultsMock.mockImplementation(() => {
+      return new Promise(() => {
+        // Intentionally never settles.
+      });
+    });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Drag across the chart" }),
+    );
+
+    expect(screen.getByTestId("metric-charts")).toBeInTheDocument();
+    expect(
+      screen.getByTestId(RESET_TIME_RANGE_ZOOM_BUTTON_TEST_ID),
+    ).toBeVisible();
+    expect(screen.getByText("Refreshing")).toBeInTheDocument();
+  });
+
+  test("a window the host moves on from before the catalog is in is never drawn", async () => {
+    // The host's first window, replaced at once (as a form resolving it).
+    const MovingHost: React.FunctionComponent = (): React.ReactElement => {
+      const [window, setWindow] = React.useState<InBetween<Date>>(
+        new InBetween<Date>(TWO_HOURS_AGO, HOUR_AGO),
+      );
+      React.useEffect(() => {
+        setWindow(new InBetween<Date>(HOUR_AGO, NOW));
+      }, []);
+      return (
+        <MetricView
+          data={{ ...viewConfig(), startAndEndDate: window }}
+          hideQueryElements={true}
+          hideStartAndEndDate={true}
+          onChange={() => {}}
+        />
+      );
+    };
+
+    render(<MovingHost />);
+    await settle();
+
+    expect(drawnValues()).toEqual([HOUR_AGO.getTime() / 60_000]);
+    // The first window was asked for once, by the effect, and superseded.
+    expect(fetchedStarts()[fetchedStarts().length - 1]).toBe(
+      HOUR_AGO.getTime(),
+    );
+  });
+});
+
+describe("a host with its window from the start", () => {
+  test("the window is fetched once, not again when the catalog is in", async () => {
+    render(
+      <MetricView
+        data={{
+          ...viewConfig(),
+          startAndEndDate: new InBetween<Date>(HOUR_AGO, NOW),
+        }}
+        hideQueryElements={true}
+        hideStartAndEndDate={true}
+        onChange={() => {}}
+      />,
+    );
+    await settle();
+
+    expect(fetchedStarts()).toEqual([HOUR_AGO.getTime()]);
+    expect(drawnValues()).toEqual([HOUR_AGO.getTime() / 60_000]);
+  });
+
+  test("a host with no window at all fetches nothing, and waits for one", async () => {
+    const LateHost: React.FunctionComponent = (): React.ReactElement => {
+      const [window, setWindow] = React.useState<InBetween<Date> | null>(null);
+      return (
+        <>
+          <button
+            type="button"
+            onClick={() => {
+              setWindow(new InBetween<Date>(HOUR_AGO, NOW));
+            }}
+          >
+            Set the window
+          </button>
+          <MetricView
+            data={{ ...viewConfig(), startAndEndDate: window }}
+            hideQueryElements={true}
+            hideStartAndEndDate={true}
+            onChange={() => {}}
+          />
+        </>
+      );
+    };
+
+    render(<LateHost />);
+    await settle();
+    expect(fetchResultsMock).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByRole("button", { name: "Set the window" }));
+    await settle();
+
+    await waitFor(() => {
+      expect(drawnValues()).toEqual([HOUR_AGO.getTime() / 60_000]);
+    });
+    expect(fetchedStarts()).toEqual([HOUR_AGO.getTime()]);
+  });
+});