Rails 3 中使用jasmine 测试Javascript-优快云博客

本文介绍如何使用Jasmine进行JavaScript代码测试，包括安装配置、编写测试案例及使用spy进行模拟的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

虽然测试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');
  });
});