kindergarten_java/reading-platform-frontend/tests/e2e/parent/reading-tasks.spec.ts

/**
 * 家长端 E2E 测试 - 阅读任务模块
 *
 * 测试范围:
 * 1. 任务列表查看
 * 2. 任务提交功能（照片/视频/音频/文字）
 * 3. 查看教师评价功能
 */

import { test, expect } from '@playwright/test';

const BASE_URL = 'http://localhost:5173';

test.describe('家长端阅读任务 - 任务列表', () => {
  test.beforeEach(async ({ page }) => {
    // 登录
    await page.goto(`${BASE_URL}/login`);
    await page.waitForLoadState('networkidle');

    // 选择家长角色
    await page.click('.role-btn:has-text("家长")');
    await page.waitForTimeout(300);

    // 填写账号密码
    await page.fill('input[placeholder*="账号"]', 'parent1');
    await page.fill('input[placeholder*="密码"]', '123456');

    // 点击登录
    await page.click('button.login-btn');
    await page.waitForURL(/\/parent/, { timeout: 15000 });
  });

  test('P-LIST-01: 任务列表加载', async ({ page }) => {
    // 导航到任务页面
    await page.goto(`${BASE_URL}/parent/tasks`);
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);

    // 验证页面标题
    const pageTitle = page.locator('h2, .ant-page-header-heading-title');
    await expect(pageTitle.first()).toBeVisible({ timeout: 5000 });

    await page.screenshot({ path: 'test-results/parent-task-list.png', fullPage: true });
    console.log('✅ P-LIST-01 通过: 家长端任务列表页面加载');
  });

  test('P-LIST-02: 状态标签显示验证', async ({ page }) => {
    await page.goto(`${BASE_URL}/parent/tasks`);
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);

    // 查找状态标签
    const statusTags = page.locator('.ant-tag');
    const count = await statusTags.count();

    if (count > 0) {
      // 验证状态标签文本
      const validStatuses = ['待提交', '已提交', '已评价', '待完成', '已完成', 'PENDING', 'SUBMITTED', 'REVIEWED'];
      let hasValidStatus = false;

      for (let i = 0; i < Math.min(count, 10); i++) {
        const text = await statusTags.nth(i).textContent();
        if (text && validStatuses.some(s => text.includes(s))) {
          hasValidStatus = true;
          break;
        }
      }

      if (hasValidStatus) {
        console.log('✅ P-LIST-02 通过: 状态标签显示正确');
      } else {
        console.log(`⚠️ P-LIST-02: 状态标签存在但内容不匹配: ${await statusTags.first().textContent()}`);
      }
    } else {
      console.log('⚠️ P-LIST-02: 暂无任务数据，无法验证状态标签');
    }
  });

  test('P-LIST-03: 关联绘本显示验证', async ({ page }) => {
    await page.goto(`${BASE_URL}/parent/tasks`);
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);

    // 查找关联绘本标签
    const bookTag = page.locator('.ant-tag:has-text("绘本"), [class*="book-name"]');
    const count = await bookTag.count();

    if (count > 0) {
      const firstBook = await bookTag.first().textContent();
      console.log(`✅ P-LIST-03 通过: 关联绘本显示 (${firstBook})`);
    } else {
      console.log('⚠️ P-LIST-03: 未找到关联绘本标签');
    }
  });

  test('P-LIST-04: 状态驱动按钮验证', async ({ page }) => {
    await page.goto(`${BASE_URL}/parent/tasks`);
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);

    // 查找操作按钮
    const submitBtn = page.locator('button:has-text("提交"), button:has-text("去完成")');
    const viewFeedbackBtn = page.locator('button:has-text("查看评价"), button:has-text("查看反馈")');

    const submitCount = await submitBtn.count();
    const feedbackCount = await viewFeedbackBtn.count();

    console.log(`提交按钮数: ${submitCount}, 查看评价按钮数: ${feedbackCount}`);

    if (submitCount > 0 || feedbackCount > 0) {
      console.log('✅ P-LIST-04 通过: 状态驱动按钮正常显示');
    } else {
      console.log('⚠️ P-LIST-04: 未找到操作按钮（可能暂无任务数据）');
    }
  });
});

test.describe('家长端阅读任务 - 提交功能', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto(`${BASE_URL}/login`);
    await page.waitForLoadState('networkidle');
    await page.click('.role-btn:has-text("家长")');
    await page.fill('input[placeholder*="账号"]', 'parent1');
    await page.fill('input[placeholder*="密码"]', '123456');
    await page.click('button.login-btn');
    await page.waitForURL(/\/parent/, { timeout: 15000 });
  });

  test('P-SUBMIT-01: 提交弹窗打开', async ({ page }) => {
    await page.goto(`${BASE_URL}/parent/tasks`);
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);

    // 查找提交按钮
    const submitBtn = page.locator('button:has-text("提交"), button:has-text("去完成")').first();
    if (await submitBtn.isVisible()) {
      await submitBtn.click();
      await page.waitForTimeout(1000);

      // 验证弹窗显示
      const modal = page.locator('.ant-modal');
      if (await modal.isVisible()) {
        console.log('✅ P-SUBMIT-01 通过: 提交弹窗正常打开');
        await page.screenshot({ path: 'test-results/parent-submit-modal.png' });
      } else {
        console.log('❌ P-SUBMIT-01 失败: 提交弹窗未显示');
      }
    } else {
      console.log('⚠️ P-SUBMIT-01: 暂无待提交任务');
    }
  });

  test('P-SUBMIT-02: 照片上传组件', async ({ page }) => {
    await page.goto(`${BASE_URL}/parent/tasks`);
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);

    // 查找提交按钮
    const submitBtn = page.locator('button:has-text("提交"), button:has-text("去完成")').first();
    if (await submitBtn.isVisible()) {
      await submitBtn.click();
      await page.waitForTimeout(1000);

      // 查找上传组件
      const uploadArea = page.locator('.ant-upload, input[type="file"]');
      const uploadCount = await uploadArea.count();

      if (uploadCount > 0) {
        console.log('✅ P-SUBMIT-02 通过: 照片上传组件存在');
      } else {
        console.log('❌ P-SUBMIT-02 失败: 未找到上传组件');
      }
    } else {
      console.log('⚠️ P-SUBMIT-02: 暂无待提交任务');
    }
  });

  test('P-SUBMIT-03: 视频链接输入', async ({ page }) => {
    await page.goto(`${BASE_URL}/parent/tasks`);
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);

    const submitBtn = page.locator('button:has-text("提交"), button:has-text("去完成")').first();
    if (await submitBtn.isVisible()) {
      await submitBtn.click();
      await page.waitForTimeout(1000);

      // 查找视频链接输入框
      const videoInput = page.locator('input[placeholder*="视频"], input[placeholder*="video"]');
      if (await videoInput.count() > 0) {
        console.log('✅ P-SUBMIT-03 通过: 视频链接输入框存在');
      } else {
        console.log('⚠️ P-SUBMIT-03: 未找到视频链接输入框');
      }
    } else {
      console.log('⚠️ P-SUBMIT-03: 暂无待提交任务');
    }
  });

  test('P-SUBMIT-04: 阅读心得输入框', async ({ page }) => {
    await page.goto(`${BASE_URL}/parent/tasks`);
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);

    const submitBtn = page.locator('button:has-text("提交"), button:has-text("去完成")').first();
    if (await submitBtn.isVisible()) {
      await submitBtn.click();
      await page.waitForTimeout(1000);

      // 查找心得输入框
      const contentTextarea = page.locator('textarea[placeholder*="心得"], textarea[placeholder*="内容"]');
      if (await contentTextarea.count() > 0) {
        console.log('✅ P-SUBMIT-04 通过: 阅读心得输入框存在');
      } else {
        console.log('⚠️ P-SUBMIT-04: 未找到心得输入框');
      }
    } else {
      console.log('⚠️ P-SUBMIT-04: 暂无待提交任务');
    }
  });
});

test.describe('家长端阅读任务 - 查看评价', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto(`${BASE_URL}/login`);
    await page.waitForLoadState('networkidle');
    await page.click('.role-btn:has-text("家长")');
    await page.fill('input[placeholder*="账号"]', 'parent1');
    await page.fill('input[placeholder*="密码"]', '123456');
    await page.click('button.login-btn');
    await page.waitForURL(/\/parent/, { timeout: 15000 });
  });

  test('P-FEEDBACK-01: 查看评价按钮', async ({ page }) => {
    await page.goto(`${BASE_URL}/parent/tasks`);
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);

    // 查找查看评价按钮
    const viewFeedbackBtn = page.locator('button:has-text("查看评价"), button:has-text("查看反馈"), button:has-text("评价详情")');
    const count = await viewFeedbackBtn.count();

    if (count > 0) {
      console.log('✅ P-FEEDBACK-01 通过: 查看评价按钮存在');

      // 点击查看评价
      await viewFeedbackBtn.first().click();
      await page.waitForTimeout(1000);

      // 验证评价详情弹窗
      const modal = page.locator('.ant-modal');
      if (await modal.isVisible()) {
        console.log('✅ P-FEEDBACK-02 通过: 评价详情弹窗显示');
        await page.screenshot({ path: 'test-results/parent-feedback-detail.png' });
      }
    } else {
      console.log('⚠️ P-FEEDBACK-01: 暂无已评价任务');
    }
  });

  test('P-FEEDBACK-03: 评价结果显示验证', async ({ page }) => {
    await page.goto(`${BASE_URL}/parent/tasks`);
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);

    // 查找已评价任务的标签
    const excellentTag = page.locator('.ant-tag:has-text("优秀"), .ant-tag:has-text("EXCELLENT")');
    const passedTag = page.locator('.ant-tag:has-text("通过"), .ant-tag:has-text("PASSED")');
    const needsWorkTag = page.locator('.ant-tag:has-text("需改进"), .ant-tag:has-text("NEEDS_WORK")');

    const excellentCount = await excellentTag.count();
    const passedCount = await passedTag.count();
    const needsWorkCount = await needsWorkTag.count();

    if (excellentCount + passedCount + needsWorkCount > 0) {
      console.log(`✅ P-FEEDBACK-03 通过: 评价结果显示 (优秀:${excellentCount}, 通过:${passedCount}, 需改进:${needsWorkCount})`);
    } else {
      console.log('⚠️ P-FEEDBACK-03: 暂无已评价任务');
    }
  });

  test('P-FEEDBACK-04: 评分星星显示', async ({ page }) => {
    await page.goto(`${BASE_URL}/parent/tasks`);
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);

    // 查找评分星星组件
    const rateComponent = page.locator('.ant-rate, [class*="star"]');
    const count = await rateComponent.count();

    if (count > 0) {
      console.log('✅ P-FEEDBACK-04 通过: 评分星星组件存在');
    } else {
      console.log('⚠️ P-FEEDBACK-04: 未找到评分星星组件');
    }
  });
});