2

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

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

4

1 回答 1

1

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

于 2013-12-07T18:27:16.163 回答