import { render } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Slider } from './slider';
import React from 'react';

describe('Slider', () => {
  it('renders correctly with default values', () => {
    const { container } = render(<Slider defaultValue={[50]} />);
    const thumbs = container.querySelectorAll('[data-slot="slider-thumb"]');
    expect(thumbs).toHaveLength(1);
  });

  it('renders dual thumbs for range selection', () => {
    const { container } = render(<Slider defaultValue={[20, 80]} />);
    const thumbs = container.querySelectorAll('[data-slot="slider-thumb"]');
    expect(thumbs).toHaveLength(2);
  });

  it('has correct data-slot attributes', () => {
    const { container } = render(<Slider defaultValue={[50]} />);
    expect(container.querySelector('[data-slot="slider"]')).toBeInTheDocument();
    expect(container.querySelector('[data-slot="slider-track"]')).toBeInTheDocument();
    expect(container.querySelector('[data-slot="slider-range"]')).toBeInTheDocument();
  });
});