Monthly Archives: February 2013

qunit-mark-dark

Kiểm thử Đơn vị trong JavaScript với QUnit

Nguyễn Việt Khoa

QUnit là gì?

QUnit là một framework mạnh, miễn phí và dễ sử dụng để triển khai Kiểm thử Đơn vị (Unit Testing) trong JavaScript. Framework này đã được dùng cho các dự án jQuery, jQuery UI và jQuery Mobile cũng như có thể dùng cho tất cả các mã nguồn JavaScript nói chung, kể cả cho chính dự án QUnit!

Dùng nó ra sao?

Dưới đây là một ví dụ nhỏ về cách sử dụng Qunit để kiểm thử:

1. Trước hết bạn cần tải về từ trang chủ của QUnit hai tệp tin sau:

  • qunit-xxx.js
  • qunit-xxx.css

(xxx là số hiệu phiên bản, hiện phiên bản mới nhất là 1.11.0)

2. Đưa hai tệp tin này vào thư mục resources nằm trong thư mục mà bạn sẽ chứa các trang HTML.

3. Code thử một trang HTML như sau:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="resources/qunit-1.11.0.css" />
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="resources/qunit-1.11.0.js"></script>
  <script src="resources/my_functions.js"></script>
  <script src="resources/tests.js"></script>
</body>
</html>

4. Tạo tệp tin my_functions.js chứa các hàm mà bạn muốn test, và tạo sẵn vào đó hàm sayHello() như sau:

function sayHello(yourName) {
   return;
}

5. Viết một test trong tệp tests.js dành cho hàm sayHello()

test( "test sayHello", function() {
  var expected = "Hello World";
  var result =  sayHello("World");
  equal(expected, result);
});

6. Chạy thử trang HTML trên bạn sẽ có kết quả sau:

QUnit_Fail

Vậy là bạn đã thành công với bước đầu có được “fail” với QUnit, công việc của bạn là hoàn chỉnh hàm sayHello() để “pass” được cái test này.

7. Hoàn chỉnh hàm sayHello() trong tệp my_functions.js đã nói trên:

function sayHello(yourName) {
    return "Hello " + yourName;
}

8. Chạy lại trang HTML để xem kết quả kiểm thử, nếu kết quả như sau:

QUnit_Pass

Xanh rồi nhé, vậy là “pass” nếu không thì bạn cần quay lại bước 7 và xem lại code của hàm sayHello() xem có vấn đề gì không.
Bạn có thể tải ví dụ mẫu này tại đây.

Đến đây tôi đã hoàn tất việc giới thiệu với các bạn về QUnit và một hướng dẫn nho nhỏ để bạn có thể bắt đầu làm Unit Test hay xa hơn nữa là TDD với JavaScript. Bạn có thể tìm hiểu sâu hơn về QUnit tại trang web http://qunitjs.com.

Chúc bạn thành công và sớm có những mã nguồn JavaScript chất lượng :o)

Cảm ơn CodoDojo #9 đã cho tôi ý tưởng và chất liệu để hoàn thành bài viết này.

Nguyễn Việt Khoa

Thị trường ứng dụng di động toàn cầu

Mobile-Apps-20f02f8953d53df0c44e5acde0cd987d

Theo báo cáo mới nhất của hãng nghiên cứu thị trường di động Flurry thì thị trường phần mềm di độngthế giới đã có những bước phát triển mạnh mẽ trong một thời gian ngắn và kèm theo đó là … read more

Vai trò của nhà phát triển đối với thành công của nền tảng di động

Mobile OS Mobile Operating System

Không ai có thể phủ nhận vai trò của các nhà phát triển ứng dụng đối với thành công của một nền tảng di động. Chúng ta có thể thấy rất rõ điều này trong sự thất bại của các … read more

10 lí do nên tránh phát triển hướng kiểm thử

TDD

Theo quan điểm của tôi thì Phát triển hướng kiểm thử (Test Driven Development – TDD) và tất cả những phương pháp bắt nguồn từ TDD (BDD, ATDD) rất tốt để lèo lái sự cố gắng của team trong việc … read more

Lập trình tinh gọn (Phần 1)

super-lean

Năm 1980, đài truyền hình NBC đã trình chiếu bộ phim tài liệu “Nếu nước Nhật có thể, tại sao chúng ta lại không?”. Lúc đó tôi đang làm quản lý tại một xưởng sản xuất video cassette, và chúng … read more

Phong cách thiết kế Skeuomorphic

020113_0942_Phongcchthi3.jpg

Skeuomorphic [skyoo-uh-mawrf] có nghĩa là có đối tượng mới phát sinh nhưng vẫn giữ những đặc điểm thiết kế cho tới cấu trúc cần thiết của bản gốc, ngay cả đối với những chức năng không cần thiết. Xét về … read more