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
2.8 KiB
TypeScript
92 lines
2.8 KiB
TypeScript
// @vitest-environment jsdom
|
|
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
|
import { defineComponent, nextTick } from 'vue'
|
|
import { flushPromises, mount } from '@vue/test-utils'
|
|
import ArcoVue from '@arco-design/web-vue'
|
|
|
|
const mockPush = vi.hoisted(() => vi.fn())
|
|
const mockFetchCurrentUser = vi.hoisted(() => vi.fn())
|
|
const mockGetApiKey = vi.hoisted(() => vi.fn())
|
|
const routeState = vi.hoisted(() => ({ fullPath: '/hermes/chat', name: 'hermes.chat' as any }))
|
|
|
|
vi.mock('vue-router', () => ({
|
|
useRoute: () => routeState,
|
|
useRouter: () => ({ push: mockPush }),
|
|
}))
|
|
|
|
vi.mock('vue-i18n', () => ({
|
|
useI18n: () => ({
|
|
t: (key: string) => key,
|
|
}),
|
|
}))
|
|
|
|
vi.mock('@/api/auth', () => ({
|
|
fetchCurrentUser: mockFetchCurrentUser,
|
|
}))
|
|
|
|
vi.mock('@/api/client', () => ({
|
|
getApiKey: mockGetApiKey,
|
|
}))
|
|
|
|
// a-modal teleports to body in jsdom, so render it inline through a stub keyed
|
|
// by Arco's internal component name.
|
|
const AModalStub = defineComponent({
|
|
name: 'Modal',
|
|
props: { visible: Boolean, title: String },
|
|
emits: ['update:visible'],
|
|
template: '<div v-if="visible" class="arco-modal-stub"><h2>{{ title }}</h2><slot /><div class="modal-actions"><slot name="footer" /></div></div>',
|
|
})
|
|
|
|
const arcoGlobal = { plugins: [ArcoVue], stubs: { Modal: AModalStub } }
|
|
|
|
function buttonByText(wrapper: any, text: string) {
|
|
const button = wrapper.findAll('button').find((node: any) => node.text().trim() === text)
|
|
if (!button) throw new Error(`no button labelled "${text}"`)
|
|
return button
|
|
}
|
|
|
|
import DefaultCredentialPrompt from '@/components/auth/DefaultCredentialPrompt.vue'
|
|
|
|
describe('DefaultCredentialPrompt', () => {
|
|
beforeEach(() => {
|
|
sessionStorage.clear()
|
|
vi.clearAllMocks()
|
|
routeState.fullPath = '/hermes/chat'
|
|
routeState.name = 'hermes.chat'
|
|
mockGetApiKey.mockReturnValue('jwt-token')
|
|
})
|
|
|
|
it('prompts after login when the current user still has default credentials', async () => {
|
|
mockFetchCurrentUser.mockResolvedValue({
|
|
id: 1,
|
|
username: 'admin',
|
|
role: 'super_admin',
|
|
status: 'active',
|
|
created_at: 1,
|
|
updated_at: 1,
|
|
last_login_at: 1,
|
|
requiresCredentialChange: true,
|
|
})
|
|
|
|
const wrapper = mount(DefaultCredentialPrompt, { global: arcoGlobal })
|
|
await flushPromises()
|
|
await nextTick()
|
|
|
|
expect(mockFetchCurrentUser).toHaveBeenCalledOnce()
|
|
expect(wrapper.text()).toContain('login.defaultCredentialMessage')
|
|
|
|
await buttonByText(wrapper, 'login.defaultCredentialAction').trigger('click')
|
|
expect(mockPush).toHaveBeenCalledWith({ name: 'hermes.settings', query: { tab: 'account' } })
|
|
})
|
|
|
|
it('does not prompt on the login route', async () => {
|
|
routeState.fullPath = '/'
|
|
routeState.name = 'login'
|
|
|
|
mount(DefaultCredentialPrompt, { global: arcoGlobal })
|
|
await Promise.resolve()
|
|
|
|
expect(mockFetchCurrentUser).not.toHaveBeenCalled()
|
|
})
|
|
})
|