nex/frontend/e2e/stats.spec.ts

import { test, expect } from '@playwright/test';

test.describe('用量统计', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/stats');
    // 等待页面加载完成
    await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible();
  });

  test('应显示用量统计页面', async ({ page }) => {
    await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible();
  });

  test('应显示筛选控件', async ({ page }) => {
    // 验证供应商筛选下拉框
    await expect(page.locator('.t-select').first()).toBeVisible();

    // 验证模型名称输入框
    await expect(page.getByPlaceholder('模型名称')).toBeVisible();

    // 验证日期范围选择器 - TDesign DateRangePicker 使用 t-range-input 类
    await expect(page.locator('.t-range-input')).toBeVisible();
  });

  test('应通过导航返回供应商页面', async ({ page }) => {
    await page.getByText('供应商管理').click();
    await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible();
  });

  test('应显示统计表格列标题', async ({ page }) => {
    // 验证表格存在
    await expect(page.locator('.t-table')).toBeVisible();

    // 通过 thead th 验证列标题存在
    const headers = page.locator('.t-table__header th');
    await expect(headers).toHaveCount(4);

    // 逐个验证列标题文本
    await expect(headers.nth(0)).toContainText('供应商');
    await expect(headers.nth(1)).toContainText('模型');
    await expect(headers.nth(2)).toContainText('日期');
    await expect(headers.nth(3)).toContainText('请求数');
  });

  test('应能输入模型名称筛选', async ({ page }) => {
    const modelInput = page.getByPlaceholder('模型名称');

    // 输入模型名称
    await modelInput.fill('gpt-4');

    // 验证输入值
    await expect(modelInput).toHaveValue('gpt-4');

    // 清空输入
    await modelInput.clear();
    await expect(modelInput).toHaveValue('');
  });

  test('应能打开供应商筛选下拉框', async ({ page }) => {
    // 点击供应商下拉框
    await page.locator('.t-select').first().click();

    // 验证下拉选项出现
    await page.waitForSelector('.t-select__dropdown', { timeout: 3000 });

    // 点击外部关闭下拉框
    await page.keyboard.press('Escape');
  });

  test('应能打开日期范围选择器', async ({ page }) => {
    // 点击日期选择器 - TDesign DateRangePicker
    const dateRangePicker = page.locator('.t-range-input');
    await expect(dateRangePicker).toBeVisible();

    // 点击日期选择器
    await dateRangePicker.click();

    // 等待一下让面板打开
    await page.waitForTimeout(500);

    // 点击外部关闭
    await page.keyboard.press('Escape');
  });

  test('应显示空数据提示', async ({ page }) => {
    // 等待表格加载
    await page.waitForSelector('.t-table', { timeout: 5000 });

    // 检查是否有数据
    const emptyText = page.locator('.t-table__empty');

    if (await emptyText.count() > 0) {
      await expect(emptyText).toBeVisible();
    }
  });
});