Проверка наличия определенных элементов или нет.

Как узнать, является ли элемент видимым или скрытым в testacular (жасмин)?

Мой 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: Я хочу добавить здесь, что это тест конца к концу

Ответы

Ответ 1

Это поведение изменилось в 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);

Ответ 2

Ты был близок. Тем не менее, вот как вы должны проверить видимость:

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

Ответ 3

Тест на видимость

По умолчанию на дисплее установлено значение 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');