chore(*): Split complex test in 2

One that tests for errors and another that tests
the visible chips in scroll area.

Author: MKirova

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

@@ -3257,12 +3257,11 @@ describe('IgxGrid - Filtering Row UI actions', () => {
 
         it('Should not throw error when deleting the last chip', (async () => {
             grid.width = '700px';
-            await wait(16);
             fix.detectChanges();
+            await wait(16);
 
             GridFunctions.clickFilterCellChip(fix, 'ProductName');
             fix.detectChanges();
-            await wait(16);
 
             // Add first chip.
             GridFunctions.typeValueInFilterRowInput('a', fix);
@@ -3287,7 +3286,7 @@ describe('IgxGrid - Filtering Row UI actions', () => {
 
             verifyMultipleChipsVisibility(fix, [false, false, false, true]);
             const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
-            let chips = filterUIRow.queryAll(By.directive(IgxChipComponent));
+            const chips = filterUIRow.queryAll(By.directive(IgxChipComponent));
             expect(chips.length).toBe(4);
 
             const leftArrowButton = GridFunctions.getFilterRowLeftArrowButton(fix).nativeElement;
@@ -3297,33 +3296,61 @@ describe('IgxGrid - Filtering Row UI actions', () => {
             expect(rightArrowButton).toBeTruthy('Right scroll arrow should be visible');
             expect(grid.rowList.length).toBe(2);
 
-            try {
-                GridFunctions.removeFilterChipByIndex(3, filterUIRow);
-                fix.detectChanges();
-                await wait(400);
-            } catch (ex) {
-                expect(ex).toBeNull('Error deleting the last chip');
-            }
+            let chipToRemove = filterUIRow.componentInstance.expressionsList[3];
+            expect(() => { filterUIRow.componentInstance.onChipRemoved(null, chipToRemove); })
+                .not.toThrowError(/\'id\' of undefined/);
+            fix.detectChanges();
+            await wait(500);
+            fix.detectChanges();
+
+            chipToRemove = filterUIRow.componentInstance.expressionsList[2];
+            expect(() => { filterUIRow.componentInstance.onChipRemoved(null, chipToRemove); })
+                .not.toThrowError(/\'id\' of undefined/);
             fix.detectChanges();
             await wait(100);
+        }));
+
+        it('should scroll correct chip in view when one is deleted', async() => {
+            grid.width = '700px';
+            fix.detectChanges();
+
+            GridFunctions.clickFilterCellChip(fix, 'ProductName');
+            fix.detectChanges();
+
+            GridFunctions.applyFilter('a', fix);
+            await wait(16);
+            GridFunctions.applyFilter('e', fix);
+            await wait(16);
+            GridFunctions.applyFilter('i', fix);
+            await wait(16);
+            GridFunctions.applyFilter('o', fix);
+            // wait for chip to be scrolled in view
+            await wait(200);
+            fix.detectChanges();
+            await wait(100);
+            verifyMultipleChipsVisibility(fix, [false, false, false, true]);
+
+            const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
+            GridFunctions.removeFilterChipByIndex(3, filterUIRow);
+            // wait for chip to be scrolled in view
+            fix.detectChanges();
+            await wait(200);
+
             verifyMultipleChipsVisibility(fix, [false, true, false]);
-            chips = filterUIRow.queryAll(By.directive(IgxChipComponent));
+            let chips = filterUIRow.queryAll(By.directive(IgxChipComponent));
             expect(chips.length).toBe(3);
 
-            try {
-                GridFunctions.removeFilterChipByIndex(2, filterUIRow);
-                fix.detectChanges();
-                await wait(400);
-            } catch (ex) {
-                expect(ex).toBeNull('Error deleting the last chip');
-            }
+            GridFunctions.removeFilterChipByIndex(2, filterUIRow);
             fix.detectChanges();
-            await wait(100);
+           // wait for chip to be scrolled in view
+           fix.detectChanges();
+           await wait(200);
+
             verifyMultipleChipsVisibility(fix, [true, false]);
             chips = filterUIRow.queryAll(By.directive(IgxChipComponent));
             expect(chips.length).toBe(2);
             expect(grid.rowList.length).toBe(3);
-        }));
+        });
 
         it('Should close filter row when hide the current column', (async () => {
             grid.height = '700px';

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

@@ -402,16 +402,8 @@ export class GridFunctions {
             }
         }
     }
-
-    public static filterBy(condition: string, value: string, fix: ComponentFixture<any>) {
+    public static applyFilter(value: string, fix: ComponentFixture<any>) {
         const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
-        // open dropdown
-        this.openFilterDD(fix.debugElement);
-        fix.detectChanges();
-
-        const ddList = fix.debugElement.query(By.css('div.igx-drop-down__list.igx-toggle'));
-        this.selectFilteringCondition(condition, ddList);
-
         const input = filterUIRow.query(By.directive(IgxInputDirective));
         input.nativeElement.value = value;
         input.nativeElement.dispatchEvent(new Event('keydown'));
@@ -424,6 +416,17 @@ export class GridFunctions {
         fix.detectChanges();
     }
 
+    public static filterBy(condition: string, value: string, fix: ComponentFixture<any>) {
+        // open dropdown
+        this.openFilterDD(fix.debugElement);
+        fix.detectChanges();
+
+        const ddList = fix.debugElement.query(By.css('div.igx-drop-down__list.igx-toggle'));
+        this.selectFilteringCondition(condition, ddList);
+
+       this.applyFilter(value, fix);
+    }
+
     public static typeValueInFilterRowInput(value: string, fix) {
         const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
         const input = filterUIRow.query(By.directive(IgxInputDirective));