gridpilot.gg/tests/e2e/leaderboards/leaderboards-teams.spec.ts

/**
 * BDD E2E Test: Team Rankings Page
 * 
 * Tests the detailed team rankings page that displays:
 * - Comprehensive list of all registered teams
 * - Team search and filtering functionality
 * - Team sorting options (by rating, name, rank, member count, etc.)
 * - Pagination or infinite scroll for large team lists
 * - Team cards with detailed information
 * - Team profile navigation
 * 
 * Focus: Final user outcomes - what the user sees and can verify
 */

import { testWithAuth as test, expect } from '../../shared/auth-fixture';

test.describe('Team Rankings Page', () => {
  test.beforeEach(async ({ authenticatedDriver: page }) => {
    await page.goto('/leaderboards/teams');
    await page.waitForLoadState('networkidle');
    await expect(page.getByRole('heading', { name: 'Team Leaderboard' })).toBeVisible();
  });

  test('User sees a comprehensive list of all teams', async ({ authenticatedDriver: page }) => {
    const teams = page.locator('[data-testid^="standing-team-"]');
    await expect(teams.first()).toBeVisible();
    
    const firstTeam = teams.first();
    await expect(firstTeam.locator('[data-testid="team-name"]')).toBeVisible();
    await expect(firstTeam.locator('[data-testid="team-member-count"]')).toBeVisible();
    
    const firstRow = page.locator('[data-testid="standing-stats"]').first();
    await expect(firstRow.locator('[data-testid="stat-races"]')).toBeVisible();
    await expect(firstRow.locator('[data-testid="stat-rating"]')).toBeVisible();
    await expect(firstRow.locator('[data-testid="stat-wins"]')).toBeVisible();
  });

  test('User can search for teams by name', async ({ authenticatedDriver: page }) => {
    const searchInput = page.getByTestId('leaderboard-search');
    await searchInput.fill('Racing');
    
    const teamNames = page.locator('[data-testid="team-name"]');
    const count = await teamNames.count();
    
    for (let i = 0; i < count; i++) {
      const name = await teamNames.nth(i).textContent();
      expect(name?.toLowerCase()).toContain('racing');
    }
  });

  test('User can filter teams by skill level', async ({ authenticatedDriver: page }) => {
    const skillFilter = page.getByTestId('skill-filter');
    await skillFilter.selectOption('pro');
    await expect(skillFilter).toHaveValue('pro');
  });

  test('User can sort teams by different criteria', async ({ authenticatedDriver: page }) => {
    const sortFilter = page.getByTestId('sort-filter');
    await sortFilter.selectOption('rating');
    await expect(sortFilter).toHaveValue('rating');
  });

  test('User sees pagination controls when there are many teams', async ({ authenticatedDriver: page }) => {
    const count = await page.locator('[data-testid^="standing-team-"]').count();
    if (count >= 20) {
      await expect(page.getByTestId('pagination-controls')).toBeVisible();
    }
  });

  test('User sees empty state when no teams match the search', async ({ authenticatedDriver: page }) => {
    const searchInput = page.getByTestId('leaderboard-search');
    await searchInput.fill('NonExistentTeam123');
    await expect(page.locator('[data-testid^="standing-team-"]')).toHaveCount(0);
    await expect(page.getByTestId('empty-state')).toBeVisible();
  });

  test('User can clear search and filters to see all teams again', async ({ authenticatedDriver: page }) => {
    const searchInput = page.getByTestId('leaderboard-search');
    await searchInput.fill('Racing');
    await searchInput.fill('');
    await expect(page.locator('[data-testid^="standing-team-"]').first()).toBeVisible();
  });

  test('User sees team count information', async ({ authenticatedDriver: page }) => {
    await expect(page.getByTestId('team-count')).toBeVisible();
    await expect(page.getByTestId('team-count')).toContainText(/Showing \d+ teams/);
  });

  test('User sees team cards with consistent information', async ({ authenticatedDriver: page }) => {
    const teams = page.locator('[data-testid^="standing-team-"]');
    const count = await teams.count();
    for (let i = 0; i < Math.min(count, 5); i++) {
      const team = teams.nth(i);
      await expect(team.locator('[data-testid="team-name"]')).toBeVisible();
      await expect(team.locator('[data-testid="team-member-count"]')).toBeVisible();
      const row = page.locator('[data-testid="standing-stats"]').nth(i);
      await expect(row.locator('[data-testid="stat-races"]')).toBeVisible();
      await expect(row.locator('[data-testid="stat-rating"]')).toBeVisible();
      await expect(row.locator('[data-testid="stat-wins"]')).toBeVisible();
    }
  });

  test('User can click on a team card to view their profile', async ({ authenticatedDriver: page }) => {
    const firstTeam = page.locator('[data-testid^="standing-team-"]').first();
    const teamId = await firstTeam.getAttribute('data-testid').then(id => id?.replace('standing-team-', ''));
    
    await firstTeam.click();
    // The app uses /teams/:id for detail pages
    await expect(page).toHaveURL(new RegExp(`/teams/${teamId}`));
  });

  test('User sees team rankings with accurate data', async ({ authenticatedDriver: page }) => {
    const ratings = page.locator('[data-testid="stat-rating"]');
    const count = await ratings.count();
    for (let i = 0; i < Math.min(count, 5); i++) {
      const ratingText = await ratings.nth(i).textContent();
      expect(ratingText).toMatch(/\d+/);
    }
  });

  test('User sees team rankings with SEO metadata', async ({ authenticatedDriver: page }) => {
    await expect(page).toHaveTitle(/Team Leaderboard/);
  });

  test('User sees team rankings with proper accessibility', async ({ authenticatedDriver: page }) => {
    await expect(page.locator('h1')).toBeVisible();
  });
});