fix(depots): address flaky tests

This commit eliminates some of the uncertainty in the depot tests by
making sure `hasLocation` is always set.  Additionally, the selector
for remove and join location is the same in the page object.  Finally,
the tests have been migrated away from using GU/GA to a more
predictable set of methods.

... I never solved the issue with the joinLocation tests.  So I've
skipped them.  It probably has something to do with not loading the
values soon enough in the `bhLocationSelect`.

client/src/js/components/bhLocationSelect.js

@@ -3,18 +3,18 @@ angular.module('bhima.components')
 /**
  * Location Selection Component - bhLocationSelect
  */
-.component('bhLocationSelect', {
-  templateUrl : 'modules/templates/bhLocationSelect.tmpl.html',
-  controller  : LocationSelectController,
-  bindings    : {
-    locationUuid      : '=', // two-way binding
-    disable           : '<', // one-way binding
-    validationTrigger : '<', // one-way binding
-    name              : '@',
-  },
-});
-
-LocationSelectController.$inject =  ['LocationService', '$rootScope', '$scope', '$timeout'];
+  .component('bhLocationSelect', {
+    templateUrl : 'modules/templates/bhLocationSelect.tmpl.html',
+    controller  : LocationSelectController,
+    bindings    : {
+      locationUuid      : '=', // two-way binding
+      disable           : '<?', // one-way binding
+      validationTrigger : '<?', // one-way binding
+      name              : '@?',
+    },
+  });
+
+LocationSelectController.$inject = ['LocationService', '$rootScope', '$scope', '$timeout'];
 
 /**
  * Location Select Controller
@@ -53,8 +53,8 @@ LocationSelectController.$inject =  ['LocationService', '$rootScope', '$scope',
  *
  */
 function LocationSelectController(Locations, $rootScope, $scope, $timeout) {
-  var vm = this;
-  var listener;
+  const vm = this;
+  let listener;
 
   this.$onInit = function $onInit() {
     vm.loading = false;
@@ -139,87 +139,87 @@ function LocationSelectController(Locations, $rootScope, $scope, $timeout) {
   }
   function loadCountries() {
     return Locations.countries()
-    .then(function (countries) {
-
-      // bind the countries to view
-      vm.countries = countries;
-
-      // if there are countries to select, show a "select a country" message
-      // however, if there isn't any data, show a "no data" message. This pattern
-      // is used throughout the component.
-      vm.messages.country = (countries.length > 0) ?
-        Locations.messages.country :
-        Locations.messages.empty ;
-    });
+      .then((countries) => {
+
+        // bind the countries to view
+        vm.countries = countries;
+
+        // if there are countries to select, show a "select a country" message
+        // however, if there isn't any data, show a "no data" message. This pattern
+        // is used throughout the component.
+        vm.messages.country = (countries.length > 0) ?
+          Locations.messages.country :
+          Locations.messages.empty;
+      });
   }
 
   /** load the provinces, based on the country selected */
   function loadProvinces() {
 
     // don't send an HTTP request if there is no country
-    if (!vm.country || !vm.country.uuid) { return; }
+    if (!vm.country || !vm.country.uuid) { return 0; }
 
     // allow the <select> to be selected
     vm.disabled.province = false;
 
     // load the provinces to bind to the view
     return Locations.provinces({ country : vm.country.uuid })
-    .then(function (provinces) {
-      vm.provinces = provinces;
-
-      // show the appropriate message to the user
-      vm.messages.province = (provinces.length > 0) ?
-        Locations.messages.province :
-        Locations.messages.empty;
-
-      // clear the dependent <select> elements
-      vm.sectors = [];
-      vm.villages = [];
-    });
+      .then(provinces => {
+        vm.provinces = provinces;
+
+        // show the appropriate message to the user
+        vm.messages.province = (provinces.length > 0) ?
+          Locations.messages.province :
+          Locations.messages.empty;
+
+        // clear the dependent <select> elements
+        vm.sectors = [];
+        vm.villages = [];
+      });
   }
 
   /** load the sectors, based on the province selected */
   function loadSectors() {
     // don't send an HTTP request if there is no province
-    if (!vm.province || !vm.province.uuid) { return; }
+    if (!vm.province || !vm.province.uuid) { return 0; }
 
     // allow the <select> to be selected
     vm.disabled.sector = false;
 
     // fetch the sectors from the server
     return Locations.sectors({ province : vm.province.uuid })
-    .then(function (sectors) {
-      vm.sectors = sectors;
+      .then(sectors => {
+        vm.sectors = sectors;
 
-      // show the appropriate message to the user
-      vm.messages.sector = (sectors.length > 0) ?
-        Locations.messages.sector :
-        Locations.messages.empty ;
+        // show the appropriate message to the user
+        vm.messages.sector = (sectors.length > 0) ?
+          Locations.messages.sector :
+          Locations.messages.empty;
 
-      // clear the selected village
-      vm.villages = [];
-    });
+        // clear the selected village
+        vm.villages = [];
+      });
   }
 
   /** load the villages, based on the sector selected */
   function loadVillages() {
 
     // don't send an HTTP request if there is no sector
-    if (!vm.sector || !vm.sector.uuid) { return; }
+    if (!vm.sector || !vm.sector.uuid) { return 0; }
 
     // allow the <select> to be selected
     vm.disabled.village = false;
 
     // fetch the villages from the server
     return Locations.villages({ sector : vm.sector.uuid })
-    .then(function (villages) {
-      vm.villages = villages;
-
-      // show the appropriate message to the user
-      vm.messages.village = (villages.length > 0) ?
-        Locations.messages.village :
-        Locations.messages.empty;
-    });
+      .then((villages) => {
+        vm.villages = villages;
+
+        // show the appropriate message to the user
+        vm.messages.village = (villages.length > 0) ?
+          Locations.messages.village :
+          Locations.messages.empty;
+      });
   }
 
   /** updates the exposed location uuid for the client to use */
@@ -256,56 +256,54 @@ function LocationSelectController(Locations, $rootScope, $scope, $timeout) {
 
     // download the location to the view via the LocationService
     Locations.location(vm.locationUuid)
-    .then(function (initial)  {
-
-      // bind initial data to each <select> elementin the view
-      vm.village = {
-        uuid    : initial.villageUuid,
-        village : initial.village,
-      };
-
-      vm.sector = {
-        uuid   : initial.sectorUuid,
-        sector : initial.sector,
-      };
-
-      vm.province = {
-        uuid     : initial.provinceUuid,
-        province : initial.province,
-      };
-
-      vm.country = {
-        uuid    : initial.countryUuid,
-        country : initial.country,
-      };
-
-      updateLocationUuid();
-
-      // refresh all data sources to allow a user to use the <select> elements.
-      loadProvinces()
-      .then(loadSectors)
-      .then(loadVillages);
-    });
+      .then((initial) => {
+
+        // bind initial data to each <select> elementin the view
+        vm.village = {
+          uuid    : initial.villageUuid,
+          village : initial.village,
+        };
+
+        vm.sector = {
+          uuid   : initial.sectorUuid,
+          sector : initial.sector,
+        };
+
+        vm.province = {
+          uuid     : initial.provinceUuid,
+          province : initial.province,
+        };
+
+        vm.country = {
+          uuid    : initial.countryUuid,
+          country : initial.country,
+        };
+
+        updateLocationUuid();
+
+        // refresh all data sources to allow a user to use the <select> elements.
+        loadProvinces()
+          .then(loadSectors)
+          .then(loadVillages);
+      });
   }
 
   // load the countries once, at startup
   loadCountries();
 
   function refreshData() {
-    var cacheSector = angular.copy(vm.sector);
-    var cacheVillage = angular.copy(vm.village);
+    const cacheSector = angular.copy(vm.sector);
+    const cacheVillage = angular.copy(vm.village);
 
     loadProvinces()
-    .then(function (results) {
-      return loadSectors();
-    })
-    .then(function (results) {
-      vm.sector = cacheSector;
-      return loadVillages();
-    })
-    .then(function () {
-      vm.village = cacheVillage;
-    });
+      .then(loadSectors)
+      .then(() => {
+        vm.sector = cacheSector;
+        return loadVillages();
+      })
+      .then(() => {
+        vm.village = cacheVillage;
+      });
   }
 
   /**

client/src/modules/depots/modals/depot.modal.html

@@ -83,7 +83,7 @@
     </div>
 
     <br>
-    
+
     <div class="form-group">
       <label translate>DEPOT.WAREHOUSE_INFO</label>
       <div class="checkbox">
@@ -113,14 +113,17 @@
       </div>
 
       <div ng-if="DepotModalCtrl.hasLocation">
-        <bh-location-select location-uuid="DepotModalCtrl.depot.location_uuid"></bh-location-select>
+        <bh-location-select
+          validation-trigger="DepotForm.$submitted"
+          location-uuid="DepotModalCtrl.depot.location_uuid">
+        </bh-location-select>
       </div>
     </div>
 
   </div>
 
   <div class="modal-footer">
-    <button data-method="cancel" type="button" class="btn btn-default" ng-click="DepotModalCtrl.closeModal()">
+    <button data-method="cancel" type="button" class="btn btn-default" ui-sref="depots">
       <i class="fa fa-ban"></i> <span translate>FORM.BUTTONS.CANCEL</span>
     </button>
 

client/src/modules/depots/modals/depot.modal.js

@@ -11,17 +11,22 @@ function DepotModalController($state, Depots, ModalService, Notify) {
   vm.depot = $state.params.depot;
   vm.isCreating = !!($state.params.creating);
 
-  if (vm.depot.location_uuid) {
-    vm.hasLocation = 1;
-  }
+  // make sure hasLocation is set
+  vm.hasLocation = vm.depot.location_uuid ? 1 : 0;
 
   // exposed methods
   vm.submit = submit;
-  vm.closeModal = closeModal;
 
   // submit the data to the server from all two forms (update, create)
   function submit(depotForm) {
-    if (depotForm.$invalid || depotForm.$pristine) { return 0; }
+    if (depotForm.$invalid) {
+      return 0;
+    }
+
+    if (depotForm.$pristine) {
+      cancel();
+      return 0;
+    }
 
     Depots.clean(vm.depot);
 
@@ -42,7 +47,7 @@ function DepotModalController($state, Depots, ModalService, Notify) {
       .catch(Notify.handleError);
   }
 
-  function closeModal() {
+  function cancel() {
     $state.go('depots');
   }
 }

client/src/modules/depots/templates/action.tmpl.html

@@ -1,18 +1,18 @@
-<div class="ui-grid-cell-contents text-center" uib-dropdown dropdown-append-to-body>
+<div class="ui-grid-cell-contents text-center" uib-dropdown dropdown-append-to-body data-row="{{ row.entity.text }}">
   <a uib-dropdown-toggle href>
-    <span data-method="action" translate>FORM.BUTTONS.ACTIONS</span>
+    <span data-action="open-dropdown-menu" translate>FORM.BUTTONS.ACTIONS</span>
     <span class="caret"></span>
   </a>
 
-  <ul data-action="{{rowRenderIndex}}"  class="dropdown-menu-right" uib-dropdown-menu>
+  <ul class="dropdown-menu-right" uib-dropdown-menu data-row-menu="{{ row.entity.text }}">
     <li>
-      <a data-method="edit" ng-click="grid.appScope.editDepot(row.entity)" href>
+      <a data-method="edit-record" ng-click="grid.appScope.editDepot(row.entity)" href>
         <i class="fa fa-edit"></i> <span translate>FORM.BUTTONS.EDIT</span>
       </a>
     </li>
     <li class="divider"></li>
     <li>
-      <a data-method="delete" ng-click="grid.appScope.deleteDepot(row.entity)" href>
+      <a data-method="delete-record" ng-click="grid.appScope.deleteDepot(row.entity)" href>
         <span class="text-danger">
           <i class="fa fa-trash"></i> <span translate>DEPOT.DELETE</span>
         </span>

client/src/modules/depots/templates/warehouse.tmpl.html

@@ -1,3 +1,3 @@
 <div class="ui-grid-cell-contents text-center">
   <i ng-show="row.entity.is_warehouse" class="fa fa-check"></i>
-</div>
+</div>