bb1ab3a2e3
Root cause: discover.test.ts and requests.test.ts were the only route
page tests NOT mocking $app/state (+ $app/navigation), so rendering
the +page.svelte pulled in SvelteKit's client runtime and threw
`TypeError: notifiable_store is not a function` at module load. They'd
been describe.skip'd AND hard-excluded in vitest.config.ts.
Fix mirrors every other route test: vi.hoisted pageState +
vi.mock('$app/state', () => pageUrlModule(state)) +
vi.mock('$app/navigation', () => ({ goto: vi.fn() })). Un-skip both
describe blocks; drop the vitest.config exclude. The web test job
now runs both suites again.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
278 lines
10 KiB
TypeScript
278 lines
10 KiB
TypeScript
import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
|
|
import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
|
|
import { mockQuery } from '../../test-utils/query';
|
|
import { apiClientMock } from '../../test-utils/mocks/client';
|
|
import type { LidarrSearchResult } from '$lib/api/types';
|
|
import { pageUrlModule } from '../../test-utils/mocks/appState';
|
|
|
|
// $app/state / $app/navigation must be mocked or rendering the page
|
|
// pulls in SvelteKit's client runtime (`notifiable_store is not a
|
|
// function`) at module load. Same pattern as the other route tests.
|
|
const pageState = vi.hoisted(() => ({
|
|
pageUrl: new URL('http://localhost/discover')
|
|
}));
|
|
vi.mock('$app/state', () => pageUrlModule(pageState));
|
|
vi.mock('$app/navigation', () => ({ goto: vi.fn() }));
|
|
|
|
// Lidarr search query factory and createRequest are mocked at the module
|
|
// level so each test can shape what the page sees without standing up a
|
|
// real QueryClient + network.
|
|
vi.mock('$lib/api/lidarr', () => ({
|
|
createLidarrSearchQuery: vi.fn()
|
|
}));
|
|
|
|
vi.mock('$lib/api/suggestions', () => ({
|
|
createSuggestionsQuery: vi.fn()
|
|
}));
|
|
|
|
vi.mock('$lib/api/requests', () => ({
|
|
createRequest: vi.fn().mockResolvedValue({ id: 'r1' })
|
|
}));
|
|
|
|
vi.mock('$lib/api/client', () => apiClientMock());
|
|
|
|
import DiscoverPage from './+page.svelte';
|
|
import { createLidarrSearchQuery } from '$lib/api/lidarr';
|
|
import { createSuggestionsQuery } from '$lib/api/suggestions';
|
|
import { createRequest } from '$lib/api/requests';
|
|
|
|
const mockedCreateQuery = createLidarrSearchQuery as ReturnType<typeof vi.fn>;
|
|
const mockedCreateSuggestionsQuery = createSuggestionsQuery as ReturnType<typeof vi.fn>;
|
|
const mockedCreateRequest = createRequest as ReturnType<typeof vi.fn>;
|
|
|
|
function result(over: Partial<LidarrSearchResult> = {}): LidarrSearchResult {
|
|
return {
|
|
mbid: 'mbid-1',
|
|
name: 'Boards of Canada',
|
|
secondary_text: 'Electronic',
|
|
image_url: '',
|
|
artist_mbid: 'art-1',
|
|
album_mbid: '',
|
|
in_library: false,
|
|
requested: false,
|
|
...over
|
|
};
|
|
}
|
|
|
|
beforeEach(() => {
|
|
// Default: empty results, non-pending. Tests override per-case.
|
|
mockedCreateQuery.mockReturnValue(mockQuery<LidarrSearchResult[]>({ data: [] }));
|
|
// Default: empty suggestion feed so its empty-state copy renders without
|
|
// interfering with search-mode tests.
|
|
mockedCreateSuggestionsQuery.mockReturnValue(mockQuery({ data: [] }));
|
|
});
|
|
|
|
afterEach(() => {
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
describe('Discover page', () => {
|
|
test('initial state (no query) shows the suggestion feed', () => {
|
|
render(DiscoverPage);
|
|
expect(screen.getByText(/suggested for you/i)).toBeInTheDocument();
|
|
});
|
|
|
|
test('empty input shows the suggestion feed', () => {
|
|
render(DiscoverPage);
|
|
expect(screen.getByText(/suggested for you/i)).toBeInTheDocument();
|
|
// Kind tabs should NOT be visible when input is empty.
|
|
expect(
|
|
screen.queryByRole('button', { name: 'Artists' })
|
|
).not.toBeInTheDocument();
|
|
});
|
|
|
|
test('typing replaces feed with search', async () => {
|
|
vi.useFakeTimers();
|
|
render(DiscoverPage);
|
|
const input = screen.getByLabelText(/search lidarr/i);
|
|
await fireEvent.input(input, { target: { value: 'miles' } });
|
|
await vi.advanceTimersByTimeAsync(250);
|
|
expect(screen.queryByText(/suggested for you/i)).not.toBeInTheDocument();
|
|
expect(screen.getByText(/add music to the library/i)).toBeInTheDocument();
|
|
// Kind tabs visible when searching.
|
|
expect(screen.getByRole('button', { name: 'Artists' })).toBeInTheDocument();
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
test('debounced input fires query factory with typed value after 250ms', async () => {
|
|
vi.useFakeTimers();
|
|
render(DiscoverPage);
|
|
const input = screen.getByLabelText(/search lidarr/i);
|
|
await fireEvent.input(input, { target: { value: 'boards' } });
|
|
// Before the timer elapses, the factory was called only with the
|
|
// initial empty string — never with 'boards'.
|
|
expect(mockedCreateQuery).not.toHaveBeenCalledWith('boards', 'artist');
|
|
await vi.advanceTimersByTimeAsync(250);
|
|
expect(mockedCreateQuery).toHaveBeenLastCalledWith('boards', 'artist');
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
test('switching tabs refetches with the new kind', async () => {
|
|
vi.useFakeTimers();
|
|
render(DiscoverPage);
|
|
const input = screen.getByLabelText(/search lidarr/i);
|
|
await fireEvent.input(input, { target: { value: 'boards' } });
|
|
await vi.advanceTimersByTimeAsync(250);
|
|
// Switch to Albums.
|
|
await fireEvent.click(screen.getByRole('button', { name: 'Albums' }));
|
|
expect(mockedCreateQuery).toHaveBeenLastCalledWith('boards', 'album');
|
|
// Then to Tracks.
|
|
await fireEvent.click(screen.getByRole('button', { name: 'Tracks' }));
|
|
expect(mockedCreateQuery).toHaveBeenLastCalledWith('boards', 'track');
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
test('empty results state renders the voice-rule copy', async () => {
|
|
vi.useFakeTimers();
|
|
mockedCreateQuery.mockReturnValue(mockQuery<LidarrSearchResult[]>({ data: [] }));
|
|
render(DiscoverPage);
|
|
const input = screen.getByLabelText(/search lidarr/i);
|
|
await fireEvent.input(input, { target: { value: 'zzz' } });
|
|
await vi.advanceTimersByTimeAsync(250);
|
|
await waitFor(() =>
|
|
expect(
|
|
screen.getByText(/nothing to add for that search yet\./i)
|
|
).toBeInTheDocument()
|
|
);
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
test('artist-kind Request click calls createRequest immediately (no modal)', async () => {
|
|
vi.useFakeTimers();
|
|
const r = result({
|
|
mbid: 'art-mbid',
|
|
artist_mbid: 'art-mbid',
|
|
name: 'Boards of Canada'
|
|
});
|
|
mockedCreateQuery.mockReturnValue(mockQuery<LidarrSearchResult[]>({ data: [r] }));
|
|
render(DiscoverPage);
|
|
const input = screen.getByLabelText(/search lidarr/i);
|
|
await fireEvent.input(input, { target: { value: 'boards' } });
|
|
await vi.advanceTimersByTimeAsync(250);
|
|
vi.useRealTimers();
|
|
|
|
const requestBtn = await screen.findByRole('button', {
|
|
name: /request boards of canada/i
|
|
});
|
|
await fireEvent.click(requestBtn);
|
|
expect(mockedCreateRequest).toHaveBeenCalledTimes(1);
|
|
expect(mockedCreateRequest).toHaveBeenCalledWith(
|
|
expect.objectContaining({ kind: 'artist' })
|
|
);
|
|
// Modal must not be present for non-track kinds.
|
|
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
|
|
});
|
|
|
|
test('requestable card flips to "Requested" after a successful request', async () => {
|
|
vi.useFakeTimers();
|
|
const r = result({
|
|
mbid: 'art-mbid',
|
|
artist_mbid: 'art-mbid',
|
|
name: 'Boards of Canada'
|
|
});
|
|
mockedCreateQuery.mockReturnValue(mockQuery<LidarrSearchResult[]>({ data: [r] }));
|
|
render(DiscoverPage);
|
|
const input = screen.getByLabelText(/search lidarr/i);
|
|
await fireEvent.input(input, { target: { value: 'boards' } });
|
|
await vi.advanceTimersByTimeAsync(250);
|
|
vi.useRealTimers();
|
|
|
|
const requestBtn = await screen.findByRole('button', {
|
|
name: /request boards of canada/i
|
|
});
|
|
await fireEvent.click(requestBtn);
|
|
await waitFor(() => {
|
|
const flipped = screen.getByRole('button', { name: /already requested/i });
|
|
expect(flipped).toBeDisabled();
|
|
});
|
|
});
|
|
|
|
test('track-kind Request click opens confirm modal; Confirm calls createRequest', async () => {
|
|
vi.useFakeTimers();
|
|
const r = result({
|
|
mbid: 'tr-mbid',
|
|
artist_mbid: 'art-mbid',
|
|
album_mbid: 'al-mbid',
|
|
name: 'Roygbiv',
|
|
secondary_text: 'Music Has The Right To Children · Boards of Canada'
|
|
});
|
|
mockedCreateQuery.mockReturnValue(mockQuery<LidarrSearchResult[]>({ data: [r] }));
|
|
render(DiscoverPage);
|
|
// Type first so the kind tabs become visible (empty-input mode shows the
|
|
// suggestion feed and hides tabs).
|
|
const input = screen.getByLabelText(/search lidarr/i);
|
|
await fireEvent.input(input, { target: { value: 'roy' } });
|
|
await vi.advanceTimersByTimeAsync(250);
|
|
// Switch to track kind.
|
|
await fireEvent.click(screen.getByRole('button', { name: 'Tracks' }));
|
|
vi.useRealTimers();
|
|
|
|
const requestBtn = await screen.findByRole('button', {
|
|
name: /request roygbiv/i
|
|
});
|
|
await fireEvent.click(requestBtn);
|
|
// Modal opens with the explanation copy.
|
|
const dialog = await screen.findByRole('dialog');
|
|
expect(dialog).toBeInTheDocument();
|
|
expect(dialog.textContent).toMatch(/continue/i);
|
|
// Confirm fires createRequest with kind=track.
|
|
await fireEvent.click(screen.getByRole('button', { name: /add the album/i }));
|
|
expect(mockedCreateRequest).toHaveBeenCalledTimes(1);
|
|
expect(mockedCreateRequest).toHaveBeenCalledWith(
|
|
expect.objectContaining({
|
|
kind: 'track',
|
|
lidarr_track_mbid: 'tr-mbid',
|
|
lidarr_album_mbid: 'al-mbid',
|
|
lidarr_artist_mbid: 'art-mbid'
|
|
})
|
|
);
|
|
});
|
|
|
|
test('track-kind modal Cancel does not call createRequest', async () => {
|
|
vi.useFakeTimers();
|
|
const r = result({
|
|
mbid: 'tr-mbid',
|
|
artist_mbid: 'art-mbid',
|
|
album_mbid: 'al-mbid',
|
|
name: 'Roygbiv',
|
|
secondary_text: 'Music Has The Right To Children · Boards of Canada'
|
|
});
|
|
mockedCreateQuery.mockReturnValue(mockQuery<LidarrSearchResult[]>({ data: [r] }));
|
|
render(DiscoverPage);
|
|
const input = screen.getByLabelText(/search lidarr/i);
|
|
await fireEvent.input(input, { target: { value: 'roy' } });
|
|
await vi.advanceTimersByTimeAsync(250);
|
|
await fireEvent.click(screen.getByRole('button', { name: 'Tracks' }));
|
|
vi.useRealTimers();
|
|
|
|
const requestBtn = await screen.findByRole('button', {
|
|
name: /request roygbiv/i
|
|
});
|
|
await fireEvent.click(requestBtn);
|
|
await screen.findByRole('dialog');
|
|
await fireEvent.click(screen.getByRole('button', { name: /^cancel$/i }));
|
|
expect(mockedCreateRequest).not.toHaveBeenCalled();
|
|
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
|
|
});
|
|
|
|
test('in_library result renders kept state regardless of requested', async () => {
|
|
vi.useFakeTimers();
|
|
const r = result({
|
|
mbid: 'kept-1',
|
|
name: 'Kind of Blue',
|
|
in_library: true,
|
|
requested: true
|
|
});
|
|
mockedCreateQuery.mockReturnValue(mockQuery<LidarrSearchResult[]>({ data: [r] }));
|
|
render(DiscoverPage);
|
|
const input = screen.getByLabelText(/search lidarr/i);
|
|
await fireEvent.input(input, { target: { value: 'kind' } });
|
|
await vi.advanceTimersByTimeAsync(250);
|
|
vi.useRealTimers();
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByRole('button', { name: /in library/i })).toBeDisabled();
|
|
});
|
|
});
|
|
});
|