kindergarten_java/lesingle-edu-reading-platform-frontend/tests/e2e/admin/debug-handlesave.spec.ts

/**
 * 调试课程创建 - 注入代码监控 handleSave 调用
 */
import { test, expect } from '@playwright/test';
import { loginAsAdmin } from './helpers';

test.describe('课程创建调试 - handleSave 调用追踪', () => {
  test('监控 handleSave 函数调用', async ({ page }) => {
    test.setTimeout(180000);

    const courseName = '调试测试课程包-' + Date.now();
    console.log('=== 测试开始 ===');

    // 在页面加载前注入监控代码
    await page.addInitScript(() => {
      // 保存到 window 对象以便后续访问
      (window as any).handleSaveCalls = [];
      (window as any).handleSaveErrors = [];

      // 重写 console.log 以便捕获
      const originalConsoleLog = console.log;
      console.log = function(...args) {
        originalConsoleLog.apply(console, args);
        if (args.some(arg => String(arg).includes('Saving course') || String(arg).includes('Save failed'))) {
          (window as any).handleSaveCalls.push(args.join(' '));
        }
      };

      // 重写 message.error 和 message.success
      const originalMessageError = (window as any).messageError;
      const originalMessageSuccess = (window as any).messageSuccess;
    });

    // 步骤 1: 登录
    console.log('=== 步骤 1: 登录 ===');
    await loginAsAdmin(page);
    await page.waitForTimeout(1000);

    // 步骤 2: 进入课程创建页面
    console.log('=== 步骤 2: 进入课程创建页面 ===');
    await page.goto('/admin/courses', { timeout: 30000, waitUntil: 'networkidle' });
    await page.waitForTimeout(2000);
    await page.getByRole('button', { name: '新建课程包' }).click();
    await page.waitForTimeout(2000);

    // 步骤 3: 填写基本信息
    console.log('=== 步骤 3: 填写基本信息 ===');
    await page.getByPlaceholder('请输入课程包名称').fill(courseName);
    await page.locator('.ant-select-selector').first().click();
    await page.waitForTimeout(500);
    await page.getByText('社会认知', { exact: true }).first().click();
    await page.waitForTimeout(300);
    await page.getByRole('checkbox', { name: '小班' }).check();
    await page.waitForTimeout(300);
    await page.getByPlaceholder('请输入课程包核心内容').fill('调试测试课程内容');

    // 步骤 4: 点击下一步到最后
    console.log('=== 步骤 4: 点击下一步 ===');
    for (let i = 0; i < 6; i++) {
      const nextButton = page.getByRole('button', { name: '下一步' });
      if (await nextButton.isVisible().catch(() => false)) {
        console.log(`点击第 ${i + 1} 次"下一步"`);
        await nextButton.click();
        await page.waitForTimeout(800);
      }
    }
    await page.waitForTimeout(1000);

    // 步骤 5: 点击创建按钮 - 使用 evaluate 注入点击
    console.log('=== 步骤 5: 点击创建 ===');

    // 在点击前，先检查按钮的事件监听器
    const buttonHandle = await page.getByRole('button', { name: '创建' });
    const isDisabled = await buttonHandle.isDisabled();
    console.log('创建按钮是否禁用:', isDisabled);

    // 尝试直接调用 handleSave 函数
    const handleSaveExists = await page.evaluate(() => {
      return typeof (window as any).__VUE_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined';
    });
    console.log('Vue DevTools 是否存在:', handleSaveExists);

    // 使用常规点击
    console.log('准备点击创建按钮...');
    await buttonHandle.click();
    console.log('已点击创建按钮');

    // 等待更长时间
    await page.waitForTimeout(8000);

    // 步骤 6: 检查状态
    console.log('=== 步骤 6: 检查结果 ===');

    // 检查是否有成功/错误消息
    const successMsg = await page.locator('.ant-message-success').count();
    const errorMsg = await page.locator('.ant-message-error').count();
    console.log('成功消息数量:', successMsg);
    console.log('错误消息数量:', errorMsg);

    // 检查当前 URL
    const currentUrl = page.url();
    console.log('当前 URL:', currentUrl);

    // 检查表格中的课程数量
    const table = page.locator('.ant-table').first();
    const rows = await table.locator('tbody tr').count();
    console.log('表格中的课程数量:', rows);

    // 获取 handleSave 调用日志
    const handleSaveCalls = await page.evaluate(() => (window as any).handleSaveCalls || []);
    console.log('handleSave 调用次数:', handleSaveCalls.length);
    console.log('handleSave 调用日志:', handleSaveCalls);

    // 截图
    await page.screenshot({ path: 'test-results/debug-handlesave-monitor.png' });

    // 如果没有调用，说明按钮点击没有触发 handleSave
    if (handleSaveCalls.length === 0 && successMsg === 0 && errorMsg === 0) {
      console.log('=== handleSave 未被调用，可能是按钮事件未绑定 ===');
    }
  });
});