SnapOtter/tests/e2e/automate.spec.ts

import { expect, getTestImagePath, test } from "./helpers";

test.describe("Automate Page", () => {
  // Retry flaky tests caused by dev server timing
  test.describe.configure({ retries: 3 });

  /**
   * Navigate to /automate and wait for the page to fully render.
   * Uses multiple retry strategies for blank-page flakes.
   */
  async function gotoAutomate(page: import("@playwright/test").Page) {
    const heading = page.getByRole("heading", {
      name: /automation pipeline/i,
    });

    for (let attempt = 0; attempt < 3; attempt++) {
      if (attempt === 0) {
        await page.goto("/automate", { waitUntil: "networkidle" });
      } else {
        // On retry, wait then reload
        await page.waitForTimeout(500);
        await page.goto("/automate", { waitUntil: "networkidle" });
      }

      try {
        await expect(heading).toBeVisible({ timeout: 8_000 });
        return; // Page loaded successfully
      } catch {
        // Continue to next attempt
      }
    }

    // Final attempt — let it throw if it fails
    await page.goto("/automate", { waitUntil: "networkidle" });
    await expect(heading).toBeVisible({ timeout: 10_000 });
  }

  /** Wait for pipeline steps to render after a template click. */
  async function waitForSteps(page: import("@playwright/test").Page, count: number) {
    // Step numbers (1, 2, 3...) appear inside the step cards
    await expect(page.getByTitle("Remove")).toHaveCount(count, {
      timeout: 5_000,
    });
  }

  const testImagePath = getTestImagePath();

  /** Upload the test image via file chooser. */
  async function uploadTestFile(page: import("@playwright/test").Page) {
    const fileChooserPromise = page.waitForEvent("filechooser");
    await page.getByRole("button", { name: /upload image to process/i }).click();
    const fileChooser = await fileChooserPromise;
    await fileChooser.setFiles(testImagePath);
    await page.waitForTimeout(500);
  }

  // ─── Page Rendering ───────────────────────────────────────────────────

  test("automate page renders pipeline builder", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await expect(page.getByText(/chain multiple tools/i).first()).toBeVisible();
  });

  test("shows all five pipeline templates", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await expect(page.getByText("Social Media Ready")).toBeVisible();
    await expect(page.getByText("Privacy Clean")).toBeVisible();
    await expect(page.getByText("Web Optimization")).toBeVisible();
    await expect(page.getByText("Profile Picture")).toBeVisible();
    await expect(page.getByText("Watermark Batch")).toBeVisible();
  });

  test("shows template descriptions", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await expect(page.getByText(/resize 1080x1080/i).first()).toBeVisible();
    await expect(page.getByText(/strip all metadata/i).first()).toBeVisible();
  });

  test("shows empty state message when no steps", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await expect(page.getByText(/add steps to build your automation pipeline/i)).toBeVisible();
  });

  test("shows upload image button", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await expect(page.getByRole("button", { name: /upload image to process/i })).toBeVisible();
  });

  test("has Add Step button", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await expect(page.getByRole("button", { name: /add step/i })).toBeVisible();
  });

  test("has Process button (disabled when no steps or file)", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    const processBtn = page.getByRole("button", {
      name: "Process",
      exact: true,
    });
    await expect(processBtn).toBeVisible();
    await expect(processBtn).toBeDisabled();
  });

  test("has Save Pipeline button (disabled when no steps)", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    const saveBtn = page.getByRole("button", { name: "Save Pipeline" });
    await expect(saveBtn).toBeVisible();
    await expect(saveBtn).toBeDisabled();
  });

  // ─── Template Loading ─────────────────────────────────────────────────

  test("clicking Social Media Ready template loads 4 steps", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByText("Social Media Ready").click();
    await waitForSteps(page, 4);
    // Verify empty state is gone
    await expect(page.getByText(/add steps to build your automation pipeline/i)).not.toBeVisible();
  });

  test("clicking Privacy Clean template loads 2 steps", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByText("Privacy Clean").click();
    await waitForSteps(page, 2);
  });

  test("clicking Web Optimization template loads 3 steps", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByText("Web Optimization").click();
    await waitForSteps(page, 3);
  });

  test("clicking Profile Picture template loads 2 steps", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByText("Profile Picture").click();
    await waitForSteps(page, 2);
  });

  test("clicking Watermark Batch template loads 3 steps", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByText("Watermark Batch").click();
    await waitForSteps(page, 3);
  });

  test("loading a template replaces previous steps", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByText("Social Media Ready").click();
    await waitForSteps(page, 4);

    await page.getByText("Privacy Clean").click();
    await waitForSteps(page, 2);
  });

  // ─── Add Step ─────────────────────────────────────────────────────────

  test("clicking Add Step opens tool picker", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByRole("button", { name: /add step/i }).click();
    await expect(page.getByText("Add a step")).toBeVisible();
  });

  test("tool picker shows available tools", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByRole("button", { name: /add step/i }).click();
    const pickerArea = page.locator(".max-h-64.overflow-y-auto");
    await expect(pickerArea.getByText("Resize").first()).toBeVisible();
    await expect(pickerArea.getByText("Convert").first()).toBeVisible();
  });

  test("selecting a tool from picker adds a step", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByRole("button", { name: /add step/i }).click();
    const pickerArea = page.locator(".max-h-64.overflow-y-auto");
    await pickerArea.getByText("Resize", { exact: false }).first().click();
    await waitForSteps(page, 1);
  });

  test("can add multiple steps", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);

    await page.getByRole("button", { name: /add step/i }).click();
    let picker = page.locator(".max-h-64.overflow-y-auto");
    await picker.getByText("Resize", { exact: false }).first().click();
    await waitForSteps(page, 1);

    await page.getByRole("button", { name: /add step/i }).click();
    picker = page.locator(".max-h-64.overflow-y-auto");
    await picker.getByText("Convert", { exact: false }).first().click();
    await waitForSteps(page, 2);
  });

  // ─── Step Controls ────────────────────────────────────────────────────

  test("can remove a step", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByText("Privacy Clean").click();
    await waitForSteps(page, 2);

    await page.getByTitle("Remove").first().click();
    await waitForSteps(page, 1);
  });

  test("can expand step settings", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByText("Privacy Clean").click();
    await waitForSteps(page, 2);

    await page.getByTitle("Settings").first().click();
    await expect(page.getByText(/default settings will be used/i)).toBeVisible();
  });

  test("move up button disabled on first step", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByText("Social Media Ready").click();
    await waitForSteps(page, 4);

    await expect(page.getByTitle("Move up").first()).toBeDisabled();
  });

  test("move down button disabled on last step", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByText("Social Media Ready").click();
    await waitForSteps(page, 4);

    await expect(page.getByTitle("Move down").last()).toBeDisabled();
  });

  // ─── File Upload ──────────────────────────────────────────────────────

  test("can upload a file via file chooser", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await uploadTestFile(page);

    // File name and size should be visible in the upload area
    await expect(page.getByText("test-image.png")).toBeVisible();
    // The file size text is inside the dashed border area
    const uploadArea = page.locator("[class*='border-dashed']").first();
    await expect(uploadArea.getByText(/KB\)/)).toBeVisible();
  });

  test("can remove uploaded file", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await uploadTestFile(page);
    await expect(page.getByText("test-image.png")).toBeVisible();

    // Remove file — the X button inside the dashed upload area
    const uploadArea = page.locator("[class*='border-dashed']").first();
    await uploadArea.locator("button").click();

    await expect(page.getByRole("button", { name: /upload image to process/i })).toBeVisible();
  });

  // ─── Save Pipeline ────────────────────────────────────────────────────

  test("Save Pipeline button enables after adding steps", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByText("Privacy Clean").click();
    await waitForSteps(page, 2);

    await expect(page.getByRole("button", { name: "Save Pipeline" })).toBeEnabled();
  });

  test("clicking Save Pipeline shows name input form", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByText("Privacy Clean").click();
    await waitForSteps(page, 2);

    await page.getByRole("button", { name: "Save Pipeline" }).click();
    await expect(page.getByPlaceholder("Pipeline name")).toBeVisible();
  });

  test("Save button disabled when name is empty", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByText("Privacy Clean").click();
    await waitForSteps(page, 2);

    await page.getByRole("button", { name: "Save Pipeline" }).click();
    const saveSubmitBtn = page.getByRole("button", {
      name: "Save",
      exact: true,
    });
    await expect(saveSubmitBtn).toBeDisabled();
  });

  test("can save a pipeline with name and see it in sidebar", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByText("Privacy Clean").click();
    await waitForSteps(page, 2);

    const uniqueName = `E2E Pipeline ${Date.now()}`;
    await page.getByRole("button", { name: "Save Pipeline" }).click();
    await page.getByPlaceholder("Pipeline name").fill(uniqueName);
    await page.getByRole("button", { name: "Save", exact: true }).click();

    // Wait for the pipeline to appear in sidebar
    await expect(page.getByText(uniqueName).first()).toBeVisible({
      timeout: 5_000,
    });
  });

  test("can close save form without saving", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByText("Privacy Clean").click();
    await waitForSteps(page, 2);

    await page.getByRole("button", { name: "Save Pipeline" }).click();
    await expect(page.getByPlaceholder("Pipeline name")).toBeVisible();

    // Close the form — the last button in the save form row
    const formRow = page.locator(".flex.items-center.gap-2.flex-1");
    await formRow.locator("button").last().click();

    await expect(page.getByRole("button", { name: "Save Pipeline" })).toBeVisible();
  });

  // ─── Pipeline Execution ───────────────────────────────────────────────

  test("Process button enables when steps and file are set", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByText("Privacy Clean").click();
    await waitForSteps(page, 2);
    await uploadTestFile(page);

    await expect(page.getByRole("button", { name: "Process", exact: true })).toBeEnabled();
  });

  test("executing pipeline shows success result", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByText("Privacy Clean").click();
    await waitForSteps(page, 2);
    await uploadTestFile(page);

    await page.getByRole("button", { name: "Process", exact: true }).click();

    // Wait for result (pipeline completed text)
    await expect(page.getByText(/pipeline completed/i)).toBeVisible({ timeout: 30_000 });

    // Should show original/processed sizes
    await expect(page.getByText(/original/i)).toBeVisible();
    await expect(page.getByText(/processed/i)).toBeVisible();

    // Should show download button
    await expect(page.getByRole("link", { name: /download result/i })).toBeVisible();
  });

  test("executing Social Media Ready template works", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByText("Social Media Ready").click();
    await waitForSteps(page, 4);
    await uploadTestFile(page);

    await page.getByRole("button", { name: "Process", exact: true }).click();

    await expect(page.getByText(/pipeline completed/i)).toBeVisible({ timeout: 30_000 });
  });

  // ─── Saved Pipeline Interactions ──────────────────────────────────────

  test("can load a saved pipeline into builder", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);

    const uniqueName = `Load Pipeline ${Date.now()}`;

    // Save a pipeline
    await page.getByText("Web Optimization").click();
    await waitForSteps(page, 3);

    await page.getByRole("button", { name: "Save Pipeline" }).click();
    await page.getByPlaceholder("Pipeline name").fill(uniqueName);
    await page.getByRole("button", { name: "Save", exact: true }).click();
    await expect(page.getByText(uniqueName).first()).toBeVisible({
      timeout: 5_000,
    });

    // Switch to different template
    await page.getByText("Privacy Clean").click();
    await waitForSteps(page, 2);

    // Click on the saved pipeline to load it
    await page.getByRole("button", { name: uniqueName }).first().click();
    await waitForSteps(page, 3);
  });

  test("can delete a saved pipeline", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);

    const uniqueName = `Delete Pipeline ${Date.now()}`;

    // Save a pipeline
    await page.getByText("Privacy Clean").click();
    await waitForSteps(page, 2);

    await page.getByRole("button", { name: "Save Pipeline" }).click();
    await page.getByPlaceholder("Pipeline name").fill(uniqueName);
    await page.getByRole("button", { name: "Save", exact: true }).click();
    await expect(page.getByText(uniqueName).first()).toBeVisible({
      timeout: 5_000,
    });

    // Hover to reveal delete, then click
    const pipelineEntry = page.locator(".group").filter({ hasText: uniqueName }).first();
    await pipelineEntry.hover();
    await pipelineEntry
      .locator("button")
      .filter({ has: page.locator("svg") })
      .last()
      .click();

    await expect(pipelineEntry).not.toBeVisible({ timeout: 5_000 });
  });

  // ─── Sidebar ──────────────────────────────────────────────────────────

  test("sidebar Templates section is visible", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await expect(page.getByRole("heading", { name: "Templates" })).toBeVisible();
  });

  test("sidebar shows Saved Automations when pipelines exist", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);
    await page.getByText("Privacy Clean").click();
    await waitForSteps(page, 2);

    const uniqueName = `Sidebar Pipeline ${Date.now()}`;
    await page.getByRole("button", { name: "Save Pipeline" }).click();
    await page.getByPlaceholder("Pipeline name").fill(uniqueName);
    await page.getByRole("button", { name: "Save", exact: true }).click();

    await expect(page.getByText("Saved Automations")).toBeVisible({
      timeout: 5_000,
    });
  });
});