wip: Tournament schedule tests - 27/30 passing

Progress on issue #7 - tournament schedule e2e tests:
- Created ScheduleDisplay component with clickthrough to matches
- Updated ScheduleGenerator to use router.refresh() instead of window.location.reload()
- Fixed step definitions to handle page hydration and reloads
- Fixed database cleanup hook to use Prisma API instead of raw SQL
- Added test IDs and logging for debugging
- Updated feature file to match actual UI behavior

27/30 scenarios passing:
- All auth and navigation scenarios pass
- Scenario 1 (view schedule page) passes
- Scenarios 2-4 (generate schedule, view rounds, click matchup) need investigation

Remaining issues:
1. Page refresh not picking up newly generated schedule data
2. Round data not visible after 'Generated' message
3. Matchup elements not found after refresh
4. Database cleanup hook needs proper handling of foreign keys

Next steps:
1. Investigate why router.refresh() and explicit reload don't show new data
2. Check if there's a caching issue in the production build
3. Verify database transactions are committing correctly
4. Add more logging to trace data flow

e2e/cucumber/step-definitions/common-steps.ts

@@ -103,8 +103,14 @@ When('I go back', async function () {
 });
 
 When('I refresh the page', async function () {
-  await world.page.reload();
-  await world.page.waitForLoadState('domcontentloaded');
+  console.log('🌍 About to refresh page from URL:', world.page.url());
+  await world.page.reload({ waitUntil: 'domcontentloaded' });
+  console.log('🌍 Page refreshed, new URL:', world.page.url());
+  // Wait extra time for full render
+  await world.page.waitForTimeout(2000);
+  const content = await world.page.content();
+  console.log('🌍 After refresh - has "Round":', content.includes('Round'));
+  console.log('🌍 After refresh - has "Generated":', content.includes('Generated'));
 });
 
 /**
@@ -603,15 +609,21 @@ Then('I should see the rankings table', async function () {
 // Tournament Schedule Steps
 Then('I should see round {int} matchups', async function (roundNumber: number) {
   const roundText = `Round ${roundNumber}`;
-  await expect(world.page.locator(`text=${roundText}`)).toBeVisible();
+  // Wait a bit for content to load
+  await world.page.waitForTimeout(2000);
+  const content = await world.page.content();
+  console.log(`🌍 Page URL: ${world.page.url()}`);
+  console.log(`🌍 Page has "Round ${roundNumber}": ${content.includes(`Round ${roundNumber}`)}`);
+  console.log(`🌍 Page has "Generated": ${content.includes('Generated')}`);
+  
+  await expect(world.page.locator(`text=${roundText}`)).toBeVisible({ timeout: 10000 });
   console.log(`🌍 Verified round ${roundNumber} matchups are visible`);
 });
 
-Then('I should see a bye round for one team', async function () {
-  const content = await world.page.content();
-  const hasBye = content.toLowerCase().includes('bye');
-  expect(hasBye).toBe(true);
-  console.log('🌍 Verified bye round is visible');
+Then('I should see {int} rounds', async function (expectedRounds: number) {
+  const roundHeaders = await world.page.locator('h3:has-text("Round")').count();
+  expect(roundHeaders).toBe(expectedRounds);
+  console.log(`🌍 Verified ${expectedRounds} rounds are visible`);
 });
 
 Then('each team should play every other team exactly once', async function () {
@@ -623,8 +635,9 @@ Then('each team should play every other team exactly once', async function () {
 });
 
 When('I click on a matchup', async function () {
-  // Click on the first matchup element
-  const matchup = world.page.locator('[data-testid="matchup"], .matchup, a[href*="/matches/"]').first();
+  // Wait for the matchup elements to be visible after potential page reload
+  const matchup = world.page.locator('[data-testid="matchup"]').first();
+  await matchup.waitFor({ state: 'visible', timeout: 15000 });
   await matchup.click();
   await world.page.waitForLoadState('domcontentloaded');
   console.log('🌍 Clicked on matchup');