kindergarten_java/reading-platform-frontend/tests/e2e/admin/05-themes.spec.ts

/**
 * 超管端 E2E 测试 - 主题字典
 */

import { test, expect } from '@playwright/test';
import { loginAsAdmin, waitForTable, waitForSuccess, waitForModal } from './helpers';
import { TEST_DATA } from './fixtures';

test.describe('主题字典', () => {
  test.beforeEach(async ({ page }) => {
    await loginAsAdmin(page);
    // 导航到主题列表页面
    await page.goto('/admin/themes');
  });

  test.describe('列表页面', () => {
    test('访问主题列表页面', async ({ page }) => {
      // 验证页面 URL
      await expect(page).toHaveURL(/\/admin\/themes/);
    });

    test('验证列表加载', async ({ page }) => {
      // 等待表格加载
      await waitForTable(page);

      // 验证表格存在
      const table = page.locator('table, .ant-table');
      await expect(table).toBeVisible();

      // 验证新建按钮存在
      const createButton = page.getByText(/新建主题 | 创建主题/);
      await expect(createButton).toBeVisible();
    });

    test('验证主题列表数据', async ({ page }) => {
      await waitForTable(page);

      // 验证表格列头
      const headers = page.locator('table .ant-table-thead th');
      await expect(headers.first()).toBeVisible();
    });
  });

  test.describe('创建主题', () => {
    test('点击创建按钮', async ({ page }) => {
      // 点击新建主题按钮
      const createButton = page.getByText(/新建主题 | 创建主题/);
      await createButton.click();

      // 验证跳转到创建页面
      await page.waitForURL(/\/admin\/themes\/create|\/admin\/themes\/new/);
    });

    test('填写主题信息', async ({ page }) => {
      // 导航到创建页面
      await page.goto('/admin/themes/create');
      await page.waitForTimeout(500);

      // 填写主题名称
      const nameInput = page.locator('input[placeholder*="主题名称"]');
      if (await nameInput.isVisible()) {
        await nameInput.fill(TEST_DATA.theme.name);
      }

      // 填写描述
      const descInput = page.locator('textarea[placeholder*="描述"]');
      if (await descInput.isVisible()) {
        await descInput.fill(TEST_DATA.theme.description);
      }

      // 选择适用年龄
      const ageSelect = page.locator('[placeholder*="年龄"]');
      if (await ageSelect.isVisible()) {
        await ageSelect.click();
        await page.getByText('3-6 岁').click();
      }
    });

    test('上传主题图片', async ({ page }) => {
      // 导航到创建页面
      await page.goto('/admin/themes/create');
      await page.waitForTimeout(500);

      // 填写主题名称
      const nameInput = page.locator('input[placeholder*="主题名称"]');
      if (await nameInput.isVisible()) {
        await nameInput.fill(TEST_DATA.theme.name);
      }

      // 查找上传组件
      const uploadButton = page.locator('input[type="file"], .ant-upload input[type="file"]');
      if (await uploadButton.isVisible()) {
        // 注意：这里只是验证上传组件存在，不实际上传文件
        await expect(uploadButton).toBeVisible();
      }
    });

    test('保存主题', async ({ page }) => {
      // 导航到创建页面
      await page.goto('/admin/themes/create');
      await page.waitForTimeout(500);

      // 填写主题名称
      const nameInput = page.locator('input[placeholder*="主题名称"]');
      if (await nameInput.isVisible()) {
        await nameInput.fill(TEST_DATA.theme.name);
      }

      // 填写描述
      const descInput = page.locator('textarea[placeholder*="描述"]');
      if (await descInput.isVisible()) {
        await descInput.fill(TEST_DATA.theme.description);
      }

      // 点击保存按钮
      const saveButton = page.getByText(/保存 | 提交/);
      if (await saveButton.isVisible()) {
        await saveButton.click();

        // 等待保存成功提示或页面跳转
        await page.waitForTimeout(2000);
      }
    });
  });

  test.describe('编辑主题', () => {
    test('点击编辑按钮', async ({ page }) => {
      await waitForTable(page);

      // 查找第一个主题的编辑按钮
      const editButton = page.locator('button:has-text("编辑")').first();
      if (await editButton.isVisible()) {
        await editButton.click();

        // 验证跳转到编辑页面
        await page.waitForURL(/\/admin\/themes\/\d+\/edit|\/admin\/themes\/\d+/);
      }
    });

    test('修改主题信息', async ({ page }) => {
      await waitForTable(page);

      // 查找第一个主题的编辑按钮
      const editButton = page.locator('button:has-text("编辑")').first();
      if (await editButton.isVisible()) {
        await editButton.click();
        await page.waitForTimeout(1000);

        // 修改主题名称
        const nameInput = page.locator('input[placeholder*="主题名称"]');
        if (await nameInput.isVisible()) {
          const originalName = await nameInput.inputValue();
          await nameInput.fill(`${originalName}_已修改`);
        }

        // 点击保存按钮
        const saveButton = page.getByText(/保存/);
        if (await saveButton.isVisible()) {
          await saveButton.click();

          // 等待保存成功提示
          await page.waitForTimeout(1000);
        }
      }
    });
  });

  test.describe('删除主题', () => {
    test('点击删除按钮', async ({ page }) => {
      await waitForTable(page);

      // 查找第一个主题的删除按钮
      const deleteButton = page.locator('button:has-text("删除")').first();
      if (await deleteButton.isVisible()) {
        await expect(deleteButton).toBeVisible();
      }
    });

    test('确认删除弹窗', async ({ page }) => {
      await waitForTable(page);

      // 查找第一个主题的删除按钮
      const deleteButton = page.locator('button:has-text("删除")').first();
      if (await deleteButton.isVisible()) {
        await deleteButton.click();

        // 等待确认弹窗
        const confirmDialog = page.locator('.ant-modal-confirm');
        await expect(confirmDialog).toBeVisible({ timeout: 5000 });

        // 点击取消，不实际删除
        const cancelButton = page.locator('.ant-modal-confirm button:has-text("取消")');
        if (await cancelButton.isVisible()) {
          await cancelButton.click();
        }
      }
    });
  });
});