Sync transaction and validation services when transactions are all cleared with clear API. Add a test. Update the failing one.

Author: mddragnev

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -1558,7 +1558,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * ```
      */
     public set sortDescendingHeaderIconTemplate(template: TemplateRef<IgxGridHeaderTemplateContext>) {
-            this._sortDescendingHeaderIconTemplate = template;
+        this._sortDescendingHeaderIconTemplate = template;
     }
 
     /**
@@ -4445,12 +4445,12 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     public recalculateAutoSizes() {
         // reset auto-size and calculate it again.
-            this._columns.forEach( x => x.autoSize = undefined);
-            this.resetCaches();
-            this.zone.onStable.pipe(first()).subscribe(() => {
-                this.cdr.detectChanges();
-                this.autoSizeColumnsInView();
-            });
+        this._columns.forEach(x => x.autoSize = undefined);
+        this.resetCaches();
+        this.zone.onStable.pipe(first()).subscribe(() => {
+            this.cdr.detectChanges();
+            this.autoSizeColumnsInView();
+        });
     }
 
     /**
@@ -6515,7 +6515,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
                 }
 
             });
+        } else if (event.origin === TransactionEventOrigin.CLEAR) {
+            this.validation.clear();
         }
+
         this.selectionService.clearHeaderCBState();
         this.summaryService.clearSummaryCache();
         this.pipeTrigger++;
@@ -7062,8 +7065,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.tbody.nativeElement.style.display = 'none';
         const parentElement = this.nativeElement.parentElement || (this.nativeElement.getRootNode() as any).host;
         let res = !parentElement ||
-        parentElement.clientHeight === 0 ||
-        parentElement.clientHeight === renderedHeight;
+            parentElement.clientHeight === 0 ||
+            parentElement.clientHeight === renderedHeight;
         if ((!this.platform.isChromium && !this.platform.isFirefox) || this._autoSize) {
             // If grid causes the parent container to extend (for example when container is flex)
             // we should always auto-size since the actual size of the container will continuously change as the grid renders elements.

projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts

@@ -1715,11 +1715,13 @@ describe('IgxGrid - Row Editing #grid', () => {
             // On button click
             const doneButtonElement = GridFunctions.getRowEditingDoneButton(fix);
             doneButtonElement.click();
+            fix.detectChanges();
 
             const rowData = Object.assign({}, cell.row.data, { ProductName: 'New Name' });
             expect(!!grid.gridAPI.crudService.rowInEditMode).toEqual(true);
             expect(grid.gridAPI.crudService.cellInEditMode).toEqual(false);
-            expect(cell.row.data).not.toEqual(rowData);
+            expect(cell.row.data.ProductName).toEqual('New Name');
+            expect(grid.dataView[0]).not.toEqual(rowData);
         });
 
         it(`Should properly emit 'rowEdit' event - Button Click`, () => {

projects/igniteui-angular/src/lib/grids/grid/grid-validation.spec.ts

@@ -247,7 +247,7 @@ describe('IgxGrid - Validation #grid', () => {
             fixture.detectChanges();
 
             GridFunctions.verifyCellValid(cell, false);
-            expect(grid.validationStatusChange.emit).toHaveBeenCalledWith({ status: 'INVALID', owner: grid});
+            expect(grid.validationStatusChange.emit).toHaveBeenCalledWith({ status: 'INVALID', owner: grid });
 
             UIInteractions.simulateDoubleClickAndSelectEvent(cell.element);
             cell.editMode = true;
@@ -259,7 +259,7 @@ describe('IgxGrid - Validation #grid', () => {
             fixture.detectChanges();
 
             GridFunctions.verifyCellValid(cell, true);
-            expect(grid.validationStatusChange.emit).toHaveBeenCalledWith({ status: 'INVALID', owner: grid});
+            expect(grid.validationStatusChange.emit).toHaveBeenCalledWith({ status: 'INVALID', owner: grid });
         });
 
         it('should return invalid transaction using the transaction service API', () => {
@@ -407,7 +407,7 @@ describe('IgxGrid - Validation #grid', () => {
             const grid = fixture.componentInstance.grid as IgxGridComponent;
             let cell = grid.gridAPI.get_cell_by_visible_index(1, 1);
 
-            grid.updateCell('IG', 2,'ProductName');
+            grid.updateCell('IG', 2, 'ProductName');
             grid.validation.markAsTouched(2);
             fixture.detectChanges();
 
@@ -525,6 +525,44 @@ describe('IgxGrid - Validation #grid', () => {
             expect((grid.validation as any).getValidity().length).toEqual(0);
         });
 
+        it('should update validity when all transactions are cleared', () => {
+            const grid = fixture.componentInstance.grid as IgxGridComponent;
+            let cell = grid.gridAPI.get_cell_by_visible_index(1, 1);
+            let secondCell = grid.gridAPI.get_cell_by_visible_index(2, 1);
+
+            // update first cell
+            UIInteractions.simulateDoubleClickAndSelectEvent(cell.element);
+            cell.editMode = true;
+            cell.update('IG');
+            fixture.detectChanges();
+
+            grid.gridAPI.crudService.endEdit(true);
+            fixture.detectChanges();
+
+            GridFunctions.verifyCellValid(cell, false);
+
+            //update second cell
+            UIInteractions.simulateDoubleClickAndSelectEvent(secondCell.element);
+            secondCell.editMode = true;
+            secondCell.update('bob');
+            fixture.detectChanges();
+
+            grid.gridAPI.crudService.endEdit(true);
+            fixture.detectChanges();
+            GridFunctions.verifyCellValid(cell, false);
+            expect(grid.validation.getInvalid().length).toBe(2);
+
+
+            // clear transactions
+            grid.transactions.clear();
+            fixture.detectChanges();
+            expect(grid.validation.getInvalid().length).toBe(0);
+
+
+            grid.validation.clear();
+            fixture.detectChanges();
+        });
+
         it('should not show errors when the row is deleted', () => {
             const grid = fixture.componentInstance.grid as IgxGridComponent;
             let cell = grid.gridAPI.get_cell_by_visible_index(1, 1);