PicAnalysis/frontend/e2e/todos.spec.ts

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

test.describe('Todos', () => {
  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/todos**', (route) => {
      if (route.request().method() === 'GET') {
        route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            success: true,
            data: [
              {
                id: '1',
                title: '测试待办',
                description: '测试描述',
                priority: 'medium',
                status: 'pending',
                created_at: '2024-01-01T00:00:00Z',
                updated_at: '2024-01-01T00:00:00Z',
                user_id: '1',
                document_id: null,
                category_id: null,
                due_date: null,
                completed_at: null,
                confirmed_at: null,
              },
            ],
          }),
        });
      }
    });

    await page.route('**/api/todos/pending', (route) => {
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({
          success: true,
          data: [
            {
              id: '1',
              title: '待办任务',
              description: '待完成',
              priority: 'high',
              status: 'pending',
              created_at: '2024-01-01T00:00:00Z',
              updated_at: '2024-01-01T00:00:00Z',
              user_id: '1',
              document_id: null,
              category_id: null,
              due_date: null,
              completed_at: null,
              confirmed_at: null,
            },
          ],
        }),
      });
    });

    await page.route('**/api/todos/completed', (route) => {
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({
          success: true,
          data: [
            {
              id: '2',
              title: '已完成任务',
              description: '已完成',
              priority: 'low',
              status: 'completed',
              created_at: '2024-01-01T00:00:00Z',
              updated_at: '2024-01-01T00:00:00Z',
              user_id: '1',
              document_id: null,
              category_id: null,
              due_date: null,
              completed_at: '2024-01-01T00:00:00Z',
              confirmed_at: null,
            },
          ],
        }),
      });
    });
  });

  test('应该显示待办列表', async ({ page }) => {
    await page.goto('/todos');

    await expect(page.locator('h1')).toContainText('待办事项');
    await expect(page.locator('text=待办任务')).toBeVisible();
  });

  test('应该筛选待办状态', async ({ page }) => {
    await page.goto('/todos');

    // 点击"待办"筛选
    await page.click('button:has-text("待办")');
    await expect(page.locator('text=待办任务')).toBeVisible();

    // 点击"已完成"筛选
    await page.click('button:has-text("已完成")');
    await expect(page.locator('text=已完成任务')).toBeVisible();

    // 点击"全部"筛选
    await page.click('button:has-text("全部")');
  });

  test('应该创建新待办', async ({ page }) => {
    await page.route('**/api/todos', (route) => {
      if (route.request().method() === 'POST') {
        route.fulfill({
          status: 201,
          contentType: 'application/json',
          body: JSON.stringify({
            success: true,
            data: {
              id: '3',
              title: '新待办',
              description: '新待办描述',
              priority: 'medium',
              status: 'pending',
              created_at: '2024-01-01T00:00:00Z',
              updated_at: '2024-01-01T00:00:00Z',
              user_id: '1',
              document_id: null,
              category_id: null,
              due_date: null,
              completed_at: null,
              confirmed_at: null,
            },
          }),
        });
      }
    });

    await page.goto('/todos');
    await page.click('button:has-text("新建待办")');

    await page.fill('input[label="标题"]', '新待办');
    await page.fill('textarea[placeholder="待办描述"]', '新待办描述');
    await page.click('button:has-text("创建")');

    // 验证表单关闭
    await expect(page.locator('text=新建待办')).not.toBeVisible();
  });

  test('应该标记待办为已完成', async ({ page }) => {
    await page.route('**/api/todos/*', (route) => {
      if (route.request().method() === 'PUT') {
        route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            success: true,
            data: {
              id: '1',
              title: '待办任务',
              description: '待完成',
              priority: 'high',
              status: 'completed',
              created_at: '2024-01-01T00:00:00Z',
              updated_at: '2024-01-01T00:00:00Z',
              user_id: '1',
              document_id: null,
              category_id: null,
              due_date: null,
              completed_at: '2024-01-01T00:00:00Z',
              confirmed_at: null,
            },
          }),
        });
      }
    });

    await page.goto('/todos');

    // 点击复选框
    const checkbox = page.locator('.border-gray-300').first();
    await checkbox.click();

    // 验证状态更新（已完成的样式）
    await expect(page.locator('.line-through')).toBeVisible();
  });

  test('应该删除待办', async ({ page }) => {
    await page.route('**/api/todos/*', (route) => {
      if (route.request().method() === 'DELETE') {
        route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            success: true,
            message: '待办已删除',
          }),
        });
      }
    });

    await page.goto('/todos');

    // 点击删除按钮
    const deleteButton = page.locator('button').filter({ hasText: '' }).nth(1);
    await deleteButton.click();

    // 确认删除
    page.on('dialog', (dialog) => dialog.accept());
  });
});