SnapOtter/tests/e2e/remove-bg.spec.ts

import path from "node:path";
import { expect, test } from "./helpers";

// ---------------------------------------------------------------------------
// Remove Background tool - comprehensive e2e tests.
// Tests HEIC/JPG support, all background types, blur, shadow, and batch.
// ---------------------------------------------------------------------------

function fixturePath(name: string): string {
  return path.join(process.cwd(), "tests", "fixtures", name);
}

async function uploadFile(page: import("@playwright/test").Page, filePath: string) {
  const fileChooserPromise = page.waitForEvent("filechooser");
  const dropzone = page.locator("[class*='border-dashed']").first();
  await dropzone.click();
  const fileChooser = await fileChooserPromise;
  await fileChooser.setFiles(filePath);
  await page.waitForTimeout(1000);
}

/** Phase 1 helper: remove bg, wait for download button */
async function removeBgAndWait(page: import("@playwright/test").Page) {
  await page.getByTestId("remove-background-submit").click();
  // After Phase 1, either download or download-effects button appears
  await expect(
    page
      .getByTestId("remove-background-download")
      .or(page.getByTestId("remove-background-download-effects")),
  ).toBeVisible({ timeout: 300_000 });
}

test.describe("Remove Background tool", () => {
  test("page loads with correct UI sections", async ({ loggedInPage: page }) => {
    await page.goto("/remove-background");

    await expect(page.getByText("People")).toBeVisible();
    await expect(page.getByText("Products")).toBeVisible();
    await expect(page.getByText("General")).toBeVisible();
    await expect(page.getByText("Fast")).toBeVisible();
    await expect(page.getByText("HD")).toBeVisible();
    await expect(page.getByText("Max")).toBeVisible();

    // Passport checkbox visible and checked by default
    const passportCheckbox = page.locator("input[type='checkbox']").first();
    await expect(passportCheckbox).toBeChecked();

    // Background type buttons
    await expect(page.getByText("Transparent")).toBeVisible();
    await expect(page.getByText("Color")).toBeVisible();
    await expect(page.getByText("Gradient")).toBeVisible();
    await expect(page.getByRole("button", { name: "Image" })).toBeVisible();

    // Effects section
    await expect(page.getByText("Effects")).toBeVisible();
  });

  test("passport checkbox defaults ON for people, OFF for other subjects", async ({
    loggedInPage: page,
  }) => {
    await page.goto("/remove-background");

    const passportCheckbox = page.locator("input[type='checkbox']").first();
    await expect(passportCheckbox).toBeChecked();

    await page.getByText("Products").click();
    await expect(page.getByText("Passport / ID photo")).not.toBeVisible();

    await page.getByText("People").click();
    await expect(page.getByText("Passport / ID photo")).toBeVisible();
    await expect(passportCheckbox).toBeChecked();
  });

  test("background type controls show/hide sub-options", async ({ loggedInPage: page }) => {
    await page.goto("/remove-background");

    await page.getByRole("button", { name: "Color" }).click();
    await expect(page.locator("input[type='color']").first()).toBeVisible();

    await page.getByRole("button", { name: "Gradient" }).click();
    await expect(page.getByText("Direction")).toBeVisible();

    await page.getByRole("button", { name: "Image" }).click();
    await expect(page.getByText("Choose background image")).toBeVisible();

    await page.getByRole("button", { name: "Transparent" }).click();
  });

  test("effects section expands with blur and shadow controls", async ({ loggedInPage: page }) => {
    await page.goto("/remove-background");

    await page.getByText("Effects").click();
    await expect(page.getByText("Blur Background")).toBeVisible();
    await expect(page.getByText("Add Shadow")).toBeVisible();

    await page.getByText("Blur Background").click();
    await expect(page.getByText("Intensity")).toBeVisible();

    await page.getByText("Add Shadow").click();
    await expect(page.getByText("Opacity")).toBeVisible();
  });

  test("JPG portrait - transparent background removal", async ({ loggedInPage: page }) => {
    await page.goto("/remove-background");
    await uploadFile(page, fixturePath("test-portrait.jpg"));

    await removeBgAndWait(page);
    await expect(page.locator("section[aria-label='Image area'] img").first()).toBeVisible();
  });

  test("Ultra quality visible for People, hidden for Products", async ({ loggedInPage: page }) => {
    await page.goto("/remove-background");

    // People is default - Ultra should be visible
    await expect(page.getByRole("button", { name: "Ultra" })).toBeVisible();

    // Switch to Products - Ultra should disappear
    await page.getByText("Products").click();
    await expect(page.getByRole("button", { name: "Ultra" })).not.toBeVisible();

    // Switch back to People - Ultra returns
    await page.getByText("People").click();
    await expect(page.getByRole("button", { name: "Ultra" })).toBeVisible();
  });

  test("Ultra quality processes JPG portrait", async ({ loggedInPage: page }) => {
    await page.goto("/remove-background");
    await uploadFile(page, fixturePath("test-portrait.jpg"));

    // Select Ultra quality
    await page.getByRole("button", { name: "Ultra" }).click();

    await removeBgAndWait(page);
    await expect(page.locator("section[aria-label='Image area'] img").first()).toBeVisible();
    await expect(page.locator("text=Background removal failed")).not.toBeVisible();
  });

  test("HEIC portrait - processes without error", async ({ loggedInPage: page }) => {
    await page.goto("/remove-background");
    await uploadFile(page, fixturePath("test-portrait.heic"));

    await removeBgAndWait(page);
    await expect(page.locator("text=Background removal failed")).not.toBeVisible();
  });

  test("two-phase: remove bg then download with color background", async ({
    loggedInPage: page,
  }) => {
    await page.goto("/remove-background");
    await uploadFile(page, fixturePath("test-portrait.jpg"));

    // Phase 1
    await removeBgAndWait(page);

    // Phase 2: Select color background
    await page.getByRole("button", { name: "Color" }).click();

    // Download button should switch to effects mode
    const dlBtn = page.getByTestId("remove-background-download-effects");
    await expect(dlBtn).toBeVisible();
    await dlBtn.click();

    // Button should show "Rendering..." briefly then return to "Download"
    await expect(dlBtn).not.toHaveText("Rendering...", { timeout: 30_000 });
  });

  test("two-phase: remove bg then download with gradient", async ({ loggedInPage: page }) => {
    await page.goto("/remove-background");
    await uploadFile(page, fixturePath("test-portrait.jpg"));

    await removeBgAndWait(page);

    await page.getByRole("button", { name: "Gradient" }).click();

    const dlBtn = page.getByTestId("remove-background-download-effects");
    await expect(dlBtn).toBeVisible();
    await dlBtn.click();
    await expect(dlBtn).not.toHaveText("Rendering...", { timeout: 30_000 });
  });

  test("two-phase: remove bg then download with blur", async ({ loggedInPage: page }) => {
    await page.goto("/remove-background");
    await uploadFile(page, fixturePath("test-portrait.jpg"));

    await removeBgAndWait(page);

    // Enable blur
    await page.getByText("Effects").click();
    await page.getByText("Blur Background").click();

    // Preview should show blurred original background
    await expect(page.locator("section[aria-label='Image area'] img").first()).toBeVisible();

    const dlBtn = page.getByTestId("remove-background-download-effects");
    await expect(dlBtn).toBeVisible();
    await dlBtn.click();
    await expect(dlBtn).not.toHaveText("Rendering...", { timeout: 30_000 });
  });

  test("two-phase: remove bg then download with shadow", async ({ loggedInPage: page }) => {
    await page.goto("/remove-background");
    await uploadFile(page, fixturePath("test-portrait.jpg"));

    await removeBgAndWait(page);

    await page.getByText("Effects").click();
    await page.getByText("Add Shadow").click();

    const dlBtn = page.getByTestId("remove-background-download-effects");
    await expect(dlBtn).toBeVisible();
    await dlBtn.click();
    await expect(dlBtn).not.toHaveText("Rendering...", { timeout: 30_000 });
  });

  test("two-phase: remove bg then download with blur + shadow", async ({ loggedInPage: page }) => {
    await page.goto("/remove-background");
    await uploadFile(page, fixturePath("test-portrait.jpg"));

    await removeBgAndWait(page);

    await page.getByText("Effects").click();
    await page.getByText("Blur Background").click();
    await page.getByText("Add Shadow").click();

    const dlBtn = page.getByTestId("remove-background-download-effects");
    await expect(dlBtn).toBeVisible();
    await dlBtn.click();
    await expect(dlBtn).not.toHaveText("Rendering...", { timeout: 30_000 });
  });

  test("two-phase: custom bg image + blur shows uploaded bg", async ({ loggedInPage: page }) => {
    await page.goto("/remove-background");
    await uploadFile(page, fixturePath("test-portrait.jpg"));

    await page.getByRole("button", { name: "Image" }).click();
    const bgFileInput = page.locator("input[type='file'][accept*='image']");
    await bgFileInput.setInputFiles(fixturePath("test-200x150.png"));

    await page.getByText("Effects").click();
    await page.getByText("Blur Background").click();
    const blurSlider = page.locator("input[type='range']").first();
    await blurSlider.fill("100");

    await removeBgAndWait(page);

    await expect(page.locator("section[aria-label='Image area'] img").first()).toBeVisible();

    const dlBtn = page.getByTestId("remove-background-download-effects");
    await expect(dlBtn).toBeVisible();
    await dlBtn.click();
    await expect(dlBtn).not.toHaveText("Rendering...", { timeout: 30_000 });
  });

  test("two-phase: HEIC background image works for preview and download", async ({
    loggedInPage: page,
  }) => {
    await page.goto("/remove-background");
    await uploadFile(page, fixturePath("test-portrait.jpg"));

    await page.getByRole("button", { name: "Image" }).click();
    const bgFileInput = page.locator("input[type='file'][accept*='image']");
    await bgFileInput.setInputFiles(fixturePath("test-portrait.heic"));
    await page.waitForTimeout(3000);

    await removeBgAndWait(page);

    await expect(page.locator("section[aria-label='Image area'] img").first()).toBeVisible();

    const dlBtn = page.getByTestId("remove-background-download-effects");
    await expect(dlBtn).toBeVisible();
    await dlBtn.click();
    await expect(dlBtn).not.toHaveText("Rendering...", { timeout: 30_000 });
  });

  test("batch - JPG + HEIC processes both", async ({ loggedInPage: page }) => {
    await page.goto("/remove-background");

    const files = [fixturePath("test-portrait.jpg"), fixturePath("test-portrait.heic")];
    const fileChooserPromise = page.waitForEvent("filechooser");
    const dropzone = page.locator("[class*='border-dashed']").first();
    await dropzone.click();
    const fileChooser = await fileChooserPromise;
    await fileChooser.setFiles(files);
    await page.waitForTimeout(2000);

    await expect(page.getByText("Files (2)")).toBeVisible();
    await expect(page.getByText(/remove background.*2 files/i)).toBeVisible();

    await page.getByTestId("remove-background-submit").click();

    await expect(page.getByRole("button", { name: /download all/i })).toBeVisible({
      timeout: 300_000,
    });

    await expect(page.locator("section[aria-label='Image area'] img").first()).toBeVisible({
      timeout: 10_000,
    });
  });
});