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

describe('ValueSelector.vue', () => {
  const props = { value: 1, min: 0, max: 100 };
  let wrapper = mount(ValueSelector, { props });

  beforeEach(() => {
    const props = { value: 0, min: 0, max: 100 };
    wrapper = mount(ValueSelector, { props });
  });

  it('should inflate component', () => {
    expect(wrapper).toBeTruthy();
  });

  it('should change from props', async () => {
    await wrapper.setProps({ value: 1 });
    await flushPromises();
    expect(wrapper.vm.value).toStrictEqual(1);
  });

  it('should set text lower than min limits', async () => {
    wrapper.vm.sliderValue = -100;
    await flushPromises();
    expect(wrapper.emitted('update:value')).toStrictEqual([[0]]);
  });

  it('should set text higher than max limits', async () => {
    wrapper.vm.sliderValue = 9000;
    await flushPromises();
    expect(wrapper.emitted('update:value')).toStrictEqual([[100]]);
  });

  it('should set text higher than max limits', async () => {
    (wrapper.vm as any).sliderValue = '9000';
    await flushPromises();
    expect(wrapper.emitted('update:value')).toStrictEqual([[100]]);
  });

  it('should set text', async () => {
    const slider = wrapper.findAllComponents('.v-text-field');
    await slider[0].setValue(10);
  });
});