telegram-management-system/frontend-vben/apps/web-antd/tests/mock-menu-investigation.test.ts

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

/**
 * Mock菜单深度调查测试
 * 专门调查为什么Mock模式下没有菜单显示
 */
test.describe('Mock菜单深度调查', () => {
  test('调查Mock模式菜单显示问题', async ({ page }) => {
    console.log('🔍 开始调查Mock模式菜单问题');

    // 启用所有网络请求日志
    page.on('response', (response) => {
      if (response.url().includes('api') || response.url().includes('menu')) {
        console.log(`📡 API响应: ${response.status()} ${response.url()}`);
      }
    });

    page.on('request', (request) => {
      if (request.url().includes('api') || request.url().includes('menu')) {
        console.log(`📤 API请求: ${request.method()} ${request.url()}`);
      }
    });

    // 监听控制台日志
    page.on('console', (msg) => {
      if (msg.type() === 'error') {
        console.log(`❌ 控制台错误: ${msg.text()}`);
      } else if (msg.text().includes('menu') || msg.text().includes('Menu')) {
        console.log(`📝 菜单相关日志: ${msg.text()}`);
      }
    });

    // 访问应用
    await page.goto('http://localhost:5174');
    await page.waitForTimeout(3000);

    console.log('📋 检查当前环境配置');

    // 检查环境变量
    const pageTitle = await page.title();
    console.log(`📄 页面标题: ${pageTitle}`);

    // 检查是否启用了Mock
    const mockEnabled = await page.evaluate(() => {
      return {
        viteEnableMock:
          (window as any).__VITE_ENV__?.VITE_ENABLE_MOCK || 'false',
        viteApiUrl: (window as any).__VITE_ENV__?.VITE_API_URL || 'unknown',
        viteGlobApiUrl:
          (window as any).__VITE_ENV__?.VITE_GLOB_API_URL || 'unknown',
      };
    });

    console.log('🔧 环境变量检查:');
    console.log(`   VITE_ENABLE_MOCK: ${mockEnabled.viteEnableMock}`);
    console.log(`   VITE_API_URL: ${mockEnabled.viteApiUrl}`);
    console.log(`   VITE_GLOB_API_URL: ${mockEnabled.viteGlobApiUrl}`);

    // 检查当前页面URL
    console.log(`🌍 当前URL: ${page.url()}`);

    // 尝试登录（如果在登录页面）
    const isLoginPage = await page
      .locator('input[placeholder*="用户名"], input[placeholder*="admin"]')
      .isVisible();

    if (isLoginPage) {
      console.log('🔐 检测到登录页面');

      // 使用Mock后端的默认用户
      await page.fill(
        'input[placeholder*="用户名"], input[placeholder*="admin"]',
        'admin',
      );
      await page.fill(
        'input[placeholder*="密码"], input[type="password"]',
        '123456',
      );

      // 点击登录并等待响应
      console.log('🚀 尝试登录...');
      await page.click('button[type="submit"], button:has-text("登录")');
      await page.waitForTimeout(5000);

      // 检查登录后的URL
      console.log(`🔄 登录后URL: ${page.url()}`);
    }

    // 等待页面完全加载
    await page.waitForTimeout(3000);

    // 详细检查DOM结构
    console.log('🏗️ 检查DOM结构');

    // 检查是否有侧边栏
    const sidebarExists = await page
      .locator('aside, .sidebar, [class*="sidebar"]')
      .count();
    console.log(`📐 侧边栏元素数量: ${sidebarExists}`);

    // 检查是否有菜单容器
    const menuContainers = await page
      .locator('.ant-menu, [role="menu"], [class*="menu"]')
      .count();
    console.log(`📋 菜单容器数量: ${menuContainers}`);

    // 检查具体的菜单项
    const menuItems = await page
      .locator('.ant-menu-item, .ant-menu-submenu, [role="menuitem"]')
      .count();
    console.log(`📝 菜单项数量: ${menuItems}`);

    // 尝试查找任何包含"仪表板"、"账号"等关键词的元素
    const dashboardElements = await page
      .locator('text=仪表板, text=账号, text=群组, text=系统')
      .count();
    console.log(`🎯 关键词元素数量: ${dashboardElements}`);

    // 检查localStorage中的用户信息
    const userInfo = await page.evaluate(() => {
      return {
        localStorage: Object.keys(localStorage).map((key) => ({
          key,
          value: localStorage.getItem(key),
        })),
        sessionStorage: Object.keys(sessionStorage).map((key) => ({
          key,
          value: sessionStorage.getItem(key),
        })),
      };
    });

    console.log('💾 本地存储检查:');
    userInfo.localStorage.forEach((item) => {
      if (
        item.key.includes('user') ||
        item.key.includes('token') ||
        item.key.includes('menu')
      ) {
        console.log(
          `   localStorage.${item.key}: ${item.value?.substring(0, 100)}...`,
        );
      }
    });

    // 尝试手动调用菜单API
    console.log('🔧 尝试手动调用菜单API');

    try {
      const menuApiResponse = await page.evaluate(async () => {
        try {
          const response = await fetch('/api/auth/menus', {
            method: 'GET',
            headers: {
              'Content-Type': 'application/json',
            },
            credentials: 'include',
          });
          return {
            status: response.status,
            data: await response.text(),
          };
        } catch (error) {
          return {
            error: error.message,
          };
        }
      });

      console.log('📡 菜单API响应:', menuApiResponse);
    } catch (error) {
      console.log('❌ 菜单API调用失败:', error.message);
    }

    // 截图保存当前状态
    await page.screenshot({
      path: 'test-results/screenshots/mock-investigation-full.png',
      fullPage: true,
    });

    // 检查是否有错误信息
    const errorElements = await page
      .locator('.ant-result-error, .error, [class*="error"]')
      .count();
    console.log(`⚠️ 错误元素数量: ${errorElements}`);

    // 检查路由是否正确
    console.log('🛣️ 路由检查');
    const currentPath = await page.evaluate(() => window.location.pathname);
    console.log(`   当前路径: ${currentPath}`);

    // 尝试直接访问仪表板页面
    console.log('🎯 尝试直接访问仪表板');
    await page.goto('http://localhost:5174/dashboard');
    await page.waitForTimeout(3000);

    const dashboardUrl = page.url();
    console.log(`📊 仪表板访问结果: ${dashboardUrl}`);

    // 最终检查菜单
    const finalMenuCount = await page
      .locator('.ant-menu-item, .ant-menu-submenu, [role="menuitem"]')
      .count();
    console.log(`📈 最终菜单项数量: ${finalMenuCount}`);

    // 输出总结
    console.log('\n' + '='.repeat(60));
    console.log('🔍 Mock模式调查总结');
    console.log('='.repeat(60));
    console.log(`Mock启用状态: ${mockEnabled.viteEnableMock}`);
    console.log(`侧边栏元素: ${sidebarExists} 个`);
    console.log(`菜单容器: ${menuContainers} 个`);
    console.log(`菜单项: ${menuItems} 个`);
    console.log(`最终菜单项: ${finalMenuCount} 个`);
    console.log('='.repeat(60));

    // 基本断言
    expect(sidebarExists).toBeGreaterThanOrEqual(0);
  });

  test('测试Mock环境变量设置', async ({ page }) => {
    console.log('🔧 测试设置Mock环境变量');

    // 设置Mock环境变量
    await page.addInitScript(() => {
      // 模拟启用Mock模式
      Object.defineProperty(window, 'import', {
        value: {
          meta: {
            env: {
              VITE_ENABLE_MOCK: 'true',
              VITE_API_URL: 'http://localhost:5320',
              VITE_GLOB_API_URL: 'http://localhost:5320',
            },
          },
        },
      });
    });

    await page.goto('http://localhost:5174');
    await page.waitForTimeout(3000);

    console.log('✅ Mock环境变量设置测试完成');
  });
});