fix(find): fix error when exposed to ng-options element with a default option

Protractor will now ignore elements with the ng-bind class that don't have
a proper binding on their data, instead of blowing up when encoutering them.

Closes #165, may fix #170

Author: juliemr

lib/clientsidescripts.js

@@ -41,8 +41,11 @@ clientSideScripts.findBinding = function() {
   var bindings = using.getElementsByClassName('ng-binding');
   var matches = [];
   for (var i = 0; i < bindings.length; ++i) {
-    var bindingName = angular.element(bindings[i]).data().$binding[0].exp ||
-        angular.element(bindings[i]).data().$binding;
+    var elemData  = angular.element(bindings[i]).data();
+    if (!elemData || !elemData.$binding) {
+      continue;
+    }
+    var bindingName = elemData.$binding[0].exp || elemData.$binding;
     if (bindingName.indexOf(binding) != -1) {
       matches.push(bindings[i]);
     }
@@ -64,8 +67,11 @@ clientSideScripts.findBindings = function() {
   var bindings = using.getElementsByClassName('ng-binding');
   var matches = [];
   for (var i = 0; i < bindings.length; ++i) {
-    var bindingName = angular.element(bindings[i]).data().$binding[0].exp ||
-        angular.element(bindings[i]).data().$binding;
+    var elemData  = angular.element(bindings[i]).data();
+    if (!elemData || !elemData.$binding) {
+      continue;
+    }
+    var bindingName = elemData.$binding[0].exp || elemData.$binding;
     if (bindingName.indexOf(binding) != -1) {
       matches.push(bindings[i]);
     }
@@ -168,8 +174,11 @@ clientSideScripts.findRepeaterElement = function() {
     bindings.push(childBindings[i]);
   }
   for (var i = 0; i < bindings.length; ++i) {
-    var bindingName = angular.element(bindings[i]).data().$binding[0].exp ||
-        angular.element(bindings[i]).data().$binding;
+    var elemData  = angular.element(bindings[i]).data();
+    if (!elemData || !elemData.$binding) {
+      continue;
+    }
+    var bindingName = elemData.$binding[0].exp || elemData.$binding;
     if (bindingName.indexOf(binding) != -1) {
       matches.push(bindings[i]);
     }
@@ -215,8 +224,11 @@ clientSideScripts.findRepeaterColumn = function() {
       bindings.push(childBindings[k]);
     }
     for (var j = 0; j < bindings.length; ++j) {
-      var bindingName = angular.element(bindings[j]).data().$binding[0].exp ||
-          angular.element(bindings[j]).data().$binding;
+      var elemData  = angular.element(bindings[j]).data();
+      if (!elemData || !elemData.$binding) {
+        continue;
+      }
+      var bindingName = elemData.$binding[0].exp || elemData.$binding;
       if (bindingName.indexOf(binding) != -1) {
         matches.push(bindings[j]);
       }
@@ -226,43 +238,43 @@ clientSideScripts.findRepeaterColumn = function() {
 };
 
 /**
- * Find an input element by model name.
+ * Find input element by model name.
  *
  * arguments[0] {Element} The scope of the search.
  * arguments[1] {string} The model name.
  *
- * @return {Array.<Element?} The matching input elements.
+ * @return {Element} The first matching input element.
 */
-clientSideScripts.findInputs = function() {
+clientSideScripts.findInput = function() {
   var using = arguments[0] || document;
   var model = arguments[1];
   var prefixes = ['ng-', 'ng_', 'data-ng-', 'x-ng-', 'ng\\:'];
   for (var p = 0; p < prefixes.length; ++p) {
     var selector = 'input[' + prefixes[p] + 'model="' + model + '"]';
     var inputs = using.querySelectorAll(selector);
     if (inputs.length) {
-      return inputs;
+      return inputs[0];
     }
   }
 };
 
 /**
- * Find input elements by model name.
+ * Find an input elements by model name.
  *
  * arguments[0] {Element} The scope of the search.
  * arguments[1] {string} The model name.
  *
- * @return {Element} The first matching input element.
+ * @return {Array.<Element>} The matching input elements.
 */
-clientSideScripts.findInput = function() {
+clientSideScripts.findInputs = function() {
   var using = arguments[0] || document;
   var model = arguments[1];
   var prefixes = ['ng-', 'ng_', 'data-ng-', 'x-ng-', 'ng\\:'];
   for (var p = 0; p < prefixes.length; ++p) {
     var selector = 'input[' + prefixes[p] + 'model="' + model + '"]';
     var inputs = using.querySelectorAll(selector);
     if (inputs.length) {
-      return inputs[0];
+      return inputs;
     }
   }
 };

lib/locators.js

@@ -161,6 +161,11 @@ ProtractorBy.prototype.repeater = function(repeatDescriptor) {
               webdriver.By.js(clientSideScripts.findRepeaterRow),
               using, repeatDescriptor, index);
         },
+        findArrayOverride: function(driver, using) {
+          return driver.findElement(
+            webdriver.By.js(clientSideScripts.findAllRepeaterRows),
+            using, repeatDescriptor);
+        },
         column: function(binding) {
           return {
             findOverride: function(driver, using) {

spec/basic/findelements_spec.js

@@ -80,13 +80,24 @@ describe('locators', function() {
         expect(arr.length).toEqual(3);
       });
     });
+  });
 
+  describe('by select', function() {
     it('should find multiple selects', function() {
       browser.findElements(by.select('dayColor.color')).then(function(arr) {
         expect(arr.length).toEqual(3);
       });
     });
 
+    it('should find the select and concat its options', function() {
+      expect(element(by.select('fruit')).getText()).
+          toEqual('applepearpeachbanana');
+    });
+
+    it('should find the selected option', function() {
+      expect(element(by.selectedOption('fruit')).getText()).toEqual('apple');
+    });
+
     it('should find multiple selected options', function() {
       browser.findElements(
           by.selectedOption('dayColor.color')).then(function(arr) {
@@ -96,6 +107,8 @@ describe('locators', function() {
         expect(arr[2].getText()).toBe('blue');
       });
     });
+
+
   });
 
   describe('by repeater', function() {

testapp/form/form.html

@@ -31,6 +31,11 @@ <h4>Selects</h4>
   <div ng-repeat="dayColor in dayColors">
     <select ng-model="dayColor.color" ng-options="c for c in colors"></select>
   </div>
+
+  <select ng-model="fruit" ng-options="fruit for fruit in fruits">
+    <option value="">{{defaultFruit}}</option>
+  </select>
+  <span>Fruit: {{fruit}}</span>
 </div>
 
 <div id="checkboxes">

testapp/form/form.js

@@ -4,7 +4,12 @@ function FormCtrl($scope) {
   $scope.aboutbox = "This is a text box";
   $scope.color = "blue";
   $scope.show = true;
+
   $scope.colors = ['red', 'green', 'blue'];
   $scope.dayColors = [{day: 'Mon', color: 'red'}, {day: 'Tue', color: 'green'}, {day: 'Wed', color: 'blue'}];
+
+  $scope.fruit = '';
+  $scope.defaultFruit = 'apple'
+  $scope.fruits = ['pear', 'peach', 'banana'];
 }
 FormCtrl.$inject = ['$scope'];