Fixing Tree and TreeGrid tests.

Author: MayaKirova

src/igtreegrid/igtreegrid.component.ts

@@ -40,7 +40,15 @@ export class IgTreeGridComponent extends IgGridBase<IgTreeGrid> {
 		} else {
 			super.updateRow(rec, currValue, key);
 		}
-	}	
+	}
+
+	public markForCheck(){
+		super.markForCheck();
+		const childDataKey = this["childDataKey"] || this.options.childDataKey;
+		if (childDataKey) {
+			this.dataBind();
+		}
+	}
 
 	/**
  	 * Clears the transaction log (delegates to igDataSource). Note that this does not update the UI. In case the UI must be updated, set the second parameter "updateUI" to true, which will trigger a call to dataBind() to re-render the contents.

tests/unit/igtree/igtree.spec.ts

@@ -14,7 +14,7 @@ export function main() {
         });
 
         it('should initialize correctly', (done) => {
-            var template = '<div><ig-tree [(widgetId)]="treeID" [(options)]="opts" [changeDetectionInterval]="cdi"></ig-tree></div>';
+            var template = '<div><ig-tree [(widgetId)]="treeID" [(options)]="opts" [dataSource]="data"></ig-tree></div>';
             TestBed.overrideComponent(TestComponent, {
                 set: {
                     template: template
@@ -30,7 +30,7 @@ export function main() {
         });
 
         it('should reflect changes when a record in the data changes', (done) => {
-                var template = '<div><ig-tree [(widgetId)]="treeID" [(options)]="opts" [changeDetectionInterval]="cdi"></ig-tree></div>';
+                var template = '<div><ig-tree [(widgetId)]="treeID" [(options)]="opts" [dataSource]="data"></ig-tree></div>';
                 TestBed.overrideComponent(TestComponent, {
                 set: {
                     template: template
@@ -50,7 +50,7 @@ export function main() {
         });
 
         it('should reflect changes when a record is added/removed from the data', (done) => {
-            var template = '<div><ig-tree [(widgetId)]="treeID" [(options)]="opts" [changeDetectionInterval]="cdi"></ig-tree></div>';
+            var template = '<div><ig-tree [(widgetId)]="treeID" [(options)]="opts" [dataSource]="data"></ig-tree></div>';
             TestBed.overrideComponent(TestComponent, {
                 set: {
                     template: template
@@ -122,7 +122,7 @@ class TestComponent {
         this.data = ProductCategories.getData();
 
         this.opts = {
-            dataSource: this.data,
+            //dataSource: this.data,
             bindings: {
                 childDataProperty: "ProductSubcategories",
                 textKey: "Name",

tests/unit/igtreegrid/treegrid.spec.ts

@@ -14,7 +14,7 @@ export function main() {
         });
 
         it('should initialize correctly', (done) => {
-            var template = '<div><ig-tree-grid [(widgetId)]="gridID" [(options)]="opts" [changeDetectionInterval]="cdi"></ig-tree-grid></div>';
+            var template = '<div><ig-tree-grid [(widgetId)]="gridID" [(options)]="opts" [dataSource]="data"></ig-tree-grid></div>';
             TestBed.overrideComponent(TestComponent, {
                 set: {
                     template: template
@@ -30,7 +30,7 @@ export function main() {
         });
 
         it('should reflect changes when a record in the data changes', (done) => {
-            var template = '<div><ig-tree-grid [(widgetId)]="gridID" [(options)]="opts" [changeDetectionInterval]="cdi"></ig-tree-grid></div>';
+            var template = '<div><ig-tree-grid [(widgetId)]="gridID" [(options)]="opts" [dataSource]="data"></ig-tree-grid></div>';
             TestBed.overrideComponent(TestComponent, {
                 set: {
                     template: template
@@ -39,6 +39,8 @@ export function main() {
             TestBed.compileComponents().then(() => {
                 let fixture = TestBed.createComponent(TestComponent);
                 fixture.detectChanges();
+                fixture.componentInstance.data[0].tasks = "";
+                fixture.detectChanges();
                 fixture.componentInstance.data[0].tasks = "Test";
                 fixture.detectChanges();
                 setTimeout(() => {
@@ -51,7 +53,7 @@ export function main() {
         });
 
         it('should reflect changes when a record is added/removed from the data', (done) => {
-            var template = '<div><ig-tree-grid [(widgetId)]="gridID" [(options)]="opts" [changeDetectionInterval]="cdi"></ig-tree-grid></div>';
+            var template = '<div><ig-tree-grid [(widgetId)]="gridID" [(options)]="opts" [dataSource]="data"></ig-tree-grid></div>';
             TestBed.overrideComponent(TestComponent, {
                 set: {
                     template: template
@@ -62,6 +64,8 @@ export function main() {
                 fixture.detectChanges();
                 //remove item
                 fixture.componentInstance.data[0].products.removeAt(4);
+                
+                fixture.componentInstance.viewChild.markForCheck();
 
                 setTimeout(() => {
                     fixture.detectChanges();
@@ -83,7 +87,7 @@ export function main() {
         });
 
         it('should reflect changes when the root record is removed', (done) => {
-            var template = '<div><ig-tree-grid [(widgetId)]="gridID" [(options)]="opts" [changeDetectionInterval]="cdi"></ig-tree-grid></div>';
+            var template = '<div><ig-tree-grid [(widgetId)]="gridID" [(options)]="opts" [dataSource]="data"></ig-tree-grid></div>';
             TestBed.overrideComponent(TestComponent, {
                 set: {
                     template: template
@@ -105,7 +109,7 @@ export function main() {
         });
 
         it('should reflect changes when records in the treegrid are updated/added/deleted', (done) => {
-            var template = '<div><ig-tree-grid [(widgetId)]="gridID" [(options)]="opts" [changeDetectionInterval]="cdi"></ig-tree-grid></div>';
+            var template = '<div><ig-tree-grid [(widgetId)]="gridID" [(options)]="opts" [dataSource]="data"></ig-tree-grid></div>';
             TestBed.overrideComponent(TestComponent, {
                 set: {
                     template: template
@@ -114,7 +118,6 @@ export function main() {
             TestBed.compileComponents().then(() => {
                 let fixture = TestBed.createComponent(TestComponent);
                 fixture.detectChanges();
-
                 //update row
                 $("#grid1").igTreeGridUpdating("updateRow", 0, { tasks: "Updated Plan" });
                 setTimeout(() => {
@@ -163,7 +166,7 @@ export function main() {
 
 
         it("should detect changes when original data source is changed but the data source length is the same.", (done) => {
-			var template = '<ig-tree-grid [(widgetId)]="gridID" [(options)]="optsNew"></ig-tree-grid>';		
+			var template = '<ig-tree-grid [(widgetId)]="gridID" [(options)]="optsNew" [dataSource]="singleRecData"></ig-tree-grid>';		
 			TestBed.overrideComponent(TestComponent, {
 				set: {
 					template: template
@@ -207,7 +210,7 @@ class TestComponent {
 		this.singleRecData2 = [{ "id": 1, "tasks": "Test" }];
         this.opts = {
             autoCommit: true,
-            dataSource: this.data,
+            //dataSource: this.data,
             width: "100%",
             height: "400px",
             autoGenerateColumns: false,