0406778c44
The dashboard and residential interest smoke tests were intermittently
failing with the page rendering empty/skeleton state. Root causes:
1. ui-store persisted currentPortId/Slug, but those are URL-derived state.
After login lands on /<first-port-by-name>/dashboard, localStorage holds
that port. Hard-navigating to /port-nimara/... rehydrated the store with
the stale id, and useQuery fired with the wrong port before
PortProvider's URL-sync useEffect could correct it. Drop both fields
from partialize — PortProvider re-derives them from the route every
navigation.
2. apiFetch's slug-to-port fallback fired N parallel /api/v1/admin/ports
calls when N components mounted simultaneously with an empty store.
Dedupe in-flight lookups so a stampede collapses into one round-trip.
Also tightened four flaky smoke tests that depended on a fixed 3s wait or
non-waiting isVisible({timeout}) — replaced with expect(...).toBeVisible
or expect.poll so they handle dev-mode JIT cold-start delays cleanly.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
92 lines
3.8 KiB
TypeScript
92 lines
3.8 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 loads for an authenticated user
|
|
test('dashboard is the landing page after login', async ({ page }) => {
|
|
// Login (via beforeEach) lands on /dashboard which has no route match;
|
|
// navigate to the port-scoped dashboard to verify the real content renders.
|
|
await navigateTo(page, '/');
|
|
expect(page.url()).toContain(`/${PORT_SLUG}`);
|
|
// Should see the dashboard shell (KPI cards are always rendered at the top).
|
|
// Dev-mode JIT compilation can push first-hit render past 10s.
|
|
await expect(page.getByText(/total clients/i).first()).toBeVisible({
|
|
timeout: 15_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, '/');
|
|
|
|
// Wait for the KPI cards to actually render (dev mode JIT can take >3s on
|
|
// a cold dashboard hit). The cards expose stable label text we can poll on.
|
|
await expect(page.getByText('Total Clients')).toBeVisible({ timeout: 15_000 });
|
|
|
|
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 renders action badges (create/update/delete/archive/restore) or an empty state
|
|
const actionBadge = page.getByText(/^(create|update|delete|archive|restore)$/i).first();
|
|
const emptyState = page.getByText(/no recent activity/i);
|
|
|
|
const hasBadge = await actionBadge.isVisible({ timeout: 3_000 }).catch(() => false);
|
|
const hasEmpty = await emptyState.isVisible({ timeout: 2_000 }).catch(() => false);
|
|
expect(hasBadge || 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)) {
|
|
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}/`);
|
|
}
|
|
});
|
|
});
|