![](/img/trans.png)
[英]Yup 'notRequired' method doesn't seem to be working in my form validation
[英]Jasmine doesn't seem to be calling my method
我是Jasmine的新手,似乎很难使我认为是一种童话标准的事情得以运行。
我正在通过固定装置加载HTML文件,并尝试在dom上的元素上单击。 我希望这会导致调用我要测试的JS文件的方法。 当我尝试在开发人员工具中调试此方法时,应该在我的js文件中调用的方法永远不会遇到断点。 因此,我假设未调用代码,因此也不会切换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=""> </div>
<div class="collapsed col-md-1"> </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方法,而不是触发click事件:
it('checks on click of icon toggles that icon', function () {
var myElement = $('.collapsed');
userControl.toggleState.call(myElement);
expect(myElement).toHaveClass('expanded');
});
这似乎有些奇怪,因为我能找到的所有示例都对单击感到满意。 让我摆脱困境,但我仍然想知道我在想什么。
没有源代码很难给出精确的提示。 click
.collapsed
是否涉及异步操作? 如果是这样,则将测试包装在runs(...); waitsFor(...); runs(...);
runs(...); waitsFor(...); runs(...);
可能解决问题。 查看Jasmine简介 ,了解如何执行此操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.