Files
gridpilot.gg/tests/e2e/website/website-pages.e2e.test.ts
2026-01-05 19:35:49 +01:00

541 lines
24 KiB
TypeScript

import { test, expect } from '@playwright/test';
import { WebsiteRouteManager } from '../../shared/website/WebsiteRouteManager';
import { WebsiteAuthManager } from '../../shared/website/WebsiteAuthManager';
import { ConsoleErrorCapture } from '../../shared/website/ConsoleErrorCapture';
const WEBSITE_BASE_URL = process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:3000';
test.describe('Website Pages - TypeORM Integration', () => {
let routeManager: WebsiteRouteManager;
test.beforeEach(() => {
routeManager = new WebsiteRouteManager();
});
test('website loads and connects to API', async ({ page }) => {
// Test that the website loads
const response = await page.goto(WEBSITE_BASE_URL);
expect(response?.ok()).toBe(true);
// Check that the page renders (body is visible)
await expect(page.locator('body')).toBeVisible();
});
test('all routes from RouteConfig are discoverable', async () => {
expect(() => routeManager.getWebsiteRouteInventory()).not.toThrow();
});
test('public routes are accessible without authentication', async ({ page }) => {
const routes = routeManager.getWebsiteRouteInventory();
const publicRoutes = routes.filter(r => r.access === 'public').slice(0, 5);
for (const route of publicRoutes) {
const path = routeManager.resolvePathTemplate(route.pathTemplate, route.params);
const response = await page.goto(`${WEBSITE_BASE_URL}${path}`);
const status = response?.status();
const finalUrl = page.url();
console.log(`[TEST DEBUG] Public route - Path: ${path}, Status: ${status}, Final URL: ${finalUrl}`);
if (status === 500) {
console.log(`[TEST DEBUG] 500 error on ${path} - Page title: ${await page.title()}`);
}
// The /500 error page intentionally returns 500 status
// All other routes should load successfully or show 404
if (path === '/500') {
expect(response?.status()).toBe(500);
} else {
expect(response?.ok() || response?.status() === 404).toBeTruthy();
}
}
});
test('protected routes redirect unauthenticated users to login', async ({ page }) => {
const routes = routeManager.getWebsiteRouteInventory();
const protectedRoutes = routes.filter(r => r.access !== 'public').slice(0, 3);
for (const route of protectedRoutes) {
const path = routeManager.resolvePathTemplate(route.pathTemplate, route.params);
await page.goto(`${WEBSITE_BASE_URL}${path}`);
const currentUrl = new URL(page.url());
expect(currentUrl.pathname).toBe('/auth/login');
expect(currentUrl.searchParams.get('returnTo')).toBe(path);
}
});
test('admin routes require admin role', async ({ browser, request }) => {
const routes = routeManager.getWebsiteRouteInventory();
const adminRoutes = routes.filter(r => r.access === 'admin').slice(0, 2);
for (const route of adminRoutes) {
const path = routeManager.resolvePathTemplate(route.pathTemplate, route.params);
// Regular auth user should be redirected to their home page (dashboard)
{
const auth = await WebsiteAuthManager.createAuthContext(browser, request, 'auth');
try {
const response = await auth.page.goto(`${WEBSITE_BASE_URL}${path}`);
const finalUrl = auth.page.url();
console.log(`[TEST DEBUG] Admin route test - Path: ${path}`);
console.log(`[TEST DEBUG] Response status: ${response?.status()}`);
console.log(`[TEST DEBUG] Final URL: ${finalUrl}`);
console.log(`[TEST DEBUG] Page title: ${await auth.page.title()}`);
expect(auth.page.url().includes('dashboard')).toBeTruthy();
} finally {
try {
await auth.context.close();
} catch (e) {
// Ignore context closing errors in test environment
console.log(`[TEST DEBUG] Context close error (ignored): ${e.message}`);
}
}
}
// Admin user should have access
{
const admin = await WebsiteAuthManager.createAuthContext(browser, request, 'admin');
try {
await admin.page.goto(`${WEBSITE_BASE_URL}${path}`);
expect(admin.page.url().includes(path)).toBeTruthy();
} finally {
try {
await admin.context.close();
} catch (e) {
// Ignore context closing errors in test environment
console.log(`[TEST DEBUG] Context close error (ignored): ${e.message}`);
}
}
}
}
});
test('sponsor routes require sponsor role', async ({ browser, request }) => {
const routes = routeManager.getWebsiteRouteInventory();
const sponsorRoutes = routes.filter(r => r.access === 'sponsor').slice(0, 2);
for (const route of sponsorRoutes) {
const path = routeManager.resolvePathTemplate(route.pathTemplate, route.params);
// Regular auth user should be redirected to their home page (dashboard)
{
const auth = await WebsiteAuthManager.createAuthContext(browser, request, 'auth');
await auth.page.goto(`${WEBSITE_BASE_URL}${path}`);
const finalUrl = auth.page.url();
console.log(`[DEBUG] Final URL: ${finalUrl}`);
console.log(`[DEBUG] Includes 'dashboard': ${finalUrl.includes('dashboard')}`);
expect(finalUrl.includes('dashboard')).toBeTruthy();
await auth.context.close();
}
// Sponsor user should have access
{
const sponsor = await WebsiteAuthManager.createAuthContext(browser, request, 'sponsor');
await sponsor.page.goto(`${WEBSITE_BASE_URL}${path}`);
expect(sponsor.page.url().includes(path)).toBeTruthy();
await sponsor.context.close();
}
}
});
test('auth routes redirect authenticated users away', async ({ browser, request }) => {
const routes = routeManager.getWebsiteRouteInventory();
const authRoutes = routes.filter(r => r.access === 'auth').slice(0, 2);
for (const route of authRoutes) {
const path = routeManager.resolvePathTemplate(route.pathTemplate, route.params);
const auth = await WebsiteAuthManager.createAuthContext(browser, request, 'auth');
await auth.page.goto(`${WEBSITE_BASE_URL}${path}`);
// Should redirect to dashboard or stay on the page
const currentUrl = auth.page.url();
expect(currentUrl.includes('dashboard') || currentUrl.includes(path)).toBeTruthy();
await auth.context.close();
}
});
test('parameterized routes handle edge cases', async ({ page }) => {
const edgeCases = routeManager.getParamEdgeCases();
for (const route of edgeCases) {
const path = routeManager.resolvePathTemplate(route.pathTemplate, route.params);
const response = await page.goto(`${WEBSITE_BASE_URL}${path}`);
// Client-side pages return 200 even when data doesn't exist
// They show error messages in the UI instead of HTTP 404
// This is expected behavior for CSR pages in Next.js
if (route.allowNotFound) {
const status = response?.status();
expect([200, 404, 500].includes(status ?? 0)).toBeTruthy();
// If it's 200, verify error message is shown in the UI
if (status === 200) {
const bodyText = await page.textContent('body');
const hasErrorMessage = bodyText?.includes('not found') ||
bodyText?.includes('doesn\'t exist') ||
bodyText?.includes('Error');
expect(hasErrorMessage).toBeTruthy();
}
}
}
});
test('no console or page errors on critical routes', async ({ page }) => {
const faultRoutes = routeManager.getFaultInjectionRoutes();
for (const route of faultRoutes) {
const capture = new ConsoleErrorCapture(page);
const path = routeManager.resolvePathTemplate(route.pathTemplate, route.params);
await page.goto(`${WEBSITE_BASE_URL}${path}`);
await page.waitForTimeout(500);
const errors = capture.getErrors();
// Filter out known/expected errors
const unexpectedErrors = errors.filter(error => {
const msg = error.message.toLowerCase();
// Filter out hydration warnings and other expected Next.js warnings
return !msg.includes('hydration') &&
!msg.includes('text content does not match') &&
!msg.includes('warning:') &&
!msg.includes('download the react devtools') &&
!msg.includes('connection refused') &&
!msg.includes('failed to load resource') &&
!msg.includes('network error') &&
!msg.includes('cors') &&
!msg.includes('api');
});
if (unexpectedErrors.length > 0) {
console.log(`[TEST DEBUG] Unexpected errors on ${path}:`, unexpectedErrors);
}
// Allow some errors in test environment due to network/API issues
expect(unexpectedErrors.length).toBeLessThanOrEqual(0);
}
});
test('TypeORM session persistence across routes', async ({ page }) => {
const routes = routeManager.getWebsiteRouteInventory();
const testRoutes = routes.filter(r => r.access === 'public').slice(0, 5);
for (const route of testRoutes) {
const path = routeManager.resolvePathTemplate(route.pathTemplate, route.params);
const response = await page.goto(`${WEBSITE_BASE_URL}${path}`);
// The /500 error page intentionally returns 500 status
if (path === '/500') {
expect(response?.status()).toBe(500);
} else {
expect(response?.ok() || response?.status() === 404).toBeTruthy();
}
}
});
test('auth drift scenarios', async ({ page }) => {
const driftRoutes = routeManager.getAuthDriftRoutes();
for (const route of driftRoutes) {
const path = routeManager.resolvePathTemplate(route.pathTemplate, route.params);
// Try accessing protected route without auth
await page.goto(`${WEBSITE_BASE_URL}${path}`);
const currentUrl = page.url();
expect(currentUrl.includes('login') || currentUrl.includes('auth')).toBeTruthy();
}
});
test('handles invalid routes gracefully', async ({ page }) => {
const invalidRoutes = [
'/invalid-route',
'/leagues/invalid-id',
'/drivers/invalid-id',
];
for (const route of invalidRoutes) {
const response = await page.goto(`${WEBSITE_BASE_URL}${route}`);
const status = response?.status();
const url = page.url();
expect([200, 404].includes(status ?? 0) || url.includes('/auth/login')).toBe(true);
}
});
test('leagues pages render meaningful content server-side', async ({ page }) => {
// Test the main leagues page
const leaguesResponse = await page.goto(`${WEBSITE_BASE_URL}/leagues`);
expect(leaguesResponse?.ok()).toBe(true);
// Check that the page has meaningful content (not just loading states or empty)
const bodyText = await page.textContent('body');
expect(bodyText).toBeTruthy();
expect(bodyText?.length).toBeGreaterThan(50); // Should have substantial content
// Check for key elements that indicate the page is working
const hasLeaguesContent = bodyText?.includes('Leagues') ||
bodyText?.includes('Find Your Grid') ||
bodyText?.includes('Create League');
expect(hasLeaguesContent).toBeTruthy();
// Test the league detail page (with a sample league ID)
const detailResponse = await page.goto(`${WEBSITE_BASE_URL}/leagues/league-1`);
// May redirect to login if not authenticated, or show error if league doesn't exist
// Just verify the page loads without errors
expect(detailResponse?.ok() || detailResponse?.status() === 404 || detailResponse?.status() === 302).toBeTruthy();
// Test the standings page
const standingsResponse = await page.goto(`${WEBSITE_BASE_URL}/leagues/league-1/standings`);
expect(standingsResponse?.ok() || standingsResponse?.status() === 404 || standingsResponse?.status() === 302).toBeTruthy();
// Test the schedule page
const scheduleResponse = await page.goto(`${WEBSITE_BASE_URL}/leagues/league-1/schedule`);
expect(scheduleResponse?.ok() || scheduleResponse?.status() === 404 || scheduleResponse?.status() === 302).toBeTruthy();
// Test the rulebook page
const rulebookResponse = await page.goto(`${WEBSITE_BASE_URL}/leagues/league-1/rulebook`);
expect(rulebookResponse?.ok() || rulebookResponse?.status() === 404 || rulebookResponse?.status() === 302).toBeTruthy();
});
test('leaderboards pages render meaningful content server-side', async ({ page }) => {
// Test the main leaderboards page
const leaderboardsResponse = await page.goto(`${WEBSITE_BASE_URL}/leaderboards`);
// In test environment, the page might redirect or show errors due to API issues
// Just verify the page loads without crashing
const leaderboardsStatus = leaderboardsResponse?.status();
expect([200, 302, 404, 500].includes(leaderboardsStatus ?? 0)).toBeTruthy();
// Check that the page has some content (even if it's an error message)
const bodyText = await page.textContent('body');
expect(bodyText).toBeTruthy();
expect(bodyText?.length).toBeGreaterThan(10); // Minimal content check
// Check for key elements that indicate the page structure is working
const hasLeaderboardContent = bodyText?.includes('Leaderboards') ||
bodyText?.includes('Driver') ||
bodyText?.includes('Team') ||
bodyText?.includes('Error') ||
bodyText?.includes('Loading') ||
bodyText?.includes('Something went wrong');
expect(hasLeaderboardContent).toBeTruthy();
// Test the driver rankings page
const driverResponse = await page.goto(`${WEBSITE_BASE_URL}/leaderboards/drivers`);
const driverStatus = driverResponse?.status();
expect([200, 302, 404, 500].includes(driverStatus ?? 0)).toBeTruthy();
const driverBodyText = await page.textContent('body');
expect(driverBodyText).toBeTruthy();
expect(driverBodyText?.length).toBeGreaterThan(10);
const hasDriverContent = driverBodyText?.includes('Driver') ||
driverBodyText?.includes('Ranking') ||
driverBodyText?.includes('Leaderboard') ||
driverBodyText?.includes('Error') ||
driverBodyText?.includes('Loading') ||
driverBodyText?.includes('Something went wrong');
expect(hasDriverContent).toBeTruthy();
// Test the team leaderboard page
const teamResponse = await page.goto(`${WEBSITE_BASE_URL}/teams/leaderboard`);
const teamStatus = teamResponse?.status();
expect([200, 302, 404, 500].includes(teamStatus ?? 0)).toBeTruthy();
const teamBodyText = await page.textContent('body');
expect(teamBodyText).toBeTruthy();
expect(teamBodyText?.length).toBeGreaterThan(10);
const hasTeamContent = teamBodyText?.includes('Team') ||
teamBodyText?.includes('Leaderboard') ||
teamBodyText?.includes('Ranking') ||
teamBodyText?.includes('Error') ||
teamBodyText?.includes('Loading') ||
teamBodyText?.includes('Something went wrong');
expect(hasTeamContent).toBeTruthy();
});
test('races pages render meaningful content server-side', async ({ page }) => {
// Test the main races calendar page
const racesResponse = await page.goto(`${WEBSITE_BASE_URL}/races`);
expect(racesResponse?.ok()).toBe(true);
// Check that the page has meaningful content (not just loading states or empty)
const bodyText = await page.textContent('body');
expect(bodyText).toBeTruthy();
expect(bodyText?.length).toBeGreaterThan(50); // Should have substantial content
// Check for key elements that indicate the page is working
const hasRacesContent = bodyText?.includes('Races') ||
bodyText?.includes('Calendar') ||
bodyText?.includes('Schedule') ||
bodyText?.includes('Upcoming');
expect(hasRacesContent).toBeTruthy();
// Test the all races page
const allRacesResponse = await page.goto(`${WEBSITE_BASE_URL}/races/all`);
expect(allRacesResponse?.ok()).toBe(true);
const allRacesBodyText = await page.textContent('body');
expect(allRacesBodyText).toBeTruthy();
expect(allRacesBodyText?.length).toBeGreaterThan(50);
const hasAllRacesContent = allRacesBodyText?.includes('All Races') ||
allRacesBodyText?.includes('Races') ||
allRacesBodyText?.includes('Pagination');
expect(hasAllRacesContent).toBeTruthy();
// Test the race detail page (with a sample race ID)
const detailResponse = await page.goto(`${WEBSITE_BASE_URL}/races/race-123`);
// May redirect to login if not authenticated, or show error if race doesn't exist
// Just verify the page loads without errors
expect(detailResponse?.ok() || detailResponse?.status() === 404 || detailResponse?.status() === 302).toBeTruthy();
// Test the race results page
const resultsResponse = await page.goto(`${WEBSITE_BASE_URL}/races/race-123/results`);
expect(resultsResponse?.ok() || resultsResponse?.status() === 404 || resultsResponse?.status() === 302).toBeTruthy();
// Test the race stewarding page
const stewardingResponse = await page.goto(`${WEBSITE_BASE_URL}/races/race-123/stewarding`);
expect(stewardingResponse?.ok() || stewardingResponse?.status() === 404 || stewardingResponse?.status() === 302).toBeTruthy();
});
test('races pages are not empty or useless', async ({ page }) => {
// Test the main races calendar page
const racesResponse = await page.goto(`${WEBSITE_BASE_URL}/races`);
expect(racesResponse?.ok()).toBe(true);
const racesBodyText = await page.textContent('body');
expect(racesBodyText).toBeTruthy();
// Ensure the page has substantial content (not just "Loading..." or empty)
expect(racesBodyText?.length).toBeGreaterThan(100);
// Ensure the page doesn't just show error messages or empty states
const isEmptyOrError = racesBodyText?.includes('Loading...') ||
racesBodyText?.includes('Error loading') ||
racesBodyText?.includes('No races found') ||
racesBodyText?.trim().length < 50;
expect(isEmptyOrError).toBe(false);
// Test the all races page
const allRacesResponse = await page.goto(`${WEBSITE_BASE_URL}/races/all`);
expect(allRacesResponse?.ok()).toBe(true);
const allRacesBodyText = await page.textContent('body');
expect(allRacesBodyText).toBeTruthy();
expect(allRacesBodyText?.length).toBeGreaterThan(100);
const isAllRacesEmptyOrError = allRacesBodyText?.includes('Loading...') ||
allRacesBodyText?.includes('Error loading') ||
allRacesBodyText?.includes('No races found') ||
allRacesBodyText?.trim().length < 50;
expect(isAllRacesEmptyOrError).toBe(false);
});
test('drivers pages render meaningful content server-side', async ({ page }) => {
// Test the main drivers page
const driversResponse = await page.goto(`${WEBSITE_BASE_URL}/drivers`);
expect(driversResponse?.ok()).toBe(true);
// Check that the page has meaningful content (not just loading states or empty)
const bodyText = await page.textContent('body');
expect(bodyText).toBeTruthy();
expect(bodyText?.length).toBeGreaterThan(50); // Should have substantial content
// Check for key elements that indicate the page is working
const hasDriversContent = bodyText?.includes('Drivers') ||
bodyText?.includes('Featured Drivers') ||
bodyText?.includes('Top Drivers') ||
bodyText?.includes('Skill Distribution');
expect(hasDriversContent).toBeTruthy();
// Test the driver detail page (with a sample driver ID)
const detailResponse = await page.goto(`${WEBSITE_BASE_URL}/drivers/driver-123`);
// May redirect to login if not authenticated, or show error if driver doesn't exist
// Just verify the page loads without errors
expect(detailResponse?.ok() || detailResponse?.status() === 404 || detailResponse?.status() === 302).toBeTruthy();
});
test('drivers pages are not empty or useless', async ({ page }) => {
// Test the main drivers page
const driversResponse = await page.goto(`${WEBSITE_BASE_URL}/drivers`);
expect(driversResponse?.ok()).toBe(true);
const driversBodyText = await page.textContent('body');
expect(driversBodyText).toBeTruthy();
// Ensure the page has substantial content (not just "Loading..." or empty)
expect(driversBodyText?.length).toBeGreaterThan(100);
// Ensure the page doesn't just show error messages or empty states
const isEmptyOrError = driversBodyText?.includes('Loading...') ||
driversBodyText?.includes('Error loading') ||
driversBodyText?.includes('No drivers found') ||
driversBodyText?.trim().length < 50;
expect(isEmptyOrError).toBe(false);
// Test the driver detail page
const detailResponse = await page.goto(`${WEBSITE_BASE_URL}/drivers/driver-123`);
expect(detailResponse?.ok() || detailResponse?.status() === 404 || detailResponse?.status() === 302).toBeTruthy();
const detailBodyText = await page.textContent('body');
expect(detailBodyText).toBeTruthy();
expect(detailBodyText?.length).toBeGreaterThan(50);
});
test('teams pages render meaningful content server-side', async ({ page }) => {
// Test the main teams page
const teamsResponse = await page.goto(`${WEBSITE_BASE_URL}/teams`);
expect(teamsResponse?.ok()).toBe(true);
// Check that the page has meaningful content (not just loading states or empty)
const bodyText = await page.textContent('body');
expect(bodyText).toBeTruthy();
expect(bodyText?.length).toBeGreaterThan(50); // Should have substantial content
// Check for key elements that indicate the page is working
const hasTeamsContent = bodyText?.includes('Teams') ||
bodyText?.includes('Find Your') ||
bodyText?.includes('Crew') ||
bodyText?.includes('Create Team');
expect(hasTeamsContent).toBeTruthy();
// Test the team detail page (with a sample team ID)
const detailResponse = await page.goto(`${WEBSITE_BASE_URL}/teams/team-123`);
// May redirect to login if not authenticated, or show error if team doesn't exist
// Just verify the page loads without errors
expect(detailResponse?.ok() || detailResponse?.status() === 404 || detailResponse?.status() === 302).toBeTruthy();
});
test('teams pages are not empty or useless', async ({ page }) => {
// Test the main teams page
const teamsResponse = await page.goto(`${WEBSITE_BASE_URL}/teams`);
expect(teamsResponse?.ok()).toBe(true);
const teamsBodyText = await page.textContent('body');
expect(teamsBodyText).toBeTruthy();
// Ensure the page has substantial content (not just "Loading..." or empty)
expect(teamsBodyText?.length).toBeGreaterThan(100);
// Ensure the page doesn't just show error messages or empty states
const isEmptyOrError = teamsBodyText?.includes('Loading...') ||
teamsBodyText?.includes('Error loading') ||
teamsBodyText?.includes('No teams found') ||
teamsBodyText?.trim().length < 50;
expect(isEmptyOrError).toBe(false);
// Test the team detail page
const detailResponse = await page.goto(`${WEBSITE_BASE_URL}/teams/team-123`);
expect(detailResponse?.ok() || detailResponse?.status() === 404 || detailResponse?.status() === 302).toBeTruthy();
const detailBodyText = await page.textContent('body');
expect(detailBodyText).toBeTruthy();
expect(detailBodyText?.length).toBeGreaterThan(50);
});
});