Emit onColumnVisibilityChanged when hiding a column through ESF UI. #…

…4765 (#4792)

* fix(ESF): #4765 Updated hiding test.

* fix(ESF): #4765 Emit onColumnVisibilityChanged event on hide.

projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts

@@ -242,6 +242,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterView
 
     public onHide() {
         this.column.hidden = true;
+        this.grid.onColumnVisibilityChanged.emit({ column: this.column, newValue: true });
         this.closeDropdown();
     }
 

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

@@ -2821,7 +2821,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
         UIInteractions.clearOverlay();
     });
 
-    it('Should sorts the grid properly, when clicking Ascending/Descending buttons.', fakeAsync(() => {
+    it('Should sort the grid properly, when clicking Ascending/Descending buttons.', fakeAsync(() => {
 
         grid.columns[2].sortable = true;
         fix.detectChanges();
@@ -2947,17 +2947,18 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
     it('Should hide column when click on button.', fakeAsync(() => {
         const headers: DebugElement[] = fix.debugElement.queryAll(By.directive(IgxGridHeaderGroupComponent));
         const headerResArea = headers[2].children[0].nativeElement;
-
         const filterIcon = headerResArea.querySelector('.igx-excel-filter__icon');
         filterIcon.click();
         fix.detectChanges();
 
         const excelMenu = grid.nativeElement.querySelector('.igx-excel-filter__menu');
         const hideComponent = excelMenu.querySelector('.igx-excel-filter__actions-hide');
 
+        spyOn(grid.onColumnVisibilityChanged, 'emit');
         hideComponent.click();
         fix.detectChanges();
 
+        expect(grid.onColumnVisibilityChanged.emit).toHaveBeenCalledTimes(1);
         expect(grid.columns[2].hidden).toBeTruthy();
     }));