为什么jQuery代码在我的jasmine测试中没有执行，或者至少没有执行？ [英] Why is the jQuery code not executing, or at least not appearing to execute, in my jasmine test?

问题描述

我使用jasmine-rails gem运行Rails 3.2.8。以下是我的Gemfile中描述茉莉花设置的行：

I am running Rails 3.2.8 with the jasmine-rails gem. Here are the lines from my Gemfile describing the jasmine set-up:

 jasmine (1.2.1)
  jasmine-core (>= 1.2.0)
  rack (~> 1.0)
  rspec (>= 1.3.1)
  selenium-webdriver (>= 0.1.3)
jasmine-core (1.2.0)
jasmine-headless-webkit (0.8.4)
  coffee-script
  jasmine-core (~> 1.1)
  multi_json
  rainbow
  sprockets (~> 2)
jasmine-rails (0.1.0)
  jasmine
  jasmine-headless-webkit
  rails (>= 3.1.0)

我也在使用 jasmine-jquery 扩展名。这组函数提供了我在测试中使用的toHaveText方法。我已将jasmine-jquery扩展文件保存到spec / javascripts / helpers目录中。

I am also using the jasmine-jquery extension. This set of functions provide the toHaveText method I am using in the tests. I have saved the jasmine-jquery extensions file into the spec/javascripts/helpers directory.

名为UserInvitationsSpec.js的测试文件直接位于spec / javascripts目录中包含以下内容：

The test file called UserInvitationsSpec.js that is located directly within the spec/javascripts dir contains this content:

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

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

    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测试，以显示非jQuery测试正在按预期工作。

as you can see, I have included a basic javascript test in order to show that the non-jQuery test is working as expected.

我的javascript文件core.js位于app / assets / javascripts dir中有这样的内容：

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

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

jQuery (function($) {

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

});

当我通过终端运行'bundle exec jasmine-headless-webkit'时，这是输出：

And when I run 'bundle exec jasmine-headless-webkit' via the terminal, this is the output:

FF.
FAIL: 3 tests, 2 failures, 0.013 secs.

my basic jasmine jquery test does some basic jQuery thing. (/Users/rebekah/OPSWAT/opswat_cwm/spec/javascripts/UserInvitationsSpec.js:11)
  Expected '<a id="test_link" href="somewhere.html">My test link</a>' to have text 'My test link is now longer'. (line ~13)
    expect($("a#test_link")).toHaveText('My test link is now longer');

my basic jasmine jquery test does some the same basic jQuery thing with a different trigger type. (/Users/rebekah/OPSWAT/opswat_cwm/spec/javascripts/UserInvitationsSpec.js:16)
  Expected '<a id="test_link" href="somewhere.html">My test link</a>' to have text 'My test link is now longer'. (line ~18)
    expect($("a#test_link")).toHaveText('My test link 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.yml文件位于spec / javascripts / support dir中有以下内容：

And my jasmine.yml file that is located in the spec/javascripts/support dir has this content:

 src_files:
  - "application.{js,coffee}"

 stylesheets:

 helpers:
   - "helpers/**/*.{js,coffee}"

 spec_files:
   - "**/*[Ss]pec.{js,coffee}"

 src_dir: "app/assets/javascripts"

 spec_dir: spec/javascripts

 asset_paths:
  - "vendor/assets/javascripts"

知道为什么jQuery函数能够正常工作在应用程序中没有在测试环境中执行？

Any idea why the jQuery function that works properly in the app is not being executed in the test environment?

非常感谢！

-Rebekah

推荐答案

jQuery的 document.ready 事件（ jQuery（ function（$）{...}）; ）在Jasmine的 beforeEach 之前运行，这意味着你正试图将点击处理器绑定到链接尚未添加到文档中的et。

jQuery's document.ready event (jQuery(function ($) { … });) is running before Jasmine's beforeEach, which means you're trying to bind a click hander to a link that hasn't been added to the document yet.

这是一个简化的例子：

// application.js

jQuery(function ($) {
    console.log("In document.ready");
});

// test_spec.js

describe("the order of things", function () {
    beforeEach(function () {
        console.log("In beforeEach");
    });

    it("should run some tests", function () {
        console.log("In test");
    });
});

这给出了这个输出：

$ bundle exec jasmine-headless-webkit
"In document.ready"

Running Jasmine specs...
"In before each"
"In test"
.
PASS: 1 test, 0 failures, 0.004 secs.

不幸的是，我在 Jasmine Headless Webkit （这是jasmine-rails在幕后使用的）。

Unfortunately, I can't find anything in the documentation for Jasmine Headless Webkit (which is what jasmine-rails uses behind the scenes) about using a custom HTML template.

这篇关于为什么jQuery代码在我的jasmine测试中没有执行，或者至少没有执行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！