everything-is-suitable/everything-is-suitable-admin/e2e/user.spec.ts

import { test, expect } from '@playwright/test';
import { MockManager } from './mock-manager';

test.describe('用户管理', () => {
  test.beforeEach(async ({ page }) => {
    const mockManager = new MockManager({
      enabled: true,
      mode: 'full',
      mockPaths: [],
      delay: 0,
      logCalls: true,
      validateResponses: true,
      dataSource: 'memory'
    });
    
    mockManager.presetTestData({
      menus: [
        {
          id: 1,
          name: '仪表盘',
          code: 'dashboard',
          path: '/dashboard',
          icon: 'DashboardOutlined',
          sortOrder: 1,
          status: 'active',
          parentId: 0,
          component: 'views/Dashboard.vue',
          createBy: 'system',
          updateBy: 'system',
          createdAt: '2024-01-01T00:00:00.000Z',
          updatedAt: '2024-01-01T00:00:00.000Z',
          children: []
        },
        {
          id: 2,
          name: '用户管理',
          code: 'user',
          path: '/users',
          icon: 'UserOutlined',
          sortOrder: 2,
          status: 'active',
          parentId: 0,
          component: 'views/UserManagement.vue',
          createBy: 'system',
          updateBy: 'system',
          createdAt: '2024-01-01T00:00:00.000Z',
          updatedAt: '2024-01-01T00:00:00.000Z',
          children: []
        }
      ],
      users: [
        {
          id: 1,
          username: 'admin',
          realName: '管理员',
          email: 'admin@example.com',
          phone: '13800138000',
          gender: 'male',
          status: 'active',
          createdAt: '2024-01-01T00:00:00.000Z',
          updatedAt: '2024-01-01T00:00:00.000Z'
        },
        {
          id: 2,
          username: 'user1',
          realName: '用户1',
          email: 'user1@example.com',
          phone: '13800138001',
          gender: 'female',
          status: 'active',
          createdAt: '2024-01-01T00:00:00.000Z',
          updatedAt: '2024-01-01T00:00:00.000Z'
        }
      ]
    });
    
    await mockManager.interceptAPIRequest(page);
    
    await page.goto('/');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);
    
    const usernameInput = page.locator('input[placeholder="请输入用户名"]');
    const passwordInput = page.locator('input[placeholder="请输入密码"]');
    const loginButton = page.locator('button[type="submit"]');
    
    await usernameInput.waitFor({ state: 'visible', timeout: 10000 });
    await passwordInput.waitFor({ state: 'visible', timeout: 10000 });
    await loginButton.waitFor({ state: 'visible', timeout: 10000 });
    
    await usernameInput.fill('admin');
    await passwordInput.fill('admin123');
    await loginButton.click();
    
    await page.waitForURL(/.*dashboard/, { timeout: 10000 });
  });

  test('应该显示用户列表页面', async ({ page }) => {
    await page.goto('/users');
    await page.waitForLoadState('networkidle');
    
    await expect(page.locator('[data-testid="page-title"]')).toBeVisible();
    await expect(page.locator('[data-testid="add-user-button"]')).toBeVisible();
    await expect(page.locator('[data-testid="search-button"]')).toBeVisible();
  });

  test('应该显示用户数据表格', async ({ page }) => {
    await page.goto('/users');
    
    const table = page.locator('.ant-table');
    await expect(table).toBeVisible();
    
    await expect(page.getByText(/用户名/i)).toBeVisible();
    await expect(page.getByText(/邮箱/i)).toBeVisible();
    await expect(page.getByText(/手机号/i)).toBeVisible();
    await expect(page.getByText(/状态/i)).toBeVisible();
    await expect(page.getByText(/创建时间/i)).toBeVisible();
  });

  test('应该能够创建新用户', async ({ page }) => {
    await page.goto('/users');
    
    await page.getByRole('button', { name: /添加用户/i }).click();
    await expect(page).toHaveURL(/.*users\/create/);
    
    await page.getByPlaceholder(/请输入用户名/i).fill('testuser');
    await page.getByPlaceholder(/请输入密码/i).fill('Test@123456');
    await page.getByPlaceholder(/请输入确认密码/i).fill('Test@123456');
    await page.getByPlaceholder(/请输入邮箱/i).fill('test@example.com');
    await page.getByPlaceholder(/请输入手机号/i).fill('13800138000');
    await page.getByPlaceholder(/请输入真实姓名/i).fill('测试用户');
    
    await page.getByRole('button', { name: /提交/i }).click();
    
    await expect(page).toHaveURL(/.*users/);
    await expect(page.getByText(/创建成功/i)).toBeVisible();
  });

  test('创建用户时应该验证必填字段', async ({ page }) => {
    await page.goto('/users');
    await page.getByRole('button', { name: /添加用户/i }).click();
    
    await page.getByRole('button', { name: /提交/i }).click();
    
    await expect(page.getByText(/请输入用户名/i)).toBeVisible();
    await expect(page.getByText(/请输入密码/i)).toBeVisible();
    await expect(page.getByText(/请输入确认密码/i)).toBeVisible();
    await expect(page.getByText(/请输入邮箱/i)).toBeVisible();
  });

  test('应该验证密码一致性', async ({ page }) => {
    await page.goto('/users');
    await page.getByRole('button', { name: /添加用户/i }).click();
    
    await page.getByPlaceholder(/请输入用户名/i).fill('testuser');
    await page.getByPlaceholder(/请输入密码/i).fill('Test@123456');
    await page.getByPlaceholder(/请输入确认密码/i).fill('Different@123456');
    await page.getByPlaceholder(/请输入邮箱/i).fill('test@example.com');
    
    await page.getByRole('button', { name: /提交/i }).click();
    
    await expect(page.getByText(/两次输入的密码不一致/i)).toBeVisible();
  });

  test('应该验证邮箱格式', async ({ page }) => {
    await page.goto('/users');
    await page.getByRole('button', { name: /添加用户/i }).click();
    
    await page.getByPlaceholder(/请输入用户名/i).fill('testuser');
    await page.getByPlaceholder(/请输入密码/i).fill('Test@123456');
    await page.getByPlaceholder(/请输入确认密码/i).fill('Test@123456');
    await page.getByPlaceholder(/请输入邮箱/i).fill('invalid-email');
    
    await page.getByRole('button', { name: /提交/i }).click();
    
    await expect(page.getByText(/请输入正确的邮箱格式/i)).toBeVisible();
  });

  test('应该能够编辑用户', async ({ page }) => {
    await page.goto('/users');
    
    const editButton = page.getByRole('button').filter({ hasText: /编辑/i }).first();
    if (await editButton.isVisible()) {
      await editButton.click();
      await expect(page).toHaveURL(/.*users\/\d+\/edit/);
      
      const realNameInput = page.getByPlaceholder(/请输入真实姓名/i);
      await realNameInput.clear();
      await realNameInput.fill('更新后的用户名');
      
      await page.getByRole('button', { name: /提交/i }).click();
      
      await expect(page).toHaveURL(/.*users/);
      await expect(page.getByText(/更新成功/i)).toBeVisible();
    }
  });

  test('应该能够删除用户', async ({ page }) => {
    await page.goto('/users');
    
    const deleteButton = page.getByRole('button').filter({ hasText: /删除/i }).first();
    if (await deleteButton.isVisible()) {
      await deleteButton.click();
      
      await expect(page.getByText(/确认删除/i)).toBeVisible();
      await page.getByRole('button', { name: /确认/i }).click();
      
      await expect(page.getByText(/删除成功/i)).toBeVisible();
    }
  });

  test('应该能够查看用户详情', async ({ page }) => {
    await page.goto('/users');
    
    const detailButton = page.getByRole('button').filter({ hasText: /详情/i }).first();
    if (await detailButton.isVisible()) {
      await detailButton.click();
      await expect(page).toHaveURL(/.*users\/\d+\/detail/);
      await expect(page.getByText(/用户详情/i)).toBeVisible();
    }
  });

  test('应该能够刷新用户列表', async ({ page }) => {
    await page.goto('/users');
    
    await page.getByRole('button', { name: /刷新/i }).click();
    
    await expect(page.getByText(/刷新成功/i)).toBeVisible();
  });

  test('应该支持状态切换', async ({ page }) => {
    await page.goto('/users/create');
    
    const statusSelect = page.locator('.ant-select').filter({ hasText: /状态/i });
    await statusSelect.click();
    
    await expect(page.getByText(/启用/i)).toBeVisible();
    await expect(page.getByText(/禁用/i)).toBeVisible();
    
    await page.getByText(/禁用/i).click();
    await expect(statusSelect).toContainText(/禁用/i);
  });

  test('应该支持性别选择', async ({ page }) => {
    await page.goto('/users/create');
    
    const genderSelect = page.locator('.ant-select').filter({ hasText: /性别/i });
    await genderSelect.click();
    
    await expect(page.getByText(/男/i)).toBeVisible();
    await expect(page.getByText(/女/i)).toBeVisible();
    await expect(page.getByText(/未知/i)).toBeVisible();
    
    await page.getByText(/女/i).click();
    await expect(genderSelect).toContainText(/女/i);
  });
});