Jasmine入门（下）

上一篇 Jasmine入门（上） 介绍了Jasmine以及一些基本的用法，本篇我们继续研究Jasmine的其他一些特性及其用法（注：本篇中的例子均来自于官方文档）。

Spy

Spy用来追踪函数的调用历史信息（是否被调用、调用参数列表、被请求次数等）。Spy仅存在于定义它的describe和it方法块中，并且每次在spec执行完之后被销毁。

示例1：

 1 (function(){
 2     describe("A spy", function() {
 3       var foo, bar = null;
 4
 5       beforeEach(function() {
 6         foo = {
 7           setBar: function(value) {
 8             bar = value;
 9           }
10         };
11
12         spyOn(foo, ‘setBar‘); // 在foo对象上添加spy
13
14         // 此时调用foo对象上的方法，均为模拟调用，因此不会执行实际的代码
15         foo.setBar(123); // 调用foo的setBar方法
16         foo.setBar(456, ‘another param‘);
17       });
18
19       it("tracks that the spy was called", function() {
20         expect(foo.setBar).toHaveBeenCalled(); //判断foo的setBar是否被调用
21       });
22
23       it("tracks all the arguments of its calls", function() {
24         expect(foo.setBar).toHaveBeenCalledWith(123); //判断被调用时的参数
25         expect(foo.setBar).toHaveBeenCalledWith(456, ‘another param‘);
26       });
27
28       it("stops all execution on a function", function() {
29         expect(bar).toBeNull();  // 由于是模拟调用，因此bar值并没有改变
30       });
31     });
32 })();

从示例1中看到，当在一个对象上使用spyOn方法后即可模拟调用对象上的函数，此时对所有函数的调用是不会执行实际代码的。示例1中包含了两个Spy常用的expect：

toHaveBeenCalled: 函数是否被调用

toHaveBeenCalledWith: 调用函数时的参数

and.callThrough()

那如果说我们想在使用Spy的同时也希望执行实际的代码呢？

示例2：

 1 (function(){
 2     describe("A spy, when configured to call through", function() {
 3       var foo, bar, fetchedBar;
 4
 5       beforeEach(function() {
 6         foo = {
 7           setBar: function(value) {
 8             bar = value;
 9           },
10           getBar: function() {
11             return bar;
12           }
13         };
14
15         spyOn(foo, ‘getBar‘).and.callThrough(); // 与示例1中不同之处在于使用了callThrough，这将时所有的函数调用为真实的执行
16         //spyOn(foo, ‘getBar‘); // 可以使用示例1中的模拟方式，看看测试集执行的结果
17
18         foo.setBar(123);
19         fetchedBar = foo.getBar();
20       });
21
22       it("tracks that the spy was called", function() {
23         expect(foo.getBar).toHaveBeenCalled();
24       });
25
26       it("should not effect other functions", function() {
27         expect(bar).toEqual(123); // 由于是真实调用，因此bar有了真实的值
28       });
29
30       it("when called returns the requested value", function() {
31         expect(fetchedBar).toEqual(123); // 由于是真实调用，fetchedBar也有了真实的值
32       });
33     });
34 })();

通过在使用spyOn后面增加了链式调用and.CallThrough()，这将告诉Jasmine我们除了要完成对函数调用的跟踪，同时也需要执行实际的代码。

and.returnValue()

由于Spy是模拟函数的调用，因此我们也可以强制指定函数的返回值。

示例3：

 1 (function(){
 2     describe("A spy, when configured to fake a return value", function() {
 3       var foo, bar, fetchedBar;
 4
 5       beforeEach(function() {
 6         foo = {
 7           setBar: function(value) {
 8             bar = value;
 9           },
10           getBar: function() {
11             return bar;
12           }
13         };
14
15         spyOn(foo, "getBar").and.returnValue(745); // 这将指定getBar方法返回值为745
16
17         foo.setBar(123);
18         fetchedBar = foo.getBar();
19       });
20
21       it("tracks that the spy was called", function() {
22         expect(foo.getBar).toHaveBeenCalled();
23       });
24
25       it("should not effect other functions", function() {
26         expect(bar).toEqual(123);
27       });
28
29       it("when called returns the requested value", function() {
30         expect(fetchedBar).toEqual(745);
31       });
32     });
33 })();

如果被调用的函数是通过从其他函数获取某些值，我们通过使用returnValue模拟函数的返回值。这样做的好处是可以有效的隔离依赖，使测试流程变得更简单。

and.callFake()

与returnValue相似，callFake则更进一步，直接通过指定一个假的自定义函数来执行。这种方式比returnValue更灵活，我们可以任意捏造一个函数来达到我们的测试要求。
示例4：

 1 (function(){
 2     describe("A spy, when configured with an alternate implementation", function() {
 3       var foo, bar, fetchedBar;
 4
 5       beforeEach(function() {
 6         foo = {
 7           setBar: function(value) {
 8             bar = value;
 9           },
10           getBar: function() {
11             return bar;
12           }
13         };
14
15         spyOn(foo, "getBar").and.callFake(function() {
16           return 1001;
17         });
18
19         foo.setBar(123);
20         fetchedBar = foo.getBar();
21       });
22
23       it("tracks that the spy was called", function() {
24         expect(foo.getBar).toHaveBeenCalled();
25       });
26
27       it("should not effect other functions", function() {
28         expect(bar).toEqual(123);
29       });
30
31       it("when called returns the requested value", function() {
32         expect(fetchedBar).toEqual(1001);
33       });
34     });
35 })();

and.throwError()

throwError便于我们模拟异常的抛出。

 1 (function(){
 2     describe("A spy, when configured to throw an error", function() {
 3       var foo, bar;
 4
 5       beforeEach(function() {
 6         foo = {
 7           setBar: function(value) {
 8             bar = value;
 9           }
10         };
11
12         spyOn(foo, "setBar").and.throwError("quux");
13       });
14
15       it("throws the value", function() {
16         expect(function() {
17           foo.setBar(123)
18         }).toThrowError("quux");
19       });
20     });
21 })();

and.stub

示例5：

 1 (function(){
 2     describe("A spy", function() {
 3       var foo, bar = null;
 4
 5       beforeEach(function() {
 6         foo = {
 7           setBar: function(value) {
 8             bar = value;
 9           },
10           getBar: function(){
11             return bar;
12           }
13         };
14
15         spyOn(foo, ‘setBar‘).and.callThrough(); // 标记1
16         spyOn(foo, ‘getBar‘).and.returnValue(999); // 标记2
17       });
18
19       it("can call through and then stub in the same spec", function() {
20         foo.setBar(123);
21         expect(bar).toEqual(123);
22
23         var getValue = foo.getBar();
24         expect(getValue).toEqual(999);
25
26         foo.setBar.and.stub(); // 相当于‘标记1‘中的代码变为了spyOn(foo, ‘setBar‘)
27         foo.getBar.and.stub(); // 相当于‘标记2‘中的代码变为了spyOn(foo, ‘getBar‘)
28         bar = null;
29
30         foo.setBar(123);
31         expect(bar).toBe(null);
32         expect(foo.setBar).toHaveBeenCalled(); // 函数调用追踪并没有被重置
33
34         getValue = foo.getBar();
35         expect(getValue).toEqual(undefined);
36         expect(foo.getBar).toHaveBeenCalled(); // 函数调用追踪并没有被重置
37       });
38     });
39 })();

其他追踪属性： 

calls：对于被Spy的函数的调用，都可以在calls属性中跟踪。

• .calls.any(): 被Spy的函数一旦被调用过，则返回true，否则为false；
• .calls.count(): 返回被Spy的函数的被调用次数；
• .calls.argsFor(index): 返回被Spy的函数的调用参数，以index来指定参数；
• .calls.allArgs():返回被Spy的函数的所有调用参数；
• .calls.all(): 返回calls的上下文，这将返回当前calls的整个实例数据；
• .calls.mostRecent(): 返回calls中追踪的最近一次的请求数据；
• .calls.first(): 返回calls中追踪的第一次请求的数据；
• .object: 当调用all()，mostRecent()，first()方法时，返回对象的object属性返回的是当前上下文对象；
• .calls.reset(): 重置Spy的所有追踪数据；

示例6：

 1 (function(){
 2     describe("A spy", function() {
 3       var foo, bar = null;
 4
 5       beforeEach(function() {
 6         foo = {
 7           setBar: function(value) {
 8             bar = value;
 9           }
10         };
11
12         spyOn(foo, ‘setBar‘);
13       });
14
15       it("tracks if it was called at all", function() {
16         expect(foo.setBar.calls.any()).toEqual(false);
17
18         foo.setBar();
19
20         expect(foo.setBar.calls.any()).toEqual(true);
21       });
22
23       it("tracks the number of times it was called", function() {
24         expect(foo.setBar.calls.count()).toEqual(0);
25
26         foo.setBar();
27         foo.setBar();
28
29         expect(foo.setBar.calls.count()).toEqual(2);
30       });
31
32       it("tracks the arguments of each call", function() {
33         foo.setBar(123);
34         foo.setBar(456, "baz");
35
36         expect(foo.setBar.calls.argsFor(0)).toEqual([123]);
37         expect(foo.setBar.calls.argsFor(1)).toEqual([456, "baz"]);
38       });
39
40       it("tracks the arguments of all calls", function() {
41         foo.setBar(123);
42         foo.setBar(456, "baz");
43
44         expect(foo.setBar.calls.allArgs()).toEqual([[123],[456, "baz"]]);
45       });
46
47       it("can provide the context and arguments to all calls", function() {
48         foo.setBar(123);
49
50         expect(foo.setBar.calls.all()).toEqual([{object: foo, args: [123], returnValue: undefined}]);
51       });
52
53       it("has a shortcut to the most recent call", function() {
54         foo.setBar(123);
55         foo.setBar(456, "baz");
56
57         expect(foo.setBar.calls.mostRecent()).toEqual({object: foo, args: [456, "baz"], returnValue: undefined});
58       });
59
60       it("has a shortcut to the first call", function() {
61         foo.setBar(123);
62         foo.setBar(456, "baz");
63
64         expect(foo.setBar.calls.first()).toEqual({object: foo, args: [123], returnValue: undefined});
65       });
66
67       it("tracks the context", function() {
68         var spy = jasmine.createSpy(‘spy‘);
69         var baz = {
70           fn: spy
71         };
72         var quux = {
73           fn: spy
74         };
75         baz.fn(123);
76         quux.fn(456);
77
78         expect(spy.calls.first().object).toBe(baz);
79         expect(spy.calls.mostRecent().object).toBe(quux);
80       });
81
82       it("can be reset", function() {
83         foo.setBar(123);
84         foo.setBar(456, "baz");
85
86         expect(foo.setBar.calls.any()).toBe(true);
87
88         foo.setBar.calls.reset();
89
90         expect(foo.setBar.calls.any()).toBe(false);
91       });
92     });
93 })();

createSpy

假如没有函数可以追踪，我们可以自己创建一个空的Spy。创建后的Spy功能与其他的Spy一样：跟踪调用、参数等，但该Spy没有实际的代码实现，这种方式经常会用在对JavaScript中的对象的测试。

示例7：

 1 (function(){
 2     describe("A spy, when created manually", function() {
 3       var whatAmI;
 4
 5       beforeEach(function() {
 6         whatAmI = jasmine.createSpy(‘whatAmI‘);
 7
 8         whatAmI("I", "am", "a", "spy");
 9       });
10
11       it("is named, which helps in error reporting", function() {
12         expect(whatAmI.and.identity()).toEqual(‘whatAmI‘);
13       });
14
15       it("tracks that the spy was called", function() {
16         expect(whatAmI).toHaveBeenCalled();
17       });
18
19       it("tracks its number of calls", function() {
20         expect(whatAmI.calls.count()).toEqual(1);
21       });
22
23       it("tracks all the arguments of its calls", function() {
24         expect(whatAmI).toHaveBeenCalledWith("I", "am", "a", "spy");
25       });
26
27       it("allows access to the most recent call", function() {
28         expect(whatAmI.calls.mostRecent().args[0]).toEqual("I");
29       });
30     });
31 })(); 

createSpyObj

如果需要spy模拟多个函数调用，可以向jasmine.createSpyObj中传入一个字符串数组，它将返回一个对象，你所传入的所有字符串都将对应一个属性，每个属性即为一个Spy。

示例8：

 1 (function(){
 2     describe("Multiple spies, when created manually", function() {
 3       var tape;
 4
 5       beforeEach(function() {
 6         tape = jasmine.createSpyObj(‘tape‘, [‘play‘, ‘pause‘, ‘stop‘, ‘rewind‘]);
 7
 8         tape.play();
 9         tape.pause();
10         tape.rewind(0);
11       });
12
13       it("creates spies for each requested function", function() {
14         expect(tape.play).toBeDefined();
15         expect(tape.pause).toBeDefined();
16         expect(tape.stop).toBeDefined();
17         expect(tape.rewind).toBeDefined();
18       });
19
20       it("tracks that the spies were called", function() {
21         expect(tape.play).toHaveBeenCalled();
22         expect(tape.pause).toHaveBeenCalled();
23         expect(tape.rewind).toHaveBeenCalled();
24         expect(tape.stop).not.toHaveBeenCalled();
25       });
26
27       it("tracks all the arguments of its calls", function() {
28         expect(tape.rewind).toHaveBeenCalledWith(0);
29       });
30     });
31 })();

关于createSpy和createSpyObj，读到这里大家可能很难理解其真正的应用场景。不过没关系，后续的例子中也包含了其用法，大家应该能慢慢理解如何运用它们。

其他匹配方式

jasmine.any

jasmine.any方法以构造器或者类名作为参数，Jasmine将判断期望值和真实值的构造器是否相同，若相同则返回true。

示例9：

 1 (function(){
 2     describe("jasmine.any", function() {
 3       it("matches any value", function() {
 4         expect({}).toEqual(jasmine.any(Object));
 5         expect(12).toEqual(jasmine.any(Number));
 6       });
 7
 8       describe("when used with a spy", function() {
 9         it("is useful for comparing arguments", function() {
10           var foo = jasmine.createSpy(‘foo‘);
11           foo(12, function() {
12             return true;
13           });
14
15           expect(foo).toHaveBeenCalledWith(jasmine.any(Number), jasmine.any(Function));
16         });
17       });
18     });
19 })();

jasmine.anything

jamine.anything判断只要不是null或undefined的值，若不是则返回true。

示例10：

 1 (function(){
 2     describe("jasmine.anything", function() {
 3       it("matches anything", function() {
 4         expect(1).toEqual(jasmine.anything());
 5       });
 6
 7       describe("when used with a spy", function() {
 8         it("is useful when the argument can be ignored", function() {
 9           var foo = jasmine.createSpy(‘foo‘);
10           foo(12, function() {
11             return false;
12           });
13
14           expect(foo).toHaveBeenCalledWith(12, jasmine.anything());
15         });
16       });
17     });
18 })();

jasmine.objectContaining

jasmine.objectContaining用来判断对象中是否存在指定的键值属性对。

示例11：

 1 describe("jasmine.objectContaining", function() {
 2   var foo;
 3
 4   beforeEach(function() {
 5     foo = {
 6       a: 1,
 7       b: 2,
 8       bar: "baz"
 9     };
10   });
11
12   it("matches objects with the expect key/value pairs", function() {
13     expect(foo).toEqual(jasmine.objectContaining({
14       bar: "baz"
15     }));
16     expect(foo).not.toEqual(jasmine.objectContaining({
17       c: 37
18     }));
19   });
20
21   describe("when used with a spy", function() {
22     it("is useful for comparing arguments", function() {
23       var callback = jasmine.createSpy(‘callback‘);
24
25       callback({
26         bar: "baz"
27       });
28
29       expect(callback).toHaveBeenCalledWith(jasmine.objectContaining({
30         bar: "baz"
31       }));
32       expect(callback).not.toHaveBeenCalledWith(jasmine.objectContaining({
33         c: 37
34       }));
35     });
36   });
37 });

jasmine.arrayContaining

jasmine.arrayContaining可以用来判断数组中是否有期望的值。

示例12：

 1 (function(){
 2     describe("jasmine.arrayContaining", function() {
 3       var foo;
 4
 5       beforeEach(function() {
 6         foo = [1, 2, 3, 4];
 7       });
 8
 9       it("matches arrays with some of the values", function() {
10         expect(foo).toEqual(jasmine.arrayContaining([3, 1]));  // 直接在期望值中使用jasmine.arrayContaining达到目的
11         expect(foo).not.toEqual(jasmine.arrayContaining([6]));
12       });
13
14       describe("when used with a spy", function() {
15         it("is useful when comparing arguments", function() {
16           var callback = jasmine.createSpy(‘callback‘); // 创建一个空的Spy
17
18           callback([1, 2, 3, 4]); // 将数组内容作为参数传入Spy中
19
20           expect(callback).toHaveBeenCalledWith(jasmine.arrayContaining([4, 2, 3]));
21           expect(callback).not.toHaveBeenCalledWith(jasmine.arrayContaining([5, 2]));
22         });
23       });
24     });
25 })();

jasmine.stringMatching

jasmine.stringMatching用来模糊匹配字符串，在jasmine.stringMatching中也可以使用正则表达式进行匹配，使用起来非常灵活。

示例13：

 1 describe(‘jasmine.stringMatching‘, function() {
 2   it("matches as a regexp", function() {
 3     expect({foo: ‘bar‘}).toEqual({foo: jasmine.stringMatching(/^bar$/)});
 4     expect({foo: ‘foobarbaz‘}).toEqual({foo: jasmine.stringMatching(‘bar‘)});
 5   });
 6
 7   describe("when used with a spy", function() {
 8     it("is useful for comparing arguments", function() {
 9       var callback = jasmine.createSpy(‘callback‘);
10
11       callback(‘foobarbaz‘);
12
13       expect(callback).toHaveBeenCalledWith(jasmine.stringMatching(‘bar‘));
14       expect(callback).not.toHaveBeenCalledWith(jasmine.stringMatching(/^bar$/));
15     });
16   });
17 });

不规则匹配（自定义匹配）：asymmetricMatch

某些场景下，我们希望能按照自己设计的规则进行匹配，此时我们可以自定义一个对象，该对象只要包含一个名为asymmetricMatch的方法即可。

示例14：

 1 describe("custom asymmetry", function() {
 2   var tester = {
 3     asymmetricMatch: function(actual) {
 4       var secondValue = actual.split(‘,‘)[1];
 5       return secondValue === ‘bar‘;
 6     }
 7   };
 8
 9   it("dives in deep", function() {
10     expect("foo,bar,baz,quux").toEqual(tester);
11   });
12
13   describe("when used with a spy", function() {
14     it("is useful for comparing arguments", function() {
15       var callback = jasmine.createSpy(‘callback‘);
16
17       callback(‘foo,bar,baz‘);
18
19       expect(callback).toHaveBeenCalledWith(tester);
20     });
21   });
22 });

注：示例中的asymmetricMatch方法使我们判断字符串以‘,‘分割之后，index为1的内容为‘bar‘。

Jasmine Clock

Jasmine中可以使用jasmine.clock()方法来模拟操纵时间。

要想使用jasmine.clock()，先调用jasmine.clock().install告诉Jasmine你想要在spec或者suite操作时间，当你不需要使用时，务必调用jasmine.clock().uninstall来恢复时间状态。

示例15：

 1 (function(){
 2     describe("Manually ticking the Jasmine Clock", function() {
 3       var timerCallback;
 4
 5       beforeEach(function() {
 6         timerCallback = jasmine.createSpy("timerCallback");
 7         jasmine.clock().install();
 8       });
 9
10       afterEach(function() {
11         jasmine.clock().uninstall();
12       });
13
14       it("causes a timeout to be called synchronously", function() {
15         setTimeout(function() {
16           timerCallback();
17         }, 100);
18
19         expect(timerCallback).not.toHaveBeenCalled();
20
21         jasmine.clock().tick(101);
22
23         expect(timerCallback).toHaveBeenCalled();
24       });
25
26       it("causes an interval to be called synchronously", function() {
27         setInterval(function() {
28           timerCallback();
29         }, 100);
30
31         expect(timerCallback).not.toHaveBeenCalled();
32
33         jasmine.clock().tick(101);
34         expect(timerCallback.calls.count()).toEqual(1);
35
36         jasmine.clock().tick(50);
37         expect(timerCallback.calls.count()).toEqual(1);
38
39         jasmine.clock().tick(50);
40         expect(timerCallback.calls.count()).toEqual(2);
41       });
42
43       describe("Mocking the Date object", function(){
44         it("mocks the Date object and sets it to a given time", function() {
45           var baseTime = new Date(2013, 9, 23);
46
47           jasmine.clock().mockDate(baseTime);
48
49           jasmine.clock().tick(50);
50           expect(new Date().getTime()).toEqual(baseTime.getTime() + 50);
51         });
52       });
53     });
54 })();

示例中使用jasmine.clock().tick(milliseconds)来控制时间前进，本例中出现了三种时间控制方式：

• setTimeout: 定期执行一次，当jasmine.clock().tick()的时间超过了timeout设置的时间时触发
• setInterval: 定期循环执行，每当jasmine.clock().tick()的时间超过了timeout设置的时间时触发
• mockDate: 模拟一个指定日期（当不提供基准时间参数时，以当前时间为基准时间）

异步支持

Jasmine可以支持spec中执行异步操作，当调用beforeEach, it和afterEach时，函数可以包含一个可选参数done，当spec执行完毕之后，调用done通知Jasmine异步操作已执行完毕。

示例16：

 1 (function(){
 2     describe("Asynchronous specs", function() {
 3       var value;
 4
 5       beforeEach(function(done) {
 6         setTimeout(function() {
 7           value = 0;
 8           done();
 9         }, 1);
10       });
11
12       // 在上面beforeEach的done()被执行之前，这个测试用例不会被执行
13       it("should support async execution of test preparation and expectations", function(done) {
14         value++;
15         expect(value).toBeGreaterThan(0);
16         done(); // 执行完done()之后，该测试用例真正执行完成
17       });
18
19       // Jasmine异步执行超时时间默认为5秒，超过后将报错
20       describe("long asynchronous specs", function() {
21
22         // 如果要调整指定用例的默认的超时时间，可以在beforeEach，it和afterEach中传入一个时间参数
23         beforeEach(function(done) {
24             // setTimeout(function(){}, 2000); // 可以试试如果该方法执行超过1秒时js会报错
25           done();
26         }, 1000);
27
28         it("takes a long time", function(done) {
29           setTimeout(function() {
30             done();
31           }, 9000);
32         }, 10000);
33
34         afterEach(function(done) {
35           done();
36         }, 1000);
37       });
38     });
39 })();

关于用法在代码中已经加了注释，另外补充一点，如果需要设置全局的默认超时时间，可以设置jasmine.DEFAULT_TIMEOUT_INTERVAL的值。

当异步执行时间超过设置的执行超时时间js将会报错：

至此为止，我们已经了解了Jasmine的所有用法，Jasmine的基本语法并不复杂，但是想要运用熟练还是需要在实际项目中慢慢实践。

参考资料

Jasmine官方：http://jasmine.github.io/2.3/introduction.html

KeenWon：http://keenwon.com/1218.html