Làm thế nào chúng ta có thể thực hiện các xét nghiệm đơn vị chống lại thao tác DOM?

Question

Giới thiệu về QUnit qua số netTuts.com tạo ra một trao đổi thú vị (không bao giờ giải quyết) về cách áp dụng các kiểm tra đơn vị đối với các hành động thao tác DOM. Các trích dẫn sau đây (Alex York) được cho là mấu chốt:

Điều gì sẽ là tốt đẹp là nếu bạn có một chức năng như thế này:

chức năng add (a, b) {var result = a + b; $ (“input # ResultTestBox”). Val (kết quả);

Trong bài kiểm tra ở trên, tôi thích kiểm tra hai điều: bổ sung a và b và kết quả chính xác được đặt vào phần tử DOM. Tôi rất muốn kiểm tra điều thứ hai bằng cách cung cấp một số HTML giả. Khả thi?

Nhưng, như tôi đã nói ... chưa được giải quyết. Resolvable?

Answer 1

Phiên bản mới nhất của QUnit hỗ trợ phần tử #qunit-fixture cho phép bạn thêm HTML vào trang web QUnit.

Ví dụ, trong HTML của bạn:

<ol id="qunit-tests"></ol> 
<div id="qunit-fixture">test markup, will be hidden</div> 

và trong JavaScript:

$('<input id="ResultTestBox" type="text"/>').appendTo('#qunit-fixture'); 
var result = add(a, b); 

equals(result, $('input#ResultTestBox').val(), "testing result box value"); 

Answer 2

Bạn có thể chạy chúng trong env.js, nếu bạn không muốn gặp rắc rối tạo sandboxes trang html cho tất cả các bài kiểm tra của bạn.

Answer 3

Chắc chắn những gì bạn thực sự là quan tâm là phương pháp val được gọi trên giá trị trả lại là $(“input#ResultTestBox”) — bạn không cần kiểm tra chức năng của chính phương thức jQuery. Tại sao không tiêm một thực hiện giả lập của đối tượng jQuery và thử nghiệm chống lại điều đó?