blob: 1535c6e794d2f25cabbb61f08d69596ef2feb2ac [file] [log] [blame]
Matteo Scandolo9e6c6fc2016-04-14 14:59:09 -07001/**
2 * © OpenCORD
3 *
4 * Created by teone on 3/24/16.
5 */
6
7(function () {
8 'use strict';
9
Matteo Scandolof9700a32016-05-06 09:42:45 -070010 var scope, element, isolatedScope, rootScope, compile;
11 const compileElement = () => {
12
13 if(!scope){
14 scope = rootScope.$new();
15 }
16
17 element = angular.element('<xos-table config="config" data="data"></xos-table>');
18 compile(element)(scope);
19 scope.$digest();
20 isolatedScope = element.isolateScope().vm;
21 }
22
23
Matteo Scandolo9e6c6fc2016-04-14 14:59:09 -070024 describe('The xos.helper module', function(){
25 describe('The xos-table component', () => {
26
27 beforeEach(module('xos.helpers'));
28
Matteo Scandolof9700a32016-05-06 09:42:45 -070029 beforeEach(inject(function ($compile, $rootScope) {
30 compile = $compile;
31 rootScope = $rootScope;
32 }));
33
Matteo Scandolob6ca3012016-06-03 16:58:43 -070034 it('should throw an error if no config is specified', () => {
Matteo Scandolo9e6c6fc2016-04-14 14:59:09 -070035 function errorFunctionWrapper(){
Matteo Scandolof9700a32016-05-06 09:42:45 -070036 compileElement();
Matteo Scandolo9e6c6fc2016-04-14 14:59:09 -070037 }
38 expect(errorFunctionWrapper).toThrow(new Error('[xosTable] Please provide a configuration via the "config" attribute'));
Matteo Scandolob6ca3012016-06-03 16:58:43 -070039 });
Matteo Scandolo9e6c6fc2016-04-14 14:59:09 -070040
Matteo Scandolob6ca3012016-06-03 16:58:43 -070041 it('should throw an error if no config columns are specified', () => {
Matteo Scandolo9e6c6fc2016-04-14 14:59:09 -070042 function errorFunctionWrapper(){
43 // setup the parent scope
Matteo Scandolob6ca3012016-06-03 16:58:43 -070044 scope = rootScope.$new();
Matteo Scandolo9e6c6fc2016-04-14 14:59:09 -070045 scope.config = 'green';
Matteo Scandolof9700a32016-05-06 09:42:45 -070046 compileElement();
Matteo Scandolo9e6c6fc2016-04-14 14:59:09 -070047 }
48 expect(errorFunctionWrapper).toThrow(new Error('[xosTable] Please provide a columns list in the configuration'));
Matteo Scandolob6ca3012016-06-03 16:58:43 -070049 });
Matteo Scandolo9e6c6fc2016-04-14 14:59:09 -070050
Matteo Scandoloa6a9e612016-04-14 16:52:13 -070051 describe('when basicly configured', function() {
Matteo Scandolo9e6c6fc2016-04-14 14:59:09 -070052
Matteo Scandoloa6a9e612016-04-14 16:52:13 -070053 beforeEach(inject(function ($compile, $rootScope) {
Matteo Scandolof9700a32016-05-06 09:42:45 -070054
Matteo Scandoloa6a9e612016-04-14 16:52:13 -070055 scope = $rootScope.$new();
Matteo Scandolo9e6c6fc2016-04-14 14:59:09 -070056
Matteo Scandoloa6a9e612016-04-14 16:52:13 -070057 scope.config = {
58 columns: [
59 {
60 label: 'Label 1',
61 prop: 'label-1'
62 },
63 {
64 label: 'Label 2',
65 prop: 'label-2'
66 }
67 ]
68 };
Matteo Scandolo9e6c6fc2016-04-14 14:59:09 -070069
Matteo Scandoloa6a9e612016-04-14 16:52:13 -070070 scope.data = [
Matteo Scandolo9e6c6fc2016-04-14 14:59:09 -070071 {
Matteo Scandoloa6a9e612016-04-14 16:52:13 -070072 'label-1': 'Sample 1.1',
73 'label-2': 'Sample 1.2'
Matteo Scandolo9e6c6fc2016-04-14 14:59:09 -070074 },
75 {
Matteo Scandoloa6a9e612016-04-14 16:52:13 -070076 'label-1': 'Sample 2.1',
77 'label-2': 'Sample 2.2'
Matteo Scandolo9e6c6fc2016-04-14 14:59:09 -070078 }
79 ]
Matteo Scandolo9e6c6fc2016-04-14 14:59:09 -070080
Matteo Scandoloa6a9e612016-04-14 16:52:13 -070081 element = angular.element('<xos-table config="config" data="data"></xos-table>');
82 $compile(element)(scope);
83 scope.$digest();
84 isolatedScope = element.isolateScope().vm;
85 }));
Matteo Scandolo9e6c6fc2016-04-14 14:59:09 -070086
Matteo Scandoloa6a9e612016-04-14 16:52:13 -070087 it('should contain 2 columns', function() {
88 var th = element[0].getElementsByTagName('th');
89 expect(th.length).toEqual(2);
90 expect(isolatedScope.columns.length).toEqual(2);
91 });
Matteo Scandolo9e6c6fc2016-04-14 14:59:09 -070092
Matteo Scandoloa6a9e612016-04-14 16:52:13 -070093 it('should contain 3 rows', function() {
94 var tr = element[0].getElementsByTagName('tr');
95 expect(tr.length).toEqual(3);
96 });
97
Matteo Scandolof9700a32016-05-06 09:42:45 -070098 it('should render labels', () => {
99 let label1 = $(element).find('thead tr th')[0]
100 let label2 = $(element).find('thead tr th')[1]
101 expect($(label1).text().trim()).toEqual('Label 1');
102 expect($(label2).text().trim()).toEqual('Label 2');
103 });
104
Matteo Scandoloe15a8202016-04-15 14:27:54 -0700105 describe('when no data are provided', () => {
106 beforeEach(() => {
107 isolatedScope.data = [];
108 scope.$digest();
109 });
110 it('should render an alert', () => {
111 let alert = element[0].getElementsByClassName('alert');
112 let table = element[0].getElementsByTagName('table');
113 expect(alert.length).toEqual(1);
114 expect(table.length).toEqual(1);
115 });
116 });
117
Matteo Scandolof9700a32016-05-06 09:42:45 -0700118 describe('when a field type is provided', () => {
Matteo Scandoloeabfb712016-04-27 17:26:21 -0700119 describe('and is boolean', () => {
120 beforeEach(() => {
Matteo Scandolof9700a32016-05-06 09:42:45 -0700121 scope.config = {
Matteo Scandoloeabfb712016-04-27 17:26:21 -0700122 columns: [
123 {
124 label: 'Label 1',
125 prop: 'label-1',
126 type: 'boolean'
127 }
128 ]
129 };
Matteo Scandolof9700a32016-05-06 09:42:45 -0700130 scope.data = [
Matteo Scandoloeabfb712016-04-27 17:26:21 -0700131 {
132 'label-1': true
133 },
134 {
135 'label-1': false
136 }
137 ];
Matteo Scandolof9700a32016-05-06 09:42:45 -0700138 compileElement();
Matteo Scandoloeabfb712016-04-27 17:26:21 -0700139 });
140
141 it('should render an incon', () => {
142 let td1 = $(element).find('tbody tr:first-child td')[0];
143 let td2 = $(element).find('tbody tr:last-child td')[0];
Matteo Scandoloeabfb712016-04-27 17:26:21 -0700144 expect($(td1).find('i')).toHaveClass('glyphicon-ok');
145 expect($(td2).find('i')).toHaveClass('glyphicon-remove');
146 });
Matteo Scandoloc647c9b2016-05-18 14:57:56 -0700147
148 describe('with field filters', () => {
149 beforeEach(() => {
150 scope.config.filter = 'field';
151 compileElement();
152 });
153
154 it('should render a dropdown for filtering', () => {
155 let td1 = $(element).find('table tbody tr td')[0];
Matteo Scandoloc647c9b2016-05-18 14:57:56 -0700156 expect(td1).toContainElement('select');
157 expect(td1).not.toContainElement('input');
158 });
159 });
Matteo Scandoloeabfb712016-04-27 17:26:21 -0700160 });
161
162 describe('and is date', () => {
163 beforeEach(() => {
Matteo Scandolof9700a32016-05-06 09:42:45 -0700164 scope.config = {
Matteo Scandoloeabfb712016-04-27 17:26:21 -0700165 columns: [
166 {
167 label: 'Label 1',
168 prop: 'label-1',
169 type: 'date'
170 }
171 ]
172 };
Matteo Scandolof9700a32016-05-06 09:42:45 -0700173 scope.data = [
Matteo Scandoloeabfb712016-04-27 17:26:21 -0700174 {
175 'label-1': '2015-02-17T22:06:38.059000Z'
176 }
177 ];
Matteo Scandolof9700a32016-05-06 09:42:45 -0700178 compileElement();
Matteo Scandoloeabfb712016-04-27 17:26:21 -0700179 });
180
181 it('should render an formatted date', () => {
182 let td1 = $(element).find('tbody tr:first-child td')[0];
Matteo Scandolof9700a32016-05-06 09:42:45 -0700183 expect($(td1).text().trim()).toEqual('14:06 Feb 17, 2015');
184 });
185 });
186
187 describe('and is array', () => {
188 beforeEach(() => {
189 scope.data = [
190 {categories: ['Film', 'Music']}
191 ];
192 scope.config = {
193 columns: [
194 {
195 label: 'Categories',
196 prop: 'categories',
197 type: 'array'
198 }
199 ]
200 }
201 compileElement();
202 });
203 it('should render a comma separated list', () => {
204 let td1 = $(element).find('tbody tr:first-child')[0];
Matteo Scandolof9700a32016-05-06 09:42:45 -0700205 expect($(td1).text().trim()).toEqual('Film, Music');
206 });
207 });
208
Matteo Scandolo58705a42016-05-06 10:08:34 -0700209 describe('and is object', () => {
210 beforeEach(() => {
211 scope.data = [
212 {
213 attributes: {
214 age: 20,
215 height: 50
216 }
217 }
218 ];
219 scope.config = {
220 columns: [
221 {
222 label: 'Categories',
223 prop: 'attributes',
224 type: 'object'
225 }
226 ]
227 }
228 compileElement();
229 });
230 it('should render a list of key-values', () => {
231 let td = $(element).find('tbody tr:first-child')[0];
Matteo Scandolo0cd52c12016-05-06 11:39:56 -0700232 let ageLabel = $(td).find('dl dt')[0];
233 let ageValue = $(td).find('dl dd')[0];
234 let heightLabel = $(td).find('dl dt')[1];
235 let heightValue = $(td).find('dl dd')[1];
Matteo Scandolo58705a42016-05-06 10:08:34 -0700236 expect($(ageLabel).text().trim()).toEqual('age');
237 expect($(ageValue).text().trim()).toEqual('20');
238 expect($(heightLabel).text().trim()).toEqual('height');
239 expect($(heightValue).text().trim()).toEqual('50');
240 });
241 });
242
Matteo Scandolof9700a32016-05-06 09:42:45 -0700243 describe('and is custom', () => {
Matteo Scandoloa7ad4992016-05-09 15:27:47 -0700244
245 let formatterFn = jasmine.createSpy('formatter').and.returnValue('Formatted Content');
246
Matteo Scandolof9700a32016-05-06 09:42:45 -0700247 beforeEach(() => {
248 scope.data = [
249 {categories: ['Film', 'Music']}
250 ];
251 scope.config = {
252 columns: [
253 {
254 label: 'Categories',
255 prop: 'categories',
256 type: 'custom',
Matteo Scandoloa7ad4992016-05-09 15:27:47 -0700257 formatter: formatterFn
Matteo Scandolof9700a32016-05-06 09:42:45 -0700258 }
259 ]
260 }
261 compileElement();
262 });
263
264 it('should check for a formatter property', () => {
265 function errorFunctionWrapper(){
266 // setup the parent scope
267 scope = rootScope.$new();
268 scope.config = {
269 columns: [
270 {
271 label: 'Categories',
272 prop: 'categories',
273 type: 'custom'
274 }
275 ]
276 };
277 compileElement();
278 }
279 expect(errorFunctionWrapper).toThrow(new Error('[xosTable] You have provided a custom field type, a formatter function should provided too.'));
280 });
281
Matteo Scandolobee3eaf2016-05-06 13:09:19 -0700282 it('should check that the formatter property is a function', () => {
283 function errorFunctionWrapper(){
284 // setup the parent scope
285 scope = rootScope.$new();
286 scope.config = {
287 columns: [
288 {
289 label: 'Categories',
290 prop: 'categories',
291 type: 'custom',
292 formatter: 'formatter'
293 }
294 ]
295 };
296 compileElement();
297 }
298 expect(errorFunctionWrapper).toThrow(new Error('[xosTable] You have provided a custom field type, a formatter function should provided too.'));
299 });
300
Matteo Scandolof9700a32016-05-06 09:42:45 -0700301 it('should format data using the formatter property', () => {
302 let td1 = $(element).find('tbody tr:first-child')[0];
303 expect($(td1).text().trim()).toEqual('Formatted Content');
Matteo Scandoloa7ad4992016-05-09 15:27:47 -0700304 // the custom formatted should receive the entire object, otherwise is not so custom
305 expect(formatterFn).toHaveBeenCalledWith({categories: ['Film', 'Music']});
Matteo Scandoloeabfb712016-04-27 17:26:21 -0700306 });
307 });
Matteo Scandolod49ed5f2016-05-13 10:12:09 -0700308
309 describe('and is icon', () => {
310
311 beforeEach(() => {
312 scope.config = {
313 columns: [
314 {
315 label: 'Label 1',
316 prop: 'label-1',
317 type: 'icon',
318 formatter: item => {
319 switch (item['label-1']){
Matteo Scandoloc647c9b2016-05-18 14:57:56 -0700320 case 1:
321 return 'ok';
322 case 2:
323 return 'remove';
324 case 3:
325 return 'plus'
Matteo Scandolod49ed5f2016-05-13 10:12:09 -0700326 }
327 }
328 }
329 ]
330 };
331 scope.data = [
332 {
333 'label-1': 1
334 },
335 {
336 'label-1': 2
337 },
338 {
339 'label-1': 3
340 }
341 ];
342 compileElement();
343 });
344
345 it('should render a custom icon', () => {
346 let td1 = $(element).find('tbody tr:first-child td')[0];
347 let td2 = $(element).find('tbody tr:nth-child(2) td')[0];
348 let td3 = $(element).find('tbody tr:last-child td')[0];
349 expect($(td1).find('i')).toHaveClass('glyphicon-ok');
350 expect($(td2).find('i')).toHaveClass('glyphicon-remove');
351 expect($(td3).find('i')).toHaveClass('glyphicon-plus');
352 });
353 });
Matteo Scandoloeabfb712016-04-27 17:26:21 -0700354 });
355
Matteo Scandolobee3eaf2016-05-06 13:09:19 -0700356 describe('when a link property is provided', () => {
357 beforeEach(() => {
358 scope.data = [
359 {
360 id: 1}
361 ];
362 scope.config = {
363 columns: [
364 {
365 label: 'Id',
366 prop: 'id',
367 link: (item) => {
368 return `/link/${item.id}`;
369 }
370 }
371 ]
372 }
373 compileElement();
374 });
375
376 it('should check that the link property is a function', () => {
377 function errorFunctionWrapper(){
378 // setup the parent scope
379 scope = rootScope.$new();
380 scope.config = {
381 columns: [
382 {
383 label: 'Categories',
384 prop: 'categories',
385 link: 'custom'
386 }
387 ]
388 };
389 compileElement();
390 }
391 expect(errorFunctionWrapper).toThrow(new Error('[xosTable] The link property should be a function.'));
392 });
393
Matteo Scandoloa7ad4992016-05-09 15:27:47 -0700394 it('should render a link with the correct url', () => {
Matteo Scandolobee3eaf2016-05-06 13:09:19 -0700395 let link = $(element).find('tbody tr:first-child td a')[0];
396 expect($(link).attr('href')).toEqual('/link/1');
397 });
398 });
399
Matteo Scandoloa6a9e612016-04-14 16:52:13 -0700400 describe('when actions are passed', () => {
401
402 let cb = jasmine.createSpy('callback')
403
404 beforeEach(() => {
405 isolatedScope.config.actions = [
406 {
407 label: 'delete',
408 icon: 'remove',
409 cb: cb,
410 color: 'red'
411 }
412 ];
413 scope.$digest();
414 });
415
416 it('should have 3 columns', () => {
417 var th = element[0].getElementsByTagName('th');
418 expect(th.length).toEqual(3);
419 expect(isolatedScope.columns.length).toEqual(2);
420 });
421
422 it('when clicking on action should invoke callback', () => {
423 var link = element[0].getElementsByTagName('a')[0];
424 link.click();
425 expect(cb).toHaveBeenCalledWith(scope.data[0]);
426 });
427 });
428
429 describe('when filter is fulltext', () => {
430 beforeEach(() => {
431 isolatedScope.config.filter = 'fulltext';
432 scope.$digest();
433 });
434
435 it('should render a text field', () => {
436 var textField = element[0].getElementsByTagName('input');
437 expect(textField.length).toEqual(1);
438 });
439
440 describe('and a value is enterd', () => {
441 beforeEach(() => {
442 isolatedScope.query = '2.2';
443 scope.$digest();
444 });
445
446 it('should contain 2 rows', function() {
447 var tr = element[0].getElementsByTagName('tr');
448 expect(tr.length).toEqual(2);
449 });
450 });
451 });
452
453 describe('when filter is field', () => {
454 beforeEach(() => {
455 isolatedScope.config.filter = 'field';
456 scope.$digest();
457 });
458
459 it('should render a text field for each column', () => {
460 var textField = element[0].getElementsByTagName('input');
461 expect(textField.length).toEqual(2);
462 });
463
464 describe('and a value is enterd', () => {
465 beforeEach(() => {
466 isolatedScope.query = {'label-1': '2.1'};
467 scope.$digest();
468 });
469
470 it('should contain 3 rows', function() {
471 var tr = element[0].getElementsByTagName('tr');
472 expect(tr.length).toEqual(3);
473 });
474 });
475 });
Matteo Scandolo03e59602016-04-14 17:19:08 -0700476
477 describe('when order is true', () => {
478 beforeEach(() => {
479 isolatedScope.config.order = true;
480 scope.$digest();
481 });
482
483 it('should render a arrows beside', () => {
484 var arrows = element[0].getElementsByTagName('i');
485 expect(arrows.length).toEqual(4);
486 });
487
Matteo Scandolod49ed5f2016-05-13 10:12:09 -0700488 describe('and a default ordering is passed', () => {
489
490 beforeEach(() => {
491 scope.config.order = {
492 field: 'label-1',
493 reverse: true
494 };
495 compileElement();
496 });
497
498 it('should orderBy the default order', () => {
499 var tr = $(element).find('tr');
500 expect($(tr[1]).text()).toContain('Sample 2.2');
501 expect($(tr[2]).text()).toContain('Sample 1.1');
502 });
503 });
504
Matteo Scandolo03e59602016-04-14 17:19:08 -0700505 describe('and an order is set', () => {
506 beforeEach(() => {
507 isolatedScope.orderBy = 'label-1';
508 isolatedScope.reverse = true;
509 scope.$digest();
510 });
511
512 it('should orderBy', function() {
Matteo Scandolod49ed5f2016-05-13 10:12:09 -0700513 // console.log($(element).find('table'));
Matteo Scandolobee3eaf2016-05-06 13:09:19 -0700514 var tr = $(element).find('tr');
515 expect($(tr[1]).text()).toContain('Sample 2.2');
516 expect($(tr[2]).text()).toContain('Sample 1.1');
Matteo Scandolo03e59602016-04-14 17:19:08 -0700517 });
518 });
519 });
Matteo Scandolo9e6c6fc2016-04-14 14:59:09 -0700520 });
521 });
522 });
523})();
524