angularjs - tutorial - run angular test

Comprobando si ciertos elementos son visibles o no

Question

¿Cómo averiguo si un elemento está visible u oculto en testacular (jazmín)?

Mi DOM se ve así:

<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>

O bien se muestra la selección o el cuadro de entrada, pero no ambos. Deseo verificar qué elemento es visible (en función de algunos otros criterios), pero parece que no puedo entender cómo hacer funcionar el código. He escrito el siguiente código:

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

Pero me sale un error:

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

¿Cómo puedo verificar si la entrada es visible y la selección está oculta al mismo tiempo (y viceversa)?

EDITAR: Deseo agregar aquí que esta es una prueba de extremo a extremo

Answer 1

Prueba de visibilidad

Por defecto, la pantalla está configurada en inline para la entrada, y en inline-block para seleccionar. Por lo tanto, puede determinar si actualmente se muestran mediante la prueba de la existencia de la propiedad CSS predeterminada.

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

Para verificar si alguno de ellos está oculto, reemplace en inline y en inline-block con una marca de none , que es cómo ngShow oculta un elemento.

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

Answer 2

Estabas cerca. Sin embargo, aquí es cómo debe probar la visibilidad:

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

Answer 3

Este comportamiento ha cambiado en Angular 1.2 debido a ng-animate .

El código para ngShow es:

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'');
    });
  };
}];

Lo que significa que agregará / eliminará la clase ng-hide para ocultar / mostrar el elemento.

Por lo tanto, como ejemplo, la forma correcta de probar si el elemento está oculto sería:

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