Vue.js/test/unit/features/directives/if.spec.js

import Vue from 'vue'

describe('Directive v-if', () => {
  it('should check if value is truthy', () => {
    const vm = new Vue({
      el: '#app',
      template: '<div><span v-if="foo">hello</span></div>',
      data: {foo: true}
    })
    expect(vm.$el.innerHTML).toBe('<span>hello</span>')
  })

  it('should check if value is falthy', () => {
    const vm = new Vue({
      el: '#app',
      template: '<div><span v-if="foo">hello</span></div>',
      data: {foo: false}
    })
    expect(vm.$el.innerHTML).toBe('')
  })

  it('should update if value changed', (done) => {
    const vm = new Vue({
      el: '#app',
      template: '<div><span v-if="foo">hello</span></div>',
      data: {foo: true}
    })
    expect(vm.$el.innerHTML).toBe('<span>hello</span>')
    vm.foo = false
    setTimeout(() => {
      new Promise((res, rej) => {
        expect(vm.$el.innerHTML).toBe('')
        vm.foo = {}
        res()
      }).then(() => {
        expect(vm.$el.innerHTML).toBe('<span>hello</span>')
        vm.foo = 0
      }).then(() => {
        expect(vm.$el.innerHTML).toBe('')
        vm.foo = []
      }).then(() => {
        expect(vm.$el.innerHTML).toBe('<span>hello</span>')
        vm.foo = null
      }).then(() => {
        expect(vm.$el.innerHTML).toBe('')
        vm.foo = '0'
      }).then(() => {
        expect(vm.$el.innerHTML).toBe('<span>hello</span>')
        vm.foo = undefined
      }).then(() => {
        expect(vm.$el.innerHTML).toBe('')
        vm.foo = 1
      }).then(() => {
        expect(vm.$el.innerHTML).toBe('<span>hello</span>')
        done()
      }).catch(done)
    })
  })

  it('should work well with v-else', (done) => {
    const vm = new Vue({
      el: '#app',
      template: '<div><span v-if="foo">hello</span><span v-else>bye</span></div>',
      data: {foo: true}
    })
    expect(vm.$el.innerHTML).toBe('<span>hello</span>')
    vm.foo = false
    setTimeout(() => {
      new Promise((res, rej) => {
        expect(vm.$el.innerHTML).toBe('<span>bye</span>')
        vm.foo = {}
        res()
      }).then(() => {
        expect(vm.$el.innerHTML).toBe('<span>hello</span>')
        vm.foo = 0
      }).then(() => {
        expect(vm.$el.innerHTML).toBe('<span>bye</span>')
        vm.foo = []
      }).then(() => {
        expect(vm.$el.innerHTML).toBe('<span>hello</span>')
        vm.foo = null
      }).then(() => {
        expect(vm.$el.innerHTML).toBe('<span>bye</span>')
        vm.foo = '0'
      }).then(() => {
        expect(vm.$el.innerHTML).toBe('<span>hello</span>')
        vm.foo = undefined
      }).then(() => {
        expect(vm.$el.innerHTML).toBe('<span>bye</span>')
        vm.foo = 1
      }).then(() => {
        expect(vm.$el.innerHTML).toBe('<span>hello</span>')
        done()
      }).catch(done)
    })
  })

  it('should work well with v-for', (done) => {
    const vm = new Vue({
      el: '#app',
      template: '<div><span v-for="item,i in list" v-if="item.value">{{i}}</span></div>',
      data: {list: [{value: true}, {value: false}, {value: true}]}
    })
    expect(vm.$el.innerHTML).toBe('<span>0</span><span>2</span>')
    vm.list[0].value = false
    setTimeout(() => {
      new Promise((res, rej) => {
        expect(vm.$el.innerHTML).toBe('<span>2</span>')
        vm.list.push({value: true})
        res()
      }).then(() => {
        expect(vm.$el.innerHTML).toBe('<span>2</span><span>3</span>')
        vm.list.splice(1, 2)
      }).then(() => {
        expect(vm.$el.innerHTML).toBe('<span>1</span>')
        done()
      }).catch(done)
    })
  })

  it('should work well with v-for and v-else', (done) => {
    const vm = new Vue({
      el: '#app',
      template: '<div><span v-for="item,i in list" v-if="item.value">hello</span><span v-else>bye</span></div>',
      data: {list: [{value: true}, {value: false}, {value: true}]}
    })
    expect(vm.$el.innerHTML).toBe('<span>hello</span><span>bye</span><span>hello</span>')
    vm.list[0].value = false
    setTimeout(() => {
      new Promise((res, rej) => {
        expect(vm.$el.innerHTML).toBe('<span>bye</span><span>bye</span><span>hello</span>')
        vm.list.push({value: true})
        res()
      }).then(() => {
        expect(vm.$el.innerHTML).toBe('<span>bye</span><span>bye</span><span>hello</span><span>hello</span>')
        vm.list.splice(1, 2)
      }).then(() => {
        expect(vm.$el.innerHTML).toBe('<span>bye</span><span>hello</span>')
        done()
      }).catch(done)
    })
  })
})