Asynchronous test in Vue.js
Why?
What would you test ?
Function togglePopin
Function of validation
Attribute is-popin-opened
import { expect } from 'chai'
import BusinessCard from './business-card.vue'
describe('[Component] BusinessCard', () => {
const defaultProps = {/*component props*/}
const BusinessCardContructor = Vue.extend(BusinessCard)
const vm = new BusinessCardContructor({ data: defaultProps }).$mount()
describe('[Method] togglePopin', () => {
it('should open the popin if it was closed', () => {
...
})
it('should close the popin if it was opened', () => {
...
})
})
})
Tests Boiler Plate
Let's find it in the doc !
https://jsbin.com/modigutimu/edit?js,output
To your keyboards !
S
it('should open the popin if it was closed', (done) => {
vm.isPopinOpened = false
vm.togglePopin()
Vue.nextTick(function () {
expect(vm.isPopinOpened).to.equal(true)
done()
})
})
it('should close the popin if it was opened', (done) => {
vm.isPopinOpened = true
vm.togglePopin()
Vue.nextTick(function () {
expect(vm.isPopinOpened).to.equal(false)
done()
})
})
With the NextTick Callback
it('should open the popin if it was closed', (done) => {
vm.isPopinOpened = false
vm.togglePopin()
Vue.nextTick(function () {
try {
expect(vm.isPopinOpened).to.equal(true)
} catch (error) {
return done(error)
}
return done()
})
})
it('should close the popin if it was opened', (done) => {
vm.isPopinOpened = true
vm.togglePopin()
Vue.nextTick(function () {
try {
expect(vm.isPopinOpened).to.equal(false)
} catch (error) {
return done(error)
}
return done()
})
})
const nextTick = () => {
return new Promise((resolve) => {
return Vue.nextTick(() => {
resolve()
})
})
}
it('should open the popin if it was closed', () => {
vm.isPopinOpened = false
vm.togglePopin()
return nextTick().then(() => expect(vm.isPopinOpened).to.equal(true))
})
it('should close the popin if it was opened', () => {
vm.isPopinOpened = true
vm.togglePopin()
return nextTick().then(() => expect(vm.isPopinOpened).to.equal(false))
})
With Promises
Asynchronous test
By Gabriel Andrin
Asynchronous test
- 691