angularjs - 测试某些元素是否可见

Question

如何确定某个元素在睾丸( Jasmine )中是可见还是隐藏？

我的 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'

如何检查输入是否可见且选择是否同时隐藏(反之亦然)？

编辑:我想在这里补充一点，这是一个端到端测试

Answer 1

由于 ng-animate，这种行为在 Angular 1.2 中发生了变化。

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