diff --git a/tests/e2e/beautify.spec.ts b/tests/e2e/beautify.spec.ts new file mode 100644 index 00000000..8741e12a --- /dev/null +++ b/tests/e2e/beautify.spec.ts @@ -0,0 +1,94 @@ +import { expect, test, uploadTestImage, waitForProcessing } from "./helpers"; + +// --------------------------------------------------------------------------- +// GUI E2E: Beautify Screenshot Tool +// --------------------------------------------------------------------------- + +test.describe("Beautify Screenshot", () => { + test("renders tool page with settings", async ({ loggedInPage: page }) => { + await page.goto("/beautify"); + await expect(page.getByText("Beautify Screenshot").first()).toBeVisible(); + }); + + test("uploads image and shows preview", async ({ loggedInPage: page }) => { + await page.goto("/beautify"); + await uploadTestImage(page); + await page.waitForTimeout(1000); + + // Verify the image appeared in the preview area + await expect(page.locator("img").first()).toBeVisible(); + }); + + test("shows preset cards", async ({ loggedInPage: page }) => { + await page.goto("/beautify"); + + // Quick Presets section is open by default + await expect(page.getByText("Quick Presets").first()).toBeVisible(); + await expect(page.getByText("Purple Haze").first()).toBeVisible(); + await expect(page.getByText("Flamingo").first()).toBeVisible(); + await expect(page.getByText("Ocean").first()).toBeVisible(); + }); + + test("shows background, frame, spacing, and shadow sections", async ({ loggedInPage: page }) => { + await page.goto("/beautify"); + + await expect(page.getByText("Background").first()).toBeVisible(); + await expect(page.getByText("Device Frame").first()).toBeVisible(); + await expect(page.getByText("Spacing").first()).toBeVisible(); + await expect(page.getByText("Shadow").first()).toBeVisible(); + }); + + test("submit button uses data-testid", async ({ loggedInPage: page }) => { + await page.goto("/beautify"); + await uploadTestImage(page); + + await expect(page.getByTestId("beautify-submit")).toBeVisible(); + }); + + test("processes image with default settings", async ({ loggedInPage: page }) => { + await page.goto("/beautify"); + await uploadTestImage(page); + await page.waitForTimeout(1000); + + // Click the Beautify button + const processBtn = page.getByTestId("beautify-submit"); + await processBtn.click(); + await waitForProcessing(page); + + // Verify download is available + await expect( + page + .getByTestId("beautify-download") + .or(page.getByRole("link", { name: /download/i }).first()), + ).toBeVisible({ timeout: 15_000 }); + }); + + test("applies preset and processes", async ({ loggedInPage: page }) => { + await page.goto("/beautify"); + await uploadTestImage(page); + await page.waitForTimeout(1000); + + // Click a preset card + const presetCards = page.locator("button").filter({ hasText: /purple haze|flamingo|ocean/i }); + if ( + await presetCards + .first() + .isVisible({ timeout: 3000 }) + .catch(() => false) + ) { + await presetCards.first().click(); + await page.waitForTimeout(500); + } + + // Process + const processBtn = page.getByTestId("beautify-submit"); + await processBtn.click(); + await waitForProcessing(page); + + await expect( + page + .getByTestId("beautify-download") + .or(page.getByRole("link", { name: /download/i }).first()), + ).toBeVisible({ timeout: 15_000 }); + }); +});