mini-starter/web/tests/e2e/specs/admin/async-select-test.spec.ts

import { test, expect } from '../../utils/test-setup';
import { readFileSync } from 'fs';
import { join, dirname } from 'path';
import { fileURLToPath } from 'url';
import { selectRadixOptionAsync } from '@d8d/e2e-test-utils';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const testUsers = JSON.parse(readFileSync(join(__dirname, '../../fixtures/test-users.json'), 'utf-8'));

/**
 * 专门测试异步 Select 功能的简单测试
 * 用于验证 Story 2.3 的 selectRadixOptionAsync 实现
 */
test.describe.serial('异步 Select 测试 (Story 2.3)', () => {
  test.beforeEach(async ({ adminLoginPage, disabilityPersonPage }) => {
    // 以管理员身份登录后台
    await adminLoginPage.goto();
    await adminLoginPage.login(testUsers.admin.username, testUsers.admin.password);
    await adminLoginPage.expectLoginSuccess();
    await disabilityPersonPage.goto();
  });

  test('测试省份选择（异步加载）', async ({ disabilityPersonPage, page }) => {
    console.log('=== 开始测试省份选择 ===');

    // 点击新增按钮打开对话框
    await disabilityPersonPage.openCreateDialog();

    console.log('对话框已打开');

    // 使用 selectRadixOptionAsync 选择省份
    await selectRadixOptionAsync(page, '省份 *', '广东省');

    console.log('✓ 省份选择成功');

    // 验证城市选择器已启用（省份选择后城市应该可用了）
    const cityCombobox = page.getByRole('combobox', { name: '城市' });
    await expect(cityCombobox).not.toBeDisabled();

    console.log('✓ 城市选择器已启用');
  });

  test('测试城市选择（异步加载，依赖省份）', async ({ disabilityPersonPage, page }) => {
    console.log('=== 开始测试城市选择 ===');

    // 点击新增按钮打开对话框
    await disabilityPersonPage.openCreateDialog();

    // 先选择省份
    await selectRadixOptionAsync(page, '省份 *', '湖北省');
    console.log('✓ 省份选择成功');

    // 选择城市 - selectRadixOptionAsync 自动处理异步加载，无需 waitForTimeout hack
    await selectRadixOptionAsync(page, '城市', '武汉市');

    console.log('✓ 城市选择成功');
  });

  test('测试完整的省份+城市选择流程', async ({ disabilityPersonPage, page }) => {
    console.log('=== 开始完整流程测试 ===');

    // 点击新增按钮
    await disabilityPersonPage.openCreateDialog();

    // 填写一些基本信息以到达地址选择区域
    await page.getByLabel('姓名 *').fill('测试用户');
    await page.getByLabel('性别 *').selectOption('男');
    await page.getByLabel('身份证号 *').fill('110101199001011234');
    await page.getByLabel('残疾证号 *').fill('CJZ20240001');
    await page.getByLabel('联系电话 *').fill('13800138000');
    await page.getByLabel('身份证地址 *').fill('测试地址');

    console.log('✓ 基本信息已填写');

    // 测试省份选择（异步）
    const startTime1 = Date.now();
    await selectRadixOptionAsync(page, '省份 *', '广东省');
    const duration1 = Date.now() - startTime1;
    console.log(`✓ 省份选择成功，耗时: ${duration1}ms`);

    // 测试城市选择（异步，依赖省份）
    const startTime2 = Date.now();
    await selectRadixOptionAsync(page, '城市', '深圳市');
    const duration2 = Date.now() - startTime2;
    console.log(`✓ 城市选择成功，耗时: ${duration2}ms`);

    // 验证选择器性能（应该在合理时间内完成）
    // 根据 Dev Notes 规范：最大可接受时间为 5 秒
    expect(duration1).toBeLessThan(5000); // 省份选择应在 5 秒内完成
    expect(duration2).toBeLessThan(5000); // 城市选择应在 5 秒内完成

    console.log('✓ 性能验证通过');
  });

  test.describe('边界场景测试', () => {
    test('测试超时场景 - 无效的省份值', async ({ disabilityPersonPage, page }) => {
      console.log('=== 测试超时场景 ===');

      await disabilityPersonPage.openCreateDialog();

      // 尝试选择不存在的省份（应该触发超时或错误）
      let errorThrown = false;
      try {
        await selectRadixOptionAsync(page, '省份 *', '不存在的省份XYZ', { timeout: 3000 });
      } catch (error: any) {
        errorThrown = true;
        console.log(`✓ 正确抛出错误: ${error.message}`);
        expect(error.message).toContain('selectRadixOptionAsync');
      }
      expect(errorThrown).toBe(true);
    });

    test('测试重复选择相同的省份', async ({ disabilityPersonPage, page }) => {
      console.log('=== 测试重复选择 ===');

      await disabilityPersonPage.openCreateDialog();

      // 第一次选择
      await selectRadixOptionAsync(page, '省份 *', '广东省');
      console.log('✓ 第一次选择成功');

      // 重复选择相同省份（应该正常工作）
      await selectRadixOptionAsync(page, '省份 *', '广东省');
      console.log('✓ 重复选择成功');
    });

    test('测试城市选择依赖 - 省份变化后城市可用性', async ({ disabilityPersonPage, page }) => {
      console.log('=== 测试省份变化场景 ===');

      await disabilityPersonPage.openCreateDialog();

      // 选择第一个省份
      await selectRadixOptionAsync(page, '省份 *', '广东省');
      await selectRadixOptionAsync(page, '城市', '广州市');
      console.log('✓ 广东省-广州市 选择成功');

      // 更换省份
      await selectRadixOptionAsync(page, '省份 *', '湖北省');
      await selectRadixOptionAsync(page, '城市', '武汉市');
      console.log('✓ 湖北省-武汉市 选择成功');
    });
  });
});