JS e2e tests integrated to build-and-test-all script

angularjs-frontend/app/scripts/components/BoardList/KanbanBoardList.scss

@@ -59,6 +59,14 @@
     padding: 0 .5em;
     position: relative;
 
+    .flex {
+      display: flex;
+      flex-shrink: 0;
+      flex-grow: 1;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+
     &.m_collapsed {
       > * {
         max-height: 12em;

angularjs-frontend/app/scripts/components/BoardList/KanbanBoardList.tpl.html

@@ -1,12 +1,12 @@
 <div class="b_board_list">
     <h2>Available Boards <small>Pick existing or create new</small></h2>
     <div class="b_board_list-wrap {{ board ? 'm_collapsed' : '' }}">
-        <div class="row ">
+        <div class="row flex">
             <div class="col-xs-6 col-sm-4 col-md-3" ng-repeat="brd in boards track by $index">
                 <div class="b_board_title m_add_new" ng-if="isMeta(brd)" data-toggle="modal" data-target="#newBoardModal">
                     <h4><span class="glyphicon glyphicon-plus"></span> Create New Board</h4>
                 </div>
-                <div class="b_board_title" ng-if="isBoard(brd)" ng-click="selectBoard(brd, $index)">
+                <div class="b_board_title" ng-if="isBoard(brd)" ng-click="selectBoard(brd, $index)" data-board-id="{{ ((brd.id || '').toString() !== '-1') ? brd.id : '0' }}">
                     <span class="b_board_title-nl">{{$index}}</span><h4>{{brd.title}}</h4>
                     Created {{ brd.createdDate | timeAgo }} by <strong>{{brd.createdBy}}</strong><br/>
                     <div ng-if="brd.updatedDate != brd.createdDate">Updated {{ brd.updatedDate | timeAgo }} </div>

angularjs-frontend/app/scripts/components/Column/KanbanColumn.tpl.html

@@ -5,7 +5,7 @@ <h3>{{ statusVerbose }}: <small>{{ tasks | taskStatus:ctrl.status | count }}</sm
     <div cnt-horizontal=".b_task" ng-if="ctrl.status === 'backlog'" >
         <div class="b_column--tasks m_horizontal">
             <div class="b_task">
-                <a class="btn btn-lg btn-primary" data-toggle="modal" data-target="#newTaskModal">Create Task </a>
+                <a class="btn btn-lg btn-primary" data-toggle="modal" data-target="#newTaskModal">Create Task</a>
             </div>
             <div kbn-task task="task" ng-repeat="task in tasks | taskStatus:ctrl.status | orderBy: 'createdDate' "></div>
         </div>

angularjs-frontend/app/scripts/services/api.js

@@ -220,7 +220,12 @@ app.factory('ApiService', ['$http', '$q', 'AuthenticationService', ($http, $q, a
       },
       params,
       data
-    }));
+    }).then(
+      data => data,
+      data => {
+        console.error(data);
+        return data
+      }));
   }
 
   //function wrap(fn, data) {

angularjs-frontend/app/scripts/services/serverListener.js

@@ -17,6 +17,7 @@ app.factory('ServerListenerService', ['$rootScope', '$log', '$window', ($rootSco
       const refId = Math.random().toString().substr(2);
       subscribers = [{ refId, eventName, callback }, ...subscribers];
       getListener();
+      $log.log('App adds listener to ' + eventName + ' event');
       return () => {
         subscribers = subscribers.filter(s => s.refId !== refId);
       }
@@ -31,8 +32,11 @@ app.factory('ServerListenerService', ['$rootScope', '$log', '$window', ($rootSco
       stomp.heartbeat.outgoing = 5000;
       stomp.heartbeat.incoming = 0;
 
+      $log.log('App connecting to stomp server');
       stomp.connect({}, () => {
+        $log.log('App connected to stomp server');
         subscription = stomp.subscribe('/events', (msg) => {
+          $log.log('App received a message from stomp server');
 
           const { body = null, ack, nack, command } = msg;
 
@@ -96,7 +100,12 @@ app.factory('ServerListenerService', ['$rootScope', '$log', '$window', ($rootSco
             data: { ...eventDataObj, id: entityId },
             msg: { ...bodyObj, eventData: { ...eventDataObj } } // copy into empty object
           };
-          $window._lastSocketMessage = result;
+
+          if (!$window._lastSocketMessage || !$window._lastSocketMessage.length) {
+            $window._lastSocketMessage = [];
+          }
+          // $window.alert(1);
+          $window._lastSocketMessage.push(result);
 
           const handlers = subscribers
             .filter((s) => (s.eventName === evtType) || (s.eventName === '*'));

e2e-tests/.babelrc

@@ -0,0 +1,5 @@
+{
+    "presets": ["es2015", "stage-0"],
+    "plugins": ["transform-runtime", "transform-regenerator"],
+    "sourceMaps": true
+}

e2e-tests/apropos.spec.js

@@ -0,0 +1,15 @@
+/**
+ * Created by andrew on 31/12/15.
+ */
+describe('Selenium Test Case', function() {
+
+  it('should execute test case without errors', done => {
+    //var text, value, bool, source, url, title;
+    //var TestVars = {};
+    browser.get("/");
+    browser.sleep(10000).then(() => {
+      done();
+    });
+  });
+
+});

e2e-tests/helpers/draggability.js

@@ -0,0 +1,16 @@
+/**
+ * Created by andrew on 28/01/16.
+ */
+export default function(elementToDrag, elementToDragTo) {
+
+  const targetOffset = { x: -10, y: -10 };
+  return browser.actions().
+    mouseMove(elementToDrag).
+    mouseDown(elementToDrag).
+    mouseMove(elementToDragTo, targetOffset).
+    mouseUp(elementToDragTo, targetOffset).
+    perform();
+
+  // return browser.sleep(300);
+
+}

e2e-tests/helpers/injector.js

@@ -0,0 +1,30 @@
+/**
+ * Created by andrew on 27/01/16.
+ */
+// http://blog.ng-book.com/accessing-angulars-injector-from-within-protractor/
+'use strict';
+
+export const get = function (moduleName) {
+  return browser.executeAsyncScript(
+    function(moduleName, callback) {
+      callback(window.$injector.get(moduleName));
+    }, moduleName);
+};
+
+export const invoke = function (fn, self, locals) {
+  return browser.executeScript(function(fn, self, locals) {
+      window.$injector.invoke(fn, self, locals);
+    }, fn, self, locals);
+};
+
+export const clearReceivedSocketMessages = function() {
+  return browser.executeScript('window._lastSocketMessage = [];');
+};
+
+export const getReceivedSocketMessages = function() {
+  return browser.executeScript('return window._lastSocketMessage;');
+};
+
+export const setLastSocketMessage = function(val) {
+  return browser.executeScript('window._lastSocketMessage = [arguments[0]];', val);
+};

e2e-tests/helpers/random.js

@@ -0,0 +1,18 @@
+/**
+ * Created by andrew on 29/01/16.
+ */
+function* getRandom(templateSet, len) {
+  if (len) {
+    yield templateSet[Math.floor(Math.random() * templateSet.length)];
+    yield* getRandom(templateSet, len - 1);
+  }
+}
+
+export function getRandomLatinAlpha(len) {
+  const templateSet = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM';
+  return [...getRandom(templateSet, len)].join('');
+}
+
+export function getRandomEmail() {
+  return (`${getRandomLatinAlpha(20)}@${getRandomLatinAlpha(10)}.${getRandomLatinAlpha(3)}`).toLowerCase();
+}

e2e-tests/helpers/schemas.js

@@ -0,0 +1,18 @@
+/**
+ * Created by andrew on 28/01/16.
+ */
+import BoardCreatedEventSchema from '../../schemas/websocket-events-schema/BoardCreatedEvent.json';
+import TaskCreatedEventSchema from '../../schemas/websocket-events-schema/TaskCreatedEvent.json';
+import TaskDeletedEventSchema from '../../schemas/websocket-events-schema/TaskDeletedEvent.json';
+import TaskScheduledEventSchema from '../../schemas/websocket-events-schema/TaskScheduledEvent.json';
+import TaskStartedEventSchema from '../../schemas/websocket-events-schema/TaskStartedEvent.json';
+import TaskCompletedEventSchema from '../../schemas/websocket-events-schema/TaskCompletedEvent.json';
+import TaskBacklogEventSchema from '../../schemas/websocket-events-schema/TaskBacklogEvent.json';
+
+export const BoardCreatedEvent = BoardCreatedEventSchema;
+export const TaskCreatedEvent = TaskCreatedEventSchema;
+export const TaskDeletedEvent = TaskDeletedEventSchema;
+export const TaskScheduledEvent = TaskScheduledEventSchema;
+export const TaskStartedEvent = TaskStartedEventSchema;
+export const TaskCompletedEvent = TaskCompletedEventSchema;
+export const TaskBacklogEvent = TaskBacklogEventSchema;

e2e-tests/helpers/ws-helper.js

@@ -0,0 +1,55 @@
+/**
+ * Created by andrew on 10/25/16.
+ */
+
+// https://github.com/andresdominguez/protractor-meetup/blob/master/test/e2e/api-helper.js
+// http://stackoverflow.com/questions/20619225/accessing-angular-inside-protractor-test
+
+// BoardCreatedEvent
+export const BoardCreatedEventHelper = () => {
+  return browser.executeAsyncScript(function(callback) {
+    const ServerListenerService = window.$injector.get('ServerListenerService');
+    const $log = window.$injector.get('$log');
+    $log.log('getting ServerListenerService:' + (new Date() - 0));
+    ServerListenerService.on('BoardCreatedEvent', function(data) {
+      $log.log('received event ServerListenerService: ' + (new Date() - 0));
+      callback(data);
+    });
+  });
+};
+
+// TaskCreatedEvent
+export const TaskCreatedEventHelper = () => browser.executeAsyncScript(function(callback) {
+  const ServerListenerService = window.$injector.get('ServerListenerService');
+  ServerListenerService.on('TaskCreatedEvent', callback);
+});
+
+// TaskDeletedEvent
+export const TaskDeletedEventHelper = () => browser.executeAsyncScript(function(callback) {
+  const ServerListenerService = window.$injector.get('ServerListenerService');
+  ServerListenerService.on('TaskDeletedEvent', callback);
+});
+
+// TaskStartedEvent
+export const TaskStartedEventHelper = () => browser.executeAsyncScript(function(callback) {
+  const ServerListenerService = window.$injector.get('ServerListenerService');
+  ServerListenerService.on('TaskStartedEvent', callback);
+});
+
+// TaskScheduledEvent
+export const TaskScheduledEventHelper = () => browser.executeAsyncScript(function(callback) {
+  const ServerListenerService = window.$injector.get('ServerListenerService');
+  ServerListenerService.on('TaskScheduledEvent', callback);
+});
+
+// TaskCompletedEvent
+export const TaskCompletedEventHelper = () => browser.executeAsyncScript(function(callback) {
+  const ServerListenerService = window.$injector.get('ServerListenerService');
+  ServerListenerService.on('TaskCompletedEvent', callback);
+});
+
+// TaskBacklogEvent
+export const TaskBacklogEventHelper = () => browser.executeAsyncScript(function(callback) {
+  const ServerListenerService = window.$injector.get('ServerListenerService');
+  ServerListenerService.on('TaskBacklogEvent', callback);
+});

e2e-tests/kanban-e2e.js

@@ -0,0 +1,55 @@
+describe('Selenium Test Case', function() {
+  it('should execute test case without errors', function() {
+    var text, value, bool, source, url, title;
+    var TestVars = {};
+    browser.get("http://localhost:5000/");
+    element(by.css("button.btn.btn-default")).click();
+    element(by.id("inputEmail1")).sendKeys("[email protected]");
+    element(by.css("button.btn.btn-default")).click();
+    element(by.linkText("Sign Out")).click();
+    element(by.id("inputEmail1")).sendKeys();
+    element(by.id("inputEmail1")).sendKeys("[email protected]");
+    element(by.id("inputEmail1")).sendKeys("[email protected]");
+    element(by.id("inputEmail1")).click();
+    element(by.css("button.btn.btn-default")).click();
+    element(by.xpath("//div[@class='b_board_list']/div[1]/div/div[2]/div")).click();
+    element(by.linkText("Close ×")).click();
+    element(by.xpath("//div[@class='b_board_list']//span[.='2']")).click();
+    element(by.linkText("Close ×")).click();
+    element(by.xpath("//div[@class='b_board_list']/div[1]/div/div[4]/div")).click();
+    element(by.linkText("Close ×")).click();
+    element(by.xpath("//div[@class='b_board_list']/div[1]/div/div[1]/div")).click();
+    element(by.css("button.btn.btn-primary")).click();
+    element(by.id("inpBoardName")).sendKeys("New test board");
+    element(by.css("div.modal-body")).click();
+    element(by.id("inpBoardDesc")).sendKeys("simple description");
+    element(by.css("button.btn.btn-primary")).click();
+    element(by.xpath("//div[@class='b_board_list']//h4[.='New test board']")).click();
+    element(by.css("div.b_cnt.m_hor")).click();
+    element(by.xpath("//div[@class='b_board']//div[normalize-space(.)='']")).click();
+    element(by.xpath("//div[@class='b_board']/div[3]/div[2]/div/div/div")).click();
+    element(by.xpath("//div[@class='b_board']/div[3]/div[3]/div/div/div")).click();
+    element(by.linkText("Create Task")).click();
+    element(by.id("inpTaskTitle")).sendKeys("test task 01");
+    element(by.id("inpTaskDesc")).sendKeys("simple description");
+    element(by.css("div.modal-footer")).click();
+    element(by.css("button.btn.btn-primary")).click();
+    element(by.xpath("//div[@class='b_cnt-body']/div/div[3]/div[2]")).click();
+    element(by.xpath("//div[@class='b_board']/div[3]/div[1]/div/div/div")).click();
+    element(by.xpath("//div[@class='b_board']//div[normalize-space(.)='']")).click();
+    element(by.xpath("//div[@class='b_board']/div[3]/div[2]/div/div/div")).click();
+    element(by.xpath("//div[@class='b_board']/div[3]/div[3]/div/div/div")).click();
+    element(by.linkText("H")).click();
+    element(by.css("div.modal-dialog > div.modal-content > div.modal-footer > button.btn.btn-default")).click();
+    element(by.xpath("//div[@class='b_board']/div[3]/div[3]/div/div/div")).click();
+    element(by.css("div.b_cnt.m_hor")).click();
+    element(by.xpath("//div[@class='b_cnt-body']/div/div[3]/div[1]/a[2]")).click();
+    element(by.xpath("//div[@id='deleteTaskModal']/div/form/div/div[2]/div[1]/input")).click();
+    element(by.xpath("//div[@id='deleteTaskModal']/div/form/div/div[2]/div[2]/input")).click();
+    element(by.xpath("//div[@id='deleteTaskModal']/div/form/div/div[2]/div[3]/textarea")).click();
+    element(by.css("button.btn.btn-danger")).click();
+    element(by.linkText("Close ×")).click();
+    element(by.xpath("//div[@class='b_board_list']/div[1]/div/div[14]/div")).click();
+    element(by.linkText("Sign Out")).click();
+  });
+});