import Rate from '..';
import { mount, triggerDrag } from '../../../test';

function mockGetBoundingClientRect(items) {
  items.filter((icon, index) => {
    icon.element.getBoundingClientRect = () => ({
      left: index * 25,
      width: 25,
    });
    return true;
  });
}

test('should emit change and update:modelValue event when rate icon is clicked', async () => {
  const wrapper = mount(Rate);
  const item4 = wrapper.findAll('.van-rate__icon')[3];

  item4.trigger('click');
  expect(wrapper.emitted('change').length).toEqual(1);
  expect(wrapper.emitted('change')[0][0]).toEqual(4);
  expect(wrapper.emitted('update:modelValue').length).toEqual(1);
  expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(4);

  await wrapper.setProps({ modelValue: 4 });
  item4.trigger('click');
  expect(wrapper.emitted('change').length).toEqual(1);
  expect(wrapper.emitted('update:modelValue').length).toEqual(1);
});

test('should not emit change and update:modelValue event when rate is not changed', () => {
  const wrapper = mount(Rate, {
    props: {
      modelValue: 4,
    },
  });

  const item4 = wrapper.findAll('.van-rate__icon')[3];
  item4.trigger('click');
  expect(wrapper.emitted('change')).toBeFalsy();
  expect(wrapper.emitted('update:modelValue')).toBeFalsy();
});

test('should allow half rate when using allow-half prop', () => {
  const wrapper = mount(Rate, {
    props: {
      allowHalf: true,
    },
  });

  const item4 = wrapper.findAll('.van-rate__icon--half')[3];
  item4.trigger('click');
  expect(wrapper.emitted('change')[0][0]).toEqual(3.5);
  expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(3.5);
});

test('should not emit change or update:modelValue event when rate is disabled', () => {
  const wrapper = mount(Rate, {
    props: {
      disabled: true,
    },
  });

  const item4 = wrapper.findAll('.van-rate__item')[3];
  triggerDrag(wrapper, 100, 0);
  item4.trigger('click');

  expect(wrapper.emitted('change')).toBeFalsy();
  expect(wrapper.emitted('update:modelValue')).toBeFalsy();
});

test('should emit change event when rate icon is touchmoved', () => {
  const wrapper = mount(Rate);

  const icons = wrapper.findAll('.van-rate__item');
  mockGetBoundingClientRect(icons);
  triggerDrag(wrapper, 100, 0);

  const onChange = wrapper.emitted('change');
  expect(onChange).toEqual([[1], [2], [2], [4]]);
});

test('should emit change event when rate icon is touchmoved and using allow-half prop', () => {
  const wrapper = mount(Rate, {
    props: {
      allowHalf: true,
    },
  });

  const icons = wrapper.findAll('.van-rate__item');

  mockGetBoundingClientRect(icons);
  triggerDrag(wrapper, 100, 0);

  const onChange = wrapper.emitted('change');
  expect(onChange).toEqual([[1], [1.5], [2], [4]]);
});

test('should render gutter when using gutter prop', () => {
  const wrapper = mount(Rate, {
    props: {
      gutter: 10,
    },
  });

  expect(wrapper.html()).toMatchSnapshot();
});

test('should change icon size when using size prop', () => {
  const wrapper = mount(Rate, {
    props: {
      size: '2rem',
    },
  });

  expect(wrapper.find('.van-rate__icon').element.style.fontSize).toEqual(
    '2rem'
  );
});

test('should not emit change event when untouchable rate is touchmoved', () => {
  const wrapper = mount(Rate, {
    props: {
      touchable: false,
    },
  });

  triggerDrag(wrapper, 100, 0);
  expect(wrapper.emitted('change')).toBeFalsy();
});