diff --git a/packages/stark-ui/src/modules/table/components/table.component.spec.ts b/packages/stark-ui/src/modules/table/components/table.component.spec.ts index a56c23cbcf..76c5101975 100644 --- a/packages/stark-ui/src/modules/table/components/table.component.spec.ts +++ b/packages/stark-ui/src/modules/table/components/table.component.spec.ts @@ -49,8 +49,6 @@ class TestHostComponent { public tableComponent: StarkTableComponent; public columnProperties: StarkTableColumnProperties[]; - // FIXME Currently, if no data is set on the init of the stark-table component, it breaks the component and its tests. - // More info on: https://github.com/NationalBankBelgium/stark/issues/1087 public dummyData: object[] = []; public fixedHeader?: string; public rowsSelectable?: boolean; @@ -1105,4 +1103,32 @@ describe("TableComponent", () => { expect(component.selectChanged.emit).toHaveBeenCalledWith([dummyData[0]]); }); }); + + describe("async", () => { + const dummyData: object[] = [ + { id: 1, description: "dummy 1" }, + { id: 2, description: "dummy 2" }, + { id: 3, description: "dummy 3" } + ]; + + beforeEach(() => { + hostComponent.columnProperties = [{ name: "id" }, { name: "description" }]; + hostComponent.dummyData = undefined; // data starts uninitialized + + hostFixture.detectChanges(); // trigger data binding + component.ngAfterViewInit(); + }); + + it("should update rows after async data fetch", () => { + const rowsBeforeData: NodeListOf = hostFixture.nativeElement.querySelectorAll("table tbody tr"); + expect(rowsBeforeData.length).toBe(0); + + // "async fetch of data resolves" + hostComponent.dummyData = dummyData; + hostFixture.detectChanges(); + + const rowsAfterData: NodeListOf = hostFixture.nativeElement.querySelectorAll("table tbody tr"); + expect(rowsAfterData.length).toBe(dummyData.length); + }); + }); }); diff --git a/packages/stark-ui/src/modules/table/components/table.component.ts b/packages/stark-ui/src/modules/table/components/table.component.ts index e3ea4e5bc7..78d91e3de7 100644 --- a/packages/stark-ui/src/modules/table/components/table.component.ts +++ b/packages/stark-ui/src/modules/table/components/table.component.ts @@ -409,17 +409,20 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI */ // tslint:disable-next-line:cognitive-complexity public ngOnChanges(changes: SimpleChanges): void { - if (changes["data"] && !changes["data"].isFirstChange()) { - if (this.resetFilterValueOnDataChange()) { - this.filterChanged.emit(this.filter); - this.applyFilter(); - } + if (changes["data"]) { + this.data = this.data || []; + if (!changes["data"].isFirstChange()) { + if (this.resetFilterValueOnDataChange()) { + this.filterChanged.emit(this.filter); + this.applyFilter(); + } - if (this.orderProperties instanceof Array && this.orderProperties.length) { - this.sortData(); - } + if (this.orderProperties instanceof Array && this.orderProperties.length) { + this.sortData(); + } - this.updateDataSource(); + this.updateDataSource(); + } } if (changes["orderProperties"] && !changes["orderProperties"].isFirstChange()) {