novalon-manage-system/novalon-manage-web/e2e/menu-management.spec.ts

import { test, expect } from '@playwright/test';
import { LoginPage } from './pages/LoginPage';
import { MenuManagementPage } from './pages/MenuManagementPage';

test.describe('菜单管理 E2E 测试', () => {
  let loginPage: LoginPage;
  let menuManagementPage: MenuManagementPage;

  test.beforeEach(async ({ page }) => {
    loginPage = new LoginPage(page);
    menuManagementPage = new MenuManagementPage(page);

    await loginPage.goto();
    await loginPage.login('admin', 'admin123');
    await expect(page).toHaveURL(/.*dashboard/);
  });

  test('MENU-001: 访问菜单管理页面', async ({ page }) => {
    await test.step('导航到菜单管理页面', async () => {
      await menuManagementPage.goto();
      await expect(page).toHaveURL(/.*menus/);
    });

    await test.step('验证页面元素可见', async () => {
      await expect(menuManagementPage.table).toBeVisible();
      await expect(menuManagementPage.createMenuButton).toBeVisible();
      await expect(menuManagementPage.searchInput).toBeVisible();
    });
  });

  test('MENU-002: 创建一级菜单', async ({ page }) => {
    await test.step('导航到菜单管理页面', async () => {
      await menuManagementPage.goto();
    });

    await test.step('点击新增菜单按钮', async () => {
      await menuManagementPage.clickCreateMenu();
    });

    await test.step('填写菜单信息', async () => {
      const timestamp = Date.now();
      const menuData = {
        menuName: `测试菜单_${timestamp}`,
        menuType: '目录',
        path: `/test-menu-${timestamp}`,
        sort: 1,
        visible: '1',
        status: '1'
      };
      await menuManagementPage.fillMenuForm(menuData);
    });

    await test.step('提交表单', async () => {
      await menuManagementPage.submitForm();
      await expect(menuManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
    });

    await test.step('验证菜单创建成功', async () => {
      await menuManagementPage.reload();
      const timestamp = Date.now();
      const menuCreated = await menuManagementPage.containsText(`测试菜单_${timestamp}`);
      expect(menuCreated).toBe(true);
    });
  });

  test('MENU-003: 创建二级菜单', async ({ page }) => {
    await test.step('导航到菜单管理页面', async () => {
      await menuManagementPage.goto();
    });

    await test.step('展开父级菜单', async () => {
      await menuManagementPage.expandAll();
      await page.waitForTimeout(1000);
    });

    await test.step('点击新增菜单按钮', async () => {
      await menuManagementPage.clickCreateMenu();
    });

    await test.step('填写二级菜单信息', async () => {
      const timestamp = Date.now();
      const menuData = {
        menuName: `测试子菜单_${timestamp}`,
        menuType: '菜单',
        path: `/test-submenu-${timestamp}`,
        component: `TestSubmenu${timestamp}`,
        permission: `system:test:submenu:${timestamp}`,
        sort: 1,
        visible: '1',
        status: '1'
      };
      await menuManagementPage.fillMenuForm(menuData);
    });

    await test.step('提交表单', async () => {
      await menuManagementPage.submitForm();
      await expect(menuManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
    });
  });

  test('MENU-004: 编辑菜单', async ({ page }) => {
    await test.step('导航到菜单管理页面', async () => {
      await menuManagementPage.goto();
    });

    await test.step('编辑现有菜单', async () => {
      const menuName = '系统管理';
      await menuManagementPage.editMenu(menuName);
      await page.waitForTimeout(500);
    });

    await test.step('修改菜单信息', async () => {
      const timestamp = Date.now();
      const updateData = {
        menuName: `系统管理_更新_${timestamp}`,
        sort: 2
      };
      await menuManagementPage.fillMenuForm(updateData);
    });

    await test.step('提交修改', async () => {
      await menuManagementPage.submitForm();
      await expect(menuManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
    });
  });

  test('MENU-005: 删除菜单', async ({ page }) => {
    await test.step('导航到菜单管理页面', async () => {
      await menuManagementPage.goto();
    });

    await test.step('创建测试菜单', async () => {
      await menuManagementPage.clickCreateMenu();
      const timestamp = Date.now();
      const menuData = {
        menuName: `待删除菜单_${timestamp}`,
        menuType: '目录',
        path: `/delete-test-${timestamp}`,
        sort: 99,
        visible: '1',
        status: '1'
      };
      await menuManagementPage.fillMenuForm(menuData);
      await menuManagementPage.submitForm();
      await expect(menuManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
      await page.waitForTimeout(1000);
    });

    await test.step('删除菜单', async () => {
      const timestamp = Date.now();
      await menuManagementPage.deleteMenu(`待删除菜单_${timestamp}`);
      await menuManagementPage.confirmDelete();
      await expect(menuManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
    });

    await test.step('验证菜单已删除', async () => {
      await menuManagementPage.reload();
      const timestamp = Date.now();
      const menuDeleted = await menuManagementPage.containsText(`待删除菜单_${timestamp}`);
      expect(menuDeleted).toBe(false);
    });
  });

  test('MENU-006: 搜索菜单', async ({ page }) => {
    await test.step('导航到菜单管理页面', async () => {
      await menuManagementPage.goto();
    });

    await test.step('搜索菜单', async () => {
      await menuManagementPage.search('系统管理');
      await page.waitForTimeout(1000);
    });

    await test.step('验证搜索结果', async () => {
      const searchResult = await menuManagementPage.containsText('系统管理');
      expect(searchResult).toBe(true);
    });

    await test.step('清除搜索', async () => {
      await menuManagementPage.search('');
      await page.waitForTimeout(1000);
      const menuCount = await menuManagementPage.getMenuCount();
      expect(menuCount).toBeGreaterThan(0);
    });
  });

  test('MENU-007: 菜单树展开和折叠', async ({ page }) => {
    await test.step('导航到菜单管理页面', async () => {
      await menuManagementPage.goto();
    });

    await test.step('展开所有菜单', async () => {
      await menuManagementPage.expandAll();
      await page.waitForTimeout(1000);
      await expect(menuManagementPage.treeContainer).toBeVisible();
    });

    await test.step('折叠所有菜单', async () => {
      await menuManagementPage.collapseAll();
      await page.waitForTimeout(1000);
      await expect(menuManagementPage.treeContainer).toBeVisible();
    });
  });

  test('MENU-008: 菜单排序功能', async ({ page }) => {
    await test.step('导航到菜单管理页面', async () => {
      await menuManagementPage.goto();
    });

    await test.step('创建多个菜单测试排序', async () => {
      for (let i = 1; i <= 3; i++) {
        await menuManagementPage.clickCreateMenu();
        const timestamp = Date.now();
        const menuData = {
          menuName: `排序测试菜单_${i}_${timestamp}`,
          menuType: '目录',
          path: `/sort-test-${i}-${timestamp}`,
          sort: i,
          visible: '1',
          status: '1'
        };
        await menuManagementPage.fillMenuForm(menuData);
        await menuManagementPage.submitForm();
        await expect(menuManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
        await page.waitForTimeout(500);
      }
    });

    await test.step('验证菜单按排序号显示', async () => {
      await menuManagementPage.reload();
      await page.waitForTimeout(1000);
      const menuCount = await menuManagementPage.getMenuCount();
      expect(menuCount).toBeGreaterThan(0);
    });
  });

  test('MENU-009: 菜单可见性控制', async ({ page }) => {
    await test.step('导航到菜单管理页面', async () => {
      await menuManagementPage.goto();
    });

    await test.step('创建可见菜单', async () => {
      await menuManagementPage.clickCreateMenu();
      const timestamp = Date.now();
      const menuData = {
        menuName: `可见菜单_${timestamp}`,
        menuType: '菜单',
        path: `/visible-menu-${timestamp}`,
        sort: 1,
        visible: '1',
        status: '1'
      };
      await menuManagementPage.fillMenuForm(menuData);
      await menuManagementPage.submitForm();
      await expect(menuManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
    });

    await test.step('创建隐藏菜单', async () => {
      await menuManagementPage.clickCreateMenu();
      const timestamp = Date.now();
      const menuData = {
        menuName: `隐藏菜单_${timestamp}`,
        menuType: '菜单',
        path: `/hidden-menu-${timestamp}`,
        sort: 2,
        visible: '0',
        status: '1'
      };
      await menuManagementPage.fillMenuForm(menuData);
      await menuManagementPage.submitForm();
      await expect(menuManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
    });
  });

  test('MENU-010: 菜单状态管理', async ({ page }) => {
    await test.step('导航到菜单管理页面', async () => {
      await menuManagementPage.goto();
    });

    await test.step('创建启用状态的菜单', async () => {
      await menuManagementPage.clickCreateMenu();
      const timestamp = Date.now();
      const menuData = {
        menuName: `启用菜单_${timestamp}`,
        menuType: '菜单',
        path: `/enabled-menu-${timestamp}`,
        sort: 1,
        visible: '1',
        status: '1'
      };
      await menuManagementPage.fillMenuForm(menuData);
      await menuManagementPage.submitForm();
      await expect(menuManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
    });

    await test.step('创建禁用状态的菜单', async () => {
      await menuManagementPage.clickCreateMenu();
      const timestamp = Date.now();
      const menuData = {
        menuName: `禁用菜单_${timestamp}`,
        menuType: '菜单',
        path: `/disabled-menu-${timestamp}`,
        sort: 2,
        visible: '1',
        status: '0'
      };
      await menuManagementPage.fillMenuForm(menuData);
      await menuManagementPage.submitForm();
      await expect(menuManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
    });
  });

  test('MENU-011: 菜单权限标识', async ({ page }) => {
    await test.step('导航到菜单管理页面', async () => {
      await menuManagementPage.goto();
    });

    await test.step('创建带权限标识的菜单', async () => {
      await menuManagementPage.clickCreateMenu();
      const timestamp = Date.now();
      const menuData = {
        menuName: `权限菜单_${timestamp}`,
        menuType: '菜单',
        path: `/permission-menu-${timestamp}`,
        component: `PermissionMenu${timestamp}`,
        permission: `system:permission:menu:${timestamp}`,
        sort: 1,
        visible: '1',
        status: '1'
      };
      await menuManagementPage.fillMenuForm(menuData);
      await menuManagementPage.submitForm();
      await expect(menuManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
    });
  });

  test('MENU-012: 菜单组件路径配置', async ({ page }) => {
    await test.step('导航到菜单管理页面', async () => {
      await menuManagementPage.goto();
    });

    await test.step('创建带组件路径的菜单', async () => {
      await menuManagementPage.clickCreateMenu();
      const timestamp = Date.now();
      const menuData = {
        menuName: `组件菜单_${timestamp}`,
        menuType: '菜单',
        path: `/component-menu-${timestamp}`,
        component: `system/ComponentMenu${timestamp}`,
        sort: 1,
        visible: '1',
        status: '1'
      };
      await menuManagementPage.fillMenuForm(menuData);
      await menuManagementPage.submitForm();
      await expect(menuManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
    });
  });

  test('MENU-013: 菜单响应式布局', async ({ page }) => {
    await test.step('导航到菜单管理页面', async () => {
      await menuManagementPage.goto();
    });

    await test.step('验证桌面端布局', async () => {
      await page.setViewportSize({ width: 1280, height: 720 });
      await expect(menuManagementPage.table).toBeVisible();
      await expect(menuManagementPage.createMenuButton).toBeVisible();
    });

    await test.step('验证平板端布局', async () => {
      await page.setViewportSize({ width: 768, height: 1024 });
      await expect(menuManagementPage.table).toBeVisible();
      await expect(menuManagementPage.createMenuButton).toBeVisible();
    });

    await test.step('验证移动端布局', async () => {
      await page.setViewportSize({ width: 375, height: 667 });
      await expect(menuManagementPage.table).toBeVisible();
    });
  });

  test('MENU-014: 菜单数据验证', async ({ page }) => {
    await test.step('导航到菜单管理页面', async () => {
      await menuManagementPage.goto();
    });

    await test.step('验证菜单数据完整性', async () => {
      const menuCount = await menuManagementPage.getMenuCount();
      expect(menuCount).toBeGreaterThan(0);
    });

    await test.step('验证表格包含必要列', async () => {
      await expect(menuManagementPage.table).toContainText('菜单名称');
      await expect(menuManagementPage.table).toContainText('类型');
      await expect(menuManagementPage.table).toContainText('路径');
      await expect(menuManagementPage.table).toContainText('排序');
    });
  });
});