diff --git a/tests/e2e/gui-tools-essential.spec.ts b/tests/e2e/gui-tools-essential.spec.ts index c36a3f0e..4f9c3675 100644 --- a/tests/e2e/gui-tools-essential.spec.ts +++ b/tests/e2e/gui-tools-essential.spec.ts @@ -1,4 +1,3 @@ -import { execFileSync } from "node:child_process"; import path from "node:path"; import { expect, test, uploadTestImage, waitForProcessing } from "./helpers"; @@ -198,19 +197,12 @@ test.describe("GUI Essential Tools", () => { await expect(page.getByTestId("crop-download")).toBeVisible({ timeout: 15_000 }); }); - test("tall portrait image fits within viewport without overflow", async ({ + test("tall portrait image (200x4000) fits within viewport without overflow", async ({ loggedInPage: page, }) => { await page.goto("/crop"); - // Create a tall portrait image (200x2000) to trigger overflow - const portraitPath = path.join(process.cwd(), "test-results", "test-portrait-tall.png"); - const script = [ - "const sharp = require('sharp');", - `sharp({create:{width:200,height:2000,channels:4,background:{r:0,g:128,b:255,alpha:1}}}).png().toFile('${portraitPath.replace(/'/g, "\\'")}')`, - ].join(" "); - execFileSync("node", ["-e", script], { cwd: process.cwd(), timeout: 5000 }); - + const portraitPath = path.join(process.cwd(), "tests", "fixtures", "test-portrait-tall.png"); const fileChooserPromise = page.waitForEvent("filechooser"); await page.locator("[class*='border-dashed']").first().click(); const fileChooser = await fileChooserPromise; @@ -224,6 +216,34 @@ test.describe("GUI Essential Tools", () => { const box = await img.boundingBox(); expect(box).not.toBeNull(); expect(box!.y + box!.height).toBeLessThanOrEqual(viewport.height); + expect(box!.y).toBeGreaterThanOrEqual(0); + }); + + test("extremely tall portrait image (100x6000) fits within viewport without overflow", async ({ + loggedInPage: page, + }) => { + await page.goto("/crop"); + + const extremePath = path.join( + process.cwd(), + "tests", + "fixtures", + "test-portrait-extreme.png", + ); + const fileChooserPromise = page.waitForEvent("filechooser"); + await page.locator("[class*='border-dashed']").first().click(); + const fileChooser = await fileChooserPromise; + await fileChooser.setFiles(extremePath); + await page.waitForTimeout(1000); + + const img = page.locator(".ReactCrop img"); + await expect(img).toBeVisible(); + + const viewport = page.viewportSize()!; + const box = await img.boundingBox(); + expect(box).not.toBeNull(); + expect(box!.y + box!.height).toBeLessThanOrEqual(viewport.height); + expect(box!.y).toBeGreaterThanOrEqual(0); }); }); diff --git a/tests/fixtures/test-portrait-extreme.png b/tests/fixtures/test-portrait-extreme.png new file mode 100644 index 00000000..f55a7f34 Binary files /dev/null and b/tests/fixtures/test-portrait-extreme.png differ diff --git a/tests/fixtures/test-portrait-tall.png b/tests/fixtures/test-portrait-tall.png new file mode 100644 index 00000000..4efbd15b Binary files /dev/null and b/tests/fixtures/test-portrait-tall.png differ