使用JsUnit和JSMock的JavaScript测试驱动开发-技术开发专区

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

作者：InfoQ 张晓庆译著编辑：覃里 2009-05-08 16:37 来源：IT168�

　　一个赢钱的场景测试

　　我们可以用学到的任何知识测试下面的场景。这个测试模拟了一个用户在老虎机上先输后赢的情形。

1 function testLoseThenWin(){
2       var buttonStub = {};
3       var balanceStub = {};
4       var reelsStub = [{},{},{}];
5       // a losing combination, followed by a winning combination
6       var randomNumbers = [2, 1, 3].concat([4, 4, 4]);
7       var randomStub = function(){return randomNumbers.shift();};
8
9       var slotMachine = new drw.SlotMachine(buttonStub, balanceStub, reelsStub,
10 randomStub);
11       var balance = 10;
12       slotMachine.deposit({responseText: String(balance)});
13
14
15       slotMachine.play();
16
17
18       assertEquals(balance - 1, balanceStub.innerHTML);
19       assertEquals('Sorry, try again', buttonStub.value);
20
21
22       slotMachine.play();
23
24
25       assertEquals('balance - 2 + 40', 48, balanceStub.innerHTML);
26       assertEquals('You Won!', buttonStub.value);
27       assertEquals('images/4.jpg', reelsStub[0].src);
28       assertEquals('images/4.jpg', reelsStub[1].src);
29       assertEquals('images/4.jpg', reelsStub[2].src);
30 }

　　drw.SlotMachine类的play方法实现是这样的：

1 drw.SlotMachine.prototype.play = function(){
2   var outcomes = [];
3   var msg = 'Sorry, try again';
4   for(var i = 0; i < this.reels.length; i++){
5     this.reels[i].src = 'images/' + (outcomes[i] = this.random()) + '.jpg';
6   }
7   if(outcomes[0] == outcomes[1] && outcomes[0] == outcomes[2]){
8     msg = 'You Won!';
9     this.balance += (outcomes[0] * 10);
10   }
11   this.buttonElement.value = msg;
12   this.balanceElement.innerHTML = --this.balance;
13 };

　　最后，这是一个可以运行的老虎机的示例：

1 <html>
2 <title>A Slot Machine Demonstration</title>
3 <head>
4   <script type='text/javascript' src='functional.js'></script>
5   <script type='text/javascript' src='slot_machine.js'></script>
6   <script type='text/javascript' src='network_client.js'></script>
7   <script type='text/javascript'>
8
9
10     window.onload = function(){
11           var leftReel = document.getElementById('leftReel');
12           var middleReel = document.getElementById('middleReel');
13           var rightReel = document.getElementById('rightReel');
14           var random = function(){
15             return Math.floor(Math.random()*5) + 1; // generate 1 through 5
16           };
17           slotMachine = new drw.SlotMachine(document.getElementById('buttonElement'),
18                                             document.getElementById('balanceElement'),
19                                             [leftReel, middleReel, rightReel],
20                                             random,
21                                             new NetworkClient());
22           slotMachine.render();
23           slotMachine.getBalance();
24     };
25
26
27   </script>
28 </head>
29 <body id='body'>
30
31
32   <div style="text-align:center; background-color:#BFE4FF; padding: 5px; width: 160px;">
33     <div>Slot Machine Widget</div>
34     <div style="padding: 5 0 5 0;">
35       <img id='leftReel'/>
36       <img id='middleReel'/>
37       <img id='rightReel'/>
38     </div>
39     <div>Balance: <span id="balanceElement"></span></div>
40     <input id="buttonElement" style="width:150px" type="button" onclick="slotMachine.play()"></input>
41   </div>
42
43
44 </body>
45 </html>

第1页：JsUnit，一个JavaScript单元测试框架(1)第2页：JsUnit，一个JavaScript单元测试框架(2)第3页：Stubs vs. Mocks 第4页：JsMock，JavaScript的Mock对象库(1)第5页：JsMock，JavaScript的Mock对象库(2)第6页：一个赢钱的场景测试

关注我们