feat: pullrefresh添加单元测试

src/packages/__VUE/infiniteloading/__tests__/infiniteloading.spec.ts

@@ -1,14 +1,7 @@
 import { config, mount } from '@vue/test-utils';
 import InfiniteLoading from '../index.vue';
 import NutIcon from '../../icon/index.vue';
-import { trigger, triggerDrag } from '../../../utils/test/event';
-import { nextTick, toRefs, reactive, ref, onMounted } from 'vue';
-
-function sleep(delay = 0): Promise<void> {
-  return new Promise((resolve) => {
-    setTimeout(resolve, delay);
-  });
-}
+import { toRefs, reactive, ref, onMounted } from 'vue';
 
 beforeAll(() => {
   config.global.components = {
@@ -20,29 +13,6 @@ afterAll(() => {
   config.global.components = {};
 });
 
-test('pull base', async () => {
-  const wrapper = mount(InfiniteLoading, {
-    props: {
-      isOpenRefresh: true,
-      loadMoreTxt: '没有更多'
-    }
-  });
-  const track = wrapper.find('.nut-infiniteloading');
-  // pulling
-  trigger(track, 'touchstart', 0, 0);
-  trigger(track, 'touchmove', 0, 20);
-  expect(wrapper.html()).toMatchSnapshot();
-
-  // loading
-  trigger(track, 'touchend', 0, 100);
-  expect(wrapper.html()).toMatchSnapshot();
-
-  // still loading
-  triggerDrag(track, 0, 100);
-
-  expect(wrapper.emitted('refresh')).toBeTruthy();
-});
-
 test('infiniteloading base', async () => {
   const wrapper = mount({
     components: {
@@ -50,15 +20,19 @@ test('infiniteloading base', async () => {
       'nut-icon': NutIcon
     },
     template: `
-    <nut-infiniteloading
-      :has-more="hasMore"
-      load-more-txt="没有啦～"
-      @load-more="loadMore">
-        <li class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{item}}</li>
-    </nut-infiniteloading>
+    <div class="box" style="height:300px;overflow:auto">
+      <nut-infiniteloading
+        v-model="infiteValue"
+        :has-more="hasMore"
+        load-more-txt="没有啦～"
+        @load-more="loadMore">
+          <div style='height: 50px;' v-for="(item, index) in defultList" :key="index">{{item}}</div>
+      </nut-infiniteloading>
+    </div>
     `,
     setup() {
       const hasMore = ref(true);
+      const infiteValue = ref(false);
       const data = reactive({
         defultList: []
       });
@@ -67,30 +41,22 @@ test('infiniteloading base', async () => {
           (data.defultList as any).push(i);
         }
       };
-      const loadMore = (done: any) => {
+      const loadMore = () => {
         setTimeout(() => {
           const curLen = data.defultList.length;
           for (let i = curLen; i < curLen + 10; i++) {
             (data.defultList as any).push(i);
           }
           if (data.defultList.length > 30) hasMore.value = false;
-          done();
         }, 500);
       };
       onMounted(() => {
         init();
       });
 
-      return { ...toRefs(data), hasMore, loadMore };
+      return { ...toRefs(data), infiteValue, hasMore, loadMore };
     }
   });
-  const track = wrapper.find('.nut-infiniteloading');
-  await nextTick();
-  trigger(track, 'touchstart', 0, 0);
-  trigger(track, 'touchmove', 0, -100);
-  trigger(track, 'touchend', 0, -800);
 
-  triggerDrag(track, 0, -800);
-  await nextTick();
   expect(wrapper.html()).toMatchSnapshot();
 });

src/packages/__VUE/pullrefresh/__tests__/__snapshots__/infiniteloading.spec.ts.snap

@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`infiniteloading base 1`] = `
-"<view class=\\"nut-infiniteloading\\">
-  <view class=\\"nut-infinite-top\\" style=\\"height: 0px; transition: height 0.2s cubic-bezier(0.25,0.1,0.25,1);\\">
-    <view class=\\"top-box\\"><img class=\\"nut-icon__img top-img\\" src=\\"https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png\\">
-      <view class=\\"top-text\\">松开刷新</view>
-    </view>
-  </view>
-  <view class=\\"nut-infinite-container\\">
-    <li class=\\"infiniteLi\\">0</li>
-    <li class=\\"infiniteLi\\">1</li>
-    <li class=\\"infiniteLi\\">2</li>
-    <li class=\\"infiniteLi\\">3</li>
-    <li class=\\"infiniteLi\\">4</li>
-    <li class=\\"infiniteLi\\">5</li>
-    <li class=\\"infiniteLi\\">6</li>
-    <li class=\\"infiniteLi\\">7</li>
-    <li class=\\"infiniteLi\\">8</li>
-    <li class=\\"infiniteLi\\">9</li>
-  </view>
-  <view class=\\"nut-infinite-bottom\\">
-    <!--v-if-->
-  </view>
-</view>"
-`;
-
-exports[`pull base 1`] = `
-"<view class=\\"nut-infiniteloading\\">
-  <view class=\\"nut-infinite-top\\" style=\\"height: 0px; transition: height 0.2s cubic-bezier(0.25,0.1,0.25,1);\\">
-    <view class=\\"top-box\\"><img class=\\"nut-icon__img top-img\\" src=\\"https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png\\">
-      <view class=\\"top-text\\">松开刷新</view>
-    </view>
-  </view>
-  <view class=\\"nut-infinite-container\\"></view>
-  <view class=\\"nut-infinite-bottom\\">
-    <!--v-if-->
-  </view>
-</view>"
-`;
-
-exports[`pull base 2`] = `
-"<view class=\\"nut-infiniteloading\\">
-  <view class=\\"nut-infinite-top\\" style=\\"height: 0px; transition: height 0.2s cubic-bezier(0.25,0.1,0.25,1);\\">
-    <view class=\\"top-box\\"><img class=\\"nut-icon__img top-img\\" src=\\"https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png\\">
-      <view class=\\"top-text\\">松开刷新</view>
-    </view>
-  </view>
-  <view class=\\"nut-infinite-container\\"></view>
-  <view class=\\"nut-infinite-bottom\\">
-    <!--v-if-->
-  </view>
-</view>"
-`;

src/packages/__VUE/pullrefresh/__tests__/infiniteloading.spec.ts

@@ -1,96 +0,0 @@
-import { config, mount } from '@vue/test-utils';
-import InfiniteLoading from '../index.vue';
-import NutIcon from '../../icon/index.vue';
-import { trigger, triggerDrag } from '../../../utils/test/event';
-import { nextTick, toRefs, reactive, ref, onMounted } from 'vue';
-
-function sleep(delay = 0): Promise<void> {
-  return new Promise((resolve) => {
-    setTimeout(resolve, delay);
-  });
-}
-
-beforeAll(() => {
-  config.global.components = {
-    NutIcon
-  };
-});
-
-afterAll(() => {
-  config.global.components = {};
-});
-
-test('pull base', async () => {
-  const wrapper = mount(InfiniteLoading, {
-    props: {
-      isOpenRefresh: true,
-      loadMoreTxt: '没有更多'
-    }
-  });
-  const track = wrapper.find('.nut-infiniteloading');
-  // pulling
-  trigger(track, 'touchstart', 0, 0);
-  trigger(track, 'touchmove', 0, 20);
-  expect(wrapper.html()).toMatchSnapshot();
-
-  // loading
-  trigger(track, 'touchend', 0, 100);
-  expect(wrapper.html()).toMatchSnapshot();
-
-  // still loading
-  triggerDrag(track, 0, 100);
-
-  expect(wrapper.emitted('refresh')).toBeTruthy();
-});
-
-test('infiniteloading base', async () => {
-  const wrapper = mount({
-    components: {
-      'nut-infiniteloading': InfiniteLoading,
-      'nut-icon': NutIcon
-    },
-    template: `
-    <nut-infiniteloading
-      :has-more="hasMore"
-      load-more-txt="没有啦～"
-      @load-more="loadMore">
-        <li class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{item}}</li>
-    </nut-infiniteloading>
-    `,
-    setup() {
-      const hasMore = ref(true);
-      const data = reactive({
-        defultList: []
-      });
-      const init = () => {
-        for (let i = 0; i < 10; i++) {
-          (data.defultList as any).push(i);
-        }
-      };
-      const loadMore = (done: any) => {
-        setTimeout(() => {
-          const curLen = data.defultList.length;
-          for (let i = curLen; i < curLen + 10; i++) {
-            (data.defultList as any).push(i);
-          }
-          if (data.defultList.length > 30) hasMore.value = false;
-          done();
-        }, 500);
-      };
-      onMounted(() => {
-        init();
-      });
-
-      return { ...toRefs(data), hasMore, loadMore };
-    }
-  });
-  const track = wrapper.find('.nut-infiniteloading');
-  await nextTick();
-  trigger(track, 'touchstart', 0, 0);
-  trigger(track, 'touchmove', 0, -100);
-  trigger(track, 'touchend', 0, -800);
-
-  triggerDrag(track, 0, -800);
-  await nextTick();
-  expect(wrapper.html()).toMatchSnapshot();
-});

src/packages/__VUE/pullrefresh/__tests__/pullrefresh.spec.ts

@@ -0,0 +1,103 @@
+import { config, mount } from '@vue/test-utils';
+import PullRefresh from '../index.vue';
+import NutIcon from '../../icon/index.vue';
+import { sleep, trigger, triggerDrag } from '../../../utils/unit';
+
+beforeAll(() => {
+  config.global.components = {
+    NutIcon
+  };
+});
+
+afterAll(() => {
+  config.global.components = {};
+});
+
+test('pull base', async () => {
+  const wrapper = mount(PullRefresh, {
+    props: {
+      modelValue: false
+    }
+  });
+
+  const track = wrapper.find('.nut-pullrefresh');
+
+  trigger(track, 'touchstart', 0, 0);
+  trigger(track, 'touchmove', 0, 20);
+
+  await sleep();
+  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('下拉刷新');
+
+  trigger(track, 'touchmove', 0, 60);
+
+  await sleep();
+  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('释放刷新');
+
+  trigger(track, 'touchend', 0, 100);
+  await sleep();
+  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('加载中...');
+
+  triggerDrag(track, 0, 100);
+  await sleep();
+  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('加载中...');
+
+  expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+  expect(wrapper.emitted('refresh')).toBeTruthy();
+});
+
+test('Custom loading text', async () => {
+  const wrapper = mount(PullRefresh, {
+    props: {
+      modelValue: false,
+      loosingTxt: '松开吧',
+      loadingTxt: '玩命加载中...',
+      pullingTxt: '用力拉'
+    }
+  });
+
+  const track = wrapper.find('.nut-pullrefresh');
+
+  trigger(track, 'touchstart', 0, 0);
+  trigger(track, 'touchmove', 0, 20);
+
+  await sleep();
+  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('用力拉');
+
+  trigger(track, 'touchmove', 0, 60);
+
+  await sleep();
+  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('松开吧');
+
+  trigger(track, 'touchend', 0, 100);
+  await sleep();
+  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('玩命加载中...');
+
+  triggerDrag(track, 0, 100);
+  await sleep();
+  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('玩命加载中...');
+
+  expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+  expect(wrapper.emitted('refresh')).toBeTruthy();
+});
+
+test('Should allow to custom pull distance', async () => {
+  const wrapper = mount(PullRefresh, {
+    props: {
+      modelValue: false,
+      pullDistance: 300
+    }
+  });
+
+  const track = wrapper.find('.nut-pullrefresh');
+
+  trigger(track, 'touchstart', 0, 0);
+  trigger(track, 'touchmove', 0, 100);
+
+  await sleep();
+  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('下拉刷新');
+
+  expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+  expect(wrapper.emitted('refresh')).toBeFalsy();
+
+  expect(wrapper.emitted('change')).toEqual([[{ distance: 100, status: 'pulling' }]]);
+});

src/packages/__VUE/pullrefresh/index.vue

@@ -209,8 +209,10 @@ export default create({
     watch(
       () => props.modelValue,
       (val) => {
+        console.log('监听', val);
         if (val) {
           setPullStatus(+props.headHeight, true);
+          nextTick(() => emit('refresh'));
         } else {
           setPullStatus(0);
         }

src/packages/__VUE/range/__test__/range.spec.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
-import { nextTick, reactive, toRefs } from 'vue';
+import { nextTick } from 'vue';
 import Range from '../index.vue';
-import { trigger, triggerDrag } from '../../../utils/test/event';
+import { trigger, triggerDrag } from '../../../utils/unit';
 
 test('should render range when used ', async () => {
   const wrapper = mount(Range, {

src/packages/utils/test/event.ts

@@ -1,61 +0,0 @@
-import Vue from 'vue';
-
-function getTouch(el: HTMLElement | Window, x: number, y: number) {
-  return {
-    identifier: Date.now(),
-    target: el,
-    pageX: x,
-    pageY: y,
-    clientX: x,
-    clientY: y,
-    radiusX: 2.5,
-    radiusY: 2.5,
-    rotationAngle: 10,
-    force: 0.5
-  };
-}
-
-// Trigger pointer/touch event
-export function trigger(wrapper: any, eventName: string, x = 0, y = 0, options: any = {}) {
-  const el = 'element' in wrapper ? wrapper.element : wrapper;
-  const touchList = options.touchList || [getTouch(el, x, y)];
-
-  if (options.x || options.y) {
-    touchList.push(getTouch(el, options.x, options.y));
-  }
-
-  const event = document.createEvent('CustomEvent');
-  event.initCustomEvent(eventName, true, true, {});
-
-  Object.assign(event, {
-    clientX: x,
-    clientY: y,
-    touches: touchList,
-    targetTouches: touchList,
-    changedTouches: touchList
-  });
-
-  el.dispatchEvent(event);
-}
-
-// simulate drag gesture
-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);
-}