`
iseesea
  • 浏览: 46324 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

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

测试代码结构是:
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啦~





1
5
分享到:
评论

相关推荐

    konacha, 使用 mocha 测试框架和链断言库测试应用程序的Rails JavaScript.zip

    konacha, 使用 mocha 测试框架和链断言库测试应用程序的Rails JavaScript Konacha Konacha ( [koh-NAH-cha],绿茶的一种) 是一个支持你使用 mocha 插件测试框架和链断言库测试你的JavaScript的Rails 引擎。...

    Jasmine-testing:使用 Jasmine 测试 js 驱动的信用卡表单

    Jasmine 测试示例###Description 一个简单的 rails post 创建应用程序,它使用 Jasmine 进行 javascript(coffeescript) 测试。 这个 repo 紧跟 RailsCast #261。 -###设置 git clone ...

    teaspoon:Teaspoon:Rails的Javascript测试运行程序。 使用Selenium,BrowserStack或PhantomJS

    Teaspoon的目标是易于使用,同时为Rails提供最完整的Javascript测试解决方案。 Teaspoon利用了Rails资产管道,并附带了对Jasmine,Mocha和QUnit的支持。 如果您想将Teaspoon与一起使用,请查看项目。 或者,如果...

    jasmine-rails:用于项目的Jasmine运行程序,可让您在终端和浏览器中都能找到

    rails添加到您的Gemfile中group :test, :development do gem 'jasmine-rails'end下一个: $ bundle install最后,运行Rails生成器: $ rails generate jasmine_rails:install生成器将创建必要的配置文件,并将测试...

    gulp-rails:使用Gulp代替Rails资产管道的样本配置

    使用Babel.js进行JavaScript转换(带有Browserify的ES6模块支持) 使用Sass生成样式表 缓存爆裂的资产用于生产 使用车把进行模板编译 用JSHint进行ES6整理 使用QUnit和Phantom.js进行测试 使用testem进行测试 所有...

    simple_karma_jasmine_example:配置 Karma 和 Jasmine 的简单示例。 可以在 Rails 项目中使用

    这个例子展示了如何在不使用 Grunt 或 Gulp 的情况下为单元测试配置 Karma 和 Jasmine。 这里包括以下内容: 一个 package.json 文件,指定用于运行 Karma 和 Jasmine 的 NodeJS 库。 Karma 配置文件示例:karma....

    rails 5 test prescriptions build a healthy codebase

    Your Ruby on Rails ...This new edition has been updated to Rails 5.2 and RSpec 3.7 and contains full coverage of new Rails features, including system tests and the Webpack-based JavaScript setup.

    capybara-jasmine:通过 Capybara 运行 Jasmine 测试

    水豚::茉莉花 ... 将此添加到您的Rakefile (或在lib/tasks/capybara_jasmine.rake Rakefile下的 Rails 中,例如): # Load the library require 'capybara-jasmine' # In this case, I want to use webkit

    [持续测试].(Continuous.Testing).Ben.Rady&Rod.Coffin.文字版.pdf

    本书《持续测试:使用 Ruby、Rails 和 JavaScript》由 Ben Rady 和 Rod Coffin 共同编写,通过一系列实用的例子和深入的讨论,为读者提供了如何在实际项目中实施持续测试的方法和技巧。 #### 二、为何进行持续测试...

    backbone_rails:使用 Rails 学习主干

    9. **测试**:Rails的Test::Unit或RSpec用于后端测试,Backbone.js应用可能使用Jasmine或Mocha进行前端测试。 通过这个项目,学习者将掌握如何在Rails应用中构建复杂的前端逻辑,理解客户端和服务器之间的交互,...

    Do.JS:Rails 上的博客

    它可能包含了一些方便的工具、组件或最佳实践,使得在Rails应用中使用JavaScript更加顺畅。 5. **集成测试**:在Rails和JavaScript的混合环境中,确保两者之间的协同工作非常重要。这可能涉及到编写跨域请求的测试...

    js-rails-mod4

    综上所述,"js-rails-mod4"涵盖了在Rails 4.x环境中利用JavaScript模块化最佳实践进行开发的各个方面,包括模块化编程、Webpacker的使用、Asset Pipeline的理解以及与Rails的集成策略。这些知识点对于提升Rails应用...

    threejs-rails:Three.js for Rails(5.0及更高版本)

    是一个很棒的3D javascript库,可轻松在浏览器中使用WebGL(即3D对象)进行播放。 请参阅。 这个gem将通过资产管道将threejs r89添加到您的Rails应用程序中: 安装 将此行添加到您的应用程序的Gemfile中: gem '...

    thegarage-template:Rails应用模板

    带有linters的Full Rails + Javascript测试套件(RSpec,Jasmine,Rubocop,JSHint) 完整的持续集成和持续部署配置(Github,Travis CI,Heroku) 连续测试环境 电子邮件设定 各种第三方集成(NewRelic,Honey...

    angular_practice:这是练习使用Angular和Rails

    Angular使用Karma和Jasmine,Rails则有Rspec和Capybara。 通过"angular_practice"项目,你可以学习到如何整合这两个框架,创建一个完整的前后端分离的应用程序。理解并掌握这些技术,对于提升你的IT技能和职业发展...

    有主见的及时电影选择_Ruby_CoffeeScript_下载.zip

    8. **测试**:良好的项目通常包含测试代码,如RSpec(Ruby的测试框架)和Jasmine(CoffeeScript的测试框架)。了解如何编写和运行这些测试可以确保代码质量。 9. **版本控制**:项目可能使用Git进行版本控制,所以...

    school:示范学校招生系统

    而`rake jasmine`则意味着项目中可能有前端的Angular测试,Jasmine是一个流行的JavaScript测试框架,用于测试Angular应用的组件、服务和交互。 4. **API测试**:`rake spec`运行的可能是针对项目API的测试,API...

    茉莉花宝石:茉莉花Ruby

    Ruby Gem是一个帮助程序代码包,用于为基于Ruby的Web项目(Rails,Sinatra等)或在Ruby是受欢迎的合作伙伴JavaScript项目中开发Jasmine项目。 它在浏览器中提供了项目的Jasmine套件,因此您可以专注于代码,而无需...

    ionicrailsauth-frontend:使用 Rails 和 ionic 进行简单身份验证的前端客户端

    3. **Ruby on Rails**: Rails 是一个 MVC(模型-视图-控制器)框架,使用 Ruby 编程语言。它包含一套约定优于配置的规则,简化了开发过程,并且提供了强大的 ORM(对象关系映射)——ActiveRecord,用于数据库操作。...

    AwakenYourSmile:简单站点的MVC测试

    在JavaScript环境中,尽管它通常与服务器端框架如ASP.NET MVC或Ruby on Rails关联,但也可以用于构建前端应用,例如通过使用AngularJS、Ember.js或React等库。 标题“AwakenYourSmile:简单站点的MVC测试”暗示我们...

Global site tag (gtag.js) - Google Analytics