Upgraded cucumberjs, added extra tests for mobile navigation, added w…

…aits into the steps to handle the animation of the sidepane. Switched to chromedriver to see if it works on travis ci.

features/navigation.feature

@@ -12,11 +12,22 @@ Feature: Navigation
   Scenario: View navigation - mobile
     Given I am an anonymous user on a "mobile" browser
     When I am on the home page
-    Then I should be able to access the navigation from a button action
+    And I click on the menu button
+    Then I should see a navigation section
 
   Scenario: Use navigation
     Given I am an anonymous user on a "desktop" browser
     When I am on the home page
     And I click on a navigation item
     Then I should see that the page has changed
+    And I should see the page I am on highlighted in the navigation
+
+  Scenario: Use navigation
+    Given I am an anonymous user on a "mobile" browser
+    When I am on the home page
+    And I click on the menu button
+    Then I should see a navigation section
+    And I click on a navigation item
+    Then I should see that the page has changed
+    And I click on the menu button
     And I should see the page I am on highlighted in the navigation

features/steps/navigationSteps.js

@@ -1,10 +1,15 @@
 'use strict';
 
 var expect = require('chai').expect;
+var url = require('url') ;
+var webdriver = require('selenium-webdriver');
+var until = webdriver.until;
 
 module.exports = function() {
     this.World = require('../support/world.js').World;
 
+    var currentUrl = null;
+
     this.Given(/^I am an anonymous user on a "(.*)" browser$/, function (browserType, next) {
 
         switch (browserType){
@@ -22,62 +27,110 @@ module.exports = function() {
 
     this.When(/^I am on the home page$/, function (next) {
 
-        this.driver.get(this.baseUrl+'/');
+        var driver = this.driver;
+
+        driver.get(this.baseUrl+'/')
+        .then(function(){
+            return driver.getCurrentUrl();
+        }).then(function(url){
+            currentUrl = url;
+        });
 
         next();
     });
 
     this.Then(/^I should see a navigation section$/, function (next) {
 
-        this.driver.isElementPresent({ css: '.navigation' }).then(function(navigationPresent) {
+        var driver = this.driver;
 
-            expect(navigationPresent).to.be.true;
+        driver.isElementPresent({ css: '.navigation' })
+            .then(function(navigationPresent) {
 
-            next();
-        });
+                expect(navigationPresent).to.be.true;
+
+                return driver.findElements({ css: '.navigation a'});
+            }).then(function(links){
+                return driver.wait(until.elementIsVisible(links[0]), 1000);
+            }).then(function(){
+                next();
+            });
 
     });
 
-    this.Then(/^I should be able to access the navigation from a button action$/, function (next) {
+    this.Then(/^I click on the menu button$/, function (next) {
 
         var driver = this.driver;
 
         driver.isElementPresent({ css: 'button#mobile-menu-toggle' })
         .then(function(menuButtonPresent){
             expect(menuButtonPresent).to.be.true;
+
+            //wait until the navigation has disappeared before trying to open the menu
+            return driver.findElement({css: 'md-list-item'}).then(function(el) {
+                return driver.wait(until.elementIsNotVisible(el), 1000);
+            });
+
+        }).then(function(){
+
             return driver.findElement({css: 'button#mobile-menu-toggle'});
         }).then(function(el){
             return el.click();
         }).then(function(){
-            return driver.isElementPresent({ css: '.navigation'});
-        }).then(function(navigationPresent){
-
-            expect(navigationPresent).to.be.true;
-
             next();
         });
 
     });
 
     this.When(/^I click on a navigation item$/, function (next) {
-        // Write code here that turns the phrase above into concrete actions
-        next.pending();
 
-        //return this.driver.findElement({ css: '.navigation a'})
-        //    .then(function(el){
-        //        return el.click();
-        //    });
+        var driver = this.driver;
+        driver.findElements({ css: '.navigation a'})
+            .then(function(els){
+
+                var el = els[els.length-1]; //get last element
+
+                return driver.wait(until.elementIsVisible(el), 1000).then(function(){
+                    return el;
+                });
+
+            }).then(function(el){
+                return el.click();
+            }).then(function(){
+                next();
+            });
     });
 
 
     this.Then(/^I should see that the page has changed$/, function (next) {
-        // Write code here that turns the phrase above into concrete actions
-        next.pending();
+
+        this.driver.getCurrentUrl()
+            .then(function(url){
+                expect(url).to.not.equal(currentUrl);
+            }).then(function(){
+                next();
+            });
+
     });
 
     this.Then(/^I should see the page I am on highlighted in the navigation$/, function (next) {
-        // Write code here that turns the phrase above into concrete actions
-        next.pending();
+
+        var driver = this.driver;
+
+        driver.getCurrentUrl()
+            .then(function(retrievedUrl){
+                var currentHref = url.parse(retrievedUrl).pathname;
+
+                return driver.findElement({ css: "a[href*='"+currentHref+"']"});
+            }).then(function(el){
+
+                return el.getAttribute('class');
+            }).then(function(classes){
+
+                expect(classes).to.contain('selected');
+
+                next();
+            });
+
     });
 
 

features/support/world.js

@@ -6,7 +6,7 @@ var webdriver = require('selenium-webdriver');
 
 var buildPhantomDriver = function() {
     return new webdriver.Builder().
-        withCapabilities(webdriver.Capabilities.phantomjs()).
+        withCapabilities(webdriver.Capabilities.chrome()).
         build();
 };
 

package.json

@@ -27,7 +27,7 @@
     "bower": "^1.3.12",
     "browser-sync": "^2.7.10",
     "chai": "^3.0.0",
-    "cucumber": "^0.5.0",
+    "cucumber": "0.5.1",
     "del": "^1.1.1",
     "globby": "^1.2.0",
     "gulp": "^3.8.11",