|
| 1 | +import { describe, it, expect, vi, beforeEach } from 'vitest' |
| 2 | +import { mount } from '@vue/test-utils' |
| 3 | +import NotebookDetail from '@/components/notebooks/NotebookDetail.vue' |
| 4 | + |
| 5 | +// Mock vue-router usage is minimal here; component uses provide/inject and props. |
| 6 | + |
| 7 | +// Mock vue3-cookies |
| 8 | +vi.mock('vue3-cookies', () => ({ |
| 9 | + useCookies: () => ({ cookies: { get: vi.fn(() => 'mock-jwt') } }) |
| 10 | +})) |
| 11 | + |
| 12 | +// Mock RepoHeader/RepoTabs/LoadingSpinner |
| 13 | +vi.mock('@/components/shared/RepoHeader.vue', () => ({ |
| 14 | + default: { name: 'RepoHeader', template: '<div>RepoHeader</div>' } |
| 15 | +})) |
| 16 | +vi.mock('@/components/shared/RepoTabs.vue', () => ({ |
| 17 | + default: { name: 'RepoTabs', template: '<div>RepoTabs</div>' } |
| 18 | +})) |
| 19 | +vi.mock('@/components/shared/LoadingSpinner.vue', () => ({ |
| 20 | + default: { name: 'LoadingSpinner', props: ['loading','text'], template: '<div v-if="loading">loading</div>' } |
| 21 | +})) |
| 22 | + |
| 23 | +// Mock RepoTabStore |
| 24 | +vi.mock('@/stores/RepoTabStore', () => ({ |
| 25 | + useRepoTabStore: () => ({ setRepoTab: vi.fn() }) |
| 26 | +})) |
| 27 | + |
| 28 | +// Mock RepoDetailStore |
| 29 | +const storeState = () => ({ |
| 30 | + deployName: '', id: '', status: '', hardware: '', notebookResource: '', |
| 31 | + repositoryId: 0, deployId: 0, nickName: '', description: '', endpoint: '', |
| 32 | + modelId: '', clusterId: '', privateVisibility: false, actualReplica: 0, |
| 33 | + activeInstance: '', failedReason: '', repoType: 'notebook', |
| 34 | + initialize: vi.fn(function (data) { |
| 35 | + this.deployName = data.deploy_name || 'nb-name' |
| 36 | + this.id = String(data.id || '1') |
| 37 | + this.status = data.status || 'Running' |
| 38 | + this.hardware = data.hardware || 'GPU' |
| 39 | + this.notebookResource = data.resource_name || 'r1' |
| 40 | + this.repositoryId = data.repository_id || 1 |
| 41 | + this.deployId = data.deploy_id || 2 |
| 42 | + this.endpoint = data.endpoint || 'nb.endpoint' |
| 43 | + }) |
| 44 | +}) |
| 45 | +vi.mock('@/stores/RepoDetailStore', () => ({ |
| 46 | + default: () => ({ ...storeState(), isInitialized: { value: true } }) |
| 47 | +})) |
| 48 | + |
| 49 | +// Mock Element Plus |
| 50 | +vi.mock('element-plus', () => ({ ElMessage: vi.fn() })) |
| 51 | + |
| 52 | +// Mock utils |
| 53 | +vi.mock('@/packs/utils', () => ({ ToNotFoundPage: vi.fn() })) |
| 54 | + |
| 55 | +// Mock refreshJWT |
| 56 | +vi.mock('@/packs/refreshJWT.js', () => ({ default: vi.fn() })) |
| 57 | + |
| 58 | +// Mock fetch-event-source for status sse |
| 59 | +vi.mock('@microsoft/fetch-event-source', () => ({ |
| 60 | + fetchEventSource: vi.fn((url, opts) => { |
| 61 | + setTimeout(() => { |
| 62 | + opts.onopen && opts.onopen({ ok: true, status: 200 }) |
| 63 | + opts.onmessage && opts.onmessage({ data: JSON.stringify({ status: 'Running', details: [{ name: 'pod-1' }] }) }) |
| 64 | + }, 10) |
| 65 | + return { close: vi.fn() } |
| 66 | + }) |
| 67 | +})) |
| 68 | + |
| 69 | +// Mock API |
| 70 | +const apiMock = vi.fn((url) => ({ |
| 71 | + json: () => { |
| 72 | + if (url.startsWith('/notebooks/')) { |
| 73 | + return Promise.resolve({ |
| 74 | + response: { value: { status: 200 } }, |
| 75 | + data: { value: { data: { |
| 76 | + id: 1, |
| 77 | + namespace: { Path: 'tester', Type: 'user', Avatar: '' }, |
| 78 | + deploy_id: 2, |
| 79 | + repository_id: 3, |
| 80 | + deploy_name: 'NB Demo', |
| 81 | + status: 'Running', |
| 82 | + hardware: 'A100', |
| 83 | + endpoint: 'nb.endpoint', |
| 84 | + resource_id: 11, |
| 85 | + order_detail_id: 101, |
| 86 | + resource_name: 'GPU-A100' |
| 87 | + } } }, |
| 88 | + error: { value: null } |
| 89 | + }) |
| 90 | + } |
| 91 | + return Promise.resolve({ data: { value: { data: [] } }, error: { value: null }, response: { value: { status: 200 } } }) |
| 92 | + } |
| 93 | +})) |
| 94 | +vi.mock('@/packs/useFetchApi', () => ({ default: (url) => apiMock(url) })) |
| 95 | + |
| 96 | +const createWrapper = async (props = {}) => { |
| 97 | + global.ENABLE_HTTPS = 'false' |
| 98 | + const wrapper = mount(NotebookDetail, { |
| 99 | + global: { |
| 100 | + provide: { csghubServer: 'http://server' } |
| 101 | + }, |
| 102 | + props: { notebookId: '1', notebookName: 'nb', ...props } |
| 103 | + }) |
| 104 | + await new Promise(r => setTimeout(r, 60)) |
| 105 | + await wrapper.vm.$nextTick() |
| 106 | + return wrapper |
| 107 | +} |
| 108 | + |
| 109 | +describe('NotebookDetail', () => { |
| 110 | + beforeEach(() => apiMock.mockClear()) |
| 111 | + |
| 112 | + it('mounts and fetches detail', async () => { |
| 113 | + const wrapper = await createWrapper() |
| 114 | + expect(wrapper.exists()).toBe(true) |
| 115 | + expect(apiMock).toHaveBeenCalledWith('/notebooks/1') |
| 116 | + }) |
| 117 | + |
| 118 | + it('connects status SSE and updates store fields', async () => { |
| 119 | + const wrapper = await createWrapper() |
| 120 | + await new Promise(r => setTimeout(r, 100)) |
| 121 | + expect(wrapper.vm.repoDetailStore.status).toBe('Running') |
| 122 | + }) |
| 123 | +}) |
0 commit comments