test(drag): refactor test (#1132)

src/packages/__VUE/drag/__test__/index.spec.ts

@@ -1,11 +1,59 @@
 import { mount } from '@vue/test-utils';
 import Drag from '../index.vue';
+import { triggerDrag, sleep } from '../../../utils/unit';
 
 test('should render default slot correctly', () => {
   const wrapper = mount(Drag, {
+    props: {
+      attract: true,
+      direction: 'y',
+      boundary: { top: 10, left: 12, right: 20, bottom: 40 }
+    },
     slots: {
       default: () => 'Custom Message'
     }
   });
   expect(wrapper.find('.nut-drag').html()).toMatchSnapshot();
 });
+
+test('touch move', async () => {
+  const wrapper: any = mount(Drag, {
+    slots: {
+      default: () => 'Custom Message'
+    }
+  });
+  triggerDrag(wrapper, 20, 100);
+  await sleep(1000);
+  expect(wrapper.element.style.left).toBe('20px');
+});
+test('should render attract when touch', async () => {
+  const wrapper: any = mount(Drag, {
+    props: {
+      attract: true,
+      direction: 'x'
+    },
+    slots: {
+      default: () => `custom`
+    }
+  });
+  triggerDrag(wrapper, 200, 0);
+  await sleep(1000);
+  expect(wrapper.element.style.left).toBe('375px');
+  triggerDrag(wrapper, 100, 0);
+  await sleep(1000);
+  expect(wrapper.element.style.left).toBe('0px');
+});
+test('boundary touchMove', async () => {
+  const wrapper: any = mount(Drag, {
+    props: {
+      boundary: { top: 360, left: 10, right: 100, bottom: 300 }
+    },
+    slots: {
+      default: () => `custom`
+    }
+  });
+  triggerDrag(wrapper, 200, 200);
+  await sleep(1000);
+  expect(wrapper.element.style.left).toBe('200px');
+  expect(wrapper.element.style.top).toBe('360px');
+});

src/packages/__VUE/drag/index.vue

@@ -71,8 +71,8 @@ export default create({
       const domElem = document.documentElement;
       state.elWidth = myDrag.value.offsetWidth;
       state.elHeight = myDrag.value.offsetHeight;
-      state.screenWidth = domElem.clientWidth;
-      state.screenHeight = domElem.clientHeight;
+      state.screenWidth = domElem.clientWidth || 375;
+      state.screenHeight = domElem.clientHeight || 667;
     }
 
     function goLeft(target: HTMLElement) {

src/packages/utils/unit.ts

@@ -56,3 +56,23 @@ export function sleep(delay = 0): Promise<void> {
     setTimeout(resolve, delay);
   });
 }
+export function triggerDrag(el: any, relativeX = 0, relativeY = 0): void {
+  let x = relativeX;
+  let y = relativeY;
+  let startX = 0;
+  let startY = 0;
+  if (relativeX < 0) {
+    startX = Math.abs(relativeX);
+    x = 0;
+  }
+  if (relativeY < 0) {
+    startY = Math.abs(relativeY);
+    y = 0;
+  }
+  trigger(el, 'touchstart', startX, startY);
+  trigger(el, 'touchmove', x / 4, y / 4);
+  trigger(el, 'touchmove', x / 3, y / 3);
+  trigger(el, 'touchmove', x / 2, y / 2);
+  trigger(el, 'touchmove', x, y);
+  trigger(el, 'touchend', x, y);
+}