@raketa-cloud/admin 1.8.18 → 1.8.19

package/src/tests/report/reports.test.js

@@ -0,0 +1,831 @@
+import {
+  createDom,
+  el,
+  flushPromises,
+  installDom,
+  uninstallDom,
+} from "../support/fakeDom";
+
+const METRICS = ["views", "users", "avgDuration", "engagement"];
+
+// The script groups thousands with the runtime's default locale, which differs
+// between a bare `jest` run and CI, so derive the expectation the same way.
+const THOUSANDS = (12345).toLocaleString();
+
+function metricSlots() {
+  return METRICS.flatMap((metric) => [
+    el("span", { "data-report": "value", "data-metric": metric }),
+    el("span", { "data-report": "trend", "data-metric": metric }),
+  ]);
+}
+
+function gauge(metric, { unit = "ms", scaleMax = "4000" } = {}) {
+  const loader = el("span", {
+    "data-report": "vital-loader",
+    "data-loader": "",
+  });
+  const value = el("span", { "data-report": "vital-value" });
+  const arrow = el("span", { "data-report": "vital-arrow" });
+  const marker = el("div", { "data-report": "marker", class: "invisible" }, [
+    value,
+    arrow,
+  ]);
+
+  const element = el(
+    "div",
+    {
+      "data-report": "vital",
+      "data-metric": metric,
+      "data-unit": unit,
+      "data-scale-max": scaleMax,
+    },
+    [loader, marker],
+  );
+
+  return { element, loader, marker, value, arrow };
+}
+
+// Mirrors the skeleton markup rendered by _quick_insights.ejs,
+// _traffic_chart.ejs and _core_web_vitals.ejs.
+function buildPage() {
+  const range = el("span", { "data-report": "range" });
+  const chartLoader = el("div", {
+    "data-report": "chart-loader",
+    "data-loader": "",
+  });
+
+  const period = el("span", { "data-report": "cwv-period" });
+  const title = el("title");
+  const path = el("path");
+  const assessment = el(
+    "svg",
+    { "data-report": "cwv-assessment", class: "invisible" },
+    [title, path],
+  );
+
+  const gauges = {
+    lcp: gauge("lcp"),
+    cls: gauge("cls", { unit: "", scaleMax: "0.5" }),
+    inp: gauge("inp", { scaleMax: "500" }),
+  };
+
+  const grid = el(
+    "div",
+    { "data-report": "vitals-grid" },
+    Object.values(gauges).map((g) => g.element),
+  );
+
+  const insightsGrid = el(
+    "div",
+    { "data-report": "insights-grid" },
+    metricSlots(),
+  );
+  const chartCard = el("div", { "data-report": "chart-card" }, [chartLoader]);
+
+  const dom = createDom([
+    range,
+    insightsGrid,
+    chartCard,
+    period,
+    assessment,
+    grid,
+  ]);
+
+  return {
+    dom,
+    range,
+    insightsGrid,
+    chartCard,
+    chartLoader,
+    period,
+    assessment,
+    title,
+    path,
+    grid,
+    gauges,
+    value: (metric) =>
+      dom.document.querySelector(
+        `[data-report="value"][data-metric="${metric}"]`,
+      ),
+    trend: (metric) =>
+      dom.document.querySelector(
+        `[data-report="trend"][data-metric="${metric}"]`,
+      ),
+  };
+}
+
+const summary = (overrides = {}) => ({
+  views: { value: 12345, trend: 12.34 },
+  users: { value: 678, trend: -4.5 },
+  avgDuration: { seconds: 95.4, trend: 0 },
+  engagement: { rate: 0.6789, trend: null },
+  ...overrides,
+});
+
+const INSIGHTS = {
+  summary: summary(),
+  dateRange: { startDate: "2026-07-01", endDate: "2026-07-28" },
+  series: { dates: ["2026-07-01"], labels: ["Jul 1"], data: [5] },
+  publishDates: ["2026-07-01"],
+  error: null,
+};
+
+const WEB_VITALS = {
+  assessment: "good",
+  collectionPeriod: {
+    firstDate: { year: 2026, month: 7, day: 1 },
+    lastDate: { year: 2026, month: 7, day: 28 },
+  },
+  metrics: [
+    { key: "lcp", p75: 2500, rating: "good" },
+    { key: "cls", p75: 0.12, rating: "needs-improvement" },
+    { key: "inp", p75: null, rating: null },
+  ],
+  error: null,
+};
+
+function loadScript() {
+  jest.isolateModules(() => {
+    require("../../report/reports");
+  });
+}
+
+// The script kicks off an async fetch on import and nothing exposes the
+// promise, so drain the microtask queue after loading.
+async function run(page, { reports, path = "/en/report/pages/1" } = {}) {
+  if (path) page.dom.window.RAKETA_REPORTS = { path };
+  page.dom.window.gaRenderTrafficChart = jest.fn();
+  installDom(page.dom);
+
+  loadScript();
+  await flushPromises();
+
+  return reports;
+}
+
+function mockFetch(body, { ok = true, status = 200 } = {}) {
+  const json = jest.fn(async () => body);
+  globalThis.fetch = jest.fn(async () => ({ ok, status, json }));
+  return globalThis.fetch;
+}
+
+describe("report/reports.js", () => {
+  beforeEach(() => {
+    jest.spyOn(console, "error").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    uninstallDom();
+    delete globalThis.fetch;
+    jest.restoreAllMocks();
+  });
+
+  test("does nothing without a configured path", async () => {
+    mockFetch({});
+    const page = buildPage();
+
+    await run(page, { path: null });
+
+    expect(globalThis.fetch).not.toHaveBeenCalled();
+  });
+
+  test("fetches the reports endpoint as JSON", async () => {
+    const fetchMock = mockFetch({ insights: INSIGHTS, webVitals: WEB_VITALS });
+    const page = buildPage();
+
+    await run(page);
+
+    expect(fetchMock).toHaveBeenCalledWith("/en/report/pages/1", {
+      headers: { accept: "application/json" },
+      credentials: "same-origin",
+    });
+  });
+
+  describe("insights", () => {
+    let page;
+
+    beforeEach(async () => {
+      mockFetch({ insights: INSIGHTS, webVitals: WEB_VITALS });
+      page = buildPage();
+      await run(page);
+    });
+
+    test("renders the date range", () => {
+      expect(page.range.textContent).toEqual("Jul 1, 2026 → Jul 28, 2026");
+    });
+
+    test("formats each summary value", () => {
+      expect(page.value("views").textContent).toEqual(THOUSANDS);
+      expect(page.value("users").textContent).toEqual("678");
+      expect(page.value("avgDuration").textContent).toEqual("1m 35s");
+      expect(page.value("engagement").textContent).toEqual("67.9%");
+    });
+
+    test("colours a positive trend green and a negative one red", () => {
+      expect(page.trend("views").textContent).toEqual("+12.3%");
+      expect(page.trend("views").classList.contains("text-emerald-600")).toBe(
+        true,
+      );
+
+      expect(page.trend("users").textContent).toEqual("-4.5%");
+      expect(page.trend("users").classList.contains("text-red-600")).toBe(true);
+    });
+
+    test("treats a flat trend as positive", () => {
+      expect(page.trend("avgDuration").textContent).toEqual("+0.0%");
+    });
+
+    test("renders a dash for a missing trend", () => {
+      expect(page.trend("engagement").textContent).toEqual("—");
+    });
+
+    // A page that had no traffic last period is growing, not unmeasured.
+    test("calls a metric new when the previous period was zero", async () => {
+      mockFetch({
+        insights: {
+          ...INSIGHTS,
+          summary: summary({
+            views: { value: 200, previous: 0, trend: null },
+            users: { value: 0, previous: 0, trend: null },
+          }),
+        },
+        webVitals: WEB_VITALS,
+      });
+      const fresh = buildPage();
+
+      await run(fresh);
+
+      expect(fresh.trend("views").textContent).toEqual("New");
+      expect(fresh.trend("views").classList.contains("text-emerald-600")).toBe(
+        true,
+      );
+      // Nothing then, nothing now — there is still no trend to show.
+      expect(fresh.trend("users").textContent).toEqual("—");
+    });
+
+    test("drops the muted placeholder class off filled values", () => {
+      expect(
+        page.trend("views").classList.contains("text-raketa-foreground/50"),
+      ).toBe(false);
+    });
+
+    test("dashes out every metric when the report failed", async () => {
+      mockFetch({ insights: { error: "boom" }, webVitals: WEB_VITALS });
+      const failed = buildPage();
+
+      await run(failed);
+
+      METRICS.forEach((metric) => {
+        expect(failed.value(metric).textContent).toEqual("—");
+        expect(failed.trend(metric).textContent).toEqual("—");
+      });
+    });
+
+    // "No traffic" and "the report never arrived" are different answers.
+    test("shows why the report failed instead of a date range", async () => {
+      mockFetch({
+        insights: { error: "Google Analytics is not configured." },
+        webVitals: WEB_VITALS,
+      });
+      const failed = buildPage();
+
+      await run(failed);
+
+      expect(failed.range.textContent).toEqual(
+        "Google Analytics is not configured.",
+      );
+      expect(failed.range.classList.contains("text-red-600")).toBe(true);
+      expect(console.error).toHaveBeenCalledWith(
+        "Insights report failed:",
+        "Google Analytics is not configured.",
+      );
+    });
+
+    test("truncates a long error and logs it in full", async () => {
+      const error = "GA Data API 403: " + "x".repeat(400);
+      mockFetch({ insights: { error }, webVitals: WEB_VITALS });
+      const failed = buildPage();
+
+      await run(failed);
+
+      expect(failed.range.textContent).toHaveLength(161);
+      expect(failed.range.textContent.startsWith("GA Data API 403: x")).toBe(
+        true,
+      );
+      expect(console.error).toHaveBeenCalledWith(
+        "Insights report failed:",
+        error,
+      );
+    });
+
+    test("dashes out every metric when the summary is absent", async () => {
+      mockFetch({ insights: { dateRange: null }, webVitals: WEB_VITALS });
+      const empty = buildPage();
+
+      await run(empty);
+
+      expect(empty.value("views").textContent).toEqual("—");
+    });
+
+    test("leaves the range untouched when the payload has no dateRange", async () => {
+      mockFetch({
+        insights: { summary: summary(), series: INSIGHTS.series },
+        webVitals: WEB_VITALS,
+      });
+      const noRange = buildPage();
+
+      await run(noRange);
+
+      expect(noRange.range.textContent).toEqual("");
+      expect(noRange.value("views").textContent).toEqual(THOUSANDS);
+    });
+  });
+
+  describe("insights without traffic", () => {
+    // GA answers a page with no traffic with zeros, not an error, so the script
+    // has to read "no data" off the numbers.
+    const EMPTY_INSIGHTS = {
+      summary: {
+        views: { value: 0, trend: null },
+        users: { value: 0, trend: null },
+        avgDuration: { seconds: 0, trend: null },
+        engagement: { rate: 0, trend: null },
+      },
+      dateRange: { startDate: "2026-07-01", endDate: "2026-07-30" },
+      series: {
+        dates: ["2026-07-01", "2026-07-02"],
+        labels: ["a", "b"],
+        data: [0, 0],
+      },
+      publishDates: [],
+      error: null,
+    };
+
+    test("notes the empty range beside the title instead of the dates", async () => {
+      mockFetch({ insights: EMPTY_INSIGHTS, webVitals: WEB_VITALS });
+      const page = buildPage();
+
+      await run(page);
+
+      expect(page.range.textContent).toEqual(
+        "There is not enough data for the past 30 days to generate a report.",
+      );
+    });
+
+    test("mutes the metric grid and the chart card", async () => {
+      mockFetch({ insights: EMPTY_INSIGHTS, webVitals: WEB_VITALS });
+      const page = buildPage();
+
+      await run(page);
+
+      for (const hook of [page.insightsGrid, page.chartCard]) {
+        expect(hook.className).toContain("grayscale");
+        expect(hook.className).toContain("opacity-50");
+      }
+    });
+
+    test("keeps the zeros on the cards", async () => {
+      mockFetch({ insights: EMPTY_INSIGHTS, webVitals: WEB_VITALS });
+      const page = buildPage();
+
+      await run(page);
+
+      expect(page.value("views").textContent).toEqual("0");
+      expect(page.trend("views").textContent).toEqual("—");
+    });
+
+    test("replaces the chart with a note rather than plotting zeros", async () => {
+      mockFetch({ insights: EMPTY_INSIGHTS, webVitals: WEB_VITALS });
+      const page = buildPage();
+
+      await run(page);
+
+      expect(page.dom.window.gaRenderTrafficChart).not.toHaveBeenCalled();
+      expect(page.chartLoader.removed).toBeFalsy();
+      expect(page.chartLoader.textContent).toEqual("Not enough data.");
+    });
+
+    test("still plots when only the series carries traffic", async () => {
+      mockFetch({
+        insights: {
+          ...EMPTY_INSIGHTS,
+          series: { ...EMPTY_INSIGHTS.series, data: [0, 3] },
+        },
+        webVitals: WEB_VITALS,
+      });
+      const page = buildPage();
+
+      await run(page);
+
+      expect(page.dom.window.gaRenderTrafficChart).toHaveBeenCalled();
+      expect(page.insightsGrid.className).not.toContain("grayscale");
+    });
+  });
+
+  describe("traffic chart", () => {
+    test("hands the series to the chart renderer and clears its loader", async () => {
+      mockFetch({ insights: INSIGHTS, webVitals: WEB_VITALS });
+      const page = buildPage();
+
+      await run(page);
+
+      expect(page.dom.window.gaRenderTrafficChart).toHaveBeenCalledWith({
+        series: INSIGHTS.series,
+        publishDates: INSIGHTS.publishDates,
+      });
+      expect(page.chartLoader.removed).toBe(true);
+    });
+
+    test("defaults the publish markers to empty", async () => {
+      mockFetch({
+        insights: { ...INSIGHTS, publishDates: undefined },
+        webVitals: WEB_VITALS,
+      });
+      const page = buildPage();
+
+      await run(page);
+
+      expect(page.dom.window.gaRenderTrafficChart).toHaveBeenCalledWith({
+        series: INSIGHTS.series,
+        publishDates: [],
+      });
+    });
+
+    test("skips rendering when the payload carries no series", async () => {
+      mockFetch({
+        insights: { summary: summary(), dateRange: INSIGHTS.dateRange },
+        webVitals: WEB_VITALS,
+      });
+      const page = buildPage();
+
+      await run(page);
+
+      expect(page.dom.window.gaRenderTrafficChart).not.toHaveBeenCalled();
+    });
+
+    test("logs when analytics.js has not loaded first", async () => {
+      mockFetch({ insights: INSIGHTS, webVitals: WEB_VITALS });
+      const page = buildPage();
+      page.dom.window.RAKETA_REPORTS = { path: "/reports" };
+      installDom(page.dom);
+
+      loadScript();
+      await flushPromises();
+
+      expect(console.error).toHaveBeenCalledWith(
+        expect.stringContaining("Traffic chart not drawn"),
+      );
+    });
+  });
+
+  describe("core web vitals", () => {
+    let page;
+
+    beforeEach(async () => {
+      mockFetch({ insights: INSIGHTS, webVitals: WEB_VITALS });
+      page = buildPage();
+      await run(page);
+    });
+
+    test("renders the collection period", () => {
+      expect(page.period.textContent).toEqual("Jul 1, 2026 → Jul 28, 2026");
+    });
+
+    test("shows the assessment icon for the reported state", () => {
+      expect(page.assessment.classList.contains("invisible")).toBe(false);
+      expect(page.assessment.classList.contains("text-emerald-500")).toBe(true);
+      expect(page.assessment.getAttribute("aria-label")).toEqual(
+        "Core Web Vitals Assessment: Passed",
+      );
+      expect(page.title.textContent).toEqual(
+        "Core Web Vitals Assessment: Passed",
+      );
+      expect(page.path.getAttribute("d")).toEqual(expect.any(String));
+    });
+
+    test("positions the marker and formats a millisecond metric", () => {
+      const { marker, value, arrow, loader } = page.gauges.lcp;
+
+      expect(loader.removed).toBe(true);
+      expect(marker.style.left).toEqual("62.50%");
+      expect(marker.classList.contains("invisible")).toBe(false);
+      expect(value.textContent).toEqual("2.50s");
+      expect(value.classList.contains("text-emerald-600")).toBe(true);
+      expect(arrow.classList.contains("text-emerald-600")).toBe(true);
+    });
+
+    test("formats a unitless metric to two decimals", () => {
+      const { marker, value } = page.gauges.cls;
+
+      expect(value.textContent).toEqual("0.12");
+      expect(value.classList.contains("text-amber-500")).toBe(true);
+      expect(marker.style.left).toEqual("24.00%");
+    });
+
+    test("labels an unmeasured gauge instead of guessing a position", () => {
+      const { loader, marker } = page.gauges.inp;
+
+      expect(loader.removed).toBe(false);
+      expect(loader.textContent).toEqual("No data");
+      expect(loader.hasAttribute("data-loader")).toBe(false);
+      expect(marker.classList.contains("invisible")).toBe(true);
+    });
+
+    test("keeps the grid at full colour once anything is measured", () => {
+      expect(page.grid.classList.contains("grayscale")).toBe(false);
+    });
+
+    test("sub-second values keep millisecond units", async () => {
+      mockFetch({
+        insights: INSIGHTS,
+        webVitals: {
+          ...WEB_VITALS,
+          metrics: [{ key: "lcp", p75: 812.4, rating: "poor" }],
+        },
+      });
+      const fast = buildPage();
+
+      await run(fast);
+
+      expect(fast.gauges.lcp.value.textContent).toEqual("812ms");
+      expect(fast.gauges.lcp.value.classList.contains("text-red-600")).toBe(
+        true,
+      );
+    });
+
+    test("clamps the marker inside the gauge", async () => {
+      mockFetch({
+        insights: INSIGHTS,
+        webVitals: {
+          ...WEB_VITALS,
+          metrics: [
+            { key: "lcp", p75: 40000, rating: "poor" },
+            { key: "cls", p75: 0, rating: "good" },
+          ],
+        },
+      });
+      const clamped = buildPage();
+
+      await run(clamped);
+
+      expect(clamped.gauges.lcp.marker.style.left).toEqual("99.00%");
+      expect(clamped.gauges.cls.marker.style.left).toEqual("1.00%");
+    });
+
+    test("falls back to a muted colour for an unknown rating", async () => {
+      mockFetch({
+        insights: INSIGHTS,
+        webVitals: {
+          ...WEB_VITALS,
+          metrics: [{ key: "lcp", p75: 2500, rating: "unrecognised" }],
+        },
+      });
+      const unknown = buildPage();
+
+      await run(unknown);
+
+      expect(
+        unknown.gauges.lcp.value.classList.contains(
+          "text-raketa-foreground/50",
+        ),
+      ).toBe(true);
+    });
+  });
+
+  describe("core web vitals without data", () => {
+    let page;
+
+    beforeEach(async () => {
+      mockFetch({ insights: INSIGHTS, webVitals: { error: "no crux data" } });
+      page = buildPage();
+      await run(page);
+    });
+
+    test("reports what went wrong rather than blaming the data", () => {
+      expect(page.period.textContent).toEqual("no crux data");
+      expect(page.period.classList.contains("text-red-600")).toBe(true);
+      expect(console.error).toHaveBeenCalledWith(
+        "Core Web Vitals report failed:",
+        "no crux data",
+      );
+    });
+
+    test("keeps the no-data note for a page CrUX simply has not measured", async () => {
+      mockFetch({
+        insights: INSIGHTS,
+        webVitals: { assessment: "unknown", metrics: [], error: null },
+      });
+      const unmeasured = buildPage();
+
+      await run(unmeasured);
+
+      expect(unmeasured.period.textContent).toEqual(
+        "There is not enough data for the past 28 days to generate a report.",
+      );
+      expect(unmeasured.period.classList.contains("text-red-600")).toBe(false);
+    });
+
+    test("desaturates the gauges", () => {
+      expect(page.grid.classList.contains("grayscale")).toBe(true);
+      expect(page.grid.classList.contains("opacity-50")).toBe(true);
+    });
+
+    test("falls back to the unknown assessment icon", () => {
+      expect(page.assessment.classList.contains("text-orange-500")).toBe(true);
+      expect(page.assessment.getAttribute("aria-label")).toEqual(
+        "Core Web Vitals Assessment: no real-user data yet",
+      );
+    });
+
+    test("marks every gauge as having no data", () => {
+      Object.values(page.gauges).forEach(({ loader }) => {
+        expect(loader.textContent).toEqual("No data");
+      });
+    });
+
+    test("renders an empty period when the collection period is malformed", async () => {
+      mockFetch({
+        insights: INSIGHTS,
+        webVitals: {
+          assessment: "poor",
+          collectionPeriod: { firstDate: { year: 2026, month: 7, day: 1 } },
+          metrics: [{ key: "lcp", p75: 2500, rating: "poor" }],
+        },
+      });
+      const malformed = buildPage();
+
+      await run(malformed);
+
+      expect(malformed.period.textContent).toEqual("");
+      expect(malformed.assessment.classList.contains("text-red-500")).toBe(
+        true,
+      );
+    });
+  });
+
+  describe("request failures", () => {
+    test("stops the spinners when the response is not ok", async () => {
+      mockFetch(null, { ok: false, status: 500 });
+      const page = buildPage();
+
+      await run(page);
+
+      expect(page.chartLoader.removed).toBe(true);
+      // clearLoaders() takes every spinner with it, the gauges included, so
+      // there is nothing left to relabel "No data".
+      expect(page.gauges.lcp.loader.removed).toBe(true);
+      expect(page.gauges.lcp.marker.classList.contains("invisible")).toBe(true);
+      // Both sections name the request as the cause, not the data.
+      const failure = "The reports request failed (500).";
+      expect(page.period.textContent).toEqual(failure);
+      expect(page.range.textContent).toEqual(failure);
+      expect(page.dom.window.gaRenderTrafficChart).not.toHaveBeenCalled();
+    });
+
+    test("stops the spinners when the request throws", async () => {
+      const error = new Error("offline");
+      globalThis.fetch = jest.fn(async () => {
+        throw error;
+      });
+      const page = buildPage();
+
+      await run(page);
+
+      expect(page.range.textContent).toEqual(
+        "The reports request failed: offline",
+      );
+      expect(page.chartLoader.removed).toBe(true);
+    });
+  });
+
+  describe("partial markup", () => {
+    // Each section renders independently, so the script has to survive a page
+    // that only shows some of them.
+    test("survives a page with none of the report slots", async () => {
+      mockFetch({ insights: INSIGHTS, webVitals: WEB_VITALS });
+      const bare = { dom: createDom([]) };
+
+      await expect(run(bare)).resolves.not.toThrow();
+      expect(console.error).not.toHaveBeenCalled();
+    });
+
+    test("survives a page whose slots are missing on a failed report", async () => {
+      mockFetch({ insights: { error: "boom" }, webVitals: { error: "boom" } });
+      const bare = { dom: createDom([]) };
+
+      await expect(run(bare)).resolves.not.toThrow();
+    });
+
+    test("colours a bare assessment icon that has no title or path", async () => {
+      mockFetch({ insights: INSIGHTS, webVitals: WEB_VITALS });
+      const icon = el("svg", {
+        "data-report": "cwv-assessment",
+        class: "invisible",
+      });
+
+      await run({ dom: createDom([icon]) });
+
+      expect(icon.classList.contains("invisible")).toBe(false);
+      expect(icon.getAttribute("aria-label")).toEqual(
+        "Core Web Vitals Assessment: Passed",
+      );
+    });
+
+    test("skips a gauge that has no marker", async () => {
+      mockFetch({ insights: INSIGHTS, webVitals: WEB_VITALS });
+      const loader = el("span", {
+        "data-report": "vital-loader",
+        "data-loader": "",
+      });
+      const markerless = el(
+        "div",
+        {
+          "data-report": "vital",
+          "data-metric": "lcp",
+          "data-unit": "ms",
+        },
+        [loader],
+      );
+
+      await run({ dom: createDom([markerless]) });
+
+      expect(loader.removed).toBe(true);
+    });
+
+    test("skips an unmeasured gauge that has no loader", async () => {
+      mockFetch({
+        insights: INSIGHTS,
+        webVitals: { ...WEB_VITALS, metrics: [] },
+      });
+      const marker = el("div", { "data-report": "marker" });
+      const loaderless = el(
+        "div",
+        { "data-report": "vital", "data-metric": "lcp" },
+        [marker],
+      );
+
+      await run({ dom: createDom([loaderless]) });
+
+      expect(marker.style.left).toBeUndefined();
+    });
+
+    test("defaults empty summary values to zero", async () => {
+      mockFetch({
+        insights: {
+          summary: {
+            views: { value: null },
+            users: {},
+            avgDuration: {},
+            engagement: {},
+          },
+          series: null,
+        },
+        webVitals: WEB_VITALS,
+      });
+      const page = buildPage();
+
+      await run(page);
+
+      expect(page.value("views").textContent).toEqual("0");
+      expect(page.value("users").textContent).toEqual("0");
+      expect(page.value("avgDuration").textContent).toEqual("0m 0s");
+      expect(page.value("engagement").textContent).toEqual("0.0%");
+    });
+
+    test("falls back to a full-width scale when the gauge declares none", async () => {
+      mockFetch({
+        insights: INSIGHTS,
+        webVitals: {
+          ...WEB_VITALS,
+          metrics: [{ key: "cls", p75: 0.4, rating: "good" }],
+        },
+      });
+      const marker = el("div", { "data-report": "marker" });
+      const scaleless = el(
+        "div",
+        { "data-report": "vital", "data-metric": "cls", "data-unit": "" },
+        [marker],
+      );
+
+      await run({ dom: createDom([scaleless]) });
+
+      expect(marker.style.left).toEqual("40.00%");
+    });
+  });
+
+  test("waits for DOMContentLoaded while the document is still loading", async () => {
+    mockFetch({ insights: INSIGHTS, webVitals: WEB_VITALS });
+    const page = buildPage();
+    page.dom.document.readyState = "loading";
+
+    await run(page);
+
+    expect(globalThis.fetch).not.toHaveBeenCalled();
+
+    page.dom.document.dispatchEvent("DOMContentLoaded");
+    await flushPromises();
+
+    expect(globalThis.fetch).toHaveBeenCalled();
+    expect(page.value("views").textContent).toEqual(THOUSANDS);
+  });
+});