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

发布时间：2020-12-17 08:36:03 所属栏目：安全来源：网络整理

导读：如何找出元素在testacular(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-mod

如何找出元素在testacular(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'

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

编辑：我想补充一下，这是一个端到端的测试

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('.value-entry input').hasClass('ng-hide')).toBe(true);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!