Release Image Tools 0.2.0

tests/browser/app.spec.ts

@@ -42,7 +42,7 @@ test("serves the release identity and hardened headers", async ({
   const manifest = await request.get("/deep/nested/image/toolbox-app.json");
   await expect(manifest.json()).resolves.toMatchObject({
     id: "de.add-ideas.image-tools",
-    version: "0.1.0",
+    version: "0.2.0",
     entry: "./",
   });
 });
@@ -54,7 +54,7 @@ test("inspects, previews, resizes and exports a static PNG locally", async ({
   page.on("pageerror", (error) => errors.push(error.message));
   const external = await localOnly(page);
   await page.goto("/deep/nested/image/");
-  await page.locator('input[type="file"]').setInputFiles({
+  await page.locator('.drop-zone input[type="file"]').setInputFiles({
     name: "tiny.png",
     mimeType: "image/png",
     buffer: Buffer.from(VALID_PNG_BASE64, "base64"),
@@ -83,7 +83,7 @@ test("inspects, previews, resizes and exports a static PNG locally", async ({
 
 test("rejects an animated PNG without decoding a frame", async ({ page }) => {
   await page.goto("/deep/nested/image/");
-  await page.locator('input[type="file"]').setInputFiles({
+  await page.locator('.drop-zone input[type="file"]').setInputFiles({
     name: "animated.png",
     mimeType: "image/png",
     buffer: Buffer.from(pngFixture(8, 8, { animated: true })),
@@ -101,7 +101,7 @@ test("uses exact native JPEG and WebP codec capabilities", async ({ page }) => {
   const webp = await browserRaster(page, "image/webp");
   expect(jpeg.mimeType).toBe("image/jpeg");
   expect(webp.mimeType).toBe("image/webp");
-  await page.locator('input[type="file"]').setInputFiles([
+  await page.locator('.drop-zone input[type="file"]').setInputFiles([
     {
       name: "sample.jpg",
       mimeType: jpeg.mimeType,
@@ -136,6 +136,52 @@ test("uses exact native JPEG and WebP codec capabilities", async ({ page }) => {
   expect(external).toEqual([]);
 });
 
+test("zooms, exposes the interactive crop and exports a reusable recipe", async ({
+  page,
+}) => {
+  await page.goto("/deep/nested/image/");
+  await page.locator('.drop-zone input[type="file"]').setInputFiles({
+    name: "crop.png",
+    mimeType: "image/png",
+    buffer: Buffer.from(VALID_PNG_BASE64, "base64"),
+  });
+  await expect(
+    page.getByRole("img", { name: "crop.png, edited preview" }),
+  ).toBeVisible();
+  await page.getByRole("slider", { name: "Zoom" }).fill("175");
+  await expect(page.getByText("Zoom 175%")).toBeVisible();
+  await page.getByLabel("Width %").fill("60");
+  await expect(
+    page.getByRole("application", { name: /Interactive crop rectangle/iu }),
+  ).toBeVisible();
+  const recipeDownload = page.waitForEvent("download");
+  await page.getByRole("button", { name: "Save recipe" }).click();
+  expect((await recipeDownload).suggestedFilename()).toBe(
+    "image-tools-recipe.json",
+  );
+  await page.getByText("Native codec capabilities").click();
+  await expect(
+    page.getByText(/PNG decode available · encode available/iu),
+  ).toBeVisible();
+});
+
+test("packages completed queue outputs into one batch ZIP", async ({
+  page,
+}) => {
+  await page.goto("/deep/nested/image/");
+  const buffer = Buffer.from(VALID_PNG_BASE64, "base64");
+  await page.locator('.drop-zone input[type="file"]').setInputFiles([
+    { name: "one.png", mimeType: "image/png", buffer },
+    { name: "two.png", mimeType: "image/png", buffer },
+  ]);
+  await expect(page.getByRole("heading", { name: "one.png" })).toBeVisible();
+  await page.getByRole("button", { name: "Process queue" }).click();
+  await expect(page.getByText(/Finished 2 of 2/iu)).toBeVisible();
+  const batch = page.waitForEvent("download");
+  await page.getByRole("button", { name: "Batch ZIP (2)" }).click();
+  expect((await batch).suggestedFilename()).toBe("image-tools-batch.zip");
+});
+
 async function browserRaster(page: Page, type: "image/jpeg" | "image/webp") {
   return page.evaluate(async (mimeType) => {
     const canvas = document.createElement("canvas");

tests/browser/responsive.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from "@playwright/test";
+
+test("keeps the primary workspace inside a narrow viewport", async ({
+  page,
+}) => {
+  await page.goto("/deep/nested/image/");
+  await expect(page.locator("main").first()).toBeVisible();
+  await expect(
+    page.locator("main .loading, main .workbench-loading"),
+  ).toHaveCount(0);
+
+  const widths = await page.evaluate(() => ({
+    content: document.documentElement.scrollWidth,
+    viewport: document.documentElement.clientWidth,
+  }));
+  expect(widths.viewport).toBeLessThanOrEqual(430);
+  expect(widths.content).toBeLessThanOrEqual(widths.viewport + 1);
+});