lanyuanxiaoyao
870004af23
- 重构 AppLayout 为可折叠侧边栏导航布局 - 实现统计仪表盘：统计摘要卡片 + 请求趋势图表 - Provider 页面使用 Card 包裹优化视觉层次 - 主题切换按钮移至侧边栏底部，支持折叠态 - Header 适配暗色主题，添加分隔线优化视觉过渡 - 添加全局样式重置（SCSS） - 完善组件测试和 E2E 测试覆盖 - 同步 OpenSpec 规范到主 specs
66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
test.describe('侧边栏导航', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('/providers');
|
|
});
|
|
|
|
test('应显示侧边栏', async ({ page }) => {
|
|
const sider = page.locator('.ant-layout-sider');
|
|
await expect(sider).toBeVisible();
|
|
});
|
|
|
|
test('应显示应用名称', async ({ page }) => {
|
|
await expect(page.locator('.ant-layout-sider').getByText('AI Gateway')).toBeVisible();
|
|
});
|
|
|
|
test('应显示导航菜单项', async ({ page }) => {
|
|
const sider = page.locator('.ant-layout-sider');
|
|
await expect(sider.getByText('供应商管理')).toBeVisible();
|
|
await expect(sider.getByText('用量统计')).toBeVisible();
|
|
});
|
|
|
|
test('应能折叠和展开侧边栏', async ({ page }) => {
|
|
const sider = page.locator('.ant-layout-sider');
|
|
const trigger = page.locator('.ant-layout-sider-trigger');
|
|
|
|
await expect(sider).toBeVisible();
|
|
|
|
await trigger.click();
|
|
await page.waitForTimeout(300);
|
|
|
|
await trigger.click();
|
|
await page.waitForTimeout(300);
|
|
|
|
await expect(sider).toBeVisible();
|
|
});
|
|
|
|
test('折叠时应只显示图标', async ({ page }) => {
|
|
const sider = page.locator('.ant-layout-sider');
|
|
const trigger = page.locator('.ant-layout-sider-trigger');
|
|
|
|
await trigger.click();
|
|
await page.waitForTimeout(300);
|
|
|
|
const collapsedSider = page.locator('.ant-layout-sider-collapsed');
|
|
await expect(collapsedSider).toBeVisible();
|
|
});
|
|
|
|
test('应显示主题切换按钮', async ({ page }) => {
|
|
const sider = page.locator('.ant-layout-sider');
|
|
const themeButton = sider.getByRole('button').filter({ has: page.getByRole('img', { name: 'moon' }) });
|
|
await expect(themeButton).toBeVisible();
|
|
});
|
|
|
|
test('应能通过主题切换按钮切换主题', async ({ page }) => {
|
|
const sider = page.locator('.ant-layout-sider');
|
|
const themeButton = sider.getByRole('button').filter({ has: page.getByRole('img', { name: 'moon' }) });
|
|
|
|
await themeButton.click();
|
|
await page.waitForTimeout(300);
|
|
|
|
const lightButton = sider.getByRole('button').filter({ has: page.getByRole('img', { name: 'sun' }) });
|
|
await expect(lightButton).toBeVisible();
|
|
});
|
|
});
|