chenshoulin
442cbbd734
先截图审视现状，再针对性修改。主要问题与改动如下。 工具栏 - 标签筛选从「平铺全部标签」改为下拉面板，标签多时不再换行挤爆工具栏 - 备份与快捷键帮助移到导航栏 —— 它们是应用级操作，不该挤在看板工具栏里， 顺带修好了「? 帮助只在看板可用」的问题 - 到期统计（今日到期 / 逾期）合并为可点击的筛选入口，去掉两个独立控件 - 移动端工具栏从占半屏降到三行紧凑布局 卡片 - 优先级从彩色胶囊改为左侧色条，扫视一列时比读文字更快分辨轻重 - 元信息改为「优先级 · 日期 · 标签」的轻量文本行，不再三种胶囊叠在一起 - 完成态用勾选图标 + 降低不透明度 布局 - 今日视图限宽居中（max-w-3xl）：此前 1440px 下卡片被拉满整屏， 标题与元信息之间出现大片空白 - 修复移动端卡片被压成细条：TaskCard 的 overflow-hidden（用于裁切左侧色条） 会让 flex 项的最小尺寸解析为 0，补 shrink-0 修正； 同时改为移动端按内容高度堆叠、桌面端列内滚动 其他 - 导航栏品牌改用看板图标，消除「看板」重复出现两次 - 统一卡片阴影、圆角与键盘焦点样式 - 新增 scripts/screenshot.mjs，便于后续对照审视视觉改动 验证：单元测试 452 个、端到端测试 23 个全部通过，lint 与构建无错误。
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('[data-role="column-count"]')).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')
|
|
})
|