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)
    })
  })
})