new integration test for set-center-zoom;

updated test/set-center-zoom angular version;
changed example and test set-center-zoom pages to construct their zoom select elements by ng-options

docs/app/examples/set-center-zoom.html

@@ -2,12 +2,10 @@ <h2>Set Map Center and Zoom</h2>
 <esri-map id="map" center="map.center" zoom="map.zoom" basemap="{{map.basemap}}">
 </esri-map>
 <p>
-    Lat:
-    <input type="number" step="any" ng-model="map.center.lat" />Lng:
-    <input type="number" step="any" ng-model="map.center.lng" />, Zoom:
-    <select ng-model="map.zoom">
-        <option ng-repeat="level in [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]">{{level}}</option>
-    </select>
+    Lat:<input type="number" step="any" ng-model="map.center.lat" />
+    Lng:<input type="number" step="any" ng-model="map.center.lng" />,
+    Zoom: <select ng-model="map.zoom"
+        ng-options="level for level in [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]"></select>
     <button ng-click="zoomToCity(cities.SanFrancisco)">San Francisco</button>
     <button ng-click="zoomToCity(cities.NewYork)">New York</button>
 </p>

test/e2e/specs/set-center-zoom.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var helper = require('../helper');
+
+describe('Set Map Center and Zoom', function() {
+    // shared element locators
+    var map = element(by.id('map'));
+    var lat = element(by.model('map.center.lat'));
+    var lng = element(by.model('map.center.lng'));
+    var zoomSelect = element(by.model('map.zoom'));
+
+    beforeAll(function() {
+        // refer to "gulp test" task to get the baseUrl that is prepended
+        browser.get('/set-center-zoom.html');
+    });
+
+    it('should click on the "San Francisco" button and change the map "data-zoom" value, along with the lat, lng, and zoom element values', function() {
+        // element locator(s) specific to this test
+        var sanFrancisco = element(by.buttonText('San Francisco'));
+        helper.waitUntilElementIsReady(map);
+
+        sanFrancisco.click();
+
+        helper.getAsyncAttributeValue(map, 'data-zoom').then(function(newValue) {
+            var expectedZoom = '10',
+                expectedLat = '37.75',
+                expectedLng = '-122.45';
+            expect(newValue).toEqual(expectedZoom);
+            expect(zoomSelect.getAttribute('value')).toEqual('number:' + expectedZoom);
+            expect(lat.getAttribute('value')).toEqual(expectedLat);
+            expect(lng.getAttribute('value')).toEqual(expectedLng);
+        });
+    });
+
+    it('should click on the "New York" button and change the map "data-zoom" value, along with the lat, lng, and zoom element values', function() {
+        // element locator(s) specific to this test
+        var newYork = element(by.buttonText('New York'));
+        helper.waitUntilElementIsReady(map);
+
+        newYork.click();
+
+        helper.getAsyncAttributeValue(map, 'data-zoom').then(function(newValue) {
+            var expectedZoom = '12',
+                expectedLat = '40.7127',
+                expectedLng = '-74.0059';
+            expect(newValue).toEqual(expectedZoom.toString());
+            expect(zoomSelect.getAttribute('value')).toEqual('number:' + expectedZoom);
+            expect(lat.getAttribute('value')).toEqual(expectedLat);
+            expect(lng.getAttribute('value')).toEqual(expectedLng);
+        });
+    });
+
+    it('should choose a new option of "7" from the zoom select and change the map "data-zoom" value to "7"', function() {
+        helper.waitUntilElementIsReady(map);
+
+        var expectedZoom = '7';
+        zoomSelect.sendKeys(expectedZoom);
+
+        helper.getAsyncAttributeValue(map, 'data-zoom').then(function(newValue) {
+            expect(newValue).toEqual(expectedZoom);
+        });
+    });
+});

test/set-center-zoom.html

@@ -17,18 +17,16 @@ <h2>Set Map Center and Zoom</h2>
         <p>
             Lat: <input type="number" step="any" ng-model="map.center.lat" />
             Lng: <input type="number" step="any" ng-model="map.center.lng" />,
-            Zoom:
-            <select ng-model="map.zoom">
-                <option ng-repeat="level in [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]">{{level}}</option>
-            </select>
+            Zoom: <select ng-model="map.zoom"
+                ng-options="level for level in [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]"></select>
             <button ng-click="zoomToCity(cities.SanFrancisco)">San Francisco</button>
             <button ng-click="zoomToCity(cities.NewYork)">New York</button>
         </p>
 
         <!-- load Esri JavaScript API -->
         <script type="text/javascript" src="http://js.arcgis.com/3.14compact"></script>
         <!-- load Angular -->
-        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
+        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
         <!-- load angular-esri-map directives -->
         <script src="lib/angular-esri-map.js"></script>
         <!-- run example app controller -->