test(billing services): implement e2e tests

This commit implements end-to-end tests for billing services.  So far,
only the create and update tests are supported. Deletion will be
targetted next once we have a modal component to confirm deletes.

client/src/i18n/en.json

@@ -3243,6 +3243,7 @@
    "BALANCE_SHEET"             : "Balance sheet",
    "BENEFICIARY"               : "Beneficaries",
    "BILAN"                     : "Bilan",
+   "BILLING_SERVICES"          : "Billing Services",
    "BUDGETING"                 : "Budget",
    "BUDGET_ANALYSIS"           : "Budget Analysis",
    "BUDGET_BY_ACCOUNT"         : "Budget by Account",

client/src/partials/billing_services/form.html

@@ -14,7 +14,11 @@
         <div class="panel-body" style="padding-bottom:5px;">
 
           <!-- account input -->
-          <div class="form-group" ng-class="{ 'has-error' : BillingServicesForm.$submitted && BillingServicesForm.account.$invalid }">
+          <div
+            class="form-group"
+            ng-class="{ 'has-error' : BillingServicesForm.$submitted && BillingServicesForm.account.$invalid }"
+            data-component-find-account
+            >
             <label class="control-label">
               {{ "COLUMNS.ACCOUNT" | translate }}
             </label>
@@ -96,11 +100,11 @@
             <div class="help-block">
 
               <!-- show success message if the form is successfully submitted -->
-              <p ng-show="BillingServicesFormCtrl.created">
+              <p ng-show="BillingServicesFormCtrl.created" data-validation="created">
                 <span class="glyphicon glyphicon-ok-sign"></span> {{ "BILLING_SERVICES.CREATED" | translate }}
               </p>
 
-              <p ng-show="BillingServicesFormCtrl.updated">
+              <p ng-show="BillingServicesFormCtrl.updated" data-validation="updated">
                 <span class="glyphicon glyphicon-ok-sign"></span> {{ "BILLING_SERVICES.UPDATED" | translate }}
               </p>
 
@@ -128,7 +132,7 @@
           <bh-loading-button loading-state="BillingServicesForm.$loading">
           </bh-loading-button>
 
-          <button ui-sref="billingServices.list" class="btn btn-default">
+          <button ui-sref="billingServices.list" class="btn btn-default" data-method="back">
             {{ "FORM.BACK" | translate }}
           </button>
         </div>

client/src/partials/billing_services/index.html

@@ -11,13 +11,13 @@
       <div class="toolbar-item">
 
         <!-- @todo - hide this on the create/update state -->
-        <button
+        <a
           class="btn btn-default"
-          ui-sref="billingServices.create"
           data-method="create"
+          href="#/admin/billing_services/create"
           ng-hide="BillingServicesCtrl.$state.current.name === 'billingServices.create'">
           <span class="glyphicon glyphicon-plus"></span> {{ "BILLING_SERVICES.BTN.CREATE" | translate }}
-        </button> 
+        </a> 
       </div>
     </div>
   </div>

client/src/partials/billing_services/list/list.js

@@ -15,10 +15,10 @@ function BillingServicesListController($translate, BillingServices, Accounts) {
   var vm = this;
 
   var editTemplate =
-    '<div style="margin: 0px 5px 5px 5px;"><a class="btn btn-sm btn-default btn-block" ng-href="#/admin/billing_services/{{ row.entity.id}}"><span class="glyphicon glyphicon-pencil"></a></div>';
+    '<div style="margin: 0px 5px 5px 5px;"><a class="btn btn-sm btn-default btn-block" ng-href="#/admin/billing_services/{{ row.entity.id}}" data-method="update"><span class="glyphicon glyphicon-pencil"></a></div>';
 
   var deleteTemplate =
-    '<div style="margin: 0px 5px 5px 5px;"><button class="btn btn-sm btn-default btn-block" ng-click="grid.appScope.delete(row.entity)"><span class="glyphicon glyphicon-trash"></span></button></div>';
+    '<div style="margin: 0px 5px 5px 5px;"><button class="btn btn-sm btn-default btn-block" ng-click="grid.appScope.delete(row.entity)" data-method="delete"><span class="glyphicon glyphicon-trash"></span></button></div>';
 
   // these options are for the ui-grid
   vm.options = {

client/test/e2e/billingServices/billingServices.spec.js

@@ -0,0 +1,90 @@
+/* global browser, element, by, protractor */
+
+var chai = require('chai');
+var expect = chai.expect;
+
+// import testing utiliites
+var helpers = require('../shared/helpers');
+helpers.configure(chai);
+
+var components = require('../shared/components');
+var GU = require('../shared/gridTestUtils.spec.js');
+var FU = require('../shared/FormUtils');
+
+describe('Billing Services', function () {
+  'use strict';
+
+  /** @const */
+  var path = '#/admin/billing_services';
+
+  /** @const */
+  var gridId = 'BillingServicesGrid';
+
+  before(function ()  { browser.get(path); });
+
+  it('can create a billing service', function () {
+
+    // click on the create button
+    FU.buttons.create();
+
+    // anticipate that the form should come up
+    FU.exists(by.css('[name="BillingServicesForm"]'), true);
+
+    var root = element(by.css('[data-component-find-account]'));
+
+    // search for a particular account using the account input
+    var accountInput = root.element(by.model('BillingServicesFormCtrl.model.account'));
+    accountInput.sendKeys('410');
+
+    // click select the proper account
+    var option = root.all(by.repeater('match in matches track by $index')).first();
+    option.click();
+
+    // fill in the rest of the fields
+    FU.input('BillingServicesFormCtrl.model.label', 'Value Added Tax');
+    FU.input('BillingServicesFormCtrl.model.description', 'A tax added for people who want value!');
+    FU.input('BillingServicesFormCtrl.model.value', 25);
+
+    FU.buttons.submit();
+
+    // make sure the "created" validation tag exists
+    FU.exists(by.css('[data-validation="created"]'), true);
+
+    // let's be sure we can find the record on the grid by returning there
+    FU.buttons.back();
+
+    // check that the grid as exactly one record
+    var grid = GU.getGrid(gridId);
+
+    var rows = grid.element(by.css('.ui-grid-render-container-body'))
+      .all(by.repeater('(rowRenderIndex, row) in rowContainer.renderedRows track by $index'));
+
+    expect(rows.count()).to.eventually.equal(1);
+  });
+
+  it('can update a billing service', function () {
+
+    // get the cell with the update button and click it
+    var cell = GU.dataCell(gridId, 0, 6);
+    cell.element(by.css('[data-method="update"]')).click();
+
+    // expect to find the update form has loaded
+    FU.exists(by.css('[name="BillingServicesForm"]'), true);
+
+    // update the label
+    FU.clear('BillingServicesFormCtrl.model.label');
+    FU.input('BillingServicesFormCtrl.model.label', 'Value Reduced Tax');
+
+    // submit the forn
+    FU.buttons.submit();
+
+    // make sure the "created" validation tag exists
+    FU.exists(by.css('[data-validation="updated"]'), true);
+
+    // return to the main page
+    FU.buttons.back();
+  });
+
+  /** @todo -- requires the modal described in #150 or similar */
+  it('can delete a billing service');
+});

client/test/e2e/shared/FormUtils.js

@@ -65,6 +65,7 @@ var buttons =  {
   create : function create() { return $('[data-method="create"]').click(); },
   submit : function submit() { return $('[data-method="submit"]').click(); },
   cancel : function cancel() { return $('[data-method="cancel"]').click(); },
+  back   : function back() { return $('[data-method="back"]').click(); },
   delete : function delet() { return $('[data-method="delete"]').click(); }
 };
 

protractor.conf.js

@@ -9,19 +9,16 @@ var q = require('q');
 // as appropriate.
 
 var config = {
-  
+
   specs: ['client/test/e2e/**/*.spec.js'],
-  
+
   framework : 'mocha',
   baseUrl : 'https://localhost:8080/',
-  allScriptsTimeout : 30000,
-  timeout : 10000,
-  defaultTimeoutInterval : 30000,
-  ignoreSynchronization : false,
 
   mochaOpts : {
     timeout : 30000
   },
+
   // default browsers to run
   multiCapabilities: [{
     //'browserName': 'firefox',