More unit tests

Author: tkrotoff

src/bootstrap/choices.tpl.html

@@ -1,6 +1,6 @@
 <ul class="ui-select-choices ui-select-choices-content dropdown-menu"
     role="menu" aria-labelledby="dLabel">
-  <li class="ui-select-choices-row" ng-class="{active: $select.activeIdx == $index}">
+  <li class="ui-select-choices-row" ng-class="{active: $select.activeIndex === $index}">
     <a href="javascript:void(0)" ng-transclude></a>
   </li>
 </ul>

src/select.js

@@ -19,7 +19,7 @@ angular.module('ui.select', [])
 
 .constant('uiSelectConfig', {
   theme: 'select2',
-  placeholder: 'Select Item'
+  placeholder: ''
 })
 
 .directive('uiSelect',
@@ -43,12 +43,14 @@ angular.module('ui.select', [])
 
       ctrl.open = false;
 
+      ctrl.input = $element.find('input'); // TODO could break if input is at other template
+
       // When the user clicks on ui-select, displays the dropdown list
       ctrl.activate = function() {
         if (ctrl.disabled === false) {
           ctrl.open = true;
           // Give it time to appear before focus
-          setTimeout(function() {
+          $timeout(function() {
             ctrl.input[0].focus();
           });
         }
@@ -65,8 +67,6 @@ angular.module('ui.select', [])
         ctrl.open = false;
         ctrl.search = '';
       };
-
-      ctrl.input = $element.find('input'); // TODO could break if input is at other template
     }],
 
     link: function(scope, element, attrs, controllers, transcludeFn) {
@@ -145,7 +145,7 @@ angular.module('ui.select', [])
 
       tElement.querySelectorAll('.ui-select-choices-row')
         .attr('ng-repeat', tAttrs.repeat)
-        .attr('ng-mouseenter', '$select.activeIdx = $index')
+        .attr('ng-mouseenter', '$select.activeIndex = $index')
         .attr('ng-click', '$select.select(item)');
 
       return function(scope, element, attrs, $select) {
@@ -155,7 +155,7 @@ angular.module('ui.select', [])
         };
 
         scope.$watch('$select.search', function() {
-          scope.$select.activeIdx = 0;
+          scope.$select.activeIndex = 0;
         });
 
         // Bind keyboard events related to choices
@@ -167,19 +167,19 @@ angular.module('ui.select', [])
           var rows = element.querySelectorAll('.ui-select-choices-row');
 
           if (evt.which === 40) { // down(40)
-            if (scope.$select.activeIdx < rows.length) {
-              scope.$select.activeIdx = (scope.$select.activeIdx + 1) % rows.length || rows.length - 1;
+            if (scope.$select.activeIndex < rows.length) {
+              scope.$select.activeIndex = (scope.$select.activeIndex + 1) % rows.length || rows.length - 1;
               scope.$digest();
             }
 
           } else if (evt.which === 38) { // up(38)
-            if (scope.$select.activeIdx > 0) {
-              scope.$select.activeIdx--;
+            if (scope.$select.activeIndex > 0) {
+              scope.$select.activeIndex--;
               scope.$digest();
             }
 
           } else if (evt.which === 13 || evt.which === 9) { // enter(13) and tab(9)
-            angular.element(rows[scope.$select.activeIdx]).triggerHandler('click');
+            angular.element(rows[scope.$select.activeIndex]).triggerHandler('click');
 
           } else if (evt.which === 27) { // esc(27)
             evt.stopPropagation();

src/select2/choices.tpl.html

@@ -1,5 +1,5 @@
 <ul class="ui-select-choices ui-select-choices-content select2-results">
-  <li class="ui-select-choices-row" ng-class="{'select2-highlighted': $select.activeIdx == $index}">
+  <li class="ui-select-choices-row" ng-class="{'select2-highlighted': $select.activeIndex === $index}">
     <div class="select2-result-label" ng-transclude></div>
   </li>
 </ul>

src/select2/match.tpl.html

@@ -4,7 +4,7 @@
   do not work: [class^="select2-choice"]
 -->
 <a class="select2-choice ui-select-match"
-   ng-class="{'select2-default': $select.selected == undefined}"
+   ng-class="{'select2-default': $select.selected === undefined}"
    ng-click="$select.activate()">
   <span ng-hide="$select.selected !== undefined" class="select2-chosen">{{$select.placeholder}}</span>
   <span ng-show="$select.selected !== undefined" class="select2-chosen" ng-transclude></span>

src/selectize/choices.tpl.html

@@ -1,7 +1,7 @@
 <div ng-show="$select.open" class="ui-select-choices selectize-dropdown single">
   <div class="ui-select-choices-content selectize-dropdown-content">
     <div class="ui-select-choices-row"
-         ng-class="{'active': $select.activeIdx == $index}">
+         ng-class="{'active': $select.activeIndex === $index}">
       <div class="option" data-selectable ng-transclude></div>
     </div>
   </div>

test/select.spec.js

@@ -8,6 +8,7 @@ describe('ui-select tests', function() {
     $rootScope = _$rootScope_;
     scope = $rootScope.$new();
     $compile = _$compile_;
+
     scope.matches = [
       { name: 'Wladimir Coka',   email: '[email protected]' },
       { name: 'Samantha Smith',  email: '[email protected]' },
@@ -39,14 +40,14 @@ describe('ui-select tests', function() {
         <match placeholder="Pick one...">{{$select.selected.name}}</match> \
         <choices repeat="item in matches | filter: $select.search"> \
           <div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div> \
-          <div>{{item.email}}</div> \
+          <div ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></div> \
         </choices> \
       </ui-select>'
     );
   }
 
   function getMatchLabel(el) {
-    return $(el).find('.ui-select-match > span[ng-transclude]').text();
+    return $(el).find('.ui-select-match > span[ng-transclude]:not(.ng-hide)').text();
   }
 
   function clickItem(el, text) {
@@ -98,11 +99,7 @@ describe('ui-select tests', function() {
     clickMatch(el);
 
     expect(el.scope().$select.open).toEqual(true);
-
-    // FIXME This should work and does not inside Karma
-    var visible = $(el).find('.ui-select-choices').is(':visible');
-    //expect(visible).toEqual(true);
-    expect(visible).toEqual(false); // FIXME Always false in Karma
+    expect($(el).find('.ui-select-choices').parent().hasClass('select2-display-none')).toEqual(false);
   });
 
   it('should select an item', function() {
@@ -115,9 +112,8 @@ describe('ui-select tests', function() {
 
   it('should select an item (controller)', function() {
     var el = createUiSelect();
-    var controller = el.controller('uiSelect');
 
-    controller.select(scope.matches[1]);
+    el.scope().$select.select(scope.matches[1]);
     scope.$digest();
 
     expect(getMatchLabel(el)).toEqual('Samantha Smith');
@@ -141,20 +137,44 @@ describe('ui-select tests', function() {
 
     clickItem(el, 'Samantha Smith');
 
-    var visible = $(el).find('.ui-select-choices').is(':visible');
-    expect(visible).toEqual(false); // FIXME Always false in Karma
-
     expect(el.scope().$select.open).toEqual(false);
+    expect($(el).find('.ui-select-choices').parent().hasClass('select2-display-none')).toEqual(true);
   });
 
   it('should be disabled if the attribute says so', function() {
     var el1 = createUiSelect({disabled: true});
     expect(el1.scope().$select.disabled).toEqual(true);
+    clickMatch(el1);
+    expect(el1.scope().$select.open).toEqual(false);
 
     var el2 = createUiSelect({disabled: false});
     expect(el2.scope().$select.disabled).toEqual(false);
+    clickMatch(el2);
+    expect(el2.scope().$select.open).toEqual(true);
 
     var el3 = createUiSelect();
     expect(el3.scope().$select.disabled).toEqual(false);
+    clickMatch(el3);
+    expect(el3.scope().$select.open).toEqual(true);
+  });
+
+  // See when an item that evaluates to false (such as "false" or "no") is selected, the placeholder is shown https://github.com/angular-ui/ui-select/pull/32
+  it('should not display the placeholder when item evaluates to false', function() {
+    scope.matches = [ 'false' ];
+
+    var el = compileTemplate(
+      '<ui-select ng-model="selection"> \
+        <match>{{$select.selected}}</match> \
+        <choices repeat="item in matches | filter: $select.search"> \
+          <div ng-bind-html="trustAsHtml((item | highlight: $select.search))"></div> \
+        </choices> \
+      </ui-select>'
+    );
+    expect(el.scope().$select.selected).toEqual(undefined);
+
+    clickItem(el, 'false');
+
+    expect(el.scope().$select.selected).toEqual('false');
+    expect(getMatchLabel(el)).toEqual('false');
   });
 });