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 });
|
||||
}
|
||||
}
|
||||
317
frontend/e2e/shifts.spec.ts
Normal file
317
frontend/e2e/shifts.spec.ts
Normal file
@@ -0,0 +1,317 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
/**
|
||||
* E2E Tests: Shift Sign-Up and Cancellation Flow
|
||||
*
|
||||
* These tests verify the complete shift sign-up workflow including:
|
||||
* - Shift creation by Manager role
|
||||
* - Sign-up and cancellation flow
|
||||
* - Capacity enforcement (full shift blocks sign-up)
|
||||
* - Past shift validation (no sign-up for past shifts)
|
||||
* - Visual capacity indicators (progress bar, spot counts)
|
||||
*/
|
||||
|
||||
// Helper function to login via Keycloak
|
||||
async function loginAs(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');
|
||||
|
||||
await page.waitForURL(/localhost:3000/, { timeout: 15000 });
|
||||
|
||||
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 });
|
||||
}
|
||||
}
|
||||
|
||||
// Helper to logout
|
||||
async function logout(page: any) {
|
||||
await page.click('button:has-text("Sign Out"), button:has-text("Logout")');
|
||||
await page.waitForURL(/\/login/, { timeout: 10000 });
|
||||
}
|
||||
|
||||
// Helper to create a shift
|
||||
async function createShift(page: any, shiftData: {
|
||||
title: string;
|
||||
location?: string;
|
||||
startTime: string; // ISO datetime-local format: "2026-03-10T10:00"
|
||||
endTime: string;
|
||||
capacity: number;
|
||||
}) {
|
||||
await page.goto('/shifts');
|
||||
await page.click('text=New Shift');
|
||||
|
||||
await page.waitForURL('/shifts/new');
|
||||
|
||||
await page.locator('label:has-text("Title")').locator('..').locator('input').fill(shiftData.title);
|
||||
if (shiftData.location) {
|
||||
await page.locator('label:has-text("Location")').locator('..').locator('input').fill(shiftData.location);
|
||||
}
|
||||
const startTimeInput = page.locator('input[type="datetime-local"]').first();
|
||||
await startTimeInput.fill(shiftData.startTime);
|
||||
const endTimeInput = page.locator('input[type="datetime-local"]').nth(1);
|
||||
await endTimeInput.fill(shiftData.endTime);
|
||||
await page.locator('label:has-text("Capacity")').locator('..').locator('input[type="number"]').fill(shiftData.capacity.toString());
|
||||
|
||||
await page.click('button:has-text("Create Shift")');
|
||||
|
||||
// Wait for redirect to shift detail page
|
||||
await page.waitForURL(/\/shifts\/[0-9a-f-]+/, { timeout: 10000 });
|
||||
|
||||
// Extract shift ID from URL
|
||||
const url = page.url();
|
||||
const shiftId = url.match(/\/shifts\/([0-9a-f-]+)/)[1];
|
||||
return shiftId;
|
||||
}
|
||||
|
||||
test.describe('Shift Sign-Up Flow', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Ensure clean state
|
||||
await page.goto('/');
|
||||
});
|
||||
|
||||
/**
|
||||
* Scenario 1: Sign up and cancel for shift
|
||||
*
|
||||
* Steps:
|
||||
* 1. Login as manager
|
||||
* 2. Create future shift with capacity 3
|
||||
* 3. Navigate to shift detail → assert "0/3 spots filled"
|
||||
* 4. Click "Sign Up" → assert "1/3 spots filled"
|
||||
* 5. Assert manager name appears in sign-up list
|
||||
* 6. Click "Cancel Sign-up" → assert "0/3 spots filled"
|
||||
* 7. Assert manager name removed from list
|
||||
* 8. Screenshot → evidence/task-28-shift-signup.png
|
||||
*/
|
||||
test('should allow manager to sign up and cancel for shift', async ({ page }) => {
|
||||
// Login as manager
|
||||
await loginAs(page, 'manager@test.com', 'password');
|
||||
|
||||
// Create shift with capacity 3
|
||||
const futureStartTime = new Date(Date.now() + 2 * 24 * 60 * 60 * 1000); // 2 days from now
|
||||
const futureEndTime = new Date(futureStartTime.getTime() + 2 * 60 * 60 * 1000); // +2 hours
|
||||
|
||||
const shiftId = await createShift(page, {
|
||||
title: 'Court Maintenance',
|
||||
location: 'Court 3',
|
||||
startTime: futureStartTime.toISOString().slice(0, 16),
|
||||
endTime: futureEndTime.toISOString().slice(0, 16),
|
||||
capacity: 3,
|
||||
});
|
||||
|
||||
// Should be on shift detail page now
|
||||
await expect(page).toHaveURL(`/shifts/${shiftId}`);
|
||||
|
||||
// Assert initial capacity: 0/3 spots filled
|
||||
await expect(page.locator('text=/0\\/3 spots filled/')).toBeVisible();
|
||||
|
||||
// Click "Sign Up" button
|
||||
await page.click('button:has-text("Sign Up")');
|
||||
|
||||
// Wait for mutation to complete (button text changes or capacity updates)
|
||||
await page.waitForResponse(response =>
|
||||
response.url().includes(`/api/shifts/${shiftId}/signup`) && response.status() === 200
|
||||
);
|
||||
|
||||
// Assert capacity updated to 1/3
|
||||
await expect(page.locator('text=/1\\/3 spots filled/')).toBeVisible();
|
||||
|
||||
// Assert "Cancel Sign-up" button appears (replaces "Sign Up")
|
||||
await expect(page.locator('button:has-text("Cancel Sign-up")')).toBeVisible();
|
||||
|
||||
// Assert manager appears in sign-up list (Member ID will be visible)
|
||||
await expect(page.locator('text=/Signed Up Members \\(1\\)/')).toBeVisible();
|
||||
|
||||
// Screenshot: Sign-up successful
|
||||
await page.screenshot({
|
||||
path: '.sisyphus/evidence/task-28-shift-signup.png',
|
||||
fullPage: true
|
||||
});
|
||||
|
||||
// Click "Cancel Sign-up"
|
||||
await page.click('button:has-text("Cancel Sign-up")');
|
||||
|
||||
// Wait for cancel mutation
|
||||
await page.waitForResponse(response =>
|
||||
response.url().includes(`/api/shifts/${shiftId}/signup`) && response.status() === 204
|
||||
);
|
||||
|
||||
// Assert capacity back to 0/3
|
||||
await expect(page.locator('text=/0\\/3 spots filled/')).toBeVisible();
|
||||
|
||||
// Assert "Sign Up" button reappears
|
||||
await expect(page.locator('button:has-text("Sign Up")')).toBeVisible();
|
||||
|
||||
// Assert sign-up list shows 0 members
|
||||
await expect(page.locator('text=/Signed Up Members \\(0\\)/')).toBeVisible();
|
||||
await expect(page.locator('text=No sign-ups yet')).toBeVisible();
|
||||
});
|
||||
|
||||
/**
|
||||
* Scenario 2: Full capacity disables sign-up
|
||||
*
|
||||
* Steps:
|
||||
* 1. Login as manager, create shift with capacity 1
|
||||
* 2. Sign up as manager → capacity "1/1"
|
||||
* 3. Logout, login as member1
|
||||
* 4. Navigate to same shift → assert "1/1 spots filled"
|
||||
* 5. Assert "Sign Up" button disabled or not present
|
||||
* 6. Screenshot → evidence/task-28-full-capacity.png
|
||||
*/
|
||||
test('should disable sign-up when shift at full capacity', async ({ page }) => {
|
||||
// Login as manager
|
||||
await loginAs(page, 'manager@test.com', 'password');
|
||||
|
||||
// Create shift with capacity 1
|
||||
const futureStartTime = new Date(Date.now() + 2 * 24 * 60 * 60 * 1000);
|
||||
const futureEndTime = new Date(futureStartTime.getTime() + 2 * 60 * 60 * 1000);
|
||||
|
||||
const shiftId = await createShift(page, {
|
||||
title: 'Small Task',
|
||||
location: 'Office',
|
||||
startTime: futureStartTime.toISOString().slice(0, 16),
|
||||
endTime: futureEndTime.toISOString().slice(0, 16),
|
||||
capacity: 1,
|
||||
});
|
||||
|
||||
// Sign up as manager
|
||||
await page.click('button:has-text("Sign Up")');
|
||||
await page.waitForResponse(response =>
|
||||
response.url().includes(`/api/shifts/${shiftId}/signup`)
|
||||
);
|
||||
|
||||
// Assert capacity is 1/1
|
||||
await expect(page.locator('text=/1\\/1 spots filled/')).toBeVisible();
|
||||
|
||||
// Logout
|
||||
await logout(page);
|
||||
|
||||
// Login as member1
|
||||
await loginAs(page, 'member1@test.com', 'password');
|
||||
|
||||
// Navigate to the same shift
|
||||
await page.goto(`/shifts/${shiftId}`);
|
||||
|
||||
// Assert capacity is 1/1
|
||||
await expect(page.locator('text=/1\\/1 spots filled/')).toBeVisible();
|
||||
|
||||
// Assert "Sign Up" button is not visible (full capacity)
|
||||
const signUpButton = page.locator('button:has-text("Sign Up")');
|
||||
await expect(signUpButton).not.toBeVisible();
|
||||
|
||||
// Screenshot: Full capacity state
|
||||
await page.screenshot({
|
||||
path: '.sisyphus/evidence/task-28-full-capacity.png',
|
||||
fullPage: true
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Scenario 3: Past shift has no sign-up button
|
||||
*
|
||||
* Steps:
|
||||
* 1. Login as manager
|
||||
* 2. Create shift with startTime in past (e.g., yesterday)
|
||||
* 3. Navigate to shift detail
|
||||
* 4. Assert "Past" badge visible
|
||||
* 5. Assert "Sign Up" button not rendered
|
||||
* 6. Verify past shifts still display correctly (read-only)
|
||||
*/
|
||||
test('should not allow sign-up for past shifts', async ({ page }) => {
|
||||
// Login as manager
|
||||
await loginAs(page, 'manager@test.com', 'password');
|
||||
|
||||
// Create shift in the past (yesterday)
|
||||
const pastStartTime = new Date(Date.now() - 24 * 60 * 60 * 1000); // 1 day ago
|
||||
const pastEndTime = new Date(pastStartTime.getTime() + 2 * 60 * 60 * 1000);
|
||||
|
||||
const shiftId = await createShift(page, {
|
||||
title: 'Past Shift',
|
||||
location: 'Court 1',
|
||||
startTime: pastStartTime.toISOString().slice(0, 16),
|
||||
endTime: pastEndTime.toISOString().slice(0, 16),
|
||||
capacity: 5,
|
||||
});
|
||||
|
||||
// Should be on shift detail page
|
||||
await expect(page).toHaveURL(`/shifts/${shiftId}`);
|
||||
|
||||
// Assert "Past" badge is visible
|
||||
await expect(page.locator('text=Past')).toBeVisible();
|
||||
|
||||
// Assert "Sign Up" button is NOT rendered
|
||||
const signUpButton = page.locator('button:has-text("Sign Up")');
|
||||
await expect(signUpButton).not.toBeVisible();
|
||||
|
||||
// Assert shift details are still readable
|
||||
await expect(page.locator('text=Past Shift')).toBeVisible();
|
||||
await expect(page.locator('text=/0\\/5 spots filled/')).toBeVisible();
|
||||
|
||||
// Assert capacity progress bar is still visible (read-only display)
|
||||
await expect(page.locator('span:has-text("Capacity")')).toBeVisible();
|
||||
});
|
||||
|
||||
/**
|
||||
* Scenario 4: Progress bar updates correctly
|
||||
*
|
||||
* Verifies that the capacity progress bar accurately reflects sign-up count.
|
||||
*/
|
||||
test('should update progress bar as sign-ups increase', async ({ page }) => {
|
||||
// Login as manager
|
||||
await loginAs(page, 'manager@test.com', 'password');
|
||||
|
||||
// Create shift with capacity 2
|
||||
const futureStartTime = new Date(Date.now() + 2 * 24 * 60 * 60 * 1000);
|
||||
const futureEndTime = new Date(futureStartTime.getTime() + 2 * 60 * 60 * 1000);
|
||||
|
||||
const shiftId = await createShift(page, {
|
||||
title: 'Progress Test',
|
||||
location: 'Gym',
|
||||
startTime: futureStartTime.toISOString().slice(0, 16),
|
||||
endTime: futureEndTime.toISOString().slice(0, 16),
|
||||
capacity: 2,
|
||||
});
|
||||
|
||||
// Assert initial state: 0/2
|
||||
await expect(page.locator('text=/0\\/2 spots filled/')).toBeVisible();
|
||||
|
||||
// Sign up as manager
|
||||
await page.click('button:has-text("Sign Up")');
|
||||
await page.waitForResponse(response =>
|
||||
response.url().includes(`/api/shifts/${shiftId}/signup`)
|
||||
);
|
||||
|
||||
// Assert: 1/2 filled (50% progress)
|
||||
await expect(page.locator('text=/1\\/2 spots filled/')).toBeVisible();
|
||||
|
||||
// Progress bar should be visible and partially filled
|
||||
const progressBar = page.locator('[role="progressbar"]');
|
||||
await expect(progressBar).toBeVisible();
|
||||
|
||||
// Logout and login as member1
|
||||
await logout(page);
|
||||
await loginAs(page, 'member1@test.com', 'password');
|
||||
|
||||
// Navigate to shift and sign up
|
||||
await page.goto(`/shifts/${shiftId}`);
|
||||
await page.click('button:has-text("Sign Up")');
|
||||
await page.waitForResponse(response =>
|
||||
response.url().includes(`/api/shifts/${shiftId}/signup`)
|
||||
);
|
||||
|
||||
// Assert: 2/2 filled (100% progress, full capacity)
|
||||
await expect(page.locator('text=/2\\/2 spots filled/')).toBeVisible();
|
||||
|
||||
// Sign Up button should no longer be visible
|
||||
const signUpButton = page.locator('button:has-text("Sign Up")');
|
||||
await expect(signUpButton).not.toBeVisible();
|
||||
});
|
||||
});
|
||||
361
frontend/e2e/tasks.spec.ts
Normal file
361
frontend/e2e/tasks.spec.ts
Normal file
@@ -0,0 +1,361 @@
|
||||
import { test, expect, Page } from '@playwright/test';
|
||||
|
||||
/**
|
||||
* E2E Tests for Task Management Flow
|
||||
*
|
||||
* Covers:
|
||||
* - Full task lifecycle (Create → Open → Assigned → InProgress → Review → Done)
|
||||
* - Role-based access (Manager can create, Viewer cannot)
|
||||
* - Status filtering
|
||||
* - State transitions following domain rules
|
||||
*/
|
||||
|
||||
// Test user credentials from Task 3
|
||||
const USERS = {
|
||||
admin: { email: 'admin@test.com', password: 'testpass123' },
|
||||
manager: { email: 'manager@test.com', password: 'testpass123' },
|
||||
viewer: { email: 'viewer@test.com', password: 'testpass123' },
|
||||
};
|
||||
|
||||
// Helper function to login via Keycloak
|
||||
async function loginAs(page: Page, email: string, password: string) {
|
||||
await page.goto('/');
|
||||
|
||||
// Check if already logged in
|
||||
const isLoggedIn = await page.locator('text=Tasks').isVisible().catch(() => false);
|
||||
if (isLoggedIn) {
|
||||
// Logout first
|
||||
await page.goto('/api/auth/signout');
|
||||
await page.locator('button:has-text("Sign out")').click().catch(() => {});
|
||||
await page.waitForTimeout(1000);
|
||||
}
|
||||
|
||||
// Navigate to login
|
||||
await page.goto('/login');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// Fill Keycloak login form
|
||||
await page.fill('input[name="username"]', email);
|
||||
await page.fill('input[name="password"]', password);
|
||||
await page.click('input[type="submit"]');
|
||||
|
||||
// Wait for redirect back to app
|
||||
await page.waitForURL(/\/(dashboard|tasks)/, { timeout: 10000 });
|
||||
}
|
||||
|
||||
// Helper to select club (assumes club-1 as default tenant)
|
||||
async function selectClub(page: Page, clubName: string = 'club-1') {
|
||||
// Check if club selector is visible
|
||||
const clubSelector = page.locator('select[name="club"], button:has-text("Club")').first();
|
||||
if (await clubSelector.isVisible().catch(() => false)) {
|
||||
await clubSelector.click();
|
||||
await page.locator(`text=${clubName}`).first().click();
|
||||
await page.waitForTimeout(500); // Wait for localStorage update
|
||||
}
|
||||
}
|
||||
|
||||
test.describe('Task Management E2E', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Clear localStorage to start fresh
|
||||
await page.goto('/');
|
||||
await page.evaluate(() => localStorage.clear());
|
||||
});
|
||||
|
||||
test('Scenario 1: Full task lifecycle via UI', async ({ page }) => {
|
||||
// Step 1: Login as admin
|
||||
await loginAs(page, USERS.admin.email, USERS.admin.password);
|
||||
await selectClub(page, 'club-1');
|
||||
|
||||
// Step 2: Navigate to /tasks
|
||||
await page.goto('/tasks');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// Step 3: Click "New Task" button
|
||||
const newTaskButton = page.locator('text=New Task');
|
||||
await expect(newTaskButton).toBeVisible();
|
||||
await newTaskButton.click();
|
||||
|
||||
// Step 4: Fill form
|
||||
await page.waitForURL(/\/tasks\/new/);
|
||||
await page.fill('input[name="title"]', 'Replace court net');
|
||||
await page.fill('textarea[name="description"]', 'Net on court 3 is torn');
|
||||
|
||||
// Step 5: Submit form
|
||||
await page.locator('button:has-text("Create Task")').click();
|
||||
|
||||
// Step 6: Assert redirected to task detail
|
||||
await page.waitForURL(/\/tasks\/[0-9a-f-]+/, { timeout: 10000 });
|
||||
|
||||
// Step 7: Assert status badge shows "Open"
|
||||
const statusBadge = page.locator('text=Open').first();
|
||||
await expect(statusBadge).toBeVisible();
|
||||
|
||||
// Verify task title
|
||||
await expect(page.locator('text=Replace court net')).toBeVisible();
|
||||
|
||||
// Step 8: Transition Open → Assigned
|
||||
const assignButton = page.locator('button:has-text("Move to Assigned")');
|
||||
await expect(assignButton).toBeVisible();
|
||||
await assignButton.click();
|
||||
await page.waitForTimeout(1000); // Wait for mutation
|
||||
await expect(page.locator('text=Assigned').first()).toBeVisible();
|
||||
|
||||
// Step 9: Transition Assigned → InProgress
|
||||
const startButton = page.locator('button:has-text("Move to InProgress")');
|
||||
await expect(startButton).toBeVisible();
|
||||
await startButton.click();
|
||||
await page.waitForTimeout(1000);
|
||||
await expect(page.locator('text=InProgress').first()).toBeVisible();
|
||||
|
||||
// Step 10: Transition InProgress → Review
|
||||
const reviewButton = page.locator('button:has-text("Move to Review")');
|
||||
await expect(reviewButton).toBeVisible();
|
||||
await reviewButton.click();
|
||||
await page.waitForTimeout(1000);
|
||||
await expect(page.locator('text=Review').first()).toBeVisible();
|
||||
|
||||
// Step 11: Transition Review → Done
|
||||
const doneButton = page.locator('button:has-text("Mark as Done")');
|
||||
await expect(doneButton).toBeVisible();
|
||||
await doneButton.click();
|
||||
await page.waitForTimeout(1000);
|
||||
await expect(page.locator('text=Done').first()).toBeVisible();
|
||||
|
||||
// Step 12: Screenshot final state
|
||||
await page.screenshot({
|
||||
path: '.sisyphus/evidence/task-27-task-lifecycle.png',
|
||||
fullPage: true
|
||||
});
|
||||
});
|
||||
|
||||
test('Scenario 2: Viewer cannot create tasks', async ({ page }) => {
|
||||
// Step 1: Login as viewer
|
||||
await loginAs(page, USERS.viewer.email, USERS.viewer.password);
|
||||
await selectClub(page, 'club-1');
|
||||
|
||||
// Step 2: Navigate to /tasks
|
||||
await page.goto('/tasks');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// Step 3: Assert "New Task" button is NOT visible
|
||||
const newTaskButton = page.locator('text=New Task');
|
||||
await expect(newTaskButton).not.toBeVisible();
|
||||
|
||||
// Step 4: Assert can see task list (read permission)
|
||||
const tasksTable = page.locator('table');
|
||||
await expect(tasksTable).toBeVisible();
|
||||
|
||||
// Step 5: Screenshot
|
||||
await page.screenshot({
|
||||
path: '.sisyphus/evidence/task-27-viewer-no-create.png',
|
||||
fullPage: true
|
||||
});
|
||||
});
|
||||
|
||||
test('Scenario 3: Task list filters by status', async ({ page }) => {
|
||||
// Step 1: Login as admin
|
||||
await loginAs(page, USERS.admin.email, USERS.admin.password);
|
||||
await selectClub(page, 'club-1');
|
||||
|
||||
// Step 2: Navigate to /tasks
|
||||
await page.goto('/tasks');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// Step 3: Open status filter dropdown
|
||||
const statusFilter = page.locator('select').first();
|
||||
await expect(statusFilter).toBeVisible();
|
||||
|
||||
// Step 4: Select "Open" status
|
||||
await statusFilter.selectOption('Open');
|
||||
await page.waitForTimeout(1000); // Wait for filter to apply
|
||||
|
||||
// Step 5: Verify only Open tasks displayed
|
||||
const statusBadges = page.locator('table tbody tr td:nth-child(2)');
|
||||
const badgeCount = await statusBadges.count();
|
||||
|
||||
if (badgeCount > 0) {
|
||||
// Verify all visible badges say "Open"
|
||||
for (let i = 0; i < badgeCount; i++) {
|
||||
const badgeText = await statusBadges.nth(i).textContent();
|
||||
expect(badgeText?.trim()).toBe('Open');
|
||||
}
|
||||
}
|
||||
|
||||
// Step 6: Select "Done" status
|
||||
await statusFilter.selectOption('Done');
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
// Step 7: Verify only Done tasks displayed
|
||||
const doneBadgeCount = await statusBadges.count();
|
||||
if (doneBadgeCount > 0) {
|
||||
for (let i = 0; i < doneBadgeCount; i++) {
|
||||
const badgeText = await statusBadges.nth(i).textContent();
|
||||
expect(badgeText?.trim()).toBe('Done');
|
||||
}
|
||||
}
|
||||
|
||||
// Step 8: Clear filter (select "All Statuses")
|
||||
await statusFilter.selectOption('');
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
// Step 9: Verify all tasks displayed (mixed statuses)
|
||||
const allBadgeCount = await statusBadges.count();
|
||||
expect(allBadgeCount).toBeGreaterThanOrEqual(0);
|
||||
});
|
||||
|
||||
test('State transition validation: Cannot skip states', async ({ page }) => {
|
||||
// Login as admin and create a task
|
||||
await loginAs(page, USERS.admin.email, USERS.admin.password);
|
||||
await selectClub(page, 'club-1');
|
||||
|
||||
await page.goto('/tasks/new');
|
||||
await page.fill('input[name="title"]', 'Test state validation');
|
||||
await page.locator('button:has-text("Create Task")').click();
|
||||
await page.waitForURL(/\/tasks\/[0-9a-f-]+/);
|
||||
|
||||
// Verify task is Open
|
||||
await expect(page.locator('text=Open').first()).toBeVisible();
|
||||
|
||||
// Valid transition: Open → Assigned should be available
|
||||
await expect(page.locator('button:has-text("Move to Assigned")')).toBeVisible();
|
||||
|
||||
// Invalid transitions should NOT be available
|
||||
await expect(page.locator('button:has-text("Move to InProgress")')).not.toBeVisible();
|
||||
await expect(page.locator('button:has-text("Move to Review")')).not.toBeVisible();
|
||||
await expect(page.locator('button:has-text("Mark as Done")')).not.toBeVisible();
|
||||
});
|
||||
|
||||
test('Review can transition back to InProgress', async ({ page }) => {
|
||||
// Login as admin and create a task
|
||||
await loginAs(page, USERS.admin.email, USERS.admin.password);
|
||||
await selectClub(page, 'club-1');
|
||||
|
||||
await page.goto('/tasks/new');
|
||||
await page.fill('input[name="title"]', 'Test review back to progress');
|
||||
await page.locator('button:has-text("Create Task")').click();
|
||||
await page.waitForURL(/\/tasks\/[0-9a-f-]+/);
|
||||
|
||||
// Transition through states to Review
|
||||
await page.locator('button:has-text("Move to Assigned")').click();
|
||||
await page.waitForTimeout(1000);
|
||||
await page.locator('button:has-text("Move to InProgress")').click();
|
||||
await page.waitForTimeout(1000);
|
||||
await page.locator('button:has-text("Move to Review")').click();
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
// Verify in Review state
|
||||
await expect(page.locator('text=Review').first()).toBeVisible();
|
||||
|
||||
// Verify both forward (Done) and backward (InProgress) transitions available
|
||||
await expect(page.locator('button:has-text("Mark as Done")')).toBeVisible();
|
||||
await expect(page.locator('button:has-text("Back to InProgress")')).toBeVisible();
|
||||
|
||||
// Test backward transition
|
||||
await page.locator('button:has-text("Back to InProgress")').click();
|
||||
await page.waitForTimeout(1000);
|
||||
await expect(page.locator('text=InProgress').first()).toBeVisible();
|
||||
});
|
||||
|
||||
test('Manager can create and update tasks', async ({ page }) => {
|
||||
// Login as manager (not admin)
|
||||
await loginAs(page, USERS.manager.email, USERS.manager.password);
|
||||
await selectClub(page, 'club-1');
|
||||
|
||||
// Navigate to tasks
|
||||
await page.goto('/tasks');
|
||||
|
||||
// Verify "New Task" button is visible for Manager
|
||||
await expect(page.locator('text=New Task')).toBeVisible();
|
||||
|
||||
// Create a task
|
||||
await page.locator('text=New Task').click();
|
||||
await page.fill('input[name="title"]', 'Manager created task');
|
||||
await page.locator('button:has-text("Create Task")').click();
|
||||
await page.waitForURL(/\/tasks\/[0-9a-f-]+/);
|
||||
|
||||
// Verify task created successfully
|
||||
await expect(page.locator('text=Manager created task')).toBeVisible();
|
||||
await expect(page.locator('text=Open').first()).toBeVisible();
|
||||
|
||||
// Verify can transition states
|
||||
await expect(page.locator('button:has-text("Move to Assigned")')).toBeVisible();
|
||||
});
|
||||
|
||||
test('Task detail page shows all task information', async ({ page }) => {
|
||||
// Login and create a task with all fields
|
||||
await loginAs(page, USERS.admin.email, USERS.admin.password);
|
||||
await selectClub(page, 'club-1');
|
||||
|
||||
await page.goto('/tasks/new');
|
||||
await page.fill('input[name="title"]', 'Complete task details test');
|
||||
await page.fill('textarea[name="description"]', 'This task has all fields filled');
|
||||
|
||||
// Set due date (tomorrow)
|
||||
const tomorrow = new Date();
|
||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
const dueDateStr = tomorrow.toISOString().split('T')[0];
|
||||
await page.fill('input[name="dueDate"]', dueDateStr);
|
||||
|
||||
await page.locator('button:has-text("Create Task")').click();
|
||||
await page.waitForURL(/\/tasks\/[0-9a-f-]+/);
|
||||
|
||||
// Verify all fields are displayed
|
||||
await expect(page.locator('text=Complete task details test')).toBeVisible();
|
||||
await expect(page.locator('text=This task has all fields filled')).toBeVisible();
|
||||
await expect(page.locator('text=Open').first()).toBeVisible();
|
||||
await expect(page.locator('text=Unassigned')).toBeVisible();
|
||||
await expect(page.locator('text=Created At')).toBeVisible();
|
||||
await expect(page.locator('text=Due Date')).toBeVisible();
|
||||
});
|
||||
|
||||
test('Pagination controls work correctly', async ({ page }) => {
|
||||
// Login as admin
|
||||
await loginAs(page, USERS.admin.email, USERS.admin.password);
|
||||
await selectClub(page, 'club-1');
|
||||
|
||||
// Navigate to tasks
|
||||
await page.goto('/tasks');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// Check if pagination controls are visible (only if more than pageSize tasks)
|
||||
const paginationControls = page.locator('text=Page');
|
||||
const hasPagination = await paginationControls.isVisible().catch(() => false);
|
||||
|
||||
if (hasPagination) {
|
||||
// Verify "Previous" button is disabled on page 1
|
||||
const prevButton = page.locator('button:has-text("Previous")');
|
||||
await expect(prevButton).toBeDisabled();
|
||||
|
||||
// Click "Next" button
|
||||
const nextButton = page.locator('button:has-text("Next")');
|
||||
await nextButton.click();
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
// Verify page number increased
|
||||
await expect(page.locator('text=Page 2')).toBeVisible();
|
||||
|
||||
// Verify "Previous" button is now enabled
|
||||
await expect(prevButton).toBeEnabled();
|
||||
}
|
||||
});
|
||||
|
||||
test('Back button navigation from task detail', async ({ page }) => {
|
||||
// Login and navigate to tasks
|
||||
await loginAs(page, USERS.admin.email, USERS.admin.password);
|
||||
await selectClub(page, 'club-1');
|
||||
|
||||
await page.goto('/tasks/new');
|
||||
await page.fill('input[name="title"]', 'Test back navigation');
|
||||
await page.locator('button:has-text("Create Task")').click();
|
||||
await page.waitForURL(/\/tasks\/[0-9a-f-]+/);
|
||||
|
||||
// Click "Back to Tasks" link
|
||||
const backLink = page.locator('text=← Back to Tasks');
|
||||
await expect(backLink).toBeVisible();
|
||||
await backLink.click();
|
||||
|
||||
// Verify navigated back to task list
|
||||
await page.waitForURL(/\/tasks$/);
|
||||
await expect(page.locator('text=Tasks').first()).toBeVisible();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user