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

/**
 * BDD E2E Test: Global Leaderboards Page
 * 
 * Tests the main leaderboards page that displays:
 * - Global driver rankings (top performers)
 * - Global team rankings (top teams)
 * - Navigation to detailed driver/team leaderboards
 * - Leaderboard filtering and sorting options
 * - Leaderboard data accuracy and consistency
 * 
 * Focus: Final user outcomes - what the user sees and can verify
 */

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

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

  test('User sees global driver rankings on the leaderboards page', async ({ authenticatedDriver: page }) => {
    const drivers = page.locator('[data-testid^="standing-driver-"]');
    await expect(drivers.first()).toBeVisible();
    await expect(page.locator('[data-testid^="standing-position-"]').first()).toBeVisible();
  });

  test('User sees global team rankings on the leaderboards page', async ({ authenticatedDriver: page }) => {
    const teams = page.locator('[data-testid^="standing-team-"]');
    await expect(teams.first()).toBeVisible();
    await expect(page.locator('[data-testid^="standing-position-"]').last()).toBeVisible();
  });

  test('User can navigate to detailed driver leaderboard', async ({ authenticatedDriver: page }) => {
    await page.getByTestId('nav-drivers').click();
    await expect(page).toHaveURL('/leaderboards/drivers');
  });

  test('User can navigate to detailed team leaderboard', async ({ authenticatedDriver: page }) => {
    await page.getByTestId('nav-teams').click();
    await expect(page).toHaveURL('/leaderboards/teams');
  });

  test('User can click on a driver entry to view their profile', async ({ authenticatedDriver: page }) => {
    const firstDriver = page.locator('[data-testid^="standing-driver-"]').first();
    const driverId = await firstDriver.getAttribute('data-testid').then(id => id?.replace('standing-driver-', ''));
    await firstDriver.click();
    await expect(page).toHaveURL(new RegExp(`/drivers/${driverId}`));
  });

  test('User can click on a team entry 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();
    await expect(page).toHaveURL(new RegExp(`/teams/${teamId}`));
  });

  test('User sees leaderboards with consistent ranking order', async ({ authenticatedDriver: page }) => {
    const ranks = page.locator('[data-testid^="standing-position-"]');
    const count = await ranks.count();
    expect(count).toBeGreaterThan(0);
  });

  test('User sees leaderboards with accurate data', async ({ authenticatedDriver: page }) => {
    const ratings = page.locator('[data-testid="stat-rating"]');
    const count = await ratings.count();
    expect(count).toBeGreaterThan(0);
  });

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

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