Kiểm tra xem các thành phần nhất định có hiển thị hay không

Question

Làm cách nào để tìm hiểu xem một phần tử có thể nhìn thấy hoặc ẩn trong chữ hoa nhài (hoa nhài)?

DOM của tôi trông giống như:

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

Hoặc là chọn được hiển thị hoặc hộp đầu vào, nhưng không phải cả hai. Tôi muốn kiểm tra xem phần tử nào có thể nhìn thấy (dựa trên một số tiêu chí khác), nhưng tôi dường như không thể tìm ra cách để mã hoạt động. Tôi đã viết đoạn mã sau:

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

Nhưng tôi nhận được một lỗi:

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

Làm thế nào để kiểm tra xem các đầu vào là có thể nhìn thấy và chọn được giấu tại cùng một thời gian (và ngược lại) ?

EDIT: Tôi muốn thêm ở đây rằng đây là dấu chấm hết cho kết thúc thử nghiệm

Answer 1

Hành vi này đã thay đổi ở góc 1,2 do ng-animate.

Mã này cho ngShow là:

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

Có nghĩa là nó sẽ thêm/gỡ bỏ các lớp ng-hide để ẩn/hiển thị phần tử.

Như vậy, làm ví dụ, đúng cách để kiểm tra xem các phần tử được ẩn sẽ là:

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

Answer 2

Tầm nhìn thử

Theo mặc định, màn hình được thiết lập để inline cho đầu vào, và inline-block cho chọn. Do đó, bạn có thể xác định liệu một trong hai hiện có được hiển thị hay không bằng cách kiểm tra sự tồn tại của thuộc tính CSS mặc định.

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

Để kiểm tra nếu một trong hai được ẩn, thay thế inline và inline-block với một tấm séc cho none, đó là cách ngShow ẩn một phần tử.

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

Answer 3

Bạn thân thiết. Tuy nhiên, dưới đây là cách bạn nên kiểm tra khả năng hiển thị:

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