mini-starter/web/tests/e2e/specs/admin/bank-name-status-toggle-final.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'));

/**
 * 验证银行名称状态切换功能的 E2E 测试
 */
test.describe.serial('银行名称状态切换验证', () => {
  test('应该能够成功切换银行名称状态', async ({ page }) => {
    console.log('=== 银行名称状态切换测试开始 ===');
    
    // 登录
    console.log('1. 登录管理员账户...');
    await page.goto('/admin/login');
    await page.fill('[placeholder="请输入用户名"]', 'admin');
    await page.fill('[placeholder="请输入密码"]', 'admin123');
    await page.click('button:has-text("登录")');
    
    // 等待登录完成 - 使用更长的等待时间
    await page.waitForURL('**/admin/dashboard', { timeout: 10000 });
    await page.waitForTimeout(2000);
    console.log('   ✓ 登录成功，当前 URL: ' + page.url());
    
    // 导航到银行名称管理页面
    console.log('2. 导航到银行名称管理页面...');
    await page.goto('/admin/bank-names');
    await page.waitForLoadState('domcontentloaded');
    
    // 等待数据加载 - 等待表格出现
    console.log('   等待表格数据加载...');
    await page.waitForSelector('tbody tr', { timeout: 15000 }).catch(() => {
      console.log('   ⚠️ 等待表格超时，继续执行...');
    });
    await page.waitForTimeout(5000);
    
    await page.screenshot({ path: 'test-results/bank-status-toggle-1-initial.png' });
    console.log('   ✓ 初始页面截图已保存');
    
    // 查找银行记录
    console.log('3. 查找银行记录...');
    const tableRows = await page.locator('tbody tr').all();
    console.log('   找到 ' + tableRows.length + ' 条银行名称记录');
    
    // 如果没有找到行，检查页面状态
    if (tableRows.length === 0) {
      console.log('   ⚠️ 未找到表格行，检查页面状态...');
      const tableExists = await page.locator('table').isVisible().catch(() => false);
      console.log('   表格是否存在: ' + tableExists);
      
      const tbodyHtml = await page.locator('tbody').innerHTML().catch(() => 'N/A');
      console.log('   tbody HTML 长度: ' + tbodyHtml.length);
      
      const pageText = await page.locator('#root').innerText();
      console.log('   页面是否包含"银行名称": ' + pageText.includes('银行名称'));
      console.log('   页面是否包含"暂无": ' + pageText.includes('暂无'));
    }
    
    expect(tableRows.length, '应该找到至少一条银行名称记录').toBeGreaterThan(0);
    
    // 获取第一条记录
    const firstRow = tableRows[0];
    
    // 从行中提取 ID - 查找编辑按钮的 data-testid
    const editButton = firstRow.locator('[data-testid^="edit-button-"]');
    const testId = await editButton.getAttribute('data-testid');
    const recordId = testId?.replace('edit-button-', '');
    console.log('   使用记录 ID: ' + recordId);
    
    // 获取当前状态
    const rowText = await firstRow.innerText();
    const initialIsEnabled = rowText.includes('启用');
    console.log('   初始状态: ' + (initialIsEnabled ? '启用' : '禁用'));
    
    // 点击编辑按钮
    console.log('4. 点击编辑按钮打开编辑对话框...');
    await editButton.click();
    await page.waitForTimeout(2000);
    
    await page.screenshot({ path: 'test-results/bank-status-toggle-2-edit-dialog.png' });
    console.log('   ✓ 编辑对话框截图已保存');
    
    // 验证编辑对话框出现
    const modal = page.locator('[data-testid="type-modal"]');
    await expect(modal, '编辑对话框应该出现').toBeVisible({ timeout: 5000 });
    console.log('   ✓ 编辑对话框已出现');
    
    // 查找状态开关
    const statusSwitch = page.locator('[data-testid="edit-status-switch"]');
    await expect(statusSwitch, '状态开关应该存在').toBeVisible();
    console.log('   ✓ 找到状态开关');
    
    // 获取开关初始状态
    const switchElement = statusSwitch.locator('[data-slot="switch"]');
    const initialDataState = await switchElement.getAttribute('data-state');
    console.log('   开关初始状态: ' + initialDataState);
    
    // 点击开关
    console.log('5. 点击状态开关...');
    await switchElement.click();
    await page.waitForTimeout(1500);
    
    const afterClickDataState = await switchElement.getAttribute('data-state');
    console.log('   点击后状态: ' + afterClickDataState);
    
    expect(afterClickDataState, '开关状态应该改变').not.toBe(initialDataState);
    console.log('   ✓ 开关状态已改变');
    
    await page.screenshot({ path: 'test-results/bank-status-toggle-3-after-toggle.png' });
    console.log('   ✓ 切换后截图已保存');
    
    // 点击更新按钮
    console.log('6. 点击更新按钮保存更改...');
    const updateButton = page.locator('button[type="submit"]').filter({ hasText: '更新' });
    await updateButton.click();
    
    // 等待更新完成
    await page.waitForTimeout(5000);
    
    await page.screenshot({ path: 'test-results/bank-status-toggle-4-after-update.png' });
    console.log('   ✓ 更新后截图已保存');
    
    // 检查是否有成功提示
    const successToast = page.locator('[data-sonner-toast][data-type="success"]');
    const hasSuccess = await successToast.isVisible({ timeout: 3000 }).catch(() => false);
    if (hasSuccess) {
      const toastText = await successToast.innerText();
      console.log('   ✓ 成功提示: "' + toastText + '"');
    }
    
    // 刷新页面验证状态
    console.log('7. 刷新页面验证状态保持...');
    await page.reload({ waitUntil: 'domcontentloaded' });
    await page.waitForTimeout(5000);
    
    await page.screenshot({ path: 'test-results/bank-status-toggle-5-after-refresh.png' });
    console.log('   ✓ 刷新后截图已保存');
    
    // 获取刷新后的状态
    const refreshedRows = await page.locator('tbody tr').all();
    expect(refreshedRows.length, '刷新后应该仍有数据').toBeGreaterThan(0);
    
    const refreshedRow = refreshedRows[0];
    const finalRowText = await refreshedRow.innerText();
    const finalIsEnabled = finalRowText.includes('启用');
    console.log('   刷新后状态: ' + (finalIsEnabled ? '启用' : '禁用'));
    
    // 验证状态已保持
    const expectedStatus = !initialIsEnabled;
    expect(finalIsEnabled, '刷新后状态应该与切换后的状态一致').toBe(expectedStatus);
    console.log('   ✓ 状态已正确保持');
    
    console.log('=== 测试完成 ===');
  });
});