Question

我是Jasmine的新手，似乎正在努力争取我认为是一种神仙的标准运行方式。

我正在通过夹具加载HTML文件并尝试调用dom上的元素点击。这个我希望调用我试图测试的JS文件的方法。当我尝试在开发人员工具中调试它时，应该在我的js文件中调用的方法永远不会遇到断点。因此我假设代码没有被调用，因此不会切换展开/折叠类。

我的测试：

describe("userExpand", function () {
beforeEach(function () {
    loadFixtures('user-expand.html');
    //userControl();



    //this.addMatchers({
    //  toHaveClass: function (className) {
    //      return this.actual.hasClass(className);
    //  }
    //});

});
    //this test works ok
it("checks the click is firing", function () {
    spyOnEvent($('.expanded'), 'click');
    $('.expanded').trigger('click');
    expect("click").toHaveBeenTriggeredOn($('.expanded'));
});
//this doesn't
it("checks the click is changing the class", function () {
    //spyOnEvent($('.collapsed'), 'click');
    var myElement = $('.collapsed');
    myElement.click();
    expect(myElement).toHaveClass('.expanded');
});

夹具的一部分：

<div class="wrapper">
    <div class="row group">
        <div class="col-md-1" data-bordercolour="">&nbsp;</div>
        <div class="collapsed col-md-1">&nbsp;&nbsp;</div>
        <div class="col-md-9">None (1)</div>

JS我试图测试：

var userControl = function () {
"use strict";

var collapse = '.collapsed';
var expand = '.expanded';
var userList = $(".userList");

function toggleState() {
    var currentControl = $(this);
    if (currentControl.hasClass('all')) {
        if (currentControl.hasClass('expanded')) {
            toggleIcon(currentControl, collapse);
            userList.find(".user-group-summary").hide()
                .end()
                .find(".user-group-info").show();
        } else {
            toggleIcon(currentControl, expand);
            userList.find(".user-group-summary").show()
            .end()
            .find(".user-group-info").hide();
        }
    } else {
        currentControl.parent().nextUntil('.group').toggle();
        currentControl.toggleClass("expanded collapsed");
        currentControl.parent().find(".user-group-summary").toggle()
        .end()
        .find(".user-group-info").toggle();
    }
};

function toggleIcon(ctrl, currentState) {
    var details = ctrl.closest('div.row').siblings('.wrapper');
    details.find(currentState).toggleClass('expanded collapsed');
    if (currentState === expand) {
        details.find('.detail').hide();
    } else {
        details.find('.detail').show();
    }
}

userList.on('click', '.expanded, .collapsed', toggleState);

$('[data-bordercolour]').each(function () {
    $(this).css("background-color", $(this).data('bordercolour'))
        .parent().nextUntil('.group')
        .find('>:first-child').css("background-color", $(this).data('bordercolour'));
});

return {
    toggleState: toggleState
};

}（）;

代码在正常使用中工作正常，所以我确信我错过了应该使用Jasmine的方式。任何帮助将不胜感激。

更新：我可以通过在测试中使用call而不是触发click事件来激活togglestate方法：

it('checks on click of icon toggles that icon', function () {
    var myElement = $('.collapsed');
    userControl.toggleState.call(myElement);
    expect(myElement).toHaveClass('expanded');
});

这看起来有点奇怪，因为我能找到的所有例子都非常满意。让我摆脱困境，但我仍然想知道我错过了什么。

Answer 1

如果没有源代码，很难给出精确的提示。 click上的.collapsed是否涉及异步操作？如果是这样，将测试包装在runs(...); waitsFor(...); runs(...);中可以解决问题。检查Jasmine introduction以了解如何执行此操作。

Jasmine似乎没有调用我的方法

1 个答案: