Làm thế nào để kiểm tra các cuộc gọi jquery và ajax bằng JsTestDriver?

Question

Tôi có trang động được tạo bằng jQuery. Các mẩu Html được tải từ các mẫu mustache. Các mẫu này được tải xuống từ một url, và tôi muốn đơn vị kiểm tra việc xây dựng html tổng thể:

Các thử nghiệm JsTestDriver là:

AppTest = TestCase("AppTest") 

AppTest.prototype.test = function() { 
    var actualHtml = ""; 

    getHtml({ "title": "title", "header": "header", "text": "text", "authors": [ {"firstname": "firstname", "lastname": "lastname"} ] }, function(html) { 
     actualHtml = html; 
    }); 

    assertEquals("expected html", actualHtml); 
}; 

Và mã:

function getHtml(json, resultFunc) { 
    jQuery.ajax({ 
      url: "url/to/mustache/template", 
      success: function(view) { 
        resultFunc(mergeArticleModelAndView(json, view)); 
      }, 
      error: function(jqXHR, textStatus, errorThrown) { 
        resultFunc(textStatus + " errorThrown: " + errorThrown); 
      }, 
      dataType: 'text', 
      async: false 
    }); 
} 

Sau đó, tôi khởi động các thử nghiệm và kết quả là:

$ java -jar JsTestDriver-1.3.2.jar --port 9876 --browser /usr/bin/firefox --tests all 
F 
Total 1 tests (Passed: 0; Fails: 1; Errors: 0) (8,00 ms) 
    Firefox 5.0 Linux: Run 1 tests (Passed: 0; Fails: 1; Errors 0) (8,00 ms) 
    AppTest.test failed (8,00 ms): AssertError: expected "expected html" but was "error errorThrown: [Exception... \"Component returned failure code: 0x80004005 (NS_ERROR_FAILURE)\" nsresult: \"0x80004005 (NS_ERROR_FAILURE)\" location: \"JS frame :: http://localhost:9876/test/main/js/jquery.min.js :: <TOP_LEVEL> :: line 16\" data: no]" 
()@http://localhost:9876/test/test/js/app_test.js:25 

Vì vậy, lỗi gọi lại đã được gọi, nd Tôi không hiểu tại sao nó phá vỡ với JsTestDriver, và mã hoạt động khi gọi ứng dụng bằng tay với một trình duyệt

Điều cuối cùng, các jsTestDriver.conf:

server: http://localhost:9876 

load: 
    - test/js/app_test.js 
    - main/js/jquery.min.js 
    - main/js/jquery.mustache.js 
    - main/js/app.js 

Cảm ơn bạn cho lời khuyên của bạn. Nói chung, bạn sử dụng khung kiểm thử đơn vị nào để kiểm tra javascript và dòng lệnh với DOM và jQuery?

Answer 1

Có nó có thể làm hoàn toàn giống với jquery:

mã kiểm tra (chỉ cần thiết lập các thử nghiệm là như nhau):

TestCase("AppTest", { 
    setUp: function() { 
     this.xhr = Object.create(fakeXMLHttpRequest); 
     this.xhr.send=function() { 
      this.readyState = 4; 
     }; 
     this.xhr.getAllResponseHeaders=stubFn({}); 
     this.xhr.responseText="<expected data>"; 
     jQuery.ajaxSettings.isLocal=stubFn(true); 
     jQuery.ajaxSettings.xhr=stubFn(this.xhr); 
    }, 
// same test method 

Và mã sản xuất:

function getHtml(model, resultFunc) { 
     $.get("/url/to/template", function(view) { 
       resultFunc(mergeArticleModelAndView(model, view)); 
     }); 
} 

Đó là giải pháp mà chúng tôi đã chọn.

Answer 2

Tôi đã tìm ra cách để thực hiện: là giả định cuộc gọi ajax. Trên http://tddjs.com/ có một ví dụ để làm như vậy trong chương 12, và kho git là ở đây: http://tddjs.com/code/12-abstracting-browser-differences-ajax.git

Vì vậy, các mã kiểm tra là:

TestCase("AppTest", { 
    setUp: function() { 
     tddjs.isLocal = stubFn(true); 
     var ajax = tddjs.ajax; 
     this.xhr = Object.create(fakeXMLHttpRequest); 
     this.xhr.send=function() { 
      this.readyState = 4; 
      this.onreadystatechange(); 
     }; 
     this.xhr.responseText="<expected data>"; 
     ajax.create = stubFn(this.xhr); 
    }, 


    "test article html ok": function() { 
     var actualHtml = ""; 

     getHtml({ "title": "title", "header": "header", "text": "text", "authors": [ {"firstname": "firstname", "lastname": "lastname"} ] }, function(html) { 
      actualHtml = html; 
     }); 

     assertEquals("<expected html>", actualHtml); 
    } 
}); 

Và mã sản xuất:

function getHtml(model, resultFunc) { 
     tddjs.ajax.get("http://url/to/template", { 
       success: function (xhr) { 
         resultFunc(mergeArticleModelAndView(model, xhr.responseText)); 
       } 
     }); 
} 

Sau khi đọc mã jQuery, tôi nghĩ có thể giả lập yêu cầu jQuery ajax. Cf cũng jquery 1.5 mock ajax

Answer 3

Một giải pháp thay thế là để JsTestDriver phục vụ mẫu của bạn và một số dữ liệu JSON thử nghiệm. Cấu hình bên dưới cho phép bạn đặt dữ liệu thử nghiệm JSON tĩnh (ví dụ: my_data.json) vào các mẫu src/test/webapp/json và Mustache trong src/main/webapp/templates. Bạn có thể thay đổi điều này xung quanh để phù hợp với bố cục nguồn của bạn nếu điều này quá Maven-y cho sở thích của bạn.

Lưu ý rằng JsTestDriver phục vụ các nội dung có/test/pre-pended đến URI được chỉ định trong thuộc tính serve, do đó src/test/webapp/json/my_data.json thực sự được phân phối từ http:// localhost: 9876/test/src/test/webapp/json/my_data.json.

server: http://localhost:9876 

serve: 
- src/main/webapp/templates/*.html 
- src/test/webapp/json/*.json 

load: 
- src/main/webapp/js/*.js 
- src/main/webapp/js/libs/*.js 

test: 
- src/test/webapp/js/*.js 

Sau đó, trong trường hợp thử nghiệm, bạn có thể dễ dàng tải mẫu và dữ liệu JSON.

testLoadTemplateAndData : function() { 

     // Variables 
     var onComplete, template, data, expected, actual, templateLoaded, dataLoaded; 
     dataLoaded = false; 
     templateLoaded = false; 
     expected = "<h2>Your expected markup</h2>"; 

     // Completion action 
     onComplete = function() { 
      if (dataLoaded && templateLoaded) { 

       // Render the template and data 
       actual = Mustache.to_html(template, data); 

       // Compare with expected 
       assertEquals('Markup should match', expected, actual); 

      } 
     }; 

     // Load data with jQuery 
     $.ajax({ 
      url : '/test/src/test/webapp/json/demo.json', 
      success : 
       function (result) { 
        data = result; 
        dataLoaded = true; 
      }, 
      error : 
       function() { 
        fail("Data did not load."); 
      }, 
      complete : 
       function() { 
        onComplete(); 
       } 
      } 
     ); 

     // Load the template with jQuery 
     $.get('/test/src/main/webapp/templates/demo.html', 
      function(result) { 
       template = result; 
       templateLoaded = true; 
      } 
     ) 
     .error(function() { fail("Template did not load."); }) 
     .complete(function() { 
      onComplete(); 
     }); 

    } 

Khi cả hai lần gọi lại jQuery hoàn thành, Mustache phải phân tích cú pháp mẫu với dữ liệu JSON và hiển thị kết quả mong đợi.

Answer 4

Với sinon.js nó thậm chí còn đơn giản hơn:

TestCase("AppTest", { 
setUp: function() { 
    this.server = sinon.fakeServer.create(); 
}, 
tearDown: function() { 
    this.server.restore(); 
}, 

"test article html ok": function() { 
    this.server.respondWith("mustache template"); 
    this.server.respond(); 
    var actualHtml = ""; 

    getHtml({ "title": "title", "header": "header", "text": "text", "authors": [ {"firstname": "firstname", "lastname": "lastname"} ] }, function(html) { 
     actualHtml = html; 
    }); 

    assertEquals("<expected html>", actualHtml); 
}