Verifica se alcuni elementi sono visibili o meno

Question

Come faccio a sapere se un elemento è visibile o nascosto in testacular (gelsomino)?

mio DOM assomiglia:

<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 il Select è mostrato o la casella di input, ma non entrambi. Vorrei verificare quale elemento è visibile (in base ad altri criteri), ma non riesco a capire come far funzionare il codice. Ho scritto il seguente codice:

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

ma ottengo un errore:

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

Come posso verificare se l'ingresso è visibile e di selezione è nascosto allo stesso tempo (e viceversa) ?

EDIT: Vorrei aggiungere che si tratta di un capo all'altro di prova

Answer 1

Questo comportamento è cambiato in angolare 1.2 a causa di ng-animate.

Il codice per ngShow è:

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

Il che significa che sarà aggiungere/rimuovere classe ng-hide per nascondere/mostrare l'elemento.

Così, ad esempio, il modo giusto per verificare se l'elemento è nascosto potrebbe essere:

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

Answer 2

Visibilità prova

Per impostazione predefinita, il display è impostato su inline per l'ingresso, e inline-block per selezionare. Pertanto, è possibile determinare se uno dei due è attualmente visualizzato testando l'esistenza della proprietà CSS predefinita.

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

Per verificare se uno dei due sono nascosti, sostituire inline e inline-block con un assegno di none, che è come ngShow nasconde un elemento.

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

Answer 3

Eri vicino. Tuttavia, ecco come si dovrebbe verificare la visibilità:

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