1 |
|
2 | var id = function (id){ return document.getElementById(id); };
|
3 | var tf = new TableFilter('demo', {
|
4 | base_path: '../dist/tablefilter/',
|
5 | col_2: 'multiple',
|
6 | col_3: 'select'
|
7 | });
|
8 | tf.init();
|
9 |
|
10 | var dropdown = tf.feature('dropdown');
|
11 | module('Sanity checks');
|
12 | test('Drop-down component', function() {
|
13 | deepEqual(typeof dropdown, 'object', 'DropDown instanciated');
|
14 | deepEqual(dropdown.opts instanceof Array, true, 'Type of opts property');
|
15 | });
|
16 |
|
17 | module('UI elements');
|
18 | test('Drop-down UI elements', function() {
|
19 | var flt1 = id(tf.fltIds[3]);
|
20 | var flt2 = id(tf.fltIds[2]);
|
21 | notEqual(flt1, null, 'DropDown SELECT element exists');
|
22 | notEqual(flt2, null, 'DropDown SELECT element exists');
|
23 | deepEqual(flt2.hasAttribute('multiple'), true, 'Multiple select exists');
|
24 | });
|
25 |
|
26 | module('Behaviour');
|
27 | test('Can filter on drop-down change', function() {
|
28 | var flt1 = id(tf.fltIds[3]);
|
29 |
|
30 | var evObj = document.createEvent('HTMLEvents');
|
31 | evObj.initEvent('change', true, true);
|
32 | tf.setFilterValue(3, '1.1');
|
33 | flt1.dispatchEvent(evObj);
|
34 |
|
35 | deepEqual(tf.getValidRows().length, 1, 'Table filtered');
|
36 | deepEqual(tf.getFilteredData()[0][1][3], '1.1', 'Matched value');
|
37 | });
|
38 |
|
39 | test('Can refresh all drop-down filters', function() {
|
40 |
|
41 | tf.clearFilters();
|
42 | var build = dropdown.build;
|
43 | var hit = 0;
|
44 | dropdown.build = function() { hit++; };
|
45 |
|
46 |
|
47 | dropdown.refreshAll();
|
48 |
|
49 |
|
50 | deepEqual(hit, 2, 'build method called');
|
51 |
|
52 | dropdown.build = build;
|
53 | });
|
54 |
|
55 | test('Can select options', function() {
|
56 | tf.clearFilters();
|
57 | var flt1 = id(tf.fltIds[2]);
|
58 |
|
59 | dropdown.selectOptions(2, ['872', '286']);
|
60 |
|
61 | deepEqual(flt1.options[5].selected, true, 'Option selected');
|
62 | deepEqual(flt1.options[6].selected, true, 'Option selected');
|
63 | });
|
64 |
|
65 | test('Can get selected values', function() {
|
66 |
|
67 | var values = ['286', '872'];
|
68 | tf.clearFilters();
|
69 | tf.setFilterValue(2, values);
|
70 |
|
71 |
|
72 | var result = dropdown.getValues(2);
|
73 |
|
74 |
|
75 | deepEqual(values, result);
|
76 | });
|
77 | test('Can return values when no selected options', function() {
|
78 |
|
79 | tf.clearFilters();
|
80 |
|
81 |
|
82 | var result = dropdown.getValues(2);
|
83 |
|
84 |
|
85 | deepEqual([], result);
|
86 | });
|
87 |
|
88 |
|
89 | module('Options sorting');
|
90 | test('Can disable options sorting globally', function() {
|
91 |
|
92 | tf.clearFilters();
|
93 | tf.destroy();
|
94 | tf = new TableFilter('demo', {
|
95 | base_path: '../dist/tablefilter/',
|
96 | col_1: 'select',
|
97 | col_2: 'multiple',
|
98 | col_3: 'select',
|
99 | col_4: 'multiple',
|
100 | col_types: ['string', 'string', 'number', 'number', 'number'],
|
101 | sort_select: false
|
102 | });
|
103 |
|
104 |
|
105 | tf.init();
|
106 |
|
107 | var flt1 = tf.getFilterElement(1);
|
108 | var flt2 = tf.getFilterElement(2);
|
109 | var flt3 = tf.getFilterElement(3);
|
110 | var flt4 = tf.getFilterElement(4);
|
111 |
|
112 |
|
113 | deepEqual(flt1.options[1].value, 'Adelaide',
|
114 | 'First option value for column 1');
|
115 | deepEqual(flt1.options[6].value, 'Alice Springs',
|
116 | 'Last option value for column 1');
|
117 | deepEqual(flt2.options[1].value, '1412', 'First option value for column 2');
|
118 | deepEqual(flt2.options[7].value, '2045', 'Last option value for column 2');
|
119 | deepEqual(flt3.options[1].value, '1.4', 'First option value for column 3');
|
120 | deepEqual(flt3.options[7].value, '2.15', 'Last option value for column 3');
|
121 | deepEqual(flt4.options[1].value, '25.3', 'First option value for column 4');
|
122 | deepEqual(flt4.options[7].value, '40', 'Last option value for column 4');
|
123 | });
|
124 |
|
125 | test('Can enable options sorting on a column basis', function() {
|
126 |
|
127 | tf.clearFilters();
|
128 | tf.destroy();
|
129 | tf = new TableFilter('demo', {
|
130 | base_path: '../dist/tablefilter/',
|
131 | col_1: 'select',
|
132 | col_2: 'multiple',
|
133 | col_3: 'select',
|
134 | col_4: 'multiple',
|
135 | col_types: ['string', 'string', 'number', 'number', 'number'],
|
136 | sort_select: [3, 4]
|
137 | });
|
138 |
|
139 |
|
140 | tf.init();
|
141 |
|
142 | var flt1 = tf.getFilterElement(1);
|
143 | var flt2 = tf.getFilterElement(2);
|
144 | var flt3 = tf.getFilterElement(3);
|
145 | var flt4 = tf.getFilterElement(4);
|
146 |
|
147 |
|
148 | deepEqual(flt1.options[1].value, 'Adelaide',
|
149 | 'First option value for column 1');
|
150 | deepEqual(flt1.options[6].value, 'Alice Springs',
|
151 | 'Last option value for column 1');
|
152 | deepEqual(flt2.options[1].value, '1412', 'First option value for column 2');
|
153 | deepEqual(flt2.options[7].value, '2045', 'Last option value for column 2');
|
154 | deepEqual(flt3.options[1].value, '.6', 'First option value for column 3');
|
155 | deepEqual(flt3.options[7].value, '3.1', 'Last option value for column 3');
|
156 | deepEqual(flt4.options[1].value, '4.3', 'First option value for column 4');
|
157 | deepEqual(flt4.options[7].value, '40', 'Last option value for column 4');
|
158 | });
|
159 |
|
160 | test('Can sort options in asc and desc manner', function() {
|
161 | tf.clearFilters();
|
162 | tf.destroy();
|
163 | tf = new TableFilter('demo', {
|
164 | base_path: '../dist/tablefilter/',
|
165 | col_0: 'select',
|
166 | col_2: 'multiple',
|
167 | col_3: 'select',
|
168 | col_4: 'multiple',
|
169 | col_types: ['string', 'string', 'number', 'number', 'number'],
|
170 | case_sensitive: true,
|
171 | sort_filter_options_asc: [2, 3],
|
172 | sort_filter_options_desc: [0, 4]
|
173 | });
|
174 | tf.init();
|
175 |
|
176 | var flt0 = id(tf.fltIds[0]);
|
177 | var flt2 = id(tf.fltIds[2]);
|
178 | var flt3 = id(tf.fltIds[3]);
|
179 | var flt4 = id(tf.fltIds[4]);
|
180 |
|
181 | deepEqual(flt0.options[1].value, 'Sydney',
|
182 | 'First option value for column 0');
|
183 | deepEqual(flt0.options[2].value, 'Adelaide',
|
184 | 'Last option value for column 0');
|
185 | deepEqual(flt2.options[1].value, '286', 'First option value for column 2');
|
186 | deepEqual(flt2.options[7].value, '2781', 'Last option value for column 2');
|
187 | deepEqual(flt3.options[1].value, '.6', 'First option value for column 3');
|
188 | deepEqual(flt3.options[7].value, '3.1', 'Last option value for column 3');
|
189 | deepEqual(flt4.options[1].value, '40', 'First option value for column 4');
|
190 | deepEqual(flt4.options[7].value, '4.3', 'Last option value for column 4');
|
191 | });
|
192 |
|
193 |
|
194 | module('Clear filter text');
|
195 | test('Can define clear filter text for each column', function() {
|
196 | tf.clearFilters();
|
197 | tf.destroy();
|
198 | tf = new TableFilter('demo', {
|
199 | base_path: '../dist/tablefilter/',
|
200 | col_2: 'multiple',
|
201 | col_3: 'select',
|
202 | col_4: 'multiple',
|
203 | clear_filter_text: [null, null, 'clear 2', 'clear 3', 'clear 4']
|
204 | });
|
205 | tf.init();
|
206 |
|
207 | var flt2 = tf.getFilterElement(2);
|
208 | var flt3 = tf.getFilterElement(3);
|
209 | var flt4 = tf.getFilterElement(4);
|
210 |
|
211 | deepEqual(flt2.options[0].innerHTML, 'clear 2', 'clear text filter 2');
|
212 | deepEqual(flt3.options[0].innerHTML, 'clear 3', 'clear text filter 3');
|
213 | deepEqual(flt4.options[0].innerHTML, 'clear 4', 'clear text filter 4');
|
214 | });
|
215 | test('Can define clear filter text globally', function() {
|
216 | tf.clearFilters();
|
217 | tf.destroy();
|
218 | tf = new TableFilter('demo', {
|
219 | base_path: '../dist/tablefilter/',
|
220 | col_2: 'multiple',
|
221 | col_3: 'select',
|
222 | col_4: 'multiple',
|
223 | clear_filter_text: 'reset'
|
224 | });
|
225 | tf.init();
|
226 |
|
227 | var flt2 = tf.getFilterElement(2);
|
228 | var flt3 = tf.getFilterElement(3);
|
229 | var flt4 = tf.getFilterElement(4);
|
230 |
|
231 | deepEqual(flt2.options[0].innerHTML, 'reset', 'clear text filter 2');
|
232 | deepEqual(flt3.options[0].innerHTML, 'reset', 'clear text filter 3');
|
233 | deepEqual(flt4.options[0].innerHTML, 'reset', 'clear text filter 4');
|
234 | });
|
235 |
|
236 |
|
237 | module('Tear down');
|
238 | test('TableFilter removed', function() {
|
239 | tf.destroy();
|
240 | deepEqual(id(tf.fltIds[3]), null, 'Filter is removed');
|
241 | deepEqual(
|
242 | tf.feature('dropdown').initialized,
|
243 | false,
|
244 | 'Drop-down not initialised'
|
245 | );
|
246 | });
|