web-dev-qa-db-fra.com

Tester si certains éléments sont visibles ou non

Comment savoir si un élément est visible ou caché dans le testaculaire (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 s'affiche, soit la zone de saisie, mais pas les deux. Je souhaite vérifier quel élément est visible (sur la base 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 vérifier si l'entrée est visible et que la sélection est masquée en même temps (et vice versa)?

EDIT: Je souhaite ajouter ici qu'il s'agit d'un test de bout en bout

angularjskarma-runner
33
callmekatootie

Ce comportement a changé dans Angular 1.2 à cause 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 ajoutera/supprimera 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 masqué serait:

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

Tu étais proche. Cependant, voici comment tester la visibilité:

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

Test de visibilité

Par défaut, l'affichage est défini sur inline pour la saisie et inline-block pour sélectionner. Par conséquent, vous pouvez déterminer si l'un ou l'autre sont actuellement affichés 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'un ou l'autre est masqué, remplacez inline et inline-block avec une vérification pour none, c'est ainsi que ngShow cache un élément.

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