feat(web): add /discover route with search + request flow

Local-input + 250ms debounce drives Lidarr search; tab switch refetches with new kind. Track-kind Request opens a confirm modal explaining the album that will be added; Confirm fires createRequest, Cancel is a no-op. Successful requests flip the card to 'requested' optimistically. Shell nav now exposes /discover between Search and Playlists. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-04-29 22:15:52 -04:00
parent d27b381250
commit 8a12b8c571
4 changed files with 467 additions and 1 deletions
@@ -0,0 +1,242 @@
+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 type { LidarrSearchResult } from '$lib/api/types';
+
+// 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/requests', () => ({
+  createRequest: vi.fn().mockResolvedValue({ id: 'r1' })
+}));
+
+vi.mock('$lib/api/client', () => ({
+  api: { get: vi.fn(), post: vi.fn(), put: vi.fn(), del: vi.fn() }
+}));
+
+vi.mock('@tanstack/svelte-query', async (orig) => {
+  const actual = (await orig()) as Record<string, unknown>;
+  return { ...actual, useQueryClient: () => ({}) };
+});
+
+import DiscoverPage from './+page.svelte';
+import { createLidarrSearchQuery } from '$lib/api/lidarr';
+import { createRequest } from '$lib/api/requests';
+
+const mockedCreateQuery = createLidarrSearchQuery 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: [] }));
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('Discover page', () => {
+  test('initial state (no query) shows the search prompt copy', () => {
+    render(DiscoverPage);
+    expect(
+      screen.getByText(/search lidarr for music to add/i)
+    ).toBeInTheDocument();
+  });
+
+  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);
+    // Switch to track kind first.
+    await fireEvent.click(screen.getByRole('button', { name: 'Tracks' }));
+    const input = screen.getByLabelText(/search lidarr/i);
+    await fireEvent.input(input, { target: { value: 'roy' } });
+    await vi.advanceTimersByTimeAsync(250);
+    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);
+    await fireEvent.click(screen.getByRole('button', { name: 'Tracks' }));
+    const input = screen.getByLabelText(/search lidarr/i);
+    await fireEvent.input(input, { target: { value: 'roy' } });
+    await vi.advanceTimersByTimeAsync(250);
+    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();
+    });
+  });
+});