backend/e2e/editor-basics.test.ts

/**
 * E2E: Editor basics.
 *
 * Validates: app loads, editor is interactive, content is persisted via Hocuspocus.
 */
import { test, expect } from "./fixtures.js";

test.describe("Editor basics", () => {
  test("app loads with editor toolbar", async ({ appPage }) => {
    await expect(appPage.getByRole("button", { name: "Undo" })).toBeVisible();
    await expect(appPage.getByRole("button", { name: "Redo" })).toBeVisible();
    await expect(appPage.getByRole("button", { name: "AI Assistant" })).toBeVisible();
    await expect(appPage.getByRole("button", { name: "Article settings" })).toBeVisible();
    await expect(appPage.getByRole("button", { name: "Publish article" })).toBeVisible();
  });

  test("title field is editable", async ({ appPage }) => {
    const titleInput = appPage.getByPlaceholder("Article title");
    await titleInput.click();
    await titleInput.fill("My Test Article");
    await expect(titleInput).toHaveValue("My Test Article");
  });

  test("title persists across reload via Hocuspocus", async ({ appPage }) => {
    const titleInput = appPage.getByPlaceholder("Article title");
    await titleInput.click();
    await titleInput.pressSequentially("Persistent Title", { delay: 20 });
    await expect(titleInput).toHaveValue("Persistent Title");

    // Blur to trigger commit() -> Y.Map update -> Hocuspocus sync
    await appPage.click("body");
    await appPage.waitForTimeout(2_000);

    await appPage.reload();
    await appPage.waitForSelector("[aria-label='Undo']", { timeout: 15_000 });

    const reloadedTitle = appPage.getByPlaceholder("Article title");
    await expect(reloadedTitle).toHaveValue("Persistent Title", { timeout: 10_000 });
  });

  test("settings drawer opens and shows template selector", async ({ appPage }) => {
    await appPage.click("[aria-label='Article settings']");
    // The drawer header "ARTICLE SETTINGS" is visible text
    await expect(appPage.locator("text=ARTICLE SETTINGS")).toBeVisible({ timeout: 3_000 });
    // Template select has the correct default value
    const templateSelect = appPage.locator("select").first();
    await expect(templateSelect).toHaveValue("article");
  });

  test("chat panel opens and closes", async ({ appPage }) => {
    // Open
    await appPage.click("[aria-label='AI Assistant']");
    await expect(appPage.getByPlaceholder("Ask anything...")).toBeVisible({ timeout: 3_000 });

    // Close
    await appPage.click("[aria-label='Close chat']");
    await expect(appPage.getByPlaceholder("Ask anything...")).not.toBeVisible({ timeout: 3_000 });
  });
});