1 import { ComponentFixture, TestBed } from '@angular/core/testing';
2 import { FormsModule } from '@angular/forms';
3 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
4 import { RouterTestingModule } from '@angular/router/testing';
6 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
7 import * as _ from 'lodash';
8 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
10 import { configureTestBed } from '../../../../testing/unit-test-helper';
11 import { ComponentsModule } from '../../components/components.module';
12 import { CdTableColumnFilter } from '../../models/cd-table-column-filter';
13 import { CdTableFetchDataContext } from '../../models/cd-table-fetch-data-context';
14 import { PipesModule } from '../../pipes/pipes.module';
15 import { TableComponent } from './table.component';
17 describe('TableComponent', () => {
18 let component: TableComponent;
19 let fixture: ComponentFixture<TableComponent>;
21 const createFakeData = (n: number) => {
23 for (let i = 0; i < n; i++) {
33 const clearLocalStorage = () => {
34 component.localStorage.clear();
38 declarations: [TableComponent],
40 BrowserAnimationsModule,
45 BsDropdownModule.forRoot(),
51 fixture = TestBed.createComponent(TableComponent);
52 component = fixture.componentInstance;
54 component.data = createFakeData(10);
56 { prop: 'a', name: 'Index', filterable: true },
57 { prop: 'b', name: 'Index times ten' },
58 { prop: 'c', name: 'Odd?', filterable: true }
62 it('should create', () => {
63 expect(component).toBeTruthy();
66 it('should force an identifier', () => {
67 component.identifier = 'x';
68 component.forceIdentifier = true;
70 expect(component.identifier).toBe('x');
71 expect(component.sorts[0].prop).toBe('a');
72 expect(component.sorts).toEqual(component.createSortingDefinition('a'));
75 it('should have rows', () => {
77 expect(component.data.length).toBe(10);
78 expect(component.rows.length).toBe(component.data.length);
81 it('should have an int in setLimit parsing a string', () => {
82 expect(component.limit).toBe(10);
83 expect(component.limit).toEqual(jasmine.any(Number));
85 const e = { target: { value: '1' } };
86 component.setLimit(e);
87 expect(component.userConfig.limit).toBe(1);
88 expect(component.userConfig.limit).toEqual(jasmine.any(Number));
89 e.target.value = '-20';
90 component.setLimit(e);
91 expect(component.userConfig.limit).toBe(1);
94 it('should prevent propagation of mouseenter event', (done) => {
95 let wasCalled = false;
96 const mouseEvent = new MouseEvent('mouseenter');
97 mouseEvent.stopPropagation = () => {
100 spyOn(component.table.element, 'addEventListener').and.callFake((eventName, fn) => {
102 expect(eventName).toBe('mouseenter');
103 expect(wasCalled).toBe(true);
106 component.ngOnInit();
109 describe('test column filtering', () => {
110 let filterIndex: CdTableColumnFilter;
111 let filterOdd: CdTableColumnFilter;
112 let filterCustom: CdTableColumnFilter;
114 const expectColumnFilterCreated = (
115 filter: CdTableColumnFilter,
118 value?: { raw: string; formatted: string }
120 expect(filter.column.prop).toBe(prop);
121 expect(_.map(filter.options, 'raw')).toEqual(options);
122 expect(filter.value).toEqual(value);
125 const expectColumnFiltered = (
126 changes: { filter: CdTableColumnFilter; value?: string }[],
130 component.search = search;
131 _.forEach(changes, (change) => {
132 component.onChangeFilter(
134 change.value ? { raw: change.value, formatted: change.value } : undefined
137 expect(component.rows).toEqual(results);
138 component.onClearSearch();
139 component.onClearFilters();
142 describe('with visible columns', () => {
144 component.initColumnFilters();
145 component.updateColumnFilterOptions();
146 filterIndex = component.columnFilters[0];
147 filterOdd = component.columnFilters[1];
150 it('should have filters initialized', () => {
151 expect(component.columnFilters.length).toBe(2);
152 expectColumnFilterCreated(
155 _.map(component.data, (row) => _.toString(row.a))
157 expectColumnFilterCreated(filterOdd, 'c', ['false', 'true']);
160 it('should add filters', () => {
162 expectColumnFiltered([{ filter: filterIndex, value: '1' }], [{ a: 1, b: 10, c: true }]);
165 expectColumnFiltered(
167 { filter: filterOdd, value: 'false' },
168 { filter: filterIndex, value: '2' }
170 [{ a: 2, b: 20, c: false }]
174 expect(component.rows).toEqual(component.data);
177 it('should remove filters', () => {
179 expectColumnFiltered(
181 { filter: filterOdd, value: 'true' },
182 { filter: filterIndex, value: '1' },
183 { filter: filterIndex, value: undefined }
186 { a: 1, b: 10, c: true },
187 { a: 3, b: 30, c: true },
188 { a: 5, b: 50, c: true },
189 { a: 7, b: 70, c: true },
190 { a: 9, b: 90, c: true }
195 expectColumnFiltered(
197 { filter: filterOdd, value: 'true' },
198 { filter: filterIndex, value: '1' },
199 { filter: filterIndex, value: undefined },
200 { filter: filterOdd, value: undefined }
205 // a selected filter should be removed if it's selected again
206 expectColumnFiltered(
208 { filter: filterOdd, value: 'true' },
209 { filter: filterIndex, value: '1' },
210 { filter: filterIndex, value: '1' }
213 { a: 1, b: 10, c: true },
214 { a: 3, b: 30, c: true },
215 { a: 5, b: 50, c: true },
216 { a: 7, b: 70, c: true },
217 { a: 9, b: 90, c: true }
222 it('should search from filtered rows', () => {
223 expectColumnFiltered(
224 [{ filter: filterOdd, value: 'true' }],
225 [{ a: 9, b: 90, c: true }],
230 expect(component.rows).toEqual(component.data);
234 describe('with custom columns', () => {
236 // create a new additional column in data
237 for (let i = 0; i < component.data.length; i++) {
238 const row = component.data[i];
241 // create a custom column filter
242 component.extraFilterableColumns = [
244 name: 'd less than 5',
246 filterOptions: ['yes', 'no'],
247 filterInitValue: 'yes',
248 filterPredicate: (row, value) => {
249 if (value === 'yes') {
257 component.initColumnFilters();
258 component.updateColumnFilterOptions();
259 filterIndex = component.columnFilters[0];
260 filterOdd = component.columnFilters[1];
261 filterCustom = component.columnFilters[2];
264 it('should have filters initialized', () => {
265 expect(component.columnFilters.length).toBe(3);
266 expectColumnFilterCreated(filterCustom, 'd', ['yes', 'no'], {
271 expect(component.rows).toEqual(_.slice(component.data, 0, 5));
274 it('should remove filters', () => {
275 expectColumnFiltered([{ filter: filterCustom, value: 'no' }], _.slice(component.data, 5));
280 describe('test search', () => {
281 const expectSearch = (keyword: string, expectedResult: object[]) => {
282 component.search = keyword;
283 component.updateFilter();
284 expect(component.rows).toEqual(expectedResult);
285 component.onClearSearch();
288 describe('searchableObjects', () => {
297 component.data = [testObject];
298 component.columns = [{ prop: 'obj', name: 'Object' }];
301 it('should not search through objects as default case', () => {
302 expect(component.searchableObjects).toBe(false);
303 expectSearch('8', []);
306 it('should search through objects if searchableObjects is set to true', () => {
307 component.searchableObjects = true;
308 expectSearch('28', []);
309 expectSearch('8', [testObject]);
310 expectSearch('123', [testObject]);
311 expectSearch('max', [testObject]);
315 it('should find a particular number', () => {
316 expectSearch('5', [{ a: 5, b: 50, c: true }]);
317 expectSearch('9', [{ a: 9, b: 90, c: true }]);
320 it('should find boolean values', () => {
321 expectSearch('true', [
322 { a: 1, b: 10, c: true },
323 { a: 3, b: 30, c: true },
324 { a: 5, b: 50, c: true },
325 { a: 7, b: 70, c: true },
326 { a: 9, b: 90, c: true }
328 expectSearch('false', [
329 { a: 0, b: 0, c: false },
330 { a: 2, b: 20, c: false },
331 { a: 4, b: 40, c: false },
332 { a: 6, b: 60, c: false },
333 { a: 8, b: 80, c: false }
337 it('should test search keyword preparation', () => {
338 const prepare = TableComponent.prepareSearch;
339 const expected = ['a', 'b', 'c'];
340 expect(prepare('a b c')).toEqual(expected);
341 expect(prepare('a,, b,, c')).toEqual(expected);
342 expect(prepare('a,,,, b,,, c')).toEqual(expected);
343 expect(prepare('a+b c')).toEqual(['a+b', 'c']);
344 expect(prepare('a,,,+++b,,, c')).toEqual(['a+++b', 'c']);
345 expect(prepare('"a b c" "d e f", "g, h i"')).toEqual(['a+b+c', 'd+e++f', 'g+h+i']);
348 it('should search for multiple values', () => {
349 expectSearch('2 20 false', [{ a: 2, b: 20, c: false }]);
350 expectSearch('false 2', [{ a: 2, b: 20, c: false }]);
353 it('should filter by column', () => {
354 expectSearch('index:5', [{ a: 5, b: 50, c: true }]);
355 expectSearch('times:50', [{ a: 5, b: 50, c: true }]);
356 expectSearch('times:50 index:5', [{ a: 5, b: 50, c: true }]);
357 expectSearch('Odd?:true', [
358 { a: 1, b: 10, c: true },
359 { a: 3, b: 30, c: true },
360 { a: 5, b: 50, c: true },
361 { a: 7, b: 70, c: true },
362 { a: 9, b: 90, c: true }
364 component.data = createFakeData(100);
365 expectSearch('index:1 odd:true times:110', [{ a: 11, b: 110, c: true }]);
368 it('should search through arrays', () => {
369 component.columns = [
370 { prop: 'a', name: 'Index' },
371 { prop: 'b', name: 'ArrayColumn' }
375 { a: 1, b: ['foo', 'bar'] },
376 { a: 2, b: ['baz', 'bazinga'] }
378 expectSearch('bar', [{ a: 1, b: ['foo', 'bar'] }]);
379 expectSearch('arraycolumn:bar arraycolumn:foo', [{ a: 1, b: ['foo', 'bar'] }]);
380 expectSearch('arraycolumn:baz arraycolumn:inga', [{ a: 2, b: ['baz', 'bazinga'] }]);
386 expectSearch('arraycolumn:1 arraycolumn:2', [{ a: 1, b: [1, 2] }]);
389 it('should search with spaces', () => {
390 const expectedResult = [{ a: 2, b: 20, c: false }];
391 expectSearch(`'Index times ten':20`, expectedResult);
392 expectSearch('index+times+ten:20', expectedResult);
395 it('should filter results although column name is incomplete', () => {
396 component.data = createFakeData(3);
397 expectSearch(`'Index times ten'`, []);
398 expectSearch(`'Ind'`, []);
399 expectSearch(`'Ind:'`, [
400 { a: 0, b: 0, c: false },
401 { a: 1, b: 10, c: true },
402 { a: 2, b: 20, c: false }
406 it('should search if column name is incomplete', () => {
407 const expectedData = [
408 { a: 0, b: 0, c: false },
409 { a: 1, b: 10, c: true },
410 { a: 2, b: 20, c: false }
412 component.data = _.clone(expectedData);
413 expectSearch('inde', []);
414 expectSearch('index:', expectedData);
415 expectSearch('index times te', []);
418 it('should restore full table after search', () => {
420 expect(component.rows.length).toBe(10);
421 component.search = '3';
422 component.updateFilter();
423 expect(component.rows.length).toBe(1);
424 component.onClearSearch();
425 expect(component.rows.length).toBe(10);
428 it('should work with undefined data', () => {
429 component.data = undefined;
430 component.search = '3';
431 component.updateFilter();
432 expect(component.rows).toBeUndefined();
436 describe('after ngInit', () => {
437 const toggleColumn = (prop: string, checked: boolean) => {
438 component.toggleColumn({
446 const equalStorageConfig = () => {
447 expect(JSON.stringify(component.userConfig)).toBe(
448 component.localStorage.getItem(component.tableName)
453 component.ngOnInit();
456 it('should have updated the column definitions', () => {
457 expect(component.columns[0].flexGrow).toBe(1);
458 expect(component.columns[1].flexGrow).toBe(2);
459 expect(component.columns[2].flexGrow).toBe(2);
460 expect(component.columns[2].resizeable).toBe(false);
463 it('should have table columns', () => {
464 expect(component.tableColumns.length).toBe(3);
465 expect(component.tableColumns).toEqual(component.columns);
468 it('should have a unique identifier which it searches for', () => {
469 expect(component.identifier).toBe('a');
470 expect(component.userConfig.sorts[0].prop).toBe('a');
471 expect(component.userConfig.sorts).toEqual(component.createSortingDefinition('a'));
472 equalStorageConfig();
475 it('should remove column "a"', () => {
476 expect(component.userConfig.sorts[0].prop).toBe('a');
477 toggleColumn('a', false);
478 expect(component.userConfig.sorts[0].prop).toBe('b');
479 expect(component.tableColumns.length).toBe(2);
480 equalStorageConfig();
483 it('should not be able to remove all columns', () => {
484 expect(component.userConfig.sorts[0].prop).toBe('a');
485 toggleColumn('a', false);
486 toggleColumn('b', false);
487 toggleColumn('c', false);
488 expect(component.userConfig.sorts[0].prop).toBe('c');
489 expect(component.tableColumns.length).toBe(1);
490 equalStorageConfig();
493 it('should enable column "a" again', () => {
494 expect(component.userConfig.sorts[0].prop).toBe('a');
495 toggleColumn('a', false);
496 toggleColumn('a', true);
497 expect(component.userConfig.sorts[0].prop).toBe('b');
498 expect(component.tableColumns.length).toBe(3);
499 equalStorageConfig();
507 describe('reload data', () => {
509 component.ngOnInit();
511 component['updating'] = false;
514 it('should call fetchData callback function', () => {
515 component.fetchData.subscribe((context: any) => {
516 expect(context instanceof CdTableFetchDataContext).toBeTruthy();
518 component.reloadData();
521 it('should call error function', () => {
522 component.data = createFakeData(5);
523 component.fetchData.subscribe((context: any) => {
525 expect(component.loadingError).toBeTruthy();
526 expect(component.data.length).toBe(0);
527 expect(component.loadingIndicator).toBeFalsy();
528 expect(component['updating']).toBeFalsy();
530 component.reloadData();
533 it('should call error function with custom config', () => {
534 component.data = createFakeData(10);
535 component.fetchData.subscribe((context: any) => {
536 context.errorConfig.resetData = false;
537 context.errorConfig.displayError = false;
539 expect(component.loadingError).toBeFalsy();
540 expect(component.data.length).toBe(10);
541 expect(component.loadingIndicator).toBeFalsy();
542 expect(component['updating']).toBeFalsy();
544 component.reloadData();
547 it('should update selection on refresh - "onChange"', () => {
548 spyOn(component, 'onSelect').and.callThrough();
549 component.data = createFakeData(10);
550 component.selection.selected = [_.clone(component.data[1])];
551 component.updateSelectionOnRefresh = 'onChange';
552 component.updateSelected();
553 expect(component.onSelect).toHaveBeenCalledTimes(0);
554 component.data[1].d = !component.data[1].d;
555 component.updateSelected();
556 expect(component.onSelect).toHaveBeenCalled();
559 it('should update selection on refresh - "always"', () => {
560 spyOn(component, 'onSelect').and.callThrough();
561 component.data = createFakeData(10);
562 component.selection.selected = [_.clone(component.data[1])];
563 component.updateSelectionOnRefresh = 'always';
564 component.updateSelected();
565 expect(component.onSelect).toHaveBeenCalled();
566 component.data[1].d = !component.data[1].d;
567 component.updateSelected();
568 expect(component.onSelect).toHaveBeenCalled();
571 it('should update selection on refresh - "never"', () => {
572 spyOn(component, 'onSelect').and.callThrough();
573 component.data = createFakeData(10);
574 component.selection.selected = [_.clone(component.data[1])];
575 component.updateSelectionOnRefresh = 'never';
576 component.updateSelected();
577 expect(component.onSelect).toHaveBeenCalledTimes(0);
578 component.data[1].d = !component.data[1].d;
579 component.updateSelected();
580 expect(component.onSelect).toHaveBeenCalledTimes(0);
588 describe('useCustomClass', () => {
590 component.customCss = {
591 'badge badge-danger': 'active',
592 'secret secret-number': 123.456,
593 btn: (v) => _.isString(v) && v.startsWith('http'),
594 secure: (v) => _.isString(v) && v.startsWith('https')
598 it('should throw an error if custom classes are not set', () => {
599 component.customCss = undefined;
600 expect(() => component.useCustomClass('active')).toThrowError('Custom classes are not set!');
603 it('should not return any class', () => {
604 ['', 'something', 123, { complex: 1 }, [1, 2, 3]].forEach((value) =>
605 expect(component.useCustomClass(value)).toBe(undefined)
609 it('should match a string and return the corresponding class', () => {
610 expect(component.useCustomClass('active')).toBe('badge badge-danger');
613 it('should match a number and return the corresponding class', () => {
614 expect(component.useCustomClass(123.456)).toBe('secret secret-number');
617 it('should match against a function and return the corresponding class', () => {
618 expect(component.useCustomClass('http://no.ssl')).toBe('btn');
621 it('should match against multiple functions and return the corresponding classes', () => {
622 expect(component.useCustomClass('https://secure.it')).toBe('btn secure');
626 describe('test expand and collapse feature', () => {
628 spyOn(component.setExpandedRow, 'emit');
630 rowDetail: { collapseAllRows: jest.fn(), toggleExpandRow: jest.fn() }
634 component.identifier = 'a';
635 component.data = createFakeData(10);
638 component.expanded = _.clone(component.data[1]);
641 describe('update expanded on refresh', () => {
642 const updateExpendedOnState = (state: 'always' | 'never' | 'onChange') => {
643 component.updateExpandedOnRefresh = state;
644 component.updateExpanded();
649 component.data[1].b = 'test';
652 it('refreshes "always"', () => {
653 updateExpendedOnState('always');
654 expect(component.expanded.b).toBe('test');
655 expect(component.setExpandedRow.emit).toHaveBeenCalled();
658 it('refreshes "onChange"', () => {
659 updateExpendedOnState('onChange');
660 expect(component.expanded.b).toBe('test');
661 expect(component.setExpandedRow.emit).toHaveBeenCalled();
664 it('does not refresh "onChange" if data is equal', () => {
665 component.data[1].b = 10; // Reverts change
666 updateExpendedOnState('onChange');
667 expect(component.expanded.b).toBe(10);
668 expect(component.setExpandedRow.emit).not.toHaveBeenCalled();
671 it('"never" refreshes', () => {
672 updateExpendedOnState('never');
673 expect(component.expanded.b).toBe(10);
674 expect(component.setExpandedRow.emit).not.toHaveBeenCalled();
678 it('should open the table details and close other expanded rows', () => {
679 component.toggleExpandRow(component.expanded, false);
680 expect(component.expanded).toEqual({ a: 1, b: 10, c: true });
681 expect(component.table.rowDetail.collapseAllRows).toHaveBeenCalled();
682 expect(component.setExpandedRow.emit).toHaveBeenCalledWith(component.expanded);
683 expect(component.table.rowDetail.toggleExpandRow).toHaveBeenCalled();
686 it('should close the current table details expansion', () => {
687 component.toggleExpandRow(component.expanded, true);
688 expect(component.expanded).toBeUndefined();
689 expect(component.setExpandedRow.emit).toHaveBeenCalledWith(undefined);
690 expect(component.table.rowDetail.toggleExpandRow).toHaveBeenCalled();