test(filtering): Adding test #9333

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

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

Author: astaev

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

@@ -47,6 +47,7 @@ import {
 import { GridSelectionMode, FilterMode } from '../common/enums';
 import { ControlsFunction } from '../../test-utils/controls-functions.spec';
 import localeFR from '@angular/common/locales/fr';
+import { IgxInputGroupComponent } from '../../input-group/public_api';
 
 const DEBOUNCETIME = 30;
 const FILTER_UI_ROW = 'igx-grid-filtering-row';
@@ -2116,6 +2117,28 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             // Verify filtered data
             expect(grid.filteredData).toBeNull();
         }));
+
+        it('Should remove pending chip via its close button #9333', fakeAsync(() => {
+            GridFunctions.clickFilterCellChipUI(fix, 'Downloads');
+            fix.detectChanges();
+
+            GridFunctions.typeValueInFilterRowInput('3', fix);
+            tick(DEBOUNCETIME);
+            const inputGroup = fix.debugElement.query(By.directive(IgxInputGroupComponent));
+            const filterRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent));
+            const pendingChip = filterRow.queryAll(By.directive(IgxChipComponent))[0];
+            const chipCloseButton = pendingChip.query(By.css('div.igx-chip__remove')).nativeElement;
+
+            chipCloseButton.dispatchEvent(new Event('mousedown'));
+            inputGroup.nativeElement.dispatchEvent(new Event('focusout'));
+            chipCloseButton.dispatchEvent(new Event('mouseup'));
+            chipCloseButton.dispatchEvent(new Event('click'));
+            tick(DEBOUNCETIME);
+            fix.detectChanges();
+
+            const chips = filterRow.queryAll(By.directive(IgxChipComponent));
+            expect(chips.length).toEqual(0, 'No chips should be present');
+        }));
     });
 
     describe('Integration scenarios', () => {