Viết unit test cho javascript với Jasmine

Blog có khá nhiều bài về code rồi nên hôm nay mình sẽ viết một bài để đổi gió.

1. Nhắc lại sơ về Unit Test

Trước khi có unit test, các lập trình viên thường code theo kiểu: code – test – fix lại – code tiếp – test lại – fix tiếp. Đôi khi chỉ vì sửa 1 lỗi nho nhỏ mà ta phải test lại rất nhiều lần. Để giải quyết vấn đề này, unit test và automation test ra đời. Mình không phải QA chuyên nghiệp nên không dám múa rìu qua mắt thợ, chỉ nói sơ về định nghĩa của 2 loại test này:

Unit test: Đây là test do developer viết, được chạy để kiểm tra các hàm do developer viết ra có sai hay ko. Unit test thường được chạy mỗi khi build để đảm bảo các hàm đều chạy đúng sau khi ta sửa code.
Automation test: Đây là test do QA viết, được chạy để kiểm thử hệ thống (Nếu không có automation test thì QA kiểm thử bằng tay, gọi làm manual test).

Bài viết này chỉ tập trung vào unit test. Đây là test mà developer chúng ta phải viết. Các thư viện thường dùng để viết unit test là jUnit (Java), nUnit (C#), thư viện test của Microsoft, … Một số khái niệm cần biết trong unit test:

Test case: Mỗi function sẽ có nhiều test case, ứng với mỗi trường hợp function chạy. Những function đơn giản cần 2,3 test case, những function phức tạp thì cần > 10.
Setup: Đây là hàm được chạy trước khi chạy các test case, thường dùng để khai báo dữ liệu, cài đặt các biến.
Teardown: Đây là hàm được chạy sau khi các test case chạy xong, thường dùng để xóa dữ liệu, giải phóng bộ nhớ.
Assert: Mỗi test case sẽ có 1 hoặc nhiều câu lệnh Assert, để kiểm tra tính đúng đắn của hàm. Vd: Assert.Equals(4, Add(2,2));
Mock: Giả sử chương trình của bạn được chia làm 2 module: A và B. Module A đã code xong, B thì chưa. Để test module A, ta dùng mock để làm giả module B, không cần phải đợi tới khi module B code xong mới test được.

2. Giới thiệu về Jasmine

Ngày xửa ngày xưa, khi mà javascript là một ngôn ngữ trời đánh (xem thêm ở đây). Lúc đó javascript chưa có thư viện nào để viết unit test, cũng chưa có jQuery, do đó lập trình viên javascript cực không khác con cờ hó là mấy. Đến gần đây, javascript đã thành 1 ngôn ngữ hot, với vô số thư viện hỗ trợ. Jasmine là 1 trong 3 thư viện hỗ trợ unit test mạnh nhất cho javascript hiện tại.

3. Demo Jasmine

Chúng ta bắt đầu làm demo nào, đầu tiên, các bạn tải jasmine bản mới nhất về ở đây: https://github.com/jasmine/jasmine/releases Giải nén, vào thư mục dist và giải nén bản mới nhất nhé: Sau khi giải nén, ta được 1 thư mục mới, chạy thử file SpecRunner.html, ta có: Xem source file html này, ta thấy gồm những file thư viện, file code và spec. Những unit test được viết trong file PlayerSpec.js:

 <html>
<head>
 <meta charset="utf-8">
 <title>Jasmine Spec Runner v2.2.0</title>
 <link rel="shortcut icon" type="image/png" href="lib/jasmine-2.2.0/jasmine_favicon.png">
 <link rel="stylesheet" href="lib/jasmine-2.2.0/jasmine.css">

 <script src="lib/jasmine-2.2.0/jasmine.js"></script>
 <script src="lib/jasmine-2.2.0/jasmine-html.js"></script>
 <script src="lib/jasmine-2.2.0/boot.js"></script> 

 <!-- include source files here... -->
 <script src="src/Player.js"></script>
 <script src="src/Song.js"></script> 

 <!-- include spec files here... -->
 <script src="spec/SpecHelper.js"></script>
 <script src="spec/PlayerSpec.js"></script>
</head>
<body>
</body>
</html>

Để đơn giản, chúng ta sẽ tạo 1 file spec mới làm ví dụ, đặt tên là MySpec.js. Ta sửa lại file html như sau:

 <html>
<head>
 <meta charset="utf-8">
 <title>Jasmine Spec Runner v2.2.0</title>

 <link rel="shortcut icon" type="image/png" href="lib/jasmine-2.2.0/jasmine_favicon.png">
 <link rel="stylesheet" href="lib/jasmine-2.2.0/jasmine.css">

 <script src="lib/jasmine-2.2.0/jasmine.js"></script>
 <script src="lib/jasmine-2.2.0/jasmine-html.js"></script>
 <script src="lib/jasmine-2.2.0/boot.js"></script>

 <!-- include spec files here... -->
 <script src="spec/MySpec.js"></script>

</head>

<body>
</body>
</html>

Trong file spec mới, ta sẽ viết 1 class Calculator, chuyên thực hiện các phép toán cộng trừ nhân chia, sau đó viết test case cho nó (Viết trong cùng file MySpec.js nhé) . Class Calculator

function Calculator()
{
  this.add = function(a, b) { return a+b;};
  this.minus = function(a, b) { return a-b;};
  this.multiply = function(a, b) { return a*b;};
  this.divide = function(a,b) {return a/b;} ;
}

Một số unit test cộng trừ nhân chia

Hàm describe dùng để gom nhóm, ghi chú cho nhiều unit test.
Hàm it tương đương với 1 unit test.
Hàm expect chính là hàm assert để kiểm tra tính đúng đắn của unit test

describe("Cộng trừ", function() {
 var cal = new Calculator();

 it("Một với một là hai", function() {
   expect(2).toBe(cal.add(1,1));
 });

 it("Hai với hai là bốn", function() {
   expect(4).toBe(cal.add(2,2));
 });

 it("Năm trừ hai bằng ba", function() {
   expect(3).toBe(cal.minus(5,2));
 });

});

describe("Nhân chia", function() {
 var cal = new Calculator();

 it("Năm nhân hai bằng mười", function() {
   expect(10).toBe(cal.multiply(5,2));
 });

 it("Sáu chia hai bằng ba", function() {
   expect(3).toBe(cal.divide(6,2));
 });
});

Chạy lại file SpecRunner.html, ta được kết quả. Giả sử ta cố ý sửa lại cho hàm minus chạy sai, ta sẽ thấy unit test báo hàm sai như sau: Bài viết tới đây là kết thúc. Ở phần 2, mình sẽ hướng dẫn chi tiết hơn về cách dùng hàm setup, teardown và mock với Jasmine. Các bạn có thể tải code sample của bài viết này ở đây: https://github.com/conanak99/jasmine-sample.