kochwas/tests/e2e/remote/comments.spec.ts

import { test, expect } from '@playwright/test';
import { setActiveProfile, HENDRIK_ID } from './fixtures/profile';
import { cleanupE2EComments, deleteComment } from './fixtures/api-cleanup';

const RECIPE_ID = 66;

test.describe('Kommentare', () => {
  test.beforeEach(async ({ page, request }) => {
    await setActiveProfile(page, HENDRIK_ID);
    // Stray E2E-Kommentare aus abgebrochenen Runs wegraeumen.
    await cleanupE2EComments(request, RECIPE_ID, HENDRIK_ID);
  });

  test.afterEach(async ({ request }) => {
    await cleanupE2EComments(request, RECIPE_ID, HENDRIK_ID);
  });

  test('Kommentar erstellen, Delete-Button erscheint, Loeschen via UI', async ({
    page
  }) => {
    const unique = `E2E ${Date.now()}`;
    await page.goto(`/recipes/${RECIPE_ID}`);

    await page.getByRole('textbox').filter({ hasText: '' }).last().fill(unique);
    await page.getByRole('button', { name: 'Kommentar speichern' }).click();

    // Neuer Kommentar sichtbar
    await expect(page.getByText(unique)).toBeVisible({ timeout: 5000 });

    // Delete-Button NUR beim eigenen Kommentar
    const delBtn = page.getByRole('button', { name: 'Kommentar löschen' });
    await expect(delBtn).toBeVisible();

    await delBtn.click();
    // ConfirmDialog "Kommentar loeschen?" mit Loeschen-Button.
    // Es gibt mehrere "Löschen"-Buttons auf der Seite (Rezept-Delete,
    // Kommentar-Trash, Dialog-Bestaetigung) — deshalb Locator auf den
    // Dialog einschraenken.
    const dialog = page.getByRole('dialog', { name: /Kommentar löschen/i });
    await expect(dialog).toBeVisible();
    await dialog.getByRole('button', { name: 'Löschen' }).click();

    await expect(page.getByText(unique)).not.toBeVisible({ timeout: 5000 });
  });

  test('Fremder Kommentar zeigt KEINEN Delete-Button fuers aktuelle Profil', async ({
    page,
    request
  }) => {
    // Wir legen den Kommentar fuer ein anderes Profil (Leana, id=3) per API an.
    const text = `E2E fremd ${Date.now()}`;
    const res = await request.post(`/api/recipes/${RECIPE_ID}/comments`, {
      data: { profile_id: 3, text }
    });
    expect(res.status()).toBe(201);
    const { id } = (await res.json()) as { id: number };

    try {
      await page.goto(`/recipes/${RECIPE_ID}`);
      const item = page
        .locator('.comments li')
        .filter({ hasText: text });
      await expect(item).toBeVisible();
      await expect(
        item.getByRole('button', { name: 'Kommentar löschen' })
      ).toHaveCount(0);
    } finally {
      await deleteComment(request, RECIPE_ID, id);
    }
  });
});