toor
836d0228d2
The project now has exactly one UI library. Every naive-ui component in
packages/client/src is replaced by its Arco equivalent across 24 views and
roughly 80 components, and naive-ui is dropped from package.json along with
its transitive vueuc / @css-render / vdirs / seemly dependencies.
The migration is rendering-layer only. No store logic, no API contract, and
no /chat-run payload was touched.
Three classes of leftover were invisible to `grep naive-ui` and are now
covered by tests/client/no-naive-ui.test.ts, which asserts all three:
- dead .n-* class names in style blocks
- dead --n-* custom properties
- naive-ui in package.json
Notable behavioural traps handled along the way, recorded in
docs/arco-migration-rules.md:
- a-input-password defaults to masked; passing default-visibility="false"
would have exposed API keys in clear text
- a-upload fires a real XHR unless auto-upload is false
- nested Trigger components fight over the first element child, so the
group-chat settings dropdown was flattened
- Arco renders tooltip default-slot text inline, which was silently
collapsing the chat and group-chat toolbars
92 lines
3.3 KiB
TypeScript
92 lines
3.3 KiB
TypeScript
// @vitest-environment jsdom
|
|
import { afterEach, describe, expect, it, vi } from 'vitest'
|
|
import { defineComponent } from 'vue'
|
|
import { mount } from '@vue/test-utils'
|
|
import ArcoVue from '@arco-design/web-vue'
|
|
|
|
vi.mock('vue-i18n', () => ({
|
|
useI18n: () => ({
|
|
t: (key: string, params?: Record<string, number>) => {
|
|
if (key === 'kanban.card.timeAgo.justNow') return '刚刚'
|
|
if (key === 'kanban.card.timeAgo.minutes') return `${params?.count}分钟前`
|
|
if (key === 'kanban.card.timeAgo.hours') return `${params?.count}小时前`
|
|
if (key === 'kanban.card.timeAgo.days') return `${params?.count}天前`
|
|
if (key === 'kanban.card.priority.high') return '高'
|
|
if (key === 'kanban.card.priority.medium') return '中'
|
|
if (key === 'kanban.card.priority.low') return '低'
|
|
if (key === 'kanban.card.assigneeTooltip') return '负责人'
|
|
return key
|
|
},
|
|
}),
|
|
}))
|
|
|
|
/**
|
|
* Arco's a-tooltip only renders its content in a teleported popup, so it is
|
|
* stubbed under Arco's *internal* component name — stubs key off that, not the
|
|
* `a-*` template tag, because Arco is registered globally via `app.use(ArcoVue)`.
|
|
*/
|
|
const ATooltipStub = defineComponent({
|
|
name: 'Tooltip',
|
|
props: ['content'],
|
|
template: '<div class="arco-tooltip-stub"><div class="tooltip-content">{{ content }}</div><slot /></div>',
|
|
})
|
|
|
|
vi.mock('@/components/hermes/profiles/ProfileAvatar.vue', () => ({
|
|
default: defineComponent({
|
|
name: 'ProfileAvatar',
|
|
props: { name: { type: String, required: true }, avatar: { type: Object, required: false }, size: { type: Number, required: false } },
|
|
template: '<span class="assignee-profile-avatar-stub" :data-name="name" :data-avatar-type="avatar?.type || null" :data-avatar-seed="avatar?.seed || null"></span>',
|
|
}),
|
|
}))
|
|
|
|
import KanbanTaskCard from '@/components/hermes/kanban/KanbanTaskCard.vue'
|
|
|
|
describe('KanbanTaskCard i18n', () => {
|
|
afterEach(() => {
|
|
vi.useRealTimers()
|
|
})
|
|
|
|
it('renders localized priority, tooltip, and relative time', () => {
|
|
vi.useFakeTimers()
|
|
vi.setSystemTime(new Date('2026-05-08T03:00:00Z'))
|
|
|
|
const wrapper = mount(KanbanTaskCard, {
|
|
global: {
|
|
plugins: [ArcoVue],
|
|
stubs: {
|
|
Tooltip: ATooltipStub,
|
|
},
|
|
},
|
|
props: {
|
|
assigneeAvatar: { type: 'generated', seed: 'alice-seed' },
|
|
task: {
|
|
id: 'task-1',
|
|
title: 'Ship kanban i18n',
|
|
body: 'Body preview content',
|
|
assignee: 'alice',
|
|
status: 'todo',
|
|
priority: 3,
|
|
created_by: null,
|
|
created_at: Math.floor(new Date('2026-05-08T02:58:00Z').getTime() / 1000),
|
|
started_at: null,
|
|
completed_at: null,
|
|
workspace_kind: 'local',
|
|
workspace_path: null,
|
|
tenant: null,
|
|
result: null,
|
|
skills: null,
|
|
},
|
|
},
|
|
})
|
|
|
|
expect(wrapper.text()).toContain('高')
|
|
expect(wrapper.text()).toContain('2分钟前')
|
|
expect(wrapper.text()).toContain('负责人')
|
|
expect(wrapper.classes()).toContain('status-todo')
|
|
const avatar = wrapper.find('.assignee-profile-avatar-stub')
|
|
expect(avatar.attributes('data-name')).toBe('alice')
|
|
expect(avatar.attributes('data-avatar-type')).toBe('generated')
|
|
expect(avatar.attributes('data-avatar-seed')).toBe('alice-seed')
|
|
})
|
|
})
|