परीक्षण करना कि कुछ तत्व दिखाई दे रहे हैं या नहीं

Question

मैं कैसे पता लगा सकता हूं कि कोई तत्व टेस्टाकुलर (चमेली) में दिखाई देता है या छुपा हुआ है?

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

या तो चयन दिखाया गया है या इनपुट बॉक्स, लेकिन दोनों:

मेरे डोम की तरह दिखता है। मैं यह जांचना चाहता हूं कि कौन सा तत्व दिखाई दे रहा है (कुछ अन्य मानदंडों के आधार पर), लेकिन मुझे यह पता लगाना प्रतीत नहीं होता कि कोड कैसे काम कर रहा है। मैं निम्नलिखित कोड लिखा है:

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

लेकिन मैं कोई त्रुटि मिलती है:

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

मैं अगर इनपुट दिखाई दे रहा है और चयन एक ही समय (और इसके विपरीत) में छिपा हुआ है हमें कैसे पता चलेगा ?

संपादित करें: मैं यहाँ जोड़ने के लिए कि इस परीक्षण समाप्त करने के लिए

Answer 1

यह व्यवहार कोणीय 1.2 ng-animate की वजह से में बदल गया है: हालांकि, आपके द्वारा दृश्यता का परीक्षण करना चाहिए है।

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

जिसका मतलब है कि यह जोड़/छिपाने/तत्व को दिखाने के लिए वर्ग ng-hide निकाल देंगे।

इस प्रकार, एक उदाहरण के रूप में, सही तरीके से परीक्षण करने के लिए करता है, तो तत्व छिपा हुआ है होगा:

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

Answer 2

दृश्यता टेस्ट

चयन के लिए

डिफ़ॉल्ट रूप से, प्रदर्शन इनपुट के लिए inline के लिए सेट है, और inline-block समाप्त है कामना करते हैं। इसलिए, आप यह निर्धारित कर सकते हैं कि वर्तमान में डिफ़ॉल्ट सीएसएस संपत्ति के अस्तित्व के परीक्षण के द्वारा दिखाया गया है या नहीं। यदि या तो छिपे हुए हैं

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

जाँच करने के लिए, none का चेक, जिसके कारण ngShow एक तत्व खाल के साथ inline और inline-block बदलें।

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

Answer 3

आप करीब थे।

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