我有一个用jQuery构建的动态页面.从
mustache模板加载Html片段.这些模板是从网址下载的,我想对整个html结构进行单元测试：
JsTestDriver测试是：
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);
};
和代码：
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
});
}
然后我启动测试,结果是：
$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
所以错误回调已被调用,我不明白为什么它与JsTestDriver打破,并且代码在使用浏览器手动调用应用程序时有效
最后一件事,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
谢谢你的建议.更一般地说,您使用哪些单元测试框架进行javascript和使用DOM和jQuery进行命令行测试？
解决方法
另一种方法是让JsTestDriver为您的模板和一些测试JSON数据提供服务.下面的配置允许您将src / test / webapp / json中的静态JSON测试数据(例如my_data.json)和src / main / webapp / templates中的Mustache模板.你可以改变它以匹配你的源布局,如果这对你的口味太Maven-y.
请注意,JsTestDriver使用/ test / pre-pended为serve属性中指定的URI提供资源,因此src / test / webapp / json / my_data.json实际上是从http：// localhost：9876 / test / src /提供的测试/ web应用/ 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
然后,在测试用例中,您可以轻松加载模板和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',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();
});
}
当两个jQuery回调都完成时,Mustache应该使用JSON数据解析模板并呈现预期的输出.