Unit testing các component Vue.js bằng các tool Vue testing và Jest (P3): Test các Style and cấu trúc của các Vue.js Component trong Jest

Phần 1: Viết Vue.js Component Unit Test với Jest

Phần 2: Test Vue.js Components deep render trong Jest

vue-test-utils đem đến cho chúng ta một bộ tính năng để xác định các Vue.js component.

Đến hiện tại, các test chúng ta thực hiện đều qua Jest Snapshots. Nó rất tốt, nhưng đôi khi chúng ta cần xác định cái gì đó cụ thể hơn.

Mặc dù bạn có thể access vào một ví dụ của Vue qua cmp.vm, bạn vẫn có một bộ tính năng tùy ý sử dụng để làm nó nhanh hơn. Hãy xem xem chúng ta có thể làm gì.

Wrapper object

Wrapper là một object chính trong vue-test-utils. Đây là một type trả về của các function mount, shallow, find và findAll. Bạn có tham khảo dây đủ API và typing tại đây.

find và findAll

Chúng đều nhận Selector như một argument, vừa là một CSS selector, vừa là một Vue Component.

Chúng ta có thể làm một số việc như thế này:

  let cmp = mount(MessageList)
  expect(cmp.find('.message').element).toBeInstanceOf(HTMLElement)

  // Or even call it multiple times
  let el = cmp.find('.message').find('span').element

  // Although for the previous example, we could do it in one
  let el = cmp.find('.message span').element

Xác thực Structure và Style

Hãy thực hiện thêm test trong MessageList.test.js:

it('is a MessageList component', () => {
  expect(cmp.is(MessageList)).toBe(true)

  // Or with CSS selector
  expect(cmp.is('ul')).toBe(true)
})

it('contains a Message component', () => {
  expect(cmp.contains(Message)).toBe(true)

  // Or with CSS selector
  expect(cmp.contains('.message')).toBe(true)
})

Ở đây chúng ta dùng is để xác thực loại component, và dùng contains để check xem có xuất hiện sub-component hay không. Tương tự như find chúng nhận một Selector, bất kể là CSS Selector hay Component.

Chúng ta có các utils để xác nhận (assert) Vue instance:

it('Both MessageList and Message are vue instances', () => {
  expect(cmp.isVueInstance()).toBe(true)
  expect(cmp.find(Message).isVueInstance()).toBe(true)
})

Bây giờ chúng ta sẽ xác nhận Structure một cách chi tiết:

it('Message element exists', () => {
  expect(cmp.find('.message').exists()).toBe(true)
})

it('Message is not empty', () => {
  expect(cmp.find(Message).isEmpty()).toBe(false)
})

it('Message has a class attribute set to "message"', () => {
  // For asserting "class", the `hasClass` method is easier
  expect(cmp.find(Message).hasAttribute('class', 'message')).toBe(true)
})

exists, isEmpty và hasAttribute rất thích hợp cho phần này.

Sau đó, chúng ta dùng hasClass và hasStyle để xác nhận Styling. Update component Message.vue với một style, vì hasStyle chỉ nhận style inline:

<li style="margin-top: 10px" class="message">{{message}}</li>

Test như sau:

it('Message component has the .message class', () => {
  expect(cmp.find(Message).hasClass('message')).toBe(true)
})

it('Message component has style padding-top: 10', () => {
  expect(cmp.find(Message).hasStyle('padding-top', '10')).toBe(true)
})

Phương thức get

Như đã nói, chúng ta có các util rất hữu ích để assert các component Vue. Hầu hết dùng form hasX, nhưng có một getX có thể đem đến trải nghiệm test tuyệt vời hơn về tính linh hoạt và dễ debug. Vì thế bạn có thể rewrite như ví dụ dưới đây:

// `has` form
expect(cmp.find(Message).hasAttribute('class', 'message')).toBe(true)

// `get` form
expect(cmp.find(Message).getAttribute('class')).toBe('message')

Kết luận

Có rất nhiều util giúp cho việc test Vue component đơn giản hơn nhiều. Bạn có thể tìm đầy đủ trong các file typing ở đây.

Code ví dụ trên trong repo này.

TopDev via alexjoverm.github.io