Unit test trong Vuejs

Chào mừng các bạn đã đến với phần tiếp theo của series học vuejs của chúng mình. Trong phần này chúng ta sẽ tìm hiểu về Unit test trong Vuejs một phần cũng quan trọng quyết định ứng dụng làm bằng Vuejs của bạn có triển vọng hay không. Chúng ta cùng tìm hiểu nhé!

Unit test với Vue

Để thực hiện unit test với Vue, bạn có thể sử dụng bất kì công cụ kiểm thử nào tương thích với hệ thống xây dựng dựa trên module. Tuy nhiên Karma được khuyến khích sử dụng nhiều hơn cả. Karma có rất nhiều plugin, bao gồm các plugin cung cấp các tính năng hỗ trợ Webpack và Browserify. Để tìm hiểu thông tin cài đặt Karma và các plugin này, hãy xem các tài liệu tương ứng. Bạn cũng có thể bắt đầu bằng cách tham khảo các ví dụ về cấu hình dành cho Webpack và Browserify.

Các assert đơn giản

Bạn không cần phải làm gì đặc biệt để cho component có thể test được. Chỉ cần export các tùy chọn thô:

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


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

sau đó import Vue và component, thế là bạn đã có thể thực hiện các assertion thông dụng:

// Import Vue và component cần test
import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'


// Đây là một số lệnh test sử dụng Jasmine 2.0
// Tất nhiên bạn có thể sử dụng bất kì thư viện test nào
// bạn muốn
describe('MyComponent', () => {
  // Kiểm tra các tùy chọn của component 
  it('has a created hook', () => {
    expect(typeof MyComponent.created).toBe('function')
  })


  // Tính toán giá trị trả về của các hàm trong tùy chọn
  // của component
  it('sets the correct default data', () => {
    expect(typeof MyComponent.data).toBe('function')
    const defaultData = MyComponent.data()
    expect(defaultData.message).toBe('hello!')
  })


  // Kiểm tra đối tượng component khi `mount`
  it('correctly sets the message when created', () => {
    const vm = new Vue(MyComponent).$mount()
    expect(vm.message).toBe('bye!')
  })


  // `mount` một đối tượng và kiểm tra kết quả render
  it('renders the correct message', () => {
    const Constructor = Vue.extend(MyComponent)
    const vm = new Constructor().$mount()
    expect(vm.$el.textContent).toBe('bye!')
  })
})

Viết component có thể test được

Kết quả render của một component được quyết định phần lớn là bởi các props nó nhận được. Nếu kết quả render của component chỉ phụ thuộc vào props, việc test sẽ trở nên rất dễ dàng, tương tự như việc kiểm tra giá trị trả về của một hàm thuần (pure function) với các tham số khác nhau. Thử lấy một ví dụ đơn giản:

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


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

Bạn có thể kiểm tra kết quả render với các prop khác nhau của component này bằng cách sử dụng tùy chọn propsData:

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

Assert cập nhật không đồng bộ

Do Vue thực hiện cập nhật DOM một cách không đồng bộ, đối với các thay đổi trên DOM xảy ra do thay đổi state, bạn sẽ phải thực hiện assert trong hàm callback Vue.nextTick:

// Kiểm tra HTML được tạo ra sau khi cập nhật state
it('updates the rendered message when vm.message updates', done => {
  const vm = new Vue(MyComponent).$mount()
  vm.message = 'foo'
  // đợi một "tick" (tích tắc) sau khi state thay đổi
  // rồi mới thực hiện assert các cập nhật trên DOM
  Vue.nextTick(() => {
    expect(vm.$el.textContent).toBe('foo')
    done()
  })
})