1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
describe("multiSelect", function() {
var select;
var msContainer;
beforeEach(function() {
$('<select id="multi-select" multiple="multiple" name="test[]"></select>').appendTo('body');
for (var i=1; i <= 10; i++) {
$('<option value="value'+i+'">text'+i+'</option>').appendTo($("#multi-select"));
};
select = $("#multi-select");
});
describe('init without options', function(){
beforeEach(function() {
select.multiSelect();
msContainer = select.next();
});
it('should hide the standard select', function(){
expect(select.css('position')).toBe('absolute');
expect(select.css('left')).toBe('-9999px');
});
it('should create a container', function(){
expect(msContainer).toBe('div.ms-container');
});
it ('should create a selectable and a selection container', function(){
expect(msContainer).toContain('div.ms-selectable, div.ms-selection');
});
it ('should create a list for both selectable and selection container', function(){
expect(msContainer).toContain('div.ms-selectable ul.ms-list, div.ms-selection ul.ms-list');
});
it ('should populate the selectable list', function(){
expect($('.ms-selectable ul.ms-list li').length).toEqual(10);
});
it ('should not populate the selection list if none of the option is selected', function(){
expect($('.ms-selection ul.ms-list li').length).toEqual(0);
});
});
describe('init with pre-selected options', function(){
var selectedValues = [];
beforeEach(function() {
var firstOption = select.children('option').first();
var lastOption = select.children('option').last();
firstOption.prop('selected', true);
lastOption.prop('selected', true);
selectedValues.push(firstOption.val(), lastOption.val());
select.multiSelect();
msContainer = select.next();
});
it ('should select the pre-selected options', function(){
$.each(selectedValues, function(index, value){
expect($('.ms-selectable ul.ms-list li[ms-value="'+value+'"]')).toBe('.ms-selected');
});
expect($('.ms-selectable ul.ms-list li.ms-selected').length).toEqual(2);
});
});
describe('init with keepOrder option activated', function(){
beforeEach(function() {
$('#multi-select').multiSelect({ keepOrder: true });
msContainer = select.next();
firstItem = $('.ms-selectable ul.ms-list li').first()
lastItem = $('.ms-selectable ul.ms-list li').last();
lastItem.trigger('click');
firstItem.trigger('click');
});
it('should keep order on selection list', function(){
expect($('.ms-selection li', msContainer).first().attr('ms-value')).toBe('value1');
expect($('.ms-selection li', msContainer).last().attr('ms-value')).toBe('value10');
});
});
describe("When selectable item is clicked", function(){
var clickedItem;
beforeEach(function() {
$('#multi-select').multiSelect();
clickedItem = $('.ms-selectable ul.ms-list li').first();
spyOnEvent(select, 'change');
clickedItem.trigger('click');
});
it('should hide selected item', function(){
expect(clickedItem).toBeHidden();
});
it('should add the .ms-selected to the selected item', function(){
expect(clickedItem).toBe('.ms-selected');
});
it('should select corresponding option', function(){
expect(select.children().first()).toBeSelected();
});
it('should populate the selection ul with the rigth item', function(){
expect($('.ms-selection ul.ms-list li').first()).toBe('li.ms-elem-selected[ms-value="value1"]');
});
it('should trigger the standard select change event', function(){
expect('change').toHaveBeenTriggeredOn("#multi-select");
});
afterEach(function(){
select.multiSelect('deselect_all');
});
});
afterEach(function () {
$("#multi-select, .ms-container").remove();
});
});
|
