import { describe, expect, test, vi } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import { readable } from 'svelte/store';

vi.mock('$lib/api/queries', () => ({
  createArtistsQuery: () => readable({
    data: { pages: [{
      items: [
        { id: 'a1', name: 'Alpha', sort_name: 'Alpha', album_count: 1, cover_url: '' },
        { id: 'b1', name: 'Beta',  sort_name: 'Beta',  album_count: 2, cover_url: '' }
      ],
      total: 2, limit: 50, offset: 0
    }] },
    isPending: false,
    isError: false,
    hasNextPage: false,
    isFetchingNextPage: false,
    refetch: () => {},
    fetchNextPage: () => {}
  })
}));
vi.mock('$lib/api/client', () => ({ api: { get: vi.fn() } }));
vi.mock('$lib/player/store.svelte', () => ({ playQueue: vi.fn() }));

import Page from './+page.svelte';

describe('/library/artists', () => {
  test('renders title + count + alphabetical dividers', () => {
    render(Page);
    expect(screen.getByRole('heading', { name: /artists/i })).toBeInTheDocument();
    expect(screen.getByText(/2 artists/)).toBeInTheDocument();
    expect(screen.getByText('A')).toBeInTheDocument();
    expect(screen.getByText('B')).toBeInTheDocument();
    expect(screen.getByText('Alpha')).toBeInTheDocument();
    expect(screen.getByText('Beta')).toBeInTheDocument();
  });
});