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

  • 681