veza/tests/e2e/04-tracks.spec.ts

import { test, expect } from '@chromatic-com/playwright';
import { loginViaAPI, CONFIG, navigateTo, navigateToPageWithTracks, assertNoDebugText, collectNetworkErrors } from './helpers';

// BUG APP: Le feed crashe avec "Cannot convert object to primitive value" dans FeedPage.
// Les tracks existent en DB (22 via l'API) mais ne s'affichent sur aucune page (/feed, /library, /discover).
// TODO: Corriger le bug dans apps/web/src/features/feed/pages/FeedPage.tsx qui empêche le rendu des TrackCards.
test.describe('TRACKS — Affichage et navigation', () => {
  test.beforeEach(async ({ page }) => {
    await loginViaAPI(page, CONFIG.users.listener.email, CONFIG.users.listener.password);
  });

  test('01. Une page affiche des tracks @critical', async ({ page }) => {
    const hasTracks = await navigateToPageWithTracks(page);

    const trackItems = page.locator('[role="article"]');
    const count = await trackItems.count();
    expect(count).toBeGreaterThan(0);
  });

  test('02. Les track cards affichent titre + artiste + artwork', async ({ page }) => {
    const hasTracks = await navigateToPageWithTracks(page);

    // First track card: role="article" aria-label="Track: {title}"
    const firstTrack = page.locator('[role="article"]').first();

    // Title: h3 element
    const title = firstTrack.locator('h3');
    await expect(title).toBeVisible();
    const titleText = await title.textContent() || '';
    expect(titleText.trim().length).toBeGreaterThan(0);
    expect(titleText).not.toContain('undefined');
    expect(titleText).not.toContain('[object Object]');

    // Artist: p element with text-muted-foreground class
    const artist = firstTrack.locator('p.text-muted-foreground').first();
    const artistVisible = await artist.isVisible().catch(() => false);
    if (artistVisible) {
      const artistText = await artist.textContent() || '';
      expect(artistText.trim().length).toBeGreaterThan(0);
    }

    // Artwork: img inside .aspect-square container
    const img = firstTrack.locator('.aspect-square img').first();
    const imgVisible = await img.isVisible().catch(() => false);
    if (imgVisible) {
      const src = await img.getAttribute('src');
      expect(src).toBeTruthy();
      expect(src).not.toContain('undefined');
    }
  });

  test('03. Cliquer sur un track ouvre sa page detail @critical', async ({ page }) => {
    const hasTracks = await navigateToPageWithTracks(page);

    // TrackCard is a button with aria-label="Piste: {title}"
    const trackButton = page.getByRole('button', { name: /^piste:/i }).first();
    const hasTrack = await trackButton.isVisible({ timeout: 5_000 }).catch(() => false);
    if (!hasTrack) {
      test.skip(true, 'No track button found on page');
      return;
    }

    // Click the title/info area of the card (bottom section) to avoid the play button overlay
    const trackTitle = trackButton.locator('h3').first();
    await trackTitle.click({ force: true });

    // Wait for navigation to track detail page
    await page.waitForURL(/\/tracks\//, { timeout: 10_000 });

    await assertNoDebugText(page);

    const body = await page.textContent('body') || '';
    expect(body.length).toBeGreaterThan(200);
  });

  test('04. Page detail d\'un track — elements essentiels presents', async ({ page }) => {
    const hasTracks = await navigateToPageWithTracks(page);

    const trackButton = page.getByRole('button', { name: /^piste:/i }).first();
    const hasTrack = await trackButton.isVisible({ timeout: 5_000 }).catch(() => false);
    if (!hasTrack) {
      test.skip(true, 'No track button found on page');
      return;
    }

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

    // Verify key elements on track detail page
    const heading = page.getByRole('heading').first();
    await expect(heading).toBeVisible();

    const playButton = page.getByRole('button', { name: /lire|play|lecture/i }).first();
    await expect(playButton).toBeVisible();

    const artwork = page.locator('img').first();
    await expect(artwork).toBeVisible();
  });

  test('05. Les commentaires se chargent sur la page track', async ({ page }) => {
    const hasTracks = await navigateToPageWithTracks(page);

    const trackButton = page.getByRole('button', { name: /^piste:/i }).first();
    const hasTrack = await trackButton.isVisible({ timeout: 5_000 }).catch(() => false);
    if (!hasTrack) {
      test.skip(true, 'No track button found on page');
      return;
    }

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

    // Comment input: textarea or input with placeholder containing "comment"
    const commentInput = page.getByPlaceholder(/commentaire|comment/i).first()
      .or(page.locator('textarea').first());

    await expect(commentInput).toBeVisible();
  });
});

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

  test('06. Like un track (toggle)', async ({ page }) => {
    const hasTracks = await navigateToPageWithTracks(page);

    // Navigate to track detail page where the like button is always visible (no hover overlay)
    const trackButton = page.locator('[role="article"]').first().locator('h3').first();
    await trackButton.click({ force: true });
    await page.waitForURL(/\/tracks\//, { timeout: 10_000 });

    // On the track detail page, find the like button
    const likeBtn = page.getByRole('button', { name: /ajouter aux favoris|retirer des favoris/i }).first();
    await expect(likeBtn).toBeVisible({ timeout: 5_000 });

    // Capture initial aria-pressed state
    const initialPressed = await likeBtn.getAttribute('aria-pressed');

    await likeBtn.click();

    // Wait for the like API call to complete and state to update
    await page.waitForTimeout(2_000);

    // After clicking, aria-pressed should toggle
    const newPressed = await likeBtn.getAttribute('aria-pressed');
    expect(initialPressed).not.toBeNull();
    expect(newPressed).not.toBeNull();
    expect(newPressed).not.toBe(initialPressed);
  });

  test('07. Ajouter un commentaire sur un track', async ({ page }) => {
    const hasTracks = await navigateToPageWithTracks(page);

    // Navigate to track detail page via TrackCard button
    const trackButton = page.getByRole('button', { name: /^piste:/i }).first();
    const hasTrack = await trackButton.isVisible({ timeout: 5_000 }).catch(() => false);
    if (!hasTrack) {
      test.skip(true, 'No track button found on page');
      return;
    }

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

    const commentInput = page.getByPlaceholder(/commentaire|comment/i).first()
      .or(page.locator('textarea').first());

    const commentVisible = await commentInput.isVisible().catch(() => false);
    if (!commentVisible) {
      test.skip(true, 'Comment input not visible on track page');
      return;
    }

    const testComment = `Test E2E ${Date.now()}`;
    await commentInput.fill(testComment);

    // Submit
    const submitBtn = page.getByRole('button', { name: /publier|envoyer|submit|post/i }).first();
    const submitVisible = await submitBtn.isVisible().catch(() => false);
    if (!submitVisible) {
      test.skip(true, 'Comment submit button not visible');
      return;
    }

    await submitBtn.click();
    await page.waitForTimeout(2_000);

    const commentPosted = page.getByText(testComment);
    await expect(commentPosted).toBeVisible();
  });

  test('08. Repost un track', async ({ page }) => {
    const hasTracks = await navigateToPageWithTracks(page);

    const repostBtn = page.getByRole('button', { name: /repost|repartag/i }).first();
    await expect(repostBtn).toBeVisible();
  });
});

test.describe('TRACKS — Upload (createur)', () => {
  test.beforeEach(async ({ page }) => {
    await loginViaAPI(page, CONFIG.users.creator.email, CONFIG.users.creator.password);
  });

  test('09. Upload accessible pour un createur via la bibliotheque @critical', async ({ page }) => {
    // v1.0.7-rc1: unskipped after root-cause fix (ticket v107-e2e-04
    // closed). The library upload trigger is a Plus-icon button
    // labelled t('library.new') — the old regex `/upload|importer|
    // ajouter/i` never matched. Now targeted by testid, stable
    // against future i18n / copy changes.
    await navigateTo(page, '/library');

    const body = await page.textContent('body') || '';
    // No 403 or redirect
    expect(body).not.toMatch(/403|forbidden|acces refuse|access denied/i);

    const uploadTrigger = page.getByTestId('library-upload-cta');

    await expect(uploadTrigger).toBeVisible();

    await uploadTrigger.click();
    await page.waitForTimeout(500);

    // After clicking, a modal should appear with file input or dropzone.
    // The modal renders BOTH a hidden file input AND the "Drag and drop"
    // text, so the union locator resolves to 2 elements and trips strict
    // mode. Target just the dropzone text — that's the user-facing
    // affordance; the file input is an implementation detail.
    const uploadZone = page.getByText(/glisser|drag|drop|deposer/i).first();
    await expect(uploadZone).toBeVisible();
  });

  test('10. Formulaire d\'upload — champs de metadonnees presents', async ({ page }) => {
    await navigateTo(page, '/library');

    // Open upload modal
    const uploadTrigger = page.getByRole('button', { name: /upload|importer|ajouter/i }).first()
      .or(page.getByText(/upload|importer/i).first());

    const triggerVisible = await uploadTrigger.isVisible().catch(() => false);
    if (!triggerVisible) {
      test.skip(true, 'Upload trigger not found in library page');
      return;
    }

    await uploadTrigger.click();
    await page.waitForTimeout(500);

    const fields = {
      'Title': /titre|title/i,
      'Genre': /genre/i,
      'Tags': /tags/i,
      'Description': /description/i,
    };

    for (const [name, pattern] of Object.entries(fields)) {
      const field = page.getByLabel(pattern).or(page.locator(`[name*="${name.toLowerCase()}"]`)).first();
      await expect(field).toBeVisible();
    }
  });

  test('11. Validation — soumettre sans fichier affiche une erreur', async ({ page }) => {
    await navigateTo(page, '/library');

    // Open upload modal
    const uploadTrigger = page.getByRole('button', { name: /upload|importer|ajouter/i }).first()
      .or(page.getByText(/upload|importer/i).first());

    const triggerVisible = await uploadTrigger.isVisible().catch(() => false);
    if (!triggerVisible) {
      test.skip(true, 'Upload trigger not found in library page');
      return;
    }

    await uploadTrigger.click();
    await page.waitForTimeout(500);

    const submitBtn = page.getByRole('button', { name: /upload|publier|submit|envoyer/i });
    const submitVisible = await submitBtn.isVisible().catch(() => false);
    if (!submitVisible) {
      test.skip(true, 'Submit button not visible in upload modal');
      return;
    }

    await submitBtn.click();

    const error = page.getByText(/fichier.*requis|file.*required|selectionner|select.*file/i);
    await expect(error).toBeVisible({ timeout: 3_000 });
  });
});

test.describe('TRACKS — Waveform et visualisation', () => {
  test('12. La waveform s\'affiche dans le player bar', async ({ page }) => {
    await loginViaAPI(page, CONFIG.users.listener.email, CONFIG.users.listener.password);

    const hasTracks = await navigateToPageWithTracks(page);

    // Play a track to activate the player bar
    const trackCard = page.locator('[role="article"]').first();

    await trackCard.hover();
    await page.waitForTimeout(300);

    const playBtn = page.getByRole('button', { name: /^Lire /i }).first();
    const playVisible = await playBtn.isVisible().catch(() => false);
    if (!playVisible) {
      test.skip(true, 'Play button not visible after hovering track card');
      return;
    }

    await playBtn.click();
    await page.waitForTimeout(1_000);

    // The PlayerBarProgress contains waveform bars (divs), not canvas/svg
    // It is a role="slider" with aria-label="Progression"
    const progressBar = page.locator('[role="slider"][aria-label="Progression"]');
    await expect(progressBar).toBeVisible();

    const box = await progressBar.boundingBox();
    expect(box).not.toBeNull();
    expect(box!.width).toBeGreaterThan(100);

    // The waveform bars are div elements inside the progress bar
    const waveformBars = progressBar.locator('div.rounded-sm');
    const barCount = await waveformBars.count();
    // PlayerBarProgress generates 48 waveform bars
    expect(barCount).toBeGreaterThanOrEqual(10);
  });
});