test(Rate): update test cases

2020-12-03 20:52:58 +08:00
parent c821ccbf2b
commit 1e919b85b3
4 changed files with 202 additions and 185 deletions
@@ -0,0 +1,129 @@
+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();
+});