2013-10-29 3 views
6

Ich brauche Hilfe bei der Arbeit mit den toBeHidden() und toBeVisible() Methoden von jQuery-Jasmine.Jasmine jQuery: mit toBeHidden() und toBeVisible()

Wenn ein Benutzer ein Kontrollkästchen aktiviert, sollte ein Textfeld nach unten gleiten - und das Häkchen lässt es nach oben gleiten. Das Textfeld ist ausgeblendet, wenn die Seite geladen wird.

Der Code funktioniert gut in meiner Anwendung, aber ich bin verwirrt über die Ergebnisse, die ich in meinen Tests bekomme.

Die ersten beiden arbeiten - zu überprüfen, ob das Feld standardmäßig aktiviert und sichtbar auf der ersten Änderung verbirgt:

expect($('#text-field')).toBeHidden(); // passes 

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

Aber wenn das Kontrollkästchen nicht markiert ist, gleitet das Textfeld in der realen Version, aber scheitert in meinem Test:

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

habe ich auch versucht:

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

weiß jemand, Was mache ich falsch oder weiß, was ich noch tun muss, um Jasmine zu helfen, dass das Textfeld aufgleitet?

Antwort

10

Sie haben wahrscheinlich das gleiche Problem, das ich gemacht habe, Ihre Ansicht ist in Ihren Tests standardmäßig unsichtbar, weil sie nicht an das DOM angehängt ist. Versuchen Sie dies in Ihrem Test:

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

.toBeHidden und .toBeVisible oder keine Gegensätze finden Sie in der Jasmine-jquery docs. Ich rate Ihnen, und .not.toBeHidden in Verbindung zu verwenden.

Beachten Sie, dass tut this.actual.is(':hidden') was bedeutet, dass es keinen Platz verbraucht (https://api.jquery.com/hidden-selector/), so dass Ihre Fixtures an den Körper angefügt werden.

.toBeVisible prüft this.actual.is(':visible'), die nach den jQuery docs bedeutet, dass sie überprüft, ob das Element oder visibility: hiddenopacity: 0 hat. Es könnte also Platz verbrauchen, sollte aber keine Sichtbarkeit haben.