|
| 1 | +import { test } from '@playwright/test'; |
| 2 | +import { GitHubTab } from './pages/GitHubTab'; |
| 3 | +import { DashboardPage } from './pages/DashboardPage'; |
| 4 | + |
| 5 | + |
| 6 | +test.describe('AgentModeViewer Component', () => { |
| 7 | + |
| 8 | + let dashboard: DashboardPage; |
| 9 | + |
| 10 | + test.beforeAll(async ({ browser }) => { |
| 11 | + const page = await browser.newPage(); |
| 12 | + await page.goto('/orgs/octo-demo-org?mock=true'); |
| 13 | + |
| 14 | + dashboard = new DashboardPage(page); |
| 15 | + |
| 16 | + // wait for the data |
| 17 | + await dashboard.expectMetricLabelsVisible(); |
| 18 | + }); |
| 19 | + |
| 20 | + test.afterAll(async () => { |
| 21 | + await dashboard?.close(); |
| 22 | + }); |
| 23 | + |
| 24 | + |
| 25 | + test('should display loading state initially', async () => { |
| 26 | + // Check if the github.com container is present |
| 27 | + const githubTab = await dashboard.gotoGitHubTab(); |
| 28 | + await githubTab.expectContainerVisible(); |
| 29 | + }); |
| 30 | + |
| 31 | + test('should display Copilot Statistics title', async () => { |
| 32 | + // Wait for the component to load and display the title |
| 33 | + const githubTab = await dashboard.gotoGitHubTab(); |
| 34 | + await githubTab.expectStatisticsTitleVisible(); |
| 35 | + }); |
| 36 | + |
| 37 | + test('should display overview cards', async () => { |
| 38 | + // Check if all four overview cards are present |
| 39 | + const githubTab = await dashboard.gotoGitHubTab(); |
| 40 | + await githubTab.expectOverviewCardsVisible(); |
| 41 | + }); |
| 42 | + |
| 43 | + test('should display chart sections', async () => { |
| 44 | + // Check if chart sections are present |
| 45 | + const githubTab = await dashboard.gotoGitHubTab(); |
| 46 | + await githubTab.expectChartSectionsVisible(); |
| 47 | + }); |
| 48 | + |
| 49 | + test('should display models section', async () => { |
| 50 | + // Check if models section is present |
| 51 | + const githubTab = await dashboard.gotoGitHubTab(); |
| 52 | + await githubTab.expectModelsSectionVisible(); |
| 53 | + }); |
| 54 | + |
| 55 | + test('should handle chart rendering without performance issues', async () => { |
| 56 | + // Measure page performance and check charts |
| 57 | + const githubTab = await dashboard.gotoGitHubTab(); |
| 58 | + const renderTime = await githubTab.expectRenderTimeUnderLimit(5000); |
| 59 | + const chartCount = await githubTab.expectChartContainersPresent(); |
| 60 | + |
| 61 | + console.log(`Render time: ${renderTime}ms, Chart containers: ${chartCount}`); |
| 62 | + }); |
| 63 | + |
| 64 | + test('should display tooltips on hover', async () => { |
| 65 | + // Test tooltip functionality |
| 66 | + const githubTab = await dashboard.gotoGitHubTab(); |
| 67 | + await githubTab.expectTooltipInteraction(); |
| 68 | + }); |
| 69 | + |
| 70 | + test('should handle expansion panels correctly', async () => { |
| 71 | + // Look for expansion panels and interact with them |
| 72 | + const githubTab = await dashboard.gotoGitHubTab(); |
| 73 | + await githubTab.clickFirstExpansionPanel(); |
| 74 | + }); |
| 75 | + |
| 76 | + test('should not show requestAnimationFrame performance warnings', async () => { |
| 77 | + // Monitor console for performance warnings |
| 78 | + const githubTab = await dashboard.gotoGitHubTab(); |
| 79 | + await githubTab.monitorPerformanceWarnings(); |
| 80 | + }); |
| 81 | + |
| 82 | + test('should be responsive on different screen sizes', async () => { |
| 83 | + // Test responsive design across different viewports |
| 84 | + const githubTab = await dashboard.gotoGitHubTab(); |
| 85 | + await githubTab.expectResponsiveDesign(); |
| 86 | + }); |
| 87 | + |
| 88 | + test('should maintain chart aspect ratio', async () => { |
| 89 | + // Check that chart containers have the correct styling |
| 90 | + const githubTab = await dashboard.gotoGitHubTab(); |
| 91 | + await githubTab.validateChartContainerStyles(); |
| 92 | + }); |
| 93 | +}); |
0 commit comments