fix(stark-ui): fix table error when data not initialized

  - added test

ISSUES CLOSED: #1087

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 = <any>undefined; // data starts uninitialized
+
+			hostFixture.detectChanges(); // trigger data binding
+			component.ngAfterViewInit();
+		});
+
+		it("should update rows after async data fetch", () => {
+			const rowsBeforeData: NodeListOf<HTMLTableRowElement> = hostFixture.nativeElement.querySelectorAll("table tbody tr");
+			expect(rowsBeforeData.length).toBe(0);
+
+			// "async fetch of data resolves"
+			hostComponent.dummyData = dummyData;
+			hostFixture.detectChanges();
+
+			const rowsAfterData: NodeListOf<HTMLTableRowElement> = hostFixture.nativeElement.querySelectorAll("table tbody tr");
+			expect(rowsAfterData.length).toBe(dummyData.length);
+		});
+	});
 });

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()) {