Jasmine jQuery: using toBeHidden () and toBeVisible ()

Question

I need help working with toBeHidden() and toBeVisible() jQuery-Jasmine methods.

When the user checks the checkbox, the text box should slide down - and uncheck its slides. The text box is hidden when the page loads.

The code works fine in my application, but I am confused by the result that I get in my tests.

The first two work - checking if the field is hidden by default and visible on the first change:

 expect($('#text-field')).toBeHidden(); // passes $('#checkbox').prop('checked', true).change(); expect($('#text-field')).toBeVisible(); // passes 

But when the checkbox is unchecked, the text field is smoothed in the real version, but it does not execute in my test:

 $('#checkbox').prop('checked', false).change(); expect($('#text-field')).toBeHidden(); // fails 

I also tried:

 expect($('#text-field')).not.toBeVisible(); // fails expect($('#text-field')).toHaveCss({display: "none"}); // fails 

Does anyone know what I'm doing wrong, or know what else I need to do to help Jasmine see that the text field has shifted?

Answer 1

You probably have the same problem as me, your view is standardly invisible in your tests because it is not tied to the DOM. Try this in your test:

 $('body').append(view); 

Answer 2

.toBeHidden and .toBeVisible or not opposites, see Jasmine-jquery docs . I advise you to use .toBeHidden and .not.toBeHidden together.

Note that .toBeHidden does this.actual.is(':hidden') , which means it doesn't take a space ( https://api.jquery.com/hidden-selector/ ), so it expects your fixtures will attach to the body.

.toBeVisible checks for this.actual.is(':visible') , which, according to jQuery docs, means that it checks whether the element has visibility: hidden or opacity: 0 . Thus, it can consume space, but should not have visibility.