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

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

import { contextForUser } from './helpers';

/**
 * Page trash pack (issue #31). Runs against the local dev stack (api +
 * web); no Mailpit needed. The fixture pond accumulates pages across many
 * e2e runs, so trash-list assertions always scope to this test's own
 * unique title rather than matching by loose/shared text.
 */
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 };
}

function acceptDialogs(page: Page): void {
  page.on('dialog', (dialog) => void dialog.accept());
}

/** The trash list row for an exact page title, scoping restore/purge clicks to it. */
function trashItem(page: Page, title: string) {
  return page.locator('.trash-page__item').filter({ hasText: title });
}

test('deleting a page hides it from the sidebar and shows a trash hint on direct URL', async ({
  browser,
}) => {
  const context = await contextForUser(browser, BASE_URL, 'fixture-user');
  const { pondSlug, pageSlug } = await createPage(context, `E2E Trash Delete ${Date.now()}`);
  const page = await context.newPage();
  acceptDialogs(page);

  await page.goto(`/p/${pondSlug}/${pageSlug}`);
  await page.getByRole('button', { name: /edit|bearbeiten/i }).click();
  // Delete sits behind the TopBar overflow menu since #101.
  await page.getByRole('button', { name: /more actions|weitere aktionen/i }).click();
  await page.getByRole('menuitem', { name: /move to trash|papierkorb verschieben/i }).click();

  // Deleting navigates away; going back to the same URL now 404s with a hint.
  await page.goto(`/p/${pondSlug}/${pageSlug}`);
  await expect(page.getByText(/moved to the trash|papierkorb verschoben/i)).toBeVisible();
  await expect(
    page.getByRole('link', { name: /view in trash|im papierkorb ansehen/i }),
  ).toBeVisible();

  await context.close();
});

test('restoring a page from the trash brings it back', async ({ browser }) => {
  const context = await contextForUser(browser, BASE_URL, 'fixture-user');
  const title = `E2E Trash Restore ${Date.now()}`;
  const { pondSlug, pageSlug } = await createPage(context, title);
  const page = await context.newPage();
  acceptDialogs(page);

  await page.goto(`/p/${pondSlug}/${pageSlug}`);
  await page.getByRole('button', { name: /edit|bearbeiten/i }).click();
  // Delete sits behind the TopBar overflow menu since #101.
  await page.getByRole('button', { name: /more actions|weitere aktionen/i }).click();
  await page.getByRole('menuitem', { name: /move to trash|papierkorb verschieben/i }).click();

  await page.goto(`/p/${pondSlug}/trash`);
  const item = trashItem(page, title);
  await expect(item).toBeVisible();
  await item.getByRole('button', { name: /restore|wiederherstellen/i }).click();
  await expect(item).toHaveCount(0);

  await page.goto(`/p/${pondSlug}/${pageSlug}`);
  await expect(page.locator('.editor-page__title')).toHaveValue(title);

  await context.close();
});

test('multi-select: bulk restore, select all, and bulk purge (#128)', async ({ browser }) => {
  const context = await contextForUser(browser, BASE_URL, 'fixture-user');
  const stamp = Date.now();
  const titles = [0, 1, 2].map((i) => `E2E Trash Bulk ${stamp} ${i}`);

  // Provision three pages and trash them via the API.
  const ponds = await context.request.get('/api/v1/ponds');
  const pond = (await ponds.json()).find((p: { type: string }) => p.type === 'personal');
  for (const title of titles) {
    const created = await context.request.post(`/api/v1/ponds/${pond.id}/pages`, {
      data: { title },
    });
    const { id } = (await created.json()) as { id: string };
    await context.request.delete(`/api/v1/pages/${id}`);
  }

  const page = await context.newPage();
  acceptDialogs(page);
  await page.goto(`/p/${pond.slug}/trash`);

  // Nothing selected → both bulk actions are disabled.
  const restoreSelected = page.locator('.trash-page__restore-selected');
  const purgeSelected = page.locator('.trash-page__purge-selected');
  await expect(restoreSelected).toBeDisabled();
  await expect(purgeSelected).toBeDisabled();

  // Check two of the three rows and restore them with one click.
  await trashItem(page, titles[0]!).getByRole('checkbox').check();
  await trashItem(page, titles[1]!).getByRole('checkbox').check();
  await expect(restoreSelected).toBeEnabled();
  await restoreSelected.click();
  await expect(trashItem(page, titles[0]!)).toHaveCount(0);
  await expect(trashItem(page, titles[1]!)).toHaveCount(0);
  await expect(trashItem(page, titles[2]!)).toBeVisible();

  // Both restored pages are back in the pages list.
  for (const title of titles.slice(0, 2)) {
    const res = await context.request.get(`/api/v1/ponds/${pond.id}/pages`);
    const pages = (await res.json()) as { title: string }[];
    expect(pages.some((p) => p.title === title)).toBe(true);
  }

  // "Select all" marks every remaining entry; bulk purge (confirm accepted)
  // empties the trash — including this test's third page.
  await page.locator('.trash-page__select-all').getByRole('checkbox').check();
  await expect(purgeSelected).toBeEnabled();
  await purgeSelected.click();
  await expect(trashItem(page, titles[2]!)).toHaveCount(0);
  await expect(page.locator('.trash-page__item')).toHaveCount(0);

  await context.close();
});

test('purging a page from the trash removes it for good', async ({ browser }) => {
  const context = await contextForUser(browser, BASE_URL, 'fixture-user');
  const title = `E2E Trash Purge ${Date.now()}`;
  const { pondSlug, pageSlug } = await createPage(context, title);
  const page = await context.newPage();
  acceptDialogs(page);

  await page.goto(`/p/${pondSlug}/${pageSlug}`);
  await page.getByRole('button', { name: /edit|bearbeiten/i }).click();
  // Delete sits behind the TopBar overflow menu since #101.
  await page.getByRole('button', { name: /more actions|weitere aktionen/i }).click();
  await page.getByRole('menuitem', { name: /move to trash|papierkorb verschieben/i }).click();

  await page.goto(`/p/${pondSlug}/trash`);
  const item = trashItem(page, title);
  await expect(item).toBeVisible();
  await item.getByRole('button', { name: /delete forever|endgültig löschen/i }).click();
  await expect(item).toHaveCount(0);

  await context.close();
});