[英]Jasmine doesn't seem to be calling my method
I am new to Jasmine and seem to be struggling to get what I think is a fairy standard kind of thing running. 我是Jasmine的新手,似乎很难使我认为是一种童话标准的事情得以运行。
I am loading an HTML file via a fixture and trying to call a click on an element on the dom. 我正在通过固定装置加载HTML文件,并尝试在dom上的元素上单击。 This I would expect result in the call to the method of the JS file I am trying to test.
我希望这会导致调用我要测试的JS文件的方法。 When I try and debug this in developer tools the method that should be called in my js file never hits a breakpoint.
当我尝试在开发人员工具中调试此方法时,应该在我的js文件中调用的方法永远不会遇到断点。 As such I assume that code is not being called and therfore does not toggle the expand/collapse class.
因此,我假设未调用代码,因此也不会切换expand / collapse类。
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=""> </div>
<div class="collapsed col-md-1"> </div>
<div class="col-md-9">None (1)</div>
The JS I am trying to test: 我正在尝试测试的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
};
}(); }();
The code works fine in normal use so I am sure I am missing something obvious with the way Jasmine should be used. 该代码在正常使用中工作正常,因此我确信我应该使用Jasmine的方式中缺少明显的东西。 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: 更新:我可以通过在测试中使用call来触发togglestate方法,而不是触发click事件:
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.
让我摆脱困境,但我仍然想知道我在想什么。
It's hard to give a precise hint without the source code. 没有源代码很难给出精确的提示。 Does
click
on .collapsed
involve asynchronous action(s)? click
.collapsed
是否涉及异步操作? If so, wrapping the test in runs(...); waitsFor(...); runs(...);
如果是这样,则将测试包装在
runs(...); waitsFor(...); runs(...);
runs(...); waitsFor(...); runs(...);
may solve the problem. 可能解决问题。 Check the Jasmine introduction for how to do this.
查看Jasmine简介 ,了解如何执行此操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.