Testowanie, czy pewne elementy są widoczne czy nie

Question

Jak sprawdzić, czy element jest widoczny lub ukryty w testowym (jaśminowym)?

Moje DOM wygląda następująco:

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

Albo wybierz pokazanej lub polu tekstowym, ale nie jednocześnie. Chciałbym sprawdzić, który element jest widoczny (na podstawie innych kryteriów), ale nie potrafię wymyślić, jak uruchomić kod. Napisałem następujący kod:

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

ale pojawia się błąd:

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

Jak mogę sprawdzić, czy wejście jest widoczny i select jest ukryta w tym samym czasie (i vice versa) ?

EDIT: Pragnę dodać, że jest to koniec Koniec Testu

Answer 1

To zachowanie zmieniło się w kątowe 1.2 powodu ng-animate.

Kod dla ngShow jest:

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

Co oznacza, że ​​będzie dodać/usunąć klasę ng-hide ukryć/pokazać element.

Tak więc, na przykład, we właściwy sposób, aby sprawdzić, czy dany element jest ukryty byłoby:

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

Answer 2

Widoczność testową

Domyślnie wyświetlacz jest ustawiony na inline dla wejścia i inline-block dla wybranych. W związku z tym można określić, czy którekolwiek z nich są obecnie pokazywane przez testowanie pod kątem istnienia domyślnej właściwości CSS.

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

Aby sprawdzić, czy są ukryte albo wymienić inline i inline-block z czekiem na none, czyli jak ngShow ukrywa element.

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

Answer 3

Byłeś blisko. Jednak tutaj jest jak należy przetestować widoczności:

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