library-picturebook-activity/frontend/e2e/leai/generating.spec.ts

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

/**
 * P2: 生成进度页测试
 *
 * 测试 frontend/src/views/public/create/Generating.vue
 * - INT 类型状态判断（-1=失败, 1/2=生成中, 3+=完成）
 * - progress 百分比显示
 * - 按钮跳转
 */

const API_BASE = process.env.API_BASE_URL || 'http://localhost:8580/api'

test.describe('生成进度页', () => {

  test.describe('状态显示', () => {
    test('status=1 PENDING — 显示生成中', async ({ page }) => {
      await page.route(`**/public/creation/*/status`, async (route) => {
        await route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            code: 200,
            data: {
              id: 100,
              status: 1,
              progress: 0,
              progressMessage: null,
              remoteWorkId: 'wk_test_001',
              title: '',
              coverUrl: null,
            },
          }),
        })
      })

      await page.goto('/p/create/generating/100')

      // 应显示生成中
      await expect(page.locator('text=正在生成你的绘本')).toBeVisible({ timeout: 10_000 })
      // 不应显示进度条（progress=0）
      await expect(page.locator('.progress-bar')).not.toBeVisible()
    })

    test('status=2 PROCESSING — 显示进度条和百分比', async ({ page }) => {
      await page.route(`**/public/creation/*/status`, async (route) => {
        await route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            code: 200,
            data: {
              id: 101,
              status: 2,
              progress: 50,
              progressMessage: '正在绘制插画...',
              remoteWorkId: 'wk_test_002',
              title: '',
              coverUrl: null,
            },
          }),
        })
      })

      await page.goto('/p/create/generating/101')

      await expect(page.locator('text=正在绘制插画')).toBeVisible({ timeout: 10_000 })
      await expect(page.locator('.progress-bar')).toBeVisible()
      await expect(page.locator('text=50%')).toBeVisible()
    })

    test('status=3 COMPLETED — 显示完成', async ({ page }) => {
      await page.route(`**/public/creation/*/status`, async (route) => {
        await route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            code: 200,
            data: {
              id: 102,
              status: 3,
              progress: 100,
              progressMessage: null,
              remoteWorkId: 'wk_test_003',
              title: '测试绘本',
              coverUrl: 'https://cdn.example.com/cover.png',
            },
          }),
        })
      })

      await page.goto('/p/create/generating/102')

      await expect(page.locator('text=绘本生成完成')).toBeVisible({ timeout: 10_000 })
      await expect(page.locator('text=测试绘本')).toBeVisible()
      await expect(page.locator('button:has-text("查看绘本")')).toBeVisible()
      await expect(page.locator('button:has-text("继续创作")')).toBeVisible()
    })

    test('status=4 CATALOGED — 显示完成（status>=3）', async ({ page }) => {
      await page.route(`**/public/creation/*/status`, async (route) => {
        await route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            code: 200,
            data: {
              id: 103,
              status: 4,
              progress: 100,
              progressMessage: null,
              remoteWorkId: 'wk_test_004',
              title: '已编目绘本',
              coverUrl: null,
            },
          }),
        })
      })

      await page.goto('/p/create/generating/103')
      await expect(page.locator('text=绘本生成完成')).toBeVisible({ timeout: 10_000 })
    })

    test('status=5 DUBBED — 显示完成（status>=3）', async ({ page }) => {
      await page.route(`**/public/creation/*/status`, async (route) => {
        await route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            code: 200,
            data: {
              id: 104,
              status: 5,
              progress: 100,
              progressMessage: null,
              remoteWorkId: 'wk_test_005',
              title: '已配音绘本',
              coverUrl: null,
            },
          }),
        })
      })

      await page.goto('/p/create/generating/104')
      await expect(page.locator('text=绘本生成完成')).toBeVisible({ timeout: 10_000 })
    })

    test('status=-1 FAILED — 显示失败', async ({ page }) => {
      await page.route(`**/public/creation/*/status`, async (route) => {
        await route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            code: 200,
            data: {
              id: 105,
              status: -1,
              progress: 30,
              progressMessage: null,
              remoteWorkId: 'wk_test_failed',
              title: '',
              coverUrl: null,
              failReason: '图片处理失败',
            },
          }),
        })
      })

      await page.goto('/p/create/generating/105')
      await expect(page.locator('text=生成失败')).toBeVisible({ timeout: 10_000 })
      await expect(page.locator('text=图片处理失败')).toBeVisible()
      await expect(page.locator('button:has-text("重新创作")')).toBeVisible()
    })
  })

  test.describe('状态轮询', () => {
    test('从 PROCESSING → COMPLETED 自动更新', async ({ page }) => {
      let callCount = 0
      await page.route(`**/public/creation/*/status`, async (route) => {
        callCount++
        if (callCount <= 2) {
          await route.fulfill({
            status: 200,
            body: JSON.stringify({
              code: 200,
              data: { id: 200, status: 2, progress: 60, progressMessage: 'AI正在创作...', title: '', coverUrl: null },
            }),
          })
        } else {
          await route.fulfill({
            status: 200,
            body: JSON.stringify({
              code: 200,
              data: { id: 200, status: 3, progress: 100, title: '轮询测试绘本', coverUrl: 'https://cdn.example.com/cover.png' },
            }),
          })
        }
      })

      await page.goto('/p/create/generating/200')

      // 先看到生成中
      await expect(page.locator('text=AI正在创作')).toBeVisible({ timeout: 10_000 })

      // 等待状态变为完成（轮询间隔3秒）
      await expect(page.locator('text=绘本生成完成')).toBeVisible({ timeout: 15_000 })
      await expect(page.locator('text=轮询测试绘本')).toBeVisible()
    })
  })

  test.describe('按钮跳转', () => {
    test('"查看绘本" 跳转到作品详情', async ({ page }) => {
      await page.route(`**/public/creation/*/status`, async (route) => {
        await route.fulfill({
          status: 200,
          body: JSON.stringify({
            code: 200,
            data: { id: 300, status: 3, progress: 100, title: '跳转测试', coverUrl: null },
          }),
        })
      })

      await page.goto('/p/create/generating/300')
      await expect(page.locator('text=绘本生成完成')).toBeVisible({ timeout: 10_000 })

      await page.locator('button:has-text("查看绘本")').click()
      await expect(page).toHaveURL(/\/p\/works\/300/, { timeout: 5000 })
    })

    test('"继续创作" 跳转到创作页', async ({ page }) => {
      await page.route(`**/public/creation/*/status`, async (route) => {
        await route.fulfill({
          status: 200,
          body: JSON.stringify({
            code: 200,
            data: { id: 301, status: 3, progress: 100, title: '测试', coverUrl: null },
          }),
        })
      })

      await page.goto('/p/create/generating/301')
      await expect(page.locator('text=绘本生成完成')).toBeVisible({ timeout: 10_000 })

      await page.locator('button:has-text("继续创作")').click()
      await expect(page).toHaveURL(/\/p\/create/, { timeout: 5000 })
    })

    test('"重新创作" 跳转到创作页', async ({ page }) => {
      await page.route(`**/public/creation/*/status`, async (route) => {
        await route.fulfill({
          status: 200,
          body: JSON.stringify({
            code: 200,
            data: { id: 302, status: -1, failReason: '测试失败' },
          }),
        })
      })

      await page.goto('/p/create/generating/302')
      await expect(page.locator('text=生成失败')).toBeVisible({ timeout: 10_000 })

      await page.locator('button:has-text("重新创作")').click()
      await expect(page).toHaveURL(/\/p\/create/, { timeout: 5000 })
    })
  })
})