使用JsUnit和JSMock的JavaScript测试驱动开发

核心提示： testRender函数使用了两个DOM元素的stub，把它们都注入到被测系统的构造函数中，使用JsUnit和JSMock的JavaScript测试驱动开发(5)，并调用render方法，测试的最后对render方法的期望结果进行断言，给用来赚钱的实际的应用程序很少会这么写测试套件，当亲眼

testRender函数使用了两个DOM元素的stub，把它们都注入到被测系统的构造函数中，并调用render方法。测试的最后对render方法的期望结果进行断言。请注意通过使用DOM元素的stub，我们可以测试render方法的结果，而不必实际去做任何事情，这些事情可能导致测试页面的其他测试失效。这种方法与使用真实DOM元素各有利弊。使用真实的DOM元素更容易发现跨浏览器不兼容的bug，但是如果每个测试最后或者tearDown时没有进行重置，你的测试本身也更容易带来bug。

被测系统并未直接调用全局函数Math.random，来决定每个轴初始的图片状态。相反，老虎机是依赖创建时提供给它的参数，来得到这些数字。这让我们可以测试一段不确定的代码，好像完全可以预测一样。请注意测试没有覆盖浏览器原生的Math.random实现，从而避免了状态变化的风险和副作用。

等等，等一会儿... 测试函数有不止一个断言，这样行吗？敏捷社区中部分人认为每个测试中有多于一个断言是邪恶的。然而，给用来赚钱的实际的应用程序很少会这么写测试套件。当亲眼看到JUnit框架本身实物测试套件中每个测试有多少断言时，相信会有很多人非常惊讶。

对象的构造函数和render方法看上去是这样的：

/**
　*　Constructor　for　the　slot　machine.
　*/


drw.SlotMachine　=　function(buttonElement,　balanceElement,　reels,　random,　networkClient)
　{
　this.buttonElement　=　buttonElement;
　this.balanceElement　=　balanceElement;
　this.reels　=　reels;
　this.random　=　random;
　this.networkClient　=　networkClient;
　this.balance　=　0;
};


drw.SlotMachine.prototype.render　=　function()　{
　this.buttonElement.disabled　=　true;
　this.buttonElement.value　=　'Pay　to　play';
　this.balanceElement.innerHTML　=　0;
　for(var　i　=　0;　i　<　this.reels.length;){
　　this.reels[i++].src　=　'images/'　+　this.random()　+　'.jpg';
　}
};