veza/tests/e2e/05-playlists.spec.ts

import { test, expect } from '@playwright/test';
import { loginViaAPI, CONFIG, navigateTo } from './helpers';

test.describe('PLAYLISTS — CRUD', () => {
  test.beforeEach(async ({ page }) => {
    await loginViaAPI(page, CONFIG.users.listener.email, CONFIG.users.listener.password);
  });

  test('01. Page /playlists se charge et affiche la liste @critical', async ({ page }) => {
    await navigateTo(page, '/playlists');

    const body = await page.textContent('body') || '';
    expect(body).not.toMatch(/500|Internal Server Error|crash|TypeError|Unhandled/i);

    // PlaylistCards use role="article" with aria-label="Playlist: {title}"
    const playlistCards = page.locator('[role="article"][aria-label^="Playlist:"]');
    const cardCount = await playlistCards.count();
    console.log(`  Playlist cards trouvés: ${cardCount}`);

    // Bouton créer une playlist
    const createBtn = page.getByRole('button', { name: /créer|create|nouvelle|new/i })
      .or(page.getByRole('link', { name: /créer|create|nouvelle|new/i }));
    const visible = await createBtn.first().isVisible().catch(() => false);
    console.log(`  Bouton créer playlist: ${visible ? '✓' : '✗'}`);
  });

  test('02. Créer une nouvelle playlist @critical', async ({ page }) => {
    await navigateTo(page, '/playlists');

    // Cliquer sur créer — use .or() without .first() to build the union, then take .first()
    const createBtn = page.getByRole('button', { name: /créer|create|nouvelle|new/i })
      .or(page.getByRole('link', { name: /créer|create|nouvelle|new/i }))
      .first();

    if (!(await createBtn.isVisible().catch(() => false))) {
      console.log('  ⚠ Bouton créer non trouvé');
      return;
    }
    await createBtn.click();

    // Wait for dialog/form to appear
    await page.waitForTimeout(500);

    // Remplir le formulaire — try label first, then placeholder
    const nameInput = page.getByLabel(/nom|name|titre|title/i)
      .or(page.getByPlaceholder(/nom|name|titre/i))
      .first();

    if (await nameInput.isVisible().catch(() => false)) {
      const playlistName = `E2E Playlist ${Date.now()}`;
      await nameInput.fill(playlistName);

      // Description si présent
      const descInput = page.getByLabel(/description/i).first();
      if (await descInput.isVisible().catch(() => false)) {
        await descInput.fill('Créée par les tests E2E');
      }

      // Sauvegarder — try dialog-scoped first, then modal, then last visible matching button
      const dialog = page.locator('[role="dialog"], [role="alertdialog"], dialog, [data-state="open"]').first();
      const dialogVisible = await dialog.isVisible().catch(() => false);

      let saved = false;
      if (dialogVisible) {
        const dialogSaveBtn = dialog.getByRole('button', { name: /créer|create|sauvegarder|save|ok/i }).first();
        if (await dialogSaveBtn.isVisible().catch(() => false)) {
          await dialogSaveBtn.click();
          saved = true;
        }
      }

      if (!saved) {
        // Fallback: pick the last matching button (typically the submit one, not the page trigger)
        const allSaveBtns = page.getByRole('button', { name: /créer|create|sauvegarder|save|ok/i });
        const count = await allSaveBtns.count();
        if (count > 0) {
          await allSaveBtns.nth(count - 1).click();
          saved = true;
        }
      }

      await page.waitForTimeout(2_000);

      // Vérifier que la playlist est créée — look for a PlaylistCard with the new title
      const newCard = page.locator(`[role="article"][aria-label="Playlist: ${playlistName}"]`);
      const exists = await newCard.isVisible().catch(() =>
        page.getByText(playlistName).isVisible().catch(() => false)
      );
      console.log(`  Playlist créée et visible: ${exists ? '✓' : '✗'}`);
    }
  });

  test('03. Ouvrir une playlist existante affiche ses tracks', async ({ page }) => {
    await navigateTo(page, '/playlists');

    // PlaylistCard wraps a Link with href="/playlists/{id}"
    const playlistLink = page.locator('a[href*="/playlists/"]').first();
    if (!(await playlistLink.isVisible().catch(() => false))) {
      test.skip(true, 'No existing playlists found — skipping');
      return;
    }

    await playlistLink.click();
    await page.waitForLoadState('networkidle');

    expect(page.url()).toMatch(/\/playlists\//);

    const body = await page.textContent('body') || '';
    expect(body.length).toBeGreaterThan(100);
    expect(body).not.toContain('undefined');
  });

  test('04. Modifier le nom d\'une playlist', async ({ page }) => {
    await navigateTo(page, '/playlists');

    const playlistLink = page.locator('a[href*="/playlists/"]').first();
    if (!(await playlistLink.isVisible().catch(() => false))) {
      test.skip(true, 'No existing playlists found — skipping');
      return;
    }

    await playlistLink.click();
    await page.waitForLoadState('networkidle');

    // Bouton éditer
    const editBtn = page.getByRole('button', { name: /edit|modifier|éditer/i }).first()
      .or(page.locator('[data-action="edit"]').first());

    if (await editBtn.isVisible().catch(() => false)) {
      await editBtn.click();
      console.log('  ✓ Mode édition activé');
    } else {
      console.log('  ⚠ Bouton éditer non trouvé');
    }
  });

  test('05. Supprimer une playlist', async ({ page }) => {
    await navigateTo(page, '/playlists');

    const playlistLink = page.locator('a[href*="/playlists/"]').first();
    if (!(await playlistLink.isVisible().catch(() => false))) {
      test.skip(true, 'No existing playlists found — skipping');
      return;
    }

    await playlistLink.click();
    await page.waitForLoadState('networkidle');

    const deleteBtn = page.getByRole('button', { name: /supprimer|delete|remove/i }).first()
      .or(page.locator('[data-action="delete"]').first());

    const visible = await deleteBtn.isVisible().catch(() => false);
    console.log(`  Bouton supprimer: ${visible ? '✓ visible' : '✗ absent'}`);
  });
});

test.describe('PLAYLISTS — Collaboration', () => {
  test.beforeEach(async ({ page }) => {
    await loginViaAPI(page, CONFIG.users.listener.email, CONFIG.users.listener.password);
  });

  test('06. Option d\'invitation de collaborateurs', async ({ page }) => {
    await navigateTo(page, '/playlists');

    // PlaylistCard uses role="article" with aria-label="Playlist: {title}" and Link href="/playlists/{id}"
    const playlistLink = page.locator('a[href*="/playlists/"]').first();
    if (!(await playlistLink.isVisible().catch(() => false))) {
      test.skip(true, 'No existing playlists found — skipping');
      return;
    }

    await playlistLink.click();
    await page.waitForLoadState('networkidle');

    // Chercher option de collaboration / partage
    const collabBtn = page.getByRole('button', { name: /collabor|inviter|invite|partager|share/i }).first();
    const visible = await collabBtn.isVisible().catch(() => false);
    console.log(`  Bouton collaboration/partage: ${visible ? '✓' : '✗'}`);
  });

  test('07. Export playlist (JSON/CSV/M3U)', async ({ page }) => {
    await navigateTo(page, '/playlists');

    const playlistLink = page.locator('a[href*="/playlists/"]').first();
    if (!(await playlistLink.isVisible().catch(() => false))) {
      test.skip(true, 'No existing playlists found — skipping');
      return;
    }

    await playlistLink.click();
    await page.waitForLoadState('networkidle');

    // Menu d'options
    const moreBtn = page.getByRole('button', { name: /more|options|⋯|…|menu/i }).first()
      .or(page.locator('[class*="more-button"], [class*="kebab"]').first());

    if (await moreBtn.isVisible().catch(() => false)) {
      await moreBtn.click();

      const exportOption = page.getByRole('menuitem', { name: /export|télécharger|download/i });
      const visible = await exportOption.isVisible().catch(() => false);
      console.log(`  Option export: ${visible ? '✓' : '✗'}`);
    }
  });
});

test.describe('PLAYLISTS — Drag & Drop', () => {
  test('08. Réordonner les tracks par drag & drop', async ({ page }) => {
    await loginViaAPI(page, CONFIG.users.listener.email, CONFIG.users.listener.password);
    await navigateTo(page, '/playlists');

    const playlistLink = page.locator('a[href*="/playlists/"]').first();
    if (!(await playlistLink.isVisible().catch(() => false))) {
      test.skip(true, 'No existing playlists found — skipping');
      return;
    }

    await playlistLink.click();
    await page.waitForLoadState('networkidle');

    // Vérifier la présence de handles de drag
    const dragHandles = page.locator('[class*="drag"], [data-testid="drag-handle"], [class*="grip"]');
    const count = await dragHandles.count();
    console.log(`  Drag handles trouvés: ${count}`);
  });
});