특정 요소의 표시 여부 테스트
요소가 고환(재스민)에 표시되거나 숨겨져 있는지 확인하려면 어떻게 해야 합니까?
내 DOM은 다음과 같습니다.
<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'
입력이 표시됨과 동시에 선택 항목이 숨겨져 있는지 여부를 확인하려면 어떻게 해야 합니까(또는 그 반대도 마찬가지입니다.
EDIT : 이것은 엔드 투 엔드 테스트라는 것을 여기에 추가합니다.
이 동작은 Angular 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);
아슬아슬했어.단, 가시성을 테스트하는 방법은 다음과 같습니다.
expect(element('#some-id:visible').count()).toBe(1);
가시성 테스트
디폴트로는, 표시는 다음과 같이 설정되어 있습니다.inline
입력용,inline-block
를 선택합니다.따라서 디폴트 CSS 속성의 존재 여부를 테스트하여 현재 둘 중 하나가 표시되어 있는지 여부를 판단할 수 있습니다.
expect(element('.value-entry input').css('display')).toBe('inline');
expect(element('.value-entry select').css('display')).toBe('inline-block');
어느쪽이 숨겨져 있는지를 확인하려면 , 치환합니다.inline
그리고.inline-block
을 위해 수표와 함께none
이것이 ngShow가 요소를 숨기는 방법입니다.
expect(element('.value-entry input').css('display')).toBe('none');
expect(element('.value-entry select').css('display')).toBe('none');
언급URL : https://stackoverflow.com/questions/16022180/testing-whether-certain-elements-are-visible-or-not
'programing' 카테고리의 다른 글
Google API for Python 사용 - client_secrets.json 파일은 어디서 얻을 수 있습니까? (0) | 2023.03.22 |
---|---|
각도 및 SVG 필터 (0) | 2023.03.22 |
대응: 모든 항목을 재작성하지 않고 목록의 항목 하나를 업데이트합니다. (0) | 2023.03.22 |
현재 JSON 개체(예: {"name":"value"})를 '시스템' 유형으로 역직렬화할 수 없습니다.컬렉션포괄적인.리스트 1 (0) | 2023.03.22 |
WebStorm 2018.1.4 + ESLint: TypeError: 이것.CliEngine은 생성자가 아닙니다. (0) | 2023.03.22 |