SnapOtter/tests/e2e-editor/editor-history.spec.ts

import { createNewDocument, drawOnCanvas, expect, selectTool, test } from "./helpers";

test.describe("Editor History Panel", () => {
  test.beforeEach(async ({ editorPage: page }) => {
    await createNewDocument(page);
  });

  test("history tab shows action list", async ({ editorPage: page }) => {
    // Switch to history tab
    await page.locator("[data-testid='tab-history']").click();
    await page.waitForTimeout(300);

    // There should be at least one history entry (the initial load)
    const entries = page.locator(".flex-1.overflow-y-auto button");
    const count = await entries.count();
    expect(count).toBeGreaterThanOrEqual(1);
  });

  test("history panel shows undo and redo buttons", async ({ editorPage: page }) => {
    await page.locator("[data-testid='tab-history']").click();
    await page.waitForTimeout(300);

    const undoBtn = page.locator("button[aria-label='Undo']");
    const redoBtn = page.locator("button[aria-label='Redo']");

    await expect(undoBtn).toBeVisible();
    await expect(redoBtn).toBeVisible();
  });

  test("drawing creates a history entry", async ({ editorPage: page }) => {
    // Switch to history tab first to count entries
    await page.locator("[data-testid='tab-history']").click();
    await page.waitForTimeout(300);

    const entriesLocator = page.locator(".flex-1.overflow-y-auto button");
    const countBefore = await entriesLocator.count();

    // Draw something with the brush
    await selectTool(page, "brush");
    await drawOnCanvas(page, 100, 100, 300, 200);
    await page.waitForTimeout(500);

    // Switch back to history tab to see new entry
    await page.locator("[data-testid='tab-history']").click();
    await page.waitForTimeout(300);

    const countAfter = await entriesLocator.count();
    expect(countAfter).toBeGreaterThan(countBefore);
  });

  test("history shows step count", async ({ editorPage: page }) => {
    await page.locator("[data-testid='tab-history']").click();
    await page.waitForTimeout(300);

    // The history panel shows "N / 50" counter
    await expect(page.getByText(/\d+\s*\/\s*50/)).toBeVisible();
  });

  test("undo button is disabled with no history", async ({ editorPage: page }) => {
    await page.locator("[data-testid='tab-history']").click();
    await page.waitForTimeout(300);

    // On a fresh document with no actions, undo should be disabled
    // (the initial Load Image creates one past state, so let's just
    // check the button exists and is a proper control)
    const undoBtn = page.locator("button[aria-label='Undo']");
    await expect(undoBtn).toBeVisible();

    // Redo should be disabled since we haven't undone anything
    const redoBtn = page.locator("button[aria-label='Redo']");
    await expect(redoBtn).toBeVisible();
    // Redo should visually appear disabled (no future states)
    await expect(redoBtn).toHaveCSS("cursor", "not-allowed");
  });
});