bililive-go/tests/e2e/components.spec.ts

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

/**
 * Ant Design 组件交互测试
 * 
 * 测试常见的 antd 组件在页面中的交互效果
 */
test.describe('Tooltip 悬浮提示测试', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');
  });

  test('悬浮显示提示信息', async ({ page }) => {
    // 找到带有 tooltip 的元素（通常是按钮或图标）
    const tooltipTrigger = page.locator('[data-tooltip], .ant-tooltip-open, button').first();

    if (await tooltipTrigger.isVisible()) {
      // 悬浮在元素上
      await tooltipTrigger.hover();
      await page.waitForTimeout(500);

      // tooltip 可能出现也可能不出现，取决于元素类型
      const tooltip = page.locator('.ant-tooltip');
      // 只验证悬浮操作成功，不强制要求 tooltip 出现
    }
  });
});

test.describe('Button 按钮测试', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');
  });

  test('按钮点击效果', async ({ page }) => {
    // 找到任意按钮
    const button = page.locator('.ant-btn').first();

    if (await button.isVisible()) {
      // 验证按钮可点击
      await expect(button).toBeEnabled();

      // 检查按钮是否有正确的样式类
      const classList = await button.evaluate(el => el.className);
      expect(classList).toContain('ant-btn');
    }
  });

  test('主要按钮样式', async ({ page }) => {
    const primaryButton = page.locator('.ant-btn-primary').first();

    if (await primaryButton.isVisible()) {
      // 验证主要按钮存在
      await expect(primaryButton).toBeVisible();
    }
  });
});

test.describe('Table 表格交互测试', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');
  });

  test('表格行悬浮效果', async ({ page }) => {
    const tableRow = page.locator('.ant-table-tbody tr').first();

    if (await tableRow.isVisible()) {
      // 悬浮在表格行上
      await tableRow.hover();
      await page.waitForTimeout(200);

      // 验证行可见
      await expect(tableRow).toBeVisible();
    }
  });

  test('表格行展开', async ({ page }) => {
    // 查找可展开的行（带展开图标）
    const expandIcon = page.locator('.ant-table-row-expand-icon').first();

    if (await expandIcon.isVisible()) {
      // 点击展开
      await expandIcon.click();
      await page.waitForTimeout(500);

      // 验证展开内容出现
      const expandedRow = page.locator('.ant-table-expanded-row');
      await expect(expandedRow).toBeVisible();

      // 再次点击收起
      await expandIcon.click();
      await page.waitForTimeout(300);
    }
  });

  test('表格分页器', async ({ page }) => {
    const pagination = page.locator('.ant-pagination');

    if (await pagination.isVisible()) {
      // 验证分页器存在
      await expect(pagination).toBeVisible();

      // 检查分页按钮
      const pageButtons = page.locator('.ant-pagination-item');
      const count = await pageButtons.count();
      expect(count).toBeGreaterThan(0);
    }
  });
});

test.describe('Modal 对话框测试', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');
  });

  test('对话框可以通过遮罩关闭', async ({ page }) => {
    // 找到一个会打开对话框的按钮
    const addButton = page.locator('button').filter({ hasText: /添加|新增/i }).first();

    if (await addButton.isVisible()) {
      await addButton.click();
      await page.waitForTimeout(500);

      // 验证对话框出现
      const modal = page.locator('.ant-modal');
      if (await modal.isVisible()) {
        // 点击遮罩关闭（点击遮罩区域）
        await page.locator('.ant-modal-wrap').click({ position: { x: 10, y: 10 } });
        await page.waitForTimeout(300);
      }
    }
  });

  test('对话框 ESC 键关闭', async ({ page }) => {
    const addButton = page.locator('button').filter({ hasText: /添加|新增/i }).first();

    if (await addButton.isVisible()) {
      await addButton.click();
      await page.waitForTimeout(500);

      const modal = page.locator('.ant-modal');
      if (await modal.isVisible()) {
        // 按 ESC 键
        await page.keyboard.press('Escape');
        await page.waitForTimeout(300);

        // 验证对话框关闭
        await expect(modal).not.toBeVisible();
      }
    }
  });
});

test.describe('Message 消息提示测试', () => {
  test('API 请求后显示消息提示', async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');

    // 消息提示通常在操作后出现
    // 这里只验证消息容器存在
    const messageContainer = page.locator('.ant-message');
    // 消息容器在 body 中，但可能为空
  });
});

test.describe('Menu 菜单交互测试', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');
  });

  test('菜单项点击高亮', async ({ page }) => {
    const menuItems = page.locator('.ant-menu-item');
    const count = await menuItems.count();

    if (count > 1) {
      // 点击第二个菜单项
      await menuItems.nth(1).click();
      await page.waitForTimeout(300);

      // 验证高亮状态
      await expect(menuItems.nth(1)).toHaveClass(/ant-menu-item-selected/);
    }
  });

  test('菜单项键盘导航', async ({ page }) => {
    // 聚焦到菜单
    const menu = page.getByRole('menu');

    if (await menu.isVisible()) {
      // 点击第一个菜单项获得焦点
      const firstItem = page.locator('.ant-menu-item').first();
      await firstItem.click();

      // 使用方向键导航
      await page.keyboard.press('ArrowDown');
      await page.waitForTimeout(200);
    }
  });
});

test.describe('Tag 标签测试', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');
  });

  test('标签正确显示', async ({ page }) => {
    await page.waitForTimeout(1000);

    // 查找标签
    const tags = page.locator('.ant-tag');

    if (await tags.first().isVisible()) {
      // 验证标签有颜色
      const backgroundColor = await tags.first().evaluate(
        el => getComputedStyle(el).backgroundColor
      );
      expect(backgroundColor).toBeDefined();
    }
  });
});