QUnit - Cách sử dụng cơ bản

Bây giờ chúng tôi sẽ chỉ cho bạn quy trình từng bước để bắt đầu lại QUnit bằng một ví dụ cơ bản.

Nhập qunit.js

qunit.js của thư viện Qunit đại diện cho người chạy thử nghiệm và khung thử nghiệm.

<script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>

Nhập qunit.css

qunit.css của thư viện Qunit tạo kiểu cho trang bộ thử nghiệm để hiển thị kết quả thử nghiệm.

<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">

Thêm lịch thi đấu

Thêm hai phần tử div với id = "qunit" và "qunit-fixture". Các phần tử div này là bắt buộc và cung cấp vật cố định cho các bài kiểm tra.

<div id = "qunit"></div>
<div id = "qunit-fixture"></div>

Tạo một chức năng để kiểm tra

function square(x) {
   return x * x;
}

Tạo một trường hợp thử nghiệm

Thực hiện cuộc gọi đến hàm QUnit.test, với hai đối số.

Name - Tên của bài kiểm tra để hiển thị kết quả kiểm tra.
Function - Mã kiểm tra chức năng, có một hoặc nhiều xác nhận.

QUnit.test( "TestSquare", function( assert ) {
   var result = square(2);
   assert.equal( result, "4", "square(2) should be 4." );
});

Chạy thử nghiệm

Bây giờ chúng ta hãy xem đoạn mã hoàn chỉnh đang hoạt động.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      
      <script>
         function square(x) {
            return x * x;
         }
         QUnit.test( "TestSquare", function( assert ) {
            var result = square(2);
            assert.equal( result, "4", "square(2) should be 4." );
         });
      </script>
   </body>
</html>

Tải trang trong trình duyệt. Người chạy thử gọiQUnit.test()khi trang được tải và thêm bài kiểm tra vào hàng đợi. Việc thực hiện test case được hoãn lại và do người chạy thử kiểm soát.

Xác minh đầu ra

Bạn sẽ thấy kết quả sau:

Header- Tiêu đề bộ thử nghiệm hiển thị tiêu đề trang, một thanh màu xanh lá cây khi tất cả các thử nghiệm được vượt qua. Nếu không, thanh màu đỏ khi có ít nhất một thử nghiệm không thành công, thanh có ba hộp kiểm để lọc kết quả thử nghiệm và thanh màu xanh lam có văn bản Navigator.userAgent để hiển thị chi tiết trình duyệt.
Hide passed tests checkbox - Để ẩn các trường hợp thử nghiệm đã đạt và chỉ hiển thị các trường hợp thử nghiệm không thành công.
Check for globals checkbox- Để hiển thị danh sách tất cả các thuộc tính trên đối tượng window, trước và sau mỗi lần kiểm tra, sau đó kiểm tra sự khác biệt. Việc sửa đổi các thuộc tính sẽ không thành công trong bài kiểm tra.
No try-catch checkbox - Chạy các trường hợp thử nghiệm bên ngoài khối try-catch để trong trường hợp thử nghiệm ném ra một ngoại lệ, trình chạy thử nghiệm sẽ chết và hiển thị ngoại lệ gốc.
Summary- Hiển thị tổng thời gian thực hiện để chạy các trường hợp thử nghiệm. Tổng số trường hợp thử nghiệm chạy và xác nhận không thành công.
Contents- Hiển thị kết quả kiểm tra. Mỗi kết quả thử nghiệm có tên của thử nghiệm, theo sau là các khẳng định không đạt, đạt và tổng số. Mỗi mục nhập có thể được nhấp để biết thêm chi tiết.