types: test cases typing

2021-02-11 13:04:00 +08:00
parent 7a5fb894d2
commit e2e0f66fe6
87 changed files with 129 additions and 121 deletions
@@ -0,0 +1,201 @@
+import Slider from '..';
+import {
+  mount,
+  trigger,
+  triggerDrag,
+  mockGetBoundingClientRect,
+} from '../../../test';
+
+function mockRect(vertical) {
+  return mockGetBoundingClientRect({
+    width: vertical ? 0 : 100,
+    height: vertical ? 100 : 0,
+    top: vertical ? 0 : 100,
+    left: vertical ? 100 : 0,
+  });
+}
+
+test('should emit "update:modelValue" event after dragging button', () => {
+  const wrapper = mount(Slider, {
+    props: {
+      modelValue: 50,
+    },
+  });
+
+  const button = wrapper.find('.van-slider__button');
+  triggerDrag(button, 50, 0);
+  expect(wrapper.emitted('update:modelValue').pop()).toEqual([100]);
+});
+
+test('should emit "update:modelValue" event after clicking slider', () => {
+  const wrapper = mount(Slider, {
+    props: {
+      modelValue: 50,
+    },
+  });
+
+  trigger(wrapper, 'click', 100, 0);
+  expect(wrapper.emitted('update:modelValue').pop()).toEqual([100]);
+});
+
+test('should emit drag-start event when start dragging', () => {
+  const wrapper = mount(Slider, {
+    props: {
+      modelValue: 50,
+    },
+  });
+
+  const button = wrapper.find('.van-slider__button');
+  trigger(button, 'touchstart');
+  trigger(button, 'touchmove');
+  expect(wrapper.emitted('drag-start')).toBeTruthy();
+});
+
+test('should emit drag-end event when end dragging', () => {
+  const wrapper = mount(Slider, {
+    props: {
+      modelValue: 50,
+    },
+  });
+
+  const button = wrapper.find('.van-slider__button');
+  trigger(button, 'touchstart');
+  trigger(button, 'touchmove');
+  expect(wrapper.emitted('drag-end')).toBeFalsy();
+  trigger(button, 'touchend');
+  expect(wrapper.emitted('drag-end')).toBeTruthy();
+});
+
+test('should not allow to drag slider when disabled', async () => {
+  const wrapper = mount(Slider, {
+    props: {
+      modelValue: 50,
+      disabled: true,
+    },
+  });
+
+  const button = wrapper.find('.van-slider__button');
+  triggerDrag(button, 50, 0);
+  expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+});
+
+test('should not allow to click slider when disabled', async () => {
+  const wrapper = mount(Slider, {
+    props: {
+      modelValue: 50,
+      disabled: true,
+    },
+  });
+
+  trigger(wrapper, 'click', 100, 0);
+  expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+});
+
+test('should not allow to drag slider when readonly', async () => {
+  const wrapper = mount(Slider, {
+    props: {
+      modelValue: 50,
+      readonly: true,
+    },
+  });
+
+  const button = wrapper.find('.van-slider__button');
+  triggerDrag(button, 50, 0);
+  expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+});
+
+test('should not allow to click slider when readonly', async () => {
+  const wrapper = mount(Slider, {
+    props: {
+      modelValue: 50,
+      readonly: true,
+    },
+  });
+
+  trigger(wrapper, 'click', 100, 0);
+  expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+});
+
+test('should allow to drag vertical slider', () => {
+  const restoreMock = mockRect(true);
+
+  const wrapper = mount(Slider, {
+    props: {
+      vertical: true,
+      modelValue: 50,
+    },
+  });
+
+  const button = wrapper.find('.van-slider__button');
+  triggerDrag(button, 0, 50);
+  expect(wrapper.emitted('update:modelValue').pop()).toEqual([100]);
+
+  restoreMock();
+});
+
+test('should change slider bar height when using bar-height prop', () => {
+  const wrapper = mount(Slider, {
+    props: {
+      barHeight: 10,
+      modelValue: 50,
+    },
+  });
+
+  expect(wrapper.style.height).toEqual('10px');
+});
+
+test('shoud change button size when using button-size prop', () => {
+  const wrapper = mount(Slider, {
+    props: {
+      modelValue: 50,
+      buttonSize: 10,
+    },
+  });
+
+  const button = wrapper.find('.van-slider__button');
+  expect(button.style.width).toEqual('10px');
+  expect(button.style.height).toEqual('10px');
+});
+
+test('should emit "update:modelValue" event after clicking vertical slider', () => {
+  const wrapper = mount(Slider, {
+    props: {
+      vertical: true,
+      modelValue: 50,
+    },
+  });
+
+  trigger(wrapper, 'click', 0, 100);
+  expect(wrapper.emitted('update:modelValue').pop()).toEqual([100]);
+});
+
+test('should format initial value', (done) => {
+  mount(Slider, {
+    props: {
+      modelValue: null,
+      'onUpdate:modelValue': (value) => {
+        expect(value).toEqual(0);
+        done();
+      },
+    },
+  });
+});
+
+test('should not emit change event when value not changed', async () => {
+  const wrapper = mount(Slider, {
+    props: {
+      modelValue: 50,
+    },
+  });
+
+  const button = wrapper.find('.van-slider__button');
+  trigger(button, 'touchstart');
+  trigger(wrapper, 'click', 100, 0);
+  expect(wrapper.emitted('change').length).toEqual(1);
+
+  await wrapper.setProps({ modelValue: 100 });
+  trigger(button, 'touchstart');
+  trigger(wrapper, 'click', 100, 0);
+
+  expect(wrapper.emitted('change').length).toEqual(1);
+});