I can't test the visibility of elements rendered in my backbone view

Question

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.com/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

Answer 1

The 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);