张翔
239 lines
7.9 KiB
TypeScript
239 lines
7.9 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: 4,
|
|
name: '菜单管理',
|
|
code: 'menu',
|
|
path: '/menus',
|
|
icon: 'MenuOutlined',
|
|
sortOrder: 4,
|
|
status: 'active',
|
|
parentId: 0,
|
|
component: 'views/MenuManagement.vue',
|
|
createBy: 'system',
|
|
updateBy: 'system',
|
|
createdAt: '2024-01-01T00:00:00.000Z',
|
|
updatedAt: '2024-01-01T00:00:00.000Z',
|
|
children: []
|
|
},
|
|
{
|
|
id: 5,
|
|
name: '系统管理',
|
|
code: 'system',
|
|
path: '/system',
|
|
icon: 'SettingOutlined',
|
|
sortOrder: 5,
|
|
status: 'active',
|
|
parentId: 0,
|
|
component: null,
|
|
createBy: 'system',
|
|
updateBy: 'system',
|
|
createdAt: '2024-01-01T00:00:00.000Z',
|
|
updatedAt: '2024-01-01T00:00:00.000Z',
|
|
children: [
|
|
{
|
|
id: 6,
|
|
name: '用户管理',
|
|
code: 'user',
|
|
path: '/system/users',
|
|
icon: 'UserOutlined',
|
|
sortOrder: 1,
|
|
status: 'active',
|
|
parentId: 5,
|
|
component: 'views/UserManagement.vue',
|
|
createBy: 'system',
|
|
updateBy: 'system',
|
|
createdAt: '2024-01-01T00:00:00.000Z',
|
|
updatedAt: '2024-01-01T00:00:00.000Z',
|
|
children: []
|
|
},
|
|
{
|
|
id: 7,
|
|
name: '角色管理',
|
|
code: 'role',
|
|
path: '/system/roles',
|
|
icon: 'LockOutlined',
|
|
sortOrder: 2,
|
|
status: 'active',
|
|
parentId: 5,
|
|
component: 'views/RoleManagement.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('/');
|
|
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('/menus');
|
|
await expect(page.getByText(/菜单管理/i)).toBeVisible();
|
|
await expect(page.getByRole('button', { name: /添加菜单/i })).toBeVisible();
|
|
await expect(page.getByRole('button', { name: /刷新/i })).toBeVisible();
|
|
});
|
|
|
|
test('应该显示菜单数据表格', async ({ page }) => {
|
|
await page.goto('/menus');
|
|
|
|
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();
|
|
await expect(page.getByText(/状态/i)).toBeVisible();
|
|
});
|
|
|
|
test('应该能够创建新菜单', async ({ page }) => {
|
|
await page.goto('/menus');
|
|
|
|
await page.getByRole('button', { name: /添加菜单/i }).click();
|
|
await expect(page).toHaveURL(/.*menus\/create/);
|
|
|
|
await page.getByPlaceholder(/请输入菜单名称/i).fill('测试菜单');
|
|
await page.getByPlaceholder(/请输入菜单编码/i).fill('TEST_MENU');
|
|
await page.getByPlaceholder(/请输入路径/i).fill('/test-menu');
|
|
await page.getByPlaceholder(/请输入组件路径/i).fill('@/views/test/Test.vue');
|
|
await page.getByPlaceholder(/请输入排序/i).fill('100');
|
|
|
|
await page.getByRole('button', { name: /提交/i }).click();
|
|
|
|
await expect(page).toHaveURL(/.*menus/);
|
|
await expect(page.getByText(/创建成功/i)).toBeVisible();
|
|
});
|
|
|
|
test('创建菜单时应该验证必填字段', async ({ page }) => {
|
|
await page.goto('/menus');
|
|
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();
|
|
});
|
|
|
|
test('应该能够编辑菜单', async ({ page }) => {
|
|
await page.goto('/menus');
|
|
|
|
const editButton = page.getByRole('button').filter({ hasText: /编辑/i }).first();
|
|
if (await editButton.isVisible()) {
|
|
await editButton.click();
|
|
await expect(page).toHaveURL(/.*menus\/\d+\/edit/);
|
|
|
|
const menuNameInput = page.getByPlaceholder(/请输入菜单名称/i);
|
|
await menuNameInput.clear();
|
|
await menuNameInput.fill('更新后的菜单名称');
|
|
|
|
await page.getByRole('button', { name: /提交/i }).click();
|
|
|
|
await expect(page).toHaveURL(/.*menus/);
|
|
await expect(page.getByText(/更新成功/i)).toBeVisible();
|
|
}
|
|
});
|
|
|
|
test('应该能够删除菜单', async ({ page }) => {
|
|
await page.goto('/menus');
|
|
|
|
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('/menus');
|
|
|
|
await page.getByRole('button', { name: /刷新/i }).click();
|
|
|
|
await expect(page.getByText(/刷新成功/i)).toBeVisible();
|
|
});
|
|
|
|
test('应该支持菜单类型选择', async ({ page }) => {
|
|
await page.goto('/menus/create');
|
|
|
|
const menuTypeSelect = page.locator('.ant-select').first();
|
|
await menuTypeSelect.click();
|
|
|
|
await expect(page.getByText(/菜单/i)).toBeVisible();
|
|
await expect(page.getByText(/按钮/i)).toBeVisible();
|
|
|
|
await page.getByText(/按钮/i).click();
|
|
await expect(menuTypeSelect).toContainText(/按钮/i);
|
|
});
|
|
|
|
test('应该支持状态切换', async ({ page }) => {
|
|
await page.goto('/menus/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);
|
|
});
|
|
});
|