3

In my application I have a controller who's scope has a model that is used for determining a condition in my view. Very standard.

Controller

$scope.shouldShow = false;
$scope.seeCoal = true;

View

<div ng-controller="SomeController" ng-if="shouldShow">
  <span id="coal" ng-show="seeCoal"></span>
</div>

Fair enough. When I change this shouldShow to something truthy, then this div will render.

How will protractor interpret this and it's contained markup? If my test does not set the shouldShow model to true, then will the #coal element be considered to be present by element.isPresent()?

Also, if (in my test) I do not set shouldShow to truthy (keep it false), and set seeCoal to false - will I be able to traverse to #coal to confirm that the ng-hide class is present, even though it's parent has an ng-if condition that evaluates to false?

In my project where I'm trying this out, I have too many uncertainties and I can't be sure as to how protractor is supposed to work in these cases.

miphe
  • 1,763
  • 1
  • 20
  • 33

1 Answers1

5

Angular's ng-if will remove its impacted elements from the DOM. So, they and their sub elements will not be visible in any form to Protractor. If shouldShow is falsey the “coal” span will not be visible to Protractor at all.

The ng-show leaves an element in the DOM but makes it invisible. See what is the difference between ng-if and ng-show/ng-hide.

A Protractor locator should be able to find an ng-show-hidden element. The isDisplayed() method on its promise should promise to return false. See How to use protractor to check if an element is visible?

Community
  • 1
  • 1
P.T.
  • 24,557
  • 7
  • 64
  • 95