chenshoulin
8721e8ab0b
今日视图 - 补上「待办」组。此前只收 逾期 / 今天到期 / 进行中，导致待办列里没设 截止日期的任务在今日视图里完全消失 —— 用户明明有一堆事没做，却看到 「今天没有待办事项」。现在只要任务未完成且未归档，就必定出现在某个 分组里（归属优先级：逾期 > 今天到期 > 进行中 > 待办）。 - 统计卡片改为与分组一一对应（逾期 / 今天到期 / 进行中 / 本周完成）， 不再用「今日待办」这种把四组混在一起、与列表长度对不上的指标。 键盘操作（可访问性） - 卡片可聚焦（Tab / 点击），← → 换列、↑ ↓ 列内调序、Enter 打开详情。 - 换列时追加到目标列末尾：用全量长度而不是可见下标，筛选态下也安全； 列内调序要求该列渲染的是全量，否则禁用（与拖拽的规则一致）。 - 移动后手动恢复焦点 —— 卡片跨列会被重建，不恢复的话连续按键会失效。 深色模式 - 三态：跟随系统 / 浅色 / 深色，选择持久化到 localStorage。 - index.html 内联脚本在首帧之前应用主题，避免深色下闪白。 - 用 @custom-variant dark 做 class 控制（而不是纯 media query）， 才能支持「强制浅色」；html 的 color-scheme 让原生控件与滚动条跟随。 验证：单元测试 480 个、端到端测试 25 个全部通过，lint 与构建无错误。 截图脚本新增深色与移动端深色两组，便于后续对照。
100 lines
3.9 KiB
TypeScript
100 lines
3.9 KiB
TypeScript
import { expect, test } from '@playwright/test'
|
|
|
|
import { addTask, dragCardToColumn } from './helpers'
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('/')
|
|
})
|
|
|
|
/** 取浏览器本地的今天日期（不能用 toISOString，那是 UTC，可能差一天） */
|
|
async function localToday(page: import('@playwright/test').Page): Promise<string> {
|
|
return page.evaluate(() => {
|
|
const now = new Date()
|
|
const month = String(now.getMonth() + 1).padStart(2, '0')
|
|
const day = String(now.getDate()).padStart(2, '0')
|
|
return `${now.getFullYear()}-${month}-${day}`
|
|
})
|
|
}
|
|
|
|
/** 新建任务并把截止日期设为今天 */
|
|
async function addTaskDueToday(
|
|
page: import('@playwright/test').Page,
|
|
title: string,
|
|
): Promise<void> {
|
|
const today = await localToday(page)
|
|
await addTask(page, title)
|
|
await page.locator('article').filter({ hasText: title }).click()
|
|
await page.getByLabel('截止日期').fill(today)
|
|
await page.getByRole('button', { name: '保存' }).click()
|
|
await expect(page.locator('article').filter({ hasText: title })).toBeVisible()
|
|
}
|
|
|
|
test('导航可在看板与今日之间切换', async ({ page }) => {
|
|
await expect(page.getByText('共 0 个任务')).toBeVisible()
|
|
|
|
await page.getByRole('link', { name: '今日' }).click()
|
|
await expect(page.getByRole('heading', { name: '今日' })).toBeVisible()
|
|
await expect(page.getByText('本周完成')).toBeVisible()
|
|
|
|
await page.getByRole('link', { name: '看板' }).click()
|
|
await expect(page.getByText('共 0 个任务')).toBeVisible()
|
|
})
|
|
|
|
test('今日视图汇总今天到期与进行中的任务', async ({ page }) => {
|
|
await addTaskDueToday(page, '今天到期的事')
|
|
await addTask(page, '正在做的事')
|
|
await dragCardToColumn(page, '正在做的事', 'doing')
|
|
|
|
await page.getByRole('link', { name: '今日' }).click()
|
|
|
|
// 两张卡片都在今日视图里
|
|
await expect(page.locator('article')).toHaveCount(2)
|
|
await expect(page.locator('article').filter({ hasText: '今天到期的事' })).toBeVisible()
|
|
await expect(page.locator('article').filter({ hasText: '正在做的事' })).toBeVisible()
|
|
|
|
// 分别落在「今天到期」和「进行中」两组。
|
|
// 必须限定 level: 2 —— 卡片标题是 h3，任务名恰好叫「今天到期的事」时会撞上分组标题
|
|
await expect(page.getByRole('heading', { level: 2, name: /今天到期/ })).toBeVisible()
|
|
await expect(page.getByRole('heading', { level: 2, name: /进行中/ })).toBeVisible()
|
|
})
|
|
|
|
test('未开始且无截止日期的任务出现在「待办」组', async ({ page }) => {
|
|
await addTask(page, '以后再说')
|
|
|
|
await page.getByRole('link', { name: '今日' }).click()
|
|
|
|
// 早期版本这类任务在今日视图里完全消失，是一个真实的缺口
|
|
await expect(page.locator('article')).toHaveCount(1)
|
|
await expect(page.locator('article').filter({ hasText: '以后再说' })).toBeVisible()
|
|
await expect(page.getByRole('heading', { level: 2, name: /待办/ })).toBeVisible()
|
|
})
|
|
|
|
test('今日视图可以勾选完成', async ({ page }) => {
|
|
await addTaskDueToday(page, '今天要做完')
|
|
|
|
await page.getByRole('link', { name: '今日' }).click()
|
|
await expect(page.locator('article')).toHaveCount(1)
|
|
|
|
await page.locator('article button').first().click()
|
|
|
|
await expect(page.locator('article')).toHaveCount(0)
|
|
await expect(page.getByText('今天没有待办事项')).toBeVisible()
|
|
|
|
await page.reload()
|
|
await expect(page.getByText('今天没有待办事项')).toBeVisible()
|
|
})
|
|
|
|
test('今日视图与看板共享同一份数据', async ({ page }) => {
|
|
await addTask(page, '共享的任务')
|
|
|
|
await page.getByRole('link', { name: '今日' }).click()
|
|
await page.getByRole('link', { name: '看板' }).click()
|
|
|
|
await expect(page.locator('article').filter({ hasText: '共享的任务' })).toBeVisible()
|
|
})
|
|
|
|
test('未知路径回落到看板', async ({ page }) => {
|
|
await page.goto('/not-a-real-page')
|
|
await expect(page.getByText('共 0 个任务')).toBeVisible()
|
|
})
|