minstrel/web/src/lib/components/TrackRow.test.ts

import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/svelte';
import type { TrackRef } from '$lib/api/types';
import { emptyLikesMock } from '../../test-utils/mocks/likes';
import { emptyQuarantineMock } from '../../test-utils/mocks/quarantine';
import { makeTrack } from '$test-utils/fixtures/track';

vi.mock('$lib/player/store.svelte', () => ({
  playQueue: vi.fn(),
  enqueueTrack: vi.fn(),
  playRadio: vi.fn(),
  player: { current: undefined }
}));

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

vi.mock('$lib/api/quarantine', () => emptyQuarantineMock());

import TrackRow from './TrackRow.svelte';
import { playQueue, enqueueTrack, playRadio } from '$lib/player/store.svelte';
import { selection, clearSelection } from '$lib/selection/store.svelte';

const tracks: TrackRef[] = [
  makeTrack({ title: 'So What', duration_sec: 545 }),
  makeTrack({ id: 't2', title: 'Freddie Freeloader', track_number: 2, duration_sec: 565, stream_url: '/api/tracks/t2/stream' })
];

beforeEach(() => clearSelection());
afterEach(() => vi.clearAllMocks());

describe('TrackRow', () => {
  test('renders track number, title, formatted duration', () => {
    render(TrackRow, { props: { tracks, index: 0 } });
    expect(screen.getByText('1')).toBeInTheDocument();
    expect(screen.getByText('So What')).toBeInTheDocument();
    expect(screen.getByText('9:05')).toBeInTheDocument();
  });

  test('track number falls back to dash when missing', () => {
    const noNum = [{ ...tracks[0], track_number: undefined }];
    render(TrackRow, { props: { tracks: noNum, index: 0 } });
    expect(screen.getByText('—')).toBeInTheDocument();
  });

  test('clicking the row calls playQueue(tracks, index)', async () => {
    render(TrackRow, { props: { tracks, index: 1 } });
    await fireEvent.click(screen.getByRole('button', { name: 'Freddie Freeloader' }));
    expect(playQueue).toHaveBeenCalledWith(tracks, 1);
  });

  test('Enter on the row activates play', async () => {
    render(TrackRow, { props: { tracks, index: 0 } });
    await fireEvent.keyDown(screen.getByRole('button', { name: 'So What' }), { key: 'Enter' });
    expect(playQueue).toHaveBeenCalledWith(tracks, 0);
  });

  test('Space on the row activates play', async () => {
    render(TrackRow, { props: { tracks, index: 0 } });
    await fireEvent.keyDown(screen.getByRole('button', { name: 'So What' }), { key: ' ' });
    expect(playQueue).toHaveBeenCalledWith(tracks, 0);
  });

  test('onPlay prop overrides default playQueue', async () => {
    const onPlay = vi.fn();
    render(TrackRow, { props: { tracks, index: 1, onPlay } });
    await fireEvent.click(screen.getByRole('button', { name: 'Freddie Freeloader' }));
    expect(onPlay).toHaveBeenCalledWith(tracks, 1);
    expect(playQueue).not.toHaveBeenCalled();
  });

  test('+ queue button calls enqueueTrack and does NOT trigger row play', async () => {
    render(TrackRow, { props: { tracks, index: 0 } });
    await fireEvent.click(screen.getByRole('button', { name: /add .* to queue/i }));
    expect(enqueueTrack).toHaveBeenCalledWith(tracks[0]);
    expect(playQueue).not.toHaveBeenCalled();
  });

  test('radio button calls playRadio with track id and does NOT trigger row play', async () => {
    render(TrackRow, { props: { tracks, index: 0 } });
    await fireEvent.click(screen.getByRole('button', { name: /play radio/i }));
    expect(playRadio).toHaveBeenCalledWith('t1');
    expect(playQueue).not.toHaveBeenCalled();
  });

  test('renders the TrackMenu kebab button', () => {
    render(TrackRow, { props: { tracks, index: 0 } });
    expect(
      screen.getByRole('button', { name: /track actions for/i })
    ).toBeInTheDocument();
  });

  describe('selection mode', () => {
    test('clicking the checkbox toggles selection without playing', async () => {
      render(TrackRow, { props: { tracks, index: 0 } });
      const box = screen.getByRole('checkbox', { name: /select so what/i });
      await fireEvent.click(box);
      expect(selection.isSelected('t1')).toBe(true);
      expect(playQueue).not.toHaveBeenCalled();
    });

    test('row click toggles selection (not play) once any row is selected', async () => {
      render(TrackRow, { props: { tracks, index: 0 } });
      const box = screen.getByRole('checkbox', { name: /select so what/i });
      await fireEvent.click(box);

      // Re-render at index 1 — selection mode is now active globally.
      const { container } = render(TrackRow, { props: { tracks, index: 1 } });
      const row = container.querySelector('[role="button"][aria-label="Freddie Freeloader"]')!;
      await fireEvent.click(row);
      expect(selection.isSelected('t2')).toBe(true);
      expect(playQueue).not.toHaveBeenCalled();
    });

    test('shift+click on the row extends the range from the anchor', async () => {
      render(TrackRow, { props: { tracks, index: 0 } });
      const box = screen.getByRole('checkbox', { name: /select so what/i });
      await fireEvent.click(box);

      const { container } = render(TrackRow, { props: { tracks, index: 1 } });
      const row = container.querySelector('[role="button"][aria-label="Freddie Freeloader"]')!;
      await fireEvent.click(row, { shiftKey: true });
      expect(selection.isSelected('t1')).toBe(true);
      expect(selection.isSelected('t2')).toBe(true);
      expect(selection.count).toBe(2);
    });
  });
});