[Test] optimize async cases (#1232)

packages/address-edit/test/index.spec.js

@@ -1,12 +1,12 @@
 /* eslint-disable camelcase */
-import Vue from 'vue';
-import { mount, TransitionStub } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { renderToString } from '@vue/server-test-utils';
 import AddressEdit from '../';
 import AddressDetail from '../Detail';
 import areaList from '../../area/demo/area.simple';
+import { later, transitionStub } from '../../../test/utils';
 
-Vue.component('transition', TransitionStub);
+transitionStub();
 
 const addressInfo = {
   name: '测试',
@@ -207,7 +207,7 @@ test('watch address info', () => {
   expect(wrapper.vm.data.name).toEqual('123');
 });
 
-test('set/get area code', done => {
+test('set/get area code', async() => {
   const wrapper = mount(AddressEdit, {
     propsData: { areaList }
   });
@@ -219,22 +219,21 @@ test('set/get area code', done => {
   ]);
 
   wrapper.vm.setAreaCode('110101');
-  setTimeout(() => {
-    expect(wrapper.vm.data.area_code).toEqual('110101');
-    expect(wrapper.vm.getArea()).toEqual([
-      { code: '110000', name: '北京市' },
-      { code: '110100', name: '北京市' },
-      { code: '110101', name: '东城区' }
-    ]);
 
-    wrapper.vm.$refs = [];
-    wrapper.vm.setAreaCode('110102');
-    expect(wrapper.vm.getArea()).toEqual([]);
-    done();
-  }, 50);
+  await later(50);
+  expect(wrapper.vm.data.area_code).toEqual('110101');
+  expect(wrapper.vm.getArea()).toEqual([
+    { code: '110000', name: '北京市' },
+    { code: '110100', name: '北京市' },
+    { code: '110101', name: '东城区' }
+  ]);
+
+  wrapper.vm.$refs = [];
+  wrapper.vm.setAreaCode('110102');
+  expect(wrapper.vm.getArea()).toEqual([]);
 });
 
-test('watch area code', done => {
+test('watch area code', async() => {
   const wrapper = mount(AddressEdit, {
     propsData: {
       addressInfo: {
@@ -246,13 +245,11 @@ test('watch area code', done => {
   expect(wrapper.vm.data.city).toEqual('');
   wrapper.vm.areaList = areaList;
 
-  setTimeout(() => {
-    expect(wrapper.vm.data.city).toEqual('北京市');
-    done();
-  }, 50);
+  await later(50);
+  expect(wrapper.vm.data.city).toEqual('北京市');
 });
 
-test('show search result', done => {
+test('show search result', async() => {
   const wrapper = mount(AddressEdit, {
     propsData: {
       showSearchResult: true,
@@ -277,12 +274,11 @@ test('show search result', done => {
   expect(input.value).toEqual('address2');
 
   field.trigger('blur');
-  setTimeout(() => {
-    done();
-  }, 150);
+  await later(150);
+  expect(wrapper.vm.detailFocused).toBeFalsy();
 });
 
-test('delete address', done => {
+test('delete address', async() => {
   const wrapper = mount(AddressEdit, {
     attachToDocument: true,
     propsData: {
@@ -298,9 +294,7 @@ test('delete address', done => {
   deleteButton.trigger('click');
   document.querySelector('.van-dialog__confirm').click();
 
-  setTimeout(() => {
-    expect(wrapper.emitted('delete')).toBeTruthy();
-    expect(wrapper.emitted('cancel-delete')).toBeTruthy();
-    done();
-  });
+  await later();
+  expect(wrapper.emitted('delete')).toBeTruthy();
+  expect(wrapper.emitted('cancel-delete')).toBeTruthy();
 });

packages/contact-card/test/index.spec.js

@@ -2,6 +2,7 @@ import ContactCard from '..';
 import ContactList from '../../contact-list';
 import ContactEdit from '../../contact-edit';
 import { mount } from '@vue/test-utils';
+import { later } from '../../../test/utils';
 
 const contactInfo = {
   name: 'test',
@@ -93,7 +94,7 @@ describe('ContactEdit', () => {
     expect(wrapper.vm.data.name).toEqual('123');
   });
 
-  test('delete contact', done => {
+  test('delete contact', async() => {
     const wrapper = mount(ContactEdit, {
       propsData: {
         isEdit: true
@@ -104,9 +105,7 @@ describe('ContactEdit', () => {
     deleteButton.trigger('click');
     document.querySelector('.van-dialog__confirm').click();
 
-    setTimeout(() => {
-      expect(wrapper.emitted('delete')).toBeTruthy();
-      done();
-    });
+    await later();
+    expect(wrapper.emitted('delete')).toBeTruthy();
   });
 });

packages/field/test/field.spec.js

@@ -1,5 +1,6 @@
 import Field from '../';
 import { mount } from '@vue/test-utils';
+import { later } from '../../../test/utils';
 
 test('input event', () => {
   const wrapper = mount(Field);
@@ -55,17 +56,16 @@ test('keypress event', () => {
   expect(calls.length).toBe(2);
 });
 
-test('render textarea', done => {
+test('render textarea', async() => {
   const wrapper = mount(Field, {
     propsData: {
       type: 'textarea',
       autosize: true
     }
   });
-  setTimeout(() => {
-    expect(wrapper).toMatchSnapshot();
-    done();
-  });
+
+  await later();
+  expect(wrapper).toMatchSnapshot();
 });
 
 test('autosize textarea field', () => {
@@ -83,7 +83,7 @@ test('autosize textarea field', () => {
   expect(textarea.element.value).toEqual(value);
 });
 
-test('autosize object', done => {
+test('autosize object', async() => {
   const wrapper = mount(Field, {
     propsData: {
       type: 'textarea',
@@ -95,8 +95,7 @@ test('autosize object', done => {
   });
 
   const textarea = wrapper.find('.van-field__control');
-  setTimeout(() => {
-    expect(textarea.element.style.height).toEqual(('50px'));
-    done();
-  });
+
+  await later();
+  expect(textarea.element.style.height).toEqual(('50px'));
 });

packages/image-preview/test/index.spec.js

@@ -43,5 +43,5 @@ test('function call', (done) => {
 
 test('register component', () => {
   Vue.use(ImagePreview);
-  expect(Vue.component('van-image-preview')).toBeTruthy();
+  expect(Vue.component(ImagePreviewVue.name)).toBeTruthy();
 });

packages/list/test/index.spec.js

@@ -1,75 +1,71 @@
 import List from '..';
 import { mount } from '@vue/test-utils';
+import { later } from '../../../test/utils';
 
-test('load event', done => {
+test('load event', async() => {
   const wrapper = mount(List);
 
   wrapper.vm.$on('input', value => {
     wrapper.vm.loading = value;
   });
 
-  setTimeout(() => {
-    expect(wrapper.emitted('load')).toBeTruthy();
-    expect(wrapper.emitted('input')).toBeTruthy();
+  await later();
+  expect(wrapper.emitted('load')).toBeTruthy();
+  expect(wrapper.emitted('input')).toBeTruthy();
 
-    wrapper.vm.loading = false;
+  wrapper.vm.loading = false;
 
-    setTimeout(() => {
-      expect(wrapper.emitted('input')[1]).toBeTruthy();
-      wrapper.destroy();
-      done();
-    });
-  });
+  await later();
+  expect(wrapper.emitted('input')[1]).toBeTruthy();
+  wrapper.destroy();
 });
 
-test('finished', done => {
+test('finished', async() => {
   const wrapper = mount(List, {
     propsData: {
       finished: true
     }
   });
 
-  setTimeout(() => {
-    expect(wrapper.emitted('load')).toBeFalsy();
-    expect(wrapper.emitted('input')).toBeFalsy();
-    wrapper.vm.finished = false;
+  await later();
+  expect(wrapper.emitted('load')).toBeFalsy();
+  expect(wrapper.emitted('input')).toBeFalsy();
+  wrapper.vm.finished = false;
 
-    setTimeout(() => {
-      expect(wrapper.emitted('load')).toBeTruthy();
-      expect(wrapper.emitted('input')).toBeTruthy();
-      done();
-    });
-  });
+  await later();
+  expect(wrapper.emitted('load')).toBeTruthy();
+  expect(wrapper.emitted('input')).toBeTruthy();
 });
 
-test('immediate check false', done => {
+test('immediate check false', async() => {
   const wrapper = mount(List, {
     propsData: {
       immediateCheck: false
     }
   });
 
-  setTimeout(() => {
-    expect(wrapper.emitted('load')).toBeFalsy();
-    expect(wrapper.emitted('input')).toBeFalsy();
-    done();
-  });
+  await later();
+  expect(wrapper.emitted('load')).toBeFalsy();
+  expect(wrapper.emitted('input')).toBeFalsy();
 });
 
 test('keey-alive live cycle', () => {
-  const wrapper = mount({
-    template: `
+  const wrapper = mount(
+    {
+      template: `
       <keep-alive>
         <list v-if="show" />
       </keep-alive>
     `,
-    props: ['show'],
-    components: { List }
-  }, {
-    propsData: {
-      show: true
+      props: ['show'],
+      components: { List }
+    },
+    {
+      propsData: {
+        show: true
+      }
     }
-  });
+  );
 
   expect(wrapper.vm.$el).toBeTruthy();
   wrapper.vm.show = false;

packages/swipe/test/index.spec.js

@@ -1,7 +1,7 @@
 import Swipe from '..';
 import SwipeItem from '../../swipe-item';
 import { mount } from '@vue/test-utils';
-import { triggerDrag } from '../../../test/utils';
+import { triggerDrag, later } from '../../../test/utils';
 
 const Component = {
   template: `
@@ -44,7 +44,7 @@ const Component = {
   }
 };
 
-test('autoplay', done => {
+test('autoplay', async() => {
   const wrapper = mount(Component, {
     propsData: {
       autoplay: 20
@@ -52,32 +52,26 @@ test('autoplay', done => {
   });
   const { swipe } = wrapper.vm.$refs;
 
-  setTimeout(() => {
-    expect(swipe.active).toEqual(1);
-    wrapper.setData({ autoplay: 0 });
+  await later(60);
+  expect(swipe.active).toEqual(1);
+  wrapper.setData({ autoplay: 0 });
 
-    setTimeout(() => {
-      expect(swipe.active).toEqual(1);
-      wrapper.setData({ autoplay: 20 });
+  await later(60);
+  expect(swipe.active).toEqual(1);
+  wrapper.setData({ autoplay: 20 });
 
-      setTimeout(() => {
-        expect(swipe.active).toEqual(2);
-        wrapper.destroy();
-        done();
-      }, 60);
-    }, 60);
-  }, 60);
+  await later(60);
+  expect(swipe.active).toEqual(2);
+  wrapper.destroy();
 });
 
-test('swipeTo', done => {
+test('swipeTo', async() => {
   const wrapper = mount(Component);
   const { swipe } = wrapper.vm.$refs;
   swipe.swipeTo(2);
 
-  setTimeout(() => {
-    expect(swipe.active).toEqual(2);
-    done();
-  }, 30);
+  await later(30);
+  expect(swipe.active).toEqual(2);
 });
 
 test('initial swipe', () => {

packages/toast/test/index.spec.js

@@ -1,34 +1,30 @@
 import Toast from '../';
-import Vue from 'vue';
-import { TransitionStub } from '@vue/test-utils';
+import { transitionStub, later } from '../../../test/utils';
 
-Vue.component('transition', TransitionStub);
+transitionStub();
 
-test('create a forbidClick toast', done => {
+test('create a forbidClick toast', async() => {
   const toast = Toast({
     forbidClick: true
   });
 
   expect(toast.$el.outerHTML).toMatchSnapshot();
-  setTimeout(() => {
-    expect(document.body.classList.contains('van-toast--unclickable')).toBeTruthy();
-    toast.forbidClick = false;
-    setTimeout(() => {
-      expect(document.body.classList.contains('van-toast--unclickable')).toBeFalsy();
-      done();
-    });
-  });
+
+  await later();
+  expect(document.body.classList.contains('van-toast--unclickable')).toBeTruthy();
+  toast.forbidClick = false;
+
+  await later();
+  expect(document.body.classList.contains('van-toast--unclickable')).toBeFalsy();
 });
 
-it('toast disappeared after duration', (done) => {
+it('toast disappeared after duration', async() => {
   const toast = Toast({
     duration: 10
   });
 
-  setTimeout(() => {
-    expect(toast.$el.style.display).toEqual('none');
-    done();
-  }, 50);
+  await later(50);
+  expect(toast.$el.style.display).toEqual('none');
 });
 
 test('clear toast', () => {

packages/uploader/test/index.spec.js

@@ -1,5 +1,6 @@
 import Uploader from '..';
 import { mount } from '@vue/test-utils';
+import { later } from '../../../test/utils';
 
 window.File = function() {
   this.size = 10000;
@@ -72,7 +73,7 @@ it('before read return false', () => {
   expect(afterRead.mock.calls.length).toBeFalsy();
 });
 
-test('file size overlimit', done => {
+test('file size overlimit', async() => {
   const wrapper = mount(Uploader, {
     propsData: {
       maxSize: 1
@@ -81,15 +82,13 @@ test('file size overlimit', done => {
   wrapper.vm.onChange(file);
   wrapper.vm.onChange(multiFile);
 
-  setTimeout(() => {
-    expect(wrapper.emitted('oversize')[0]).toBeTruthy();
-    expect(wrapper.emitted('oversize')[1]).toBeTruthy();
+  await later();
+  expect(wrapper.emitted('oversize')[0]).toBeTruthy();
+  expect(wrapper.emitted('oversize')[1]).toBeTruthy();
 
-    wrapper.vm.maxSize = 100000;
-    wrapper.vm.onChange(multiFile);
-    setTimeout(() => {
-      expect(wrapper.emitted('oversize')[2]).toBeFalsy();
-      done();
-    });
-  });
+  wrapper.vm.maxSize = 100000;
+  wrapper.vm.onChange(multiFile);
+
+  await later();
+  expect(wrapper.emitted('oversize')[2]).toBeFalsy();
 });

packages/utils/test/index.spec.js

@@ -1,6 +1,7 @@
 import deepClone from '../deep-clone';
 import { isAndroid, isDef, camelize, get } from '..';
 import { raf, cancel } from '../raf';
+import { later } from '../../../test/utils';
 
 test('deepClone', () => {
   const a = { foo: 0 };
@@ -43,13 +44,11 @@ test('isAndroid', () => {
   expect(isAndroid()).toBeFalsy();
 });
 
-test('raf', (done) => {
+test('raf', async() => {
   const spy = jest.fn();
   raf(spy);
 
-  setTimeout(() => {
-    expect(spy.mock.calls.length).toBe(1);
-    cancel(1);
-    done();
-  }, 50);
+  await later(50);
+  expect(spy.mock.calls.length).toBe(1);
+  cancel(1);
 });

test/utils.js

@@ -1,3 +1,6 @@
+import Vue from 'vue';
+import { TransitionStub } from '@vue/test-utils';
+
 // Trigger pointer/touch event
 export function trigger(wrapper, eventName, x = 0, y = 0) {
   const el = wrapper.element ? wrapper.element : wrapper;
@@ -34,3 +37,14 @@ export function triggerDrag(el, x = 0, y = 0) {
   trigger(el, 'touchmove', x, y);
   trigger(el, 'touchend', x, y);
 }
+
+// promisify setTimeout
+export function later(delay) {
+  return new Promise(function(resolve) {
+    setTimeout(resolve, delay);
+  });
+}
+
+export function transitionStub() {
+  Vue.component('transition', TransitionStub);
+}