386 lines
15 KiB
TypeScript
386 lines
15 KiB
TypeScript
import { expect, test } from '../../core/fixtures/base.fixture'
|
|
import { waitForNetworkIdle } from '../../core/utils/test-helpers'
|
|
import { DashboardPage } from './pages/dashboard.page'
|
|
|
|
test.describe('Dashboard', () => {
|
|
test.beforeEach(async ({ dashboardPage }) => {
|
|
await dashboardPage.goto()
|
|
})
|
|
|
|
test.describe('Dashboard Display', () => {
|
|
test('should display dashboard page', async ({ dashboardPage }) => {
|
|
await expect(dashboardPage.pageTitle).toBeVisible()
|
|
})
|
|
|
|
test('should display all chart cards', async ({ dashboardPage }) => {
|
|
// Check that all four main charts are visible
|
|
await expect(dashboardPage.logVolumeChart).toBeVisible()
|
|
await expect(dashboardPage.tokenUsageChart).toBeVisible()
|
|
await expect(dashboardPage.costChart).toBeVisible()
|
|
await expect(dashboardPage.modelUsageChart).toBeVisible()
|
|
})
|
|
|
|
test('should display date time picker', async ({ dashboardPage }) => {
|
|
// Date picker should be visible (may be a button with date text)
|
|
const datePicker = dashboardPage.page.locator('button').filter({ hasText: /Last/i }).or(
|
|
dashboardPage.page.locator('[data-testid="dashboard-date-picker"]')
|
|
)
|
|
await expect(datePicker.first()).toBeVisible()
|
|
})
|
|
})
|
|
|
|
test.describe('Time Period Selection', () => {
|
|
test('should filter by time period (full flow)', async ({ dashboardPage }) => {
|
|
// Time period control must exist and be visible (no skip)
|
|
const trigger = dashboardPage.getDatePickerTrigger()
|
|
await expect(trigger).toBeVisible({ timeout: 10000 })
|
|
|
|
// Let initial chart load finish so the refetch we wait for is the one from the period change
|
|
await dashboardPage.waitForChartsToLoad()
|
|
|
|
// Wait for the chart data request that fires when we change the period (proves filter is applied)
|
|
const responsePromise = dashboardPage.page.waitForResponse(
|
|
(res) => res.url().includes('/logs/histogram') && res.status() === 200,
|
|
{ timeout: 15000 }
|
|
)
|
|
|
|
await dashboardPage.selectTimePeriod('1h')
|
|
|
|
// UI: trigger shows the selected period
|
|
const label = await dashboardPage.getSelectedPeriodLabel()
|
|
expect(label).toContain('Last hour')
|
|
|
|
// URL: selection is reflected in query state
|
|
const url = dashboardPage.page.url()
|
|
expect(url).toMatch(/period=1h|start_time=\d+&end_time=\d+/)
|
|
|
|
// Data: dashboard refetched with the new range
|
|
await responsePromise
|
|
})
|
|
|
|
test('should change time period to last hour', async ({ dashboardPage }) => {
|
|
await dashboardPage.selectTimePeriod('1h')
|
|
|
|
const label = await dashboardPage.getSelectedPeriodLabel()
|
|
expect(label).toContain('Last hour')
|
|
|
|
const url = dashboardPage.page.url()
|
|
expect(url).toMatch(/period=1h|start_time=\d+&end_time=\d+/)
|
|
})
|
|
|
|
test('should change time period to last 7 days', async ({ dashboardPage }) => {
|
|
await dashboardPage.selectTimePeriod('7d')
|
|
|
|
const label = await dashboardPage.getSelectedPeriodLabel()
|
|
expect(label).toContain('Last 7 days')
|
|
|
|
const url = dashboardPage.page.url()
|
|
expect(url).toMatch(/period=7d|start_time=\d+&end_time=\d+/)
|
|
})
|
|
|
|
test('should change time period to last 30 days', async ({ dashboardPage }) => {
|
|
await dashboardPage.selectTimePeriod('30d')
|
|
|
|
const label = await dashboardPage.getSelectedPeriodLabel()
|
|
expect(label).toContain('Last 30 days')
|
|
|
|
const url = dashboardPage.page.url()
|
|
expect(url).toMatch(/period=30d|start_time=\d+&end_time=\d+/)
|
|
})
|
|
})
|
|
|
|
test.describe('Chart Type Toggling', () => {
|
|
test('should toggle volume chart type', async ({ dashboardPage }) => {
|
|
// Get initial toggle state from DOM
|
|
const initialToggle = dashboardPage.volumeChartToggle
|
|
const initialState = await dashboardPage.getChartToggleState(initialToggle)
|
|
|
|
// Toggle the chart (method handles waiting internally)
|
|
await dashboardPage.toggleVolumeChartType()
|
|
|
|
// Get new toggle state
|
|
const newToggle = dashboardPage.volumeChartToggle
|
|
const newState = await dashboardPage.getChartToggleState(newToggle)
|
|
|
|
// Chart type should have changed (state should be different)
|
|
expect(newState).not.toBe(initialState)
|
|
})
|
|
|
|
test('should toggle token chart type', async ({ dashboardPage }) => {
|
|
const initialToggle = dashboardPage.tokenChartToggle
|
|
const initialState = await dashboardPage.getChartToggleState(initialToggle)
|
|
|
|
await dashboardPage.toggleTokenChartType()
|
|
|
|
const newToggle = dashboardPage.tokenChartToggle
|
|
const newState = await dashboardPage.getChartToggleState(newToggle)
|
|
|
|
expect(newState).not.toBe(initialState)
|
|
})
|
|
|
|
test('should toggle cost chart type', async ({ dashboardPage }) => {
|
|
const initialToggle = dashboardPage.costChartToggle
|
|
const initialState = await dashboardPage.getChartToggleState(initialToggle)
|
|
|
|
await dashboardPage.toggleCostChartType()
|
|
|
|
const newToggle = dashboardPage.costChartToggle
|
|
const newState = await dashboardPage.getChartToggleState(newToggle)
|
|
|
|
expect(newState).not.toBe(initialState)
|
|
})
|
|
|
|
test('should toggle model chart type', async ({ dashboardPage }) => {
|
|
const initialToggle = dashboardPage.modelChartToggle
|
|
const initialState = await dashboardPage.getChartToggleState(initialToggle)
|
|
|
|
await dashboardPage.toggleModelChartType()
|
|
|
|
const newToggle = dashboardPage.modelChartToggle
|
|
const newState = await dashboardPage.getChartToggleState(newToggle)
|
|
|
|
expect(newState).not.toBe(initialState)
|
|
})
|
|
})
|
|
|
|
test.describe('Model Filtering', () => {
|
|
test('should filter cost chart by model', async ({ dashboardPage }) => {
|
|
// Wait for charts to fully load
|
|
await dashboardPage.waitForChartsToLoad()
|
|
|
|
// Try to filter by a specific model if available
|
|
const costModelFilter = dashboardPage.costModelFilter
|
|
const isVisible = await costModelFilter.isVisible().catch(() => false)
|
|
|
|
if (isVisible) {
|
|
await dashboardPage.filterCostChartByModel('all')
|
|
|
|
// Check that filter value is "All Models"
|
|
const newSelected = await dashboardPage.getSelectedModel(costModelFilter)
|
|
expect(newSelected).toContain('All Models')
|
|
}
|
|
})
|
|
|
|
test('should filter usage chart by model', async ({ dashboardPage }) => {
|
|
// Wait for charts to fully load
|
|
await dashboardPage.waitForChartsToLoad()
|
|
|
|
const usageModelFilter = dashboardPage.usageModelFilter
|
|
const isVisible = await usageModelFilter.isVisible().catch(() => false)
|
|
|
|
if (isVisible) {
|
|
await dashboardPage.filterUsageChartByModel('all')
|
|
|
|
// Check that filter value is "All Models"
|
|
const newSelected = await dashboardPage.getSelectedModel(usageModelFilter)
|
|
expect(newSelected).toContain('All Models')
|
|
}
|
|
})
|
|
})
|
|
|
|
test.describe('Chart Loading States', () => {
|
|
test('should show loading state initially', async ({ dashboardPage }) => {
|
|
// Navigate to a fresh dashboard
|
|
await dashboardPage.page.reload()
|
|
await dashboardPage.waitForPageLoad()
|
|
|
|
// Charts may show loading state briefly
|
|
// This test verifies the page loads without errors
|
|
await expect(dashboardPage.pageTitle).toBeVisible({ timeout: 10000 })
|
|
})
|
|
})
|
|
|
|
test.describe('URL State Management', () => {
|
|
test('should preserve chart state in URL', async ({ dashboardPage }) => {
|
|
// Change some settings
|
|
await dashboardPage.selectTimePeriod('7d')
|
|
await dashboardPage.toggleVolumeChartType()
|
|
|
|
// Check URL for period (time period should still be in URL)
|
|
const url = dashboardPage.page.url()
|
|
expect(url).toContain('period=7d')
|
|
|
|
// Check DOM state for chart toggle (may or may not be in URL)
|
|
const toggleState = await dashboardPage.getChartToggleState(dashboardPage.volumeChartToggle)
|
|
expect(toggleState).toBeTruthy()
|
|
})
|
|
|
|
test('should restore state from URL on page load', async ({ dashboardPage }) => {
|
|
// Set URL with specific state
|
|
await dashboardPage.page.goto('/workspace/dashboard?period=7d&volume_chart=line')
|
|
await waitForNetworkIdle(dashboardPage.page)
|
|
await dashboardPage.waitForChartsToLoad()
|
|
|
|
// Verify page loaded with correct state from URL
|
|
const url = dashboardPage.page.url()
|
|
expect(url).toContain('period=7d')
|
|
// volume_chart=line was in the URL - verify exact value persisted
|
|
expect(url).toContain('volume_chart=line')
|
|
})
|
|
})
|
|
|
|
test.describe('Chart Data Validation', () => {
|
|
test('should render chart elements after data loads', async ({ dashboardPage }) => {
|
|
// Wait for charts to load
|
|
await dashboardPage.waitForChartsToLoad()
|
|
|
|
// Check that each chart card has a canvas or chart surface SVG (recharts-surface = actual chart, not icons)
|
|
const volumeChartContent = dashboardPage.logVolumeChart.locator('canvas, svg.recharts-surface')
|
|
const tokenChartContent = dashboardPage.tokenUsageChart.locator('canvas, svg.recharts-surface')
|
|
const costChartContent = dashboardPage.costChart.locator('canvas, svg.recharts-surface')
|
|
const modelChartContent = dashboardPage.modelUsageChart.locator('canvas, svg.recharts-surface')
|
|
|
|
// Each chart card should have canvas or SVG content (chart library renders into these)
|
|
const volumeCount = await volumeChartContent.count()
|
|
const tokenCount = await tokenChartContent.count()
|
|
const costCount = await costChartContent.count()
|
|
const modelCount = await modelChartContent.count()
|
|
|
|
// All four chart cards should have rendered content (count > 0)
|
|
expect(volumeCount).toBeGreaterThan(0)
|
|
expect(tokenCount).toBeGreaterThan(0)
|
|
expect(costCount).toBeGreaterThan(0)
|
|
expect(modelCount).toBeGreaterThan(0)
|
|
})
|
|
|
|
test('should show chart legends', async ({ dashboardPage }) => {
|
|
await dashboardPage.waitForChartsToLoad()
|
|
|
|
// Check that chart actions (legends/toggles) are visible
|
|
const volumeActions = dashboardPage.page.locator('[data-testid="chart-log-volume-actions"]')
|
|
const tokenActions = dashboardPage.page.locator('[data-testid="chart-token-usage-actions"]')
|
|
|
|
// Actions should be visible (they contain legends and toggles)
|
|
await expect(volumeActions).toBeVisible()
|
|
await expect(tokenActions).toBeVisible()
|
|
})
|
|
|
|
test('should not show loading skeletons after data loads', async ({ dashboardPage }) => {
|
|
await dashboardPage.waitForChartsToLoad()
|
|
|
|
// Check that no skeletons are visible (data has loaded)
|
|
const skeletons = dashboardPage.page.locator('[data-testid="skeleton"]')
|
|
const skeletonCount = await skeletons.count()
|
|
|
|
expect(skeletonCount).toBe(0)
|
|
})
|
|
})
|
|
|
|
test.describe('Chart Interactions', () => {
|
|
test('should toggle between bar and line chart for volume', async ({ dashboardPage }) => {
|
|
await dashboardPage.waitForChartsToLoad()
|
|
|
|
// Get initial toggle state
|
|
const initialState = await dashboardPage.getChartToggleState(dashboardPage.volumeChartToggle)
|
|
|
|
// Toggle volume chart type
|
|
await dashboardPage.toggleVolumeChartType()
|
|
|
|
// DOM state should change (chart type toggles are in DOM, not URL)
|
|
const newState = await dashboardPage.getChartToggleState(dashboardPage.volumeChartToggle)
|
|
expect(newState).not.toBe(initialState)
|
|
})
|
|
|
|
test('should update chart when time period changes', async ({ dashboardPage }) => {
|
|
await dashboardPage.waitForChartsToLoad()
|
|
|
|
const initialUrl = dashboardPage.page.url()
|
|
|
|
await dashboardPage.selectTimePeriod('1h')
|
|
|
|
// Trigger should show new period (filter was applied)
|
|
const label = await dashboardPage.getSelectedPeriodLabel()
|
|
expect(label).toContain('Last hour')
|
|
|
|
const newUrl = dashboardPage.page.url()
|
|
expect(newUrl).toMatch(/period=1h|start_time=\d+&end_time=\d+/)
|
|
expect(newUrl).not.toBe(initialUrl)
|
|
})
|
|
|
|
test('should sync model filter between cost and usage charts', async ({ dashboardPage }) => {
|
|
await dashboardPage.waitForChartsToLoad()
|
|
|
|
// Check if model filters are visible
|
|
const costFilterVisible = await dashboardPage.costModelFilter.isVisible().catch(() => false)
|
|
const usageFilterVisible = await dashboardPage.usageModelFilter.isVisible().catch(() => false)
|
|
|
|
if (costFilterVisible && usageFilterVisible) {
|
|
// Filter cost chart
|
|
await dashboardPage.filterCostChartByModel('all')
|
|
|
|
// Verify filter was applied (check DOM state, not URL)
|
|
const selectedModel = await dashboardPage.getSelectedModel(dashboardPage.costModelFilter)
|
|
expect(selectedModel).toContain('All Models')
|
|
}
|
|
})
|
|
|
|
test('should display correct time period labels', async ({ dashboardPage }) => {
|
|
const periods: Array<'1h' | '6h' | '24h' | '7d' | '30d'> = ['1h', '6h', '24h', '7d', '30d']
|
|
|
|
for (const period of periods) {
|
|
await dashboardPage.selectTimePeriod(period)
|
|
// Assert the date picker trigger shows the selected period (actual selected value)
|
|
const label = await dashboardPage.getSelectedPeriodLabel()
|
|
const expected = DashboardPage.PERIOD_LABELS[period]
|
|
expect(label).toContain(expected)
|
|
}
|
|
})
|
|
})
|
|
|
|
test.describe('Error States', () => {
|
|
test('should handle empty data gracefully', async ({ dashboardPage }) => {
|
|
// Navigate with very short time range that may have no data
|
|
await dashboardPage.page.goto('/workspace/dashboard?period=1h')
|
|
await waitForNetworkIdle(dashboardPage.page)
|
|
await dashboardPage.waitForChartsToLoad()
|
|
|
|
// Page should still render without errors
|
|
await expect(dashboardPage.pageTitle).toBeVisible()
|
|
|
|
// All chart containers should still be visible
|
|
await expect(dashboardPage.logVolumeChart).toBeVisible()
|
|
await expect(dashboardPage.tokenUsageChart).toBeVisible()
|
|
})
|
|
})
|
|
|
|
test.describe('Custom Date Range', () => {
|
|
test('should open custom date range picker', async ({ dashboardPage }) => {
|
|
await dashboardPage.waitForChartsToLoad()
|
|
|
|
// Look for date picker button
|
|
const datePicker = dashboardPage.page.getByRole('button').filter({ hasText: /Last|Custom/i }).first()
|
|
const isVisible = await datePicker.isVisible().catch(() => false)
|
|
|
|
if (isVisible) {
|
|
await datePicker.click()
|
|
|
|
// Should see date range options or calendar
|
|
const calendarVisible = await dashboardPage.page.locator('[role="dialog"], [role="listbox"]').isVisible().catch(() => false)
|
|
const optionsVisible = await dashboardPage.page.getByRole('option').first().isVisible().catch(() => false)
|
|
|
|
expect(calendarVisible || optionsVisible).toBe(true)
|
|
|
|
// Close the picker
|
|
await dashboardPage.page.keyboard.press('Escape')
|
|
}
|
|
})
|
|
|
|
test('should handle empty data for custom range', async ({ dashboardPage }) => {
|
|
// Set a custom time range that likely has no data
|
|
await dashboardPage.page.goto('/workspace/dashboard?period=1h')
|
|
await waitForNetworkIdle(dashboardPage.page)
|
|
await dashboardPage.waitForChartsToLoad()
|
|
|
|
// Charts should still be visible even with no data
|
|
await expect(dashboardPage.logVolumeChart).toBeVisible()
|
|
await expect(dashboardPage.costChart).toBeVisible()
|
|
|
|
// Page should not show error alerts (not matching chart legend "Error")
|
|
const errorAlert = dashboardPage.page.locator('[role="alert"][data-variant="destructive"], .text-destructive, [data-sonner-toast][data-type="error"]')
|
|
const hasErrorAlert = await errorAlert.count() > 0
|
|
expect(hasErrorAlert).toBe(false)
|
|
})
|
|
})
|
|
|
|
})
|