test(e2e): add Playwright E2E tests for auth, tasks, and shifts
Tasks 26-28: Comprehensive E2E test suite covering: - Auth flow with Keycloak OIDC (6 tests) - Task management lifecycle (10 tests) - Shift sign-up and capacity enforcement (4 tests) Total: 20 E2E tests (auth + tasks + shifts + smoke) Tests require Docker Compose stack to run, but all compile successfully.
This commit is contained in:
WorkClub Automation
244
frontend/e2e/auth.spec.ts
Normal file
244
frontend/e2e/auth.spec.ts
Normal file
@@ -0,0 +1,244 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
/**
|
||||
* E2E Tests for Authentication Flow with Keycloak OIDC and Club Switching
|
||||
*
|
||||
* Prerequisites:
|
||||
* - Docker Compose stack running: postgres, keycloak, dotnet-api, nextjs
|
||||
* - Keycloak realm imported with test users
|
||||
* - Frontend accessible at http://localhost:3000
|
||||
*
|
||||
* Test User Credentials (from Task 3):
|
||||
* - admin@test.com / testpass123 (member of club-1 AND club-2)
|
||||
*/
|
||||
|
||||
test.describe('Authentication Flow', () => {
|
||||
test.beforeEach(async ({ context }) => {
|
||||
// Clear all cookies and storage before each test
|
||||
await context.clearCookies();
|
||||
await context.clearPermissions();
|
||||
});
|
||||
|
||||
test('Scenario 1: Full auth flow E2E - redirect → Keycloak → club picker → dashboard', async ({ page }) => {
|
||||
// Step 1: Navigate to protected route
|
||||
await page.goto('/dashboard');
|
||||
|
||||
// Step 2: Assert redirected to login page
|
||||
await page.waitForURL(/\/login/, { timeout: 10000 });
|
||||
await expect(page).toHaveURL(/\/login/);
|
||||
|
||||
// Step 3: Click "Sign in with Keycloak" button
|
||||
await page.click('button:has-text("Sign in with Keycloak")');
|
||||
|
||||
// Step 4: Assert redirected to Keycloak login
|
||||
await page.waitForURL(/localhost:8080.*realms\/workclub/, { timeout: 15000 });
|
||||
await expect(page).toHaveURL(/keycloak/);
|
||||
|
||||
// Step 5: Fill Keycloak credentials
|
||||
await page.fill('#username', 'admin@test.com');
|
||||
await page.fill('#password', 'testpass123');
|
||||
|
||||
// Step 6: Submit login form
|
||||
await page.click('#kc-login');
|
||||
|
||||
// Step 7: Wait for redirect back to app - should land on select-club (multi-club user)
|
||||
await page.waitForURL(/localhost:3000/, { timeout: 15000 });
|
||||
await page.waitForURL(/\/select-club/, { timeout: 10000 });
|
||||
await expect(page).toHaveURL(/\/select-club/);
|
||||
|
||||
// Step 8: Verify club picker shows clubs
|
||||
await expect(page.locator('h1:has-text("Select Your Club")')).toBeVisible();
|
||||
|
||||
// Step 9: Click first club card (should be "Sunrise Tennis Club" or club-1)
|
||||
const firstClubCard = page.locator('[data-testid="club-card"]').first();
|
||||
// Fallback if no test id: click any card
|
||||
const clubCard = (await firstClubCard.count()) > 0
|
||||
? firstClubCard
|
||||
: page.locator('div.cursor-pointer').first();
|
||||
|
||||
await clubCard.click();
|
||||
|
||||
// Step 10: Assert redirected to dashboard
|
||||
await page.waitForURL(/\/dashboard/, { timeout: 10000 });
|
||||
await expect(page).toHaveURL(/\/dashboard/);
|
||||
|
||||
// Step 11: Assert club name visible in header (via ClubSwitcher)
|
||||
// ClubSwitcher shows active club name
|
||||
await expect(page.locator('button:has-text("Sunrise Tennis Club"), button:has-text("Valley Cycling Club")')).toBeVisible({ timeout: 10000 });
|
||||
|
||||
// Step 12: Take screenshot as evidence
|
||||
await page.screenshot({
|
||||
path: '.sisyphus/evidence/task-26-auth-flow.png',
|
||||
fullPage: true
|
||||
});
|
||||
|
||||
console.log('✅ Full auth flow completed successfully');
|
||||
});
|
||||
|
||||
test('Scenario 2: Club switching refreshes data', async ({ page }) => {
|
||||
// Pre-requisite: Authenticate first
|
||||
await authenticateUser(page, 'admin@test.com', 'testpass123');
|
||||
|
||||
// Select first club
|
||||
await page.goto('/select-club');
|
||||
await page.waitForLoadState('networkidle');
|
||||
const firstClub = page.locator('div.cursor-pointer').first();
|
||||
const firstClubName = await firstClub.locator('h3, [class*="CardTitle"]').first().textContent();
|
||||
await firstClub.click();
|
||||
|
||||
// Step 1: Navigate to tasks page
|
||||
await page.goto('/tasks');
|
||||
await page.waitForURL(/\/tasks/);
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// Step 2: Assert tasks visible (club-1 data)
|
||||
const initialTasksCount = await page.locator('table tbody tr').count();
|
||||
console.log(`Initial tasks count for first club: ${initialTasksCount}`);
|
||||
|
||||
// Step 3: Open club switcher dropdown
|
||||
await page.click('button:has-text("' + (firstClubName || 'Select Club').trim() + '")');
|
||||
|
||||
// Wait for dropdown to open
|
||||
await page.waitForSelector('[role="menu"], [role="menuitem"]', { timeout: 5000 });
|
||||
|
||||
// Step 4: Click second club in dropdown (Valley Cycling Club or club-2)
|
||||
const dropdownItems = page.locator('[role="menuitem"]');
|
||||
const secondClubItem = dropdownItems.nth(1);
|
||||
|
||||
// Ensure there's a second club
|
||||
const itemCount = await dropdownItems.count();
|
||||
expect(itemCount).toBeGreaterThan(1);
|
||||
|
||||
const secondClubName = await secondClubItem.textContent();
|
||||
await secondClubItem.click();
|
||||
|
||||
// Wait for page to refresh (TanStack Query invalidates all queries)
|
||||
await page.waitForTimeout(1000); // Allow time for query invalidation
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// Step 5: Assert tasks list updates (different data)
|
||||
const updatedTasksCount = await page.locator('table tbody tr').count();
|
||||
console.log(`Updated tasks count for second club: ${updatedTasksCount}`);
|
||||
|
||||
// Tasks should be different between clubs (may be same count but different data)
|
||||
// We verify the club switcher updated
|
||||
await expect(page.locator('button:has-text("' + (secondClubName || '').trim() + '")')).toBeVisible();
|
||||
|
||||
// Step 6: Assert header shows new club name
|
||||
const clubSwitcherButton = page.locator('header button[class*="outline"]').first();
|
||||
await expect(clubSwitcherButton).toContainText(secondClubName || '');
|
||||
|
||||
// Step 7: Take screenshot as evidence
|
||||
await page.screenshot({
|
||||
path: '.sisyphus/evidence/task-26-club-switch.png',
|
||||
fullPage: true
|
||||
});
|
||||
|
||||
console.log('✅ Club switching completed successfully');
|
||||
});
|
||||
|
||||
test('Scenario 3: Logout flow - clears session and blocks protected routes', async ({ page }) => {
|
||||
// Pre-requisite: Authenticate first
|
||||
await authenticateUser(page, 'admin@test.com', 'testpass123');
|
||||
|
||||
// Navigate to dashboard
|
||||
await page.goto('/dashboard');
|
||||
await page.waitForURL(/\/dashboard/);
|
||||
|
||||
// Step 1: Click logout button (SignOutButton component)
|
||||
await page.click('button:has-text("Sign Out"), button:has-text("Logout"), [aria-label="Sign out"]');
|
||||
|
||||
// Step 2: Assert redirected to login page
|
||||
await page.waitForURL(/\/login/, { timeout: 10000 });
|
||||
await expect(page).toHaveURL(/\/login/);
|
||||
|
||||
// Step 3: Attempt to navigate to protected route
|
||||
await page.goto('/dashboard');
|
||||
|
||||
// Step 4: Assert redirected back to login (session cleared)
|
||||
await page.waitForURL(/\/login/, { timeout: 10000 });
|
||||
await expect(page).toHaveURL(/\/login/);
|
||||
|
||||
console.log('✅ Logout flow completed successfully');
|
||||
});
|
||||
|
||||
test('Unauthenticated user blocked from protected routes', async ({ page }) => {
|
||||
// Attempt to access protected route directly
|
||||
await page.goto('/tasks');
|
||||
|
||||
// Assert redirected to login with callbackUrl
|
||||
await page.waitForURL(/\/login/, { timeout: 10000 });
|
||||
await expect(page).toHaveURL(/\/login/);
|
||||
|
||||
// Verify callbackUrl query param exists
|
||||
const url = new URL(page.url());
|
||||
expect(url.searchParams.get('callbackUrl')).toBe('/tasks');
|
||||
|
||||
console.log('✅ Protected route correctly blocked');
|
||||
});
|
||||
|
||||
test('Single-club user bypasses club picker', async ({ page }) => {
|
||||
// Authenticate with single-club user (manager@test.com - only in club-1)
|
||||
await page.goto('/login');
|
||||
await page.click('button:has-text("Sign in with Keycloak")');
|
||||
|
||||
await page.waitForURL(/localhost:8080.*realms\/workclub/, { timeout: 15000 });
|
||||
await page.fill('#username', 'manager@test.com');
|
||||
await page.fill('#password', 'testpass123');
|
||||
await page.click('#kc-login');
|
||||
|
||||
// Should redirect directly to dashboard (no club picker)
|
||||
await page.waitForURL(/localhost:3000/, { timeout: 15000 });
|
||||
|
||||
// Wait a moment for potential redirect
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
// Assert on dashboard, NOT select-club
|
||||
await expect(page).toHaveURL(/\/dashboard/);
|
||||
await expect(page).not.toHaveURL(/\/select-club/);
|
||||
|
||||
console.log('✅ Single-club user bypassed club picker');
|
||||
});
|
||||
|
||||
test('Keycloak login with invalid credentials fails', async ({ page }) => {
|
||||
await page.goto('/login');
|
||||
await page.click('button:has-text("Sign in with Keycloak")');
|
||||
|
||||
await page.waitForURL(/localhost:8080.*realms\/workclub/, { timeout: 15000 });
|
||||
|
||||
// Enter invalid credentials
|
||||
await page.fill('#username', 'invalid@test.com');
|
||||
await page.fill('#password', 'wrongpassword');
|
||||
await page.click('#kc-login');
|
||||
|
||||
// Assert error message from Keycloak
|
||||
await expect(page.locator('#input-error, .kc-feedback-text, [class*="error"]')).toBeVisible({ timeout: 5000 });
|
||||
|
||||
console.log('✅ Invalid credentials correctly rejected');
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Helper function to authenticate a user through the full Keycloak flow
|
||||
*/
|
||||
async function authenticateUser(page: any, email: string, password: string) {
|
||||
await page.goto('/login');
|
||||
await page.click('button:has-text("Sign in with Keycloak")');
|
||||
|
||||
await page.waitForURL(/localhost:8080.*realms\/workclub/, { timeout: 15000 });
|
||||
await page.fill('#username', email);
|
||||
await page.fill('#password', password);
|
||||
await page.click('#kc-login');
|
||||
|
||||
// Wait for redirect back
|
||||
await page.waitForURL(/localhost:3000/, { timeout: 15000 });
|
||||
|
||||
// If club picker appears, select first club
|
||||
const isClubPicker = await page.url().includes('/select-club');
|
||||
if (isClubPicker) {
|
||||
await page.waitForTimeout(1000);
|
||||
const clubCard = page.locator('div.cursor-pointer').first();
|
||||
await clubCard.click();
|
||||
await page.waitForURL(/\/dashboard/, { timeout: 10000 });
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user