QUnit - Hướng dẫn nhanh

Kiểm tra là quá trình kiểm tra chức năng của ứng dụng xem nó có hoạt động theo yêu cầu hay không và để đảm bảo rằng ở cấp nhà phát triển, kiểm thử đơn vị đã đi vào thành công. Kiểm thử đơn vị là kiểm tra một thực thể (lớp hoặc phương pháp) duy nhất. Kiểm thử đơn vị là rất cần thiết cho mọi tổ chức phần mềm để cung cấp sản phẩm chất lượng cho khách hàng của họ.

Kiểm thử đơn vị có thể được thực hiện theo hai cách như được đề cập trong bảng sau.

Kiểm tra bằng tay Kiểm tra tự động
Việc thực thi các trường hợp kiểm thử theo cách thủ công mà không có bất kỳ công cụ hỗ trợ nào được gọi là kiểm thử thủ công. Nhận công cụ hỗ trợ và thực hiện các trường hợp kiểm thử bằng cách sử dụng công cụ tự động hóa được gọi là kiểm thử tự động hóa.
Tốn thời gian và tẻ nhạt. Vì các trường hợp kiểm thử được thực thi bởi nhân lực, nó rất chậm và tẻ nhạt. Tự động hóa nhanh. Chạy các trường hợp kiểm thử nhanh hơn đáng kể so với nguồn nhân lực.
Đầu tư rất lớn vào nguồn nhân lực. Vì các trường hợp kiểm thử cần được thực thi theo cách thủ công, nên cần có nhiều người kiểm tra hơn. Ít đầu tư vào nguồn nhân lực. Do đó, các trường hợp thử nghiệm được thực thi bằng công cụ tự động hóa, số lượng người thử nghiệm được yêu cầu ít hơn.
Ít tin cậy hơn, vì các thử nghiệm có thể không được thực hiện với độ chính xác mỗi lần do lỗi của con người. Đáng tin cậy hơn. Kiểm tra tự động hóa thực hiện chính xác cùng một hoạt động mỗi khi chúng được chạy.
Không lập trình được. Không có lập trình nào có thể được thực hiện để viết các bài kiểm tra phức tạp, tìm nạp thông tin ẩn. Có thể lập trình được. Người kiểm tra có thể lập trình các bài kiểm tra tinh vi để đưa ra thông tin ẩn.

QUnit là gì?

QUnit là một khung kiểm tra đơn vị cho ngôn ngữ lập trình JavaScript. Nó rất quan trọng trong quá trình phát triển theo hướng thử nghiệm và được sử dụng bởi các dự án jQuery, jQuery UI và jQuery Mobile. QUnit có khả năng kiểm tra bất kỳ cơ sở mã JavaScript chung nào.

QUnit thúc đẩy ý tưởng "thử nghiệm đầu tiên sau đó viết mã", trong đó nhấn mạnh vào việc thiết lập dữ liệu thử nghiệm cho một đoạn mã, dữ liệu này có thể được thử nghiệm trước rồi thực hiện. Cách tiếp cận này giống như "kiểm tra một chút, viết mã một chút, kiểm tra một chút, viết mã một chút ..." làm tăng năng suất của lập trình viên và tính ổn định của mã chương trình làm giảm căng thẳng của lập trình viên và thời gian dành cho việc gỡ lỗi.

Đặc điểm của QUnit

QUnit là một khung công tác mã nguồn mở được sử dụng để viết và chạy các bài kiểm tra. Sau đây là các tính năng nổi bật nhất của nó -

  • QUnit cung cấp các Assertions để kiểm tra kết quả mong đợi.

  • QUnit cung cấp các thiết bị kiểm tra để chạy các bài kiểm tra.

  • Kiểm tra QUnit cho phép viết mã nhanh hơn, làm tăng chất lượng.

  • QUnit đơn giản một cách trang nhã. Nó ít phức tạp hơn và mất ít thời gian hơn.

  • Các bài kiểm tra QUnit có thể được chạy tự động và chúng tự kiểm tra kết quả và cung cấp phản hồi ngay lập tức. Không cần phải xem lại báo cáo kết quả thử nghiệm theo cách thủ công.

  • Các bài kiểm tra QUnit có thể được tổ chức thành các bộ thử nghiệm chứa các trường hợp thử nghiệm và thậm chí cả các bộ thử nghiệm khác.

  • QUnit hiển thị tiến trình kiểm tra trong một thanh có màu xanh lục nếu quá trình kiểm tra diễn ra tốt đẹp và nó chuyển sang màu đỏ khi kiểm tra không thành công.

Unit Test Case là gì?

Unit Test Case là một phần của mã đảm bảo rằng một phần khác của mã (phương pháp) hoạt động như mong đợi. Để đạt được kết quả mong muốn một cách nhanh chóng, cần có khung kiểm tra. QUnit là một khung kiểm tra đơn vị hoàn hảo cho ngôn ngữ lập trình JavaScript.

Một trường hợp kiểm thử đơn vị được viết chính thức được đặc trưng bởi một đầu vào đã biết và một đầu ra dự kiến, được thực hiện trước khi thử nghiệm được thực hiện. Đầu vào đã biết phải kiểm tra điều kiện trước và đầu ra dự kiến ​​sẽ kiểm tra điều kiện sau.

Phải có ít nhất hai trường hợp thử nghiệm đơn vị cho mỗi yêu cầu: một thử nghiệm dương tính và một thử nghiệm âm tính. Nếu một yêu cầu có các yêu cầu phụ thì mỗi yêu cầu phụ phải có ít nhất hai trường hợp thử nghiệm là tích cực và tiêu cực.

Có hai cách để sử dụng QUnit.

  • Local Installation - Bạn có thể tải xuống thư viện QUnit trên máy cục bộ của mình và đưa nó vào mã HTML của bạn.

  • CDN Based Version - Bạn có thể đưa thư viện QUnit vào mã HTML của mình trực tiếp từ Mạng Phân phối Nội dung (CDN).

Cài đặt cục bộ

  • Đi đến https://code.jquery.com/qunit/ để tải xuống phiên bản mới nhất có sẵn.

  • Đặt tải xuống qunit-git.js và qunit-git.css tệp trong thư mục của trang web của bạn, ví dụ: / jquery.

Thí dụ

Bạn có thể bao gồm qunit-git.js và qunit-git.css các tệp trong tệp HTML của bạn như sau:

<html> 
   <head> 
      <meta charset = "utf-8"> 
      <title>QUnit basic example</title> 
      <link rel = "stylesheet" href = "/jquery/qunit-git.css"> 
      <script src = "/jquery/qunit-git.js"></script> 
   </head> 
   
   <body> 
      <div id = "qunit"></div> 
      <div id = "qunit-fixture"></div>  
      <script> 
         QUnit.test( "My First Test", function( assert ) { 
            var value = "1"; 
            assert.equal( value, "1", "Value should be 1" ); 
         }); 
      </script> 
   </body> 
</html>

Điều này sẽ tạo ra kết quả sau:

Phiên bản dựa trên CDN

Bạn có thể đưa thư viện QUnit vào mã HTML của mình trực tiếp từ Mạng phân phối nội dung (CDN).

Chúng tôi đang sử dụng phiên bản jQuery CDN của thư viện trong suốt hướng dẫn này.

Thí dụ

Hãy để chúng tôi viết lại ví dụ trên bằng cách sử dụng thư viện QUnit từ jQuery CDN.

<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>
         QUnit.test( "My First Test", function( assert ) {
            var value = "1";
            assert.equal( value, "1", "Value should be 1" );
         });
      </script>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

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 một 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.

Các API quan trọng của QUnit

Một số Hạng mục quan trọng của QUnit là -

Sr.No. thể loại Chức năng
1 Khẳng định Một tập hợp các phương pháp khẳng định.
2 Kiểm soát không đồng bộ Đối với các hoạt động không đồng bộ.
3 Gọi lại Khi tích hợp QUnit vào các công cụ khác như máy chủ CI, các lệnh gọi lại này có thể được sử dụng như một API để đọc kết quả kiểm tra.
4 Cấu hình và Tiện ích Các phương thức và thuộc tính này được sử dụng làm trình trợ giúp tiện ích và để cấu hình QUnit. Ví dụ: để điều chỉnh hành vi thời gian chạy trực tiếp, hãy mở rộng API QUnit thông qua các xác nhận tùy chỉnh, v.v.
5 Kiểm tra Đối với các hoạt động thử nghiệm.

Thể loại: Khẳng định

Nó cung cấp một tập hợp các phương thức xác nhận.

Sr.No. Phương pháp & Mô tả
1

async()

Hướng dẫn QUnit chờ hoạt động không đồng bộ.
2

deepEqual()

So sánh đệ quy sâu, làm việc trên các kiểu nguyên thủy, mảng, đối tượng, biểu thức chính quy, ngày tháng và hàm.
3

equal()

Một so sánh không nghiêm ngặt, gần tương đương với khẳng định của JUnit.
4

expect()

Chỉ định số lượng xác nhận dự kiến ​​sẽ chạy trong một thử nghiệm.
5

notDeepEqual()

So sánh đệ quy sâu ngược, làm việc trên các kiểu nguyên thủy, mảng, đối tượng, biểu thức chính quy, ngày tháng và hàm.
6

notEqual()

Một so sánh không chặt chẽ, kiểm tra sự bất bình đẳng.
7

notOk()

Kiểm tra boolean, nghịch đảo của ok () và khẳng định của CommonJS .ok (), và tương đương với khẳng định của JUnit (). Vượt qua nếu đối số đầu tiên là sai.
số 8

notPropEqual()

So sánh chặt chẽ các thuộc tính riêng của một đối tượng, kiểm tra sự bất bình đẳng.
9

notStrictEqual()

Một sự so sánh chặt chẽ, kiểm tra sự bất bình đẳng.
10

ok()

Kiểm tra boolean, tương đương với khẳng định của CommonJS .ok () và khẳng định của JUnit (). Vượt qua nếu đối số đầu tiên là đúng.
11

propEqual()

So sánh giá trị và kiểu chặt chẽ của các thuộc tính riêng của đối tượng.
12

push()

Báo cáo kết quả của một xác nhận tùy chỉnh.
13

strictEqual()

Một kiểu so sánh giá trị và kiểu nghiêm ngặt
14

throws()

Kiểm tra xem một lệnh gọi lại có ném ra ngoại lệ hay không và tùy chọn so sánh lỗi đã ném.

Category: Async Control

Nó cung cấp một tập hợp các hoạt động không đồng bộ.

Sr.No. Phương pháp & Mô tả
1

async()

Hướng dẫn QUnit chờ hoạt động không đồng bộ.
2

QUnit.asyncTest()

DEPRECATED: Thêm kiểm tra không đồng bộ để chạy. Kiểm tra phải bao gồm một cuộc gọi đến QUnit.start ().
3

QUnit.start()

KHÔNG DÙNG ĐƯỢC MỘT PHẦN: Bắt đầu chạy lại các thử nghiệm sau khi trình chạy thử nghiệm bị dừng. Xem QUnit.stop () và QUnit.config.autostart.
4

QUnit.stop()

DEPRECATED: Tăng số lượng lệnh gọi QUnit.start () mà testrunner phải đợi trước khi tiếp tục.
5

QUnit.test()

Thêm một bài kiểm tra để chạy.

Thể loại: Gọi lại

Khi tích hợp QUnit vào các công cụ khác như máy chủ CI, các lệnh gọi lại này có thể được sử dụng như một API để đọc kết quả kiểm tra.

Sr.No. Phương pháp & Mô tả
1

QUnit.begin()

Đăng ký một cuộc gọi lại để kích hoạt bất cứ khi nào bộ thử nghiệm bắt đầu.
2

QUnit.done()

Đăng ký một cuộc gọi lại để kích hoạt bất cứ khi nào bộ thử nghiệm kết thúc.
3

QUnit.log()

Đăng ký một lệnh gọi lại để kích hoạt bất cứ khi nào xác nhận hoàn tất.
4

QUnit.moduleDone()

Đăng ký một cuộc gọi lại để kích hoạt bất cứ khi nào một mô-đun kết thúc.
5

QUnit.moduleStart()

Đăng ký một cuộc gọi lại để kích hoạt bất cứ khi nào một mô-đun bắt đầu.
6

QUnit.testDone()

Đăng ký một cuộc gọi lại để kích hoạt bất cứ khi nào thử nghiệm kết thúc.
7

QUnit.testStart()

Đăng ký một cuộc gọi lại để kích hoạt bất cứ khi nào thử nghiệm bắt đầu.

Danh mục: Cấu hình và Tiện ích

Các phương thức và thuộc tính này được sử dụng làm trình trợ giúp tiện ích và để cấu hình QUnit. Ví dụ: để điều chỉnh hành vi thời gian chạy trực tiếp, hãy mở rộng API QUnit thông qua các xác nhận tùy chỉnh, v.v.

Sr.No. Phương pháp & Mô tả
1

QUnit.assert

Không gian tên cho các xác nhận QUnit.
2

QUnit.config

Cấu hình cho QUnit.
3

QUnit.dump.parse()

Kết xuất dữ liệu nâng cao và có thể mở rộng cho JavaScript.
4

QUnit.extend()

Sao chép các thuộc tính được xác định bởi đối tượng mixin vào đối tượng đích.
5

QUnit.init()

DEPRECATED: Khởi tạo lại trình chạy thử nghiệm.
6

QUnit.push()

DEPRECATED: Báo cáo kết quả của một xác nhận tùy chỉnh.
7

QUnit.reset()

DEPRECATED: Đặt lại bộ cố định kiểm tra trong DOM.
số 8

QUnit.stack()

Trả về một chuỗi dòng đơn đại diện cho stacktrace (ngăn xếp cuộc gọi).

Thể loại: Kiểm tra

Nó cung cấp một tập hợp các hoạt động thử nghiệm.

Sr.No. Phương pháp & Mô tả
1

QUnit.assert

Không gian tên cho các xác nhận QUnit.
2

QUnit.asyncTest()

DEPRECATED: Thêm kiểm tra không đồng bộ để chạy. Kiểm tra phải bao gồm một cuộc gọi đến QUnit.start ().
3

QUnit.module()

Nhóm các thử nghiệm liên quan dưới một nhãn duy nhất.
4

QUnit.only()

Thêm một thử nghiệm để chạy độc quyền, ngăn không cho tất cả các thử nghiệm khác chạy.
5

QUnit.skip()

Thêm một thử nghiệm như đối tượng được bỏ qua.
6

QUnit.test()

Thêm một bài kiểm tra để chạy.

Tất cả các xác nhận đều nằm trong Danh mục Khẳng định.

Danh mục này cung cấp một tập hợp các phương pháp xác nhận hữu ích cho việc viết các bài kiểm tra. Chỉ những xác nhận không thành công mới được ghi lại.

Sr.No. Phương pháp & Mô tả
1

async()

Hướng dẫn QUnit chờ hoạt động không đồng bộ.
2

deepEqual()

So sánh đệ quy sâu, làm việc trên các kiểu nguyên thủy, mảng, đối tượng, biểu thức chính quy, ngày tháng và hàm.
3

equal()

Một so sánh không nghiêm ngặt, gần tương đương với khẳng định của JUnit.
4

expect()

Chỉ định số lượng xác nhận dự kiến ​​sẽ chạy trong một thử nghiệm.
5

notDeepEqual()

So sánh đệ quy sâu ngược, làm việc trên các kiểu nguyên thủy, mảng, đối tượng, biểu thức chính quy, ngày tháng và hàm.
6

notEqual()

Một so sánh không chặt chẽ, kiểm tra sự bất bình đẳng.
7

notOk()

Kiểm tra boolean, nghịch đảo của ok () và khẳng định của CommonJS .ok (), và tương đương với khẳng định của JUnit (). Vượt qua nếu đối số đầu tiên là sai.
số 8

notPropEqual()

So sánh chặt chẽ các thuộc tính riêng của một đối tượng, kiểm tra sự bất bình đẳng.
9

notStrictEqual()

Một sự so sánh chặt chẽ, kiểm tra sự bất bình đẳng.
10

ok()

Kiểm tra boolean, tương đương với khẳng định của CommonJS .ok () và khẳng định của JUnit (). Vượt qua nếu đối số đầu tiên là đúng.
11

propEqual()

So sánh giá trị và kiểu chặt chẽ của các thuộc tính riêng của đối tượng.
12

push()

Báo cáo kết quả của một xác nhận tùy chỉnh.
13

strictEqual()

Một kiểu so sánh giá trị và kiểu nghiêm ngặt
14

throws()

Kiểm tra xem một lệnh gọi lại có ném ra ngoại lệ hay không và tùy chọn so sánh lỗi đã ném.

Hãy thử bao gồm hầu hết các phương pháp được đề cập ở trên trong một ví dụ.

<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>
         QUnit.test( "TestSuite", function( assert ) {
            //test data
            var str1 = "abc";
            var str2 = "abc";
            var str3 = null;
            var val1 = 5;
            var val2 = 6;
            var expectedArray = ["one", "two", "three"];
            var resultArray =  ["one", "two", "three"];

            //Check that two objects are equal
            assert.equal(str1, str2, "Strings passed are equal.");
			
            //Check that two objects are not equal
            assert.notEqual(str1,str3, "Strings passed are not equal.");

            //Check that a condition is true
            assert.ok(val1 < val2, val1 + " is less than " + val2);
			
            //Check that a condition is false
            assert.notOk(val1 > val2, val2 + " is not less than " + val1);

            //Check whether two arrays are equal to each other.
            assert.deepEqual(expectedArray, resultArray ,"Arrays passed are equal.");
			
            //Check whether two arrays are equal to each other.
            assert.notDeepEqual(expectedArray, ["one", "two"],
               "Arrays passed are not equal.");			
         });
      </script>
   </body>
</html>

Xác minh đầu ra

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

Chương này giải thích thủ tục thực thi của các phương thức trong QUnit, cho biết phương thức nào được gọi trước và phương thức nào sau đó. Sau đây là quy trình thực thi của các phương thức API thử nghiệm QUnit với một ví dụ.

<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>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		 		 
         QUnit.module( "Module B" );		
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });		 
      </script>
   </body>
</html>

Xác minh đầu ra

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

Đây là cách thực hiện QUnit thủ tục.

  • Mô-đun được sử dụng để nhóm các trường hợp kiểm thử.

  • beforeEach() Tuy nhiên, phương thức thực thi cho mỗi trường hợp thử nghiệm trước khi thực hiện trường hợp thử nghiệm.

  • afterEach() phương pháp thực thi cho mỗi trường hợp thử nghiệm tuy nhiên sau khi thực hiện trường hợp thử nghiệm.

  • Ở giữa beforeEach() và afterEach() mỗi trường hợp thử nghiệm thực thi.

  • Kêu gọi QUnit.module() một lần nữa, chỉ cần đặt lại bất kỳ chức năng beforeEach / afterEach nào được xác định bởi mô-đun khác trước đó.

Đôi khi nó xảy ra rằng mã của chúng tôi chưa sẵn sàng và trường hợp thử nghiệm được viết để kiểm tra phương pháp / mã đó không thành công nếu chạy. QUnit.skipgiúp về mặt này. Phương thức kiểm tra được viết bằng phương thức Skip sẽ không được thực thi. Hãy xem phương pháp Bỏ qua 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>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.skip( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		 		 
         QUnit.module( "Module B" );		
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });
         
         QUnit.skip( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });		 
      </script>
   </body>
</html>

Xác minh đầu ra

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

Đôi khi nó xảy ra rằng mã của chúng tôi chưa sẵn sàng và trường hợp thử nghiệm được viết để kiểm tra phương pháp / mã đó không thành công, nếu chạy. QUnit.onlygiúp về mặt này. Một phương pháp thử nghiệm được viết bằng phương pháp duy nhất sẽ được thực thi trong khi các thử nghiệm khác sẽ không chạy. Nếu nhiều phương thức duy nhất được chỉ định, thì chỉ phương thức đầu tiên sẽ thực thi. Hãy xem phương pháp duy nhất trong hành độ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>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.only( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		      
         QUnit.test( "test case 3", function( assert ) {
            assert.ok( true, "Module A: in test case 3" );
         });
		 
         QUnit.test( "test case 4", function( assert ) {
            assert.ok( true, "Module A: in test case 4" );
         });	 
      </script>
   </body>
</html>

Xác minh đầu ra

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

Đối với mọi hoạt động không đồng bộ trong QUnit.test() gọi lại, sử dụng assert.async(), trả về một hàm "xong" sẽ được gọi khi hoạt động đã hoàn thành. khẳng định.async () chấp nhận số lượng cuộc gọi như một tham số. Lệnh gọi lại được trả về từ khẳng định.async () sẽ tạo ra một Lỗi, nếu nó được gọi nhiều hơn số cuộc gọi được chấp nhận, nếu được cung cấp. Mỗidone()cuộc gọi cộng vào số cuộc gọi. Sau khi hoàn thành mỗi cuộc gọi, quá trình kiểm tra sẽ được thực hiện.

<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>
         QUnit.test( "multiple call test()", function( assert ) {
            var done = assert.async( 3 );
            
            setTimeout(function() {
               assert.ok( true, "first callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "second callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "third callback." );
               done();
            }, 500 );
         });		 
      </script>
   </body>
</html>

Xác minh đầu ra

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

Chúng ta có thể sử dụng assert.expect()chức năng kiểm tra số lượng khẳng định được thực hiện trong thử nghiệm. Trong ví dụ sau, chúng tôi mong đợi ba xác nhận được thực hiện trong thử nghiệm.

<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>
         QUnit.test( "multiple call test()", function( assert ) {
            assert.expect( 3 );
            var done = assert.async( 3 );
            
            setTimeout(function() {
               assert.ok( true, "first callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "second callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "third callback." );
               done();
            }, 500 );
         });		 
      </script>
   </body>
</html>

Xác minh đầu ra

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

Khi tích hợp QUnit vào các công cụ khác như máy chủ CI, các lệnh gọi lại này có thể được sử dụng như một API để đọc kết quả kiểm tra. Sau đây là quy trình thực thi của phương thức API gọi lại QUnit với một ví dụ.

<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>
         //Register a callback to fire whenever a testsuite starts.
         QUnit.begin(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = "<br/>" + 
               "QUnit.begin- Test Suite Begins " + "<br/>" + 
               "Total Test: " + details.totalTests;
         });

         //Register a callback to fire whenever a test suite ends.		 
         QUnit.done(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.done - Test Suite Finised" +  "<br/>" + "Total: " +  
               details.total + " Failed: " + details.failed + " Passed: 
               " + details.passed;
         });
		 
         //Register a callback to fire whenever a module starts.
            QUnit.moduleStart(function( details ) {
               var data = document.getElementById("console").innerHTML;
               document.getElementById("console").innerHTML = data + "<br/><br/>" + 
                  "QUnit.moduleStart - Module Begins " +  "<br/>" + details.name;
         });
		 
         //Register a callback to fire whenever a module ends.	  
         QUnit.moduleDone(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.moduleDone - Module Finished " +  "<br/>" + details.name + 
               " Failed/total: " + details.failed +"/" + details.total ;
         });
		 
         //Register a callback to fire whenever a test starts.
         QUnit.testStart(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.testStart - Test Begins " +  "<br/>" + details.module +" 
               " + details.name;
         });
		 
         //Register a callback to fire whenever a test ends.
         QUnit.testDone(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.testDone - Test Finished " +  "<br/>" + details.module +" " 
               + details.name + "Failed/total: " + details.failed +" " + details.total+ 
               " "+ details.duration;
         });
		 
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		 		 
         QUnit.module( "Module B" );		
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });	 
      </script>

      <div id = "console" ></div>
   </body>
</html>

Xác minh đầu ra

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

Các mô-đun có chức năng kiểm tra được nhóm lại được sử dụng để xác định các mô-đun lồng nhau. QUnit chạy thử nghiệm trên mô-đun mẹ trước khi đi sâu vào các mô-đun lồng nhau, ngay cả khi chúng được khai báo trước. CácbeforeEach và afterEachlệnh gọi lại trên một lệnh gọi mô-đun lồng nhau sẽ xếp chồng ở Chế độ LIFO (Lần vào cuối, Lần ra đầu tiên) đối với các móc cha. Bạn có thể chỉ định mã để chạy trước và sau mỗi lần kiểm tra bằng cách sử dụng đối số và móc.

Hook cũng có thể được sử dụng để tạo các thuộc tính sẽ được chia sẻ trên ngữ cảnh của mỗi bài kiểm tra. Bất kỳ thuộc tính bổ sung nào trên đối tượng hooks sẽ được thêm vào ngữ cảnh đó. Đối số hooks là tùy chọn nếu bạn gọi QUnit.module với một đối số callback.

Lệnh gọi lại của mô-đun được gọi có bối cảnh là môi trường thử nghiệm, với các thuộc tính của môi trường được sao chép vào các bài kiểm tra, móc nối và mô-đun lồng nhau của mô-đun.

<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>
         QUnit.module( "parent module", function( hooks ) {
            hooks.beforeEach( function( assert ) {
               assert.ok( true, "beforeEach called" );
            });

            hooks.afterEach( function( assert ) {
               assert.ok( true, "afterEach called" );
            });

            QUnit.test( "hook test 1", function( assert ) {
               assert.expect( 2 );
            });

            QUnit.module( "nested hook module", function( hooks ) {
               // This will run after the parent module's beforeEach hook
               hooks.beforeEach( function( assert ) {
                  assert.ok( true, "nested beforeEach called" );
               });

               // This will run before the parent module's afterEach
               hooks.afterEach( function( assert ) {
                  assert.ok( true, "nested afterEach called" );
               });

               QUnit.test( "hook test 2", function( assert ) {
                  assert.expect( 4 );
               });
            });
         });
      </script>

      <div id = "console" ></div>
   </body>
</html>

Xác minh đầu ra

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

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved