08ea5fbe98
添加用户管理视图、API和状态管理文件
182 lines
6.3 KiB
TypeScript
182 lines
6.3 KiB
TypeScript
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/User.vue',
|
|
createBy: 'system',
|
|
updateBy: 'system',
|
|
createdAt: '2024-01-01T00:00:00.000Z',
|
|
updatedAt: '2024-01-01T00:00:00.000Z',
|
|
children: []
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '角色管理',
|
|
code: 'role',
|
|
path: '/roles',
|
|
icon: 'LockOutlined',
|
|
sortOrder: 3,
|
|
status: 'active',
|
|
parentId: 0,
|
|
component: 'views/Role.vue',
|
|
createBy: 'system',
|
|
updateBy: 'system',
|
|
createdAt: '2024-01-01T00:00:00.000Z',
|
|
updatedAt: '2024-01-01T00:00:00.000Z',
|
|
children: []
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '菜单管理',
|
|
code: 'menu',
|
|
path: '/menus',
|
|
icon: 'MenuOutlined',
|
|
sortOrder: 4,
|
|
status: 'active',
|
|
parentId: 0,
|
|
component: 'views/Menu.vue',
|
|
createBy: 'system',
|
|
updateBy: 'system',
|
|
createdAt: '2024-01-01T00:00:00.000Z',
|
|
updatedAt: '2024-01-01T00:00:00.000Z',
|
|
children: []
|
|
}
|
|
]
|
|
});
|
|
|
|
await mockManager.interceptAPIRequest(page);
|
|
await page.goto('/login');
|
|
});
|
|
|
|
test('应该显示登录页面', async ({ page }) => {
|
|
await expect(page).toHaveTitle(/管理系统/);
|
|
|
|
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 expect(usernameInput).toBeVisible();
|
|
await expect(passwordInput).toBeVisible();
|
|
await expect(loginButton).toBeVisible();
|
|
});
|
|
|
|
test('应该成功登录', async ({ page }) => {
|
|
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: 15000 });
|
|
await expect(page.locator('.ant-breadcrumb-link').filter({ hasText: '仪表盘' })).toBeVisible({ timeout: 5000 });
|
|
});
|
|
|
|
test('登录失败应该显示错误信息', async ({ page }) => {
|
|
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('wronguser');
|
|
await passwordInput.fill('wrongpassword');
|
|
await loginButton.click();
|
|
|
|
await page.waitForTimeout(1000);
|
|
|
|
const errorMessage = page.locator('.ant-message-error');
|
|
await expect(errorMessage).toBeVisible({ timeout: 5000 });
|
|
await expect(errorMessage).toContainText(/登录失败|用户名或密码错误/i);
|
|
});
|
|
|
|
test('表单验证应该工作', async ({ page }) => {
|
|
const loginButton = page.locator('button[type="submit"]');
|
|
await loginButton.waitFor({ state: 'visible', timeout: 10000 });
|
|
await loginButton.click();
|
|
|
|
const usernameError = page.locator('.ant-form-item-explain-error').filter({ hasText: /请输入用户名/ });
|
|
const passwordError = page.locator('.ant-form-item-explain-error').filter({ hasText: /请输入密码/ });
|
|
|
|
await expect(usernameError).toBeVisible({ timeout: 5000 });
|
|
await expect(passwordError).toBeVisible({ timeout: 5000 });
|
|
});
|
|
|
|
test('应该能够登出', async ({ page }) => {
|
|
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 });
|
|
|
|
const dropdownTrigger = page.locator('.ant-dropdown-link');
|
|
await dropdownTrigger.click();
|
|
|
|
await page.waitForTimeout(500);
|
|
|
|
const logoutMenuItem = page.locator('.ant-dropdown-menu-item').filter({ hasText: /退出/i });
|
|
await logoutMenuItem.click();
|
|
|
|
await page.waitForURL(/.*login/, { timeout: 10000 });
|
|
await expect(page.locator('input[placeholder="请输入用户名"]')).toBeVisible();
|
|
});
|
|
});
|