Жасмин, похоже, не называет мой метод

Question

Я новичок в Jasmine и, похоже, изо всех сил пытаюсь получить то, что, как я думаю, является обычным сказочным вещью.

Я загружаю файл HTML через приспособление и пытаюсь вызвать щелчок на элементе на dom. Это я ожидаю результата в вызове метода JS-файла, который я пытаюсь проверить. Когда я пытаюсь и отлаживаю это в инструментах разработчика, метод, который должен быть вызван в моем js-файле, никогда не попадает в точку останова. Как таковой я предполагаю, что код не вызывается, и therfore не переключает класс expand/collapse.

Мой тест:

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. Любая помощь будет оценена по достоинству.

Update: я могу сделать метод 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.