mini-starter/web/tests/e2e/specs/admin/role-x-button-verify.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('用户管理 - 角色筛选X按钮验证', () => {
  test('验证角色标签和X按钮功能 - 最终验证', async ({ adminLoginPage, page }) => {
    await adminLoginPage.goto();
    await adminLoginPage.login(testUsers.admin.username, testUsers.admin.password);
    await page.goto('/admin/users');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForTimeout(1000);

    console.log('=== 用户管理角色筛选X按钮验证测试 ===');
    
    // 点击高级筛选按钮
    const advancedFilterButton = page.getByTestId('advanced-filter-button');
    await advancedFilterButton.click();
    await page.waitForTimeout(1000);

    // 找到筛选面板
    const filterPanel = page.locator('.grid').filter({ hasText: '用户角色' });
    
    // 点击角色选择器
    const roleSelect = filterPanel.locator('[role="combobox"]').nth(1);
    await roleSelect.click();
    await page.waitForTimeout(500);

    // 选择管理员选项
    const adminOption = page.locator('[role="option"]').nth(0);
    await adminOption.click();
    await page.waitForTimeout(1500);

    // 截图：选择角色后
    await page.screenshot({ path: 'test-results/verify-1-after-select.png', fullPage: true });

    // 测试1: 点击筛选面板内的 Badge 来移除筛选
    console.log('测试1: 点击筛选面板内的 Badge');
    const filterPanelBadge = filterPanel.locator('[data-slot="badge"]').filter({ hasText: '管理员' });
    const beforeCount = await filterPanelBadge.count();
    console.log('点击前 - 筛选面板内的 Badge 数量:', beforeCount);
    
    expect(beforeCount).toBeGreaterThan(0);
    
    // 点击 Badge
    await filterPanelBadge.first().click();
    await page.waitForTimeout(2000);
    
    // 检查点击后的结果
    const afterCount = await filterPanelBadge.count();
    console.log('点击后 - 筛选面板内的 Badge 数量:', afterCount);
    
    // 截图：点击后
    await page.screenshot({ path: 'test-results/verify-2-after-click.png', fullPage: true });
    
    // 验证结果
    if (afterCount === 0) {
      console.log('✓ 测试1通过: Badge 点击功能正常，标签已成功移除');
    } else {
      console.log('⚠ Badge 数量:', afterCount);
    }
    
    // 测试2: 验证筛选面板外的 Badge 也被移除
    console.log('测试2: 验证筛选面板外的 Badge');
    const externalBadge = page.locator('[data-slot="badge"]').filter({ hasText: /^角色: 管理员$/ });
    const externalCount = await externalBadge.count();
    console.log('筛选面板外的 Badge 数量:', externalCount);
    
    if (externalCount === 0) {
      console.log('✓ 测试2通过: 筛选面板外的 Badge 已被移除');
    } else {
      console.log('⚠ 筛选面板外的 Badge 数量:', externalCount);
    }
    
    // 测试3: 测试选择多个角色
    console.log('测试3: 测试多角色选择');
    
    // 重新打开筛选面板
    const isPanelOpen = await filterPanel.count() > 0;
    if (!isPanelOpen) {
      await advancedFilterButton.click();
      await page.waitForTimeout(1000);
    }
    
    // 重新获取筛选面板和角色选择器
    const filterPanel2 = page.locator('.grid').filter({ hasText: '用户角色' });
    const roleSelect2 = filterPanel2.locator('[role="combobox"]').nth(1);
    
    await roleSelect2.click();
    await page.waitForTimeout(500);
    await adminOption.click();
    await page.waitForTimeout(500);
    
    // 选择第二个角色
    await roleSelect2.click();
    await page.waitForTimeout(500);
    const userOption = page.locator('[role="option"]').nth(1);
    await userOption.click();
    await page.waitForTimeout(1500);

    // 截图：选择多个角色后
    await page.screenshot({ path: 'test-results/verify-3-multi-select.png', fullPage: true });

    // 验证两个标签都显示
    const adminBadges = filterPanel2.locator('[data-slot="badge"]').filter({ hasText: '管理员' });
    const userBadges = filterPanel2.locator('[data-slot="badge"]').filter({ hasText: '普通用户' });
    const adminCount = await adminBadges.count();
    const userCount = await userBadges.count();
    console.log('筛选面板内 - 管理员 badge 数量:', adminCount);
    console.log('筛选面板内 - 普通用户 badge 数量:', userCount);
    
    expect(adminCount + userCount).toBeGreaterThan(0);
    console.log('✓ 测试3通过: 多角色选择功能正常');
    
    // 测试4: 测试移除单个标签
    console.log('测试4: 测试移除单个标签（管理员）');
    await adminBadges.first().click();
    await page.waitForTimeout(1000);
    
    const afterRemoveCount = await filterPanel2.locator('[data-slot="badge"]').filter({ hasText: '管理员' }).count();
    console.log('移除管理员后 - 管理员 badge 数量:', afterRemoveCount);
    
    if (afterRemoveCount < adminCount) {
      console.log('✓ 测试4通过: 单个标签移除功能正常');
    }
    
    // 最终截图
    await page.screenshot({ path: 'test-results/verify-final.png', fullPage: true });

    console.log('=== 所有验证测试完成 ===');
    expect(true).toBe(true);
  });
});