1 |
|
2 | var id = function (id){ return document.getElementById(id); };
|
3 |
|
4 | var _tf = new TableFilter('demo', {
|
5 | base_path: '../dist/tablefilter/',
|
6 | col_0: 'none',
|
7 | col_1: 'none',
|
8 | col_2: 'none',
|
9 | col_3: 'checklist',
|
10 | col_4: 'checklist',
|
11 | col_5: 'checklist',
|
12 | col_6: 'checklist',
|
13 | headers_row_index: 1,
|
14 | popup_filters: true,
|
15 | mark_active_columns: true
|
16 | }, 2);
|
17 | _tf.init();
|
18 |
|
19 | var popupFilter = _tf.feature('popupFilter');
|
20 | module('Sanity checks');
|
21 | test('Pop-up filter component', function() {
|
22 | notEqual(popupFilter, null, 'PopupFilter instanciated');
|
23 | deepEqual(popupFilter.fltElms instanceof Array,
|
24 | true, 'Type of fltElms property');
|
25 | deepEqual(
|
26 | popupFilter.adjustToContainer,
|
27 | true,
|
28 | 'Popup filter width adjusts to container'
|
29 | );
|
30 | deepEqual(_tf.headersRow, 2, 'Headers row index');
|
31 | });
|
32 |
|
33 | module('UI elements');
|
34 | test('Pop-up filter UI elements', function() {
|
35 | var flt3 = popupFilter.fltElms[3];
|
36 | var flt4 = popupFilter.fltElms[4];
|
37 | var fltIcn3 = popupFilter.fltIcons[3];
|
38 | var fltIcn4 = popupFilter.fltIcons[4];
|
39 | var fltIcn0 = popupFilter.fltIcons[0];
|
40 | var fltIcn1 = popupFilter.fltIcons[0];
|
41 |
|
42 | notEqual(flt3, null, 'Filter element exists');
|
43 | notEqual(flt4, null, 'Filter element exists');
|
44 | deepEqual(fltIcn3.nodeName, 'IMG', 'Filter icon exists');
|
45 | deepEqual(fltIcn4.nodeName, 'IMG', 'Filter icon exists');
|
46 | deepEqual(fltIcn0, undefined, 'Filter icon does not exist for column 0');
|
47 | deepEqual(fltIcn1, undefined, 'Filter icon does not exist for column 1');
|
48 | });
|
49 |
|
50 | test('Pop-up filter state after filtering', function(){
|
51 | var fltIcn4 = popupFilter.fltIcons[4];
|
52 | _tf.setFilterValue(4, 'Filter Value 4');
|
53 | _tf.filter();
|
54 |
|
55 | deepEqual(fltIcn4.src.indexOf('icn_filterActive') !== -1,
|
56 | true, 'Icon state');
|
57 | });
|
58 |
|
59 | test('Pop-up filter state after clearing', function(){
|
60 | var fltIcn3 = popupFilter.fltIcons[3];
|
61 | var fltIcn4 = popupFilter.fltIcons[4];
|
62 | var fltIcn5 = popupFilter.fltIcons[5];
|
63 | var fltIcn6 = popupFilter.fltIcons[6];
|
64 | _tf.clearFilters();
|
65 |
|
66 | deepEqual(fltIcn3.src.indexOf('icn_filterActive') === -1,
|
67 | true, 'Icon state');
|
68 | deepEqual(fltIcn4.src.indexOf('icn_filterActive') === -1,
|
69 | true, 'Icon state');
|
70 | deepEqual(fltIcn5.src.indexOf('icn_filterActive') === -1,
|
71 | true, 'Icon state');
|
72 | deepEqual(fltIcn6.src.indexOf('icn_filterActive') === -1,
|
73 | true, 'Icon state');
|
74 | });
|
75 |
|
76 | test('Can open pop-up filter', function(){
|
77 |
|
78 | popupFilter.open(5);
|
79 |
|
80 |
|
81 | deepEqual(popupFilter.isOpen(5), true,
|
82 | 'Popup filter is open');
|
83 | });
|
84 |
|
85 | test('Can close pop-up filter', function(){
|
86 |
|
87 | popupFilter.close(5);
|
88 |
|
89 |
|
90 | deepEqual(popupFilter.isOpen(5), false,
|
91 | 'Popup filter is open');
|
92 | });
|
93 |
|
94 | test('Can toggle pop-up filter (initially closed)', function(){
|
95 |
|
96 | popupFilter.close(6);
|
97 |
|
98 |
|
99 | popupFilter.toggle(6);
|
100 |
|
101 |
|
102 | deepEqual(popupFilter.isOpen(6), true,
|
103 | 'Popup filter is toggled');
|
104 | });
|
105 |
|
106 | test('Can toggle pop-up filter (initially opened)', function(){
|
107 |
|
108 | popupFilter.open(6);
|
109 |
|
110 |
|
111 | popupFilter.toggle(6);
|
112 |
|
113 |
|
114 | deepEqual(popupFilter.isOpen(6), false,
|
115 | 'Popup filter is toggled');
|
116 | });
|
117 |
|
118 | test('Checklist pop-up filter remains open upon filtering', function(){
|
119 |
|
120 | popupFilter.open(4);
|
121 |
|
122 |
|
123 | _tf.setFilterValue(4, ['Filter Value 4']);
|
124 | _tf.filter();
|
125 |
|
126 |
|
127 | deepEqual(
|
128 | popupFilter.isOpen(4),
|
129 | true,
|
130 | 'Checklist pop-up filter still open after filtering'
|
131 | );
|
132 | });
|
133 |
|
134 | test('Pop-up filter auto-closes when user clicks away', function() {
|
135 |
|
136 | popupFilter.open(5);
|
137 |
|
138 |
|
139 | var evObj = document.createEvent('HTMLEvents');
|
140 | evObj.initEvent('mouseup', true, true);
|
141 | _tf.dom().rows[4].cells[2].dispatchEvent(evObj);
|
142 |
|
143 |
|
144 | deepEqual(popupFilter.isOpen(5), false,
|
145 | 'Pop-up filter closed after user clicks away'
|
146 | );
|
147 | });
|
148 |
|
149 | test('Can close all popup filters', function() {
|
150 |
|
151 | popupFilter.open(3);
|
152 |
|
153 |
|
154 | popupFilter.closeAll(4);
|
155 |
|
156 |
|
157 | deepEqual(popupFilter.isOpen(3), false,
|
158 | 'Pop-up filter closed after closeAll'
|
159 | );
|
160 | });
|
161 |
|
162 | test('Does not close popup filter if closeOnFiltering false', function() {
|
163 |
|
164 | popupFilter.closeOnFiltering = false;
|
165 | popupFilter.open(4);
|
166 |
|
167 |
|
168 | popupFilter.close(4);
|
169 |
|
170 |
|
171 | deepEqual(popupFilter.isOpen(4), false,
|
172 | 'Pop-up filter closed after closeAll'
|
173 | );
|
174 | });
|
175 |
|
176 |
|
177 |
|
178 |
|
179 |
|
180 |
|
181 |
|
182 |
|
183 |
|
184 |
|
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|
193 | test('TableFilter removed', function() {
|
194 | _tf.destroy();
|
195 | var fltIcn1 = popupFilter.fltIcons[3];
|
196 | deepEqual(fltIcn1, undefined, 'Filter icon is removed');
|
197 | deepEqual(id(_tf.fltIds[3]), null, 'Filter is removed');
|
198 | });
|
199 |
|
200 |
|
201 |
|
202 |
|
203 |
|
204 |
|
205 |
|
206 |
|