ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts

   1 import { ComponentFixture, TestBed } from '@angular/core/testing';
   2 import { FormsModule } from '@angular/forms';
   3 import { RouterTestingModule } from '@angular/router/testing';
   4
   5 import { NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
   6 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
   7 import { NgxPipeFunctionModule } from 'ngx-pipe-function';
   8
   9 import { ComponentsModule } from '~/app/shared/components/components.module';
  10 import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
  11 import { CdTableColumn } from '~/app/shared/models/cd-table-column';
  12 import { CdDatePipe } from '~/app/shared/pipes/cd-date.pipe';
  13 import { PipesModule } from '~/app/shared/pipes/pipes.module';
  14 import { configureTestBed } from '~/testing/unit-test-helper';
  15 import { TableComponent } from '../table/table.component';
  16 import { TableKeyValueComponent } from './table-key-value.component';
  17
  18 describe('TableKeyValueComponent', () => {
  19   let component: TableKeyValueComponent;
  20   let fixture: ComponentFixture<TableKeyValueComponent>;
  21
  22   configureTestBed({
  23     declarations: [TableComponent, TableKeyValueComponent],
  24     imports: [
  25       FormsModule,
  26       NgxDatatableModule,
  27       ComponentsModule,
  28       RouterTestingModule,
  29       NgbDropdownModule,
  30       PipesModule,
  31       NgbTooltipModule,
  32       NgxPipeFunctionModule
  33     ]
  34   });
  35
  36   beforeEach(() => {
  37     fixture = TestBed.createComponent(TableKeyValueComponent);
  38     component = fixture.componentInstance;
  39   });
  40
  41   it('should create', () => {
  42     fixture.detectChanges();
  43     expect(component).toBeTruthy();
  44   });
  45
  46   it('should make key value object pairs out of arrays with length two', () => {
  47     component.data = [
  48       ['someKey', 0],
  49       ['arrayKey', [1, 2, 3]],
  50       [3, 'something']
  51     ];
  52     component.ngOnInit();
  53     const expected: any = [
  54       { key: 'arrayKey', value: '1, 2, 3' },
  55       { key: 'someKey', value: 0 },
  56       { key: 3, value: 'something' }
  57     ];
  58     expect(component.tableData).toEqual(expected);
  59   });
  60
  61   it('should not show data supposed to be have hidden by key', () => {
  62     component.data = [
  63       ['a', 1],
  64       ['b', 2]
  65     ];
  66     component.hideKeys = ['a'];
  67     component.ngOnInit();
  68     expect(component.tableData).toEqual([{ key: 'b', value: 2 }]);
  69   });
  70
  71   it('should remove items with objects as values', () => {
  72     component.data = [
  73       [3, 'something'],
  74       ['will be removed', { a: 3, b: 4, c: 5 }]
  75     ];
  76     component.ngOnInit();
  77     expect(component.tableData).toEqual(<any>[{ key: 3, value: 'something' }]);
  78   });
  79
  80   it('makes key value object pairs out of an object', () => {
  81     component.data = { 3: 'something', someKey: 0 };
  82     component.ngOnInit();
  83     expect(component.tableData).toEqual([
  84       { key: '3', value: 'something' },
  85       { key: 'someKey', value: 0 }
  86     ]);
  87   });
  88
  89   it('does nothing if data does not need to be converted', () => {
  90     component.data = [
  91       { key: 3, value: 'something' },
  92       { key: 'someKey', value: 0 }
  93     ];
  94     component.ngOnInit();
  95     expect(component.tableData).toEqual(component.data);
  96   });
  97
  98   it('throws errors if data cannot be converted', () => {
  99     component.data = 38;
 100     expect(() => component.ngOnInit()).toThrowError('Wrong data format');
 101     component.data = [['someKey', 0, 3]];
 102     expect(() => component.ngOnInit()).toThrowError(
 103       'Array contains too many elements (3). Needs to be of type [string, any][]'
 104     );
 105   });
 106
 107   it('tests makePairs()', () => {
 108     const makePairs = (data: any) => component['makePairs'](data);
 109     expect(makePairs([['dash', 'board']])).toEqual([{ key: 'dash', value: 'board' }]);
 110     const pair = [
 111       { key: 'dash', value: 'board' },
 112       { key: 'ceph', value: 'mimic' }
 113     ];
 114     const pairInverse = [
 115       { key: 'ceph', value: 'mimic' },
 116       { key: 'dash', value: 'board' }
 117     ];
 118     expect(makePairs(pair)).toEqual(pairInverse);
 119     expect(makePairs({ dash: 'board' })).toEqual([{ key: 'dash', value: 'board' }]);
 120     expect(makePairs({ dash: 'board', ceph: 'mimic' })).toEqual(pairInverse);
 121   });
 122
 123   it('tests makePairsFromArray()', () => {
 124     const makePairsFromArray = (data: any[]) => component['makePairsFromArray'](data);
 125     expect(makePairsFromArray([['dash', 'board']])).toEqual([{ key: 'dash', value: 'board' }]);
 126     const pair = [
 127       { key: 'dash', value: 'board' },
 128       { key: 'ceph', value: 'mimic' }
 129     ];
 130     expect(makePairsFromArray(pair)).toEqual(pair);
 131   });
 132
 133   it('tests makePairsFromObject()', () => {
 134     const makePairsFromObject = (data: object) => component['makePairsFromObject'](data);
 135     expect(makePairsFromObject({ dash: 'board' })).toEqual([{ key: 'dash', value: 'board' }]);
 136     expect(makePairsFromObject({ dash: 'board', ceph: 'mimic' })).toEqual([
 137       { key: 'dash', value: 'board' },
 138       { key: 'ceph', value: 'mimic' }
 139     ]);
 140   });
 141
 142   describe('tests convertValue()', () => {
 143     const convertValue = (data: any) => component['convertValue'](data);
 144     const expectConvertValue = (value: any, expectation: any) =>
 145       expect(convertValue(value)).toBe(expectation);
 146
 147     it('should not convert strings', () => {
 148       expectConvertValue('something', 'something');
 149     });
 150
 151     it('should not convert integers', () => {
 152       expectConvertValue(29, 29);
 153     });
 154
 155     it('should convert arrays with any type to strings', () => {
 156       expectConvertValue([1, 2, 3], '1, 2, 3');
 157       expectConvertValue([{ sth: 'something' }], '{"sth":"something"}');
 158       expectConvertValue([1, 'two', { 3: 'three' }], '1, two, {"3":"three"}');
 159     });
 160
 161     it('should only convert objects if renderObjects is set to true', () => {
 162       expect(convertValue({ sth: 'something' })).toBe(null);
 163       component.renderObjects = true;
 164       expect(convertValue({ sth: 'something' })).toEqual({ sth: 'something' });
 165     });
 166   });
 167
 168   describe('automatically pipe UTC dates through cdDate', () => {
 169     let datePipe: CdDatePipe;
 170
 171     beforeEach(() => {
 172       datePipe = TestBed.inject(CdDatePipe);
 173       spyOn(datePipe, 'transform').and.callThrough();
 174     });
 175
 176     const expectTimeConversion = (date: string) => {
 177       component.data = { dateKey: date };
 178       component.ngOnInit();
 179       expect(datePipe.transform).toHaveBeenCalledWith(date);
 180       expect(component.tableData[0].key).not.toBe(date);
 181     };
 182
 183     it('converts some date', () => {
 184       expectTimeConversion('2019-04-15 12:26:52.305285');
 185     });
 186
 187     it('converts UTC date', () => {
 188       expectTimeConversion('2019-04-16T12:35:46.646300974Z');
 189     });
 190   });
 191
 192   describe('render objects', () => {
 193     beforeEach(() => {
 194       component.data = {
 195         options: {
 196           numberKey: 38,
 197           stringKey: 'somethingElse',
 198           objectKey: {
 199             sub1: 12,
 200             sub2: 34,
 201             sub3: 56
 202           }
 203         },
 204         otherOptions: {
 205           sub1: {
 206             x: 42
 207           },
 208           sub2: {
 209             y: 555
 210           }
 211         },
 212         additionalKeyContainingObject: { type: 'none' },
 213         keyWithEmptyObject: {}
 214       };
 215       component.renderObjects = true;
 216     });
 217
 218     it('with parent key', () => {
 219       component.ngOnInit();
 220       expect(component.tableData).toEqual([
 221         { key: 'additionalKeyContainingObject type', value: 'none' },
 222         { key: 'keyWithEmptyObject', value: '' },
 223         { key: 'options numberKey', value: 38 },
 224         { key: 'options objectKey sub1', value: 12 },
 225         { key: 'options objectKey sub2', value: 34 },
 226         { key: 'options objectKey sub3', value: 56 },
 227         { key: 'options stringKey', value: 'somethingElse' },
 228         { key: 'otherOptions sub1 x', value: 42 },
 229         { key: 'otherOptions sub2 y', value: 555 }
 230       ]);
 231     });
 232
 233     it('without parent key', () => {
 234       component.appendParentKey = false;
 235       component.ngOnInit();
 236       expect(component.tableData).toEqual([
 237         { key: 'keyWithEmptyObject', value: '' },
 238         { key: 'numberKey', value: 38 },
 239         { key: 'stringKey', value: 'somethingElse' },
 240         { key: 'sub1', value: 12 },
 241         { key: 'sub2', value: 34 },
 242         { key: 'sub3', value: 56 },
 243         { key: 'type', value: 'none' },
 244         { key: 'x', value: 42 },
 245         { key: 'y', value: 555 }
 246       ]);
 247     });
 248   });
 249
 250   describe('subscribe fetchData', () => {
 251     it('should not subscribe fetchData of table', () => {
 252       component.ngOnInit();
 253       expect(component.table.fetchData.observers.length).toBe(0);
 254     });
 255
 256     it('should call fetchData', () => {
 257       let called = false;
 258       component.fetchData.subscribe(() => {
 259         called = true;
 260       });
 261       component.ngOnInit();
 262       expect(component.table.fetchData.observers.length).toBe(1);
 263       component.table.fetchData.emit();
 264       expect(called).toBeTruthy();
 265     });
 266   });
 267
 268   describe('hide empty items', () => {
 269     beforeEach(() => {
 270       component.data = {
 271         booleanFalse: false,
 272         booleanTrue: true,
 273         string: '',
 274         array: [],
 275         object: {},
 276         emptyObject: {
 277           string: '',
 278           array: [],
 279           object: {}
 280         },
 281         someNumber: 0,
 282         someDifferentNumber: 1,
 283         someArray: [0, 1],
 284         someString: '0',
 285         someObject: {
 286           empty: {},
 287           something: 0.1
 288         }
 289       };
 290       component.renderObjects = true;
 291     });
 292
 293     it('should show all items as default', () => {
 294       expect(component.hideEmpty).toBe(false);
 295       component.ngOnInit();
 296       expect(component.tableData).toEqual([
 297         { key: 'array', value: '' },
 298         { key: 'booleanFalse', value: false },
 299         { key: 'booleanTrue', value: true },
 300         { key: 'emptyObject array', value: '' },
 301         { key: 'emptyObject object', value: '' },
 302         { key: 'emptyObject string', value: '' },
 303         { key: 'object', value: '' },
 304         { key: 'someArray', value: '0, 1' },
 305         { key: 'someDifferentNumber', value: 1 },
 306         { key: 'someNumber', value: 0 },
 307         { key: 'someObject empty', value: '' },
 308         { key: 'someObject something', value: 0.1 },
 309         { key: 'someString', value: '0' },
 310         { key: 'string', value: '' }
 311       ]);
 312     });
 313
 314     it('should hide all empty items', () => {
 315       component.hideEmpty = true;
 316       component.ngOnInit();
 317       expect(component.tableData).toEqual([
 318         { key: 'booleanFalse', value: false },
 319         { key: 'booleanTrue', value: true },
 320         { key: 'someArray', value: '0, 1' },
 321         { key: 'someDifferentNumber', value: 1 },
 322         { key: 'someNumber', value: 0 },
 323         { key: 'someObject something', value: 0.1 },
 324         { key: 'someString', value: '0' }
 325       ]);
 326     });
 327   });
 328
 329   describe('columns set up', () => {
 330     let columns: CdTableColumn[];
 331
 332     beforeEach(() => {
 333       columns = [
 334         { prop: 'key', flexGrow: 1, cellTransformation: CellTemplate.bold },
 335         { prop: 'value', flexGrow: 3 }
 336       ];
 337     });
 338
 339     it('should have the following default column set up', () => {
 340       component.ngOnInit();
 341       expect(component.columns).toEqual(columns);
 342     });
 343
 344     it('should have the following column set up if customCss is defined', () => {
 345       component.customCss = { 'class-name': 42 };
 346       component.ngOnInit();
 347       columns[1].cellTransformation = CellTemplate.classAdding;
 348       expect(component.columns).toEqual(columns);
 349     });
 350   });
 351 });