标签: jasmine-jquery

我有很多Jasmine单元测试,它们运行Javascripts代码的单元测试.他们使用Jasmine-jquery插件来进行DOM操作.他们使用loadFixture来加载HTML的装置

我尝试使用JsTestDriver和JasmineAdapter自动化这些单元测试但是所有涉及DOM-jquery操作的测试都没有通过？这有什么问题吗？有没有办法在JsTestDriver中使用Jasmine-jquery？

我不知道如何为我的JS运行这个Jasmine测试,当然其他人也有这个问题.也许我做错了或者也许这是不可能的 - 我没有找到任何暗示.问题与以下事实有关 - 在jQuery中 - $(this)与例如$("#this-id")选择的元素不同:

使用Javascript:

[..]
$("#button-id").on("click", function(e) { callSomeFunctionWith( $(this) ); } );

Jasmine-Test(CoffeeScript):

[..]
spyOn some.object, "callSomeFunctionWith"
spyOnEvent( $("#button-id"), 'click' )

$("#button-id").trigger( "click" )
expect( some.object.callSomeFunctionWith ).toHaveBeenCalledWith( $("#button-id") )

不幸的是,这个测试失败了(有任何变化,例如在我的Jasmine测试中首先将ref存储在变量中),因为函数不是用$("#button-id")调用的,而是用$(this)调用,和$(this)!= $("#button-id").

谁能告诉我如何完成这个测试？我很失落.即使是Remy Sharp关于jQuery和$(这个)的精彩文章也没有让我更进一步.

我正在尝试使用 jasmine 和 jasmine-jquery 测试一些 JavaScript

所以我有这段 Javascript 的功能

trackTransition = ()->
  $("#test").on "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", ()-> 
    console.log "trans End"

我在 spec.css 中应用了一些样式，添加了 css 过渡，并将一些 html 添加到了固定装置中，然后添加到 jasmine 规范中，如下所示：

   describe "Checks when animation finished", ->
      beforeEach ->
        @trans = spyOnEvent('#test', 'transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd')
        jasmine.Clock.useMock()
        trackTransition()

      it "Should check when transition ended", ->
        expect(@trans).not.toHaveBeenTriggered()
        jasmine.Clock.tick(1001)
        expect(@trans).toHaveBeenTriggered()

现在我已经在页面上对此进行了测试并且可以正常启动，但是在运行器上它失败了，甚至 console.log 也没有运行。你能测试一下转换吗？

 onSaveEvent: function (event) {
                if (this.model !== null) {
                    var that = this;

                    this.model.save(this.model.toJSON(), {
                        success: function (model) {
                            that.model = model;
                            that.model.attributes.isDirty = false;
                        },

                        error: function (model, xhr) {
                            that.model.attributes.isDirty = true;
                        }
                    });
                }
            }
        }

如何对模型进行单元测试,以保存Jasmine中的成功和错误响应？

对于以下注册表单，我将第一个输入字段配置id="signUpName"为在呈现表单时聚焦。Backbone-forms用于创建表单。

我想用Jasmine v.1.3.0测试加载视图时是否聚焦某个输入表单字段：

it("should focus the name field of the sign-up form", function() {
  var signUpName = userController.loginView.signUpForm.$el.find("#signUpName");
  userController.loginView.showSignUpForm();
  expect(signUpName).toBeFocused();
  // expect(signUpName.is(":focus")).toBe(true);
});

茉莉花提示：

Expected '<input id="signUpName" name="signUpName" type="text">' to be focused.

正如您从规范中看到的，我使用了jasmine-jquery 中的toBeFocused()匹配器。我运行的是最新版本的 1.5.93 扩展。我还发现了关于实现的讨论，并注意到他们同时将其更改为Ryan Greenberg 建议的替代实现。toBeFocused()

作为另一种选择，我试图监视焦点事件 - 如果真的有一个？

it("should focus the name field of the sign-up form", function() {
  var signUpName = userController.loginView.signUpForm.$el.find("#signUpName");
  var spyEvent = spyOnEvent(signUpName, 'focus');
  userController.loginView.showSignUpForm();;
  expect('focus').toHaveBeenTriggeredOn(signUpName);
  expect(spyEvent).toHaveBeenTriggered();
}); …

我用测试atm来覆盖系统的这一部分,我的事件链接的方式是首先停止传播必须从触发中取消第二个事件.

$.fn.extend({
        OnTheMoveBCTrigger: function (name, options) {
            if (!(this[0] instanceof OnTheMove_BusinessComponent)) {
                throw ('is not an instance of OnTheMove_BusinessComponent');
            } else {
                var event = $.Event(name);
                var promise = $(this).OnTheMoveTrigger(event, options);
                if (!event.isPropagationStopped()) {
                    $(onTheMove.PageDataRoles).OnTheMoveTrigger(name, options);
                }
            }
        }
    });

我想如何检查第二个事件是用jasmine-jquery触发的 spyOnEvent

    it("OnTheMoveBCTrigger chain fires event on onTheMove.PageDataRoles", function () {
        var spy = spyOnEvent(onTheMove.PageDataRoles, 'event2');
        $(window.bc).OnTheMoveBCTrigger("event2");
        expect('event2').toHaveBeenTriggeredOn(onTheMove.PageDataRoles);
        expect(spy).toHaveBeenTriggered();
    });

但现在我需要测试传播停止和第二个事件没有被触发的情况.
如何检查事件是否未被触发？

我正在为我的应用程序使用Yeoman + Angular Generator,我一直在努力与Jasmine相处!这是我被困的地方.我希望能够在Jasmine测试中使用jQuery选择器.我已经安装了karma-jasmine和karma-jasmine-jquery包.然后我为凉亭安装它(我是新的,我不知道应该为什么安装!).我手动添加了我的路径karma.conf.js,但我仍然收到这样的消息:

Running "karma:unit" (karma) task
Warning: No provider for "framework:jasmine-jquery"! (Resolving: framework:jasmine-jquery) Use --force to continue.

这就是我的业力配置的样子:

// Karma configuration
// http://karma-runner.github.io/0.12/config/configuration-file.html
// Generated on 2014-09-12 using
// generator-karma 0.8.3

module.exports = function(config) {
    'use strict';

    config.set({
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // base path, that will be used to resolve files and exclude
    basePath: '../',

    // testing framework to use …

这是我对Stack Overflow的第一个问题,Jasmine对我来说相当新,所以我希望我在这里做得很好.

我有一个Jasmine测试,我尝试将页面的滚动位置设置为某个值.实际的代码非常复杂,但我设法做了一个更简单的失败测试示例:

it("should set scrollTop to equal 100", function () {
  setFixtures("<div id='page' style='height: 1000px;'>Page content</div>");

  spyOn($.fn, "scrollTop");
  $("#page").scrollTop(100);

  expect($.fn.scrollTop).toHaveBeenCalledWith(100); // this test passes
  expect($("#page").scrollTop()).toEqual(100);
});

结果:预期0到100.

我将scrollTop设置为100并期望它就在下一行.该测试如何失败？

如果重要的话,我使用带有requirejs的Jasmine 1.3.1和jasmine-jquery作为扩展.

背景是我正在尝试在 javascript 中创建一个非常基本的恒温器，然后使用 jasmine 对其进行测试。

我希望能够测试页面是否加载了某些 css（即恒温器是正确的颜色），然后更新它。检查颜色是否更新的测试通过了，但是第一次检查初始颜色是否正确的测试没有通过。

在控制台中停止测试后，我意识到 css 样式表并未应用于测试 - 尽管它确实可以在普通的本地服务器上运行。这让我觉得我使用 loadStyleFixtures 将 css 放入 jasmine 存在一些问题。

测试看起来像这样：

describe('Display', function(){

beforeEach(function(){
  thermostat = new Thermostat();
  jasmine.getFixtures().fixturesPath = '.';
  loadFixtures('temperature_change.html');
  jasmine.getStyleFixtures().fixturesPath = './public/css';
  loadStyleFixtures('stylesheet.css');
});

...

it('can start as yellow', function(){
  expect($('#temperature').css('color')).toEqual('rgb(255, 255, 0)');
});

样式表如下所示：

body {
  background-color: navy;
  color: white;
}

#temperature { 
  color: yellow;
}

setStyleFixtures('#temperature { color: yellow; }') 如果添加到 beforeEach 函数中也不起作用。我的补丁是使用 jquery 在 beforeEach 块中添加 css 而不是需要 css 样式表。

非常感谢任何帮助！

编辑：测试间歇性地通过 - 不知道除此之外还有什么可能是我的服务器设置问题或其他问题。

JS

var link = this.notificationDiv.getElementsByTagName('a')[0];

link.addEventListener('click', function (evt){
    evt.preventDefault();
    visitDestination(next);
  }, false);
}

var visitDestination = function(next){
    window.open(next)
}

规格

  var next = "http://www.example.com"

  it( 'should test window open event', function() {

    var spyEvent = spyOnEvent('#link', 'click' ).andCallFake(visitDestination(next));;
    $('#link')[0].click();
    expect( 'click' ).toHaveBeenTriggeredOn( '#link' );
    expect( spyEvent ).toHaveBeenTriggered();

    expect(window.open).toBeDefined();
    expect(window.open).toBe('http://www.example.com');    
 });

如何编写规范以测试链接被点击时调用visitDestination并确保window.open == next？当我尝试运行规范时,它会打开新窗口.