web-dev-qa-db-ja.com

特定の要素が表示されているかどうかをテストする

要素がテスタキュラー（ジャスミン）で表示または非表示になっているかどうかを確認するにはどうすればよいですか？

私の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'

入力が表示され、選択が同時に非表示になっているかどうかを確認するにはどうすればよいですか？

編集：これはエンドツーエンドのテストであることをここに追加したい

angularjskarma-runner
33
callmekatootie

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

あなたは近くにいました。ただし、可視性をテストする方法は次のとおりです。

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

視界検査

デフォルトでは、表示は入力用に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');
6
Brent Morrow