telegram-management-system/frontend-vben/apps/web-antd/tests/e2e/icon-fixes-simple.test.ts

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

/**
 * 简化版图标修复验证测试
 * 只测试已确认修复的页面：
 * 1. /group-broadcast/log - CalendarOutlined 和 FileTextOutlined 图标
 * 2. /group-broadcast/task - ClockCircleOutlined 图标
 */

test.describe('简化版图标修复验证', () => {
  test.beforeEach(async ({ page }) => {
    // 监听控制台错误
    page.on('console', (msg) => {
      if (msg.type() === 'error') {
        console.log(`❌ 控制台错误: ${msg.text()}`);
      }
    });

    // 登录到系统
    await page.goto('/');

    // 等待登录页面加载
    await page.waitForSelector(
      'input[placeholder*="用户名"], input[placeholder*="邮箱"], input[placeholder*="账号"]',
      { timeout: 10000 },
    );

    // 填写登录信息
    await page.fill(
      'input[placeholder*="用户名"], input[placeholder*="邮箱"], input[placeholder*="账号"]',
      'admin',
    );
    await page.fill('input[type="password"]', '111111');

    // 点击登录按钮
    await page.click(
      'button[type="submit"], button:has-text("登录"), button:has-text("登入")',
    );

    // 等待登录成功，跳转到主页
    await page.waitForURL(/dashboard|home|工作台/, { timeout: 15000 });

    console.log('✅ 登录成功');
  });

  test('验证群发日志页面的图标', async ({ page }) => {
    console.log('🧪 开始测试群发日志页面...');

    // 记录图标相关的控制台错误
    const iconErrors: string[] = [];
    page.on('console', (msg) => {
      if (
        msg.type() === 'error' &&
        (msg.text().includes('icon') ||
          msg.text().includes('import') ||
          msg.text().includes('export'))
      ) {
        iconErrors.push(msg.text());
      }
    });

    // 导航到群发日志页面
    await page.goto('/group-broadcast/log');

    // 等待页面加载完成
    await page.waitForLoadState('networkidle');
    await page.waitForSelector('.ant-card', { timeout: 10000 });

    console.log('📄 群发日志页面已加载');

    // 等待一段时间让所有资源加载完成
    await page.waitForTimeout(2000);

    // 验证页面正常加载（使用更精确的选择器）
    await expect(
      page.locator('.ant-card-head-title').filter({ hasText: '群发日志' }),
    ).toBeVisible();
    console.log('✅ 页面标题正确显示');

    // 验证 FileTextOutlined 图标存在
    const fileTextIcon = page
      .locator(
        '.anticon-file-text, [data-icon="file-text"], svg[data-icon="file-text"]',
      )
      .first();
    await expect(fileTextIcon).toBeVisible({ timeout: 5000 });
    console.log('✅ FileTextOutlined 图标显示正常');

    // 验证 CalendarOutlined 图标存在（在日志项中）
    const calendarIcon = page
      .locator(
        '.anticon-calendar, [data-icon="calendar"], svg[data-icon="calendar"]',
      )
      .first();
    await expect(calendarIcon).toBeVisible({ timeout: 5000 });
    console.log('✅ CalendarOutlined 图标显示正常');

    // 检查是否有图标相关的控制台错误
    if (iconErrors.length > 0) {
      console.log('❌ 发现图标相关的控制台错误:', iconErrors);
    } else {
      console.log('✅ 没有发现图标相关的控制台错误');
    }

    // 截图保存
    await page.screenshot({
      path: 'test-results/screenshots/group-broadcast-log-simple.png',
      fullPage: true,
    });
    console.log('📸 已保存群发日志页面截图');
  });

  test('验证群发任务页面的图标', async ({ page }) => {
    console.log('🧪 开始测试群发任务页面...');

    // 记录图标相关的控制台错误
    const iconErrors: string[] = [];
    page.on('console', (msg) => {
      if (
        msg.type() === 'error' &&
        (msg.text().includes('icon') ||
          msg.text().includes('import') ||
          msg.text().includes('export'))
      ) {
        iconErrors.push(msg.text());
      }
    });

    // 导航到群发任务页面
    await page.goto('/group-broadcast/task');

    // 等待页面加载完成
    await page.waitForLoadState('networkidle');
    await page.waitForSelector('.ant-card', { timeout: 10000 });

    console.log('📄 群发任务页面已加载');

    // 等待一段时间让所有资源加载完成
    await page.waitForTimeout(2000);

    // 验证页面正常加载（使用更精确的选择器）
    await expect(
      page.locator('.ant-card-head-title').filter({ hasText: '群发任务' }),
    ).toBeVisible();
    console.log('✅ 页面标题正确显示');

    // 验证 ClockCircleOutlined 图标存在（在表格中的发送频率列）
    const clockIcon = page
      .locator(
        '.anticon-clock-circle, [data-icon="clock-circle"], svg[data-icon="clock-circle"]',
      )
      .first();

    // 等待表格数据加载
    await page.waitForSelector('.ant-table-tbody tr', { timeout: 10000 });

    // 如果表格中有数据，应该能看到时钟图标
    const tableRows = await page.locator('.ant-table-tbody tr').count();
    if (tableRows > 0) {
      await expect(clockIcon).toBeVisible({ timeout: 5000 });
      console.log('✅ ClockCircleOutlined 图标显示正常');
    } else {
      console.log('ℹ️ 表格暂无数据，无法验证ClockCircleOutlined图标');
    }

    // 检查是否有图标相关的控制台错误
    if (iconErrors.length > 0) {
      console.log('❌ 发现图标相关的控制台错误:', iconErrors);
    } else {
      console.log('✅ 没有发现图标相关的控制台错误');
    }

    // 截图保存
    await page.screenshot({
      path: 'test-results/screenshots/group-broadcast-task-simple.png',
      fullPage: true,
    });
    console.log('📸 已保存群发任务页面截图');
  });

  test('检查页面是否可以正常导航到智能姓名管理页面', async ({ page }) => {
    console.log('🧪 测试智能姓名管理页面可访问性...');

    // 记录控制台错误
    const consoleErrors: string[] = [];
    page.on('console', (msg) => {
      if (msg.type() === 'error') {
        consoleErrors.push(`${msg.text()}`);
      }
    });

    // 导航到智能姓名管理页面
    await page.goto('/name-management/unified');

    // 等待页面加载完成
    await page.waitForLoadState('networkidle');

    // 等待一段时间让组件加载
    await page.waitForTimeout(3000);

    // 检查页面是否加载成功
    const pageLoaded = (await page.locator('.ant-card').count()) > 0;

    if (pageLoaded) {
      console.log('✅ 智能姓名管理页面可以正常访问');

      // 检查图标
      const userAddIcon = page
        .locator(
          '.anticon-user-add, [data-icon="user-add"], svg[data-icon="user-add"]',
        )
        .first();
      const thunderboltIcon = page
        .locator(
          '.anticon-thunderbolt, [data-icon="thunderbolt"], svg[data-icon="thunderbolt"]',
        )
        .first();

      const userAddVisible = await userAddIcon.isVisible();
      const thunderboltVisible = await thunderboltIcon.isVisible();

      if (userAddVisible) {
        console.log('✅ UserAddOutlined 图标显示正常');
      } else {
        console.log('⚠️ UserAddOutlined 图标未找到');
      }

      if (thunderboltVisible) {
        console.log('✅ ThunderboltOutlined 图标显示正常');
      } else {
        console.log('⚠️ ThunderboltOutlined 图标未找到');
      }
    } else {
      console.log('❌ 智能姓名管理页面加载失败');
    }

    // 报告控制台错误
    if (consoleErrors.length > 0) {
      console.log(`⚠️ 发现 ${consoleErrors.length} 个控制台错误:`);
      consoleErrors.forEach((error, index) => {
        console.log(`   ${index + 1}. ${error}`);
      });
    } else {
      console.log('✅ 没有发现控制台错误');
    }

    // 截图保存
    await page.screenshot({
      path: 'test-results/screenshots/name-management-unified-check.png',
      fullPage: true,
    });
    console.log('📸 已保存智能姓名管理页面截图');
  });
});