select.spec.js

'use strict';

describe('ui-select tests', function() {
  var scope, $rootScope, $compile;

  beforeEach(module('ngSanitize', 'ui.select'));
  beforeEach(inject(function(_$rootScope_, _$compile_) {
    $rootScope = _$rootScope_;
    scope = $rootScope.$new();
    $compile = _$compile_;

    scope.people = [
      { name: 'Adam',      email: 'adam@email.com',      age: 10 },
      { name: 'Amalie',    email: 'amalie@email.com',    age: 12 },
      { name: 'Wladimir',  email: 'wladimir@email.com',  age: 30 },
      { name: 'Samantha',  email: 'samantha@email.com',  age: 31 },
      { name: 'Estefanía', email: 'estefanía@email.com', age: 16 },
      { name: 'Natasha',   email: 'natasha@email.com',   age: 54 },
      { name: 'Nicole',    email: 'nicole@email.com',    age: 43 },
      { name: 'Adrian',    email: 'adrian@email.com',    age: 21 }
    ];

    scope.names = [
      'Adam',
      'Amalie',
      'Wladimir',
      'Samantha',
      'Estefanía',
      'Natasha',
      'Nicole',
      'Adrian'
    ];
  }));


  // Utility functions

  function compileTemplate(template) {
    var el = $compile(angular.element(template))(scope);
    scope.$digest();
    return el;
  }

  function generateAttrsHtml(attrs) {
    var attrsHtml = '';
    if (attrs !== undefined) {
      if (attrs.disabled !== undefined) { attrsHtml += ' ng-disabled="' + attrs.disabled + '"'; }
      if (attrs.required !== undefined) { attrsHtml += ' ng-required="' + attrs.required + '"'; }
      if (attrs.allowNewValues !== undefined) { attrsHtml += ' allow-new-values="' + attrs.allowNewValues + '"'; }
    }
    return attrsHtml;
  }

  function createUiSelectCollection(attrs) {
    return compileTemplate(
      '<ui-select ng-model="selection"' + generateAttrsHtml(attrs) + '> \
        <match placeholder="Pick one...">{{$select.selected}}</match> \
        <choices repeat="name in names | filter: $select.search"> \
          <div ng-bind-html="name | highlight: $select.search"></div> \
        </choices> \
      </ui-select>'
    );
  }

  function createUiSelect(attrs) {
    return compileTemplate(
      '<ui-select ng-model="selection"' + generateAttrsHtml(attrs) + '> \
        <match placeholder="Pick one...">{{$select.selected.name}}</match> \
        <choices repeat="person in people | filter: $select.search"> \
          <div ng-bind-html="person.name | highlight: $select.search"></div> \
          <div ng-bind-html="person.email | highlight: $select.search"></div> \
        </choices> \
      </ui-select>'
    );
  }

  function getMatchLabel(el) {
    return $(el).find('.ui-select-match > span[ng-transclude]:not(.ng-hide)').text();
  }

  function clickItem(el, text) {
    $(el).find('.ui-select-choices-row > div:contains("' + text + '")').click();
    scope.$digest();
  }

  function clickMatch(el) {
    $(el).find('.ui-select-match').click();
    scope.$digest();
  }


  it('should compile child directives', function() {
    var el = createUiSelect();

    var searchEl = $(el).find('.ui-select-search');
    expect(searchEl.length).toEqual(1);

    var matchEl = $(el).find('.ui-select-match');
    expect(matchEl.length).toEqual(1);

    var choicesContentEl = $(el).find('.ui-select-choices-content');
    expect(choicesContentEl.length).toEqual(1);

    var choicesContainerEl = $(el).find('.ui-select-choices');
    expect(choicesContainerEl.length).toEqual(1);

    var choicesElems = $(el).find('.ui-select-choices-row');
    expect(choicesElems.length).toEqual(8);
  });

  it('should correctly render initial state', function() {
    scope.selection = scope.people[0];

    var el = createUiSelect();

    expect(getMatchLabel(el)).toEqual('Adam');
  });

  it('should display the choices when activated', function() {
    var el = createUiSelect();

    // Does not work with jQuery 2.*, have to use jQuery 1.11.*
    // This will be fixed in AngularJS 1.3
    // See issue with unit-testing directive using karma https://github.com/angular/angular.js/issues/4640#issuecomment-35002427
    expect(el.scope().$select.open).toEqual(false);

    clickMatch(el);

    expect(el.scope().$select.open).toEqual(true);
    expect($(el).find('.ui-select-choices').parent().hasClass('select2-display-none')).toEqual(false);
  });

  it('should select an item', function() {
    var el = createUiSelect();

    clickItem(el, 'Samantha');

    expect(getMatchLabel(el)).toEqual('Samantha');
  });

  it('should select an item (controller)', function() {
    var el = createUiSelect();

    el.scope().$select.select(scope.people[1]);
    scope.$digest();

    expect(getMatchLabel(el)).toEqual('Amalie');
  });

  it('should not select a non existing item', function() {
    var el = createUiSelect();

    clickItem(el, "I don't exist");

    expect(getMatchLabel(el)).toEqual('');
  });

  it('should close the choices when an item is selected', function() {
    var el = createUiSelect();

    $(el).find('.ui-select-match').click();
    scope.$digest();

    expect(el.scope().$select.open).toEqual(true);

    clickItem(el, 'Samantha');

    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);
  });
  
  it('should allow new values if the attribute says so', function() {
    var el = createUiSelectCollection({allowNewValues: true});
    clickMatch(el);

    $(el).scope().$select.select("I don't exist");

    expect($(el).scope().$select.selected).toEqual("I don't exist");
  });

  // 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.items = [ 'false' ];

    var el = compileTemplate(
      '<ui-select ng-model="selection"> \
        <match>{{$select.selected}}</match> \
        <choices repeat="item in items | filter: $select.search"> \
          <div ng-bind-html="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');
  });
});