384 lines
14 KiB
TypeScript
384 lines
14 KiB
TypeScript
import { mount } from '@vue/test-utils'
|
||
import type { VueWrapper } from '@vue/test-utils'
|
||
import dayjs from 'dayjs'
|
||
import { createPinia, setActivePinia } from 'pinia'
|
||
import { beforeEach, describe, expect, it } from 'vitest'
|
||
|
||
import { useTagColorStore } from '@/stores/tagColors'
|
||
import type { Task } from '@/types/task'
|
||
|
||
import TaskCard from './TaskCard.vue'
|
||
|
||
/**
|
||
* 卡片要从 tagColors store 读圆点颜色，因此每个用例都要有独立的 Pinia，
|
||
* 否则上一个用例设的颜色会漏到下一个。
|
||
*/
|
||
beforeEach(() => {
|
||
setActivePinia(createPinia())
|
||
})
|
||
|
||
function makeTask(overrides: Partial<Task> = {}): Task {
|
||
return {
|
||
id: 'task-1',
|
||
title: '写方案',
|
||
description: '',
|
||
status: 'todo',
|
||
priority: 2,
|
||
tags: [],
|
||
dueDate: null,
|
||
sortOrder: 1024,
|
||
createdAt: '2026-10-18T00:00:00.000Z',
|
||
updatedAt: '2026-10-18T00:00:00.000Z',
|
||
completedAt: null,
|
||
archivedAt: null,
|
||
deletedAt: null,
|
||
...overrides,
|
||
}
|
||
}
|
||
|
||
function mountCard(overrides: Partial<Task> = {}) {
|
||
return mount(TaskCard, { props: { task: makeTask(overrides) } })
|
||
}
|
||
|
||
/** 通过文案定位优先级徽章，避免依赖 DOM 层级 */
|
||
function priorityBadge(wrapper: VueWrapper) {
|
||
return wrapper.findAll('span').find((node) => ['低', '中', '高'].includes(node.text()))
|
||
}
|
||
|
||
describe('TaskCard 基础渲染', () => {
|
||
it('渲染标题', () => {
|
||
expect(mountCard({ title: '写方案' }).find('h3').text()).toBe('写方案')
|
||
})
|
||
|
||
it('渲染优先级徽章', () => {
|
||
expect(priorityBadge(mountCard({ priority: 3 }))?.text()).toBe('高')
|
||
})
|
||
|
||
it('无标签无截止日期时仍然显示优先级徽章', () => {
|
||
const wrapper = mountCard({ priority: 1, tags: [], dueDate: null })
|
||
expect(priorityBadge(wrapper)?.text()).toBe('低')
|
||
})
|
||
|
||
it('无截止日期时不渲染日期徽章', () => {
|
||
const wrapper = mountCard({ dueDate: null })
|
||
expect(wrapper.text()).not.toContain('今天')
|
||
expect(wrapper.text()).not.toContain('逾期')
|
||
})
|
||
})
|
||
|
||
describe('优先级视觉区分', () => {
|
||
it('三档优先级使用不同色系', () => {
|
||
const high =
|
||
priorityBadge(mountCard({ priority: 3 }))
|
||
?.classes()
|
||
.join(' ') ?? ''
|
||
const medium =
|
||
priorityBadge(mountCard({ priority: 2 }))
|
||
?.classes()
|
||
.join(' ') ?? ''
|
||
const low =
|
||
priorityBadge(mountCard({ priority: 1 }))
|
||
?.classes()
|
||
.join(' ') ?? ''
|
||
|
||
expect(high).toContain('rose')
|
||
expect(medium).toContain('amber')
|
||
expect(low).toContain('slate')
|
||
expect(new Set([high, medium, low]).size).toBe(3)
|
||
})
|
||
})
|
||
|
||
describe('截止日期', () => {
|
||
it('逾期任务使用警示样式', () => {
|
||
const yesterday = dayjs().subtract(2, 'day').format('YYYY-MM-DD')
|
||
const wrapper = mountCard({ dueDate: yesterday })
|
||
expect(wrapper.text()).toContain('逾期 2 天')
|
||
|
||
const badge = wrapper.findAll('span').find((node) => node.text().includes('逾期'))
|
||
expect(badge?.classes().join(' ')).toContain('rose')
|
||
})
|
||
|
||
it('已完成任务不再标记逾期', () => {
|
||
const yesterday = dayjs().subtract(2, 'day').format('YYYY-MM-DD')
|
||
const completedAt = dayjs().subtract(1, 'day').hour(10).minute(0).toISOString()
|
||
const wrapper = mountCard({ dueDate: yesterday, status: 'done', completedAt })
|
||
const badge = wrapper.findAll('span').find((node) => node.text().includes('逾期'))
|
||
expect(badge?.text()).toBe('逾期 1 天完成')
|
||
expect(badge?.classes().join(' ')).not.toContain('rose')
|
||
})
|
||
|
||
it('当天完成的任务第二天不再显示逾期天数', () => {
|
||
// 复现：19 号截止、19 号完成，20 号查看时曾显示「逾期 1 天」
|
||
const dueDate = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
|
||
const completedAt = dayjs().subtract(1, 'day').hour(10).minute(0).toISOString()
|
||
const wrapper = mountCard({ dueDate, status: 'done', completedAt })
|
||
|
||
expect(wrapper.text()).not.toContain('逾期')
|
||
expect(wrapper.text()).toContain('原定')
|
||
expect(wrapper.text()).toMatch(/原定 \d+月\d+日/)
|
||
})
|
||
|
||
it('完成时已超期的任务显示「逾期 N 天完成」，不再随日期增长', () => {
|
||
const dueDate = dayjs().subtract(3, 'day').format('YYYY-MM-DD')
|
||
const completedAt = dayjs().subtract(2, 'day').hour(9).minute(0).toISOString()
|
||
const wrapper = mountCard({ dueDate, status: 'done', completedAt })
|
||
|
||
expect(wrapper.text()).toContain('逾期 1 天完成')
|
||
})
|
||
|
||
it('今天到期显示「今天」', () => {
|
||
expect(mountCard({ dueDate: dayjs().format('YYYY-MM-DD') }).text()).toContain('今天')
|
||
})
|
||
})
|
||
|
||
describe('已完成样式', () => {
|
||
it('标题加删除线，但不再整卡降透明度', () => {
|
||
const wrapper = mountCard({ status: 'done' })
|
||
const classes = wrapper.find('article').classes().join(' ')
|
||
|
||
expect(wrapper.find('h3').classes().join(' ')).toContain('line-through')
|
||
// 整卡 opacity-60 会把标题压到 1.69:1、标签压到 1.61:1（WCAG AA 要求 4.5:1）
|
||
expect(classes).not.toContain('opacity-60')
|
||
expect(classes).toContain('bg-white')
|
||
})
|
||
|
||
it('已完成卡片的文字不低于 slate-500', () => {
|
||
const wrapper = mountCard({ status: 'done', priority: 1, tags: ['设计'] })
|
||
const html = wrapper.html()
|
||
|
||
expect(wrapper.find('h3').classes().join(' ')).toContain('text-slate-500')
|
||
// 标签与「低」优先级曾用 slate-400（白底 2.56:1），统一提到 slate-500（4.76:1）
|
||
expect(html).not.toContain('text-slate-400')
|
||
expect(html).toContain('text-slate-500')
|
||
// 完成日期曾带 /80 透明度，混色后 3.75:1
|
||
expect(html).not.toContain('emerald-700/80')
|
||
})
|
||
|
||
it('未完成时不加删除线', () => {
|
||
expect(mountCard({ status: 'todo' }).find('h3').classes().join(' ')).not.toContain(
|
||
'line-through',
|
||
)
|
||
})
|
||
})
|
||
|
||
describe('时间信息', () => {
|
||
it('已完成卡片显示完成日期', () => {
|
||
const completedAt = new Date(2026, 9, 18, 10, 20).toISOString()
|
||
const wrapper = mountCard({ status: 'done', completedAt })
|
||
expect(wrapper.text()).toContain('完成于')
|
||
expect(wrapper.text()).toContain('10月18日')
|
||
})
|
||
|
||
it('未完成卡片不显示完成时间', () => {
|
||
expect(mountCard({ completedAt: null }).text()).not.toContain('完成于')
|
||
})
|
||
|
||
it('卡片 title 暴露完整创建与完成时间', () => {
|
||
const createdAt = new Date(2026, 9, 18, 10, 8).toISOString()
|
||
const completedAt = new Date(2026, 9, 18, 10, 20).toISOString()
|
||
const title = mountCard({ status: 'done', createdAt, completedAt })
|
||
.find('article')
|
||
.attributes('title')
|
||
|
||
expect(title).toContain('创建于 2026-10-18 10:08')
|
||
expect(title).toContain('完成于 2026-10-18 10:20')
|
||
})
|
||
|
||
it('归档任务在 title 中补充归档时间', () => {
|
||
const archivedAt = new Date(2026, 9, 19, 8, 0).toISOString()
|
||
const title = mountCard({ archivedAt }).find('article').attributes('title')
|
||
expect(title).toContain('归档于 2026-10-19 08:00')
|
||
})
|
||
})
|
||
|
||
describe('标签展示', () => {
|
||
it('最多显示 3 个标签', () => {
|
||
const wrapper = mountCard({ tags: ['a', 'b', 'c', 'd', 'e'] })
|
||
expect(wrapper.text()).toContain('#a')
|
||
expect(wrapper.text()).toContain('#c')
|
||
expect(wrapper.text()).not.toContain('#d')
|
||
expect(wrapper.text()).toContain('+2')
|
||
})
|
||
|
||
it('标签不超过 3 个时不显示折叠计数', () => {
|
||
const wrapper = mountCard({ tags: ['a', 'b', 'c'] })
|
||
expect(wrapper.text()).not.toContain('+')
|
||
})
|
||
|
||
it('无标签时不渲染标签', () => {
|
||
expect(mountCard({ tags: [] }).text()).not.toContain('#')
|
||
})
|
||
|
||
it('未设置颜色的标签不画圆点', () => {
|
||
const wrapper = mountCard({ tags: ['前端'] })
|
||
expect(wrapper.find('.bg-sky-500').exists()).toBe(false)
|
||
expect(wrapper.text()).toContain('#前端')
|
||
})
|
||
|
||
it('设置了颜色的标签显示对应圆点', () => {
|
||
useTagColorStore().setColor('前端', 'sky')
|
||
const wrapper = mountCard({ tags: ['前端', '设计'] })
|
||
// 只有设过颜色的那个标签带圆点
|
||
expect(wrapper.findAll('[data-role="tag-dot"]').length).toBe(1)
|
||
expect(wrapper.find('.bg-sky-500').exists()).toBe(true)
|
||
})
|
||
|
||
it('颜色与标签文字一一对应，不会串到相邻标签上', () => {
|
||
const store = useTagColorStore()
|
||
store.setColor('前端', 'sky')
|
||
store.setColor('设计', 'rose')
|
||
|
||
const wrapper = mountCard({ tags: ['前端', '设计'] })
|
||
const labels = wrapper
|
||
.findAll('.inline-flex.items-center')
|
||
.filter((node) => node.text().startsWith('#'))
|
||
|
||
expect(labels[0]?.find('.bg-sky-500').exists()).toBe(true)
|
||
expect(labels[1]?.find('.bg-rose-500').exists()).toBe(true)
|
||
})
|
||
})
|
||
|
||
describe('交互', () => {
|
||
it('点击完成按钮 emit toggle 并带上 id', async () => {
|
||
const wrapper = mountCard({ id: 'task-42' })
|
||
await wrapper.find('button').trigger('click')
|
||
expect(wrapper.emitted('toggle')).toEqual([['task-42']])
|
||
})
|
||
|
||
it('完成按钮带可访问性属性', () => {
|
||
expect(mountCard({ status: 'todo' }).find('button').attributes('aria-label')).toBe(
|
||
'标记为已完成',
|
||
)
|
||
expect(mountCard({ status: 'done' }).find('button').attributes('aria-pressed')).toBe('true')
|
||
})
|
||
|
||
it('勾选按钮的命中区不小于 24×24（视觉仍是 16px 圆点）', () => {
|
||
const button = mountCard().find('button')
|
||
|
||
// WCAG 2.5.8：命中区 24×24 起；视觉尺寸由内层 span 保持 size-4
|
||
expect(button.classes().join(' ')).toContain('h-9')
|
||
expect(button.classes().join(' ')).toContain('w-8')
|
||
expect(button.find('span').classes().join(' ')).toContain('size-4')
|
||
})
|
||
|
||
it('点击卡片 emit open 而不是 toggle', async () => {
|
||
const wrapper = mountCard({ id: 'task-7' })
|
||
await wrapper.find('article').trigger('click')
|
||
expect(wrapper.emitted('open')).toEqual([['task-7']])
|
||
expect(wrapper.emitted('toggle')).toBeUndefined()
|
||
})
|
||
|
||
it('卡片可点击（带 cursor-pointer）', () => {
|
||
expect(mountCard().find('article').classes().join(' ')).toContain('cursor-pointer')
|
||
})
|
||
})
|
||
|
||
describe('TaskCard 键盘操作', () => {
|
||
it('卡片可聚焦', () => {
|
||
expect(mountCard().find('article').attributes('tabindex')).toBe('0')
|
||
})
|
||
|
||
it('方向键 emit keymove 并带上方向', async () => {
|
||
const wrapper = mountCard({ id: 'task-1' })
|
||
const article = wrapper.find('article')
|
||
|
||
await article.trigger('keydown', { key: 'ArrowLeft' })
|
||
await article.trigger('keydown', { key: 'ArrowRight' })
|
||
await article.trigger('keydown', { key: 'ArrowUp' })
|
||
await article.trigger('keydown', { key: 'ArrowDown' })
|
||
|
||
expect(wrapper.emitted('keymove')).toEqual([
|
||
[{ id: 'task-1', direction: 'left' }],
|
||
[{ id: 'task-1', direction: 'right' }],
|
||
[{ id: 'task-1', direction: 'up' }],
|
||
[{ id: 'task-1', direction: 'down' }],
|
||
])
|
||
})
|
||
|
||
it('Enter 与空格都能打开详情', async () => {
|
||
const wrapper = mountCard({ id: 'task-2' })
|
||
const article = wrapper.find('article')
|
||
|
||
await article.trigger('keydown', { key: 'Enter' })
|
||
await article.trigger('keydown', { key: ' ' })
|
||
|
||
expect(wrapper.emitted('open')).toEqual([['task-2'], ['task-2']])
|
||
})
|
||
|
||
it('其他按键不产生任何事件', async () => {
|
||
const wrapper = mountCard()
|
||
const article = wrapper.find('article')
|
||
|
||
await article.trigger('keydown', { key: 'a' })
|
||
await article.trigger('keydown', { key: 'Tab' })
|
||
|
||
expect(wrapper.emitted('keymove')).toBeUndefined()
|
||
expect(wrapper.emitted('open')).toBeUndefined()
|
||
})
|
||
|
||
it('方向键被 preventDefault（避免连带着滚动看板）', async () => {
|
||
const wrapper = mountCard()
|
||
const article = wrapper.find('article')
|
||
|
||
const event = new KeyboardEvent('keydown', { key: 'ArrowDown', cancelable: true })
|
||
article.element.dispatchEvent(event)
|
||
|
||
expect(event.defaultPrevented).toBe(true)
|
||
})
|
||
})
|
||
|
||
describe('TaskCard 多选态', () => {
|
||
function mountSelectable(selected = false) {
|
||
return mount(TaskCard, {
|
||
props: { task: makeTask({ id: 'task-9' }), selectable: true, selected },
|
||
})
|
||
}
|
||
|
||
it('平时不带 checkbox 语义，多选时才加上', () => {
|
||
expect(mountCard().find('article').attributes('role')).toBeUndefined()
|
||
expect(mountSelectable().find('article').attributes('role')).toBe('checkbox')
|
||
})
|
||
|
||
it('选中态通过 aria-checked 暴露给读屏', () => {
|
||
expect(mountSelectable(false).find('article').attributes('aria-checked')).toBe('false')
|
||
expect(mountSelectable(true).find('article').attributes('aria-checked')).toBe('true')
|
||
})
|
||
|
||
it('选中态有可辨识的高亮样式', () => {
|
||
const classes = mountSelectable(true).find('article').classes().join(' ')
|
||
expect(classes).toContain('bg-sky-50')
|
||
})
|
||
|
||
it('多选时点击是「选中」而不是「打开详情」', async () => {
|
||
const wrapper = mountSelectable()
|
||
|
||
await wrapper.find('article').trigger('click')
|
||
|
||
expect(wrapper.emitted('select')).toEqual([['task-9']])
|
||
expect(wrapper.emitted('open')).toBeUndefined()
|
||
})
|
||
|
||
it('多选时 Enter 与空格切换选中', async () => {
|
||
const wrapper = mountSelectable()
|
||
|
||
await wrapper.find('article').trigger('keydown', { key: 'Enter' })
|
||
await wrapper.find('article').trigger('keydown', { key: ' ' })
|
||
|
||
expect(wrapper.emitted('select')).toEqual([['task-9'], ['task-9']])
|
||
expect(wrapper.emitted('open')).toBeUndefined()
|
||
})
|
||
|
||
it('多选时方向键不再移动卡片', async () => {
|
||
const wrapper = mountSelectable()
|
||
|
||
await wrapper.find('article').trigger('keydown', { key: 'ArrowRight' })
|
||
|
||
expect(wrapper.emitted('keymove')).toBeUndefined()
|
||
})
|
||
|
||
it('多选时不显示「完成」勾选按钮，避免与选中勾选混淆', () => {
|
||
expect(mountCard().find('article button').exists()).toBe(true)
|
||
expect(mountSelectable().find('article button').exists()).toBe(false)
|
||
})
|
||
})
|