Integration testing

gulpfile.js

@@ -11,6 +11,7 @@ var runSequence = require('run-sequence');
 var gutil = require('gulp-util');
 var browserSync = require('browser-sync');
 var deploy = require('gulp-gh-pages');
+var angularProtractor = require('gulp-angular-protractor');
 
 // source directives and services
 var srcJsFiles = 'src/**/*.js';
@@ -83,5 +84,18 @@ gulp.task('deploy-prod', ['build'], function () {
     }));
 });
 
+gulp.task('test', ['serve'], function() {
+  return gulp.src(['./test/**/*.js'])
+    .pipe(angularProtractor({
+      'configFile': 'test/e2e/conf.js',
+      'args': ['--baseUrl', 'http://localhost:9002'],
+      'autoStartStopServer': true
+      // 'debug': true
+    }))
+    .on('error', function(e) {
+      throw e;
+    });
+});
+
 // Default Task
 gulp.task('default', ['serve']);

package.json

@@ -19,7 +19,9 @@
     "gulp-strip-debug": "~0.3.0",
     "gulp-uglify": "~0.3.0",
     "gulp-util": "~2.2.16",
-    "run-sequence": "~0.3.6"
+    "run-sequence": "~0.3.6",
+    "protractor": "~2.2.0",
+    "gulp-angular-protractor": "~0.0.2"
   },
   "repository": {
     "type": "git",

test/e2e/.jshintrc

@@ -0,0 +1,30 @@
+{
+  "node": true,
+  "bitwise": true,
+  "camelcase": true,
+  "curly": true,
+  "eqeqeq": true,
+  "immed": true,
+  "indent": 2,
+  "latedef": true,
+  "newcap": true,
+  "noarg": true,
+  "quotmark": "single",
+  "regexp": true,
+  "undef": true,
+  "unused": true,
+  "strict": true,
+  "trailing": true,
+  "smarttabs": true,
+  "globals": {
+    "angular": false,
+    "browser": false,
+    "protractor": false,
+    "beforeAll": false,
+    "describe": false,
+    "it": false,
+    "element": false,
+    "expect": false,
+    "by": false
+  }
+}

test/e2e/conf.js

@@ -0,0 +1,10 @@
+'user strict';
+
+exports.config = {
+    seleniumAddress: 'http://localhost:4444/wd/hub',
+    framework: 'jasmine2',
+    specs: ['specs/**.js'],
+    capabilities: {
+        browserName: 'chrome'
+    }
+};

test/e2e/helper.js

@@ -0,0 +1,28 @@
+module.exports = {
+
+    waitUntilElementIsReady: function(element) {
+        browser.wait(function() {
+            return element.isPresent();
+        }, 5000);
+        browser.wait(function() {
+            return element.isDisplayed();
+        }, 5000);
+    },
+
+    // helper for waiting on async map attributes to change
+    getAsyncAttributeValue: function(element, attribute) {
+        return browser.wait(function() {
+            var deferred = protractor.promise.defer();
+            // setting an artificial timeout to wait and hope
+            // that an async map attribute such as "data-zoom" is different
+            setTimeout(function() {
+                element.getAttribute(attribute).then(function(value) {
+                    // resolve the deferred for both the browser.wait()
+                    // and to get outside access to the attribute value
+                    deferred.fulfill(value);
+                });
+            }, 2000);
+            return deferred.promise;
+        }, 5000);
+    }
+};

test/e2e/specs/set-basemap.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var helper = require('../helper');
+
+describe('Set Basemap', 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('/set-basemap.html');
+    });
+
+    it('should click on the "zoom in" and change the map "data-zoom" value from "3" to "4"', function() {
+        // element locator(s) specific to this test
+        var zoomIn = element(by.css('.esriSimpleSliderIncrementButton'));
+        helper.waitUntilElementIsReady(zoomIn);
+        helper.waitUntilElementIsReady(map);
+
+        expect(map.getAttribute('data-zoom')).toEqual('3');
+
+        zoomIn.click();
+
+        helper.getAsyncAttributeValue(map, 'data-zoom').then(function(newValue) {
+            expect(newValue).toEqual('4');
+        });
+    });
+
+    it('should choose a different basemap select and change the map "data-basemap" value from "satellite" to "oceans"', function() {
+        // element locator(s) specific to this test
+        var basemapSelect = element(by.model('map.basemap'));
+        helper.waitUntilElementIsReady(map);
+
+        expect(map.getAttribute('data-basemap')).toEqual('satellite');
+
+        basemapSelect.sendKeys('oceans');
+
+        helper.getAsyncAttributeValue(map, 'data-basemap').then(function(newValue) {
+            expect(newValue).toEqual('oceans');
+        });
+    });
+});

test/e2e/specs/simple-map.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var helper = require('../helper');
+
+describe('Simple Map Example', function() {
+    // shared element locator(s)
+    var zoomIn = element(by.css('.esriSimpleSliderIncrementButton'));
+    var map = element(by.id('map'));
+
+    beforeAll(function() {
+        // refer to conf.js to get the baseUrl that is prepended
+        browser.get('/simple-map.html');
+    });
+
+    it('should have a title', function() {
+        expect(browser.getTitle()).toEqual('Simple Map Example');
+    });
+
+    it('should click on the "zoom in" and change the map zoom value from "13" to "14"', function() {
+        // element locator(s) specific to this test
+        helper.waitUntilElementIsReady(zoomIn);
+        helper.waitUntilElementIsReady(map);
+
+        expect(map.getAttribute('data-zoom')).toEqual('13');
+
+        zoomIn.click();
+
+        helper.getAsyncAttributeValue(map, 'data-zoom').then(function(newValue) {
+            expect(newValue).toEqual('14');
+        });
+    });
+});

test/e2e/specs/web-map.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var helper = require('../helper');
+
+describe('Set Basemap', 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('/web-map.html');
+    });
+
+    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'));
+
+        helper.waitUntilElementIsReady(zoomIn);
+        helper.waitUntilElementIsReady(map);
+
+        // something to alter the map's zoom before testing the bookmark
+        zoomIn.click();
+        zoomIn.click();
+
+        // zoom should NOT be 4
+        helper.getAsyncAttributeValue(map, 'data-zoom').then(function(newValue) {
+            expect(newValue).not.toEqual('4');
+        });
+
+        // NOTE: An async ElementArrayFinder by repeater is proving to be tricky to
+        // wait on until its individual bookmark elements are either "isPresent",
+        // "isDisplayed", or if the ElementArrayFinder itself has a "count() > 0".
+        // However, this seems to be available more often than not if used later in our assertion.
+        var bookmarks = element.all(by.repeater('bookmark in itemInfo.itemData.bookmarks'));
+
+        expect(bookmarks.count()).toEqual(1);
+
+        bookmarks.first().click();
+
+        // zoom should be 4
+        helper.getAsyncAttributeValue(map, 'data-zoom').then(function(newValue) {
+            expect(newValue).toEqual('4');
+        });
+    });
+});