在javascript认为文档"准备好"之前,如何让我的茉莉花测试装置加载？

Question

我很确定问题是jquery绑定设置为在$(document).ready上运行没有可用的fixture html.因此,当我发生的事件旨在通过jquery函数对DOM进行更改时,没有任何反应,我的测试失败了.我在这里看到了这个问题的"解决方案" ,但是那个对我有用的解决方案,需要更改我的工作jquery函数来绑定.live方法而不是.click方法.我有两个问题.首先,我不想更改我的工作代码,以便测试正确通过.测试框架应该测试代码是否可以在应用程序中工作,其中DOM加载和javascript绑定以正确的顺序发生.我对解决方案的第二个问题是.on和.delegate由于某种原因都不起作用,并且最终工作的唯一事情是使用当前正在被弃用的.live方法.总之,我想弄清楚如何更改我的测试或测试框架本身,以便在$(document).ready中运行的函数之前加载fixture.

我正在使用rails 3.2.8,我设置了两个不同的分支来试验茉莉花测试.其中一个分支使用jasminerice gem,另一个使用jasmine-rails gem.Javascript和jQuery(当使用.live方法时)测试所有这两个菜单中的正确传递.

以下是使用jasminerice的分支描述:

以下是我的Gemfile.lock文件中描述jasmine和jQuery设置的行:

jasminerice (0.0.9)
  coffee-rails
  haml
jquery-rails (2.1.3)
  railties (>= 3.1.0, < 5.0)
  thor (~> 0.14)

Jasminerice默认包含jasmine-jquery扩展.jasmine-jQuery扩展提供了我在测试中使用的toHaveText方法.

直接位于spec/javascripts目录中的测试文件jasmine_jquery_test.js包含以下内容:

#= require application

describe ("my basic jasmine jquery test", function(){

    beforeEach(function(){
        $('<a id="test_link" href="somewhere.html">My test link</a>').appendTo('body');
    });

    afterEach(function(){
        $('a#test_link').remove();
    });

    it ("does some basic jQuery thing", function () {
        $('a#test_link').click();
        expect($("a#test_link")).toHaveText('My test link is now longer');
    });

    it ("does some the same basic jQuery thing with a different trigger type", function () {
        $('a#test_link').trigger('click');
        expect($("a#test_link")).toHaveText('My test link is now longer');
    });

});
describe ('subtraction', function(){

    var a = 1;
    var b = 2;

    it("returns the correct answer", function(){
        expect(subtraction(a,b)).toBe(-1);
    });

});

我的javascript文件tests.js位于app/assets/javascripts目录中,其内容如下:

function subtraction(a,b){
    return a - b;
}

jQuery (function($) {
/* 
    The function I would rather use - 
    $("a#test_link").click(changeTheTextOfTheLink)
    function changeTheTextOfTheLink(e) {
        e.preventDefault()
        $("a#test_link").append(' is now longer');
    }
*/

    $("a#test_link").live('click', function(e) {
        e.preventDefault();
        $("a#test_link").append(' is now longer');
    });

});

我的application.js文件位于相同的app/assets/javascripts目录中,其内容如下:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require vendor
//= require_tree . 

并且jasmine-rails分支的描述可以在我的第一个jasmine测试相关的stackoverflow问题的内容中找到.

因此,如果有人知道如何操作测试,以便在加载灯具后运行$(document).ready函数,我非常想听听你的想法？

Answer 1

将jQuery直接添加到html fixture可以帮助我获得所需的行为.这不是这个问题的答案,但我开始相信它是目前可用的最佳解决方案.我在jasmine-rails gem设置中所做的更改,我还没有在jasminerice分支中尝试过.

这是我的测试文件:

describe ("my basic jasmine jquery test", function(){

    beforeEach(function(){
        loadFixtures('myfixture.html');
    });

    it ("does some basic jQuery thing", function () {
        $('a#test_link').click();
        expect($("a#test_link")).toHaveText('My test link is now longer');
    });

    it ("does the same basic jQuery thing with a different event initiation method", function () {
        $('a#test_link').trigger('click');
        expect($("a#test_link")).toHaveText('My test link is now longer');
    });

});
describe ('substraction', function(){

    var a = 1;
    var b = 2;

    it("returns the correct answer", function(){
        expect(substraction(a,b)).toBe(-1);
    });

});

这是我的夹具文件:

<a id="test_link" href="somewhere.html">My test link</a>

<script>
    $("a#test_link").click(changeTheTextOfTheLink)
    function changeTheTextOfTheLink(e) {
        e.preventDefault()
        $("a#test_link").append(' is now longer');
    }
</script>