PicAnalysis/frontend/e2e/images.spec.ts

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

test.describe('Images', () => {
  test.beforeEach(async ({ page }) => {
    // 设置已登录状态
    await page.goto('/dashboard');
    await page.evaluate(() => {
      localStorage.setItem('auth-storage', JSON.stringify({
        state: {
          user: { id: '1', username: 'test' },
          token: 'test-token',
          isAuthenticated: true,
        },
        version: 0,
      }));
      localStorage.setItem('auth_token', 'test-token');
    });

    // Mock API
    await page.route('**/api/images**', (route) => {
      if (route.request().method() === 'GET') {
        route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            success: true,
            data: [
              {
                id: '1',
                file_path: '/uploads/test.jpg',
                file_size: 102400,
                mime_type: 'image/jpeg',
                ocr_result: '测试 OCR 结果',
                ocr_confidence: 0.95,
                processing_status: 'completed',
                quality_score: 0.9,
                error_message: null,
                created_at: '2024-01-01T00:00:00Z',
                updated_at: '2024-01-01T00:00:00Z',
                user_id: '1',
                document_id: null,
              },
            ],
            count: 1,
          }),
        });
      }
    });

    await page.route('**/api/images/pending', (route) => {
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({
          success: true,
          data: [
            {
              id: '2',
              file_path: '/uploads/pending.jpg',
              file_size: 51200,
              mime_type: 'image/jpeg',
              ocr_result: null,
              ocr_confidence: null,
              processing_status: 'pending',
              quality_score: null,
              error_message: null,
              created_at: '2024-01-01T00:00:00Z',
              updated_at: '2024-01-01T00:00:00Z',
              user_id: '1',
              document_id: null,
            },
          ],
        }),
      });
    });
  });

  test('应该显示图片列表', async ({ page }) => {
    await page.goto('/images');

    await expect(page.locator('h1')).toContainText('图片管理');
    await expect(page.locator('text=上传图片')).toBeVisible();
    await expect(page.locator('text=屏幕截图')).toBeVisible();
  });

  test('应该显示等待 OCR 的图片', async ({ page }) => {
    await page.goto('/images');

    await expect(page.locator('text=等待 OCR 处理')).toBeVisible();
    await expect(page.locator('text=处理中')).toBeVisible();
  });

  test('应该显示已完成的图片和 OCR 结果', async ({ page }) => {
    await page.goto('/images');

    await expect(page.locator('text=测试 OCR 结果')).toBeVisible();
    await expect(page.locator('text=95%')).toBeVisible();
    await expect(page.locator('text=已完成')).toBeVisible();
  });

  test('应该打开文件选择器', async ({ page }) => {
    await page.goto('/images');

    const fileInput = page.locator('input[type="file"]');
    await expect(fileInput).toBeAttached();

    // 点击选择文件按钮
    const chooseButton = page.locator('button:has-text("选择文件")');
    await chooseButton.click();
  });

  test('应该显示图片关联操作', async ({ page }) => {
    await page.goto('/images');

    // 检查待办按钮
    await expect(page.locator('button:has-text("待办")')).toBeVisible();
  });

  test('应该显示不同状态的图片', async ({ page }) => {
    await page.route('**/api/images', (route) => {
      if (route.request().method() === 'GET') {
        route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            success: true,
            data: [
              {
                id: '1',
                file_path: '/uploads/completed.jpg',
                file_size: 102400,
                mime_type: 'image/jpeg',
                ocr_result: '完成',
                ocr_confidence: 0.95,
                processing_status: 'completed',
                quality_score: 0.9,
                error_message: null,
                created_at: '2024-01-01T00:00:00Z',
                updated_at: '2024-01-01T00:00:00Z',
                user_id: '1',
                document_id: null,
              },
              {
                id: '2',
                file_path: '/uploads/pending.jpg',
                file_size: 51200,
                mime_type: 'image/jpeg',
                ocr_result: null,
                ocr_confidence: null,
                processing_status: 'pending',
                quality_score: null,
                error_message: null,
                created_at: '2024-01-01T00:00:00Z',
                updated_at: '2024-01-01T00:00:00Z',
                user_id: '1',
                document_id: null,
              },
              {
                id: '3',
                file_path: '/uploads/failed.jpg',
                file_size: 76800,
                mime_type: 'image/jpeg',
                ocr_result: null,
                ocr_confidence: null,
                processing_status: 'failed',
                quality_score: null,
                error_message: 'OCR 处理失败',
                created_at: '2024-01-01T00:00:00Z',
                updated_at: '2024-01-01T00:00:00Z',
                user_id: '1',
                document_id: null,
              },
            ],
            count: 3,
          }),
        });
      }
    });

    await page.goto('/images');

    // 验证不同状态的显示
    await expect(page.locator('text=已完成').first()).toBeVisible();
    await expect(page.locator('text=处理中')).toBeVisible();
    await expect(page.locator('text=失败')).toBeVisible();
  });
});