mini-starter/web/tests/e2e/specs/admin/bank-search-no-refresh.spec.ts

import { test, expect } from '../../utils/test-setup';

test.describe('银行名称搜索 - 无刷新验证', () => {
  test.beforeEach(async ({ adminLoginPage, testUsers }) => {
    await adminLoginPage.goto();
    await adminLoginPage.login(testUsers.admin.username, testUsers.admin.password);
    await adminLoginPage.expectLoginSuccess();
  });

  test('搜索框输入文字并按Enter键后页面不应刷新', async ({ page }) => {
    console.log('步骤1: 导航到银行名称管理页面');
    await page.goto('http://localhost:8080/admin/bank-names');
    
    // 等待页面加载完成
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);
    
    console.log('步骤2: 查找搜索框 (使用 data-testid)');
    const searchBox = page.getByTestId('search-input');
    await expect(searchBox, '应该找到搜索框').toBeVisible();
    
    console.log('步骤3: 截图 - 初始状态');
    await page.screenshot({ path: 'test-results/bank-search-01-initial.png' });
    
    console.log('步骤4: 输入搜索文字"中国"');
    await searchBox.fill('中国');
    await page.waitForTimeout(500);
    
    console.log('步骤5: 截图 - 输入后');
    await page.screenshot({ path: 'test-results/bank-search-02-input.png' });
    
    // 验证输入成功
    await expect(searchBox).toHaveValue('中国');
    
    console.log('步骤6: 按Enter键');
    await searchBox.press('Enter');
    await page.waitForTimeout(2000);
    
    console.log('步骤7: 截图 - 按Enter后');
    await page.screenshot({ path: 'test-results/bank-search-03-after-enter.png' });
    
    // 关键验证: 搜索框的值应该保持不变
    // 如果页面刷新了，搜索框会被清空
    const searchValue = await searchBox.inputValue();
    console.log('搜索框当前值:', searchValue);
    
    expect(searchValue).toBe('中国');
    console.log('✅ PASS: 搜索值保持不变，页面没有刷新');
    
    // 验证搜索结果显示
    console.log('步骤8: 验证搜索结果');
    const pageText = await page.textContent('body');
    const hasChina = pageText?.includes('中国');
    console.log('页面是否包含"中国":', hasChina);
  });
  
  test('点击搜索按钮后页面不应刷新', async ({ page }) => {
    console.log('步骤1: 导航到银行名称管理页面');
    await page.goto('http://localhost:8080/admin/bank-names');
    
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);
    
    console.log('步骤2: 查找搜索框和搜索按钮');
    const searchBox = page.getByTestId('search-input');
    await expect(searchBox).toBeVisible();
    
    // 查找搜索按钮
    const searchButton = page.getByTestId('search-button');
    
    console.log('步骤3: 输入搜索文字"工商"');
    await searchBox.fill('工商');
    await page.waitForTimeout(500);
    
    console.log('步骤4: 截图 - 输入后');
    await page.screenshot({ path: 'test-results/bank-search-04-click-input.png' });
    
    console.log('步骤5: 点击搜索按钮');
    const buttonCount = await searchButton.count();
    if (buttonCount > 0) {
      await searchButton.click();
      await page.waitForTimeout(2000);
      
      console.log('步骤6: 截图 - 点击搜索按钮后');
      await page.screenshot({ path: 'test-results/bank-search-05-after-click.png' });
      
      const searchValue = await searchBox.inputValue();
      console.log('搜索框当前值:', searchValue);
      
      expect(searchValue).toBe('工商');
      console.log('✅ PASS: 点击搜索按钮后，搜索值保持不变');
    } else {
      console.log('⚠️ 未找到搜索按钮，跳过点击测试');
    }
  });
});