CODEWITHSUNDEEP
javascriptangularjs
user1968054
user1968054

Reputation: 31

Using select(name).options in Angular E2E test

I have a multi-value selector, which I am trying to write an E2E test for. Using select(name).option works fine, but when I try to use select(name).options to select multiple values it doesn't work.

I tried to put together some code together to demonstrate, but can't get it working.

HTML:

<html lang="en">
   <head>
      <title>End2end Test Runner</title>
      <script src="http://code.angularjs.org/1.0.1/angular-scenario-1.0.1.js"
      ng-autotest>
      </script>
   </head>
   <body ng-app="MyApp">
      <div ng-controller="MyAppCtrl">
         {{model.exampleValue}}
         <select id="a_selector"                 
            ng-model="model.selectedItems"
            ng-options="item.name for item in model.items"
            multiple="multiple">
         </select>
      </div>
   </body>

Javascript:

var app = angular.module('MyApp', ['ngResource'])
app.controller('MyAppCtrl', function($scope) {         
     $scope.model = {};
     $scope.model.exampleValue="an example value";
     $scope.model.items = [{"name": "Product1"}, {"name": "Product2"}];
});
app.config(['$routeProvider', function ($routeProvider, $scope) {
  $routeProvider.when('/', {controller:MyAppCtrl});
}]);
describe('my app', function() { 
  it('should display the home page', function() {                  
    browser().navigateTo('/');
    // this should work (when I can fix this code!)
    select("model.selectedItems").option("Product1");
    expect(element("#a_selector option:selected").count()).toEqual(1)

    // this doesn't, nothing is selected
    select("model.selectedItems").options("Product1", "Product2");
    expect(element("#a_selector option:selected").count()).toEqual(2)
  });
});

The line

select("model.selectedItems").option("Product1");

fails with error message:

Selector select[ng\:model="model.selectedItems"] did not match any elements.

I'd appreciate it if someone can (1) help me identify why the above code isn't working at all, and (2) help me understand why select(name).options isn't working. (I know there are other techniques I could use to achieve the same thing, but the real select in the production code also has an ng-change attribute which does not fire when I try the workarounds).

Thanks,

Graeme Ludwig.

Upvotes: 3

Views: 2217

Answers (2)

mcv
mcv

Reputation: 4439

Shouldn't select("model.selectedItems").option("Product1"); be select("#a_selector").option("Product1"); instead?

Upvotes: 0

Joy Dutta
Joy Dutta

Reputation: 3426

I am still trying to figure out why the select(name).option() is not working but I could get your example working by the following modifications:

  1. Include angular.js before angular-scenario.js
  2. Take out ngResource dependency - you don't need it here
  3. Put <span>{{model.selectedItems}}</span> after your <select> tag to see what you have chosen.

I will update once I figure out the second part.

Upvotes: 1

Related Questions