feat(protractor): new API allowAnimations(bool) on protractor elements.

Author: chirayuk

lib/clientsidescripts.js

@@ -475,6 +475,18 @@ functions.evaluate = function(element, expression) {
   return angular.element(element).scope().$eval(expression);
 };
 
+functions.allowAnimations = function(element, value) {
+  var ngElement = angular.element(element);
+  if (ngElement.allowAnimations) {
+    // AngularDart: $testability API.
+    return ngElement.allowAnimations(value);
+  } else {
+    // AngularJS
+    var enabledFn = ngElement.injector().get('$animate').enabled;
+    return (value == null) ? enabledFn() : enabledFn(value);
+  }
+};
+
 /**
  * Return the current url using $location.absUrl().
  *

lib/protractor.js

@@ -106,7 +106,7 @@ var buildElementHelper = function(ptor, opt_usingChain) {
     var elementFinder = {};
 
     var webElementFns = WEB_ELEMENT_FUNCTIONS.concat(
-        ['findElements', 'isElementPresent', 'evaluate']);
+        ['findElements', 'isElementPresent', 'evaluate', 'allowAnimations']);
     webElementFns.forEach(function(fnName) {
       elementFinder[fnName] = function() {
         var callerError = new Error();
@@ -780,6 +780,12 @@ Protractor.prototype.wrapWebElement = function(element) {
         element, expression);
   };
 
+  element.allowAnimations = function(value) {
+    thisPtor.waitForAngular();
+    return element.getDriver().executeScript(clientSideScripts.allowAnimations,
+        element, value);
+  };
+
   return element;
 };
 

spec/basic/elements_spec.js

@@ -158,7 +158,8 @@ describe('ElementFinder', function() {
       {index: 2, text: 'form'},
       {index: 3, text: 'async'},
       {index: 4, text: 'conflict'},
-      {index: 5, text: 'polling'}
+      {index: 5, text: 'polling'},
+      {index: 6, text: 'animation'}
     ]);
   });
 
@@ -186,7 +187,8 @@ describe('ElementFinder', function() {
       newExpected('form'),
       newExpected('async'),
       newExpected('conflict'),
-      newExpected('polling')
+      newExpected('polling'),
+      newExpected('animation')
     ]);
   });
 
@@ -197,7 +199,7 @@ describe('ElementFinder', function() {
       return i++;
     });
 
-    expect(labels).toEqual([1, 2, 3, 4, 5, 6]);
+    expect(labels).toEqual([1, 2, 3, 4, 5, 6, 7]);
   });
 
   it('should export an isPresent helper', function() {
@@ -207,6 +209,20 @@ describe('ElementFinder', function() {
     expect(element(by.binding('nopenopenope')).isPresent()).toBe(false);
   });
 
+  it('should export an allowAnimations helper', function() {
+    browser.get('index.html#/animation');
+    var animationTop = element(by.id('animationTop'));
+    var toggledNode = element(by.id('toggledNode'));
+
+    expect(animationTop.allowAnimations()).toBe(true);
+    animationTop.allowAnimations(false);
+    expect(animationTop.allowAnimations()).toBe(false);
+
+    expect(toggledNode.isPresent()).toBe(true);
+    element(by.id('checkbox')).click();
+    expect(toggledNode.isPresent()).toBe(false);
+  });
+
   it('should keep a reference to the original locator', function() {
     browser.get('index.html#/form');
 

testapp/alt_root_index.html

@@ -28,6 +28,7 @@
   </div>
 
   <script src="lib/angular_v1.2.9/angular.min.js"></script>
+  <script src="lib/angular_v1.2.9/angular-animate.min.js"></script>
   <script src="lib/angular_v1.2.9/angular-route.min.js"></script>
   <script src="components/app-version.js"></script>
   <script src="async/async.js"></script>
@@ -36,6 +37,7 @@
   <script src="form/form.js"></script>
   <script src="polling/polling.js"></script>
   <script src="repeater/repeater.js"></script>
+  <script src="animation/animation.js"></script>
   <script src="app.js"></script>
 </body>
 </html>

testapp/animation/animation.css

@@ -0,0 +1,24 @@
+#animationTop .animate-if {
+  background:white;
+  border:1px solid black;
+  padding:10px;
+}
+
+#animationTop .animate-if.ng-enter,
+#animationTop .animate-if.ng-leave {
+  -webkit-transition:all linear 1s;
+  -moz-transition:all linear 1s;
+  -o-transition:all linear 1s;
+  transition:all linear 1s;
+
+}
+
+#animationTop .animate-if.ng-enter,
+#animationTop .animate-if.ng-leave.ng-leave-active {
+  opacity:0;
+}
+
+#animationTop .animate-if.ng-leave,
+#animationTop .animate-if.ng-enter.ng-enter-active {
+  opacity:1;
+}

testapp/animation/animation.html

@@ -0,0 +1,10 @@
+<!-- https://docs.angularjs.org/guide/animations -->
+<div id="animationTop">
+  <label>
+    <input id="checkbox" type="checkbox" ng-model="checked" style="float:left; margin-right:10px;">
+    Click Me to toggle with animation
+  </label>
+  <div id="toggledNode" class="animate-if" ng-if="checked" style="clear:both;">
+    I exist!
+  </div>
+</div>

testapp/animation/animation.js

@@ -0,0 +1,5 @@
+function AnimationCtrl($scope) {
+  $scope.checked = true;
+};
+
+AnimationCtrl.$inject = ['$scope'];

testapp/app.js

@@ -2,14 +2,15 @@
 
 
 // Declare app level module which depends on filters, and services
-angular.module('myApp', ['ngRoute', 'myApp.appVersion']).
+angular.module('myApp', ['ngAnimate', 'ngRoute', 'myApp.appVersion']).
   config(['$routeProvider', function($routeProvider) {
     $routeProvider.when('/repeater', {templateUrl: 'repeater/repeater.html', controller: RepeaterCtrl});
     $routeProvider.when('/bindings', {templateUrl: 'bindings/bindings.html', controller: BindingsCtrl});
     $routeProvider.when('/form', {templateUrl: 'form/form.html', controller: FormCtrl});
     $routeProvider.when('/async', {templateUrl: 'async/async.html', controller: AsyncCtrl});
     $routeProvider.when('/conflict', {templateUrl: 'conflict/conflict.html', controller: ConflictCtrl});
     $routeProvider.when('/polling', {templateUrl: 'polling/polling.html', controller: PollingCtrl});
+    $routeProvider.when('/animation', {templateUrl: 'animation/animation.html', controller: AnimationCtrl});
     $routeProvider.when('/slowloader', {
       templateUrl: 'polling/polling.html',
       controller: PollingCtrl,

testapp/index.html

@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <title>My AngularJS App</title>
   <link rel="stylesheet" href="app.css"/>
+  <link rel="stylesheet" href="animation/animation.css"/>
 </head>
 <body>
   <ul class="menu">
@@ -13,21 +14,25 @@
     <li><a href="#/async">async</a></li>
     <li><a href="#/conflict">conflict</a></li>
     <li><a href="#/polling">polling</a></li>
+    <li><a href="#/animation">animation</a></li>
   </ul>
 
   <div ng-view></div>
 
   <div>Angular seed app: v<span app-version></span></div>
 
   <script src="lib/angular_v1.2.9/angular.min.js"></script>
+  <script src="lib/angular_v1.2.9/angular-animate.min.js"></script>
   <script src="lib/angular_v1.2.9/angular-route.min.js"></script>
+
   <script src="components/app-version.js"></script>
   <script src="async/async.js"></script>
   <script src="bindings/bindings.js"></script>
   <script src="conflict/conflict.js"></script>
   <script src="form/form.js"></script>
   <script src="polling/polling.js"></script>
   <script src="repeater/repeater.js"></script>
+  <script src="animation/animation.js"></script>
   <script src="app.js"></script>
 
 </body>