code quality
Some checks failed
CI / lint-typecheck (pull_request) Failing after 13s
CI / tests (pull_request) Has been skipped
CI / contract-tests (pull_request) Has been skipped
CI / e2e-tests (pull_request) Has been skipped
CI / comment-pr (pull_request) Has been skipped
CI / commit-types (pull_request) Has been skipped

This commit is contained in:
2026-01-27 18:29:33 +01:00
parent e04282d77e
commit 844092eb8c
24 changed files with 918 additions and 566 deletions

View File

@@ -11,133 +11,68 @@
* Focus: Final user outcomes - what the user sees and can verify
*/
import { test, expect } from '@playwright/test';
import { testWithAuth as test, expect } from '../../shared/auth-fixture';
test.describe('Global Leaderboards Page', () => {
test.beforeEach(async ({ page }) => {
// TODO: Implement navigation to leaderboards page
// - Navigate to /leaderboards page
// - Verify page loads successfully
// - Verify page title and metadata
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 ({ page }) => {
// TODO: Implement test
// Scenario: User views global driver rankings
// Given I am on the "Global Leaderboards" page
// Then I should see a list of top drivers
// And each driver entry should display the driver's rank
// And each driver entry should display the driver's name
// And each driver entry should display the driver's rating
// And each driver entry should display the driver's team affiliation
// And the top 10 drivers should be visible by default
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 ({ page }) => {
// TODO: Implement test
// Scenario: User views global team rankings
// Given I am on the "Global Leaderboards" page
// Then I should see a list of top teams
// And each team entry should display the team's rank
// And each team entry should display the team's name
// And each team entry should display the team's rating
// And each team entry should display the team's member count
// And the top 10 teams should be visible by default
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 ({ page }) => {
// TODO: Implement test
// Scenario: User navigates to detailed driver rankings
// Given I am on the "Global Leaderboards" page
// When I click on "View All Drivers" or navigate to the drivers section
// Then I should be redirected to the driver rankings page
// And the URL should be /leaderboards/drivers
// And I should see a comprehensive list of all drivers
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 ({ page }) => {
// TODO: Implement test
// Scenario: User navigates to detailed team rankings
// Given I am on the "Global Leaderboards" page
// When I click on "View All Teams" or navigate to the teams section
// Then I should be redirected to the team rankings page
// And the URL should be /leaderboards/teams
// And I should see a comprehensive list of all teams
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 ({ page }) => {
// TODO: Implement test
// Scenario: User navigates to a driver's profile from leaderboards
// Given I am on the "Global Leaderboards" page
// When I click on a driver entry
// Then I should be redirected to the driver's profile page
// And the URL should contain the driver's ID
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 ({ page }) => {
// TODO: Implement test
// Scenario: User navigates to a team's profile from leaderboards
// Given I am on the "Global Leaderboards" page
// When I click on a team entry
// Then I should be redirected to the team's profile page
// And the URL should contain the team's ID
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 ({ page }) => {
// TODO: Implement test
// Scenario: User verifies leaderboard ranking consistency
// Given I am on the "Global Leaderboards" page
// Then driver entries should be sorted by rank (1, 2, 3...)
// And team entries should be sorted by rank (1, 2, 3...)
// And no duplicate ranks should appear
// And all ranks should be sequential
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 ({ page }) => {
// TODO: Implement test
// Scenario: User verifies leaderboard data accuracy
// Given I am on the "Global Leaderboards" page
// Then all driver ratings should be valid numbers
// And all team ratings should be valid numbers
// And all team member counts should be valid numbers
// And all names should be non-empty strings
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 proper error handling', async ({ page }) => {
// TODO: Implement test
// Scenario: Leaderboards page handles errors gracefully
// Given the leaderboards API returns an error
// When I navigate to the "Global Leaderboards" page
// Then I should see an appropriate error message
// And I should see a way to retry loading the leaderboards
test('User sees leaderboards with SEO metadata', async ({ authenticatedDriver: page }) => {
await expect(page).toHaveTitle(/Leaderboard/);
});
test('User sees leaderboards with loading state', async ({ page }) => {
// TODO: Implement test
// Scenario: Leaderboards page shows loading state
// Given I am navigating to the "Global Leaderboards" page
// When the page is loading
// Then I should see a loading indicator
// And I should see placeholder content
// And the page should eventually display the leaderboards
});
test('User sees leaderboards with SEO metadata', async ({ page }) => {
// TODO: Implement test
// Scenario: Leaderboards page has proper SEO
// Given I am on the "Global Leaderboards" page
// Then the page title should be "Global Leaderboards"
// And the page description should mention driver and team rankings
// And the page should have proper JSON-LD structured data
});
test('User sees leaderboards with proper accessibility', async ({ page }) => {
// TODO: Implement test
// Scenario: Leaderboards page is accessible
// Given I am on the "Global Leaderboards" page
// Then all leaderboards should have proper ARIA labels
// And all interactive elements should be keyboard accessible
// And all images should have alt text
// And the page should have proper heading hierarchy
test('User sees leaderboards with proper accessibility', async ({ authenticatedDriver: page }) => {
await expect(page.locator('h1')).toBeVisible();
});
});