programing

특정 요소의 표시 여부 테스트

kingscode 2023. 3. 22. 22:41
반응형

특정 요소의 표시 여부 테스트

요소가 고환(재스민)에 표시되거나 숨겨져 있는지 확인하려면 어떻게 해야 합니까?

내 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

반응형