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
127
128
129
130
131
|
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");
});
it ('should be chainable', function(){
select.multiSelect().addClass('chainable');
expect(select.hasClass('chainable')).toBeTruthy();
});
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();
});
});
|
