tech-log-frontend/tests/browser-capabilities/image-cdn.spec.ts

import { expect, test } from "../support/browser/strict-browser-test.ts";

const PNG_1X1 = Buffer.from(
  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=",
  "base64",
);

test("fetches and decodes an allowlisted public immutable CDN image", async ({
  page,
}) => {
  const cdnRequests: string[] = [];
  await page.route("https://images.example.test/**", async (route) => {
    cdnRequests.push(route.request().url());
    await route.fulfill({
      status: 200,
      body: PNG_1X1,
      headers: {
        "access-control-allow-origin": "*",
        "cache-control":
          "public, max-age=31536000, s-maxage=31536000, immutable",
        "content-length": String(PNG_1X1.byteLength),
        "content-type": "image/png",
        vary: "Accept-Encoding",
      },
    });
  });
  await page.goto("/");

  const result = await page.evaluate(async () => {
    const modulePath =
      "/src/adapters/browser-transfer/image-cdn/index.ts";
    const {
      ImageCdnPolicyRegistry,
      createBrowserImageProbe,
      createImageCdnRuntime,
      imageCdnPresetReference,
    } = (await import(
      /* @vite-ignore */ modulePath
    )) as typeof import("../../src/adapters/browser-transfer/image-cdn/index.ts");

    const preset = imageCdnPresetReference(
      "browser-probe",
      "verify-public-cdn-image",
    );
    const policies = new ImageCdnPolicyRegistry({
      applicationOrigin: "https://app.example.test",
      origins: [
        {
          originKey: "browser-images",
          origin: "https://images.example.test",
          assetPathPrefix: "/v1/assets/",
          minimumPublicMaxAgeSeconds: 31_536_000,
        },
      ],
      presets: [
        {
          reference: preset,
          bindingId: "browser-probe-v1",
          width: 1,
          height: 1,
          fit: "cover",
          dprs: [1],
          responsiveWidths: [1],
          quality: 90,
          formats: ["png"],
          sizes: "1px",
          loading: "eager",
          decoding: "async",
          fetchPriority: "high",
          referrerPolicy: "no-referrer",
          probeMode: "PRIMARY_REQUIRED",
          allowUpscale: false,
          maxTransformedPixels: 1,
          maxDecodedBytes: 4,
          maxEncodedBytes: 128,
        },
      ],
      hardLimits: {
        maxIntrinsicWidth: 1,
        maxIntrinsicHeight: 1,
        maxSourcePixels: 1,
        maxCssDimension: 1,
        maxDpr: 1,
        maxQuality: 90,
        maxCandidateCount: 1,
        maxTransformedPixels: 1,
        maxDecodedBytes: 4,
        maxEncodedBytes: 128,
        maxUrlLength: 2_048,
        maxCapabilityLifetimeMs: 60_000,
        maxClockSkewMs: 1_000,
        minCapabilityRemainingMs: 1_000,
        maxPresetBindingsPerCapability: 1,
        maxConcurrentCapabilityVerifications: 1,
        allowedSourceMediaTypes: ["image/png"],
        formatQualityCeilings: { png: 90 },
      },
      capability: {
        issuer: "browser-image-bff",
        acceptedKeyIds: ["browser-image-key-v1"],
      },
    });
    const runtime = createImageCdnRuntime({
      policies,
      probe: createBrowserImageProbe(),
    });
    const accepted = runtime.assets.acceptPublicImmutable({
      kind: "ALLOWLISTED_PUBLIC",
      originKey: "browser-images",
      assetId: "asset_1x1",
      revision: "revision_1",
      mediaType: "image/png",
      contentKind: "RASTER_STATIC",
      intrinsicWidth: 1,
      intrinsicHeight: 1,
    });
    if (!accepted.ok) {
      runtime.close();
      return {
        accepted,
        resolved: null,
      };
    }
    const resolved = await runtime.presentation.resolve({
      asset: accepted.value,
      preset,
      signal: new AbortController().signal,
    });
    runtime.close();
    return {
      accepted: { ok: true as const },
      resolved,
    };
  });

  expect(result.accepted).toEqual({ ok: true });
  expect(result.resolved).toMatchObject({
    ok: true,
    value: {
      width: 1,
      height: 1,
      fallbackMediaType: "image/png",
      srcSet: expect.stringMatching(/ 1w$/u),
      sources: [],
      loading: "eager",
      decoding: "async",
      fetchPriority: "high",
      referrerPolicy: "no-referrer",
      crossOrigin: "anonymous",
      delivery: {
        class: "PUBLIC_IMMUTABLE",
        assetVersion: "revision_1",
        browserCache: "PUBLIC_IMMUTABLE",
        sharedCache: "PUBLIC_IMMUTABLE",
        purge: "REVISION_ROLLOVER",
        expiresAtEpochMs: null,
      },
      decodeBudget: {
        maximumCandidatePixels: 1,
        maximumDecodedBytes: 4,
        maximumEncodedBytes: 128,
      },
    },
  });
  if (!result.resolved?.ok) return;

  const imageUrl = new URL(result.resolved.value.src);
  expect(imageUrl.origin).toBe("https://images.example.test");
  expect(imageUrl.pathname).toBe(
    "/v1/assets/asset_1x1/revision_1",
  );
  expect(Object.fromEntries(imageUrl.searchParams)).toEqual({
    dpr: "1",
    fit: "cover",
    format: "png",
    height: "1",
    preset: "browser-probe-v1",
    quality: "90",
    width: "1",
  });
  expect(cdnRequests).toEqual([result.resolved.value.src]);
});