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
87 lines
3.0 KiB
TypeScript
87 lines
3.0 KiB
TypeScript
// @vitest-environment jsdom
|
|
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
|
import { defineComponent } from 'vue'
|
|
import { flushPromises, mount } from '@vue/test-utils'
|
|
import ArcoVue from '@arco-design/web-vue'
|
|
|
|
const mockUsageStore = vi.hoisted(() => ({
|
|
isLoading: false,
|
|
hasData: true,
|
|
loadSessions: vi.fn(),
|
|
}))
|
|
|
|
const mockProfilesStore = vi.hoisted(() => ({
|
|
activeProfileName: 'default',
|
|
profiles: [{ name: 'default' }],
|
|
fetchProfiles: vi.fn(),
|
|
}))
|
|
|
|
vi.mock('@/stores/hermes/usage', () => ({
|
|
useUsageStore: () => mockUsageStore,
|
|
}))
|
|
|
|
vi.mock('@/stores/hermes/profiles', () => ({
|
|
useProfilesStore: () => mockProfilesStore,
|
|
}))
|
|
|
|
vi.mock('vue-i18n', () => ({
|
|
useI18n: () => ({
|
|
t: (key: string) => key,
|
|
}),
|
|
}))
|
|
|
|
vi.mock('@/components/hermes/usage/StatCards.vue', () => ({
|
|
default: defineComponent({ name: 'StatCards', template: '<section class="stat-cards-stub" />' }),
|
|
}))
|
|
|
|
vi.mock('@/components/hermes/usage/ModelBreakdown.vue', () => ({
|
|
default: defineComponent({ name: 'ModelBreakdown', template: '<section class="model-breakdown-stub" />' }),
|
|
}))
|
|
|
|
vi.mock('@/components/hermes/usage/AgentBreakdown.vue', () => ({
|
|
default: defineComponent({ name: 'AgentBreakdown', template: '<section class="agent-breakdown-stub" />' }),
|
|
}))
|
|
|
|
vi.mock('@/components/hermes/usage/DailyTrend.vue', () => ({
|
|
default: defineComponent({ name: 'DailyTrend', template: '<section class="daily-trend-stub" />' }),
|
|
}))
|
|
|
|
import UsageView from '@/views/hermes/UsageView.vue'
|
|
|
|
describe('UsageView period selector', () => {
|
|
beforeEach(() => {
|
|
mockUsageStore.isLoading = false
|
|
mockUsageStore.hasData = true
|
|
mockUsageStore.loadSessions.mockReset()
|
|
mockProfilesStore.activeProfileName = 'default'
|
|
mockProfilesStore.profiles = [{ name: 'default' }]
|
|
mockProfilesStore.fetchProfiles.mockReset()
|
|
})
|
|
|
|
it('loads the default 30-day period on mount', async () => {
|
|
mount(UsageView, { global: { plugins: [ArcoVue] } })
|
|
await flushPromises()
|
|
|
|
expect(mockUsageStore.loadSessions).toHaveBeenCalledWith(30)
|
|
})
|
|
|
|
it('lets users switch usage statistics between common dashboard periods', async () => {
|
|
const wrapper = mount(UsageView, { global: { plugins: [ArcoVue] } })
|
|
|
|
const periodButtons = wrapper.findAll('.period-option')
|
|
expect(periodButtons.map(button => button.text())).toEqual(['7d', '30d', '90d', '365d'])
|
|
expect(wrapper.find('.period-selector').attributes('role')).toBe('group')
|
|
|
|
await periodButtons[0].trigger('click')
|
|
expect(mockUsageStore.loadSessions).toHaveBeenLastCalledWith(7)
|
|
// Arco expresses the button variant through classes, not a data-type attribute.
|
|
expect(periodButtons[0].classes()).toContain('arco-btn-secondary')
|
|
expect(periodButtons[1].classes()).toContain('arco-btn-text')
|
|
expect(periodButtons[0].attributes('aria-pressed')).toBe('true')
|
|
expect(periodButtons[1].attributes('aria-pressed')).toBe('false')
|
|
|
|
await wrapper.find('.refresh-button').trigger('click')
|
|
expect(mockUsageStore.loadSessions).toHaveBeenLastCalledWith(7)
|
|
})
|
|
})
|