86 lines
3.5 KiB
TypeScript
86 lines
3.5 KiB
TypeScript
|
import { test, expect } from '@playwright/test';
|
||
|
|
import { login, navigateTo, PORT_SLUG } from './helpers';
|
||
|
|
|
||
|
|
test.describe('Dashboard', () => {
|
||
|
|
test.beforeEach(async ({ page }) => {
|
||
|
|
await login(page, 'super_admin');
|
||
|
|
});
|
||
|
|
|
||
|
|
// Test 1: Dashboard is the landing page after login
|
||
|
|
test('dashboard is the landing page after login', async ({ page }) => {
|
||
|
|
const url = page.url();
|
||
|
|
expect(url).toContain(`/${PORT_SLUG}`);
|
||
|
|
// Should see the dashboard shell, not a "Coming in Layer" stub
|
||
|
|
await expect(page.locator('[data-testid="dashboard-shell"], .dashboard-shell, h1').first()).toBeVisible({
|
||
|
|
timeout: 10_000,
|
||
|
|
});
|
||
|
|
// Should NOT see the old placeholder text
|
||
|
|
await expect(page.getByText('Coming in Layer')).not.toBeVisible({ timeout: 3_000 }).catch(() => {});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Test 2: All 4 KPI cards render
|
||
|
|
test('all 4 KPI cards render without errors', async ({ page }) => {
|
||
|
|
await navigateTo(page, '/');
|
||
|
|
await page.waitForTimeout(3_000);
|
||
|
|
|
||
|
|
// Look for KPI-related text/elements — the cards should contain numbers or labels
|
||
|
|
const cards = page.locator('[class*="card"], [data-testid*="kpi"]');
|
||
|
|
const cardCount = await cards.count();
|
||
|
|
expect(cardCount).toBeGreaterThanOrEqual(4);
|
||
|
|
|
||
|
|
// Verify no "Widget unavailable" error messages visible
|
||
|
|
const errorMessages = page.getByText('Widget unavailable');
|
||
|
|
const errorCount = await errorMessages.count();
|
||
|
|
expect(errorCount).toBe(0);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Test 3: Pipeline chart shows bars for stages
|
||
|
|
test('pipeline chart renders with stage bars', async ({ page }) => {
|
||
|
|
await navigateTo(page, '/');
|
||
|
|
await page.waitForTimeout(3_000);
|
||
|
|
|
||
|
|
// Recharts renders SVG bars — look for the chart container and SVG elements
|
||
|
|
const chartSection = page.getByText('Pipeline Overview').first();
|
||
|
|
await expect(chartSection).toBeVisible({ timeout: 10_000 });
|
||
|
|
|
||
|
|
// Should have an SVG with rect elements (bars) or the recharts container
|
||
|
|
const svg = page.locator('.recharts-wrapper svg, .recharts-responsive-container svg').first();
|
||
|
|
await expect(svg).toBeVisible({ timeout: 5_000 });
|
||
|
|
});
|
||
|
|
|
||
|
|
// Test 4: Activity feed shows recent entries
|
||
|
|
test('activity feed shows recent entries', async ({ page }) => {
|
||
|
|
await navigateTo(page, '/');
|
||
|
|
await page.waitForTimeout(3_000);
|
||
|
|
|
||
|
|
const activitySection = page.getByText('Recent Activity').first();
|
||
|
|
await expect(activitySection).toBeVisible({ timeout: 10_000 });
|
||
|
|
|
||
|
|
// Activity feed should have at least one entry or an empty state
|
||
|
|
const feedItems = page.locator('[class*="activity"] a, [class*="activity"] [role="link"]');
|
||
|
|
const emptyState = page.getByText(/no recent activity/i);
|
||
|
|
|
||
|
|
const hasItems = await feedItems.count() > 0;
|
||
|
|
const hasEmpty = await emptyState.isVisible({ timeout: 2_000 }).catch(() => false);
|
||
|
|
expect(hasItems || hasEmpty).toBeTruthy();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Test 5: Click activity feed entry navigates to entity
|
||
|
|
test('clicking activity feed entry navigates to entity', async ({ page }) => {
|
||
|
|
await navigateTo(page, '/');
|
||
|
|
await page.waitForTimeout(3_000);
|
||
|
|
|
||
|
|
// Find a clickable link in the activity feed
|
||
|
|
const feedLink = page.locator('[class*="activity"] a').first();
|
||
|
|
if (await feedLink.isVisible({ timeout: 5_000 }).catch(() => false)) {
|
||
|
|
const href = await feedLink.getAttribute('href');
|
||
|
|
await feedLink.click();
|
||
|
|
await page.waitForTimeout(2_000);
|
||
|
|
|
||
|
|
// Should have navigated away from the dashboard root
|
||
|
|
const currentUrl = page.url();
|
||
|
|
expect(currentUrl).toContain(`/${PORT_SLUG}/`);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|