我正在尝试为无处不在的backbone.js'todo'示例的Coffeescript实现实现视图测试(请参阅github.com/rsim/backbone_coffeescript_demo.)
除了视图事件之外,我对上述演示的茉莉花测试工作非常顺利.我希望我被困在以下一个或两个上面i)我不理解视图代码中的事件绑定,ii)我不明白如何正确设置视图代码事件的Jasmine测试.
以下是"编辑"活动的示例...
class TodoApp.TodoView extends Backbone.View
tagName: "li"
template: TodoApp.template '#item-template'
events:
"dblclick div.todo-content" : "edit"
...
initialize: ->
_.bindAll this, 'render', 'close'
@model.bind 'change', @render
@model.bind 'destroy', => @remove()
render: ->
$(@el).html @template @model.toJSON()
@setContent()
this
edit: ->
$(@el).addClass "editing"
@input.focus()
...
...现在这是对双击是否获得焦点的测试:
describe "edit state", ->
li = null
beforeEach ->
setFixtures('<ul id="todo-list"></ul>')
model = new Backbone.Model id: 1, content: todoValue, done: false
view = new TodoApp.TodoView model: model, template: readFixtures("_item_template.html")
$("ul#todo-list").append(view.render().el)
li = $('ul#todo-list li:first')
target …我想在所有测试之前做一些事情,之后呢？组织代码的最佳方法是什么？例如:备份一些变量 - >清除它们 - >测试一些东西 - >恢复备份.'beforeEach'和'afterEach'太昂贵了.谢谢!
我需要帮助使用jQuery-Jasmine的方法toBeHidden()和toBeVisible()方法.
当用户选中复选框时,文本字段应向下滑动 - 并取消选中将其向上滑动.页面加载时隐藏文本字段.
代码在我的应用程序中工作正常,但我对我在测试中得到的结果感到困惑.
前两个正在工作 - 检查字段是否默认隐藏并在第一次更改时可见:
expect($('#text-field')).toBeHidden(); // passes
$('#checkbox').prop('checked', true).change();
expect($('#text-field')).toBeVisible(); // passes
但是当取消选中该复选框时,文本字段会在实际版本中向上滑动但在我的测试中失败:
$('#checkbox').prop('checked', false).change();
expect($('#text-field')).toBeHidden(); // fails
我也尝试过:
expect($('#text-field')).not.toBeVisible(); // fails
expect($('#text-field')).toHaveCss({display: "none"}); // fails
有谁知道我做错了什么或知道我还需要做些什么来帮助Jasmine看到文本字段滑了？
我试图配置Karma使用jasmine-jquery但没有成功...
在我的karma.conf.js文件中,我配置了框架:
frameworks: ['jasmine'],
并加载了所需的依赖项:
files: [
'../bower_components/jquery/dist/jquery.js',
'../bower_components/jasmine-jquery/lib/jasmine-jquery.js',
...
但是当我使用grunt测试运行我的测试时,我有以下内容:
TypeError: undefined is not a function
at null.<anonymous> (/home/sofarell/workspace/myapp/bower_components/jasmine-jquery/lib/jasmine-jquery.js:352:13)
看一下jasmine-jquery.js的源代码,看起来好像没有找到jasmine引用,因为在jasmine之前加载了jasmine-jquery:
351. beforeEach(function () {
352. jasmine.addMatchers({
353. toHaveClass: function () {
还有其他人遇到过这个问题吗？有办法解决这个问题吗？
我正在使用karma + jasmine + jquery + jasmine-jquery我有几个纯js单元测试,现在是时候继续编写一些html依赖测试了.我尝试了jasmine-jquery及其loadFixtures,但无论我尝试什么,我仍然会收到错误而没有任何有用的消息.
我创建了一个简单的项目来隔离测试事物,这是我的设置:
.
??? karma.conf.js
??? package.json
??? spec
? ??? javascripts
? ??? fixtures
? ??? simple.test.html
??? src
??? test
??? js
??? simple.test.js
的package.json
{
"dependencies": {
"karma": "0.12.31",
"jasmine": "2.1.1",
"karma-jasmine": "0.3.5",
"jasmine-jquery": "2.0.6",
"karma-jasmine-jquery": "0.1.1",
"karma-teamcity-reporter": "0.1.2"
},
"devDependencies": {
"karma-chrome-launcher": "~0.1.7",
"karma-firefox-launcher": "~0.1.4"
}
}
规格/ Java脚本/夹具/ simple.test.html
<body>
Test
</body>
的src /测试/ JS/simple.test.js
describe('simple', function () {
beforeEach(function () {
loadFixtures('simple.test.html');
});
it('test', function () {
expect(true).toBeTruthy(); …我在一个方法上进行间谍活动的例子是失败,"已经调用了预期的间谍handle_click".什么时候应该通过.但是,我收到控制台日志"Foo handle_click called!",所以我知道它正在调用.
Foo.js
function Foo() {
this.$btn = $('<a href="#">Foo</a>');
this.$btn.on('click', this.handle_click);
};
Foo.prototype.handle_click = function(evt) {
evt.preventDefault();
console.log('Foo handle_click called!');
};
Foo_spec.js:
it('should be called when trigger is clicked', function() {
var foo = new Foo();
spyOn( foo, 'handle_click' ).andCallThrough();
foo.$btn.click();
expect( foo.handle_click ).toHaveBeenCalled();
});
我使用的是jasmine-1.2.0,jasmin-html和jasmine-jquery,但不是jasmine-sinon; 至少我不认为它捆绑在那里.任何帮助深表感谢!
更新 以下解答.但是,我想在jQuery插件的情况下记录解决方案:
Foo.js:
function Foo() { ... }
Foo.prototype.handle_click = function(evt) { ... }
$.fn.foo = function(options) {
return new Foo(this, options || {});
};
$.fn.foo.prototype = Foo.prototype;
Foo_spec.js:
it('should be …给出以下指令
directive('myDirective', function() {
return {
restrict: 'A',
scope: {},
replace: false,
template: '<input ng-focus="onFocus()" type="text" />',
link: function(scope, element, attr) {
scope.onFocus = function() {
console.log('got focus');
};
}
};
});
我已经测试了焦点观察器在浏览器中工作,但我希望能够在单元测试中触发它.这是我尝试过的,但它不起作用.
var element = angular.element('<div my-directive></div>');
$compile(element)($scope);
$scope.$digest();
element.find('input')[0].focus();
我可以看到我正确地使用find调用进入输入框,我希望代码在输入框上触发焦点事件,但什么也没发生.我在这里错过了什么？
在jasmine.js版本1.3.1中,我的测试套件的夹具工作正常.将Jasmine.js版本升级到2.0.0后,灯具无效.
任何人都可以解释,如何使我的代码在jasmine.js版本2.0.0中适用于fixtures？
我已经检查了这个jasmine v2.0.0发行说明,但没有任何内容与fixtures相关:https://github.com/pivotal/jasmine/blob/v2.0.0/release_notes/20.md
谢谢.
我想做什么:我们正在为使用jQuery的现有Javascript代码库编写一些测试.对于测试,我们不希望有实际的HTML元素(HTML fixture).如果我们有一个不与HTML相关的jQuery模拟对象,我们更喜欢它.
我的出发点:我在这里找到的最有希望的方法:
http://eclipsesource.com/blogs/2014/03/27/mocks-in-jasmine-tests/
这将创建一个辅助方法,通过遍历对象的函数并为每个函数创建间谍来创建模拟:
window.mock = function (constr, name) {
var keys = [];
for (var key in constr.prototype)
keys.push( key );
return keys.length > 0 ? jasmine.createSpyObj( name || "mock", keys ) : {};
};
然后,如果我正确地理解他,他就会使用这个(他在博客文章中改编的例子):
var el = mock($);
el('.some-not-existing-class').css('background', 'red');
expect(el.css).toHaveBeenCalledWith('background', 'red');
但是,这不起作用,因为它el是一个object而不是一个function.
我的方法来解决这个问题:我重构自己的mock功能,考虑到该案件constr是function:
mock (constr, name) {
var keys = [];
for (var key in constr.prototype)
keys.push(key);
var result = …你好我有一个关于使用Jasmine进行单元测试的问题(插件:jQuery)
如何测试对象是否在文档的DOM中.问题是我使用的工具提示功能只有在模拟事件时才会被激活.当模拟效果时,对象附加到DOM,我想检查它是否可见.
it("test 1: should invoke the Tooltip() function.", function () {
spyEvent = spyOnEvent('.span_width', "mouseover");
$('.span_width').simulate('mouseover');
expect('mouseover').toHaveBeenTriggeredOn('.span_width');
expect(spyEvent).toHaveBeenTriggered();
# A TEST TO check if .tooltip is visible???
# IN JQUERY would that be: $('.tooltip').is(':visible');
});
jasmine ×10
jasmine-jquery ×10
jquery ×6
javascript ×4
backbone.js ×2
angularjs ×1
bdd ×1
gruntjs ×1
karma-runner ×1
prototype ×1
unit-testing ×1