changed func. and added tests

angular-ui · Aug 25, 2016 · 50b6bf9 · 50b6bf9
1 parent 20f2d70
commit 50b6bf9
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 11 deletions.
diff --git a/src/bootstrap/select.tpl.html b/src/bootstrap/select.tpl.html
@@ -1,6 +1,6 @@
 <div class="ui-select-container ui-select-bootstrap dropdown" ng-class="{open: $select.open}">
   <div class="ui-select-match"></div>
-  <span ng-show="$select.refreshing" class="ui-select-refreshing" ng-class="{ 'glyphicon-refresh ui-select-spin': $select.refreshing }"></span>
+  <span ng-show="$select.open && $select.refreshing  && $select.spinnerEnabled" class="ui-select-refreshing {{$select.spinnerClass}}""></span>
   <input type="search" autocomplete="off" tabindex="-1"
          aria-expanded="true"
          aria-label="{{ $select.baseTitle }}"

diff --git a/src/common.js b/src/common.js
@@ -106,7 +106,9 @@ var uis = angular.module('ui.select', [])
   generateId: function() {
     return latestId++;
   },
-  appendToBody: false
+  appendToBody: false,
+  spinnerEnabled: false,
+  spinnerClass: 'glyphicon-refresh ui-select-spin'
 })
 
 // See Rename minErr and make it accessible from outside https://github.com/angular/angular.js/issues/6913

diff --git a/src/uiSelectController.js b/src/uiSelectController.js
@@ -19,6 +19,8 @@ uis.controller('uiSelectCtrl',
   ctrl.paste = uiSelectConfig.paste;
   ctrl.resetSearchInput = uiSelectConfig.resetSearchInput;
   ctrl.refreshing = false;
+  ctrl.spinnerEnabled = uiSelectConfig.spinnerEnabled;
+  ctrl.spinnerClass = uiSelectConfig.spinnerClass;
 
   ctrl.removeSelected = uiSelectConfig.removeSelected; //If selected item(s) should be removed from dropdown list
   ctrl.closeOnSelect = true; //Initialized inside uiSelect directive link function
@@ -293,18 +295,20 @@ uis.controller('uiSelectCtrl',
    */
   ctrl.refresh = function(refreshAttr) {
     if (refreshAttr !== undefined) {
-       ctrl.refreshing = true;
-
       // Debounce
       // See https://github.com/angular-ui/bootstrap/blob/0.10.0/src/typeahead/typeahead.js#L155
       // FYI AngularStrap typeahead does not have debouncing: https://github.com/mgcrea/angular-strap/blob/v2.0.0-rc.4/src/typeahead/typeahead.js#L177
       if (_refreshDelayPromise) {
         $timeout.cancel(_refreshDelayPromise);
       }
       _refreshDelayPromise = $timeout(function() {
-        $scope.$eval(refreshAttr);
-         ctrl.refreshing = false;
-      }, ctrl.refreshDelay);
+        var refreshPromise =  $scope.$eval(refreshAttr);
+        if (refreshPromise && angular.isFunction(refreshPromise.then) && !ctrl.refreshing) {
+          ctrl.refreshing = true;
+          refreshPromise.then(function() {
+            ctrl.refreshing = false;
+          });
+      }}, ctrl.refreshDelay);
     }
   };
 

diff --git a/src/uiSelectDirective.js b/src/uiSelectDirective.js
@@ -143,6 +143,17 @@ uis.directive('uiSelect',
           }
         });
 
+        attrs.$observe('spinnerEnabled', function() {
+          // $eval() is needed otherwise we get a string instead of a boolean
+          var spinnerEnabled = scope.$eval(attrs.spinnerEnabled);
+          $select.spinnerEnabled = spinnerEnabled !== undefined ? spinnerEnabled : uiSelectConfig.spinnerEnabled;
+        });
+
+        attrs.$observe('spinnerClass', function() {
+          var spinnerClass = attrs.spinnerClass;
+          $select.spinnerClass = spinnerClass !== undefined ? attrs.spinnerClass : uiSelectConfig.spinnerClass;
+        });
+
         //Automatically gets focus when loaded
         if (angular.isDefined(attrs.autofocus)){
           $timeout(function(){

diff --git a/test/select.spec.js b/test/select.spec.js
@@ -1,7 +1,7 @@
 'use strict';
 
 describe('ui-select tests', function() {
-  var scope, $rootScope, $compile, $timeout, $injector, uisRepeatParser;
+  var scope, $rootScope, $compile, $timeout, $injector, $q,uisRepeatParser ;
 
   var Key = {
     Enter: 13,
@@ -78,12 +78,13 @@ describe('ui-select tests', function() {
     });
   });
 
-  beforeEach(inject(function(_$rootScope_, _$compile_, _$timeout_, _$injector_, _uisRepeatParser_) {
+  beforeEach(inject(function(_$rootScope_, _$compile_, _$timeout_, _$injector_,_$q_ , _uisRepeatParser_) {
     $rootScope = _$rootScope_;
     scope = $rootScope.$new();
     $compile = _$compile_;
     $timeout = _$timeout_;
     $injector = _$injector_;
+    $q = _$q_;
     uisRepeatParser = _uisRepeatParser_;
     scope.selection = {};
 
@@ -146,7 +147,8 @@ describe('ui-select tests', function() {
 
   function createUiSelect(attrs) {
     var attrsHtml = '',
-        matchAttrsHtml = '';
+        matchAttrsHtml = '',
+        choicesAttrsHtml = ''
     if (attrs !== undefined) {
       if (attrs.disabled !== undefined) { attrsHtml += ' ng-disabled="' + attrs.disabled + '"'; }
       if (attrs.required !== undefined) { attrsHtml += ' ng-required="' + attrs.required + '"'; }
@@ -161,12 +163,16 @@ describe('ui-select tests', function() {
       if (attrs.ngClass !== undefined) { attrsHtml += ' ng-class="' + attrs.ngClass + '"'; }
       if (attrs.resetSearchInput !== undefined) { attrsHtml += ' reset-search-input="' + attrs.resetSearchInput + '"'; }
       if (attrs.closeOnSelect !== undefined) { attrsHtml += ' close-on-select="' + attrs.closeOnSelect + '"'; }
+      if (attrs.spinnerEnabled !== undefined) { attrsHtml += ' spinner-enabled="' + attrs.spinnerEnabled + '"'; }
+      if (attrs.spinnerClass !== undefined) { attrsHtml += ' spinner-class="' + attrs.spinnerClass + '"'; }
+      if (attrs.refresh !== undefined) { choicesAttrsHtml += ' refresh="' + attrs.refresh + '"'; }
+      if (attrs.refreshDelay !== undefined) { choicesAttrsHtml += ' refresh-delay="' + attrs.refreshDelay + '"'; }
     }
 
     return compileTemplate(
       '<ui-select ng-model="selection.selected"' + attrsHtml + '> \
         <ui-select-match placeholder="Pick one..."' + matchAttrsHtml + '>{{$select.selected.name}}</ui-select-match> \
-        <ui-select-choices repeat="person in people | filter: $select.search"> \
+        <ui-select-choices repeat="person in people | filter: $select.search"'+ choicesAttrsHtml + '"> \
           <div ng-bind-html="person.name | highlight: $select.search"></div> \
           <div ng-bind-html="person.email | highlight: $select.search"></div> \
         </ui-select-choices> \
@@ -3031,4 +3037,66 @@ describe('ui-select tests', function() {
     });
   });
 
+  describe('Test Spinner for promises',function(){
+    var deferred;
+
+    function getFromServer(){
+        deferred = $q.defer();
+        return deferred.promise;
+    }
+    it('should have a default value of false', function () {
+      var control = createUiSelect();
+      expect(control.scope().$select.spinnerEnabled).toEqual(false);
+    });
+
+    it('should have a set a value of true', function () {
+      var control = createUiSelect({spinnerEnabled: true});
+      expect(control.scope().$select.spinnerEnabled).toEqual(true);
+    });
+
+    it('should have a default value of glyphicon-refresh ui-select-spin', function () {
+      var control = createUiSelect();
+      expect(control.scope().$select.spinnerClass).toEqual('glyphicon-refresh ui-select-spin');
+    });
+
+    it('should have set a custom class value of randomclass', function () {
+      var control = createUiSelect({spinnerClass: 'randomclass'});
+      expect(control.scope().$select.spinnerClass).toEqual('randomclass');
+    });   
+
+    it('should not display spinner when disabled', function() {
+      scope.getFromServer = getFromServer;
+      var el = createUiSelect({theme: 'bootstrap', refresh:"getFromServer($select.search)", refreshDelay:0});
+      openDropdown(el);
+      var spinner = el.find('.ui-select-refreshing');
+      expect(spinner.hasClass('ng-hide')).toBe(true);       
+      setSearchText(el, 'a');
+      expect(spinner.hasClass('ng-hide')).toBe(true);
+      deferred.resolve();
+      scope.$digest();
+      expect(spinner.hasClass('ng-hide')).toBe(true);
+    });
+
+    it('should display spinner when enabled', function() {
+      scope.getFromServer = getFromServer;
+      var el = createUiSelect({spinnerEnabled: true,theme: 'bootstrap', refresh:"getFromServer($select.search)", refreshDelay:0});
+      openDropdown(el);
+      var spinner = el.find('.ui-select-refreshing');
+      expect(spinner.hasClass('ng-hide')).toBe(true);       
+      setSearchText(el, 'a');
+      expect(spinner.hasClass('ng-hide')).toBe(false);
+      deferred.resolve();
+      scope.$digest();
+      expect(spinner.hasClass('ng-hide')).toBe(true);
+    });
+
+    it('should not display spinner when enabled', function() {
+      var el = createUiSelect({spinnerEnabled: true,theme: 'bootstrap', spinnerClass: 'randomclass'});
+      openDropdown(el);
+      var spinner = el.find('.ui-select-refreshing');
+      setSearchText(el, 'a');
+      expect(el.scope().$select.spinnerClass).toBe('randomclass');
+    });
+  });
+
 });