在javascript认为文档“准备好”之前，如何让我的茉莉花测试装置加载？ [英] How can I get my jasmine tests fixtures to load before the javascript considers the document to be "ready"?

问题描述

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

I am fairly certain that the issue is that the jquery bindings set to run on $(document).ready do not have the fixture html available to them. So when my events occur that are intended to make a change to the DOM via a jquery function, nothing happens, and my tests fail. I saw a "solution" to this problem here, but that solution which did work for me, required changing my working jquery function to bind with the .live method instead of the .click method. I have two issue with this. First I do not want to have to change my working code so that the tests will pass properly. The testing framework ought to test whether the code will work in the app, where the DOM load and the javascript bindings occur in the correct order. The second issue I have with the solution is that .on and .delegate both did not work for some reason and the only thing that ended up working was to use the .live method which is currently in the process of being deprecated. In conclusion, I would like to figure out how to change either my tests or the testing framework itself, such that the fixtures are loaded before the functions that run in $(document).ready.

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

I am working with rails 3.2.8 and I have two different branches set up to experiment with jasmine testing. One of the branches uses the jasminerice gem and the other uses the jasmine-rails gem. The Javascript and jQuery(when using the .live method) tests all pass properly in both of these set-ups.

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

Here is a description of the branch using jasminerice:

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

Here are the lines from my Gemfile.lock file describing the jasmine and jQuery set-up:

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方法。

Jasminerice includes the jasmine-jquery extension by default. The jasmine-jQuery extension provides the toHaveText method I am using in the tests.

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

The test file jasmine_jquery_test.js which is located directly within the spec/javascripts directory contains this content:

#= 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目录中，具有以下内容：

My javascript file tests.js which is located in the app/assets/javascripts dir has this content:

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 dir中有这样的内容：

My application.js file located in the same app/assets/javascripts dir has this content:

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

jasmine-rails分支的描述可以在我的第一次茉莉花测试相关stackoverflow问题。

And the description of the jasmine-rails branch can be found in the content of my first jasmine test related stackoverflow question.

因此，如果有人知道如何操作测试，以便在加载灯具后运行$（document）.ready函数我非常想听听你的意见吗？

So if anyone has an idea how to manipulate the tests such that the $(document).ready functions are run after the fixtures are loaded I would very much like to hear your thoughts?

推荐答案

将jQuery直接添加到html fixture中，为我提供了理想的选择行为。这不是这个问题的答案，但我开始相信它是目前可用的最佳解决方案。我在jasmine-rails gem设置中所做的更改，我还没有在jasminerice分支中尝试过。

Adding the jQuery directly to the html fixture worked for me to get the desired behavior. It is not exactly an answer to this question, but I am starting to believe it's the best solution currently available. My changes where made in the jasmine-rails gem set-up and I haven't yet tried it in the jasminerice branch.

这是我的测试文件：

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>

这篇关于在javascript认为文档“准备好”之前，如何让我的茉莉花测试装置加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！