From 3aab6fb71aeb1265e47a89905bcab0db5589740f Mon Sep 17 00:00:00 2001
From: Jonathan Niles <jonathanwniles@gmail.com>
Date: Thu, 26 May 2016 15:32:40 +0100
Subject: [PATCH] feat(test): allow selecting within anchor elements

This commit extends the `FormUtils` API to allow an optional anchor
element to be passed in.  The anchor element will cause the `FormUtils`
library to search only within the subtree contained by that element.

All end-to-end tests now use `FU.typeahead()` when they require a
typeahead.
---
 client/src/partials/vouchers/complex.html     |   3 -
 .../billingServices/billingServices.spec.js   |  12 +-
 client/test/e2e/shared/FormUtils.js           | 167 +++++++++---------
 .../shared/components/bhFindDebtorGroup.js    |  62 +++----
 .../e2e/shared/components/bhFindPatient.js    |  16 +-
 client/test/e2e/vouchers/complex.page.js      |  30 +---
 client/test/e2e/vouchers/simple.spec.js       |  11 +-
 7 files changed, 128 insertions(+), 173 deletions(-)

diff --git a/client/src/partials/vouchers/complex.html b/client/src/partials/vouchers/complex.html
index 3766217bc0..e5e7f6d9b4 100644
--- a/client/src/partials/vouchers/complex.html
+++ b/client/src/partials/vouchers/complex.html
@@ -129,7 +129,6 @@ <h3>{{ 'VOUCHERS.COMPLEX.TITLE' | translate }}</h3>
                       uib-typeahead="account as account.hrlabel for account in ComplexVoucherCtrl.accounts | filter:$viewValue | limitTo:8 "
                       typeahead-editable="false"
                       typeahead-on-select="ComplexVoucherCtrl.checkRowValidity($index)"
-                      data-account-input
                       class="form-control"
                       required>
                   </td>
@@ -142,7 +141,6 @@ <h3>{{ 'VOUCHERS.COMPLEX.TITLE' | translate }}</h3>
                       ng-change="ComplexVoucherCtrl.checkRowValidity($index)"
                       type="number"
                       class="form-control text-right"
-                      data-debit-input
                       required>
                   </td>
                   <td>
@@ -151,7 +149,6 @@ <h3>{{ 'VOUCHERS.COMPLEX.TITLE' | translate }}</h3>
                       ng-change="ComplexVoucherCtrl.checkRowValidity($index)"
                       type="number"
                       class="form-control text-right"
-                      data-credit-input
                       required>
                   </td>
                   <td>
diff --git a/client/test/e2e/billingServices/billingServices.spec.js b/client/test/e2e/billingServices/billingServices.spec.js
index 7665b9eeda..3eeea3c898 100644
--- a/client/test/e2e/billingServices/billingServices.spec.js
+++ b/client/test/e2e/billingServices/billingServices.spec.js
@@ -26,17 +26,7 @@ describe('Billing Services', function () {
     // 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.typeahead('BillingServicesFormCtrl.model.account', '410');
     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);
diff --git a/client/test/e2e/shared/FormUtils.js b/client/test/e2e/shared/FormUtils.js
index 1990750839..e9d8081277 100644
--- a/client/test/e2e/shared/FormUtils.js
+++ b/client/test/e2e/shared/FormUtils.js
@@ -6,83 +6,31 @@ const expect = chai.expect;
 const helpers = require('./helpers');
 helpers.configure(chai);
 
-// Overide the element.all() prototype function provided by protractor to attach custom methods
-// @TODO - is there a better way without overriding the prototype function?
-var ElementArrayFinder = protractor.ElementArrayFinder;
-
-/**
-* Pick a random element from the ElementArrayFinder.
-*
-* @alias element.all(locator).random()
-* @view
-* <ul class="items">
-*   <li>First</li>
-*   <li>Second</li>
-*   <li>Third</li>
-* </ul>
-*
-* @example
-* var list = element.all(by.css('.items li));
-* expect(list.random().getText()).to.have.length.above(4);
-*
-* @todo - make this work. sigh.
-ElementArrayFinder.prototype.random = function() {
-  var self = this;
-  return self.count()
-  .then(function (length) {
-    var n = Math.floor(Math.random() * length);
-    return self.filter(function (elem, index) {
-      return index === n;
-    })
-  });
-};
-*/
-
-/**
-* Filter out disabled elements from the ElementArrayFinder.
-*
-* @alias element.all(locator).enabled()
-* @view
-* <select>
-*   <option disabled> I am disabled. </option>
-*   <option> I am not not. </option>
-* </select>
-*
-* @example
-* var options = element.all(by.css('select > option'));
-* expect(options.enabled()).to.have.length(1);
-*/
-ElementArrayFinder.prototype.enabled = function () {
-  return this.filter(function (elem, index) {
-    return elem.isEnabled();
-  });
-};
-
 // These buttons depend on custom data tags to indicate actions.  This seems
 // cleaner than using a whole bunch of ids which may potentially collide.
 // However, this decision can be reviewed
 var buttons =  {
-  create : function create() { return $('[data-method="create"]').click(); },
-  search : function search() { return $('[data-method="search"]').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(); }
+  create: function create() { return $('[data-method="create"]').click(); },
+  search: function search() { return $('[data-method="search"]').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(); }
 };
 
 // This methods are for easily working with modals.  Works with the same custom
 // data tags used in form buttons.
 var modal = {
-  submit : function submit() { return $('[uib-modal-window] [data-method="submit"]').click(); },
-  cancel : function cancel() { return $('[uib-modal-window] [data-method="cancel"]').click(); }
+  submit: function submit() { return $('[uib-modal-window] [data-method="submit"]').click(); },
+  cancel: function cancel() { return $('[uib-modal-window] [data-method="cancel"]').click(); }
 };
 
 // convenience methods to see if the form contains feedback text.  Returns locators.
 var feedback = {
-  success : function success() { return by.css('[data-role="feedback"] > .text-success'); },
-  error : function error() { return by.css('[data-role="feedback"] > .text-danger'); },
-  warning : function warning() { return by.css('[data-role="feedback"] > .text-warning'); },
-  info : function info() { return by.css('[data-role="feedback"] > .text-info'); }
+  success: function success() { return by.css('[data-role="feedback"] > .text-success'); },
+  error: function error() { return by.css('[data-role="feedback"] > .text-danger'); },
+  warning: function warning() { return by.css('[data-role="feedback"] > .text-warning'); },
+  info: function info() { return by.css('[data-role="feedback"] > .text-info'); }
 };
 
 // convenience methods to check form element validation states
@@ -103,42 +51,91 @@ var validation = {
 module.exports = {
 
   // get an <input> element by its ng-model
-  input : function input(model, value) {
-    return element(by.model(model)).clear().sendKeys(value);
+  input : function input(model, value, anchor) {
+
+    // get the HTML <input> element
+    let input = anchor ?
+      anchor.element(by.model(model)) :
+      element(by.model(model));
+
+    return input.clear().sendKeys(value);
   },
 
-  // get a <select> element by its ng-model.
-  select: function select(model, option) {
-    var root = element(by.model(model));
-    return root.element(by.cssContainingText('option', option)).click();
+  /**
+   * @method select
+   *
+   * @description
+   * Selects an option from an <select> html element.  Accepts the model
+   * selector, the option text, and an optional anchor element to search within.
+   * If no anchor is provided, it defaults to the body.
+   *
+   * @param {String} model - the ng-model target to select
+   * @param {String} option - the text of the <option> element to choose
+   * @param {Element} anchor - a protractor element to search within
+   * @returns {Element} - a protractor <option> element
+   */
+  select: function select(model, option, anchor) {
+    anchor = anchor || $('body');
+    let select = anchor.element(by.model(model));
+    let choice = select.element(by.cssContainingText('option', option));
+    return choice.click();
   },
 
   // get a radio button by its position and click
-  radio : function radio(model, n) {
+  radio: function radio(model, n) {
     return element.all(by.model(model)).get(n).click();
   },
 
   // asserts whether an element exists or not
-  exists : function exists(locator, bool) {
+  exists: function exists(locator, bool) {
     expect(element(locator).isPresent()).to.eventually.equal(bool);
   },
 
-  // select the item in the typeahead that matches the value given
-  // by label
-  typeahead: function typeahead(model, label) {
-    this.input(model, label);
+  /**
+   * @method typeahead
+   *
+   * @description
+   * Selects a dropdown option from a typeahead html element.  Accepts the model
+   * selector, the option text, and an optional anchor element to search within.
+   * If no anchor is provided, it defaults to the body.
+   *
+   * @param {String} model - the ng-model target to select
+   * @param {String} option - the text of the option element to choose
+   * @param {Element} anchor - a protractor element to search within
+   * @returns {Element} - a protractor option element
+   */
+  typeahead: function typeahead(model, label, anchor) {
+    anchor = anchor || $('body');
+
+    // type into the <input> element
+    this.input(model, label, anchor);
 
     // select the item of the dropdown menu matching the label
-    let option = element(by.cssContainingText('.dropdown-menu > [role="option"]', label));
-    option.click();
+    let option = anchor.element(by.cssContainingText('.dropdown-menu > [role="option"]', label));
+    return option.click();
   },
 
-  // select an item from the dropdown menu identified by 'selector'
-  dropdown: function dropdown(selector, label) {
-    element(by.css(selector)).click();
+  /**
+   * @method dropdown
+   *
+   * @description
+   * Selects a dropdown option from a dropdown html element.  Accepts the target
+   * selector, the option text, and an optional anchor element to search within.
+   * If no anchor is provided, it defaults to the body.
+   *
+   * @param {String} selector - the css selector to select
+   * @param {String} option - the text of the option element to choose
+   * @param {Element} anchor - a protractor element to search within
+   * @returns {Element} - a protractor option element
+   */
+  dropdown: function dropdown(selector, label, anchor) {
+    anchor = anchor || $('body');
+
+    // open the dropdown menu
+    $(selector).click();
 
     let option = element(by.cssContainingText('[uib-dropdown-menu] > li', label));
-    option.click();
+    return option.click();
   },
 
 
@@ -149,12 +146,12 @@ module.exports = {
   // bind commonly shown feedback utilities
   // to detect feedback, the parent element must have the
   // [data-role="feedback"] attribute assigned to it.
-  feedback : feedback,
+  feedback: feedback,
 
   // bind validation states.  Each method takes in a model's string and asserts
   // the validation state.
-  validation : validation,
+  validation: validation,
 
   // bindings for modal overlay forms
-  modal : modal
+  modal: modal
 };
diff --git a/client/test/e2e/shared/components/bhFindDebtorGroup.js b/client/test/e2e/shared/components/bhFindDebtorGroup.js
index 318485cb84..09b82a3ff8 100644
--- a/client/test/e2e/shared/components/bhFindDebtorGroup.js
+++ b/client/test/e2e/shared/components/bhFindDebtorGroup.js
@@ -1,61 +1,63 @@
 /* global element, by */
 
+const FU = require('../FormUtils');
+
 /**
-* Find Debtor Group component
-* findDebtorGroup.js
-* @public
-*/
+ * Find Debtor Group component
+ * findDebtorGroup.js
+ * @public
+ */
 module.exports = {
-  root     : element(by.css('[data-bh-find-debtorgroup-name]')),
+  root: element(by.css('[data-bh-find-debtorgroup-name]')),
 
   /**
-  * @function search
-  * @param {string} name The text for the debtor group name
-  * @description This function permits to insert a debtor group text
-  */
-  search : function search(name) {
+   * @function search
+   * @param {string} name The text for the debtor group name
+   * @description This function permits to insert a debtor group text
+   */
+  search: function search(name) {
     var searchName  = name || 'Tes';
-    var input = this.root.element(by.model('$ctrl.debtorGroupName'));
-    input.sendKeys(searchName);
+    FU.input('$ctrl.debtorGroupName', name, this.root);
   },
 
   /**
-  * @function select
-  * @param {number} index The index of a debtor group in the list
-  * @description Select a particular debtor group in the list of debtor groups
-  */
-  select : function select(index) {
+   * @function select
+   * @param {Number} index The index of a debtor group in the list
+   * @description Select a particular debtor group in the list of debtor groups
+   */
+  select: function select(index) {
     var searchIndex = index || 0;
+
     var select = this.root.element(by.css('[uib-typeahead-popup]'));
     var item = select.element(by.repeater('match in matches').row(searchIndex));
     item.click();
   },
 
   /**
-  * @function popup
-  * @description Trigger a click on the popup button for details of a debtor group
-  */
-  popup : function popup() {
+   * @function popup
+   * @description Trigger a click on the popup button for details of a debtor group
+   */
+  popup: function popup() {
     var popupButton = this.root.element(by.id('popupInfo'));
     popupButton.click();
   },
 
   /**
-  * @function reload
-  * @description Trigger a click on the reload button for selecting another debtor group
-  */
+   * @function reload
+   * @description Trigger a click on the reload button for selecting another debtor group
+   */
   reload : function reload() {
     var reloadButton = this.root.element(by.id('reload'));
     reloadButton.click();
   },
 
   /**
-  * @function test
-  * @param {string} name The text for the debtor group name
-  * @param {number} index The index of a debtor group in the list
-  * @description Run a default test of use of the component
-  */
-  test : function test(name, index) {
+   * @function test
+   * @param {String} name The text for the debtor group name
+   * @param {Number} index The index of a debtor group in the list
+   * @description Run a default test of use of the component
+   */
+  test: function test(name, index) {
     this.search(name);
     this.select(index);
     this.popup();
diff --git a/client/test/e2e/shared/components/bhFindPatient.js b/client/test/e2e/shared/components/bhFindPatient.js
index f50ebee12b..850ff6b0f9 100644
--- a/client/test/e2e/shared/components/bhFindPatient.js
+++ b/client/test/e2e/shared/components/bhFindPatient.js
@@ -1,5 +1,7 @@
 /* global browser, element, by */
 
+const FU = require('../FormUtils');
+
 /**
  * hooks for the find patient component described in the component
  * bhFindPatient.js.
@@ -21,7 +23,7 @@ module.exports = {
     var tmpl = (mode === 'id') ? 'ID' : 'NAME';
 
     // click the correct dropdown item
-    var option = element(by.css('[data-find-patient-option="FORM.LABELS.PATIENT_?"]'.replace('?', tmpl)));
+    var option = element(by.css(`[data-find-patient-option="FORM.LABELS.PATIENT_${tmpl}"]`));
     option.click();
   },
 
@@ -36,13 +38,8 @@ module.exports = {
     // set the input to "find by name" mode
     this.mode('name');
 
-    // get the input and enter the id provided
-    var input = root.element(by.model('$ctrl.nameInput'));
-    input.sendKeys(name);
-
-    // get the first option and click it
-    var option = root.all(by.repeater('match in matches track by $index')).first();
-    option.click();
+    // get the input and enter the name provided
+    FU.typeahead('$ctrl.nameInput', name);
   },
 
   /**
@@ -54,8 +51,7 @@ module.exports = {
     this.mode('id');
 
     // get the input and enter the id provided
-    var input = element(by.model('$ctrl.idInput'));
-    input.sendKeys(id);
+    FU.input('$ctrl.idInput', id);
 
     // submit the id to the server
     var submit = element(by.css('[data-find-patient-submit]'));
diff --git a/client/test/e2e/vouchers/complex.page.js b/client/test/e2e/vouchers/complex.page.js
index 00df69d277..486c5f1091 100644
--- a/client/test/e2e/vouchers/complex.page.js
+++ b/client/test/e2e/vouchers/complex.page.js
@@ -25,47 +25,27 @@ class Row {
 
     // store a reference to the <tr> dom element
     this._node = $(`[data-row="${index}"]`);
-
-    // selectors for buttons/inputs in the row
-    this._selectors = {
-      account: '[data-account-input]',
-      credit: '[data-credit-input]',
-      debit: '[data-debit-input]',
-      entity: '[data-entity-button]',
-      reference: '[data-reference-button]'
-    };
-  }
-
-  // inputs the number in to the <input> matched by the selector
-  _input(selector, number) {
-    let input = this._node.$(selector);
-    input.clear();
-    input.sendKeys(number);
   }
 
   // account setter
   account(number) {
-    this._input(this._selectors.account, number);
-
-    // click the first matching option in the list
-    let option = element.all(by.repeater('match in matches track by $index')).first();
-    option.click();
+    FU.typeahead('row.account', number, this._node);
   }
 
   // sets the debit value
   debit(number) {
-    this._input(this._selectors.debit, number);
+    FU.input('row.debit', number, this._node);
   }
 
   // sets the credit value
   credit(number) {
-    this._input(this._selectors.credit, number);
+    FU.input('row.credit', number, this._node);
   }
 
   // sets the entity
   entity(type, name) {
     // click the 'open entity modal' button
-    this._node.$(this._selectors.entity).click();
+    this._node.$('[data-entity-button]').click();
 
     // the modal is now open
 
@@ -82,7 +62,7 @@ class Row {
   // sets the reference
   reference(type, index) {
     // click the 'open reference modal' button
-    this._node.$(this._selectors.reference).click();
+    this._node.$('[data-reference-button]').click();
 
     // select the type
     // supported : 'voucher', 'cash-payment', 'patient-invoice'
diff --git a/client/test/e2e/vouchers/simple.spec.js b/client/test/e2e/vouchers/simple.spec.js
index 28f830e87d..28de246e7d 100644
--- a/client/test/e2e/vouchers/simple.spec.js
+++ b/client/test/e2e/vouchers/simple.spec.js
@@ -25,16 +25,9 @@ describe('Simple Vouchers', function () {
     // configure the date to yesterday
     components.dateEditor.set(voucher.date);
 
-    var option;
-
     // select the appropriate accounts
-    FU.input('SimpleVoucherCtrl.voucher.toAccount', voucher.toAccount);
-    option = element.all(by.repeater('match in matches track by $index')).last();
-    option.click();
-
-    FU.input('SimpleVoucherCtrl.voucher.fromAccount', voucher.fromAccount);
-    option = element.all(by.repeater('match in matches track by $index')).last();
-    option.click();
+    FU.typeahead('SimpleVoucherCtrl.voucher.toAccount', voucher.toAccount);
+    FU.typeahead('SimpleVoucherCtrl.voucher.fromAccount', voucher.fromAccount);
 
     // check the USD radio option
     element(by.css('[data-currency-option="2"]')).click();