mini-starter/web/tests/e2e/specs/admin/disability-person-phone-layout.spec.ts

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

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

test.describe.serial('残疾人管理 - 电话布局优化 (Story 15.6)', () => {
  test.beforeEach(async ({ adminLoginPage, disabilityPersonPage }) => {
    await adminLoginPage.goto();
    await adminLoginPage.login(testUsers.admin.username, testUsers.admin.password);
    await adminLoginPage.expectLoginSuccess();
    await disabilityPersonPage.goto();
  });

  test('AC1: 联系电话区域布局优化 - 监护人电话和本人电话相邻显示', async ({ disabilityPersonPage, page }) => {
    console.debug('\n========== Story 15.6 AC1: 联系电话区域布局优化 ==========');

    // 打开新增残疾人对话框
    await disabilityPersonPage.openCreateDialog();
    console.debug('✓ 对话框已打开');

    // 等待对话框完全加载
    await page.waitForTimeout(500);

    // 查找监护人电话管理区域
    const guardianPhoneSection = page.locator('text=监护人电话管理').first();
    await expect(guardianPhoneSection).toBeVisible();
    console.debug('✓ 监护人电话管理区域可见');

    // 查找本人电话管理区域
    const personPhoneSection = page.locator('text=本人电话管理').first();
    await expect(personPhoneSection).toBeVisible();
    console.debug('✓ 本人电话管理区域可见');

    // 验证两个区域相邻显示（通过 DOM 结构验证）
    // 获取监护人电话区域的父元素
    const guardianParent = guardianPhoneSection.locator('xpath=ancestor::div[contains(@class, "col-span-full")][1]');
    // 获取本人电话区域的父元素
    const personParent = personPhoneSection.locator('xpath=ancestor::div[contains(@class, "col-span-full")][1]');

    // 验证它们是兄弟节点（相邻显示）
    const guardianParentExists = await guardianParent.count();
    const personParentExists = await personParent.count();

    expect(guardianParentExists).toBeGreaterThan(0);
    expect(personParentExists).toBeGreaterThan(0);
    console.debug('✓ 监护人电话和本人电话相邻显示');

    // 关闭对话框
    await page.locator('button:has-text("取消")').first().click();
  });

  test('AC2: 本人电话支持动态添加多个号码', async ({ disabilityPersonPage, page }) => {
    console.debug('\n========== Story 15.6 AC2: 本人电话支持动态添加 ==========');

    const timestamp = Date.now();
    const testData = {
      name: `电话测试_${timestamp}`,
      gender: '男',
      idCard: `42010119900101123${timestamp % 10}`,
      disabilityId: `5110011990010${timestamp % 10}`,
      disabilityType: '视力残疾',
      disabilityLevel: '一级',
      phone: '13800138001',
      idAddress: '湖北省武汉市测试街道1号',
      province: '湖北省',
      city: '武汉市'
    };

    // 打开新增残疾人对话框
    await disabilityPersonPage.openCreateDialog();

    // 填写基本信息
    await disabilityPersonPage.fillBasicForm(testData);

    // 查找并点击"添加本人电话"按钮
    const addPersonPhoneButton = page.locator('button:has-text("添加本人电话")').first();
    await expect(addPersonPhoneButton).toBeVisible();
    console.debug('✓ 添加本人电话按钮可见');

    // 点击添加第一个电话
    await addPersonPhoneButton.click();
    await page.waitForTimeout(300);

    // 验证电话输入框出现
    const phoneInput1 = page.locator('input[placeholder*="请输入本人电话"]').first();
    await expect(phoneInput1).toBeVisible();
    console.debug('✓ 第一个本人电话输入框已出现');

    // 填写第一个电话号码
    await phoneInput1.fill('13800138001');
    console.debug('✓ 第一个本人电话已填写: 13800138001');

    // 点击添加第二个电话
    await addPersonPhoneButton.click();
    await page.waitForTimeout(300);

    // 验证第二个电话输入框出现
    const phoneInputs = page.locator('input[placeholder*="请输入本人电话"]');
    const count = await phoneInputs.count();
    expect(count).toBeGreaterThanOrEqual(2);
    console.debug(`✓ 第二个本人电话输入框已出现，共 ${count} 个`);

    // 填写第二个电话号码
    await phoneInputs.nth(1).fill('13800138002');
    console.debug('✓ 第二个本人电话已填写: 13800138002');

    // 验证最多可添加5个的限制
    for (let i = 2; i < 5; i++) {
      await addPersonPhoneButton.click();
      await page.waitForTimeout(200);
    }

    const maxPhoneInputs = page.locator('input[placeholder*="请输入本人电话"]');
    const maxCount = await maxPhoneInputs.count();
    expect(maxCount).toBeLessThanOrEqual(5);
    console.debug(`✓ 本人电话数量限制正确: ${maxCount} 个（最多5个）`);

    // 取消对话框
    await page.locator('button:has-text("取消")').first().click();
  });

  test('AC3: 监护人电话功能保持正常', async ({ disabilityPersonPage, page }) => {
    console.debug('\n========== Story 15.6 AC3: 监护人电话功能保持正常 ==========');

    const timestamp = Date.now();
    const testData = {
      name: `监护人电话测试_${timestamp}`,
      gender: '男',
      idCard: `42010119900101123${timestamp % 10}`,
      disabilityId: `5110011990010${timestamp % 10}`,
      disabilityType: '视力残疾',
      disabilityLevel: '一级',
      phone: '13800138001',
      idAddress: '湖北省武汉市测试街道1号',
      province: '湖北省',
      city: '武汉市'
    };

    // 打开新增残疾人对话框
    await disabilityPersonPage.openCreateDialog();

    // 填写基本信息
    await disabilityPersonPage.fillBasicForm(testData);

    // 查找"添加监护人电话"按钮
    const addGuardianPhoneButton = page.locator('button:has-text("添加监护人电话")').first();
    await expect(addGuardianPhoneButton).toBeVisible();
    console.debug('✓ 添加监护人电话按钮可见');

    // 点击添加监护人电话
    await addGuardianPhoneButton.click();
    await page.waitForTimeout(300);

    // 验证监护人电话输入框出现
    const guardianPhoneInput = page.locator('input[placeholder*="请输入监护人电话"]').first();
    await expect(guardianPhoneInput).toBeVisible();
    console.debug('✓ 监护人电话输入框已出现');

    // 填写监护人电话
    await guardianPhoneInput.fill('13900139001');
    console.debug('✓ 监护人电话已填写: 13900139001');

    // 验证设置主要联系人选项存在
    const primaryCheckbox = page.locator('input[type="checkbox"]').first();
    await expect(primaryCheckbox).toBeVisible();
    console.debug('✓ 设置主要联系人选项可见');

    // 取消对话框
    await page.locator('button:has-text("取消")').first().click();
  });

  test('AC4: 两个电话区域使用相同的 UI 组件和交互方式', async ({ disabilityPersonPage, page }) => {
    console.debug('\n========== Story 15.6 AC4: UI 组件一致性 ==========');

    // 打开新增残疾人对话框
    await disabilityPersonPage.openCreateDialog();

    // 验证两个区域有相同的提示文本结构
    const guardianHint = page.locator('text=最多可添加 5 个监护人电话');
    const personHint = page.locator('text=最多可添加 5 个本人电话');

    await expect(guardianHint).toBeVisible();
    await expect(personHint).toBeVisible();
    console.debug('✓ 两个区域都有相同的提示文本');

    // 验证两个区域都有主要联系人提示
    const guardianPrimaryHint = page.locator('text=只能设置一个主要联系人');
    const personPrimaryHint = page.locator('text=只能设置一个主要联系电话');

    await expect(guardianPrimaryHint).toBeVisible();
    await expect(personPrimaryHint).toBeVisible();
    console.debug('✓ 两个区域都有主要联系人提示');

    // 验证按钮样式一致性（都使用相同的按钮结构）
    const addButtonPattern = /添加(监护人|本人)电话/;
    const addButtons = page.locator('button').filter({ hasText: addButtonPattern });
    const buttonCount = await addButtons.count();
    expect(buttonCount).toBe(2);
    console.debug('✓ 两个区域都有添加按钮');

    // 取消对话框
    await page.locator('button:has-text("取消")').first().click();
  });
});