dorfteich/apps/web/e2e/editor.spec.ts

import { expect, test } from '@playwright/test';

import { contextForUser } from './helpers';

/**
 * TipTap editor pack (issue #25). Runs against the local dev stack (api +
 * web); no Mailpit needed. Creates its own page per test via the api (the
 * sidebar/"new page" flow is issue #26) and navigates straight to
 * `/p/:pondSlug/:pageSlug`.
 */
const BASE_URL = process.env.E2E_BASE_URL ?? 'http://localhost:5173';

async function createPage(
  context: Awaited<ReturnType<typeof contextForUser>>,
  title: string,
): Promise<{ pondSlug: string; pageSlug: string }> {
  const ponds = await context.request.get('/api/v1/ponds');
  const pond = (await ponds.json()).find((p: { type: string }) => p.type === 'personal');
  const created = await context.request.post(`/api/v1/ponds/${pond.id}/pages`, {
    data: { title },
  });
  const page = await created.json();
  return { pondSlug: pond.slug, pageSlug: page.slug };
}

test('typing persists across reload and undo/redo work', async ({ browser }) => {
  const context = await contextForUser(browser, BASE_URL, 'fixture-user');
  const { pondSlug, pageSlug } = await createPage(context, `E2E Editor ${Date.now()}`);
  const page = await context.newPage();

  await page.goto(`/p/${pondSlug}/${pageSlug}`);
  await page.getByRole('button', { name: /edit|bearbeiten/i }).click();

  const content = page.locator('.ProseMirror');
  await expect(content).toHaveAttribute('contenteditable', 'true');
  await content.click();
  await page.keyboard.type('Hello editor');
  await expect(page.getByRole('status')).toHaveText(/saved|gespeichert/i, { timeout: 10000 });

  await page.reload();
  await page.getByRole('button', { name: /edit|bearbeiten/i }).click();
  await expect(content).toHaveAttribute('contenteditable', 'true');
  await expect(content).toContainText('Hello editor');

  await content.click();
  await page.keyboard.type(' more');
  await expect(content).toContainText('Hello editor more');
  await page.keyboard.press('ControlOrMeta+z');
  await expect(content).toContainText('Hello editor');
  await expect(content).not.toContainText('Hello editor more');
  await page.keyboard.press('ControlOrMeta+y');
  await expect(content).toContainText('Hello editor more');

  await context.close();
});

test('edit mode hides the sidebar; leaving edit mode restores it', async ({ browser }) => {
  const context = await contextForUser(browser, BASE_URL, 'fixture-user');
  const { pondSlug, pageSlug } = await createPage(context, `E2E Sidebar ${Date.now()}`);
  const page = await context.newPage();

  await page.goto(`/p/${pondSlug}/${pageSlug}`);
  // CSS selector, not getByRole: aria-hidden removes the element from the
  // accessibility tree, which would make a role-based locator "disappear"
  // exactly when we need to assert that attribute.
  const sidebar = page.locator('nav.sidebar');
  await expect(sidebar).toHaveAttribute('aria-hidden', 'false');

  await page.getByRole('button', { name: /edit|bearbeiten/i }).click();
  await expect(sidebar).toHaveAttribute('aria-hidden', 'true');

  await page.getByRole('button', { name: /read|lesen/i }).click();
  await expect(sidebar).toHaveAttribute('aria-hidden', 'false');

  await context.close();
});

test('a save failure shows a truthful error and retries once online again', async ({ browser }) => {
  const context = await contextForUser(browser, BASE_URL, 'fixture-user');
  const { pondSlug, pageSlug } = await createPage(context, `E2E Offline ${Date.now()}`);
  const page = await context.newPage();

  await page.goto(`/p/${pondSlug}/${pageSlug}`);
  await page.getByRole('button', { name: /edit|bearbeiten/i }).click();
  await page.locator('.ProseMirror').click();

  await context.setOffline(true);
  await page.keyboard.type('offline text');
  await expect(page.getByRole('status')).toHaveText(/failed|retrying|fehlgeschlagen/i, {
    timeout: 10000,
  });

  await context.setOffline(false);
  await expect(page.getByRole('status')).toHaveText(/saved|gespeichert/i, { timeout: 10000 });

  await context.close();
});