91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
|
import { test, expect } from '@playwright/test'
|
||
|
|
|
||
|
|
/** Click the 7d time range preset so hardcoded mock data (March 18) is visible. */
|
||
|
|
async function widenTimeRange(page: import('@playwright/test').Page) {
|
||
|
|
await page.getByRole('tab', { name: '7d' }).click()
|
||
|
|
}
|
||
|
|
|
||
|
|
test.describe('Dashboard (/apps)', () => {
|
||
|
|
test('renders KPI stat cards and exchange table', async ({ page }) => {
|
||
|
|
await page.goto('/apps')
|
||
|
|
await widenTimeRange(page)
|
||
|
|
|
||
|
|
// KPI health strip renders
|
||
|
|
await expect(page.getByText('Recent Exchanges')).toBeVisible()
|
||
|
|
|
||
|
|
// Table headers
|
||
|
|
await expect(page.getByRole('columnheader', { name: 'Status' })).toBeVisible()
|
||
|
|
await expect(page.getByRole('columnheader', { name: 'Route' })).toBeVisible()
|
||
|
|
await expect(page.getByRole('columnheader', { name: 'Application' })).toBeVisible()
|
||
|
|
await expect(page.getByRole('columnheader', { name: 'Exchange ID' })).toBeVisible()
|
||
|
|
|
||
|
|
// Table has data rows
|
||
|
|
const rows = page.locator('table tbody tr')
|
||
|
|
await expect(rows.first()).toBeVisible()
|
||
|
|
expect(await rows.count()).toBeGreaterThan(0)
|
||
|
|
|
||
|
|
// Sidebar renders with app names
|
||
|
|
await expect(page.getByText('order-service').first()).toBeVisible()
|
||
|
|
await expect(page.getByText('payment-svc').first()).toBeVisible()
|
||
|
|
|
||
|
|
// TopBar renders
|
||
|
|
await expect(page.getByLabel('Breadcrumb').getByText('Applications')).toBeVisible()
|
||
|
|
await expect(page.getByText('PRODUCTION')).toBeVisible()
|
||
|
|
|
||
|
|
// Shortcuts bar
|
||
|
|
await expect(page.getByText('Ctrl+K').first()).toBeVisible()
|
||
|
|
})
|
||
|
|
|
||
|
|
test('clicking a table row opens the detail panel', async ({ page }) => {
|
||
|
|
await page.goto('/apps')
|
||
|
|
await widenTimeRange(page)
|
||
|
|
|
||
|
|
// Click the first data row
|
||
|
|
const firstRow = page.locator('table tbody tr').first()
|
||
|
|
await expect(firstRow).toBeVisible()
|
||
|
|
await firstRow.click()
|
||
|
|
|
||
|
|
// Detail panel should open — look for "Open full details" link
|
||
|
|
await expect(page.getByText('Open full details')).toBeVisible()
|
||
|
|
// Overview section
|
||
|
|
await expect(page.getByText('Correlation').first()).toBeVisible()
|
||
|
|
})
|
||
|
|
|
||
|
|
test('navigating to app-scoped dashboard filters exchanges', async ({ page }) => {
|
||
|
|
await page.goto('/apps/order-service')
|
||
|
|
|
||
|
|
// Breadcrumb shows app scope
|
||
|
|
await expect(page.getByLabel('Breadcrumb').getByText('order-service')).toBeVisible()
|
||
|
|
|
||
|
|
// Table should still render
|
||
|
|
await expect(page.getByText('Recent Exchanges')).toBeVisible()
|
||
|
|
})
|
||
|
|
|
||
|
|
test('sidebar navigation works', async ({ page }) => {
|
||
|
|
await page.goto('/apps')
|
||
|
|
|
||
|
|
// Click on an app in the sidebar
|
||
|
|
const sidebarApp = page.getByText('order-service').first()
|
||
|
|
await sidebarApp.click()
|
||
|
|
|
||
|
|
// URL should change to the app scope
|
||
|
|
await expect(page).toHaveURL(/\/apps\/order-service/)
|
||
|
|
})
|
||
|
|
|
||
|
|
test('inspect button navigates to exchange detail', async ({ page }) => {
|
||
|
|
await page.goto('/apps')
|
||
|
|
await widenTimeRange(page)
|
||
|
|
|
||
|
|
// Wait for table rows to appear
|
||
|
|
const firstRow = page.locator('table tbody tr').first()
|
||
|
|
await expect(firstRow).toBeVisible()
|
||
|
|
|
||
|
|
// Click the inspect button (↗) on first row
|
||
|
|
const inspectBtn = firstRow.locator('button[title="Inspect exchange"]')
|
||
|
|
await inspectBtn.click()
|
||
|
|
|
||
|
|
// Should navigate to exchange detail page
|
||
|
|
await expect(page).toHaveURL(/\/exchanges\//)
|
||
|
|
})
|
||
|
|
})
|