SnapOtter/tests/e2e/transparency-fixer.spec.ts

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

// ---------------------------------------------------------------------------
// PNG Transparency Fixer tool - e2e tests.
// Covers UI rendering, advanced settings, processing flow, and result display.
// ---------------------------------------------------------------------------

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(500);
}

async function fixTransparencyAndWait(page: import("@playwright/test").Page) {
  await page.getByTestId("transparency-fixer-submit").click();
  // Wait for the before/after slider or result image to appear (AI processing can be slow)
  await expect(page.locator("section[aria-label='Image area'] img").first()).toBeVisible({
    timeout: 300_000,
  });
  // Ensure the submit button re-appears (processing finished, ProgressCard gone)
  await expect(page.getByTestId("transparency-fixer-submit")).toBeVisible({ timeout: 10_000 });
}

test.describe("PNG Transparency Fixer tool", () => {
  async function skipIfFeatureNotInstalled(page: import("@playwright/test").Page) {
    await page.goto("/transparency-fixer");
    try {
      await page
        .getByTestId("transparency-fixer-submit")
        .waitFor({ state: "visible", timeout: 15_000 });
    } catch {
      test.skip(true, "background-removal feature bundle not installed");
    }
    if (!(await isAiSidecarRunning(page))) {
      test.skip(true, "AI sidecar not running");
    }
  }

  test("page loads with correct title and description", async ({ loggedInPage: page }) => {
    await skipIfFeatureNotInstalled(page);

    // Tool title shown in the settings panel header
    await expect(page.getByText("PNG Transparency Fixer")).toBeVisible();

    // Description text from the settings component
    await expect(page.getByText("Upload a PNG with a fake transparent background")).toBeVisible();

    // Submit button disabled with no file
    await expect(page.getByTestId("transparency-fixer-submit")).toBeDisabled();
  });

  test("submit button disabled without file", async ({ loggedInPage: page }) => {
    await skipIfFeatureNotInstalled(page);
    await expect(page.getByTestId("transparency-fixer-submit")).toBeDisabled();
  });

  test("submit button enables after file upload", async ({ loggedInPage: page }) => {
    await skipIfFeatureNotInstalled(page);
    await uploadFile(page, fixturePath("test-fake-transparency.png"));
    await expect(page.getByTestId("transparency-fixer-submit")).toBeEnabled();
  });

  test("advanced section is collapsed by default", async ({ loggedInPage: page }) => {
    await skipIfFeatureNotInstalled(page);

    // Advanced toggle button should be visible
    await expect(page.getByText("Advanced")).toBeVisible();

    // Defringe slider and output format should NOT be visible yet
    await expect(page.getByText("Defringe")).not.toBeVisible();
    await expect(page.getByText("Output Format")).not.toBeVisible();
  });

  test("advanced section toggles open and shows defringe slider and output format", async ({
    loggedInPage: page,
  }) => {
    await skipIfFeatureNotInstalled(page);

    // Open advanced section
    await page.getByText("Advanced").click();

    // Defringe slider visible
    await expect(page.getByText("Defringe")).toBeVisible();
    const defringeSlider = page.locator("input[type='range'][min='0'][max='100']");
    await expect(defringeSlider).toBeVisible();

    // Output format dropdown visible
    await expect(page.getByText("Output Format")).toBeVisible();
    const formatSelect = page.locator("select");
    await expect(formatSelect).toBeVisible();

    // Verify default values
    await expect(page.getByText("30")).toBeVisible(); // default defringe value
    await expect(formatSelect).toHaveValue("png");
  });

  test("defringe slider is interactive", async ({ loggedInPage: page }) => {
    await skipIfFeatureNotInstalled(page);

    // Open advanced section
    await page.getByText("Advanced").click();

    const defringeSlider = page.locator("input[type='range'][min='0'][max='100']");
    await expect(defringeSlider).toBeVisible();

    // Adjust slider value
    await defringeSlider.fill("75");
    await expect(page.getByText("75")).toBeVisible();

    await defringeSlider.fill("0");
    await expect(page.getByText("0")).toBeVisible();
  });

  test("output format dropdown switches to WebP", async ({ loggedInPage: page }) => {
    await skipIfFeatureNotInstalled(page);

    // Open advanced section
    await page.getByText("Advanced").click();

    const formatSelect = page.locator("select");
    await expect(formatSelect).toHaveValue("png");

    // Switch to WebP
    await formatSelect.selectOption("webp");
    await expect(formatSelect).toHaveValue("webp");

    // Switch back to PNG
    await formatSelect.selectOption("png");
    await expect(formatSelect).toHaveValue("png");
  });

  test("progress indicator appears during processing", async ({ loggedInPage: page }) => {
    await skipIfFeatureNotInstalled(page);
    await uploadFile(page, fixturePath("test-fake-transparency.png"));

    // Click submit
    await page.getByTestId("transparency-fixer-submit").click();

    // ProgressCard should appear (contains an animated spinner)
    await expect(page.locator("[class*='animate-spin']")).toBeVisible({ timeout: 5_000 });

    // Wait for processing to complete
    await expect(page.locator("section[aria-label='Image area'] img").first()).toBeVisible({
      timeout: 300_000,
    });
  });

  test("PNG - fixes transparency and shows before/after result", async ({ loggedInPage: page }) => {
    await skipIfFeatureNotInstalled(page);
    await uploadFile(page, fixturePath("test-fake-transparency.png"));

    await fixTransparencyAndWait(page);

    // Before/after slider or result image should be visible
    await expect(page.locator("section[aria-label='Image area'] img").first()).toBeVisible();

    // No error shown
    await expect(page.getByText("Transparency fix failed")).not.toBeVisible();
    await expect(page.getByText("Network error")).not.toBeVisible();
  });

  test("result download is available after processing", async ({ loggedInPage: page }) => {
    await skipIfFeatureNotInstalled(page);
    await uploadFile(page, fixturePath("test-fake-transparency.png"));

    await fixTransparencyAndWait(page);

    // ReviewPanel should show with Download button in the sidebar
    const downloadButton = page.getByRole("button", { name: /download/i });
    await expect(downloadButton).toBeVisible({ timeout: 10_000 });
  });
});