可见性测试

Question

如何确定元素在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'

如何检查输入是否可见，同时隐藏选择（反之亦然）？

编辑：我想在此添加这是一个端到端测试

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

Answer 2

你很亲密。但是，以下是测试可见性的方法：

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

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

测试某些元素是否可见

3 个答案:

可见性测试