veza/tests/e2e/06-search-discover.spec.ts

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

/**
 * Helper to find the search input on /search page (NOT the header search).
 * The /search page renders a combobox with aria-label="Search" inside <main>.
 */
async function findSearchInput(page: import('@playwright/test').Page) {
  // Scope to <main> to avoid matching the header search input
  const main = page.locator('main, [role="main"]').first();
  const searchInput = main.locator('input[role="combobox"]').first()
    .or(main.getByPlaceholder(/search for tracks/i).first())
    .or(main.locator('input[type="search"]').first());
  return searchInput;
}

test.describe('SEARCH — Recherche unifiée', () => {
  test.beforeEach(async ({ page }) => {
    await loginViaAPI(page, CONFIG.users.listener.email, CONFIG.users.listener.password);
  });

  test('01. Le champ de recherche est accessible dans le header @critical', async ({ page }) => {
    await navigateTo(page, '/dashboard');

    const headerSearch = page.locator('[data-testid="search-input"]')
      .or(page.locator(SELECTORS.searchInput));
    const headerVisible = await headerSearch.first().isVisible().catch(() => false);

    await navigateTo(page, '/search');
    const pageSearch = await findSearchInput(page);
    const pageSearchVisible = await pageSearch.isVisible().catch(() => false);

    // At least one of the two search inputs should be accessible
    expect(headerVisible || pageSearchVisible).toBeTruthy();
  });

  test('02. Taper une requête affiche des résultats @critical', async ({ page }) => {
    await navigateTo(page, '/search');

    const searchInput = await findSearchInput(page);
    await expect(searchInput).toBeVisible();

    await searchInput.fill('test');
    await page.waitForTimeout(1_500);

    const body = await page.textContent('body') || '';
    const hasResults = body.length > 500;
    const hasNoResults = /no results|aucun résultat|nothing found/i.test(body);

    expect(hasResults || hasNoResults).toBeTruthy();
  });

  test('03. L\'autocomplete fonctionne (suggestions pendant la frappe)', async ({ page }) => {
    await navigateTo(page, '/search');

    const searchInput = await findSearchInput(page);
    await expect(searchInput).toBeVisible();

    await searchInput.fill('tes');
    await page.waitForTimeout(1_000);

    const suggestions = page.locator('[role="listbox"]');
    await expect(suggestions).toBeVisible();
  });

  test('04. Les résultats de recherche sont catégorisés (tabs: All, Tracks, Artists, Playlists)', async ({ page }) => {
    await navigateTo(page, '/search');

    const searchInput = await findSearchInput(page);
    await expect(searchInput).toBeVisible();

    // Use a single character to match many results (tabs only show when results exist)
    await searchInput.fill('a');
    await page.waitForTimeout(2_000);

    // Tabs may show with count suffix e.g. "Tracks (5)"
    await expect(page.getByRole('tab', { name: /all results/i })).toBeVisible();
    await expect(page.getByRole('tab', { name: /^tracks/i })).toBeVisible();
    await expect(page.getByRole('tab', { name: /^artists/i })).toBeVisible();
    await expect(page.getByRole('tab', { name: /^playlists/i })).toBeVisible();
  });

  test('05. Recherche vide ne crash pas', async ({ page }) => {
    await navigateTo(page, '/search');

    const searchInput = await findSearchInput(page);
    await expect(searchInput).toBeVisible();

    await searchInput.fill('');
    await page.waitForTimeout(1_000);

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

  test('05b. Recherche via URL params ?q= fonctionne', async ({ page }) => {
    await navigateTo(page, '/search?q=test');
    await page.waitForTimeout(1_500);

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

test.describe('DISCOVER — Exploration éthique', () => {
  test.beforeEach(async ({ page }) => {
    await loginViaAPI(page, CONFIG.users.listener.email, CONFIG.users.listener.password);
  });

  test('06. Page /discover affiche les genres @critical', async ({ page }) => {
    await navigateTo(page, '/discover');

    const heading = page.getByRole('heading', { name: /découvrir|discover/i });
    await expect(heading.first()).toBeVisible({ timeout: 10_000 });

    const genreButtons = page.locator('button').filter({ has: page.locator('.font-heading.font-bold') });
    let genreCount = await genreButtons.count();

    if (genreCount === 0) {
      const altGenreButtons = page.locator('button').filter({ hasText: /rock|pop|jazz|hip.?hop|electro|classical|r&b|reggae|metal|folk|blues|soul|country|latin/i });
      genreCount = await altGenreButtons.count();
    }
    expect(genreCount).toBeGreaterThan(0);

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

  test('07. Cliquer sur un genre filtre les résultats', async ({ page }) => {
    await navigateTo(page, '/discover');

    const genreButtons = page.locator('button').filter({ has: page.locator('.font-heading.font-bold') });
    await expect(genreButtons.first()).toBeVisible({ timeout: 10_000 });

    await genreButtons.first().click();
    await page.waitForLoadState('networkidle');

    expect(page.url()).toContain('genre=');

    const backBtn = page.getByRole('button', { name: /retour|back/i });
    await expect(backBtn).toBeVisible();

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

  test('08. Playlists éditoriales affichées sur /discover', async ({ page }) => {
    await navigateTo(page, '/discover');

    const editorialHeading = page.getByRole('heading', { name: /playlists éditoriales|editorial playlists/i });
    await expect(editorialHeading).toBeVisible();

    const editorialCards = page.locator('[role="article"][aria-label^="Playlist:"]');
    expect(await editorialCards.count()).toBeGreaterThanOrEqual(0);
  });

  test('09. Pas de sections "trending" ou "for you" (design éthique)', async ({ page }) => {
    await navigateTo(page, '/discover');

    const body = await page.textContent('body') || '';
    expect(body).not.toMatch(/pour vous|for you|recommended|recommandé|trending/i);
  });

  test('10. Pas de métriques de popularité publiques visibles', async ({ page }) => {
    await navigateTo(page, '/discover');

    const publicCounters = page.locator('[class*="play-count"], [class*="like-count"]')
      .filter({ hasText: /\d+\s*(plays?|écoutes?|likes?|vues?)/i });

    expect(await publicCounters.count()).toBe(0);
  });

  test('11. Bouton retour depuis genre revient à la liste des genres', async ({ page }) => {
    await navigateTo(page, '/discover');

    const genreButtons = page.locator('button').filter({ has: page.locator('.font-heading.font-bold') });
    await expect(genreButtons.first()).toBeVisible({ timeout: 10_000 });

    await genreButtons.first().click();
    await page.waitForLoadState('networkidle');

    const backBtn = page.getByRole('button', { name: /retour|back/i });
    await expect(backBtn).toBeVisible();
    await backBtn.click();
    await page.waitForTimeout(500);

    expect(page.url()).not.toContain('genre=');

    const genreHeading = page.getByRole('heading', { name: /par genre|by genre|genres/i });
    await expect(genreHeading).toBeVisible({ timeout: 10_000 });
  });
});