I'm working on a Backbone.js application and while adding tests with Jasmine & Sinon I had problems to determine the visibility of some DOM elements: some of them where detected as not visible in the tests while I could see them correctly in my application.
I created a small example that replicates the problem, the same test is run twice on two sets of elements:
- the first set is present directly in SpecRunner.html
- the second one has been rendered as a Backbone view
The test itself is using jQuery.is(':visible')
(via jasmine-jquery's .toBeVisible()
) to know if elements are visible or not. It passes for the first set, not for the second one.
I shared the code here as a github project :
I guess I forgot something, or maybe misused a library, but I can't put my finger on it so if you have any clue... :)
Thanks! Maxime
I'm working on a Backbone.js application and while adding tests with Jasmine & Sinon I had problems to determine the visibility of some DOM elements: some of them where detected as not visible in the tests while I could see them correctly in my application.
I created a small example that replicates the problem, the same test is run twice on two sets of elements:
- the first set is present directly in SpecRunner.html
- the second one has been rendered as a Backbone view
The test itself is using jQuery.is(':visible')
(via jasmine-jquery's .toBeVisible()
) to know if elements are visible or not. It passes for the first set, not for the second one.
I shared the code here as a github project : https://github./maximevaly/3789_js
I guess I forgot something, or maybe misused a library, but I can't put my finger on it so if you have any clue... :)
Thanks! Maxime
Share asked Jun 7, 2012 at 12:00 Maxime ValyMaxime Valy 1131 silver badge5 bronze badges1 Answer
Reset to default 9The issue is that your StuffView.el
is not attached to DOM, hence is always not visible. You probably misunderstand className
and tagName
parameters: they aren't used as selectors, but to construct a brand new element.
This fixes the second test.
el : "div.container",
//tagName : 'div',
//className : 'container',
Alternatively you can attach the view to DOM manually in the test
$("body").append(this.view.el);