minstrel/web/src/routes/artists/[id]/artist.test.ts

import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import { flushSync } from 'svelte';
import { mockQuery } from '../../../test-utils/query';
import { emptyLikesMock } from '../../../test-utils/mocks/likes';
import type { ArtistDetail, AlbumRef } from '#lib/api/types.js';

const state = vi.hoisted(() => ({ pageParams: { id: 'abc' } as Record<string, string> }));

vi.mock('$app/state', () => ({
  page: {
    get params() { return state.pageParams; },
    get url() { return new URL('http://localhost/artists/' + state.pageParams.id); }
  }
}));

vi.mock('#lib/api/queries.js', () => ({
  qk: { artist: (id: string) => ['artist', id] },
  createArtistQuery: vi.fn(),
  createSimilarArtistsQuery: vi.fn(),
  createArtistTopTracksQuery: vi.fn()
}));

vi.mock('#lib/api/likes.js', () => emptyLikesMock());

import ArtistPage from './+page.svelte';
import {
  createArtistQuery,
  createSimilarArtistsQuery,
  createArtistTopTracksQuery
} from '#lib/api/queries.js';

function album(id: string, title: string, year?: number): AlbumRef {
  return {
    id, title,
    sort_title: title,
    artist_id: 'abc', artist_name: 'Alice',
    year, track_count: 10, duration_sec: 2400,
    cover_url: `/api/albums/${id}/cover`,
    cover_art_source: null
  };
}

afterEach(() => {
  vi.clearAllMocks();
  state.pageParams = { id: 'abc' };
});

beforeEach(() => {
  // Secondary sections default to empty so the existing album-grid assertions
  // are unaffected; individual tests can override to exercise the new strips.
  (createSimilarArtistsQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: [] }));
  (createArtistTopTracksQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: [] }));
});

describe('artist detail page', () => {
  test('renders artist name, subtitle, and one AlbumCard per album', () => {
    const detail: ArtistDetail = {
      id: 'abc', name: 'Alice', sort_name: 'Alice', album_count: 2, cover_url: '',
      albums: [album('a1', 'First', 2020), album('a2', 'Second')],
      genres: []
    };
    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: detail }));
    render(ArtistPage);
    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Alice');
    expect(screen.getByText(/2 albums/i)).toBeInTheDocument();
    expect(screen.getByRole('link', { name: /First/ })).toHaveAttribute('href', '/albums/a1');
    expect(screen.getByRole('link', { name: /Second/ })).toHaveAttribute('href', '/albums/a2');
  });

  test('renders top-tracks panel and similar-artists strip when present', () => {
    const detail: ArtistDetail = {
      id: 'abc', name: 'Alice', sort_name: 'Alice', album_count: 1, cover_url: '',
      albums: [album('a1', 'First', 2020)],
      genres: []
    };
    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: detail }));
    (createArtistTopTracksQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({
      data: [{
        id: 't1', title: 'Hit Song', album_id: 'a1', album_title: 'First',
        artist_id: 'abc', artist_name: 'Alice', duration_sec: 200, stream_url: '/s/t1'
      }]
    }));
    (createSimilarArtistsQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({
      data: [{ id: 'sim1', name: 'Bob', sort_name: 'Bob', album_count: 2, cover_url: '' }]
    }));
    render(ArtistPage);
    expect(screen.getByText(/top tracks/i)).toBeInTheDocument();
    expect(screen.getByText('Hit Song')).toBeInTheDocument();
    expect(screen.getByText(/similar artists/i)).toBeInTheDocument();
    expect(screen.getByRole('link', { name: /Bob/ })).toHaveAttribute('href', '/artists/sim1');
  });

  test('back link points to Library', () => {
    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({
      data: { id: 'abc', name: 'Alice', sort_name: 'Alice', album_count: 0, cover_url: '', albums: [] }
    }));
    render(ArtistPage);
    const back = screen.getByRole('link', { name: /library/i });
    expect(back).toHaveAttribute('href', '/');
  });

  test('404 renders non-retryable "Artist not found" with back link', () => {
    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({
      isError: true,
      error: { code: 'not_found', message: 'nope', status: 404 }
    }));
    render(ArtistPage);
    expect(screen.getByText(/artist not found/i)).toBeInTheDocument();
    expect(screen.queryByRole('button', { name: /try again/i })).not.toBeInTheDocument();
  });

  test('non-404 error renders the retry banner', () => {
    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({
      isError: true,
      error: { code: 'server_error', message: 'boom', status: 500 }
    }));
    render(ArtistPage);
    expect(screen.getByRole('alert')).toHaveTextContent('boom');
    expect(screen.getByRole('button', { name: /try again/i })).toBeInTheDocument();
  });

  test('pending (after delay) renders the grid skeleton', () => {
    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ isPending: true }));
    vi.useFakeTimers();
    try {
      render(ArtistPage);
      vi.advanceTimersByTime(200);
      flushSync();
      expect(screen.getByTestId('skeleton-grid')).toBeInTheDocument();
    } finally {
      vi.useRealTimers();
    }
  });
});