34

我如何确定一个元素在睾丸（茉莉花）中是可见的还是隐藏的？

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

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

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

4

3 回答 3

53

This behavior has changed in Angular 1.2 because of ng-animate.

The code for ngShow is: 

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');
    });
  };
}];

Which means that it will add/remove class ng-hide to hide/show the element.

Thus, as an example, the right way to test if the element is hidden would be:

expect(element.find('.value-entry input').hasClass('ng-hide')).toBe(true);
于 2013-10-10T09:58:32.733 回答
14

你很亲密。但是，您应该如何测试可见性：

expect(element('#some-id:visible').count()).toBe(1);
于 2013-04-23T19:39:28.043 回答
6

能见度测试

默认情况下，显示设置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');
于 2013-04-15T22:32:10.043 回答