HID-1473 Initial e2e tests and travis setup

.gitignore

@@ -9,3 +9,4 @@ src/assets/css/*.css
 src/assets/css/*.css.map
 !src/assets/css/api.scss
 src/app/config/config.js
+src/e2e-tests/environment.js

.jshintrc

@@ -3,6 +3,7 @@
   "globals": {
     // Angular
     "angular": false,
+    "require": false,
 
     //Moment
     "moment": false,
@@ -23,6 +24,9 @@
     // Protractor
     "browser": false,
     "element": false,
-    "by": false
+    "by": false,
+    "protractor": false,
+    "beforeAll": false,
+    "afterAll": false
   }
 }

.travis.yml

@@ -1,13 +1,34 @@
 language: node_js
 node_js:
   - "6"
+dist: trusty
+addons:
+  apt:
+    sources:
+      - google-chrome
+    packages:
+      - google-chrome-stable
+cache:
+  directories:
+    - node_modules
+    - src/bower_components
 before_script:
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
   - npm install
   - npm install -g grunt-cli
   - npm install -g bower
+  - npm install -g protractor
   - bower install
+  - webdriver-manager update
+  - npm start &
+  - sleep 3
+  - grunt test-config --target="test"
+  - sleep 3
 script:
-  - npm test
+  - npm run ci
 notifications:
-  email:
-    - amy@humanitarianresponse.info
+  email: amy@humanitarianresponse.info
+  flowdock:
+    secure: "JiUCvAaA9Kx+t7JvcZmdEOCNfjY0QmsI6Mk80tgTTMFpVQobFWWTXq/otuLOg2ZOPISblCQu43c54AN3RBFG9NU7v0tRpD4RfehlnDs1YEQQS82D6M+ACBkVbInUb3sZRwsHwkrO3oy0EAn2e64gHqjTp5eOnSbC/YtJc+Czo2mD935fkdUgF0gBQ3IYliz4z3QInSCA3nyosA9eMZwmI7N/bqSxqDcCqQbmS1hsVDt7lvFrWNeeADO3wjTa/+DWkNjxpKdv6+2vTlv+y1MZCYM1VJMsNnDUuf1M2kB4eVGpb+lKyqz6z/ITmjCf5b+I9n9/3VwVu5xar5gAujOIkAhTJYnpP/bQDJ1yQgaBd7yD6eAkhztVE1dD9vR5Iif1CkOOKCXLT/cVlM8nV1rU9Qzs4qNVV6aw3YUEvX/1B/MsqawekEzQ1UPjVjLjaMEX5l+8jKzOmYO/cfbE70v5vLWk+xHR6iCGTtpDDknniVwdB0IZV/9VFFz/mtfaMOR02a4Ukazqs5A20WJGnpjo5aSJHC7e8ciit5NqEBmlMpX/VtWFJcA+/gAUedWUv3lzMj89KuFt6ndi2DjoUFF807HEoIAtANxBYCgKQyvr8FzyWTGEFp5BZ1aTu/zDmdOBgueGUminJUf++XIaoEQymbFn3ZlueM8g7BHUzsrhh6o="
+    on_success: always

Gruntfile.js

@@ -256,7 +256,11 @@ module.exports = function(grunt) {
   });
 
   grunt.registerTask('test-watch', ['karma:watch']);
-  grunt.registerTask('test', ['karma:unit'])
+  grunt.registerTask('test', ['karma:unit']);
+
+  grunt.registerTask('test-config', [
+    'copy:config'
+  ]);
 
   // Default task
   grunt.registerTask('default', [

README.md

@@ -21,7 +21,7 @@
 * Add the local url to your hosts file:
 on Mac: `sudo vi /etc/hosts`
 Add `127.0.0.1   app.hid.vm`
-* Run the Grunt tasks `grunt` 
+* Run the Grunt tasks `grunt`
 (Note to set you local environment to use the staging api use `grunt --target="dev"`)
 
 ### Running the app
@@ -61,6 +61,36 @@ Single run: `grunt test`
 
 Watch for changes an re-run tests: `grunt test-watch`
 
+## E2E tests
+
+### Pre-requisites
+
+Protractor:
+
+```
+npm install -g protractor
+```
+
+webdriver-manager
+
+```
+webdriver-manager update
+```
+
+Java Development Kit (JDK) http://www.oracle.com/technetwork/java/javase/downloads/index.html
+
+### Running the tests
+
+```
+npm run protractor
+```
+
+Running a single test suite
+
+```
+protractor --suite="my-suite-name" src/e2e-tests/conf.js
+```
+
 ## Front end
 
 ### Styleguide and pattern library

package.json

@@ -4,7 +4,10 @@
   "description": "HID Client application",
   "main": "index.js",
   "scripts": {
-    "test": "grunt test"
+    "test": "grunt test",
+    "protractor": "protractor src/e2e-tests/conf.js",
+    "ci": "npm test && npm run protractor",
+    "start": "http-server ./src -a localhost -p 3000 -c-1"
   },
   "repository": {
     "type": "git",
@@ -37,14 +40,15 @@
     "grunt-sass-import": "^0.2.2",
     "grunt-svgmin": "^4.0.0",
     "grunt-usemin": "^3.1.1",
+    "http-server": "^0.10.0",
     "jasmine": "^2.5.2",
     "jasmine-core": "^2.5.2",
+    "jasmine-spec-reporter": "^4.1.0",
     "karma": "^1.5.0",
-    "karma-chrome-launcher": "^2.0.0",
+    "karma-chrome-launcher": "^2.1.1",
     "karma-coverage": "^1.1.1",
     "karma-jasmine": "^1.0.2",
     "karma-ng-html2js-preprocessor": "^1.0.0",
-    "karma-phantomjs-launcher": "^1.0.2",
     "phantomjs-polyfill-object-assign": "0.0.2"
   }
 }

src/app/components/alerts/alert.service.js

@@ -44,7 +44,7 @@
       var closeButton = '<button class="btn-primary" ng-click="modal.close()" translate>' + closeText +'</button>';
 
       var confirmButtons = '<button class="btn-secondary" ng-click="modal.dismiss()" translate>' + cancelText + '</button>';
-      confirmButtons += '<button class="btn-primary" ng-click="modal.close()" translate>OK</button>';
+      confirmButtons += '<button class="btn-primary t-confirm-btn" ng-click="modal.close()" translate>OK</button>';
 
       var footer = '<div class="modal-footer">';
       footer += confirm ? confirmButtons : closeButton;

src/app/components/auth/login.html

@@ -18,7 +18,7 @@ <h1 class="page-header__heading login__heading" translate>Log in to Humanitarian
           <a href="/register" class="btn-secondary btn-block btn-body-font" translate>Register</a>
         </div>
         <div class="col-xs-6">
-          <button type="submit" class="btn-primary btn-block btn-body-font" ng-class="{'saving' : saving}">
+          <button type="submit" class="btn-primary btn-block btn-body-font t-login-btn" ng-class="{'saving' : saving}">
             <loader type="inline" text="" ng-if="saving"></loader>
             <span ng-if="!saving" translate>Login</span>
           </button>

src/app/components/dashboard/dashboard.html

@@ -88,7 +88,7 @@ <h2 class="block-heading" translate>My lists</h2>
   <div class="col-md-4">
 
     <div class="dashboard-ctas">
-      <a class="btn-block btn-primary" href="/lists/new" translate>Create new List</a>
+      <a class="btn-block btn-primary t-new-list-btn" href="/lists/new" translate>Create new List</a>
       <a class="btn-block btn-primary" ng-if="currentUser.is_admin || currentUser.isManager" href="/services" translate>Manage services</a>
     </div>
     <div class="dashboard-ctas">

src/app/components/header/header.html

@@ -28,7 +28,7 @@
 
         <ul class="nav nav--secondary">
           <li class="nav__item nav-item__notifications" ng-if="isAuthenticated && !hideHeaderFooter">
-            <a href="/notifications" class="nav__link">
+            <a href="/notifications" class="nav__link t-notifications-link">
               <icon name="notifications" text="Notifications"></icon>
               <span class="nav__label nav__label--mobile">
                 <notifications-count></notifications-count>
@@ -51,19 +51,19 @@
           </li>
 
           <li class="nav__item" uib-dropdown>
-            <button type="button" class="nav__link btn btn-transparent" uib-dropdown-toggle ng-if="isAuthenticated && !hideHeaderFooter">
+            <button type="button" class="nav__link t-user-dropdown-btn btn btn-transparent" uib-dropdown-toggle ng-if="isAuthenticated && !hideHeaderFooter">
               <icon name="user"></icon>
               <span class="nav__label">{{currentUser.name}}</span>
 
               <icon name="arrow-down" text="Open user menu"></icon>
             </button>
 
             <ul class="dropdown-menu" role="menu" uib-dropdown-menu>
-              <li><a href="/users/{{currentUser.id}}" translate>Profile</a></li>
-              <li><a href="/settings" translate>Preferences</a></li>
+              <li><a href="/users/{{currentUser.id}}" class="t-profile-link" translate>Profile</a></li>
+              <li><a href="/settings" class="t-preferences-link" translate>Preferences</a></li>
               <li><a href="/tutorial" translate>Tutorial</a></li>
               <li><button type="button" class="btn-link" id="feedback-button" translate>Feedback</button></li>
-              <li><a href="/logout" translate>Log out</a></li>
+              <li><a href="/logout" class="t-logout-link" translate>Log out</a></li>
             </ul>
           </li>
         </ul>
@@ -86,10 +86,10 @@
 
         <nav role="navigation" id="nav" class="site-header__nav dropdown-menu" uib-dropdown-menu aria-labelledby="navToggle" >
           <ul class="nav nav--primary">
-            <li class="nav__item" ng-class="{'active' : activeNav('/dashboard')}"><a href="/dashboard" class="nav__link" translate>Dashboard</a></li>
-            <li class="nav__item" ng-class="{'active' : activeNav('/search')}"><a href="/search" class="nav__link" translate>Humanitarian contacts</a></li>
-            <li class="nav__item" ng-class="{'active' : activeNav('/checkin/{{currentUser.id}}')}" ng-if="isOnline"><a href="/checkin/{{currentUser.id}}" class="nav__link" translate>Check in</a></li>
-            <li class="nav__item" ng-class="{'active' : activeNav('/checkout')}"><a href="/checkout" class="nav__link" translate>Check out</a></li>
+            <li class="nav__item" ng-class="{'active' : activeNav('/dashboard')}"><a href="/dashboard" class="nav__link t-dashboard-link" translate>Dashboard</a></li>
+            <li class="nav__item" ng-class="{'active' : activeNav('/search')}"><a href="/search" class="nav__link t-hc-link" translate>Humanitarian contacts</a></li>
+            <li class="nav__item" ng-class="{'active' : activeNav('/checkin/{{currentUser.id}}')}" ng-if="isOnline"><a href="/checkin/{{currentUser.id}}" class="nav__link t-checkin-link" translate>Check in</a></li>
+            <li class="nav__item" ng-class="{'active' : activeNav('/checkout')}"><a href="/checkout" class="nav__link t-checkout-link" translate>Check out</a></li>
           </ul>
         </nav>
 

src/app/components/list/all-lists.html

@@ -1,10 +1,10 @@
-<div ng-controller="ListsCtrl">
+<div ng-controller="ListsCtrl" class="t-all-lists">
   <loader ng-if="!listsLoaded"></loader>
   <div class="list-actions">
 
     <div>
-      <div class="list-actions__current-filters" ng-if="currentFilters.length">
-        <ul class="tag-list ">   
+      <div class="list-actions__current-filters t-list-current-filters" ng-if="currentFilters.length">
+        <ul class="tag-list ">
           <li class="tag-list__heading" translate>Filters applied:</li>
           <li class="tag-list__item tag-list__item--has-button" ng-repeat="filter in currentFilters">
             <span class="tag-list__text">{{filter.label}}</span>

src/app/components/list/list-admin.html

@@ -1,4 +1,4 @@
-<div sidebar class="sidebar" ng-class="{'in' : sidebar.open, 'active' : sidebar.sidebars.admin}">
+<div sidebar class="sidebar t-list-admin" ng-class="{'in' : sidebar.open, 'active' : sidebar.sidebars.admin}">
   <div ng-if="sidebar.sidebars.admin" class="sidebar__inner">
 
     <button type="button" class="btn btn-transparent sidebar__close" ng-click="sidebar.close()">
@@ -9,14 +9,14 @@
       <form class="sidebar-section"  ng-submit="addMemberToList()">
         <label for="member" class="sidebar-section__heading" translate>Add new Member</label>
         <div class="sidebar-section__form-field">
-          <ui-select ng-model="usersAdded.users" multiple name="member">
+          <ui-select ng-model="usersAdded.users" multiple name="member" class="t-add-member">
             <ui-select-match placeholder="{{'Select some people' | translate}}">{{$item.name}}</ui-select-match>
             <ui-select-choices refresh="getUsers($select.search)" repeat="person.id as person in newMembers" minimum-input-length="3">
               {{person.name}}
             </ui-select-choices>
           </ui-select>
         </div>
-        <button type="submit" class="btn-primary btn-block" ng-class="{'saving' : savingMembers}" ng-disabled="!usersAdded.users.length">
+        <button type="submit" class="btn-primary btn-block t-add-member-btn" ng-class="{'saving' : savingMembers}" ng-disabled="!usersAdded.users.length">
           <loader type="inline" text="" ng-if="savingMembers"></loader>
           <span ng-if="!savingMembers" translate>Add Member</span>
         </button>
@@ -32,7 +32,7 @@ <h2 class="sidebar-section__heading" translate>List Settings</h2>
           <span translate>Edit List Settings</span>
         </a>
 
-        <button type="button" class="btn-transparent sidebar-section__button" ng-click="deleteList();">
+        <button type="button" class="btn-transparent sidebar-section__button t-delete-list-btn" ng-click="deleteList();">
           <icon name="trash"></icon>
           <span translate>Delete List</span>
         </button>
@@ -43,12 +43,12 @@ <h2 class="sidebar-section__heading" translate>List Settings</h2>
       <h2 class="sidebar-section__heading" translate>Export options</h2>
       <ng-include src="'app/components/user/users-export.html'"></ng-include>
 
-      <button type="button" class="btn-transparent sidebar-section__button" ng-click="star()" ng-if="!isFavorite">
+      <button type="button" class="btn-transparent sidebar-section__button t-fav-btn" ng-click="star()" ng-if="!isFavorite">
         <loader type="inline" text="Saving" ng-if="favSaving"></loader>
         <icon ng-if="!favSaving" name="star"></icon>
         <span ng-if="!favSaving" translate>Mark as favourite</span>
       </button>
-      <button type="button" class="btn-transparent sidebar-section__button" ng-click="unstar()" ng-if="isFavorite">
+      <button type="button" class="btn-transparent sidebar-section__button t-unfav-btn" ng-click="unstar()" ng-if="isFavorite">
         <loader type="inline" text="Saving" ng-if="favSaving"></loader>
         <icon ng-if="!favSaving" name="cancel"></icon>
         <span ng-if="!favSaving" translate>Unfavourite</span>

src/app/components/list/list.html

@@ -22,11 +22,11 @@ <h1 class="page-header__heading">{{list.name}}</h1>
 
 
   <div class="page-header__buttons page-header__buttons--list">
-    <button class="btn-icon btn-toggle-filters btn-toggle-filters--has-admin" type="button" ng-disabled="!isOnline" ng-click="sidebar.toggle('userFilters', true)">
+    <button class="btn-icon btn-toggle-filters btn-toggle-filters--has-admin t-filter-list" type="button" ng-disabled="!isOnline" ng-click="sidebar.toggle('userFilters', true)">
       <icon name="filter" text="Filter"></icon>
     </button>
 
-    <button class="btn-icon btn-toggle-admin" type="button" ng-click="sidebar.toggle('admin', true)" ng-class="{'active' : sidebar.sidebars.admin && sidebar.open}" ng-disabled="!isOnline" ng-if="list.visible">
+    <button class="btn-icon btn-toggle-admin t-list-admin-btn" type="button" ng-click="sidebar.toggle('admin', true)" ng-class="{'active' : sidebar.sidebars.admin && sidebar.open}" ng-disabled="!isOnline" ng-if="list.visible">
       <icon name="wheel" text="Actions"></icon>
     </button>
   </div>

src/app/components/list/new-list.html

@@ -14,15 +14,15 @@ <h1 class="page-header__heading" ng-if="list._id">{{list.name}}</h1>
         <legend translate>Who can view this list?</legend>
         <p ng-repeat="option in visibility">
           <input type="radio" id="visibility-{{option.value}}" name="visibility" ng-model="list.visibility" value="{{option.value}}" />
-          <label class="clickie-label" for="visibility-{{option.value}}" required>{{option.label}}</label>
+          <label class="clickie-label t-visibility-{{option.value}}" for="visibility-{{option.value}}" required>{{option.label}}</label>
         </p>
       </fieldset>
 
       <fieldset class="form-field">
         <legend translate>Who can join this list?</legend>
         <p ng-repeat="option in joinability">
           <input type="radio" id="joinability-{{option.value}}" name="joinability" ng-model="list.joinability" value="{{option.value}}" />
-          <label class="clickie-label" for="joinability-{{option.value}}" required>{{option.label}}</label>
+          <label class="clickie-label t-joinability-{{option.value}}" for="joinability-{{option.value}}" required>{{option.label}}</label>
         </p>
       </fieldset>
 
@@ -35,7 +35,7 @@ <h1 class="page-header__heading" ng-if="list._id">{{list.name}}</h1>
           </ui-select-choices>
         </ui-select>
       </div>
-      <button type="submit" class="btn-primary" ng-class="{'saving' : saving}">
+      <button type="submit" class="btn-primary t-save-list-btn" ng-class="{'saving' : saving}">
         <loader type="inline" text="" ng-if="saving"></loader>
         <span ng-if="!saving" translate>Save</span>
       </button>

src/app/components/search/search-form.html

@@ -14,7 +14,7 @@
         <li ng-if="searchPeople.length">
           <span class="search-autocomplete__heading">
             <span translate>Contacts</span>
-            <button type="button" ng-click="fullSearch(searchTerm)" class="btn-transparent" translate>See all</button>
+            <button type="button" ng-click="fullSearch(searchTerm)" class="btn-transparent t-see-all-users" translate>See all</button>
           </span>
           <ul>
             <li class="search-autocomplete__item" ng-repeat="result in searchPeople">
@@ -25,7 +25,7 @@
         <li ng-if="searchLists.length">
           <span class="search-autocomplete__heading">
             <span translate>Lists</span>
-            <button type="button" ng-click="fullSearch(searchTerm, 'lists')" class="btn-transparent" translate>See all</button>
+            <button type="button" ng-click="fullSearch(searchTerm, 'lists')" class="btn-transparent t-see-all-lists" translate>See all</button>
           </span>
           <ul>
             <li class="search-autocomplete__item" ng-repeat="result in searchLists">

src/app/components/search/search-results.html

@@ -39,7 +39,7 @@ <h2 class="sidebar-section__heading" translate>Options</h2>
       Showing contacts
     </button>
 
-    <button type="button" class="tabs-nav__button" ng-click="showLists = !showLists" ng-disabled="showLists" translate>
+    <button type="button" class="tabs-nav__button t-show-lists" ng-click="showLists = !showLists" ng-disabled="showLists" translate>
       Showing lists
     </button>
   </div>

src/app/components/user/user.html

@@ -148,11 +148,11 @@ <h1 class="page-header__heading">
         <span translate>Connect</span>
       </button>
 
-      <button type="button" class="btn-icon" ng-click="toggleForm()" ng-show="!showProfileForm" aria-hidden="{{showProfileForm}}" ng-if="canEditUser" ng-disabled="!isOnline">
+      <button type="button" class="btn-icon t-user-edit-btn" ng-click="toggleForm()" ng-show="!showProfileForm" aria-hidden="{{showProfileForm}}" ng-if="canEditUser" ng-disabled="!isOnline">
         <icon name="edit" text="Edit"></icon>
       </button>
 
-      <button type="button" class="btn-icon btn-secondary" ng-show="showProfileForm" aria-hidden="{{!showProfileForm}}" ng-click="toggleForm()" ng-if="canEditUser">
+      <button type="button" class="btn-icon btn-secondary t-close-edit-btn" ng-show="showProfileForm" aria-hidden="{{!showProfileForm}}" ng-click="toggleForm()" ng-if="canEditUser">
         <icon name="check" text="Close"></icon>
       </button>
 

src/app/components/user/userOptions.html

@@ -1,13 +1,13 @@
 <div ng-controller="UserOptionsCtrl" uib-dropdown>
-  <button type="button" class="btn-transparent" uib-dropdown-toggle aria-haspopup="true" aria-expanded="false" title="Edit" ng-disabled="!isOnline">
+  <button type="button" class="btn-transparent t-user-options-btn" uib-dropdown-toggle aria-haspopup="true" aria-expanded="false" title="Edit" ng-disabled="!isOnline">
     <icon name="dots" text="User options"></icon>
   </button>
   <ul class="dropdown-menu dropdown-menu--small" uib-dropdown-menu>
     <li ng-if="list && user.pending && (currentUser.is_admin || isManager || isOwner)">
       <button type="button" class="btn-link" ng-click="approveUser(user)" translate>Approve</button>
     </li>
     <li ng-if="currentUser.is_admin || currentUser.isManager"><a href="/users/{{user._id}}/edit" translate>Edit</a></li>
-    <li ng-if="list && (currentUser.is_admin || currentUser.isManager || isManager || isOwner)"><button type="button" class="btn-link" ng-click="removeFromList(user, list);" translate>Remove from list</button></li>
+    <li ng-if="list && (currentUser.is_admin || currentUser.isManager || isManager || isOwner)"><button type="button" class="btn-link t-remove-from-list-btn" ng-click="removeFromList(user, list);" translate>Remove from list</button></li>
     <li><button type="button" class="btn-link" ng-click="openCheckInModal(user, currentUser)" translate>Check into a list</button></li>
     <li ng-if="currentUser.is_admin">
       <button type="button" class="btn-link" ng-click="verifyUser(user)">