Spaces:
Paused
Paused
| import { describe, it, expect, vi, beforeEach } from 'vitest' | |
| import { mount, flushPromises } from '@vue/test-utils' | |
| import { createPinia, setActivePinia } from 'pinia' | |
| import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query' | |
| import { createRouter, createMemoryHistory } from 'vue-router' | |
| import ImageListView from '@/components/ImageListView.vue' | |
| const sampleResponse = { | |
| items: [ | |
| { | |
| cache_key: 'imdb/tt0111161', | |
| release_date: '1994-09-23', | |
| created_at: 1710000000, | |
| updated_at: 1710100000, | |
| }, | |
| { | |
| cache_key: 'tmdb/550', | |
| release_date: '1999-10-15', | |
| created_at: 1710000000, | |
| updated_at: 1710100000, | |
| }, | |
| ], | |
| total: 2, | |
| page: 1, | |
| page_size: 50, | |
| } | |
| function makeMocks() { | |
| return { | |
| listFn: vi.fn(), | |
| imageFn: vi.fn(), | |
| fetchFn: vi.fn(), | |
| } | |
| } | |
| function mountView(mocks: ReturnType<typeof makeMocks>, kind: 'poster' | 'logo' | 'backdrop' = 'poster') { | |
| const queryClient = new QueryClient({ | |
| defaultOptions: { queries: { retry: false } }, | |
| }) | |
| const router = createRouter({ | |
| history: createMemoryHistory(), | |
| routes: [{ path: '/', component: { template: '<div />' } }], | |
| }) | |
| return mount(ImageListView, { | |
| props: { | |
| kind, | |
| listFn: mocks.listFn, | |
| imageFn: mocks.imageFn, | |
| fetchFn: mocks.fetchFn, | |
| }, | |
| global: { | |
| plugins: [createPinia(), router, [VueQueryPlugin, { queryClient }]], | |
| stubs: { | |
| Button: { | |
| template: '<button @click="$emit(\'click\')" :disabled="disabled"><slot /></button>', | |
| props: ['disabled', 'variant', 'size', 'type'], | |
| }, | |
| Skeleton: { template: '<div data-testid="skeleton" />' }, | |
| Table: { template: '<table><slot /></table>' }, | |
| TableHeader: { template: '<thead><slot /></thead>' }, | |
| TableBody: { template: '<tbody><slot /></tbody>' }, | |
| TableRow: { template: '<tr><slot /></tr>' }, | |
| TableHead: { template: '<th><slot /></th>' }, | |
| TableCell: { template: '<td><slot /></td>' }, | |
| RefreshButton: { | |
| template: '<button @click="$emit(\'refresh\')">Refresh</button>', | |
| props: ['fetching'], | |
| emits: ['refresh'], | |
| }, | |
| Dialog: { template: '<div v-if="open"><slot /></div>', props: ['open'] }, | |
| DialogContent: { template: '<div><slot /></div>' }, | |
| DialogHeader: { template: '<div><slot /></div>' }, | |
| DialogTitle: { template: '<div><slot /></div>' }, | |
| Input: { | |
| template: '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />', | |
| props: ['modelValue'], | |
| emits: ['update:modelValue'], | |
| }, | |
| Download: { template: '<span />' }, | |
| Loader2: { template: '<span />' }, | |
| Eye: { template: '<span />' }, | |
| }, | |
| }, | |
| }) | |
| } | |
| describe('ImageListView', () => { | |
| beforeEach(() => { | |
| setActivePinia(createPinia()) | |
| vi.clearAllMocks() | |
| }) | |
| it('shows skeletons while loading', () => { | |
| const mocks = makeMocks() | |
| mocks.listFn.mockReturnValue(new Promise(() => {})) | |
| const wrapper = mountView(mocks) | |
| expect(wrapper.findAll('[data-testid="skeleton"]').length).toBeGreaterThan(0) | |
| }) | |
| it('renders list with parsed cache keys', async () => { | |
| const mocks = makeMocks() | |
| mocks.listFn.mockResolvedValue({ | |
| ok: true, | |
| json: () => Promise.resolve(sampleResponse), | |
| }) | |
| const wrapper = mountView(mocks) | |
| await flushPromises() | |
| expect(wrapper.text()).toContain('imdb') | |
| expect(wrapper.text()).toContain('tt0111161') | |
| expect(wrapper.text()).toContain('tmdb') | |
| expect(wrapper.text()).toContain('550') | |
| expect(wrapper.text()).toContain('1994-09-23') | |
| }) | |
| it('shows empty state when no items', async () => { | |
| const mocks = makeMocks() | |
| mocks.listFn.mockResolvedValue({ | |
| ok: true, | |
| json: () => Promise.resolve({ items: [], total: 0, page: 1, page_size: 50 }), | |
| }) | |
| const wrapper = mountView(mocks) | |
| await flushPromises() | |
| expect(wrapper.text()).toContain('No posters cached yet.') | |
| }) | |
| it('shows total count and pagination info', async () => { | |
| const mocks = makeMocks() | |
| mocks.listFn.mockResolvedValue({ | |
| ok: true, | |
| json: () => Promise.resolve(sampleResponse), | |
| }) | |
| const wrapper = mountView(mocks) | |
| await flushPromises() | |
| expect(wrapper.text()).toContain('2 posters total') | |
| expect(wrapper.text()).toContain('Page 1 of 1') | |
| }) | |
| it('has a refresh button', async () => { | |
| const mocks = makeMocks() | |
| mocks.listFn.mockResolvedValue({ | |
| ok: true, | |
| json: () => Promise.resolve(sampleResponse), | |
| }) | |
| const wrapper = mountView(mocks) | |
| await flushPromises() | |
| const refreshButton = wrapper.findAll('button').find((b) => b.text().includes('Refresh')) | |
| expect(refreshButton).toBeDefined() | |
| }) | |
| it('has a fetch button', async () => { | |
| const mocks = makeMocks() | |
| mocks.listFn.mockResolvedValue({ | |
| ok: true, | |
| json: () => Promise.resolve(sampleResponse), | |
| }) | |
| const wrapper = mountView(mocks) | |
| await flushPromises() | |
| const fetchButton = wrapper.findAll('button').find((b) => b.text().includes('Fetch')) | |
| expect(fetchButton).toBeDefined() | |
| }) | |
| it('opens fetch modal when fetch button is clicked', async () => { | |
| const mocks = makeMocks() | |
| mocks.listFn.mockResolvedValue({ | |
| ok: true, | |
| json: () => Promise.resolve(sampleResponse), | |
| }) | |
| const wrapper = mountView(mocks) | |
| await flushPromises() | |
| // Modal content should not be visible initially | |
| expect(wrapper.text()).not.toContain('Fetch Poster') | |
| const fetchButton = wrapper.findAll('button').find((b) => b.text().includes('Fetch')) | |
| await fetchButton!.trigger('click') | |
| await flushPromises() | |
| expect(wrapper.text()).toContain('Fetch Poster') | |
| expect(wrapper.text()).toContain('ID Type') | |
| expect(wrapper.text()).toContain('ID Value') | |
| }) | |
| it('calls fetchFn on form submit', async () => { | |
| const mocks = makeMocks() | |
| mocks.listFn.mockResolvedValue({ | |
| ok: true, | |
| json: () => Promise.resolve(sampleResponse), | |
| }) | |
| mocks.fetchFn.mockResolvedValue({ | |
| ok: true, | |
| blob: () => Promise.resolve(new Blob()), | |
| }) | |
| mocks.imageFn.mockResolvedValue({ | |
| ok: true, | |
| blob: () => Promise.resolve(new Blob()), | |
| }) | |
| const wrapper = mountView(mocks) | |
| await flushPromises() | |
| // Open modal | |
| const fetchButton = wrapper.findAll('button').find((b) => b.text().includes('Fetch')) | |
| await fetchButton!.trigger('click') | |
| await flushPromises() | |
| // Fill in ID value | |
| const input = wrapper.find('input') | |
| await input.setValue('tt0111161') | |
| await flushPromises() | |
| // Submit form | |
| const form = wrapper.find('form') | |
| await form.trigger('submit') | |
| await flushPromises() | |
| expect(mocks.fetchFn).toHaveBeenCalledWith('imdb', 'tt0111161') | |
| }) | |
| }) | |