JavaScript web前端的测试驱动开发
这听起来可能有点愚蠢，但实际上我有点困惑如何为web前端进行JavaScript测试。就我而言，典型的3层体系结构如下所示：JavaScript web前端的测试驱动开发,javascript,testing,tdd,Javascript,Testing,Tdd,这听起来可能有点愚蠢，但实际上我有点困惑如何为web前端进行JavaScript测试。就我而言，典型的3层体系结构如下所示： function TestFailed(message) { this.message = message; this.name = "TestFailed"; } 数据库层 应用层 客户层 1与这个问题无关。2包含前端的所有程序逻辑（“业务逻辑”） 我对大多数项目进行测试驱动开发，但只针对应用程序逻辑，而不是前端。这是因为在TDD中测试UI是困难和不寻
function TestFailed(message) {
this.message = message;
this.name = "TestFailed";
}
为了澄清我的问题，我将问题的措辞从“在web前端中测试JavaScript”改为“JavaScript web前端的测试驱动开发”。您可以从用户角度使用诸如或其他等效软件之类的工具测试应用程序 这些工具以自动化的方式测试应用程序，就像用户坐在应用程序前面一样。这意味着您可以同时测试所有三层，尤其是Javascript，否则可能很难测试。这样的功能测试可能有助于发现用户界面的缺陷和怪癖，以及用户界面如何使用中间层推出的数据
不幸的是，这些工具非常昂贵，因此可能还有其他等效工具（我很想知道这些工具）。我有一个与JS客户端层架构类似的应用程序。在我的例子中，我使用我们公司自己的JS框架来实现客户端层 这个JS框架是以OOP风格创建的，因此我可以为核心类和组件实现单元测试。此外，为了涵盖所有用户交互（使用单元测试无法涵盖），我正在使用它对框架可视化组件进行集成测试，并在不同的浏览器下进行测试 所以，若测试代码是以面向对象的方式编写的，那个么TDD可以应用于JavaScript开发。集成测试也是可能的（并且可以用来进行某种TDD）。Christian Johansen的一本书《测试驱动的JavaScript开发》可能会对您有所帮助。我只看过书中的一些示例（前几天刚下载了一个示例到Kindle），但它看起来像是一本解决这个问题的好书。你可以去看看 （注意：我与Christian Johansen没有任何联系，也没有对这本书的销售进行任何投资。解决这个问题似乎是件好事。）我们还可以看看JavaScript方法和函数的单元测试。在我们公司使用。这是一个测试前端的环境
看看它。记住单元测试的要点是：确保特定的代码模块以预期的方式对某些刺激作出反应。在JS中，代码的很大一部分（除非您有像Sencha或YUI这样的生命周期框架）要么直接操作DOM，要么进行远程调用。为了测试这些东西，您只需应用依赖注入和模拟/存根的传统单元测试技术。这意味着您必须编写要进行单元测试的每个函数或类，以接受依赖结构的模拟 jQuery通过允许您将XML文档传递到所有遍历函数中来支持这一点。而你通常会写
$(function() { $('.bright').css('color','yellow'); }
function processBright(scope) {
// jQuery will do the following line automatically, but for sake of clarity:
scope = scope || window.document;
$('.bright',scope).css('color','yellow');
}
$(processBright);
function shouldSetColorYellowIfClassBright() {
// arrange
var testDoc =
$('<html><body><span id="a" class="bright">test</span></body></html>');
// act
processBright(testDoc);
// assert
if (testDoc.find('#a').css('color') != 'bright')
throw TestFailed("Color property was not changed correctly.");
}
function makeRemoteCall(data, callback) {
if (data.property == 'ok')
$.getJSON({url:'/someResource.json',callback:callback});
}
// test suite setup
var getJSON = $.getJSON;
var stubCalls = [];
$.getJSON = function(args) {
stubCalls[stubCalls.length] = args.url;
}
// unit test 1
function shouldMakeRemoteCallWithOkProperty() {
// arrange
var arg = { property: 'ok' };
// act
makeRemoteCall(arg);
// assert
if (stubCalls.length != 1 || stubCalls[0] != '/someResource.json')
throw TestFailed("someResource.json was not requested once and only once.");
}
// unit test 2
function shouldNotMakeRemoteCallWithoutOkProperty() {
// arrange
var arg = { property: 'foobar' };
// act
makeRemoteCall(arg);
// assert
if (stubCalls.length != 0)
throw TestFailed(stubCalls[0] + " was called unexpectedly.");
}
// test suite teardown
$.getJSON = getJSON;