Linh kiện có đạo cụ

Tram Ho

Thiết lập props với propsData

propsData có thể sử dụng với cả mountshallowMount. Nó thường được sử dụng để kiểm tra các components được nhận props từ component cha của nó.

propsData được truyền đối số thứ 2 của một trong hai shallowMount hoặc mount dưới dạng sau:

Tạo component mẫu

Tạo một component <SubmitButton> đơn giản có hai props: msgisAdmin. Tùy thuộc vào giá trị của isAdmin, component này sẽ chứa một <span> trong hai trạng thái:

  • Not Authorized nếu isAdmin là false (hoặc không được thông qua dưới dạng prop)
  • Admin Privileges nếu isAdmin là true

Tạo kiểm thử đầu tiên

Chúng ta sẽ đưa ra khẳng định về thông báo trong trường hợp người dùng không có quyền quản trị admin.

Chạy test với yarn test:unit. Kết quả chúng ta nhận được:

Kết quả của console.log(wrapper.html()) cũng được in ra:

Chúng ta có thể thấy msg prop được xử lý và markup chính xác những gì được hiển thị.

Tạo thử nghiệm thứ hai

Chúng ta sẽ kiểm tra trạng thái khi isAdmintrue:

Chạy test với yarn test:unit và kiểm tra kết quả:

Chúng ta cũng có markup với console.log(wrapper.html()):

Có thể thấy prop isAdmin được sử dụng để render phần tử <span> một cách chính xác.

Refactoring lại các tests

Chúng ta sẽ refactor lại các bài tests tuân thủ nguyên tắc “Don’t Repeat Yourself” (DRY). Vì tất cả các bài test đều pass, chúng ta có thể tự tin để tái refactor lại chúng. Miễn là tất cả các bài tests vẫn có thể pass sau khi refactor, hãy chắc chắn rằng là không phá vỡ bất cứ điều gì.

Refactor với Factory Function

Trong cả hai bài tests, chúng ta gọi shallowMount sau đó sử dụng đối tượng propsData lặp đi lặp lại. Chúng ta có thể refactor lại bằng cách sử dụng một factory function. Một factory function là một hàm trả về một đối tượng – nó tạo ra các đối tượng, do đó có tên là “factory” function.

Trên đây là một function nó sẽ shallowMount một SubmitButton component. Chúng ta có thể pass bất cứ props nào để thay đổi đối số đầu tiên factory. Hãy DRY những test cùng với factory function.

Chạy thử nghiệm lần nữa. Mọi thứ để pass dễ dàng.

Kết luận

  • Bằng các pass propData khi gắn mounting một component, bạn có thể set các props được sử dụng trong kiểm thử.
  • Factory functions có thể sử dụng để DRY các tests của bạn
  • Thay vì sử dụng propsData, chúng ta cũng có thể sử dụng setProps để set giá trị props trong quá trình kiểm thử.

Reference

Dịch từ: https://lmiller1990.github.io/vue-testing-handbook/components-with-props.html#setting-props-with-propsdata

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo