Tiếp theo Phần 2: Unit Test ở Front End với Karma của loạt bài viết về Front End, phần 3 của loạt bài viết sẽ giới thiệu về Code coverage với Istanbul.

Trong phần trước chúng ta đã nói chuyện về Unit Test (UT), các khái niệm, kinh nghiệm và cách cài đặt để chạy Unit Test. Tuy nhiên làm sao chúng ta biết được UT của chúng ta viết ra đã đạt tiêu chuẩn chưa? UT đã bao phủ hết những trường hợp cần thiết chưa? Làm sao các trưởng nhóm, trưởng dự án biết bạn đã viết tốt hay không?… và rất nhiều câu hỏi khác.

Để trả lời những câu hỏi đó, chúng ta phải có một tiêu chuẩn để đánh giá, một cách để report tự động những gì quá trình UT đã làm. Đó chính là Code coverage.

Các khái niệm về code coverage

  • Statements: là tiêu chuẩn đánh giá các câu lệnh được/không được phủ (được gọi) bởi code Unit Test.
  • Branches: là tiêu chuẩn đánh giá các nhánh điều kiện được/không được phủ (được gọi) bởi code Unit Test.
  • Functions: là tiêu chuẩn đánh giá các hàm được/không được phủ (được gọi) bởi code Unit Test.
  • Lines: là tiêu chuẩn đánh giá số dòng code được/không được phủ (được gọi) bởi code Unit Test.

Bạn xem hình sau:

Ở dòng đầu tiên của report này là kết quả cho cả package bạn đang chọn:

Ở các dòng tiếp theo là kết quả cho từng file/class đã được test:

Ý nghĩa màu report:

  • Xanh lá cây: nghĩa là thông số được report đạt tiêu chuẩn đặt ra.
  • Vàng: nghĩa là thông số được report chưa được tốt lắm, cần chú ý.
  • Đỏ: tốt nhất bạn đi fix đi, nó là FAILED.

Ý nghĩa các con số:

  • Statements 62.5% – 10/16: nghĩa là trong class được test có 16 câu lệnh nhưng chỉ có 10 câu lệnh được test, còn 6 câu lệnh chưa được code UT chạy qua.
  • Branches 38.46% – 5/13: nghĩa là trong code của bạn có 13 nhánh điều kiện nhưng chi có 5 nhánh được code UT chạy qua.
  • Functions 50% – 1/2: nghĩa là trong code của bạn có 2 functions nhưng chi có 1 function được code UT chạy qua.
  • Lines 64.29% – 9/14: nghĩa là trong code của bạn có 14 dòng lệnh nhưng chỉ có 9 dòng lệnh được code UT chạy qua.

Làm sao để tính các con số này từ source code?

Đây là câu hỏi khó cho dân Dev, bởi vì nó không đơn giản là nhìn vào các dòng code, điều kiện if else, code block để đưa ra các con số, nó phức tạp hơn các bạn nghĩ.

Nếu bạn thực sự muốn biết chi tiết, bạn có thể đọc các tài liệu liên quan đến kỹ thuật testing, kiểm thử. Ví dụ:

Report code coverage tốt có nghĩa là chất lượng tốt?

Nếu bạn nhìn vào bảng report trên thì bạn nghĩ rằng cứ con số 100% là tốt? chưa hẳn như vậy, bạn xem các ví dụ sau nhé:

Ví dụ 1: Statements vs Lines

Kết quả chạy UT của ví dụ này sẽ là:

  • Statements màu Xanh với 88.33% – 5/6 câu lệnh được phủ, tuy nhiên bạn nhìn kỹ hơn ở code UT, bạn truyền vào giá trị yearOld là 20, có nghĩa là câu lệnh if chỉ được thực hiện ở về đầu, vế else phía sau chưa được kiểm thử. Nên code UT và kết quả này chưa tốt.
  • Lines Xanh với 100% – 4/4 dòng được phủ kín, nhìn vào kết quả này thì có câu nói nổi tiếng trong nghề Dev “Có Thánh mới biết bạn làm gì”, không ai đủ thời gian để đi đọc từng câu lệnh của bạn đã viết để phát hiện ra là con số 100% đó chưa đủ tốt.
  • May thay trong kết quả này có thông số Branches 50%, nó sẽ bắt được trường hợp này cho bạn để bạn sửa lại.

Ví dụ 2: 100%

Ở ví dụ này chạy 2 test cases, với độ dài của tên là chẵn và lẻ để phủ kín toàn bộ code chính, report của ví dụ này chắc chắn 100% toàn bộ thông số

Nhưng bạn biết code này chết ở đâu không?

Một ngày, đầu vào của hàm đó với tham số là userName = null. Ứng dụng của bạn sẽ phát sinh lỗi; và nếu may mắn thì ứng dụng của bạn vẫn tiếp tục chạy, nếu không may mắn thì ứng dụng dừng hoạt động.

Vậy viết như thế nào cho tốt?

Theo kinh nghiệm của tác giả, một UT tốt cần đảm bảo 2 yếu tố:

  1. Pass các thông số report Code Coverage mà chúng ta đã bàn luận ở trên.
  2. Pass các test cases của chức năng bạn đang làm.

Cài đặt code coverage với Istanbul

Cài Thư viện hỗ trợ report code coverage và highlight

Bạn xem tài liệu gốc tại đây: https://github.com/webpack-contrib/istanbul-instrumenter-loader

Khai báo source code và UT ở file test-suite.js

Cấu hình report:

Source code mẫu cho phần này các bạn checkout ở đây:

Kết quả test có trong thư mục $PROJECT_HOME/coverage.

Tạm kết

Vậy là quá trình tìm hiểu về Code Coverage đã hoàn thành. Chúc các bạn thành công!

Trần Hữu Lập – FPT Software
Theo CodeLearn

Tin liên quan: