panda
b9137204a0
- FilePreview.vue: add normalizedFileType computed to handle backend returning uppercase HTML/MD/PPTX (fixes preview/download buttons) - FilePreview.vue: bg-gradient-to-r from-orange-500 -> bg-orange-500 (Tailwind v4 gradient + CSS variable = transparent) - ReportCard.vue: bg-gradient-to-r -> bg-orange-600 for selected state - Add .opencode/, node_modules/, dist/ to .gitignore - Initial git setup for publish project
119 lines
4.2 KiB
JavaScript
119 lines
4.2 KiB
JavaScript
import { test, expect } from '@playwright/test'
|
|
|
|
/**
|
|
* Responsive Layout E2E Tests
|
|
* Tests responsive design for PC (1920px) and Mobile (375px) viewports
|
|
* Note: Sidebar (<aside>) exists only on ProjectDetail.vue, not ProjectList.vue
|
|
*/
|
|
test.describe('Responsive Layout', () => {
|
|
test('should display main content on PC width (1920px)', async ({ page }) => {
|
|
// Set PC viewport
|
|
await page.setViewportSize({ width: 1920, height: 1080 })
|
|
|
|
await page.goto('/')
|
|
await page.waitForLoadState('networkidle')
|
|
await page.waitForTimeout(1000)
|
|
|
|
// Main content should be visible
|
|
const mainContent = page.locator('main')
|
|
await expect(mainContent).toBeVisible({ timeout: 15000 })
|
|
|
|
// Page title should be visible
|
|
await expect(page.locator('text=选择项目')).toBeVisible({ timeout: 5000 })
|
|
|
|
// Projects should be displayed
|
|
await expect(page.locator('text=项目一').first()).toBeVisible({ timeout: 5000 })
|
|
})
|
|
|
|
test('should display stats cards on mobile width (375px)', async ({ page }) => {
|
|
// Set mobile viewport
|
|
await page.setViewportSize({ width: 375, height: 667 })
|
|
|
|
await page.goto('/')
|
|
await page.waitForLoadState('networkidle')
|
|
await page.waitForTimeout(1000)
|
|
|
|
// Main content should be visible
|
|
const mainContent = page.locator('main')
|
|
await expect(mainContent).toBeVisible({ timeout: 10000 })
|
|
|
|
// Stats cards should be visible
|
|
await expect(page.locator('text=个项目')).toBeVisible({ timeout: 5000 })
|
|
})
|
|
|
|
test('should display project cards in single column on mobile', async ({ page }) => {
|
|
// Set mobile viewport
|
|
await page.setViewportSize({ width: 375, height: 667 })
|
|
|
|
await page.goto('/')
|
|
await page.waitForLoadState('networkidle')
|
|
await page.waitForTimeout(1000)
|
|
|
|
// Project cards should still be visible
|
|
await expect(page.locator('text=项目一').first()).toBeVisible({ timeout: 15000 })
|
|
})
|
|
|
|
test('should navigate to project detail on mobile', async ({ page }) => {
|
|
// Set mobile viewport
|
|
await page.setViewportSize({ width: 375, height: 667 })
|
|
|
|
await page.goto('/')
|
|
await page.waitForLoadState('networkidle')
|
|
await page.waitForTimeout(1000)
|
|
|
|
// Click on a project to navigate to detail (use force to bypass overlay)
|
|
await page.locator('text=项目一').first().click({ force: true })
|
|
|
|
// Should navigate to project detail
|
|
await expect(page).toHaveURL(/\/project\/\d+/, { timeout: 10000 })
|
|
})
|
|
|
|
test('should display sidebar in project detail on PC width', async ({ page }) => {
|
|
// Set PC viewport
|
|
await page.setViewportSize({ width: 1920, height: 1080 })
|
|
|
|
// First go to home page to load mock data
|
|
await page.goto('/')
|
|
await page.waitForLoadState('networkidle')
|
|
await page.waitForTimeout(1000)
|
|
|
|
// Navigate to project detail via click
|
|
await page.locator('text=项目一').first().click({ force: true })
|
|
await page.waitForURL(/\/project\/\d+/, { timeout: 10000 })
|
|
|
|
// Wait for the sidebar to appear
|
|
await expect(page.locator('text=返回项目列表')).toBeVisible({ timeout: 15000 })
|
|
})
|
|
|
|
test('should display reports list in project detail on mobile width', async ({ page }) => {
|
|
// Set mobile viewport
|
|
await page.setViewportSize({ width: 375, height: 667 })
|
|
|
|
// First go to home page to load mock data
|
|
await page.goto('/')
|
|
await page.waitForLoadState('networkidle')
|
|
await page.waitForTimeout(1000)
|
|
|
|
// Navigate to project detail via click
|
|
await page.locator('text=项目一').first().click({ force: true })
|
|
await page.waitForURL(/\/project\/\d+/, { timeout: 10000 })
|
|
|
|
// Reports should be visible (from mock data)
|
|
await expect(page.locator('text=2026-05-22 日报.html')).toBeVisible({ timeout: 5000 })
|
|
})
|
|
|
|
test('should close sidebar after navigation on mobile', async ({ page }) => {
|
|
// Set mobile viewport
|
|
await page.setViewportSize({ width: 375, height: 667 })
|
|
|
|
await page.goto('/project/1')
|
|
await page.waitForLoadState('networkidle')
|
|
await page.waitForTimeout(1000)
|
|
|
|
// Navigate back to project list
|
|
await page.locator('text=返回项目列表').click()
|
|
|
|
// Should be back on project list page
|
|
await expect(page).toHaveURL(/\/$/, { timeout: 10000 })
|
|
})
|
|
}) |