fix(complex): complete migration to page object

This commit completes the migration of the complex journal voucher tests
to using page objects.  It also ensures that translations are properly
selected from the settings page, ensuring that tests pass consistently.

Closes #417.

client/src/partials/templates/modals/findReference.modal.html

@@ -29,7 +29,8 @@ <h4>
 
     <div class="btn-group btn-group-justified">
       <div class="btn-group">
-        <button class="text-center btn btn-primary btn-lg"
+        <button
+          class="text-center btn btn-primary btn-lg"
           data-button-patient-invoice
           ng-click="$ctrl.selectDocType('patient_invoice')">
           <h2 class="glyphicon glyphicon-list-alt"></h2> <br>
@@ -38,7 +39,8 @@ <h2 class="glyphicon glyphicon-list-alt"></h2> <br>
       </div>
 
       <div class="btn-group">
-        <button class="text-center btn btn-primary btn-lg"
+        <button
+          class="text-center btn btn-primary btn-lg"
           ng-click="$ctrl.selectDocType('cash_payment')"
           data-button-cash-payment>
           <h2 class="glyphicon glyphicon-list-alt"></h2> <br>
@@ -47,7 +49,8 @@ <h2 class="glyphicon glyphicon-list-alt"></h2> <br>
       </div>
 
       <div class="btn-group">
-        <button class="text-center btn btn-primary btn-lg"
+        <button
+          class="text-center btn btn-primary btn-lg"
           ng-click="$ctrl.selectDocType('voucher')"
           data-button-voucher>
           <h2 class="glyphicon glyphicon-list-alt"></h2> <br>
@@ -58,7 +61,7 @@ <h2 class="glyphicon glyphicon-list-alt"></h2> <br>
   </div>
 
   <!-- select references  -->
-  <div ng-if="$ctrl.documentTypeSelected">
+  <div ng-show="$ctrl.documentTypeSelected">
     <div class="col-xs-12">
       <div
         id="referenceGrid"
@@ -68,22 +71,23 @@ <h2 class="glyphicon glyphicon-list-alt"></h2> <br>
       </div>
     </div>
   </div>
-
 </div>
 
-<div class="modal-footer clearfix">
-  <div class="pull-right">
-    <button type="button" class="btn btn-default"
-      ng-click="$ctrl.cancel()"
-      data-button-cancel>
-      {{ 'FORM.BUTTONS.CANCEL' | translate }}
-    </button>
+<div class="modal-footer text-right" data-reference-modal>
+  <button
+    type="button"
+    class="btn btn-default"
+    ng-click="$ctrl.cancel()"
+    data-method="cancel">
+    {{ 'FORM.BUTTONS.CANCEL' | translate }}
+  </button>
 
-    <button type="button" class="btn btn-primary"
-      ng-if="$ctrl.documentTypeSelected"
-      ng-click="$ctrl.submit()"
-      data-button-submit>
-      {{ 'FORM.BUTTONS.SUBMIT' | translate }}
-    </button>
-  </div>
+  <button
+    type="submit"
+    class="btn btn-primary"
+    ng-show="$ctrl.documentTypeSelected"
+    ng-click="$ctrl.submit()"
+    data-method="submit">
+    {{ 'FORM.BUTTONS.SUBMIT' | translate }}
+  </button>
 </div>

client/src/partials/vouchers/complex.css

@@ -1,17 +1,16 @@
-.input-number {
-  text-align: right;
-}
+
+/* @todo - write these in less */
 
 .normalRow {
   border-left: 2px solid white;
 }
 
 .validRow {
-  border-left: 2px solid green;
+  border-left: 2px solid #3c763d;
 }
 
 .invalidRow {
-  border-left: 2px solid red;
+  border-left: 2px solid #d9534f;
 }
 
 .iconRow {

client/src/partials/vouchers/complex.html

@@ -11,53 +11,49 @@
       <div class="row">
         <div class="col-md-6">
           <div class="panel panel-default">
+            <bh-date-editor
+              date-value="ComplexVoucherCtrl.voucher.date"
+              max-date="ComplexVoucherCtrl.timestamp"
+            >
+            </bh-date-editor>
+
+            <div
+              class="form-group"
+              ng-class="{ 'has-error' : ComplexVoucherForm.$submitted && ComplexVoucherForm.description.$invalid }">
+              <label class="control-label">{{ "FORM.LABELS.DESCRIPTION" | translate }}</label>
+              <textarea
+                class="form-control"
+                name="description"
+                ng-model="ComplexVoucherCtrl.voucher.description"
+                placeholder="{{ 'FORM.PLACE_HOLDERS.ENTER_DESCRIPTION' | translate }}"
+                required>
+              </textarea>
+              <div class="help-block" ng-messages="ComplexVoucherForm.description.$error" ng-show="ComplexVoucherForm.$submitted">
+                <div ng-messages-include="partials/templates/messages.tmpl.html"></div>
+              </div>
+            </div>
 
-            <div class="panel-body">
-
-                <bh-date-editor
-                  date-value="ComplexVoucherCtrl.voucher.date"
-                  max-date="ComplexVoucherCtrl.timestamp"
-                >
-                </bh-date-editor>
-
-                <div
-                  class="form-group"
-                  ng-class="{ 'has-error' : ComplexVoucherForm.$submitted && ComplexVoucherForm.description.$invalid }">
-                  <label class="control-label">{{ "FORM.LABELS.DESCRIPTION" | translate }}</label>
-                  <textarea
-                    class="form-control"
-                    name="description"
-                    ng-model="ComplexVoucherCtrl.voucher.description"
-                    placeholder="{{ 'FORM.PLACE_HOLDERS.ENTER_DESCRIPTION' | translate }}"
-                    required>
-                  </textarea>
-                  <div class="help-block" ng-messages="ComplexVoucherForm.description.$error" ng-show="ComplexVoucherForm.$submitted">
-                    <div ng-messages-include="partials/templates/messages.tmpl.html"></div>
-                  </div>
-                </div>
-
-                <!-- @TODO - use a currency selection component -->
-                <div
-                  class="radio"
-                  ng-class="{ 'has-error' : ComplexVoucherForm.$submitted && ComplexVoucherForm.currency.$invalid }">
-                  <p><strong class="control-label">{{ "FORM.LABELS.CURRENCY" | translate }}</strong></p>
-                  <label ng-repeat="currency in ComplexVoucherCtrl.currencies track by currency.id"
-                    class="radio-inline">
-                    <input
-                      name="currency"
-                      type="radio"
-                      ng-model="ComplexVoucherCtrl.voucher.currency_id"
-                      ng-value="currency.id"
-                      data-currency-option="{{ currency.id }}"
-                      required>
-                    {{ currency.label }}
-                  </label>
-
-                  <div class="help-block" ng-messages="ComplexVoucherForm.currency.$error" ng-show="ComplexVoucherForm.$submitted">
-                    <div ng-messages-include="partials/templates/messages.tmpl.html"></div>
-                  </div>
-                </div>
-
+            <!-- @TODO - use a currency selection component -->
+            <div
+              class="radio"
+              ng-class="{ 'has-error' : ComplexVoucherForm.$submitted && ComplexVoucherForm.currency.$invalid }">
+              <p><strong class="control-label">{{ "FORM.LABELS.CURRENCY" | translate }}</strong></p>
+              <label
+                ng-repeat="currency in ComplexVoucherCtrl.currencies track by currency.id"
+                class="radio-inline">
+                <input
+                  name="currency"
+                  type="radio"
+                  ng-model="ComplexVoucherCtrl.voucher.currency_id"
+                  ng-value="currency.id"
+                  data-currency-option="{{ currency.id }}"
+                  required>
+                {{ currency.label }}
+              </label>
+
+              <div class="help-block" ng-messages="ComplexVoucherForm.currency.$error" ng-show="ComplexVoucherForm.$submitted">
+                <div ng-messages-include="partials/templates/messages.tmpl.html"></div>
+              </div>
             </div>
           </div>
         </div>
@@ -74,7 +70,7 @@ <h3>{{ 'VOUCHERS.COMPLEX.TITLE' | translate }}</h3>
       <div class="row">
         <div class="col-md-12">
           <div class="panel panel-default">
-            <div class="panel-heading clearfix">
+            <div class="panel-heading">
 
               <!--
                 Hack styles to make text behave look like class "btn".  This should be formalized into a class
@@ -100,31 +96,32 @@ <h3>{{ 'VOUCHERS.COMPLEX.TITLE' | translate }}</h3>
                   <th class="text-center">#</th>
                   <th style="width:30%">{{ 'TABLE.COLUMNS.ACCOUNT' | translate }}</th>
                   <th>&nbsp;</th>
-                  <th style="width:15%" class="text-center">{{ 'TABLE.COLUMNS.DEBIT' | translate }}</th>
-                  <th style="width:15%" class="text-center">{{ 'TABLE.COLUMNS.CREDIT' | translate }}</th>
+                  <th style="width:15%">{{ 'TABLE.COLUMNS.DEBIT' | translate }}</th>
+                  <th style="width:15%">{{ 'TABLE.COLUMNS.CREDIT' | translate }}</th>
                   <th style="width:15%" class="text-center">{{ 'VOUCHERS.COMPLEX.ENTITY' | translate }}</th>
                   <th style="width:15%" class="text-center">{{ 'TABLE.COLUMNS.REFERENCE' | translate }}</th>
                   <th>&nbsp;</th>
                 </tr>
               </thead>
 
               <tbody>
-                <tr class="normalRow"
+                <tr
+                  class="normalRow"
                   ng-repeat="row in ComplexVoucherCtrl.rows"
                   ng-class="{'validRow': row.isValid, 'invalidRow': !row.isValid}"
                   data-row="{{ $index }}">
                   <td>
                     <span ng-show="row.isValid" class="text-success iconRow">
-                      <span class="glyphicon glyphicon-ok"></span>
+                      <span class="glyphicon glyphicon-ok-sign"></span>
                     </span>
+
                     <span ng-hide="row.isValid" class="text-danger iconRow">
-                      <span class="glyphicon glyphicon-remove"></span>
+                      <span class="glyphicon glyphicon-exclamation-sign"></span>
                     </span>
                   </td>
                   <td>
                     <input
                       ng-model="row.account"
-                      ng-change="ComplexVoucherCtrl.checkRowValidity($index)"
                       type="text"
                       placeholder="{{ 'FORM.PLACE_HOLDERS.ENTER_ACCOUNT' | translate }}..."
                       uib-typeahead="account as account.hrlabel for account in ComplexVoucherCtrl.accounts | filter:$viewValue | limitTo:8 "
@@ -142,7 +139,7 @@ <h3>{{ 'VOUCHERS.COMPLEX.TITLE' | translate }}</h3>
                       ng-model="row.debit"
                       ng-change="ComplexVoucherCtrl.checkRowValidity($index)"
                       type="number"
-                      class="form-control"
+                      class="form-control text-right"
                       data-debit-input
                       required>
                   </td>
@@ -151,7 +148,7 @@ <h3>{{ 'VOUCHERS.COMPLEX.TITLE' | translate }}</h3>
                       ng-model="row.credit"
                       ng-change="ComplexVoucherCtrl.checkRowValidity($index)"
                       type="number"
-                      class="form-control"
+                      class="form-control text-right"
                       data-credit-input
                       required>
                   </td>
@@ -180,7 +177,7 @@ <h3>{{ 'VOUCHERS.COMPLEX.TITLE' | translate }}</h3>
                       type="button"
                       ng-click="ComplexVoucherCtrl.openReferenceModal(row)"
                       ng-class="{'btn-info': row.reference.uuid}"
-                      data-reference-row="{{ $index }}">
+                      data-reference-button>
 
                       <!-- state: has reference -->
                       <span ng-show="row.reference.uuid">
@@ -213,25 +210,22 @@ <h3>{{ 'VOUCHERS.COMPLEX.TITLE' | translate }}</h3>
               </tfoot>
             </table>
 
-            <div class="panel-footer text-right">
+            <div class="panel-footer clearfix">
 
-              <div ng-hide="ComplexVoucherCtrl.posted">
-                <span ng-class="{'text-danger': !ComplexVoucherCtrl.validInput, 'text-success': ComplexVoucherCtrl.validInput}">
-                  <i ng-class="ComplexVoucherCtrl.notifyMessage.icon"></i>
-                  {{ ComplexVoucherCtrl.notifyMessage.label | translate }}
-                </span>
-              </div>
+              <span ng-class="{'text-danger': !ComplexVoucherCtrl.validInput, 'text-success': ComplexVoucherCtrl.validInput}" ng-hide="ComplexVoucherCtrl.posted">
+                <span ng-class="ComplexVoucherCtrl.notifyMessage.icon"></span>
+                {{ ComplexVoucherCtrl.notifyMessage.label | translate }}
+              </span>
 
               <button
-                class="btn btn-primary"
+                class="btn btn-primary pull-right"
                 ng-disabled="!ComplexVoucherCtrl.validInput"
                 ng-click="ComplexVoucherCtrl.submit(ComplexVoucherForm)"
                 data-method="submit">
                 {{ "FORM.BUTTONS.SUBMIT" | translate }}
               </button>
               </div>
             </div>
-            <div ng-show="ComplexVoucherCtrl.posted" id="create-success"></div>
           </div>
         </div>
       </div>

client/src/partials/vouchers/complex.js

@@ -188,7 +188,7 @@ function ComplexJournalVoucherController(Vouchers, $translate, Accounts, Currenc
       !vm.rowsInput.validAmount ? { icon : 'glyphicon glyphicon-alert', label : 'VOUCHERS.COMPLEX.ERROR_AMOUNT' } :
       !vm.rowsInput.validAccount ? { icon : 'glyphicon glyphicon-alert', label : 'VOUCHERS.COMPLEX.ERROR_ACCOUNT' } :
       !vm.rowsInput.validTotals ? { icon : 'glyphicon glyphicon-alert', label : 'VOUCHERS.COMPLEX.ERROR_TOTALS' } :
-      vm.rowsInput.validTotals && vm.validInput ? { icon : 'glyphicon glyphicon-check', label : 'VOUCHERS.COMPLEX.VALID_TOTALS' } :
+      vm.rowsInput.validTotals && vm.validInput ? { icon : 'glyphicon glyphicon-ok-sign', label : 'VOUCHERS.COMPLEX.VALID_TOTALS' } :
       { icon : '', label : '' };
     summation();
   }

client/test/e2e/journal/journal.page.js

@@ -2,7 +2,7 @@
 
 // var GridTestUtils = require('../shared/gridTestUtils.spec.js');
 
-function JournalCorePage() { 
+function JournalCorePage() {
   var page = this;
 
   /**
@@ -20,13 +20,13 @@ function JournalCorePage() {
   var journalGridRows = journalGrid.element( by.css('.ui-grid-render-container-body')).all( by.repeater('(rowRenderIndex, row) in rowContainer.renderedRows track by $index') );
   var journalGridColumns = journalGrid.element( by.css('.ui-grid-render-container-body')).element( by.css('.ui-grid-header') ).all( by.repeater('col in colContainer.renderedColumns track by col.uid') );
 
-  // this method is taken from gridTestUtils.spec.js, the standard UI Grid 
+  // this method is taken from gridTestUtils.spec.js, the standard UI Grid
   // testing framework (mocha incompatability)
-  function getTotalRows() { 
+  function getTotalRows() {
     return journalGridRows.count();
   }
 
-  function getColumnCount( expectedNumCols ) {    
+  function getColumnCount( expectedNumCols ) {
     return journalGridColumns.count();
   }
 
@@ -51,9 +51,9 @@ function JournalCorePage() {
   page.getTotalRows = getTotalRows;
   page.showColumnConfigDialog = showColumnConfigDialog;
   page.changeDescriptionState = changeDescriptionState;
-  page.submitButton = submitConfig; 
+  page.submitButton = submitConfig;
   page.getColumnCount = getColumnCount;
   page.resetColumnConfig = resetColumnConfig;
-  
+
 }
 module.exports = JournalCorePage;

client/test/e2e/patient/invoice.spec.js

@@ -40,7 +40,7 @@ describe('Patient Invoice', function () {
 
     // attempt to submit the page.
     page.submit();
-    
+
     FU.exists(by.id('receipt-confirm-created'), true);
   });
 
@@ -105,15 +105,15 @@ describe('Patient Invoice', function () {
     // get a new page
     var page = new PatientInvoicePage();
     page.btns.clear.click();
-    
+
     // set up a valid invoice
     page.prepare();
 
     // add two rows to grid.
     page.addRows(1);
 
     page.submit();
-    
+
     /** @todo this should use the latest notification components tests methods when they are merged in #388*/
     components.notification.verify();
     components.notification.dismiss();

client/test/e2e/settings/settings.spec.js

@@ -15,10 +15,7 @@ describe('Settings', function () {
     // confirm that we can change the languages
     // ideally, we should check that the language changed, but this
     // test should only confirm that things are open.
-    FU.select('SettingsCtrl.settings.language')
-      .enabled()
-      .last()
-      .click();
+    FU.select('SettingsCtrl.settings.language').get(1).click();
 
     // make sure that the "back" button doesn't exist
     FU.exists(by.css('[data-back-button]'), false);