Additional integration tests

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>

gulpfile.js

@@ -85,7 +85,7 @@ gulp.task('deploy-prod', ['build'], function () {
 });
 
 gulp.task('test', ['serve'], function() {
-  return gulp.src(['./test/**/*.js'])
+  return gulp.src(['./test/e2e/specs/*.js'])
     .pipe(angularProtractor({
       'configFile': 'test/e2e/conf.js',
       'args': ['--baseUrl', 'http://localhost:9002'],

test/e2e/specs/feature-layers.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var helper = require('../helper');
+
+describe('Feature Layers', function() {
+    // shared element locator(s)
+    var zoomIn = element(by.css('.esriSimpleSliderIncrementButton'));
+    var map = element(by.id('map'));
+    var mapGraphics = element(by.id('map_gc'));
+    var featureLayer1 = element(by.id('graphicsLayer1_layer'));
+    var featureLayer2 = element(by.id('graphicsLayer2_layer'));
+
+    beforeAll(function() {
+        // refer to conf.js to get the baseUrl that is prepended
+        browser.get('/feature-layers.html');
+    });
+
+    it('should check that the map has 1 polygon layer and 1 point layer', function() {
+        // element locator(s) specific to this test
+        helper.waitUntilElementIsReady(zoomIn);
+        helper.waitUntilElementIsReady(map);
+        helper.waitUntilElementIsReady(mapGraphics);
+
+        helper.getAsyncAttributeValue(featureLayer1, 'data-geometry-type').then(function(value) {
+            expect(value).toEqual('polygon');
+        });
+
+        helper.getAsyncAttributeValue(featureLayer2, 'data-geometry-type').then(function(value) {
+            expect(value).toEqual('point');
+        });
+    });
+
+    it('should click on the checkbox control and toggle on the point layer visibility', function() {
+        // element locator(s) specific to this test
+        var showTreesToggle = element(by.model('map.showTrees'));
+
+        showTreesToggle.click();
+
+        helper.getAsyncAttributeValue(featureLayer2, 'data-geometry-type').then(function() {
+            // we are not concerned with the data-geometry-type
+            // but we want to give the layer time to display itself after executing showTreesToggle.click()
+            expect(featureLayer2.getCssValue('display')).toEqual('block');
+        });
+    });
+});

test/e2e/specs/map-events.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var helper = require('../helper');
+
+describe('Map Events', function() {
+    // shared element locators
+    var map = element(by.id('map'));
+
+    beforeAll(function() {
+        // refer to "gulp test" task to get the baseUrl that is prepended
+        browser.get('/map-events.html');
+    });
+
+    it('should load the map and change the text of a "<p>" element', function() {
+        // element locator(s) specific to this test
+        var mapLoadedInfo = element(by.id('mapLoadedInfo'));
+        helper.waitUntilElementIsReady(map);
+
+        helper.getAsyncAttributeValue(map, 'data-zoom').then(function() {
+            expect(mapLoadedInfo.getText()).toBe('The map is loaded.');
+        });
+    });
+
+    it('should zoom in and change the extent information in a "<p>" element', function() {
+        // element locator(s) specific to this test
+        var extentInfo = element(by.id('extentInfo'));
+        var zoomIn = element(by.css('.esriSimpleSliderIncrementButton'));
+        helper.waitUntilElementIsReady(zoomIn);
+        helper.waitUntilElementIsReady(map);
+
+        var beforeExtent = extentInfo.getText();
+
+        zoomIn.click();
+
+        helper.getAsyncAttributeValue(map, 'data-zoom').then(function() {
+            var afterExtent = extentInfo.getText();
+            expect(afterExtent).not.toBe(beforeExtent);
+        });
+    });
+});

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

@@ -0,0 +1,68 @@
+'use strict';
+
+var helper = require('../helper');
+
+describe('Set Map Center and Zoom', function() {
+    // shared element locators
+    var map = element(by.id('map'));
+    var zoomIn = element(by.css('.esriSimpleSliderIncrementButton'));
+    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(zoomIn);
+        helper.waitUntilElementIsReady(map);
+
+        zoomIn.click(); // clicking on this first seems to help successfully execute a click on the following button
+        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(zoomIn);
+        helper.waitUntilElementIsReady(map);
+
+        zoomIn.click(); // clicking on this first seems to help successfully execute a click on the following button
+        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/e2e/specs/simple-map.js

@@ -2,7 +2,7 @@
 
 var helper = require('../helper');
 
-describe('Simple Map Example', function() {
+describe('Simple Map', function() {
     // shared element locator(s)
     var zoomIn = element(by.css('.esriSimpleSliderIncrementButton'));
     var map = element(by.id('map'));

test/e2e/specs/web-map.js

@@ -2,7 +2,7 @@
 
 var helper = require('../helper');
 
-describe('Set Basemap', function() {
+describe('Web Map', function() {
     // shared element locators
     var map = element(by.id('map'));
 
@@ -11,6 +11,15 @@ describe('Set Basemap', function() {
         browser.get('/web-map.html');
     });
 
+    it('should have a legend', function() {
+        var legend = element(by.id('legend'));
+        helper.waitUntilElementIsReady(legend);
+        // should be an instance of the legend dijit
+        helper.getAsyncAttributeValue(legend, 'widgetid').then(function(newValue) {
+            expect(newValue).toEqual('legend');
+        });
+    });
+
     it('should load 1 bookmark and then click on this bookmark to change the map "data-zoom" value to "4"', function() {
         // element locator(s) specific to this test
         var zoomIn = element(by.css('.esriSimpleSliderIncrementButton'));

test/feature-layers.html

@@ -13,8 +13,9 @@ <h2>Feature Layers</h2>
         <!-- add map to page and bind to scope map parameters -->
         <esri-map id="map" center="map.center" zoom="map.zoom" basemap="topo">
             <esri-feature-layer url="http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Portland_Parks/FeatureServer/0"></esri-feature-layer>
-            <esri-feature-layer url="http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0"></esri-feature-layer>
+            <esri-feature-layer url="http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0" visible="map.showTrees"></esri-feature-layer>
         </esri-map>
+        <p><label><input type="checkbox" ng-model="map.showTrees" /> Show trees</label></p>
         <p>Lat: {{ map.center.lat | number:3 }}, Lng: {{ map.center.lng | number:3 }}, Zoom: {{map.zoom}}</p>
         <p>Based on <a href="http://jsfiddle.net/patrickarlt/xy3nm1sq/1/">this JS Fiddle</a>.</p>
 
@@ -34,7 +35,8 @@ <h2>Feature Layers</h2>
                             lng: -122.676207,
                             lat: 45.523452
                         },
-                        zoom: 12
+                        zoom: 12,
+                        showTrees: false
                     };
                 });
         </script>

test/map-events.html

@@ -13,8 +13,8 @@ <h2>Map Events</h2>
         <!-- add map to page and bind to scope map parameters -->
         <esri-map id="map" center="map.center" zoom="map.zoom" basemap="topo" load="mapLoaded" extent-change="extentChanged">
         </esri-map>
-        <p>The map is <strong ng-show="!map.loaded">not</strong> loaded.</p>
-        <p>Extent: {{ map.extent.toJson() }}</p>
+        <p id="mapLoadedInfo">The map is <strong ng-show="!map.loaded">not</strong> loaded.</p>
+        <p id="extentInfo">Extent: {{ map.extent.toJson() }}</p>
         <!-- load Esri JavaScript API -->
         <script type="text/javascript" src="http://js.arcgis.com/3.14compact"></script>
         <!-- load Angular -->

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 -->