@raketa-cloud/admin 1.8.17 → 1.8.19

package/src/tests/helpers/reports/cwv.test.js

@@ -0,0 +1,239 @@
+import {
+  cruxApiKeyConfigured,
+  pageWebVitals,
+} from "../../../helpers/reports/cwv";
+import localCache from "../../../localCache";
+
+const GA = { apiKey: "crux-key" };
+
+const record = {
+  metrics: {
+    largest_contentful_paint: {
+      percentiles: { p75: 1200 },
+      histogram: [{ density: 0.9 }, { density: 0.07 }, { density: 0.03 }],
+    },
+    interaction_to_next_paint: {
+      percentiles: { p75: 90 },
+      histogram: [{ density: 0.95 }, { density: 0.03 }, { density: 0.02 }],
+    },
+    cumulative_layout_shift: {
+      percentiles: { p75: "0.05" },
+      histogram: [{ density: 0.97 }, { density: 0.02 }, { density: 0.01 }],
+    },
+  },
+  collectionPeriod: {
+    firstDate: { year: 2026, month: 7, day: 5 },
+    lastDate: { year: 2026, month: 8, day: 1 },
+  },
+};
+
+// Each entry answers one queryRecord call, in order: URL-level, then origin.
+function mockCrux(responses) {
+  const queue = [...responses];
+  global.fetch = jest.fn().mockImplementation(async () => {
+    const next = queue.shift() ?? { status: 404 };
+    return {
+      ok: next.status === 200,
+      status: next.status,
+      json: async () => next.body ?? {},
+      text: async () => JSON.stringify(next.body ?? {}),
+    };
+  });
+}
+
+describe("pageWebVitals", () => {
+  beforeEach(() => {
+    localCache.clear();
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    delete global.fetch;
+  });
+
+  test("cruxApiKeyConfigured rejects a missing or placeholder key", () => {
+    expect(cruxApiKeyConfigured(GA)).toBe(true);
+    expect(cruxApiKeyConfigured({ apiKey: "YOUR-GOOGLE-API-KEY" })).toBe(false);
+    expect(cruxApiKeyConfigured({})).toBe(false);
+    expect(cruxApiKeyConfigured()).toBe(false);
+  });
+
+  test("queries the CrUX endpoint with the API key", async () => {
+    mockCrux([{ status: 200, body: { record } }]);
+
+    await pageWebVitals("https://example.com/", GA);
+
+    expect(global.fetch.mock.calls[0][0]).toBe(
+      `https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=${GA.apiKey}`,
+    );
+  });
+
+  test("asks for mobile field data by default", async () => {
+    mockCrux([{ status: 200, body: { record } }]);
+
+    await pageWebVitals("https://example.com/", GA);
+
+    const body = JSON.parse(global.fetch.mock.calls[0][1].body);
+    expect(body.formFactor).toBe("PHONE");
+  });
+
+  test("takes a form factor override, and null for all devices", async () => {
+    mockCrux([{ status: 200, body: { record } }]);
+    await pageWebVitals("https://example.com/", GA, {
+      formFactor: "DESKTOP",
+    });
+    expect(JSON.parse(global.fetch.mock.calls[0][1].body).formFactor).toBe(
+      "DESKTOP",
+    );
+
+    localCache.clear();
+    mockCrux([{ status: 200, body: { record } }]);
+    await pageWebVitals("https://example.com/", GA, { formFactor: null });
+    // Omitted entirely — CrUX reads a missing formFactor as all devices.
+    expect(JSON.parse(global.fetch.mock.calls[0][1].body)).not.toHaveProperty(
+      "formFactor",
+    );
+  });
+
+  test("caches per form factor", async () => {
+    // One URL-level hit per segment.
+    mockCrux([
+      { status: 200, body: { record } },
+      { status: 200, body: { record } },
+    ]);
+
+    await pageWebVitals("https://example.com/", GA);
+    await pageWebVitals("https://example.com/", GA, { formFactor: "DESKTOP" });
+
+    // Two requests: the segments must not share a cache entry.
+    expect(global.fetch).toHaveBeenCalledTimes(2);
+
+    // A repeat of either segment is served from cache.
+    await pageWebVitals("https://example.com/", GA);
+    expect(global.fetch).toHaveBeenCalledTimes(2);
+  });
+
+  test("caches by cacheKey rather than by url when one is given", async () => {
+    mockCrux([
+      { status: 200, body: { record } },
+      { status: 200, body: { record } },
+    ]);
+
+    // Same resource, url rewritten between calls — still one request.
+    await pageWebVitals("https://example.com/old", GA, {
+      cacheKey: "page:42",
+    });
+    await pageWebVitals("https://example.com/new", GA, {
+      cacheKey: "page:42",
+    });
+
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+
+    // Two resources sharing a url keep their own entries.
+    await pageWebVitals("https://example.com/old", GA, {
+      cacheKey: "page:43",
+    });
+
+    expect(global.fetch).toHaveBeenCalledTimes(2);
+  });
+
+  test("shapes URL-level field data", async () => {
+    mockCrux([{ status: 200, body: { record } }]);
+
+    const result = await pageWebVitals("https://example.com/pricing", GA);
+
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+    expect(result.scope).toBe("url");
+    expect(result.mock).toBeUndefined();
+    expect(result.assessment).toBe("good");
+    expect(result.metrics.map((m) => m.key)).toEqual(["lcp", "inp", "cls"]);
+    expect(result.metrics[0]).toMatchObject({
+      p75: 1200,
+      rating: "good",
+      thresholds: { good: 2500, poor: 4000 },
+    });
+  });
+
+  test("assessment takes the worst of the three core metrics", async () => {
+    const withCore = (lcp, inp, cls) => ({
+      ...record,
+      metrics: {
+        largest_contentful_paint: { percentiles: { p75: lcp }, histogram: [] },
+        interaction_to_next_paint: { percentiles: { p75: inp }, histogram: [] },
+        cumulative_layout_shift: { percentiles: { p75: cls }, histogram: [] },
+      },
+    });
+
+    // All good; one needs-improvement (LCP 3s); one poor (CLS 0.4) even though
+    // the others are fine.
+    const cases = [
+      [withCore(1200, 90, "0.05"), "good"],
+      [withCore(3000, 90, "0.05"), "needs-improvement"],
+      [withCore(1200, 90, "0.4"), "poor"],
+      [withCore(3000, 600, "0.4"), "poor"],
+    ];
+
+    for (const [body, expected] of cases) {
+      localCache.clear();
+      mockCrux([{ status: 200, body: { record: body } }]);
+
+      const result = await pageWebVitals("https://example.com/pricing", GA);
+      expect(result.assessment).toBe(expected);
+    }
+  });
+
+  test("falls back to origin-level data when the URL has none", async () => {
+    mockCrux([{ status: 404 }, { status: 200, body: { record } }]);
+
+    const result = await pageWebVitals("https://example.com/pricing", GA);
+
+    expect(global.fetch).toHaveBeenCalledTimes(2);
+    expect(result.scope).toBe("origin");
+    expect(result.mock).toBeUndefined();
+  });
+
+  test("returns an unmeasured report when CrUX has no data at all", async () => {
+    mockCrux([{ status: 404 }, { status: 404 }]);
+
+    const result = await pageWebVitals("https://example.com/pricing", GA);
+
+    expect(global.fetch).toHaveBeenCalledTimes(2);
+    expect(result.noData).toBe(true);
+    expect(result.scope).toBe("none");
+    expect(result.assessment).toBeNull();
+    expect(result.collectionPeriod).toBeNull();
+
+    // Full card set so the gauges still render their bands, but with no
+    // measurements at all.
+    expect(result.metrics.map((m) => m.key)).toEqual([
+      "lcp",
+      "inp",
+      "cls",
+      "fcp",
+      "ttfb",
+    ]);
+    expect(result.metrics.every((m) => m.p75 === 0 && m.rating === null)).toBe(
+      true,
+    );
+    expect(result.metrics[0].thresholds).toEqual({ good: 2500, poor: 4000 });
+  });
+
+  test("non-404 CrUX errors are logged, not returned", async () => {
+    mockCrux([{ status: 400, body: { error: { message: "bad request" } } }]);
+
+    // `query` throws "CrUX API 400: ...", but localCache.fetch catches it,
+    // console.errors it and resolves to null (see localCache.js). The caller
+    // therefore cannot tell an API failure from a cache miss — only the server
+    // log has the real reason.
+    await expect(pageWebVitals("https://example.com/", GA)).resolves.toBeNull();
+  });
+
+  test("requires an API key and a page URL", async () => {
+    await expect(pageWebVitals("https://example.com/", {})).rejects.toThrow(
+      /CrUX API key is not set/,
+    );
+    await expect(pageWebVitals(undefined, GA)).rejects.toThrow(
+      /No public URL for this resource/,
+    );
+  });
+});