mini-starter/web/tests/e2e/specs/admin/bank-name-delete.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.beforeEach(async ({ adminLoginPage }) => {
    // 以管理员身份登录后台
    await adminLoginPage.goto();
    await adminLoginPage.login(testUsers.admin.username, testUsers.admin.password);
    await adminLoginPage.expectLoginSuccess();
  });

  test('应该能够成功删除银行名称', async ({ page }) => {
    console.log('1. 导航到银行名称管理页面...');
    
    // 监听网络请求
    const deleteRequests: any[] = [];
    page.on('request', (request) => {
      if (request.url().includes('/bank-names')) {
        console.log('   网络请求: ' + request.method() + ' ' + request.url());
        deleteRequests.push({ method: request.method(), url: request.url() });
      }
    });
    
    page.on('response', async (response) => {
      if (response.url().includes('/bank-names')) {
        const status = response.status();
        console.log('   网络响应: ' + status + ' ' + response.url());
        if (status >= 400) {
          try {
            const body = await response.text();
            console.log('   错误响应体: ' + body);
          } catch (e) {
            // ignore
          }
        }
      }
    });
    
    // 监听控制台消息
    page.on('console', (msg) => {
      if (msg.type() === 'error') {
        console.log('   控制台错误: ' + msg.text());
      }
    });
    
    await page.goto('/admin/bank-names');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForTimeout(2000);
    
    // 截图初始状态
    await page.screenshot({ path: 'test-results/bank-delete-1-initial.png' });
    console.log('   初始页面截图已保存');
    
    // 查找银行记录和删除按钮
    console.log('2. 查找银行记录和删除按钮...');
    
    // 查找所有包含 data-testid 的删除按钮
    const deleteButtons = await page.locator('[data-testid^="delete-button-"]').all();
    console.log('   找到 ' + deleteButtons.length + ' 个删除按钮');
    
    expect(deleteButtons.length, '应该找到至少一个删除按钮').toBeGreaterThan(0);
    
    // 获取第一个删除按钮
    const firstButton = deleteButtons[0];
    const firstTestId = await firstButton.getAttribute('data-testid');
    console.log('   使用删除按钮: ' + firstTestId);
    
    // 获取删除前的记录数量
    const initialRows = await page.locator('[data-testid^="type-row-"]').all();
    console.log('   删除前有 ' + initialRows.length + ' 条银行名称记录');
    
    // 点击删除按钮
    console.log('3. 点击删除按钮...');
    await firstButton.click();
    await page.waitForTimeout(1500);
    
    await page.screenshot({ path: 'test-results/bank-delete-2-confirm.png' });
    console.log('   确认对话框截图已保存');
    
    // 验证删除对话框出现
    console.log('4. 验证删除对话框...');
    const deleteDialog = page.locator('[data-testid="delete-dialog"]');
    await expect(deleteDialog, '删除对话框应该出现').toBeVisible({ timeout: 5000 });
    console.log('   ✓ 删除对话框已出现');
    
    // 查找确认按钮
    const confirmButton = page.locator('[data-testid="delete-confirm-button"]');
    await expect(confirmButton, '确认删除按钮应该存在').toBeVisible();
    console.log('   ✓ 找到确认删除按钮');
    
    // 点击确认删除
    console.log('5. 点击确认删除...');
    await confirmButton.click();
    
    // 等待删除完成 - 等待更长时间
    console.log('   等待删除完成...');
    await page.waitForTimeout(5000);
    
    await page.screenshot({ path: 'test-results/bank-delete-3-after.png' });
    console.log('   删除后页面截图已保存');
    
    // 检查是否有错误提示
    console.log('6. 检查删除结果...');
    
    const errorToast = page.locator('[data-sonner-toast][data-type="error"]');
    const hasError = await errorToast.isVisible({ timeout: 1000 }).catch(() => false);
    if (hasError) {
      const errorText = await errorToast.innerText();
      console.log('   ✗ 错误提示: "' + errorText + '"');
    }
    
    // 检查是否有成功 toast
    const successToast = page.locator('[data-sonner-toast][data-type="success"]');
    const hasSuccess = await successToast.isVisible({ timeout: 1000 }).catch(() => false);
    
    if (hasSuccess) {
      const toastText = await successToast.innerText();
      console.log('   ✓ 成功提示: "' + toastText + '"');
    }
    
    // 验证删除对话框状态
    const dialogStillVisible = await deleteDialog.isVisible().catch(() => false);
    console.log('   删除对话框是否仍可见: ' + dialogStillVisible);
    
    if (dialogStillVisible) {
      console.log('   ✗ 删除对话框未关闭，删除可能失败');
      
      // 检查删除按钮状态
      const confirmButtonDisabled = await confirmButton.isDisabled();
      console.log('   确认按钮是否禁用: ' + confirmButtonDisabled);
    }
    
    // 如果对话框关闭了，验证记录数量
    if (!dialogStillVisible) {
      console.log('   ✓ 删除对话框已关闭');
      
      const finalRows = await page.locator('[data-testid^="type-row-"]').all();
      console.log('   删除后有 ' + finalRows.length + ' 条银行名称记录');
      
      if (finalRows.length < initialRows.length) {
        console.log('   ✓ 记录数量已减少');
      } else {
        console.log('   ? 记录数量未减少');
      }
    }
    
    console.log('7. 测试完成');
    console.log('   网络请求数量: ' + deleteRequests.length);
  });
});