import HorizontalSliderSelector from '@/components/shared/HorizontalSliderSelector.vue';
import { mount } from '@vue/test-utils';

describe('HorizontalSliderSelector', () => {
  it('renders correctly with default props', () => {
    const wrapper = mount(HorizontalSliderSelector, {
      props: { value: 50, min: 0, max: 100 },
    });
    expect(wrapper.find('[data-testid="slider"]').exists()).toBe(true);
    expect(wrapper.find('[data-testid="min-value"]').text()).toBe('0');
    expect(wrapper.find('[data-testid="max-value"]').text()).toBe('100');
    expect(wrapper.props('value')).toBe(50);
  });
  it('emits correct value when the slider changes', async () => {
    const wrapper = mount(HorizontalSliderSelector, {
      props: { value: 50, min: 0, max: 100 },
    });
    const slider = wrapper.findComponent({ name: 'VSlider' });
    await slider.vm.$emit('update:modelValue', 75);
    expect(wrapper.emitted('update:value')).toBeTruthy();
    expect(wrapper.emitted('update:value')?.[0]).toEqual([75]);
    expect(wrapper.props('value')).toBe(50);
  });
  it('sets showThumb to always and then false after timeout', async () => {
    vi.useFakeTimers();
    const wrapper = mount(HorizontalSliderSelector, {
      props: { value: 50, min: 0, max: 100 },
    });
    await wrapper.setProps({ value: 75 });
    expect(wrapper.vm.showThumb).toBe('always');
    vi.advanceTimersByTime(1000);
    expect(wrapper.vm.showThumb).toBe(false);
    vi.useRealTimers();
  });
});