chenshoulin
4e064e82ea
从零实现一个 local-first 的个人任务看板，数据只存在浏览器本地，不依赖后端。 功能 - 固定三列看板（待办 / 进行中 / 已完成），支持拖拽改状态与列内排序 - 快速新增、详情编辑、删除撤销、已完成归档 - 搜索与筛选（关键词 / 优先级 / 标签 / 今日到期 / 逾期） - 今日视图：按紧急度分组（逾期 > 今天到期 > 进行中）+ 统计卡片 - 导出导入 JSON；启动时自动留快照，保留最近 3 份 - 键盘快捷键（N / 「/」/ ? / Esc） - PWA：可安装、离线可用、更新提示 技术要点 - 持久化采用 TaskRepository 端口 + 整份快照读写，schemaVersion 迁移表 显式登记升级规则（当前 v2，v1 -> v2 为归档功能补 archivedAt） - 同列排序用相邻中点插入，间距不足时按列 normalize，避免浮点精度耗尽 - 拖拽只消费 Sortable 的事件，store 保持唯一数据源，不接管数据 - 数据损坏时先备份到 *.corrupt.<时间戳> 再报错，不覆盖用户数据 - 引入 vue-router 拆分看板与今日两个视图（见 docs/adr.md ADR-005） 验证 - 单元测试 437 个（33 个文件），行覆盖率 96.8% - 端到端测试 23 个（Playwright），含真实拖拽与断网离线场景 - npm run build 通过，产物可静态托管 注：部署时需配置 SPA 回落，否则直接访问 /today 会 404（详见 README）。
116 lines
4.3 KiB
TypeScript
116 lines
4.3 KiB
TypeScript
import { expect, test } from '@playwright/test'
|
|
|
|
import { addTask, dragCardToColumn } from './helpers'
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('/')
|
|
})
|
|
|
|
test('每个用例使用独立上下文，初始看板为空', async ({ page }) => {
|
|
await expect(page.getByText('共 0 个任务')).toBeVisible()
|
|
await expect(page.locator('article')).toHaveCount(0)
|
|
await expect(page.getByText('暂无任务')).toHaveCount(3)
|
|
})
|
|
|
|
test('新增 → 拖到进行中 → 标记完成 → 刷新后状态仍正确', async ({ page }) => {
|
|
await addTask(page, 'E2E 主链路任务')
|
|
await expect(page.locator('[data-column-id="todo"] article')).toHaveCount(1)
|
|
|
|
await dragCardToColumn(page, 'E2E 主链路任务', 'doing')
|
|
await expect(page.locator('[data-column-id="doing"] article')).toHaveCount(1)
|
|
await expect(page.locator('[data-column-id="todo"] article')).toHaveCount(0)
|
|
|
|
// 刷新后位置保持 —— 这一条是「拖拽结果真的落盘了」的关键证据
|
|
await page.reload()
|
|
await expect(
|
|
page.locator('[data-column-id="doing"] article').filter({ hasText: 'E2E 主链路任务' }),
|
|
).toBeVisible()
|
|
|
|
// 标记完成
|
|
await page
|
|
.locator('[data-column-id="doing"] article')
|
|
.filter({ hasText: 'E2E 主链路任务' })
|
|
.locator('button')
|
|
.first()
|
|
.click()
|
|
await expect(page.locator('[data-column-id="done"] article')).toHaveCount(1)
|
|
|
|
await page.reload()
|
|
await expect(
|
|
page.locator('[data-column-id="done"] article').filter({ hasText: 'E2E 主链路任务' }),
|
|
).toBeVisible()
|
|
})
|
|
|
|
test('详情抽屉可编辑并持久化', async ({ page }) => {
|
|
await addTask(page, '待编辑任务')
|
|
|
|
await page.locator('article').filter({ hasText: '待编辑任务' }).click()
|
|
const titleInput = page.getByLabel('标题')
|
|
await expect(titleInput).toHaveValue('待编辑任务')
|
|
|
|
await titleInput.fill('已编辑任务')
|
|
await page.getByLabel('描述').fill('这是描述')
|
|
// 工具栏也有「高」按钮，必须限定在详情抽屉内
|
|
await page.getByRole('dialog').getByRole('button', { name: '高' }).click()
|
|
await page.getByRole('button', { name: '保存' }).click()
|
|
|
|
await expect(page.locator('article').filter({ hasText: '已编辑任务' })).toBeVisible()
|
|
|
|
await page.reload()
|
|
const card = page.locator('article').filter({ hasText: '已编辑任务' })
|
|
await expect(card).toBeVisible()
|
|
await expect(card).toContainText('高')
|
|
})
|
|
|
|
test('删除后可撤销', async ({ page }) => {
|
|
await addTask(page, '待删除任务')
|
|
await page.locator('article').filter({ hasText: '待删除任务' }).click()
|
|
await page.getByRole('button', { name: '删除' }).click()
|
|
|
|
await expect(page.locator('article')).toHaveCount(0)
|
|
|
|
await page.getByRole('button', { name: '撤销' }).click()
|
|
await expect(page.locator('article').filter({ hasText: '待删除任务' })).toBeVisible()
|
|
|
|
await page.reload()
|
|
await expect(page.locator('article').filter({ hasText: '待删除任务' })).toBeVisible()
|
|
})
|
|
|
|
test('搜索筛选后列计数同步变化', async ({ page }) => {
|
|
await addTask(page, '写方案')
|
|
await addTask(page, '买咖啡')
|
|
|
|
await expect(page.locator('article')).toHaveCount(2)
|
|
|
|
await page.getByLabel('搜索任务').fill('方案')
|
|
// 关键词有 200ms 防抖
|
|
await expect(page.locator('article')).toHaveCount(1)
|
|
await expect(page.locator('article').filter({ hasText: '写方案' })).toBeVisible()
|
|
await expect(page.locator('section').first().locator('header span')).toHaveText('1')
|
|
})
|
|
|
|
test('键盘快捷键：/ 聚焦搜索，N 聚焦新增，? 打开帮助', async ({ page }) => {
|
|
await page.keyboard.press('/')
|
|
await expect(page.getByLabel('搜索任务')).toBeFocused()
|
|
|
|
await page.keyboard.press('Escape')
|
|
await page.locator('body').click({ position: { x: 5, y: 5 } })
|
|
|
|
await page.keyboard.press('n')
|
|
await expect(page.getByLabel('添加任务').first()).toBeFocused()
|
|
|
|
await page.locator('body').click({ position: { x: 5, y: 5 } })
|
|
await page.keyboard.press('?')
|
|
await expect(page.getByText('聚焦「待办」列的快速新增输入框')).toBeVisible()
|
|
})
|
|
|
|
test('输入框内输入不会触发快捷键', async ({ page }) => {
|
|
const search = page.getByLabel('搜索任务')
|
|
await search.click()
|
|
await search.type('n')
|
|
|
|
// 焦点应仍在搜索框，而不是跳到新增输入框
|
|
await expect(search).toBeFocused()
|
|
await expect(search).toHaveValue('n')
|
|
})
|