Rails 三 中使用jasmine 测试Javascript
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
测试代码结构是:
很有rspec的风格;开始用它(Rails3);
第一步:
把
gem "jasmine"
添加到项目的特定环境组里;
然后运行
上面第二行是初始化 jasmine,他会在项目目录底下产生一些测试例子,供我们参考:
在 public/javascripts/中产生 player和song的js文件。
在spec/中产生 javascripts 文件夹,里面有一些测试例子;
我们写的测试代码就是放在这个文件夹底下;
第二步:
运行
然后点击打开http://localhost:8888可以查看自动生成的测试代码运行的结果
第三步:
配置文件在 spec/javascripts/suport/jasmine.yml
可以在里面配置包含要测试的目标js文件,css文件,测试文件存放目录等一些配置;
在spec/javascripts/helpers/里面我们可以自定义一些matcher的方法,比如里面自动产生的示例:toBePlaying方法;
第四步:开始编写测试代码;下面贡献一个我的例子:
js的功能代码
js功能的测试代码:
Jasmine Spies are test doubles that can act as stubs, spies, fakes or when used in an expecation, mocks.
在这个jasmine里面的spy很经常用,比如可以如下使用:
虽然测试js很恶心,但也要测,终于写完了这些测试。。。。可以继续研究Android啦~
虽然测试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
测试代码结构是:
describe("Jasmine", function() { it("makes testing JavaScript awesome!", function() { expect(yourCode).toBeLotsBetter(); }); });
很有rspec的风格;开始用它(Rails3);
第一步:
把
gem "jasmine"
添加到项目的特定环境组里;
然后运行
$ bundle install $ bundle exec jasmine init
上面第二行是初始化 jasmine,他会在项目目录底下产生一些测试例子,供我们参考:
在 public/javascripts/中产生 player和song的js文件。
在spec/中产生 javascripts 文件夹,里面有一些测试例子;
我们写的测试代码就是放在这个文件夹底下;
第二步:
运行
rake jasmine
然后点击打开http://localhost:8888可以查看自动生成的测试代码运行的结果
第三步:
配置文件在 spec/javascripts/suport/jasmine.yml
可以在里面配置包含要测试的目标js文件,css文件,测试文件存放目录等一些配置;
在spec/javascripts/helpers/里面我们可以自定义一些matcher的方法,比如里面自动产生的示例:toBePlaying方法;
第四步:开始编写测试代码;下面贡献一个我的例子:
js的功能代码
function matchFail_user(it){ $(it).next().val(''); var n = $(it).parent().next(); while(n.attr("class") == 'auto_clean'){ wipe_clean([n.children("input:first").attr('id')]); n = n.next(); } }
js功能的测试代码:
describe('matchFail_user',function(){ afterEach(function (){ $("#workspace").remove(); }); it('set project hidden empty and wipe clean current row', function() { $("body").append("<div id='workspace'></div>"); workspace = $("#workspace"); 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>"); bind_autocomplete('child', {}); project = $("#projects_iterations_1").get(); project_hidden = $("#projects_iterations_1").next(); spyOn(window,"wipe_clean"); matchFail_user(project) expect(project_hidden.val()).toEqual(""); expect(window.wipe_clean).toHaveBeenCalledWith([$(project).parent().next().children("input:first").attr('id')]); }); });
Jasmine Spies are test doubles that can act as stubs, spies, fakes or when used in an expecation, mocks.
在这个jasmine里面的spy很经常用,比如可以如下使用:
var Klass = function () { }; Klass.staticMethod = function (arg) { return arg; }; Klass.prototype.method = function (arg) { return arg; }; Klass.prototype.methodWithCallback = function (callback) { return callback('foo'); }; ... describe("spy behavior", function() { it('should spy on a static method of Klass', function() { spyOn(Klass, 'staticMethod'); //创建一个监视Klass.staticMethod的监视器,理论上这个是不会有返回值的,因为被拦截了,它可以使用 spyOn(Klass, 'staticMethod').andReturn("result")的方法替它返回结果,也有类似的比如andCallThrough之类的方法来真正实现这个功能; Klass.staticMethod('foo argument'); expect(Klass.staticMethod).toHaveBeenCalledWith('foo argument'); }); it('should spy on an instance method of a Klass', function() { var obj = new Klass(); spyOn(obj, 'method'); obj.method('foo argument'); expect(obj.method).toHaveBeenCalledWith('foo argument'); var obj2 = new Klass(); spyOn(obj2, 'method'); expect(obj2.method).not.toHaveBeenCalled(); }); it('should spy on Klass#methodWithCallback', function() { var callback = jasmine.createSpy(); new Klass().methodWithCallback(callback); expect(callback).toHaveBeenCalledWith('foo'); }); });
虽然测试js很恶心,但也要测,终于写完了这些测试。。。。可以继续研究Android啦~