javascript - 在 javascript 认为文档为 "ready"之前，如何让我的 jasmine 测试装置加载？

Question

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

我正在使用 Rails 3.2.8，我设置了两个不同的分支来试验 jasmine 测试。其中一个分支使用 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);
    });

});

位于 app/assets/javascripts 目录中的我的 javascript 文件 tests.js 具有以下内容:

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');
    });

});

位于同一 app/assets/javascripts 目录中的我的 application.js 文件具有以下内容:

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

而jasmine-rails分支的描述可以在我的first jasmine test related stackoverflow question的内容中找到.

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

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>