Jasmine jQuery: Utilizzo di toBeHidden() e toBeVisible()

Question

Ho bisogno di aiuto per lavorare con i metodi toBeHidden() e toBeVisible() di jQuery-Jasmine.

Quando un utente seleziona una casella di controllo, un campo di testo dovrebbe scorrere verso il basso e deselezionarlo. Il campo di testo è nascosto quando la pagina viene caricata.

Il codice funziona correttamente nella mia applicazione, ma sono confuso dai risultati che sto ottenendo nei miei test.

I primi due stanno lavorando - controllare se il campo è nascosta per impostazione predefinita e visibile sul primo cambio:

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

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

Ma quando la casella è selezionata, il campo di testo scorre nella versione reale, ma non riesce nel mio test:

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

ho anche provato:

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

qualcuno sa cosa sto facendo male o so cos'altro devo fare per aiutare Jasmine a vedere che il campo di testo è scivolato?

Answer 1

Probabilmente hai lo stesso problema che ho fatto, la tua vista è standard invisibile nei tuoi test perché non è collegata al DOM. Prova questo nel tuo test:

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

Answer 2

.toBeHidden e .toBeVisible o meno opposti, vedere la Jasmine-jquery docs. Consiglio di utilizzare .toBeHidden e .not.toBeHidden insieme.

Si noti che .toBeHidden fa this.actual.is(':hidden') che significa che non consuma spazio (https://api.jquery.com/hidden-selector/), quindi si aspetta che i dispositivi vengano aggiunti al corpo.

.toBeVisible controlli per this.actual.is(':visible') che, secondo la documentazione jQuery, significa che controlla se l'elemento ha visibility: hidden o opacity: 0. Quindi potrebbe consumare spazio, ma non dovrebbe avere visibilità.