chenshoulin
8721e8ab0b
今日视图 - 补上「待办」组。此前只收 逾期 / 今天到期 / 进行中，导致待办列里没设 截止日期的任务在今日视图里完全消失 —— 用户明明有一堆事没做，却看到 「今天没有待办事项」。现在只要任务未完成且未归档，就必定出现在某个 分组里（归属优先级：逾期 > 今天到期 > 进行中 > 待办）。 - 统计卡片改为与分组一一对应（逾期 / 今天到期 / 进行中 / 本周完成）， 不再用「今日待办」这种把四组混在一起、与列表长度对不上的指标。 键盘操作（可访问性） - 卡片可聚焦（Tab / 点击），← → 换列、↑ ↓ 列内调序、Enter 打开详情。 - 换列时追加到目标列末尾：用全量长度而不是可见下标，筛选态下也安全； 列内调序要求该列渲染的是全量，否则禁用（与拖拽的规则一致）。 - 移动后手动恢复焦点 —— 卡片跨列会被重建，不恢复的话连续按键会失效。 深色模式 - 三态：跟随系统 / 浅色 / 深色，选择持久化到 localStorage。 - index.html 内联脚本在首帧之前应用主题，避免深色下闪白。 - 用 @custom-variant dark 做 class 控制（而不是纯 media query）， 才能支持「强制浅色」；html 的 color-scheme 让原生控件与滚动条跟随。 验证：单元测试 480 个、端到端测试 25 个全部通过，lint 与构建无错误。 截图脚本新增深色与移动端深色两组，便于后续对照。
123 lines
3.9 KiB
TypeScript
123 lines
3.9 KiB
TypeScript
import { expect, test } from '@playwright/test'
|
|
|
|
/**
|
|
* PWA 端到端验证。
|
|
*
|
|
* 这些用例跑在 preview（生产构建）上，因为 Service Worker 只在构建产物中生成。
|
|
* 每个用例拥有独立的浏览器上下文，因此 Service Worker 也是各自安装的。
|
|
*/
|
|
|
|
/** 等待 Service Worker 激活并接管当前页面 */
|
|
async function waitForServiceWorker(page: import('@playwright/test').Page): Promise<void> {
|
|
await page.waitForFunction(
|
|
async () => {
|
|
const registration = await navigator.serviceWorker.ready
|
|
return registration.active?.state === 'activated' && navigator.serviceWorker.controller !== null
|
|
},
|
|
undefined,
|
|
{ timeout: 30_000 },
|
|
)
|
|
}
|
|
|
|
test('manifest 被链接且包含安装所需字段', async ({ page, request }) => {
|
|
await page.goto('/')
|
|
|
|
await expect(page.locator('link[rel="manifest"]')).toHaveAttribute('href', '/manifest.webmanifest')
|
|
|
|
const response = await request.get('/manifest.webmanifest')
|
|
expect(response.status()).toBe(200)
|
|
|
|
const manifest = (await response.json()) as {
|
|
name: string
|
|
short_name: string
|
|
start_url: string
|
|
display: string
|
|
theme_color: string
|
|
icons: Array<{ sizes: string; purpose?: string }>
|
|
shortcuts?: Array<{ url: string }>
|
|
}
|
|
|
|
expect(manifest.name).toBe('看板 · 个人任务管理')
|
|
expect(manifest.display).toBe('standalone')
|
|
expect(manifest.start_url).toBe('/')
|
|
expect(manifest.theme_color).toBe('#0284c7')
|
|
|
|
const sizes = manifest.icons.map((icon) => icon.sizes)
|
|
expect(sizes).toContain('192x192')
|
|
expect(sizes).toContain('512x512')
|
|
expect(manifest.icons.some((icon) => icon.purpose === 'maskable')).toBe(true)
|
|
|
|
// PWA 快捷方式指向今日视图
|
|
expect(manifest.shortcuts?.some((shortcut) => shortcut.url === '/today')).toBe(true)
|
|
})
|
|
|
|
test('图标资源均可访问', async ({ request }) => {
|
|
const icons = [
|
|
'/pwa-192x192.png',
|
|
'/pwa-512x512.png',
|
|
'/maskable-512x512.png',
|
|
'/apple-touch-icon.png',
|
|
'/favicon.svg',
|
|
]
|
|
|
|
for (const path of icons) {
|
|
const response = await request.get(path)
|
|
expect(response.status(), `${path} 应可访问`).toBe(200)
|
|
}
|
|
})
|
|
|
|
test('Service Worker 注册并激活', async ({ page }) => {
|
|
await page.goto('/')
|
|
await waitForServiceWorker(page)
|
|
|
|
const state = await page.evaluate(async () => {
|
|
const registration = await navigator.serviceWorker.ready
|
|
return registration.active?.state ?? null
|
|
})
|
|
|
|
expect(state).toBe('activated')
|
|
})
|
|
|
|
test('离线后仍可打开看板，且本地数据完好', async ({ page, context }) => {
|
|
await page.goto('/')
|
|
await waitForServiceWorker(page)
|
|
|
|
const input = page.getByLabel('添加任务').first()
|
|
await input.fill('离线也要看到我')
|
|
await input.press('Enter')
|
|
await expect(page.locator('article')).toHaveCount(1)
|
|
|
|
// 断网后刷新：页面与数据都必须还在
|
|
await context.setOffline(true)
|
|
await page.reload()
|
|
|
|
await expect(page.getByText('共 1 个任务')).toBeVisible()
|
|
await expect(page.locator('article').filter({ hasText: '离线也要看到我' })).toBeVisible()
|
|
|
|
// 恢复网络，避免影响后续用例
|
|
await context.setOffline(false)
|
|
})
|
|
|
|
test('离线时深链 /today 也能打开（navigateFallback 生效）', async ({ page, context }) => {
|
|
await page.goto('/')
|
|
await waitForServiceWorker(page)
|
|
|
|
await context.setOffline(true)
|
|
await page.goto('/today')
|
|
|
|
await expect(page.getByRole('heading', { name: '今日' })).toBeVisible()
|
|
await expect(page.getByText('本周完成')).toBeVisible()
|
|
|
|
await context.setOffline(false)
|
|
})
|
|
|
|
test('静态资源被预缓存（sw.js 含 precache 清单）', async ({ request }) => {
|
|
const response = await request.get('/sw.js')
|
|
expect(response.status()).toBe(200)
|
|
|
|
const source = await response.text()
|
|
// workbox 生成的是压缩过的清单，这里只确认关键资源确实进了预缓存
|
|
expect(source).toContain('index.html')
|
|
expect(source).toContain('manifest.webmanifest')
|
|
})
|