VueJS: Unit test

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Setup

To perform unit test with Vue, you can use any test tool matching with build system base on module. However, we recomend you should using Karma. Karma has many plugins support Webpack and Browserify. To learn more about seting up Karma and these plugins, please see the ducument. You can also start by referencing examples about configuration for Webpack and Browserify.

Simple asserts

You do not need what special to do for component to test. You only need export base options:

<template>
  <span>{{ message }}</span>
</template>

<script>
  export default {
    data () {
      return {
        message: 'hello!'
      }
    },
    created () {
      this.message = 'bye!'
    }
  }
</script>

Then import Vue and component, so you could perform common assertions:

// Import Vue and component need test
import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'

// There are some test statements using Jasmine 2.0
// Ofcourse you can use any test libraries
// you want
describe('MyComponent', () => {
  // Checking options of component
  it('has a created hook', () => {
    expect(typeof MyComponent.created).toBe('function')
  })

  // Computing return value of function in option
  // of component
  it('sets the correct default data', () => {
    expect(typeof MyComponent.data).toBe('function')
    const defaultData = MyComponent.data()
    expect(defaultData.message).toBe('hello!')
  })

  // Checking component object when `mount`
  it('correctly sets the message when created', () => {
    const vm = new Vue(MyComponent).$mount()
    expect(vm.message).toBe('bye!')
  })

  // `mount` an object and testing render result
  it('renders the correct message', () => {
    const Constructor = Vue.extend(MyComponent)
    const vm = new Constructor().$mount()
    expect(vm.$el.textContent).toBe('bye!')
  })
})

Writing component can test

Result render of one component is decided most by props it received. If result render of component only depends on props, testing is very easy, it sames to testing return value of common function with deference parameters. Here is simple example:

<template>
  <p>{{ msg }}</p>
</template>

<script>
  export default {
    props: ['msg']
  }
</script>

You can test result render với deference props of this component by using propsData option:

import Vue from 'vue'
import MyComponent from './MyComponent.vue'

// helper function that mounts and returns the rendered text
function getRenderedText (Component, propsData) {
  const Constructor = Vue.extend(Component)
  const vm = new Constructor({ propsData: propsData }).$mount()
  return vm.$el.textContent
}

describe('MyComponent', () => {
  it('renders correctly with different props', () => {
    expect(getRenderedText(MyComponent, {
      msg: 'Hello'
    })).toBe('Hello')

    expect(getRenderedText(MyComponent, {
      msg: 'Bye'
    })).toBe('Bye')
  })
})

Async update with assert

Since Vue Do Vue perform async update withDOM, with changes on DOM because of changes state, you must perform assert in Vue.nextTick callback function:

// Checking HTML created after update state
it('updates the rendered message when vm.message updates', done => {
  const vm = new Vue(MyComponent).$mount()
  vm.message = 'foo'

  // waiting a "tick" after changing state
  // then executing assert updates on DOM
  Vue.nextTick(() => {
    expect(vm.$el.textContent).toBe('foo')
    done()
  })
})

We are planning perform a collection about tool/helper functions to support for rendering component with other conditions (e.x. no-deep rendering – shallow render, do not care subcomponent) and output assert is more easy.

For more information about unit test in Vue, see vue-test-utils and an article about unit testing Vue component trong cookbook.

» Tiếp: Quản lý trạng thái
« Trước: Single File Components
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!