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

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

import { contextForUser } from './helpers';

/**
 * Label UI pack (issue #44). Runs against the local dev stack (api + web).
 * Selectors are language-independent (CSS classes + label names) because the
 * UI language follows the signed-in user's profile locale, not the browser —
 * so text-based selectors would be locale-dependent. Creates uniquely-named
 * labels/pages per test and removes the labels via the api afterwards so the
 * shared fixture pond does not accumulate them.
 */
const BASE_URL = process.env.E2E_BASE_URL ?? 'http://localhost:5173';

type Ctx = Awaited<ReturnType<typeof contextForUser>>;

async function personalPond(context: Ctx): Promise<{ id: string; slug: string }> {
  const ponds = await context.request.get('/api/v1/ponds');
  const pond = (await ponds.json()).find((p: { type: string }) => p.type === 'personal');
  return { id: pond.id, slug: pond.slug };
}

async function createPage(
  context: Ctx,
  pondId: string,
  title: string,
): Promise<{ id: string; slug: string }> {
  const created = await context.request.post(`/api/v1/ponds/${pondId}/pages`, { data: { title } });
  return created.json();
}

async function createLabel(
  context: Ctx,
  pondId: string,
  name: string,
  parentId?: string,
): Promise<{ id: string }> {
  const created = await context.request.post(`/api/v1/ponds/${pondId}/labels`, {
    data: { name, ...(parentId ? { parentId } : {}) },
  });
  return created.json();
}

test('label lifecycle works from the pond settings UI', async ({ browser }) => {
  const context = await contextForUser(browser, BASE_URL, 'fixture-user');
  const pond = await personalPond(context);
  const ts = Date.now();
  const root = `Alpha ${ts}`;
  const renamed = `Alpha2 ${ts}`;
  const child = `Sub ${ts}`;

  const page = await context.newPage();
  // Delete confirmations are window.confirm dialogs — accept them.
  page.on('dialog', (dialog) => void dialog.accept());
  await page.goto(`/p/${pond.slug}/settings`);

  // Create a root label using only the keyboard (type + Enter submits the form).
  const newInput = page.locator('.label-manager__new-root input');
  await newInput.fill(root);
  await newInput.press('Enter');
  await expect(page.locator('.label-node__name', { hasText: root })).toBeVisible();

  // Locate a row by its name span — NOT getByText, which would also match the
  // move-dropdown <option>s that list every label's name in other rows.
  const rowByName = (name: string) =>
    page.locator('.label-node', { has: page.locator('.label-node__name', { hasText: name }) });

  // Add a sub-label under it.
  await rowByName(root).locator('.label-node__add-child').click();
  const childForm = page.locator('.label-tree__child-form');
  await childForm.locator('input').fill(child);
  await childForm.locator('button[type="submit"]').click();
  await expect(page.locator('.label-node__name', { hasText: child })).toBeVisible();

  // Rename the root label. Entering rename mode replaces the name span with an
  // input, so the row can no longer be found by name — grab the sole open
  // rename input globally.
  await rowByName(root).locator('.label-node__rename').click();
  const nameInput = page.locator('.label-node__name-input');
  await nameInput.fill(renamed);
  await nameInput.press('Enter');
  await expect(page.locator('.label-node__name', { hasText: renamed })).toBeVisible();

  // Delete the child, then the root — both disappear from the tree.
  await rowByName(child).locator('.label-node__delete').click();
  await expect(page.locator('.label-node__name', { hasText: child })).toHaveCount(0);

  await rowByName(renamed).locator('.label-node__delete').click();
  await expect(page.locator('.label-node__name', { hasText: renamed })).toHaveCount(0);

  await context.close();
});

test('page picker assigns a label and the sidebar filter includes descendants', async ({
  browser,
}) => {
  const context = await contextForUser(browser, BASE_URL, 'fixture-user');
  const pond = await personalPond(context);
  const ts = Date.now();

  // A parent label with one child, set up via the api for speed.
  const parent = await createLabel(context, pond.id, `Cat ${ts}`);
  await createLabel(context, pond.id, `Sub ${ts}`, parent.id);
  const tagged = await createPage(context, pond.id, `Tagged ${ts}`);
  await createPage(context, pond.id, `Untagged ${ts}`);

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

  // Open the label picker and assign the child label. The checkbox is
  // controlled and only flips after the save round-trip, so click (don't
  // .check(), which asserts the state changed synchronously).
  await page.locator('.editor-page__labels-toggle').click();
  const subOption = page
    .locator('.label-picker__option', { hasText: `Sub ${ts}` })
    .getByRole('checkbox');
  await subOption.click();
  await expect(subOption).toBeChecked();

  // The sidebar chip for the tagged page appears without a reload.
  const taggedEntry = page.locator('.sidebar__pages li', { hasText: `Tagged ${ts}` });
  await expect(taggedEntry.locator('.label-chip', { hasText: `Sub ${ts}` })).toBeVisible();

  // Filter by the PARENT label: the page tagged with the child must still match.
  await page.locator('.sidebar__filter > summary').click();
  await page
    .locator('.sidebar__filter-option', { hasText: `Cat ${ts}` })
    .getByRole('checkbox')
    .check();
  await expect(page.locator('.sidebar__page', { hasText: `Tagged ${ts}` })).toBeVisible();
  await expect(page.locator('.sidebar__page', { hasText: `Untagged ${ts}` })).toHaveCount(0);

  // Clearing the filter brings the untagged page back.
  await page.locator('.sidebar__filter-clear').click();
  await expect(page.locator('.sidebar__page', { hasText: `Untagged ${ts}` })).toBeVisible();

  await context.request.delete(`/api/v1/labels/${parent.id}?force=true`); // cascades to the child
  await context.close();
});