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
74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
// @vitest-environment jsdom
|
|
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
|
import { mount } from '@vue/test-utils'
|
|
import { createTestingPinia } from '@pinia/testing'
|
|
import ArcoVue from '@arco-design/web-vue'
|
|
|
|
const routerPush = vi.hoisted(() => vi.fn())
|
|
|
|
vi.mock('vue-router', async (importOriginal) => {
|
|
const actual = await importOriginal<typeof import('vue-router')>()
|
|
return {
|
|
...actual,
|
|
useRouter: () => ({ push: routerPush }),
|
|
}
|
|
})
|
|
|
|
vi.mock('vue-i18n', () => ({
|
|
useI18n: () => ({ t: (key: string) => key }),
|
|
}))
|
|
|
|
vi.mock('@/composables/useMessage', () => ({
|
|
useMessage: () => ({ success: vi.fn(), error: vi.fn() }),
|
|
}))
|
|
|
|
vi.mock('@/composables/useDialog', () => ({
|
|
useDialog: () => ({ warning: vi.fn() }),
|
|
}))
|
|
|
|
import ProfileCard from '@/components/hermes/profiles/ProfileCard.vue'
|
|
|
|
function actionButton(wrapper: any, text: string) {
|
|
const button = wrapper
|
|
.findAll('.card-actions button')
|
|
.find((node: any) => node.text().trim() === text)
|
|
if (!button) throw new Error(`no card action labelled "${text}"`)
|
|
return button
|
|
}
|
|
|
|
describe('ProfileCard config edit affordance', () => {
|
|
beforeEach(() => {
|
|
vi.clearAllMocks()
|
|
})
|
|
|
|
it('routes to the scoped config editor for that profile', async () => {
|
|
const wrapper = mount(ProfileCard, {
|
|
props: {
|
|
profile: {
|
|
name: 'reviewer',
|
|
active: false,
|
|
model: 'gpt-5.4',
|
|
alias: 'reviewer',
|
|
avatar: null,
|
|
},
|
|
},
|
|
global: {
|
|
plugins: [createTestingPinia({ createSpy: vi.fn }), ArcoVue],
|
|
stubs: {
|
|
ProfileAvatar: { template: '<span class="profile-avatar-stub" />' },
|
|
},
|
|
},
|
|
})
|
|
|
|
await actionButton(wrapper, 'profiles.editConfig').trigger('click')
|
|
|
|
expect(routerPush).toHaveBeenCalledWith({
|
|
name: 'hermes.files',
|
|
query: {
|
|
profile: 'reviewer',
|
|
file: 'config.yaml',
|
|
},
|
|
})
|
|
})
|
|
})
|