Tester si certains éléments sont visibles ou non

Question

Comment puis-je savoir si un élément est visible ou caché dans testacular (jasmin)?

Mon DOM ressemble:

<div class="span5 value-entry"> 
    <input type="text" ng-model="query.value" placeholder="Enter value" class="input-large" ng-show="genericInput(criteria.attribute)"> 
    <select ng-model="query.value" ng-options="entry for entry in filteredValue(criteria.attribute)" class="input-medium" ng-show="!genericInput(criteria.attribute)"> 
     <option value="">-- Select Value --</option>. 
    </select> 
</div> 

Soit la sélection est affichée ou la zone d'entrée, mais pas les deux. Je souhaite vérifier quel élément est visible (en fonction d'autres critères), mais je n'arrive pas à comprendre comment faire fonctionner le code. J'ai écrit le code suivant:

expect(element('.value-entry input').is(':visible')).toBe(true); 

Mais je reçois une erreur:

TypeError: Object #<Object> has no method 'is' 

Comment puis-je vérifier si l'entrée est visible et la sélection est caché en même temps (et vice versa) ?

EDIT: Je voudrais ajouter ici que c'est une fin pour mettre fin à essai

Answer 1

Ce comportement a changé angulaire 1.2 en raison de ng-animate.

Le code pour ngShow est:

var ngShowDirective = ['$animate', function($animate) { 
    return function(scope, element, attr) { 
    scope.$watch(attr.ngShow, function ngShowWatchAction(value){ 
     $animate[toBoolean(value) ? 'removeClass' : 'addClass'](element, 'ng-hide'); 
    }); 
    }; 
}]; 

Ce qui signifie qu'il va ajouter/supprimer la classe ng-hide pour masquer/afficher l'élément.

Ainsi, à titre d'exemple, la bonne façon de tester si l'élément est caché serait:

expect(element.find('.value-entry input').hasClass('ng-hide')).toBe(true); 

Answer 2

visibilité test

Par défaut, l'affichage est réglé sur inline pour l'entrée et inline-block pour sélection. Par conséquent, vous pouvez déterminer si l'un ou l'autre est actuellement affiché en testant l'existence de la propriété CSS par défaut.

expect(element('.value-entry input').css('display')).toBe('inline'); 
expect(element('.value-entry select').css('display')).toBe('inline-block'); 

Pour vérifier si l'sont cachés, et remplacer inlineinline-block un chèque de none, qui est la façon dont ngShow cache un élément.

expect(element('.value-entry input').css('display')).toBe('none'); 
expect(element('.value-entry select').css('display')).toBe('none'); 

Answer 3

Vous étiez proche. Cependant, voici comment vous devez tester la visibilité:

expect(element('#some-id:visible').count()).toBe(1);