133 lines
4.8 KiB
TypeScript
133 lines
4.8 KiB
TypeScript
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<typeof import('../src/api.js')>()
|
|
return { ...actual, api: { ...actual.api, listCollection: vi.fn() } }
|
|
})
|
|
|
|
import { api } from '../src/api.js'
|
|
|
|
function item(overrides: Partial<Item>): 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(
|
|
<MemoryRouter>
|
|
<LibraryPage />
|
|
</MemoryRouter>
|
|
)
|
|
}
|
|
|
|
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() }))
|
|
)
|
|
})
|
|
})
|