茉莉花似乎没有调用我的方法

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 而不是触发点击事件来触发 togglestate 方法：

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

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

Answer 1

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