diff --git a/packages/address-edit/test/index.spec.js b/packages/address-edit/test/index.spec.js index 3af9b867c..fb39e72a0 100644 --- a/packages/address-edit/test/index.spec.js +++ b/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(); }); diff --git a/packages/contact-card/test/index.spec.js b/packages/contact-card/test/index.spec.js index af34cbb07..7b4b5faf8 100644 --- a/packages/contact-card/test/index.spec.js +++ b/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(); }); }); diff --git a/packages/field/test/field.spec.js b/packages/field/test/field.spec.js index 2d40b2adf..e9d50dd1d 100644 --- a/packages/field/test/field.spec.js +++ b/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')); }); diff --git a/packages/image-preview/test/index.spec.js b/packages/image-preview/test/index.spec.js index 2a1318306..c2bc347dd 100644 --- a/packages/image-preview/test/index.spec.js +++ b/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(); }); diff --git a/packages/list/test/index.spec.js b/packages/list/test/index.spec.js index 62cee2c6b..3d3cec470 100644 --- a/packages/list/test/index.spec.js +++ b/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: ` `, - props: ['show'], - components: { List } - }, { - propsData: { - show: true + props: ['show'], + components: { List } + }, + { + propsData: { + show: true + } } - }); + ); expect(wrapper.vm.$el).toBeTruthy(); wrapper.vm.show = false; diff --git a/packages/swipe/test/index.spec.js b/packages/swipe/test/index.spec.js index 608b30195..79001d1fb 100644 --- a/packages/swipe/test/index.spec.js +++ b/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', () => { diff --git a/packages/toast/test/index.spec.js b/packages/toast/test/index.spec.js index 5e89a2387..63e96f41e 100644 --- a/packages/toast/test/index.spec.js +++ b/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', () => { diff --git a/packages/uploader/test/index.spec.js b/packages/uploader/test/index.spec.js index 15358e9b0..c25a26ffe 100644 --- a/packages/uploader/test/index.spec.js +++ b/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(); }); diff --git a/packages/utils/test/index.spec.js b/packages/utils/test/index.spec.js index 484640355..51b75229b 100644 --- a/packages/utils/test/index.spec.js +++ b/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); }); diff --git a/test/utils.js b/test/utils.js index b79b2fd43..08432cf63 100644 --- a/test/utils.js +++ b/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); +}