fix(stark-ui): fixed column issue with cellFormatter which is not cal…

…led when the rawValue is undefined ISSUES CLOSED: #1465
SuperITMan · Dec 18, 2019 · 82f0b6f · 82f0b6f
1 parent 080f13e
commit 82f0b6f
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 10 deletions.
diff --git a/packages/stark-ui/src/modules/table/components/column.component.ts b/packages/stark-ui/src/modules/table/components/column.component.ts
@@ -274,21 +274,19 @@ export class StarkTableColumnComponent extends AbstractStarkUiComponent implemen
 		let formattedValue = "";
 		const rawValue: any | undefined = this.getRawValue(row);
 
-		if (typeof rawValue !== "undefined") {
-			if (this.cellFormatter instanceof Function) {
-				formattedValue = this.cellFormatter(rawValue, row, this.name);
-			} else if (typeof rawValue === "number") {
-				return rawValue; // return already, no point in translating a number
-			} else {
-				formattedValue = rawValue.toString();
-			}
-		} else {
+		if (this.cellFormatter instanceof Function) {
+			formattedValue = this.cellFormatter(rawValue, row, this.name);
+		} else if (typeof rawValue === "undefined") {
 			return ""; // return already, no point in translating an empty string
+		} else if (typeof rawValue === "number") {
+			return rawValue; // return already, no point in translating a number
+		} else {
+			formattedValue = rawValue.toString();
 		}
 
-		return formattedValue;
 		// TODO: add translation feature
 		// return this.$translate.instant(formattedValue);
+		return formattedValue;
 	}
 
 	/**

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
@@ -1269,6 +1269,47 @@ describe("TableComponent", () => {
 		});
 	});
 
+	describe("setCellFormatter", () => {
+		const dummyData: object[] = [
+			{ id: 1, description: "dummy 1", test: "test-1" },
+			{ id: 2, test: "test-2" },
+			{ id: 3, description: "dummy 3" }
+		];
+
+		beforeEach(() => {
+			hostComponent.columnProperties = [
+				{ name: "id", cellFormatter: (value: any): string => (value === 1 ? "one" : "") },
+				{ name: "description", cellFormatter: (value: any): string => typeof value === "undefined" ? "-null-" : value },
+				{ name: "test" }
+			];
+			hostComponent.dummyData = dummyData;
+
+			hostFixture.detectChanges(); // trigger data binding
+			component.ngAfterViewInit();
+		});
+
+		it("should display 'ONE' instead of '1' when id == '1'", () => {
+			const rowIdElements = hostFixture.nativeElement.querySelectorAll("table tbody tr td.mat-column-id");
+
+			expect(rowIdElements.length).toBe(3);
+			expect(rowIdElements[0].innerText).toEqual("one");
+		});
+
+		it("should display '-null-' when 'description' is undefined", () => {
+			const rowIdElements = hostFixture.nativeElement.querySelectorAll("table tbody tr td.mat-column-description");
+
+			expect(rowIdElements.length).toBe(3);
+			expect(rowIdElements[1].innerText).toEqual("-null-");
+		});
+
+		it("should NOT display anything when 'test' is undefined and no 'cellFormatter' property is set for the column", () => {
+			const rowIdElements = hostFixture.nativeElement.querySelectorAll("table tbody tr td.mat-column-test");
+
+			expect(rowIdElements.length).toBe(3);
+			expect(rowIdElements[2].innerText).toEqual("");
+		})
+	});
+
 	describe("setStyling", () => {
 		const dummyData: object[] = [
 			{ id: 1, description: "dummy 1" },