import { describe, it, expect, vi } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import SpeedSelector from '$lib/components/SpeedSelector.svelte';

describe('SpeedSelector', () => {
  it('renders all speed options', () => {
    const { getByText } = render(SpeedSelector, {
      props: { currentRate: 1, onSelect: vi.fn(), onClose: vi.fn() },
    });
    expect(getByText('0.5×')).toBeTruthy();
    expect(getByText('0.75×')).toBeTruthy();
    expect(getByText('1×')).toBeTruthy();
    expect(getByText('1.25×')).toBeTruthy();
    expect(getByText('1.5×')).toBeTruthy();
    expect(getByText('2×')).toBeTruthy();
  });

  it('highlights the current rate', () => {
    const { container } = render(SpeedSelector, {
      props: { currentRate: 1.5, onSelect: vi.fn(), onClose: vi.fn() },
    });
    const activeBtn = container.querySelector('.speed-option.active');
    expect(activeBtn).toBeTruthy();
    expect(activeBtn!.textContent).toContain('1.5×');
  });

  it('calls onSelect when an option is clicked', async () => {
    const onSelect = vi.fn();
    const { getByText } = render(SpeedSelector, {
      props: { currentRate: 1, onSelect, onClose: vi.fn() },
    });
    await fireEvent.click(getByText('2×'));
    expect(onSelect).toHaveBeenCalledWith(2);
  });
});