test(filtering): testing two-way binding for filtering expressions tree #6289

Author: igdmdimitrov

projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts

@@ -510,7 +510,7 @@ export class IgxFilteringService implements OnDestroy {
             return true;
         }
 
-        let expr: any; 
+        let expr: any;
 
         for (let i = 0; i < expressionTree.filteringOperands.length; i++) {
             expr = expressionTree.filteringOperands[i];

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

@@ -411,6 +411,23 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     @Output()
     public filteringExpressionsTreeChange = new EventEmitter<IFilteringExpressionsTree>();
 
+    /**
+     * Emitted after advanced filtering is performed.
+     * Returns the advanced filtering expressions tree.
+     * ```typescript
+     * advancedFilteringExprTreeChange(event: IFilteringExpressionsTree){
+     *     const filteringTree = event;
+     * }
+     * ```
+     * ```html
+     * <igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
+     *           (advancedFilteringExpressionsTreeChange)="advancedFilteringExprTreeChange($event)"></igx-grid>
+     * ```
+     * @memberof IgxGridBaseComponent
+     */
+    @Output()
+    public advancedFilteringExpressionsTreeChange = new EventEmitter<IFilteringExpressionsTree>();
+
     /**
      * Returns the advanced filtering state of `IgxGridComponent`.
      * ```typescript
@@ -454,6 +471,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         } else {
             this._advancedFilteringExpressionsTree = null;
         }
+        this.advancedFilteringExpressionsTreeChange.emit(this._advancedFilteringExpressionsTree);
 
         if (this.filteringService.isFilteringExpressionsTreeEmpty(this._advancedFilteringExpressionsTree) &&
             !this.advancedFilteringExpressionsTree) {

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

@@ -2697,32 +2697,26 @@ describe('IgxGrid - Advanced Filtering', () => {
 
     describe('IgxGrid - Advanced filtering expression tree bindings #grid', () => {
         let fix, grid: IgxGridComponent;
-
         beforeEach(fakeAsync(() => {
             fix = TestBed.createComponent(IgxGridAdvancedFilteringBindingComponent);
-            grid = fix.componentInstance.grid;
             fix.detectChanges();
+            grid = fix.componentInstance.grid;
         }));
 
         it('should correctly filter with \'advancedFilteringExpressionsTree\' binding', fakeAsync(() => {
             // Verify initially filtered in Advanced Filtering - 'Downloads > 200'
             expect(grid.filteredData.length).toEqual(3);
             expect(grid.rowList.length).toBe(3);
 
-            // Open Advanced Filtering dialog
-            GridFunctions.clickAdvancedFilteringButton(fix);
-            fix.detectChanges();
-
-            // Verify the content of the first child (expression) of the root group.
-            verifyExpressionChipContent(fix, [0], 'Downloads', 'Greater Than', '200');
+            // Verify filtering expressions tree binding state
+            expect(grid.advancedFilteringExpressionsTree).toBe(fix.componentInstance.filterTree);
 
-            // Clear the filters
-            GridFunctions.clickAdvancedFilteringClearFilterButton(fix);
+            // Clear filter
+            grid.advancedFilteringExpressionsTree = null;
             fix.detectChanges();
 
-            // Close the dialog
-            GridFunctions.clickAdvancedFilteringApplyButton(fix);
-            fix.detectChanges();
+            // Verify filtering expressions tree binding state
+            expect(grid.advancedFilteringExpressionsTree).toBe(fix.componentInstance.filterTree);
 
             // Verify no filtered data
             expect(grid.filteredData).toBe(null);

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

@@ -677,7 +677,7 @@ describe('IgxGrid - Filtering expression tree bindings #grid', () => {
         .compileComponents();
     }));
 
-    let fix, grid;
+    let fix, grid: IgxGridComponent;
     beforeEach(fakeAsync(() => {
         fix = TestBed.createComponent(IgxGridFilteringBindingComponent);
         fix.detectChanges();
@@ -689,10 +689,16 @@ describe('IgxGrid - Filtering expression tree bindings #grid', () => {
         expect(grid.rowList.length).toEqual(3);
         expect(grid.filteringExpressionsTree.filteringOperands.length).toEqual(1);
 
+        // Verify filtering expressions tree binding state
+        expect(grid.filteringExpressionsTree).toBe(fix.componentInstance.filterTree);
+
         // Clear filter
         grid.clearFilter('Downloads');
         fix.detectChanges();
 
+        // Verify filtering expressions tree binding state
+        expect(grid.filteringExpressionsTree).toBe(fix.componentInstance.filterTree);
+
         // Verify no filtered data
         expect(grid.rowList.length).toEqual(8);
         expect(grid.filteringExpressionsTree.filteringOperands.length).toEqual(0);

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -1549,7 +1549,7 @@ export class GridWithUndefinedDataComponent implements OnInit  {
 
 @Component({
     template: `
-    <igx-grid [data]="data" height="500px" [allowFiltering]='true' [filteringExpressionsTree]="filterTree">
+    <igx-grid [data]="data" height="500px" [allowFiltering]='true' [(filteringExpressionsTree)]="filterTree">
         <igx-column width="100px" [field]="'ID'" [header]="'ID'" [hasSummary]="true" [filterable]="false" [resizable]="resizable">
         </igx-column>
         <igx-column width="100px" [field]="'ProductName'" [filterable]="filterable" [resizable]="resizable" dataType="string"></igx-column>
@@ -1579,7 +1579,7 @@ export class IgxGridFilteringBindingComponent extends BasicGridComponent impleme
 @Component({
     template: `
     <igx-grid [data]="data" height="500px" [allowAdvancedFiltering]="true" [showToolbar]="true"
-        [advancedFilteringExpressionsTree]="filterTree" >
+        [(advancedFilteringExpressionsTree)]="filterTree" >
         <igx-column width="100px" [field]="'ID'" [header]="'ID'" [hasSummary]="true" [filterable]="false" [resizable]="resizable">
         </igx-column>
         <igx-column width="100px" [field]="'ProductName'" [filterable]="filterable" [resizable]="resizable" dataType="string"></igx-column>