問題描述

我相當確定問題在于設(shè)置為在 $(document).ready 上運行的 jquery 綁定沒有可用的夾具 html.因此，當我的事件發(fā)生旨在通過 jquery 函數(shù)對 DOM 進行更改時，什么也沒有發(fā)生，我的測試也失敗了.我在這里看到了這個問題的解決方案"，但是那個解決方案這對我有用，需要更改我的工作 jquery 函數(shù)以綁定 .live 方法而不是 .click 方法.我對此有兩個問題.首先，我不想更改我的工作代碼，以便測試能夠正確通過.測試框架應(yīng)該測試代碼是否可以在應(yīng)用程序中工作，其中 DOM 加載和 javascript 綁定以正確的順序發(fā)生.我對解決方案的第二個問題是 .on 和 .delegate 由于某種原因都不起作用，唯一最終起作用的是使用 .live 方法，該方法目前正在被棄用.總之，我想弄清楚如何更改我的測試或測試框架本身，以便在 $(document).ready 中運行的函數(shù)之前加載固定裝置.

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，并且設(shè)置了兩個不同的分支來進行 jasmine 測試.其中一個分支使用 jasminerice gem，另一個使用 jasmine-rails gem.Javascript 和 jQuery(使用 .live 方法時)測試都在這兩種設(shè)置中正確通過.

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.

這里是使用茉莉花的分支的描述:

Here is a description of the branch using jasminerice:

以下是我的 Gemfile.lock 文件中描述 jasmine 和 jQuery 設(shè)置的行:

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 包含以下內(nèi)容:

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

});

我位于 app/assets/javascripts 目錄中的 javascript 文件 tests.js 包含以下內(nèi)容:

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

});

我位于同一 app/assets/javascripts 目錄中的 application.js 文件包含以下內(nèi)容:

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分支的描述可以在我的第一個 jasmine 測試相關(guān)的 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 函數(shù)，我非常想聽聽您的想法?

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 夾具對我來說可以獲得所需的行為.這并不完全是這個問題的答案，但我開始相信它是目前可用的最佳解決方案.我在 jasmine-rails gem 設(shè)置中所做的更改，我還沒有在 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>

這篇關(guān)于在 javascript 認為文檔“準備好"之前，如何讓我的 jasmine 測試裝置加載?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！