mini-starter/web/tests/e2e/specs/mini/statistics-pull-refresh.spec.ts

import { TIMEOUTS } from '../../utils/timeouts';
import { test, expect } from '../../utils/test-setup';

/**
 * 数据统计页面下拉刷新功能测试
 * 测试目标：验证数据统计页面的下拉刷新功能是否正常工作
 */

const TEST_USER_PHONE = '13800138005';
const TEST_USER_PASSWORD = process.env.TEST_ENTERPRISE_PASSWORD || 'password123';

test.describe('数据统计页面下拉刷新功能测试', () => {
  test.use({ storageState: undefined });

  test.beforeEach(async ({ enterpriseMiniPage: miniPage }) => {
    await miniPage.goto();
    await miniPage.login(TEST_USER_PHONE, TEST_USER_PASSWORD);
    await miniPage.expectLoginSuccess();
    await miniPage.page.waitForTimeout(TIMEOUTS.MEDIUM);
    await miniPage.navigateToStatisticsPage();
    // 等待统计页面数据加载完成（不依赖 .stat-card 类名）
    await miniPage.page.waitForTimeout(TIMEOUTS.LONG);
  });

  test('应该能够下拉刷新统计数据', async ({ enterpriseMiniPage: miniPage }) => {
    console.debug('[测试] 开始下拉刷新测试');

    // 1. 获取刷新前的统计页面文本内容
    const beforeRefreshContent = await miniPage.page.textContent('body');
    console.debug(`[测试] 刷新前页面内容长度: ${beforeRefreshContent?.length || 0}`);
    expect(beforeRefreshContent).toBeTruthy();
    expect(beforeRefreshContent).toContain('数据统计');
    console.debug('[测试] ✓ 页面包含数据统计标题');

    // 2. 验证初始数据存在
    const hasInitialData = beforeRefreshContent?.includes('在职人数') ||
                           beforeRefreshContent?.includes('平均薪资') ||
                           beforeRefreshContent?.includes('在职率');
    expect(hasInitialData).toBe(true);
    console.debug('[测试] ✓ 初始统计数据存在');

    // 3. 监听控制台错误
    const consoleErrors: string[] = [];
    miniPage.page.on('console', msg => {
      if (msg.type() === 'error') {
        consoleErrors.push(msg.text());
      }
    });

    // 4. 执行下拉刷新动作
    await miniPage.page.evaluate(async () => {
      // 尝试找到可滚动元素并执行下拉刷新
      const scrollableElements = [
        document.querySelector('.h-\\[calc\\(100vh-120px\\)\\]'),
        document.querySelector('[class*="overflow"]'),
        document.querySelector('main'),
        document.body
      ].filter(el => el !== null) as HTMLElement[];

      if (scrollableElements.length > 0) {
        const scrollableElement = scrollableElements[0];
        console.debug('[下拉刷新] 找到可滚动元素，执行刷新动作');

        // 模拟下拉手势：先向下滚动，再快速滚回顶部
        scrollableElement.scrollTop = 0;
        scrollableElement.dispatchEvent(new Event('scroll', { bubbles: true }));

        // 等待一小段时间后再次触发滚动事件
        await new Promise(resolve => setTimeout(resolve, 100));
        scrollableElement.dispatchEvent(new Event('scroll', { bubbles: true }));
      } else {
        console.warn('[下拉刷新] 未找到可滚动元素');
      }
    });

    // 5. 等待刷新完成
    await miniPage.page.waitForTimeout(TIMEOUTS.LONG);

    // 6. 获取刷新后的页面内容
    const afterRefreshContent = await miniPage.page.textContent('body');
    console.debug(`[测试] 刷新后页面内容长度: ${afterRefreshContent?.length || 0}`);
    expect(afterRefreshContent).toBeTruthy();

    // 7. 验证页面仍然包含统计数据
    const hasDataAfterRefresh = afterRefreshContent?.includes('在职人数') ||
                                afterRefreshContent?.includes('平均薪资') ||
                                afterRefreshContent?.includes('在职率');
    expect(hasDataAfterRefresh).toBe(true);
    console.debug('[测试] ✓ 刷新后统计数据仍然存在');

    // 8. 验证页面没有被破坏
    expect(afterRefreshContent).toContain('数据统计');
    console.debug('[测试] ✓ 页面结构完整');

    console.debug('[测试] ✅ 下拉刷新功能测试通过');
  });

  test('下拉刷新后应该重新加载数据', async ({ enterpriseMiniPage: miniPage }) => {
    console.debug('[测试] 开始数据重新加载测试');

    // 1. 等待初始数据加载
    await miniPage.page.waitForTimeout(TIMEOUTS.MEDIUM);
    const initialContent = await miniPage.page.textContent('body');
    console.debug(`[测试] 初始页面内容长度: ${initialContent?.length || 0}`);
    expect(initialContent).toContain('数据统计');
    console.debug('[测试] ✓ 页面已加载');

    // 2. 验证初始统计图表标题存在
    const expectedCharts = ['残疾类型分布', '性别分布', '年龄分布', '户籍省份分布'];
    const initialChartsFound = expectedCharts.filter(chart => initialContent?.includes(chart));
    console.debug(`[测试] 初始找到 ${initialChartsFound.length}/${expectedCharts.length} 个图表标题`);
    expect(initialChartsFound.length).toBeGreaterThan(0);
    console.debug('[测试] ✓ 统计图表标题存在');

    // 3. 截图 - 刷新前
    await miniPage.page.screenshot({
      path: 'test-results/statistics-before-refresh.png',
      fullPage: true
    });
    console.debug('[测试] 已保存刷新前截图');

    // 4. 执行下拉刷新
    await miniPage.page.evaluate(async () => {
      const scrollableElements = [
        document.querySelector('.h-\\[calc\\(100vh-120px\\)\\]'),
        document.querySelector('[class*="overflow"]'),
        document.querySelector('main'),
        document.body
      ].filter(el => el !== null) as HTMLElement[];

      if (scrollableElements.length > 0) {
        const scrollableElement = scrollableElements[0];
        scrollableElement.scrollTop = 0;
        scrollableElement.dispatchEvent(new Event('scroll', { bubbles: true }));
        await new Promise(resolve => setTimeout(resolve, 100));
        scrollableElement.dispatchEvent(new Event('scroll', { bubbles: true }));
      }
    });

    // 5. 等待数据重新加载
    await miniPage.page.waitForTimeout(TIMEOUTS.LONG);

    // 6. 验证数据仍然存在
    const afterRefreshContent = await miniPage.page.textContent('body');
    expect(afterRefreshContent).toContain('数据统计');

    const afterRefreshChartsFound = expectedCharts.filter(chart => afterRefreshContent?.includes(chart));
    console.debug(`[测试] 刷新后找到 ${afterRefreshChartsFound.length}/${expectedCharts.length} 个图表标题`);
    expect(afterRefreshChartsFound.length).toBeGreaterThan(0);
    console.debug('[测试] ✓ 刷新后图表标题仍然存在');

    // 7. 截图 - 刷新后
    await miniPage.page.screenshot({
      path: 'test-results/statistics-after-refresh.png',
      fullPage: true
    });
    console.debug('[测试] 已保存刷新后截图');

    console.debug('[测试] ✅ 数据重新加载测试通过');
  });

  test('下拉刷新不应该产生控制台错误', async ({ enterpriseMiniPage: miniPage }) => {
    console.debug('[测试] 开始控制台错误检查');

    const consoleErrors: string[] = [];

    // 监听控制台错误
    miniPage.page.on('console', msg => {
      if (msg.type() === 'error') {
        const errorText = msg.text();
        consoleErrors.push(errorText);
        console.debug(`[控制台错误] ${errorText}`);
      }
    });

    // 执行下拉刷新
    await miniPage.page.evaluate(async () => {
      const scrollableElements = [
        document.querySelector('.h-\\[calc\\(100vh-120px\\)\\]'),
        document.querySelector('[class*="overflow"]'),
        document.querySelector('main'),
        document.body
      ].filter(el => el !== null) as HTMLElement[];

      if (scrollableElements.length > 0) {
        const scrollableElement = scrollableElements[0];
        scrollableElement.scrollTop = 0;
        scrollableElement.dispatchEvent(new Event('scroll', { bubbles: true }));
        await new Promise(resolve => setTimeout(resolve, 100));
        scrollableElement.dispatchEvent(new Event('scroll', { bubbles: true }));
      }
    });

    await miniPage.page.waitForTimeout(TIMEOUTS.LONG);

    // 验证没有控制台错误
    // 过滤掉一些常见的非关键错误（如资源加载失败）
    const criticalErrors = consoleErrors.filter(err => {
      return !err.includes('net::ERR_FAILED') &&
             !err.includes('404') &&
             !err.includes('Failed to load resource');
    });

    if (criticalErrors.length > 0) {
      console.debug(`[测试] 发现 ${criticalErrors.length} 个控制台错误`);
      console.debug(`[测试] 错误详情: ${criticalErrors.join(', ')}`);
    }

    // 只有关键错误才导致测试失败
    expect(criticalErrors.length).toBe(0);
    console.debug('[测试] ✅ 无关键控制台错误');
  });

  test('完整下拉刷新流程验证', async ({ enterpriseMiniPage: miniPage }) => {
    console.debug('[测试] 开始完整下拉刷新流程验证');

    // 1. 验证初始状态
    const initialContent = await miniPage.page.textContent('body');
    console.debug(`[测试] 初始页面内容长度: ${initialContent?.length || 0}`);
    expect(initialContent).toContain('数据统计');
    console.debug('[测试] ✓ 页面标题正确');

    // 验证初始统计数据
    const initialDataExists = initialContent?.includes('在职人数') ||
                              initialContent?.includes('平均薪资') ||
                              initialContent?.includes('在职率');
    expect(initialDataExists).toBe(true);
    console.debug('[测试] ✓ 初始统计数据存在');

    // 2. 执行下拉刷新
    await miniPage.page.evaluate(async () => {
      const scrollableElements = [
        document.querySelector('.h-\\[calc\\(100vh-120px\\)\\]'),
        document.querySelector('[class*="overflow"]'),
        document.querySelector('main'),
        document.body
      ].filter(el => el !== null) as HTMLElement[];

      if (scrollableElements.length > 0) {
        const scrollableElement = scrollableElements[0];
        // 模拟下拉手势：先向下滚动，再快速滚回顶部
        scrollableElement.scrollTop = 100;
        await new Promise(resolve => setTimeout(resolve, 50));
        scrollableElement.scrollTop = 0;

        // 触发滚动事件
        scrollableElement.dispatchEvent(new Event('scroll', { bubbles: true }));
        await new Promise(resolve => setTimeout(resolve, 100));
        scrollableElement.dispatchEvent(new Event('scroll', { bubbles: true }));
      }
    });

    // 3. 等待刷新完成
    await miniPage.page.waitForTimeout(TIMEOUTS.LONG);

    // 4. 验证刷新后状态
    const afterRefreshContent = await miniPage.page.textContent('body');
    console.debug(`[测试] 刷新后页面内容长度: ${afterRefreshContent?.length || 0}`);
    expect(afterRefreshContent).toContain('数据统计');
    console.debug('[测试] ✓ 刷新后页面标题正确');

    // 验证刷新后统计数据仍然存在
    const afterDataExists = afterRefreshContent?.includes('在职人数') ||
                            afterRefreshContent?.includes('平均薪资') ||
                            afterRefreshContent?.includes('在职率');
    expect(afterDataExists).toBe(true);
    console.debug('[测试] ✓ 刷新后统计数据仍然存在');

    // 5. 验证页面结构完整性
    const expectedElements = ['残疾类型分布', '性别分布'];
    const foundElements = expectedElements.filter(el => afterRefreshContent?.includes(el));
    expect(foundElements.length).toBeGreaterThan(0);
    console.debug(`[测试] ✓ 找到 ${foundElements.length}/${expectedElements.length} 个预期元素`);

    // 6. 最终截图
    await miniPage.page.screenshot({
      path: 'test-results/statistics-pull-refresh-complete.png',
      fullPage: true
    });

    console.debug('[测试] ✅ 完整下拉刷新流程验证通过');
  });
});