Rails 3 中使用jasmine 测试Javascript

中关村村草

转：iseesea

Rails 3 中使用jasmine 测试Javascript

虽然测试js代码很恶心；但是要测试，特别是写很多js的时候；
在一个项目中，使用jasmine来测试我们一个需要很多很多js代码的页面；对于那个页面，我都觉得都已经写了一个Js的UI了。。。。当初没有用现成的JS UI框架，真是失误啊～
Jasmine is a behavior-driven development framework for testing your JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.
这是jasmine的介绍；
项目链接：http://pivotal.github.com/jasmine/index.html

测试代码结构是：
Javascript代码

1. describe("Jasmine", function() {   
   
2.   it("makes testing JavaScript awesome!", function() {   
   
3.     expect(yourCode).toBeLotsBetter();   
   
4.   });   
   
5. });  

复制代码

很有rspec的风格；开始用它（Rails3）；
第一步：
把
gem "jasmine"
添加到项目的特定环境组里；
然后运行
Ruby代码

1. $ bundle install   
   
2. $ bundle exec jasmine init  
   

复制代码

上面第二行是初始化 jasmine，他会在项目目录底下产生一些测试例子，供我们参考：
在 public/javascripts/中产生 player和song的js文件。
在spec/中产生 javascripts 文件夹，里面有一些测试例子；
我们写的测试代码就是放在这个文件夹底下；
第二步：
运行
Ruby代码

1. rake jasmine

复制代码

然后点击打开http://localhost:8888可以查看自动生成的测试代码运行的结果
第三步：
配置文件在 spec/javascripts/suport/jasmine.yml
可以在里面配置包含要测试的目标js文件，css文件，测试文件存放目录等一些配置；
在spec/javascripts/helpers/里面我们可以自定义一些matcher的方法，比如里面自动产生的示例：toBePlaying方法；
第四步：开始编写测试代码；下面贡献一个我的例子：
js的功能代码
Javascript代码

1. function matchFail_user(it){
   
2.      $(it).next().val('');
   
3.      var n = $(it).parent().next();
   
4.     while(n.attr("class") == 'auto_clean'){
   
5.         wipe_clean([n.children("input:first").attr('id')]);
   
6.         n = n.next();
   
7.     }
   
8. }

复制代码

js功能的测试代码：
Javascript代码

1. describe('matchFail_user',function(){
   
2. 
   
3.     afterEach(function (){
   
4.       $("#workspace").remove();
   
5.     });
   
6. 
   
7. 
   
8.     it('set project hidden empty and wipe clean current row', function() {
   
9.         $("body").append("<div id='workspace'></div>");
   
10.         workspace = $("#workspace");
    
11.         workspace.html("<tr><td><input id='log_entry_1_log_time'></input><input type='text' value='stud' id='projects_iterations_1'></input><input id='project_hidden' type='hidden' value='58'></input></td><td class='auto_clean'><input id='child' type='text' value='king' /></td></tr>");
    
12.         bind_autocomplete('child', {});
    
13.         project = $("#projects_iterations_1").get();
    
14.         project_hidden = $("#projects_iterations_1").next();
    
15.         spyOn(window,"wipe_clean");
    
16.         
    
17.         matchFail_user(project)
    
18.         expect(project_hidden.val()).toEqual("");
    
19.         expect(window.wipe_clean).toHaveBeenCalledWith([$(project).parent().next().children("input:first").attr('id')]);
    
20. 
    
21. 
    
22.     });
    
23. 
    
24.   });

复制代码

Jasmine Spies are test doubles that can act as stubs, spies, fakes or when used in an expecation, mocks.
在这个jasmine里面的spy很经常用，比如可以如下使用：
Javascript代码

1. var Klass = function () {
   
2. };
   
3. 
   
4. Klass.staticMethod = function (arg) {
   
5.   return arg;
   
6. };
   
7. 
   
8. Klass.prototype.method = function (arg) {
   
9.   return arg;
   
10. };
    
11. 
    
12. Klass.prototype.methodWithCallback = function (callback) {
    
13.   return callback('foo');
    
14. };
    
15. 
    
16. ...
    
17. 
    
18. describe("spy behavior", function() {
    
19.   it('should spy on a static method of Klass', function() {
    
20.     spyOn(Klass, 'staticMethod');
    
21. //创建一个监视Klass.staticMethod的监视器，理论上这个是不会有返回值的，因为被拦截了，它可以使用    spyOn(Klass, 'staticMethod').andReturn("result")的方法替它返回结果，也有类似的比如andCallThrough之类的方法来真正实现这个功能；
    
22.     Klass.staticMethod('foo argument');
    
23. 
    
24.     expect(Klass.staticMethod).toHaveBeenCalledWith('foo argument');
    
25.   });
    
26. 
    
27.   it('should spy on an instance method of a Klass', function() {
    
28.     var obj = new Klass();
    
29.     spyOn(obj, 'method');
    
30.     obj.method('foo argument');
    
31. 
    
32.     expect(obj.method).toHaveBeenCalledWith('foo argument');
    
33. 
    
34.     var obj2 = new Klass();
    
35.     spyOn(obj2, 'method');
    
36.     expect(obj2.method).not.toHaveBeenCalled();
    
37.   });
    
38. 
    
39.   it('should spy on Klass#methodWithCallback', function() {
    
40.     var callback = jasmine.createSpy();
    
41.     new Klass().methodWithCallback(callback);
    
42. 
    
43.     expect(callback).toHaveBeenCalledWith('foo');
    
44.   });
    
45. });
    

复制代码

虽然测试js很恶心，但也要测，终于写完了这些测试。。。。