425 lines
20 KiB
TypeScript
425 lines
20 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
import { TEST_ORG_SLUG, navigateTo, waitForHydration } from './helpers';
|
|
|
|
// Unique suffix for this test run
|
|
const RUN = Date.now();
|
|
const EVENT_NAME = `PW Finance ${RUN}`;
|
|
const DEPT_NAME = `PW Fin Dept ${RUN}`;
|
|
|
|
let eventSlug = '';
|
|
let deptId = '';
|
|
|
|
async function gotoEventPath(page: import('@playwright/test').Page, subPath: string) {
|
|
await navigateTo(page, `/${TEST_ORG_SLUG}/events/${eventSlug}/${subPath}`);
|
|
}
|
|
|
|
async function gotoEvent(page: import('@playwright/test').Page) {
|
|
await navigateTo(page, `/${TEST_ORG_SLUG}/events/${eventSlug}`);
|
|
}
|
|
|
|
// ─── Serial flow: create event + dept, then test new pages ──────────────────
|
|
|
|
test.describe.serial('Finance Features - New Event Pages', () => {
|
|
// ════════════════════════════════════════════════════════════════════
|
|
// 0. SETUP: Create event + department
|
|
// ════════════════════════════════════════════════════════════════════
|
|
|
|
test('should create a test event', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await navigateTo(page, `/${TEST_ORG_SLUG}/events`);
|
|
|
|
await page.getByRole('button', { name: /New Event/i }).click();
|
|
const modal = page.locator('[role="dialog"]');
|
|
await expect(modal).toBeVisible({ timeout: 3000 });
|
|
|
|
await modal.locator('#event-name').fill(EVENT_NAME);
|
|
const submitBtn = modal.locator('button[type="submit"]');
|
|
await expect(submitBtn).toBeEnabled({ timeout: 3000 });
|
|
await submitBtn.click();
|
|
|
|
await page.waitForURL((url) => {
|
|
const path = url.pathname;
|
|
return path.includes(`/${TEST_ORG_SLUG}/events/`) && !path.endsWith('/events') && !path.endsWith('/events/');
|
|
}, { timeout: 15000 });
|
|
await waitForHydration(page);
|
|
|
|
const segments = new URL(page.url()).pathname.split('/');
|
|
eventSlug = segments[segments.indexOf('events') + 1];
|
|
expect(eventSlug).toBeTruthy();
|
|
});
|
|
|
|
test('should create a test department', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'team');
|
|
|
|
await page.getByRole('button', { name: /Add Department/i }).click();
|
|
const modal = page.locator('[role="dialog"]');
|
|
await expect(modal).toBeVisible({ timeout: 3000 });
|
|
await modal.locator('#dept-name').fill(DEPT_NAME);
|
|
await modal.getByRole('button', { name: /Save/i }).click();
|
|
await expect(modal).not.toBeVisible({ timeout: 10000 });
|
|
await expect(page.getByText(DEPT_NAME).first()).toBeVisible({ timeout: 5000 });
|
|
|
|
// Reload the event page so the sidebar picks up the new department
|
|
await gotoEvent(page);
|
|
const sidebar = page.locator('aside');
|
|
await expect(sidebar.getByText(DEPT_NAME).first()).toBeVisible({ timeout: 10000 });
|
|
await sidebar.getByText(DEPT_NAME).first().click();
|
|
await page.waitForURL(/\/dept\//, { timeout: 10000 });
|
|
const match = page.url().match(/\/dept\/([^/]+)/);
|
|
if (match) deptId = match[1];
|
|
expect(deptId).toBeTruthy();
|
|
});
|
|
|
|
// ════════════════════════════════════════════════════════════════════
|
|
// 1. SIDEBAR - new nav items
|
|
// ════════════════════════════════════════════════════════════════════
|
|
|
|
test('should show Sponsors, Contacts, and Files in sidebar', async ({ page }) => {
|
|
await gotoEvent(page);
|
|
// The event sidebar is the last <aside> on the page (org sidebar is first)
|
|
const eventSidebar = page.locator('aside').last();
|
|
await expect(eventSidebar.getByRole('link', { name: /Sponsors/ })).toBeVisible({ timeout: 5000 });
|
|
await expect(eventSidebar.getByRole('link', { name: /Contacts/ })).toBeVisible({ timeout: 5000 });
|
|
await expect(eventSidebar.getByRole('link', { name: /Files/ })).toBeVisible({ timeout: 5000 });
|
|
});
|
|
|
|
test('should navigate to Sponsors page via sidebar', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'sponsors');
|
|
// The h1 uses text-heading-sm class - match by text
|
|
await expect(page.locator('h1').filter({ hasText: 'Sponsors' })).toBeVisible({ timeout: 10000 });
|
|
await expect(page.getByText('Total Pipeline')).toBeVisible({ timeout: 5000 });
|
|
});
|
|
|
|
test('should navigate to Contacts page via sidebar', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'contacts');
|
|
await expect(page.locator('h1').filter({ hasText: 'Contacts' })).toBeVisible({ timeout: 10000 });
|
|
});
|
|
|
|
test('should navigate to Files page via sidebar', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'files');
|
|
await expect(page.locator('h1').filter({ hasText: 'Files' })).toBeVisible({ timeout: 10000 });
|
|
});
|
|
|
|
// ════════════════════════════════════════════════════════════════════
|
|
// 2. SPONSORS PAGE - empty state + CRUD
|
|
// ════════════════════════════════════════════════════════════════════
|
|
|
|
test('should show sponsors empty state with summary cards', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'sponsors');
|
|
await expect(page.getByText('Total Pipeline')).toBeVisible({ timeout: 5000 });
|
|
await expect(page.getByText('Confirmed / Active')).toBeVisible({ timeout: 5000 });
|
|
await expect(page.getByText('No sponsors yet')).toBeVisible({ timeout: 5000 });
|
|
});
|
|
|
|
test('should show Add Sponsor button and open modal', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'sponsors');
|
|
const addBtn = page.getByRole('button', { name: /Add Sponsor/i });
|
|
await expect(addBtn).toBeVisible({ timeout: 5000 });
|
|
await addBtn.click();
|
|
const modal = page.locator('.fixed.inset-0.z-\\[60\\]');
|
|
await expect(modal).toBeVisible({ timeout: 3000 });
|
|
await expect(modal.getByText('Add Sponsor')).toBeVisible();
|
|
// Form fields
|
|
await expect(modal.locator('#sp-name')).toBeVisible();
|
|
await expect(modal.locator('#sp-dept')).toBeVisible();
|
|
await expect(modal.locator('#sp-status')).toBeVisible();
|
|
await expect(modal.locator('#sp-amount')).toBeVisible();
|
|
// Close
|
|
await modal.getByRole('button', { name: /Cancel/i }).click();
|
|
await expect(modal).not.toBeVisible({ timeout: 3000 });
|
|
});
|
|
|
|
test('should create a sponsor and see it in the list', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
|
|
// Capture console errors to debug RLS/API issues
|
|
const consoleErrors: string[] = [];
|
|
page.on('console', (msg) => {
|
|
if (msg.type() === 'error') consoleErrors.push(msg.text());
|
|
});
|
|
|
|
await gotoEventPath(page, 'sponsors');
|
|
await page.getByRole('button', { name: /Add Sponsor/i }).click();
|
|
const modal = page.locator('.fixed.inset-0.z-\\[60\\]');
|
|
await expect(modal).toBeVisible({ timeout: 3000 });
|
|
|
|
// Ensure department select has a value (auto-selected first dept)
|
|
const deptSelect = modal.locator('#sp-dept');
|
|
await expect(deptSelect).toBeVisible({ timeout: 3000 });
|
|
const deptVal = await deptSelect.inputValue();
|
|
expect(deptVal).toBeTruthy();
|
|
|
|
await modal.locator('#sp-name').fill(`PW Sponsor A ${RUN}`);
|
|
await modal.locator('#sp-status').selectOption('confirmed');
|
|
await modal.locator('#sp-amount').fill('5000');
|
|
await modal.locator('#sp-contact').fill('John Doe');
|
|
|
|
const addBtn = modal.getByRole('button', { name: /^Add$/ });
|
|
await expect(addBtn).toBeEnabled({ timeout: 3000 });
|
|
await addBtn.click();
|
|
|
|
// Wait for the network request to complete and UI to update
|
|
await page.waitForTimeout(3000);
|
|
|
|
// Log any console errors for debugging
|
|
if (consoleErrors.length > 0) {
|
|
console.log('[DEBUG] Console errors during sponsor creation:', consoleErrors);
|
|
}
|
|
|
|
// Check if modal closed (success) or shows error
|
|
const modalStillVisible = await modal.isVisible();
|
|
if (modalStillVisible) {
|
|
// Take note - API likely failed
|
|
console.log('[DEBUG] Modal still visible after clicking Add - API may have failed');
|
|
// Check for error toast
|
|
const errorToast = page.getByText('Failed to save sponsor');
|
|
const hasError = await errorToast.isVisible().catch(() => false);
|
|
console.log('[DEBUG] Error toast visible:', hasError);
|
|
}
|
|
|
|
await expect(modal).not.toBeVisible({ timeout: 10000 });
|
|
await expect(page.getByText(`PW Sponsor A ${RUN}`).first()).toBeVisible({ timeout: 10000 });
|
|
});
|
|
|
|
test('should show updated summary after adding sponsor', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'sponsors');
|
|
// Pipeline should show €5,000.00
|
|
await expect(page.getByText('€5,000.00').first()).toBeVisible({ timeout: 5000 });
|
|
// Confirmed should also show €5,000.00
|
|
await expect(page.getByText('1').first()).toBeVisible({ timeout: 3000 });
|
|
});
|
|
|
|
test('should create a second sponsor', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'sponsors');
|
|
await page.getByRole('button', { name: /Add Sponsor/i }).click();
|
|
const modal = page.locator('.fixed.inset-0.z-\\[60\\]');
|
|
await expect(modal).toBeVisible({ timeout: 3000 });
|
|
|
|
await modal.locator('#sp-name').fill(`PW Sponsor B ${RUN}`);
|
|
await modal.locator('#sp-status').selectOption('prospect');
|
|
await modal.locator('#sp-amount').fill('2000');
|
|
|
|
await modal.getByRole('button', { name: /^Add$/ }).click();
|
|
await expect(modal).not.toBeVisible({ timeout: 5000 });
|
|
await expect(page.getByText(`PW Sponsor B ${RUN}`).first()).toBeVisible({ timeout: 5000 });
|
|
});
|
|
|
|
test('should filter sponsors by status', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'sponsors');
|
|
// Filter to Confirmed only
|
|
await page.locator('select').first().selectOption('confirmed');
|
|
await expect(page.getByText(`PW Sponsor A ${RUN}`).first()).toBeVisible({ timeout: 3000 });
|
|
await expect(page.getByText(`PW Sponsor B ${RUN}`)).not.toBeVisible({ timeout: 2000 });
|
|
// Reset to All
|
|
await page.locator('select').first().selectOption('all');
|
|
await expect(page.getByText(`PW Sponsor B ${RUN}`).first()).toBeVisible({ timeout: 3000 });
|
|
});
|
|
|
|
test('should search sponsors by name', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'sponsors');
|
|
await page.locator('input[placeholder="Search sponsors..."]').fill('Sponsor A');
|
|
await expect(page.getByText(`PW Sponsor A ${RUN}`).first()).toBeVisible({ timeout: 3000 });
|
|
await expect(page.getByText(`PW Sponsor B ${RUN}`)).not.toBeVisible({ timeout: 2000 });
|
|
// Clear search
|
|
await page.locator('input[placeholder="Search sponsors..."]').fill('');
|
|
await expect(page.getByText(`PW Sponsor B ${RUN}`).first()).toBeVisible({ timeout: 3000 });
|
|
});
|
|
|
|
test('should edit a sponsor via edit button', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'sponsors');
|
|
// Click edit on Sponsor A - target the grid row that directly contains the sponsor name
|
|
const sponsorText = page.getByText(`PW Sponsor A ${RUN}`).first();
|
|
await expect(sponsorText).toBeVisible({ timeout: 5000 });
|
|
const row = sponsorText.locator('xpath=ancestor::div[contains(@class,"grid")]').first();
|
|
await row.locator('button[title="Edit"]').click();
|
|
const modal = page.locator('.fixed.inset-0.z-\\[60\\]');
|
|
await expect(modal).toBeVisible({ timeout: 3000 });
|
|
await expect(modal.getByText('Edit Sponsor')).toBeVisible();
|
|
// Update amount
|
|
await modal.locator('#sp-amount').fill('6000');
|
|
await modal.getByRole('button', { name: /Save/i }).click();
|
|
await expect(modal).not.toBeVisible({ timeout: 5000 });
|
|
});
|
|
|
|
test('should delete a sponsor via delete button', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'sponsors');
|
|
// Delete Sponsor B - target the grid row
|
|
const sponsorText = page.getByText(`PW Sponsor B ${RUN}`).first();
|
|
await expect(sponsorText).toBeVisible({ timeout: 5000 });
|
|
const row = sponsorText.locator('xpath=ancestor::div[contains(@class,"grid")]').first();
|
|
await row.locator('button[title="Delete"]').click();
|
|
await expect(page.getByText(`PW Sponsor B ${RUN}`)).not.toBeVisible({ timeout: 5000 });
|
|
});
|
|
|
|
// ════════════════════════════════════════════════════════════════════
|
|
// 3. CONTACTS PAGE - empty state + CRUD
|
|
// ════════════════════════════════════════════════════════════════════
|
|
|
|
test('should show contacts page with header and controls', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'contacts');
|
|
await expect(page.locator('h1').filter({ hasText: 'Contacts' })).toBeVisible({ timeout: 5000 });
|
|
await expect(page.getByText('Organization-wide')).toBeVisible({ timeout: 3000 });
|
|
await expect(page.getByRole('button', { name: /Add Contact/i })).toBeVisible({ timeout: 3000 });
|
|
});
|
|
|
|
test('should open Add Contact modal', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'contacts');
|
|
await page.getByRole('button', { name: /Add Contact/i }).click();
|
|
const modal = page.locator('.fixed.inset-0.z-\\[60\\]');
|
|
await expect(modal).toBeVisible({ timeout: 3000 });
|
|
await expect(modal.getByText('Add Contact')).toBeVisible();
|
|
await expect(modal.locator('#ct-name')).toBeVisible();
|
|
await expect(modal.locator('#ct-company')).toBeVisible();
|
|
await expect(modal.locator('#ct-email')).toBeVisible();
|
|
await modal.getByRole('button', { name: /Cancel/i }).click();
|
|
await expect(modal).not.toBeVisible({ timeout: 3000 });
|
|
});
|
|
|
|
test('should create a contact and see it in the list', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'contacts');
|
|
await page.getByRole('button', { name: /Add Contact/i }).click();
|
|
const modal = page.locator('.fixed.inset-0.z-\\[60\\]');
|
|
await expect(modal).toBeVisible({ timeout: 3000 });
|
|
|
|
await modal.locator('#ct-name').fill(`PW Contact ${RUN}`);
|
|
await modal.locator('#ct-company').fill('Test Corp');
|
|
await modal.locator('#ct-email').fill('test@example.com');
|
|
await modal.locator('#ct-phone').fill('+372 5551234');
|
|
|
|
await modal.getByRole('button', { name: /^Add$/ }).click();
|
|
await expect(modal).not.toBeVisible({ timeout: 5000 });
|
|
await expect(page.getByText(`PW Contact ${RUN}`).first()).toBeVisible({ timeout: 5000 });
|
|
await expect(page.getByText('Test Corp').first()).toBeVisible({ timeout: 3000 });
|
|
});
|
|
|
|
test('should expand a contact to see details', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'contacts');
|
|
// Click the contact row to expand
|
|
await page.getByText(`PW Contact ${RUN}`).first().click();
|
|
// Should show email and phone
|
|
await expect(page.getByText('test@example.com').first()).toBeVisible({ timeout: 3000 });
|
|
await expect(page.getByText('+372 5551234').first()).toBeVisible({ timeout: 3000 });
|
|
});
|
|
|
|
test('should edit a contact', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'contacts');
|
|
// Expand first
|
|
await page.getByText(`PW Contact ${RUN}`).first().click();
|
|
// Click Edit in expanded area
|
|
await page.getByRole('button', { name: /^Edit$/ }).first().click();
|
|
const modal = page.locator('.fixed.inset-0.z-\\[60\\]');
|
|
await expect(modal).toBeVisible({ timeout: 3000 });
|
|
await expect(modal.getByText('Edit Contact')).toBeVisible();
|
|
await modal.locator('#ct-company').fill('Updated Corp');
|
|
await modal.getByRole('button', { name: /Save/i }).click();
|
|
await expect(modal).not.toBeVisible({ timeout: 5000 });
|
|
await expect(page.getByText('Updated Corp').first()).toBeVisible({ timeout: 5000 });
|
|
});
|
|
|
|
test('should delete a contact', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'contacts');
|
|
// Expand
|
|
await page.getByText(`PW Contact ${RUN}`).first().click();
|
|
// Delete
|
|
await page.getByRole('button', { name: /^Delete$/ }).first().click();
|
|
await expect(page.getByText(`PW Contact ${RUN}`)).not.toBeVisible({ timeout: 5000 });
|
|
});
|
|
|
|
test('should filter contacts by category', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'contacts');
|
|
// Create a vendor contact first
|
|
await page.getByRole('button', { name: /Add Contact/i }).click();
|
|
const modal = page.locator('.fixed.inset-0.z-\\[60\\]');
|
|
await expect(modal).toBeVisible({ timeout: 3000 });
|
|
await modal.locator('#ct-name').fill(`PW Vendor ${RUN}`);
|
|
await modal.locator('#ct-category').selectOption('vendor');
|
|
await modal.getByRole('button', { name: /^Add$/ }).click();
|
|
await expect(modal).not.toBeVisible({ timeout: 5000 });
|
|
await expect(page.getByText(`PW Vendor ${RUN}`).first()).toBeVisible({ timeout: 5000 });
|
|
|
|
// Filter by vendor
|
|
await page.locator('select').first().selectOption('vendor');
|
|
await expect(page.getByText(`PW Vendor ${RUN}`).first()).toBeVisible({ timeout: 3000 });
|
|
});
|
|
|
|
// ════════════════════════════════════════════════════════════════════
|
|
// 4. FILES PAGE - empty/no-folder state
|
|
// ════════════════════════════════════════════════════════════════════
|
|
|
|
test('should show Files page with header', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'files');
|
|
await expect(page.getByRole('heading', { name: 'Files' })).toBeVisible({ timeout: 5000 });
|
|
});
|
|
|
|
// ════════════════════════════════════════════════════════════════════
|
|
// 5. FINANCES PAGE - updated tabs
|
|
// ════════════════════════════════════════════════════════════════════
|
|
|
|
test('should load Finances page with tab buttons', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'finances');
|
|
await expect(page.getByRole('heading', { name: 'Finances' })).toBeVisible({ timeout: 5000 });
|
|
// Tab buttons
|
|
await expect(page.getByRole('button', { name: 'Overview' })).toBeVisible({ timeout: 3000 });
|
|
await expect(page.getByRole('button', { name: 'Details' })).toBeVisible({ timeout: 3000 });
|
|
await expect(page.getByRole('button', { name: 'Sponsors' })).toBeVisible({ timeout: 3000 });
|
|
});
|
|
|
|
test('should show Overview tab with department table headers', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'finances');
|
|
// Overview tab should be active by default
|
|
await expect(page.getByText('Planned Budget')).toBeVisible({ timeout: 5000 });
|
|
});
|
|
|
|
test('should switch to Details tab', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'finances');
|
|
await page.getByRole('button', { name: 'Details' }).click();
|
|
// Details tab content - should show line items or empty state
|
|
await page.waitForTimeout(500);
|
|
// The details tab should be visible (either items or empty)
|
|
const detailsVisible = await page.getByText('No budget items').isVisible().catch(() => false);
|
|
const itemsVisible = await page.locator('.grid.grid-cols-12').first().isVisible().catch(() => false);
|
|
expect(detailsVisible || itemsVisible).toBeTruthy();
|
|
});
|
|
|
|
test('should switch to Sponsors tab', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'finances');
|
|
await page.getByRole('button', { name: 'Sponsors' }).click();
|
|
await page.waitForTimeout(500);
|
|
// Should show sponsor allocation content or empty state
|
|
const hasSponsors = await page.getByText('No funded sponsors').isVisible().catch(() => false);
|
|
const hasSponsorCards = await page.locator('.bg-surface\\/30').first().isVisible().catch(() => false);
|
|
expect(hasSponsors || hasSponsorCards).toBeTruthy();
|
|
});
|
|
|
|
test('should show department row in Overview with our department', async ({ page }) => {
|
|
test.setTimeout(60000);
|
|
await gotoEventPath(page, 'finances');
|
|
// Our department should appear in the overview table
|
|
await expect(page.getByText(DEPT_NAME).first()).toBeVisible({ timeout: 5000 });
|
|
});
|
|
});
|