import { describe, it, expect, vi, beforeEach } from 'vitest' import { render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { MemoryRouter } from 'react-router-dom' import LibraryPage from '../src/pages/LibraryPage.js' import type { Item } from '../src/types.js' vi.mock('../src/api.js', async (importOriginal) => { const actual = await importOriginal() return { ...actual, api: { ...actual.api, listCollection: vi.fn() } } }) import { api } from '../src/api.js' function item(overrides: Partial): Item { return { id: 1, discogsReleaseId: 100, title: 'Motion', artist: 'The Cinematic Orchestra', year: 1999, formats: ['CD'], genres: [], labels: [], tracklist: [], catno: null, country: null, artworkUrl: null, barcodes: [], dateAdded: '2026-08-29', ripOverride: null, ripStatus: 'not_ripped', ...overrides, } } const data = { items: [ item({ id: 1, ripStatus: 'not_ripped' }), item({ id: 2, title: 'Blue Lines', artist: 'Massive Attack', formats: ['Vinyl'], ripStatus: 'ripped' }), item({ id: 3, title: 'Mezzanine', artist: 'Massive Attack', formats: ['Cassette'], ripStatus: 'not_ripped' }), ], counts: { total: 3, ripped: 1, notRipped: 2 }, } beforeEach(() => { vi.mocked(api.listCollection).mockReset() vi.mocked(api.listCollection).mockResolvedValue(data as never) }) function renderLibrary() { return render( ) } describe('LibraryPage', () => { it('renders covers with artist and rip badges', async () => { renderLibrary() await waitFor(() => expect(screen.getAllByRole('link', { name: /motion/i })).toHaveLength(1)) expect(screen.getByRole('link', { name: /blue lines/i })).toBeTruthy() expect(screen.getByRole('link', { name: /mezzanine/i })).toBeTruthy() }) it('passes format and rip filters to the api', async () => { renderLibrary() await waitFor(() => expect(screen.getByRole('button', { name: /^vinyl$/i })).toBeTruthy()) await userEvent.click(screen.getByRole('button', { name: /^vinyl$/i })) await waitFor(() => expect(api.listCollection).toHaveBeenLastCalledWith(expect.objectContaining({ format: 'Vinyl' })) ) await userEvent.click(screen.getByRole('button', { name: /^ripped$/i })) await waitFor(() => expect(api.listCollection).toHaveBeenLastCalledWith( expect.objectContaining({ format: 'Vinyl', ripped: 'ripped' }) ) ) }) it('searches by title/artist via the q filter', async () => { renderLibrary() await waitFor(() => expect(screen.getByPlaceholderText(/search/i)).toBeTruthy()) await userEvent.type(screen.getByPlaceholderText(/search/i), 'mezz') await waitFor(() => expect(api.listCollection).toHaveBeenLastCalledWith(expect.objectContaining({ q: 'mezz' })) ) }) it('shows collection counts', async () => { renderLibrary() await waitFor(() => expect(screen.getByText(/3 in collection/i)).toBeTruthy()) expect(screen.getByText(/1 ripped/i)).toBeTruthy() expect(screen.getByText(/2 not ripped/i)).toBeTruthy() }) it('artist index sets the search box to the artist name', async () => { renderLibrary() const artistBtn = await screen.findByRole('button', { name: /massive attack/i }) await userEvent.click(artistBtn) await waitFor(() => expect(api.listCollection).toHaveBeenLastCalledWith(expect.objectContaining({ q: 'Massive Attack' })) ) }) it('shows an empty state when the collection is empty', async () => { vi.mocked(api.listCollection).mockResolvedValue({ items: [], counts: { total: 0, ripped: 0, notRipped: 0 } } as never) renderLibrary() await waitFor(() => expect(screen.getByText(/nothing here yet/i)).toBeTruthy()) expect(screen.getByRole('link', { name: /add your first record/i }).getAttribute('href')).toBe('/add') }) it('header links to stats and queue', async () => { renderLibrary() expect(screen.getByRole('link', { name: /stats/i }).getAttribute('href')).toBe('/stats') expect(screen.getByRole('link', { name: /queue/i }).getAttribute('href')).toBe('/queue') }) it('on-loan chip filters by loan state', async () => { renderLibrary() await waitFor(() => expect(screen.getByRole('button', { name: /^on loan$/i })).toBeTruthy()) await userEvent.click(screen.getByRole('button', { name: /^on loan$/i })) await waitFor(() => expect(api.listCollection).toHaveBeenLastCalledWith(expect.objectContaining({ onLoan: 'true' })) ) await userEvent.click(screen.getByRole('button', { name: /^on loan$/i })) await waitFor(() => expect(api.listCollection).toHaveBeenLastCalledWith(expect.not.objectContaining({ onLoan: expect.anything() })) ) }) })