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

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

test.describe('字典管理 E2E 测试', () => {
  let loginPage: LoginPage;
  let dictManagementPage: DictionaryManagementPage;

  test.beforeEach(async ({ page }) => {
    loginPage = new LoginPage(page);
    dictManagementPage = new DictionaryManagementPage(page);

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

  test('DICT-001: 访问字典管理页面', async ({ page }) => {
    await test.step('导航到字典管理页面', async () => {
      await dictManagementPage.goto();
      await expect(page).toHaveURL(/.*dict/);
    });

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

  test('DICT-002: 创建字典类型', async ({ page }) => {
    await test.step('导航到字典管理页面', async () => {
      await dictManagementPage.goto();
    });

    await test.step('点击新增字典类型按钮', async () => {
      await dictManagementPage.clickCreateDictType();
    });

    await test.step('填写字典类型信息', async () => {
      const timestamp = Date.now();
      const dictTypeData = {
        dictName: `测试字典类型_${timestamp}`,
        dictType: `test_dict_type_${timestamp}`,
        status: '1',
        remark: '这是一个测试字典类型'
      };
      await dictManagementPage.fillDictTypeForm(dictTypeData);
    });

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

    await test.step('验证字典类型创建成功', async () => {
      await dictManagementPage.reload();
      const dictTypeCount = await dictManagementPage.getDictTypeCount();
      expect(dictTypeCount).toBeGreaterThan(0);
    });
  });

  test('DICT-003: 编辑字典类型', async ({ page }) => {
    await test.step('导航到字典管理页面', async () => {
      await dictManagementPage.goto();
    });

    await test.step('创建测试字典类型', async () => {
      await dictManagementPage.clickCreateDictType();
      const timestamp = Date.now();
      const dictTypeData = {
        dictName: `待编辑字典_${timestamp}`,
        dictType: `edit_dict_${timestamp}`,
        status: '1'
      };
      await dictManagementPage.fillDictTypeForm(dictTypeData);
      await dictManagementPage.submitForm();
      await expect(dictManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
      await page.waitForTimeout(1000);
    });

    await test.step('编辑字典类型', async () => {
      const timestamp = Date.now();
      await dictManagementPage.editDictType(`待编辑字典_${timestamp}`);
      await page.waitForTimeout(500);
      const updateData = {
        dictName: `已编辑字典_${timestamp}`,
        remark: '这是更新后的备注'
      };
      await dictManagementPage.fillDictTypeForm(updateData);
    });

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

  test('DICT-004: 删除字典类型', async ({ page }) => {
    await test.step('导航到字典管理页面', async () => {
      await dictManagementPage.goto();
    });

    await test.step('创建测试字典类型', async () => {
      await dictManagementPage.clickCreateDictType();
      const timestamp = Date.now();
      const dictTypeData = {
        dictName: `待删除字典_${timestamp}`,
        dictType: `delete_dict_${timestamp}`,
        status: '1'
      };
      await dictManagementPage.fillDictTypeForm(dictTypeData);
      await dictManagementPage.submitForm();
      await expect(dictManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
      await page.waitForTimeout(1000);
    });

    await test.step('删除字典类型', async () => {
      const timestamp = Date.now();
      await dictManagementPage.deleteDictType(`待删除字典_${timestamp}`);
      await dictManagementPage.confirmDelete();
      await expect(dictManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
    });

    await test.step('验证字典类型已删除', async () => {
      await dictManagementPage.reload();
      const timestamp = Date.now();
      const dictDeleted = await dictManagementPage.containsText(`待删除字典_${timestamp}`);
      expect(dictDeleted).toBe(false);
    });
  });

  test('DICT-005: 创建字典数据', async ({ page }) => {
    await test.step('导航到字典管理页面', async () => {
      await dictManagementPage.goto();
    });

    await test.step('点击新增字典数据按钮', async () => {
      await dictManagementPage.clickCreateDictData();
    });

    await test.step('填写字典数据信息', async () => {
      const timestamp = Date.now();
      const dictData = {
        dictLabel: `测试字典标签_${timestamp}`,
        dictValue: `test_value_${timestamp}`,
        dictType: 'sys_normal_disable',
        cssClass: 'el-tag-success',
        listClass: 'default',
        isDefault: 'Y',
        status: '1',
        sort: 1
      };
      await dictManagementPage.fillDictDataForm(dictData);
    });

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

    await test.step('验证字典数据创建成功', async () => {
      await dictManagementPage.reload();
      const dictDataCount = await dictManagementPage.getDictDataCount();
      expect(dictDataCount).toBeGreaterThan(0);
    });
  });

  test('DICT-006: 编辑字典数据', async ({ page }) => {
    await test.step('导航到字典管理页面', async () => {
      await dictManagementPage.goto();
    });

    await test.step('创建测试字典数据', async () => {
      await dictManagementPage.clickCreateDictData();
      const timestamp = Date.now();
      const dictData = {
        dictLabel: `待编辑标签_${timestamp}`,
        dictValue: `edit_value_${timestamp}`,
        dictType: 'sys_normal_disable',
        status: '1',
        sort: 1
      };
      await dictManagementPage.fillDictDataForm(dictData);
      await dictManagementPage.submitForm();
      await expect(dictManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
      await page.waitForTimeout(1000);
    });

    await test.step('编辑字典数据', async () => {
      const timestamp = Date.now();
      await dictManagementPage.editDictData(`待编辑标签_${timestamp}`);
      await page.waitForTimeout(500);
      const updateData = {
        dictLabel: `已编辑标签_${timestamp}`,
        cssClass: 'el-tag-warning'
      };
      await dictManagementPage.fillDictDataForm(updateData);
    });

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

  test('DICT-007: 删除字典数据', async ({ page }) => {
    await test.step('导航到字典管理页面', async () => {
      await dictManagementPage.goto();
    });

    await test.step('创建测试字典数据', async () => {
      await dictManagementPage.clickCreateDictData();
      const timestamp = Date.now();
      const dictData = {
        dictLabel: `待删除标签_${timestamp}`,
        dictValue: `delete_value_${timestamp}`,
        dictType: 'sys_normal_disable',
        status: '1',
        sort: 1
      };
      await dictManagementPage.fillDictDataForm(dictData);
      await dictManagementPage.submitForm();
      await expect(dictManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
      await page.waitForTimeout(1000);
    });

    await test.step('删除字典数据', async () => {
      const timestamp = Date.now();
      await dictManagementPage.deleteDictData(`待删除标签_${timestamp}`);
      await dictManagementPage.confirmDelete();
      await expect(dictManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
    });

    await test.step('验证字典数据已删除', async () => {
      await dictManagementPage.reload();
      const timestamp = Date.now();
      const dictDataDeleted = await dictManagementPage.containsText(`待删除标签_${timestamp}`);
      expect(dictDataDeleted).toBe(false);
    });
  });

  test('DICT-008: 搜索字典', async ({ page }) => {
    await test.step('导航到字典管理页面', async () => {
      await dictManagementPage.goto();
    });

    await test.step('搜索字典类型', async () => {
      await dictManagementPage.search('系统');
      await page.waitForTimeout(1000);
    });

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

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

  test('DICT-009: 字典状态管理', async ({ page }) => {
    await test.step('导航到字典管理页面', async () => {
      await dictManagementPage.goto();
    });

    await test.step('创建启用状态的字典类型', async () => {
      await dictManagementPage.clickCreateDictType();
      const timestamp = Date.now();
      const dictTypeData = {
        dictName: `启用字典_${timestamp}`,
        dictType: `enabled_dict_${timestamp}`,
        status: '1',
        remark: '这是启用的字典'
      };
      await dictManagementPage.fillDictTypeForm(dictTypeData);
      await dictManagementPage.submitForm();
      await expect(dictManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
    });

    await test.step('创建禁用状态的字典类型', async () => {
      await dictManagementPage.clickCreateDictType();
      const timestamp = Date.now();
      const dictTypeData = {
        dictName: `禁用字典_${timestamp}`,
        dictType: `disabled_dict_${timestamp}`,
        status: '0',
        remark: '这是禁用的字典'
      };
      await dictManagementPage.fillDictTypeForm(dictTypeData);
      await dictManagementPage.submitForm();
      await expect(dictManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
    });
  });

  test('DICT-010: 字典排序功能', async ({ page }) => {
    await test.step('导航到字典管理页面', async () => {
      await dictManagementPage.goto();
    });

    await test.step('创建多个字典数据测试排序', async () => {
      for (let i = 1; i <= 3; i++) {
        await dictManagementPage.clickCreateDictData();
        const timestamp = Date.now();
        const dictData = {
          dictLabel: `排序标签_${i}_${timestamp}`,
          dictValue: `sort_value_${i}_${timestamp}`,
          dictType: 'sys_normal_disable',
          status: '1',
          sort: i
        };
        await dictManagementPage.fillDictDataForm(dictData);
        await dictManagementPage.submitForm();
        await expect(dictManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
        await page.waitForTimeout(500);
      }
    });

    await test.step('验证字典数据按排序号显示', async () => {
      await dictManagementPage.reload();
      await page.waitForTimeout(1000);
      const dictDataCount = await dictManagementPage.getDictDataCount();
      expect(dictDataCount).toBeGreaterThan(0);
    });
  });

  test('DICT-011: 字典默认值设置', async ({ page }) => {
    await test.step('导航到字典管理页面', async () => {
      await dictManagementPage.goto();
    });

    await test.step('创建默认字典数据', async () => {
      await dictManagementPage.clickCreateDictData();
      const timestamp = Date.now();
      const dictData = {
        dictLabel: `默认标签_${timestamp}`,
        dictValue: `default_value_${timestamp}`,
        dictType: 'sys_normal_disable',
        isDefault: 'Y',
        status: '1',
        sort: 1
      };
      await dictManagementPage.fillDictDataForm(dictData);
      await dictManagementPage.submitForm();
      await expect(dictManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
    });

    await test.step('创建非默认字典数据', async () => {
      await dictManagementPage.clickCreateDictData();
      const timestamp = Date.now();
      const dictData = {
        dictLabel: `非默认标签_${timestamp}`,
        dictValue: `non_default_value_${timestamp}`,
        dictType: 'sys_normal_disable',
        isDefault: 'N',
        status: '1',
        sort: 2
      };
      await dictManagementPage.fillDictDataForm(dictData);
      await dictManagementPage.submitForm();
      await expect(dictManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
    });
  });

  test('DICT-012: 字典CSS样式配置', async ({ page }) => {
    await test.step('导航到字典管理页面', async () => {
      await dictManagementPage.goto();
    });

    await test.step('创建带CSS样式的字典数据', async () => {
      await dictManagementPage.clickCreateDictData();
      const timestamp = Date.now();
      const dictData = {
        dictLabel: `样式标签_${timestamp}`,
        dictValue: `style_value_${timestamp}`,
        dictType: 'sys_normal_disable',
        cssClass: 'el-tag-success',
        listClass: 'default',
        status: '1',
        sort: 1
      };
      await dictManagementPage.fillDictDataForm(dictData);
      await dictManagementPage.submitForm();
      await expect(dictManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
    });
  });

  test('DICT-013: 字典数据验证', async ({ page }) => {
    await test.step('导航到字典管理页面', async () => {
      await dictManagementPage.goto();
    });

    await test.step('验证字典类型数据完整性', async () => {
      const dictTypeCount = await dictManagementPage.getDictTypeCount();
      expect(dictTypeCount).toBeGreaterThan(0);
    });

    await test.step('验证字典数据完整性', async () => {
      const dictDataCount = await dictManagementPage.getDictDataCount();
      expect(dictDataCount).toBeGreaterThan(0);
    });

    await test.step('验证表格包含必要列', async () => {
      await expect(dictManagementPage.table).toContainText('字典名称');
      await expect(dictManagementPage.table).toContainText('字典类型');
      await expect(dictManagementPage.table).toContainText('状态');
    });
  });

  test('DICT-014: 字典响应式布局', async ({ page }) => {
    await test.step('导航到字典管理页面', async () => {
      await dictManagementPage.goto();
    });

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

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

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

  test('DICT-015: 字典类型与数据关联', async ({ page }) => {
    await test.step('导航到字典管理页面', async () => {
      await dictManagementPage.goto();
    });

    await test.step('创建字典类型', async () => {
      await dictManagementPage.clickCreateDictType();
      const timestamp = Date.now();
      const dictTypeData = {
        dictName: `关联测试字典_${timestamp}`,
        dictType: `relation_dict_${timestamp}`,
        status: '1',
        remark: '用于测试类型与数据关联'
      };
      await dictManagementPage.fillDictTypeForm(dictTypeData);
      await dictManagementPage.submitForm();
      await expect(dictManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
      await page.waitForTimeout(1000);
    });

    await test.step('为该类型创建多个字典数据', async () => {
      for (let i = 1; i <= 3; i++) {
        await dictManagementPage.clickCreateDictData();
        const timestamp = Date.now();
        const dictData = {
          dictLabel: `关联数据_${i}_${timestamp}`,
          dictValue: `relation_value_${i}_${timestamp}`,
          dictType: `relation_dict_${timestamp}`,
          status: '1',
          sort: i
        };
        await dictManagementPage.fillDictDataForm(dictData);
        await dictManagementPage.submitForm();
        await expect(dictManagementPage.isSuccessMessageVisible()).resolves.toBe(true);
        await page.waitForTimeout(500);
      }
    });

    await test.step('验证字典数据关联成功', async () => {
      await dictManagementPage.reload();
      const dictDataCount = await dictManagementPage.getDictDataCount();
      expect(dictDataCount).toBeGreaterThanOrEqual(3);
    });
  });
});