Skip to content
This repository was archived by the owner on Oct 2, 2019. It is now read-only.

Commit 35c2584

Browse files
dimircdimirc
committed
Write tests
1 parent 1cb314b commit 35c2584

File tree

1 file changed

+330
-2
lines changed

1 file changed

+330
-2
lines changed

‎test/select.spec.js

Lines changed: 330 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,29 @@
33
describe('ui-select tests', function() {
44
var scope, $rootScope, $compile, $timeout;
55

6+
var Key = {
7+
Enter: 13,
8+
Tab: 9,
9+
Up: 38,
10+
Down: 40,
11+
Left: 37,
12+
Right: 39,
13+
Backspace: 8,
14+
Delete: 46,
15+
Escape: 27
16+
};
17+
618
beforeEach(module('ngSanitize', 'ui.select'));
719
beforeEach(inject(function(_$rootScope_, _$compile_, _$timeout_) {
820
$rootScope = _$rootScope_;
921
scope = $rootScope.$new();
1022
$compile = _$compile_;
1123
$timeout = _$timeout_;
12-
scope.selection = {}
24+
scope.selection = {};
25+
26+
//TESTME
27+
scope.selection.selectedMultiple = [];
28+
1329
scope.getGroupLabel = function(person) {
1430
return person.age % 2 ? 'even' : 'odd';
1531
};
@@ -542,7 +558,7 @@ describe('ui-select tests', function() {
542558
<div ng-bind-html="person.name | highlight: $select.search"></div> \
543559
<div ng-if="person.name==\'Wladimir\'"> \
544560
<span class="only-once">I should appear only once</span>\
545-
</div> \
561+
® </div> \
546562
</ui-select-choices> \
547563
</ui-select>'
548564
);
@@ -614,4 +630,316 @@ describe('ui-select tests', function() {
614630

615631
});
616632

633+
634+
describe('multi selection', function() {
635+
636+
function createUiSelectMultiple(attrs) {
637+
var attrsHtml = '';
638+
if (attrs !== undefined) {
639+
if (attrs.disabled !== undefined) { attrsHtml += ' ng-disabled="' + attrs.disabled + '"'; }
640+
if (attrs.required !== undefined) { attrsHtml += ' ng-required="' + attrs.required + '"'; }
641+
}
642+
643+
return compileTemplate(
644+
'<ui-select multiple ng-model="selection.selectedMultiple"' + attrsHtml + ' theme="bootstrap" style="width: 800px;"> \
645+
<ui-select-match placeholder="Pick one...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match> \
646+
<ui-select-choices repeat="person in people | filter: $select.search"> \
647+
<div ng-bind-html="person.name | highlight: $select.search"></div> \
648+
<div ng-bind-html="person.email | highlight: $select.search"></div> \
649+
</ui-select-choices> \
650+
</ui-select>'
651+
);
652+
}
653+
654+
it('should render initial state', function() {
655+
var el = createUiSelectMultiple();
656+
expect(el).toHaveClass('ui-select-multiple');
657+
expect(el.scope().$select.selected.length).toBe(0);
658+
expect(el.find('.ui-select-match-item').length).toBe(0);
659+
});
660+
661+
it('should render initial selected items', function() {
662+
scope.selection.selectedMultiple = [scope.people[4], scope.people[5]]; //Wladimir & Samantha
663+
var el = createUiSelectMultiple();
664+
expect(el.scope().$select.selected.length).toBe(2);
665+
expect(el.find('.ui-select-match-item').length).toBe(2);
666+
});
667+
668+
it('should remove item by pressing X icon', function() {
669+
scope.selection.selectedMultiple = [scope.people[4], scope.people[5]]; //Wladimir & Samantha
670+
var el = createUiSelectMultiple();
671+
expect(el.scope().$select.selected.length).toBe(2);
672+
el.find('.ui-select-match-item').first().find('.ui-select-match-close').click();
673+
expect(el.scope().$select.selected.length).toBe(1);
674+
// $timeout.flush();
675+
});
676+
677+
it('should update size of search input after removing an item', function() {
678+
scope.selection.selectedMultiple = [scope.people[4], scope.people[5]]; //Wladimir & Samantha
679+
var el = createUiSelectMultiple();
680+
var searchInput = el.find('.ui-select-search');
681+
var oldWidth = searchInput.css('width');
682+
el.find('.ui-select-match-item').first().find('.ui-select-match-close').click();
683+
684+
$timeout.flush();
685+
expect(oldWidth).not.toBe(searchInput.css('width'));
686+
687+
});
688+
689+
it('should move to last match when pressing BACKSPACE key from search', function() {
690+
691+
var el = createUiSelectMultiple();
692+
var searchInput = el.find('.ui-select-search');
693+
694+
expect(isDropdownOpened(el)).toEqual(false);
695+
triggerKeydown(searchInput, Key.Backspace);
696+
expect(isDropdownOpened(el)).toEqual(false);
697+
expect(el.scope().$select.activeMatchIndex).toBe(el.scope().$select.selected.length - 1);
698+
699+
});
700+
701+
it('should remove hightlighted match when pressing BACKSPACE key from search and decrease activeMatchIndex', function() {
702+
703+
scope.selection.selectedMultiple = [scope.people[4], scope.people[5], scope.people[6]]; //Wladimir, Samantha & Nicole
704+
var el = createUiSelectMultiple();
705+
var searchInput = el.find('.ui-select-search');
706+
707+
expect(isDropdownOpened(el)).toEqual(false);
708+
triggerKeydown(searchInput, Key.Left);
709+
triggerKeydown(searchInput, Key.Left);
710+
triggerKeydown(searchInput, Key.Backspace);
711+
expect(el.scope().$select.selected).toEqual([scope.people[4], scope.people[6]]); //Wladimir & Nicole
712+
713+
expect(el.scope().$select.activeMatchIndex).toBe(0);
714+
715+
});
716+
717+
it('should remove hightlighted match when pressing DELETE key from search and keep same activeMatchIndex', function() {
718+
719+
scope.selection.selectedMultiple = [scope.people[4], scope.people[5], scope.people[6]]; //Wladimir, Samantha & Nicole
720+
var el = createUiSelectMultiple();
721+
var searchInput = el.find('.ui-select-search');
722+
723+
expect(isDropdownOpened(el)).toEqual(false);
724+
triggerKeydown(searchInput, Key.Left);
725+
triggerKeydown(searchInput, Key.Left);
726+
triggerKeydown(searchInput, Key.Delete);
727+
expect(el.scope().$select.selected).toEqual([scope.people[4], scope.people[6]]); //Wladimir & Nicole
728+
729+
expect(el.scope().$select.activeMatchIndex).toBe(1);
730+
731+
});
732+
733+
it('should move to last match when pressing LEFT key from search', function() {
734+
735+
var el = createUiSelectMultiple();
736+
var searchInput = el.find('.ui-select-search');
737+
738+
expect(isDropdownOpened(el)).toEqual(false);
739+
triggerKeydown(searchInput, Key.Left);
740+
expect(isDropdownOpened(el)).toEqual(false);
741+
expect(el.scope().$select.activeMatchIndex).toBe(el.scope().$select.selected.length - 1);
742+
743+
});
744+
745+
it('should move between matches when pressing LEFT key from search', function() {
746+
747+
scope.selection.selectedMultiple = [scope.people[4], scope.people[5], scope.people[6]]; //Wladimir, Samantha & Nicole
748+
var el = createUiSelectMultiple();
749+
var searchInput = el.find('.ui-select-search');
750+
751+
expect(isDropdownOpened(el)).toEqual(false);
752+
triggerKeydown(searchInput, Key.Left)
753+
triggerKeydown(searchInput, Key.Left)
754+
expect(isDropdownOpened(el)).toEqual(false);
755+
expect(el.scope().$select.activeMatchIndex).toBe(el.scope().$select.selected.length - 2);
756+
triggerKeydown(searchInput, Key.Left)
757+
triggerKeydown(searchInput, Key.Left)
758+
triggerKeydown(searchInput, Key.Left)
759+
expect(el.scope().$select.activeMatchIndex).toBe(0);
760+
761+
});
762+
763+
it('should decrease $select.activeMatchIndex when pressing LEFT key', function() {
764+
765+
scope.selection.selectedMultiple = [scope.people[4], scope.people[5], scope.people[6]]; //Wladimir, Samantha & Nicole
766+
var el = createUiSelectMultiple();
767+
var searchInput = el.find('.ui-select-search');
768+
769+
el.scope().$select.activeMatchIndex = 3
770+
triggerKeydown(searchInput, Key.Left)
771+
triggerKeydown(searchInput, Key.Left)
772+
expect(el.scope().$select.activeMatchIndex).toBe(1);
773+
774+
});
775+
776+
it('should increase $select.activeMatchIndex when pressing RIGHT key', function() {
777+
778+
scope.selection.selectedMultiple = [scope.people[4], scope.people[5], scope.people[6]]; //Wladimir, Samantha & Nicole
779+
var el = createUiSelectMultiple();
780+
var searchInput = el.find('.ui-select-search');
781+
782+
el.scope().$select.activeMatchIndex = 0
783+
triggerKeydown(searchInput, Key.Right)
784+
triggerKeydown(searchInput, Key.Right)
785+
expect(el.scope().$select.activeMatchIndex).toBe(2);
786+
787+
});
788+
789+
it('should open dropdown when pressing DOWN key', function() {
790+
791+
scope.selection.selectedMultiple = [scope.people[4], scope.people[5]]; //Wladimir & Samantha
792+
var el = createUiSelectMultiple();
793+
var searchInput = el.find('.ui-select-search');
794+
795+
expect(isDropdownOpened(el)).toEqual(false);
796+
triggerKeydown(searchInput, Key.Down)
797+
expect(isDropdownOpened(el)).toEqual(true);
798+
799+
});
800+
801+
it('should search/open dropdown when writing to search input', function() {
802+
803+
scope.selection.selectedMultiple = [scope.people[5]]; //Wladimir & Samantha
804+
var el = createUiSelectMultiple();
805+
var searchInput = el.find('.ui-select-search');
806+
807+
el.scope().$select.search = 'r';
808+
scope.$digest();
809+
expect(isDropdownOpened(el)).toEqual(true);
810+
811+
});
812+
813+
it('should add selected match to selection array', function() {
814+
815+
scope.selection.selectedMultiple = [scope.people[5]]; //Samantha
816+
var el = createUiSelectMultiple();
817+
var searchInput = el.find('.ui-select-search');
818+
819+
clickItem(el, 'Wladimir');
820+
expect(scope.selection.selectedMultiple).toEqual([scope.people[5], scope.people[4]]); //Samantha & Wladimir
821+
822+
});
823+
824+
it('should close dropdown after selecting', function() {
825+
826+
scope.selection.selectedMultiple = [scope.people[5]]; //Samantha
827+
var el = createUiSelectMultiple();
828+
var searchInput = el.find('.ui-select-search');
829+
830+
expect(isDropdownOpened(el)).toEqual(false);
831+
triggerKeydown(searchInput, Key.Down)
832+
expect(isDropdownOpened(el)).toEqual(true);
833+
834+
clickItem(el, 'Wladimir');
835+
836+
expect(isDropdownOpened(el)).toEqual(false);
837+
838+
});
839+
840+
it('should closes dropdown when pressing ESC key from search input', function() {
841+
842+
scope.selection.selectedMultiple = [scope.people[4], scope.people[5], scope.people[6]]; //Wladimir, Samantha & Nicole
843+
var el = createUiSelectMultiple();
844+
var searchInput = el.find('.ui-select-search');
845+
846+
expect(isDropdownOpened(el)).toEqual(false);
847+
triggerKeydown(searchInput, Key.Down)
848+
expect(isDropdownOpened(el)).toEqual(true);
849+
triggerKeydown(searchInput, Key.Escape)
850+
expect(isDropdownOpened(el)).toEqual(false);
851+
852+
});
853+
854+
it('should select highlighted match when pressing ENTER key from dropdown', function() {
855+
856+
scope.selection.selectedMultiple = [scope.people[5]]; //Samantha
857+
var el = createUiSelectMultiple();
858+
var searchInput = el.find('.ui-select-search');
859+
860+
triggerKeydown(searchInput, Key.Down)
861+
triggerKeydown(searchInput, Key.Enter)
862+
expect(scope.selection.selectedMultiple.length).toEqual(2);
863+
864+
});
865+
866+
it('should increase $select.activeIndex when pressing DOWN key from dropdown', function() {
867+
868+
var el = createUiSelectMultiple();
869+
var searchInput = el.find('.ui-select-search');
870+
871+
triggerKeydown(searchInput, Key.Down); //Open dropdown
872+
873+
el.scope().$select.activeIndex = 0
874+
triggerKeydown(searchInput, Key.Down)
875+
triggerKeydown(searchInput, Key.Down)
876+
expect(el.scope().$select.activeIndex).toBe(2);
877+
878+
});
879+
880+
it('should decrease $select.activeIndex when pressing UP key from dropdown', function() {
881+
882+
var el = createUiSelectMultiple();
883+
var searchInput = el.find('.ui-select-search');
884+
885+
triggerKeydown(searchInput, Key.Down); //Open dropdown
886+
887+
el.scope().$select.activeIndex = 5
888+
triggerKeydown(searchInput, Key.Up)
889+
triggerKeydown(searchInput, Key.Up)
890+
expect(el.scope().$select.activeIndex).toBe(3);
891+
892+
});
893+
894+
it('should render initial selected items', function() {
895+
scope.selection.selectedMultiple = [scope.people[4], scope.people[5]]; //Wladimir & Samantha
896+
var el = createUiSelectMultiple();
897+
expect(el.scope().$select.selected.length).toBe(2);
898+
expect(el.find('.ui-select-match-item').length).toBe(2);
899+
});
900+
901+
it('should parse the items correctly using single property binding', function() {
902+
903+
scope.selection.selectedMultiple = ['[email protected]', '[email protected]'];
904+
905+
var el = compileTemplate(
906+
'<ui-select multiple ng-model="selection.selectedMultiple" theme="bootstrap" style="width: 800px;"> \
907+
<ui-select-match placeholder="Pick one...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match> \
908+
<ui-select-choices repeat="person.email as person in people | filter: $select.search"> \
909+
<div ng-bind-html="person.name | highlight: $select.search"></div> \
910+
<div ng-bind-html="person.email | highlight: $select.search"></div> \
911+
</ui-select-choices> \
912+
</ui-select>'
913+
);
914+
915+
expect(el.scope().$select.selected).toEqual([scope.people[4], scope.people[5]]);
916+
917+
});
918+
919+
it('should add selected match to selection array using single property binding', function() {
920+
921+
scope.selection.selectedMultiple = ['[email protected]', '[email protected]'];
922+
923+
var el = compileTemplate(
924+
'<ui-select multiple ng-model="selection.selectedMultiple" theme="bootstrap" style="width: 800px;"> \
925+
<ui-select-match placeholder="Pick one...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match> \
926+
<ui-select-choices repeat="person.email as person in people | filter: $select.search"> \
927+
<div ng-bind-html="person.name | highlight: $select.search"></div> \
928+
<div ng-bind-html="person.email | highlight: $select.search"></div> \
929+
</ui-select-choices> \
930+
</ui-select>'
931+
);
932+
933+
var searchInput = el.find('.ui-select-search');
934+
935+
clickItem(el, 'Natasha');
936+
937+
expect(el.scope().$select.selected).toEqual([scope.people[4], scope.people[5], scope.people[7]]);
938+
scope.selection.selectedMultiple = ['[email protected]', '[email protected]', '[email protected]'];
939+
940+
});
941+
942+
});
943+
944+
617945
});

0 commit comments

Comments
 (0)