emdash-cms--emdash/e2e/tests/image-optimization.spec.ts

/**
 * Image optimization E2E.
 *
 * The seed creates a published "Post With Image" whose Portable Text body has an
 * image block (rendered by EmDashImage at /posts/post-with-image). This asserts
 * the image flows through Astro's image pipeline (a `/_image` src) and that the
 * wrapped endpoint serves real image bytes from storage -- not a redirect or
 * 404. On the Cloudflare target this exercises the storage-backed endpoint that
 * makes optimization work without an HTTP fetch of the media URL.
 */

import { test, expect } from "../fixtures";

test.describe("image optimization", () => {
	test("renders an optimized image served by the wrapped image endpoint", async ({
		page,
		request,
	}) => {
		const img = page.locator("figure.emdash-image img").first();

		// The workerd dev runner's Vite dep optimizer can transiently 500 a cold
		// route even after warm-up; reload until the page renders. (Dev-only; the
		// deployed Worker has no optimizer.)
		for (let attempt = 0; attempt < 5; attempt++) {
			await page.goto("/posts/post-with-image");
			if (await img.isVisible().catch(() => false)) break;
			await page.waitForTimeout(1000);
		}
		await expect(img).toBeVisible();

		const src = await img.getAttribute("src");
		expect(src, "image src should be optimized via Astro's image endpoint").toContain("/_image");

		// The optimized URL must return real image bytes, not an Access redirect or 404.
		const res = await request.get(src!);
		expect(res.status()).toBe(200);
		expect(res.headers()["content-type"]).toMatch(/^image\//);
	});
});