Jasmine doesn't seem to be calling my method

Question

I am new to Jasmine and seem to be struggling to get what I think is a fairy standard kind of thing running.

I am loading an HTML file via a fixture and trying to call a click on an element on the dom. This I would expect result in the call to the method of the JS file I am trying to test. When I try and debug this in developer tools the method that should be called in my js file never hits a breakpoint. As such I assume that code is not being called and therfore does not toggle the expand/collapse class.

My test:

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

Part of the fixture:

<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>

The JS I am trying to test:

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
};

}();

The code works fine in normal use so I am sure I am missing something obvious with the way Jasmine should be used. Any help would be appreciated.

Update: I can make the togglestate method fire by using call in the test rather than triggering a click event:

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

This seems a little strange as all the examples I can find are quite happy with click. Gets me off the hook but I would still like to know what I am missing.

Answer 1

It's hard to give a precise hint without the source code. Does click on .collapsed involve asynchronous action(s)? If so, wrapping the test in runs(...); waitsFor(...); runs(...); may solve the problem. Check the Jasmine introduction for how to do this.