diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index 5345bc34424..60c11c2380c 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -1064,8 +1064,8 @@ describe('igxCombo', () => { expect(dropdown.nativeElement.getAttribute('aria-labelledby')).toEqual(combo.placeholder); combo.open(); - tick(); fixture.detectChanges(); + tick(); const searchInput = fixture.debugElement.query(By.css(CSS_CLASS_SEARCHINPUT)); expect(searchInput.nativeElement.getAttribute('role')).toEqual('searchbox'); @@ -1077,8 +1077,8 @@ describe('igxCombo', () => { expect(list.nativeElement.getAttribute('aria-activedescendant')).toEqual(null); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', list); - tick(); fixture.detectChanges(); + tick(); expect(list.nativeElement.getAttribute('aria-activedescendant')).toEqual(combo.dropdown.focusedItem.id); combo.select(['Illinois', 'Mississippi', 'Ohio']); @@ -1088,12 +1088,12 @@ describe('igxCombo', () => { it('should render aria-expanded attribute properly', fakeAsync(() => { expect(input.nativeElement.getAttribute('aria-expanded')).toMatch('false'); combo.open(); - tick(); fixture.detectChanges(); + tick(); expect(input.nativeElement.getAttribute('aria-expanded')).toMatch('true'); combo.close(); - tick(); fixture.detectChanges(); + tick(); expect(input.nativeElement.getAttribute('aria-expanded')).toMatch('false'); })); it('should render placeholder values for inputs properly', () => { @@ -1126,8 +1126,8 @@ describe('igxCombo', () => { fixture.componentInstance.size = "large"; fixture.detectChanges(); combo.toggle(); - tick(); fixture.detectChanges(); + tick(); const dropdownItems = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`)); const dropdownList = fixture.debugElement.query(By.css(`.${CSS_CLASS_CONTENT}`)); @@ -1242,15 +1242,15 @@ describe('igxCombo', () => { }); it('should focus search input', fakeAsync(() => { combo.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(document.activeElement).toEqual(combo.searchInput.nativeElement); })); it('should not focus search input, when autoFocusSearch=false', fakeAsync(() => { combo.autoFocusSearch = false; combo.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(document.activeElement).not.toEqual(combo.searchInput.nativeElement); })); it('should properly initialize templates', () => { @@ -1345,8 +1345,8 @@ describe('igxCombo', () => { expect(containerElementWidth).toEqual(wrapperWidth); combo.toggle(); - tick(); fixture.detectChanges(); + tick(); const inputElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_INPUTGROUP_WRAPPER}`)).nativeElement; const dropDownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROPDOWNLIST_SCROLL}`)).nativeElement; containerElementWidth = containerElement.getBoundingClientRect().width; @@ -1370,8 +1370,8 @@ describe('igxCombo', () => { expect(wrapperWidth).toEqual(comboWidth); combo.toggle(); - tick(); fixture.detectChanges(); + tick(); let inputElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_INPUTGROUP_WRAPPER}`)).nativeElement; let dropDownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROPDOWNLIST_SCROLL}`)).nativeElement; @@ -1385,16 +1385,16 @@ describe('igxCombo', () => { expect(inputWidth).toEqual(comboWidth); combo.toggle(); - tick(); fixture.detectChanges(); + tick(); comboWidth = '700px'; combo.width = comboWidth; fixture.detectChanges(); combo.toggle(); - tick(); fixture.detectChanges(); + tick(); comboWrapper = fixture.debugElement.query(By.css(CSS_CLASS_COMBO)).nativeElement; inputElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_INPUTGROUP_WRAPPER}`)).nativeElement; @@ -1668,8 +1668,8 @@ describe('igxCombo', () => { expect(dropdown.focusedItem).toEqual(null); expect(combo.collapsed).toBeTruthy(); combo.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(document.activeElement).toEqual(combo.searchInput.nativeElement); expect(combo.collapsed).toBeFalsy(); combo.handleKeyUp(UIInteractions.getKeyboardEvent('keyup', 'ArrowDown')); @@ -1784,8 +1784,8 @@ describe('igxCombo', () => { }); it('should properly handle dropdown.focusItem', fakeAsync(() => { combo.toggle(); - tick(); fixture.detectChanges(); + tick(); const virtualSpyUP = spyOn(dropdown, 'navigatePrev'); const virtualSpyDOWN = spyOn(dropdown, 'navigateNext'); spyOn(IgxComboDropDownComponent.prototype, 'navigateItem').and.callThrough(); @@ -1802,8 +1802,8 @@ describe('igxCombo', () => { })); it('should handle keyboard events', fakeAsync(() => { combo.toggle(); - tick(); fixture.detectChanges(); + tick(); spyOn(combo, 'selectAllItems'); spyOn(combo, 'toggle'); spyOn(combo.dropdown, 'onFocus').and.callThrough(); @@ -1825,15 +1825,15 @@ describe('igxCombo', () => { it('should toggle combo dropdown on toggle button click', fakeAsync(() => { spyOn(combo, 'toggle').and.callThrough(); input.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); expect(combo.collapsed).toEqual(false); expect(combo.toggle).toHaveBeenCalledTimes(1); expect(document.activeElement).toEqual(combo.searchInput.nativeElement); input.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); expect(combo.collapsed).toEqual(true); expect(combo.toggle).toHaveBeenCalledTimes(2); })); @@ -1950,8 +1950,8 @@ describe('igxCombo', () => { const dropdownContent = fixture.debugElement.query(By.css(`.${CSS_CLASS_CONTENT}`)); UIInteractions.triggerEventHandlerKeyDown('Tab', dropdownContent); - tick(); fixture.detectChanges(); + tick(); expect(combo.collapsed).toBeTruthy(); })); }); @@ -2288,14 +2288,14 @@ describe('igxCombo', () => { const toggleBtn = fixture.debugElement.query(By.css(`.${CSS_CLASS_TOGGLEBUTTON}`)); UIInteractions.triggerEventHandlerKeyDown('Enter', toggleBtn); - tick(); fixture.detectChanges(); + tick(); expect(combo.toggle).toHaveBeenCalledTimes(1); expect(combo.collapsed).toEqual(false); UIInteractions.triggerEventHandlerKeyDown('Enter', toggleBtn); - tick(); fixture.detectChanges(); + tick(); expect(combo.toggle).toHaveBeenCalledTimes(2); expect(combo.collapsed).toEqual(true); })); @@ -2454,8 +2454,8 @@ describe('igxCombo', () => { const dropdown = combo.dropdown; dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); const dropdownContent = fixture.debugElement.query(By.css(`.${CSS_CLASS_CONTENT}`)); UIInteractions.simulateTyping('Mississippi ', input); @@ -2465,14 +2465,13 @@ describe('igxCombo', () => { combo.handleKeyUp(UIInteractions.getKeyboardEvent('keyup', 'ArrowDown')); fixture.detectChanges(); - tick(); - fixture.detectChanges(); + tick(); UIInteractions.triggerEventHandlerKeyDown('Space', dropdownContent); - tick(); fixture.detectChanges(); + tick(); combo.toggle(); - tick(); fixture.detectChanges(); + tick(); combo.onBlur(); tick(); fixture.detectChanges(); @@ -2603,8 +2602,8 @@ describe('igxCombo', () => { }); it('should group items correctly', fakeAsync(() => { combo.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(combo.groupKey).toEqual('region'); expect(combo.dropdown.items[0].value.field === combo.data[0].field).toBeFalsy(); const listItems = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`)); @@ -2621,8 +2620,8 @@ describe('igxCombo', () => { it('should properly handle click events on disabled/header items', fakeAsync(() => { spyOn(combo.dropdown, 'selectItem').and.callThrough(); combo.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(combo.collapsed).toBeFalsy(); expect(combo.dropdown.headers).toBeDefined(); expect(combo.dropdown.headers.length).toEqual(2); @@ -2976,8 +2975,8 @@ describe('igxCombo', () => { expect(dropdownItems.length).toEqual(3); UIInteractions.triggerEventHandlerKeyUp('Escape', searchInput); - tick(); fixture.detectChanges(); + tick(); expect(combo.collapsed).toBeTruthy(); expect(searchInput.nativeElement.textContent).toEqual(''); })); @@ -3105,25 +3104,25 @@ describe('igxCombo', () => { }); it('should enable/disable filtering at runtime', fakeAsync(() => { combo.open(); // Open combo - all data items are in filteredData - tick(); fixture.detectChanges(); + tick(); expect(combo.dropdown.items.length).toBeGreaterThan(0); const searchInput = fixture.debugElement.query(By.css(CSS_CLASS_SEARCHINPUT)); searchInput.nativeElement.value = 'Not-available item'; searchInput.triggerEventHandler('input', { target: searchInput.nativeElement }); - tick(); fixture.detectChanges(); + tick(); expect(combo.dropdown.items.length).toEqual(0); // No items are available because of filtering combo.close(); // Filter is cleared on close - tick(); fixture.detectChanges(); + tick(); combo.disableFiltering = true; // Filtering is disabled fixture.detectChanges(); combo.open(); // All items are visible since filtering is disabled - tick(); fixture.detectChanges(); + tick(); expect(combo.dropdown.items.length).toBeGreaterThan(0); // All items are visible since filtering is disabled combo.searchValue = 'Not-available item'; @@ -3132,13 +3131,13 @@ describe('igxCombo', () => { expect(combo.dropdown.items.length).toBeGreaterThan(0); // All items are visible since filtering is disabled combo.close(); // Filter is cleared on close - tick(); fixture.detectChanges(); + tick(); combo.disableFiltering = false; // Filtering is re-enabled fixture.detectChanges(); combo.open(); // Filter is cleared on open - tick(); fixture.detectChanges(); + tick(); expect(combo.dropdown.items.length).toBeGreaterThan(0); })); it(`should properly display "Add Item" button when filtering is off`, () => { @@ -3188,8 +3187,8 @@ describe('igxCombo', () => { }); it('Should filter the data when custom filterFunction is provided', fakeAsync(() => { combo.open(); - tick(); fixture.detectChanges(); + tick(); expect(combo.dropdown.items.length).toBeGreaterThan(0); combo.searchValue = 'new england'; @@ -3198,8 +3197,8 @@ describe('igxCombo', () => { expect(combo.dropdown.items.length).toEqual(0); combo.close(); - tick(); fixture.detectChanges(); + tick(); combo.filteringOptions = { caseSensitive: false, filteringKey: combo.groupKey }; combo.filterFunction = (collection: any[], searchValue: any, filteringOptions: IComboFilteringOptions): any[] => { if (!collection) return []; @@ -3210,8 +3209,8 @@ describe('igxCombo', () => { i[filteringOptions.filteringKey]?.toString().toLowerCase().includes(searchTerm)) } combo.open(); - tick(); fixture.detectChanges(); + tick(); expect(combo.dropdown.items.length).toBeGreaterThan(0); combo.searchValue = 'new england'; @@ -3226,8 +3225,8 @@ describe('igxCombo', () => { })); it('Should update filtering when custom filterFunction is provided and filteringOptions.caseSensitive is changed', fakeAsync(() => { combo.open(); - tick(); fixture.detectChanges(); + tick(); expect(combo.dropdown.items.length).toBeGreaterThan(0); combo.searchValue = 'new england'; @@ -3236,8 +3235,8 @@ describe('igxCombo', () => { expect(combo.dropdown.items.length).toEqual(0); combo.close(); - tick(); fixture.detectChanges(); + tick(); combo.filteringOptions = { caseSensitive: false, filteringKey: combo.groupKey }; combo.filterFunction = (collection: any[], searchValue: any, filteringOptions: IComboFilteringOptions): any[] => { if (!collection) return []; @@ -3248,8 +3247,8 @@ describe('igxCombo', () => { i[filteringOptions.filteringKey]?.toString().toLowerCase().includes(searchTerm)) } combo.open(); - tick(); fixture.detectChanges(); + tick(); expect(combo.dropdown.items.length).toBeGreaterThan(0); combo.searchValue = 'new england'; @@ -3263,8 +3262,8 @@ describe('igxCombo', () => { })); it('Should update filtering when custom filteringOptions are provided', fakeAsync(() => { combo.open(); - tick(); fixture.detectChanges(); + tick(); expect(combo.dropdown.items.length).toBeGreaterThan(0); combo.searchValue = 'new england'; @@ -3273,12 +3272,12 @@ describe('igxCombo', () => { expect(combo.dropdown.items.length).toEqual(0); combo.close(); - tick(); fixture.detectChanges(); + tick(); combo.filteringOptions = { caseSensitive: false, filteringKey: combo.groupKey }; combo.open(); - tick(); fixture.detectChanges(); + tick(); expect(combo.dropdown.items.length).toBeGreaterThan(0); combo.searchValue = 'new england'; diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts index 8b32c55e33c..de6849e715c 100644 --- a/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts +++ b/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts @@ -153,8 +153,8 @@ describe('Dialog', () => { expect(dialog.isOpen).toEqual(true); dialog.close(); - tick(); fixture.detectChanges(); + tick(); expect(dialog.isOpen).toEqual(false); })); @@ -219,8 +219,8 @@ describe('Dialog', () => { expect(dialog.isOpen).toEqual(true); dialog.close(); - tick(); fixture.detectChanges(); + tick(); expect(dialog.isOpen).toEqual(false); })); @@ -229,24 +229,24 @@ describe('Dialog', () => { fixture.detectChanges(); const dialog = fixture.componentInstance.dialog; dialog.open(); - tick(); fixture.detectChanges(); + tick(); const dialogElem = fixture.debugElement.query(By.css('.igx-dialog')).nativeElement; dialogElem.click(); - tick(); fixture.detectChanges(); + tick(); expect(dialog.isOpen).toEqual(false); dialog.closeOnOutsideSelect = false; dialog.open(); - tick(); fixture.detectChanges(); + tick(); dialogElem.click(); - tick(); fixture.detectChanges(); + tick(); expect(dialog.isOpen).toEqual(true); })); @@ -270,16 +270,16 @@ describe('Dialog', () => { spyOn(dialog.closed, 'emit'); dialog.open(); - tick(); fixture.detectChanges(); + tick(); expect(dialog.opening.emit).toHaveBeenCalledWith(cancellableArgs); expect(dialog.isOpenChange.emit).toHaveBeenCalledWith(true); // expect(dialog.onOpened.emit).toHaveBeenCalled(); dialog.close(); - tick(); fixture.detectChanges(); + tick(); cancellableArgs = { dialog, event: undefined, cancel: false }; expect(dialog.closing.emit).toHaveBeenCalledWith(cancellableArgs); @@ -287,8 +287,8 @@ describe('Dialog', () => { expect(dialog.isOpenChange.emit).toHaveBeenCalledWith(false); dialog.open(); - tick(); fixture.detectChanges(); + tick(); const buttons = document.querySelectorAll('button'); const leftButton = buttons[0]; const rightButton = buttons[1]; @@ -299,6 +299,7 @@ describe('Dialog', () => { spyOn(dialog.rightButtonSelect, 'emit'); dispatchEvent(rightButton, 'click'); + fixture.detectChanges(); tick(); expect(dialog.rightButtonSelect.emit).toHaveBeenCalled(); })); @@ -330,26 +331,27 @@ describe('Dialog', () => { const childDialog = fixture.componentInstance.child; mainDialog.open(); + fixture.detectChanges(); tick(); childDialog.open(); - tick(); fixture.detectChanges(); + tick(); const dialogs = fixture.debugElement.queryAll(By.css('.igx-dialog')); const maindDialogElem = dialogs[0].nativeElement; const childDialogElem = dialogs[1].nativeElement; childDialogElem.click(); - tick(); fixture.detectChanges(); + tick(); expect(mainDialog.isOpen).toEqual(true); expect(childDialog.isOpen).toEqual(false); maindDialogElem.click(); - tick(); fixture.detectChanges(); + tick(); expect(mainDialog.isOpen).toEqual(false); expect(childDialog.isOpen).toEqual(false); @@ -387,8 +389,8 @@ describe('Dialog', () => { const dialog = fix.componentInstance.dialog; dialog.open(); - tick(); fix.detectChanges(); + tick(); let overlaydiv = document.getElementsByClassName(OVERLAY_MAIN_CLASS)[0]; let overlayWrapper = overlaydiv.children[0]; @@ -396,8 +398,8 @@ describe('Dialog', () => { expect(overlayWrapper.classList.contains(OVERLAY_MODAL_WRAPPER_CLASS)).toBe(false); dialog.close(); - tick(); fix.detectChanges(); + tick(); fix.componentInstance.isModal = true; fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts index 882f7c6ac61..da0c63949cb 100644 --- a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts @@ -65,13 +65,13 @@ describe('IgxAutocomplete', () => { expect(dropDown.collapsed).toBeTruthy(); autocomplete.open(); - tick(); fixture.detectChanges(); + tick(); expect(dropDown.collapsed).toBeFalsy(); autocomplete.close(); - tick(); fixture.detectChanges(); + tick(); expect(dropDown.collapsed).toBeTruthy(); })); it('Should open drop down on (Alt+)ArrowUp/ArrowDown', fakeAsync(() => { @@ -180,13 +180,13 @@ describe('IgxAutocomplete', () => { expect(dropDown.collapsed).toBeFalsy(); input.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); expect(dropDown.collapsed).toBeFalsy(); group.element.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); expect(dropDown.collapsed).toBeFalsy(); // Click in center of the body. @@ -766,8 +766,8 @@ describe('IgxAutocomplete', () => { expect(input.nativeElement.attributes['aria-expanded'].value).toEqual('true'); expect(input.nativeElement.attributes['aria-activedescendant'].value).toEqual(dropDown.focusedItem.id); autocomplete.close(); - tick(); fixture.detectChanges(); + tick(); expect(input.nativeElement.attributes['aria-expanded'].value).toEqual('false'); })); it('Should accept Japanese input', fakeAsync(() => { diff --git a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.spec.ts index 8180148ca75..69f516cb10e 100644 --- a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.spec.ts @@ -69,8 +69,8 @@ describe('IgxToggle', () => { spyOn(toggle.opening, 'emit'); spyOn(toggle.opened, 'emit'); toggle.open(); - tick(); fixture.detectChanges(); + tick(); expect(toggle.opening.emit).toHaveBeenCalled(); expect(toggle.opened.emit).toHaveBeenCalled(); @@ -127,24 +127,29 @@ describe('IgxToggle', () => { spyOn(toggle.closed, 'emit'); toggle.open(); + fixture.detectChanges(); tick(); expect(toggle.opened.emit).toHaveBeenCalledTimes(1); expect(toggle.collapsed).toBe(false); toggle.close(); + fixture.detectChanges(); tick(); expect(toggle.closed.emit).toHaveBeenCalledTimes(1); expect(toggle.collapsed).toBe(true); toggle.open(); + fixture.detectChanges(); tick(); expect(toggle.opened.emit).toHaveBeenCalledTimes(2); const otherId = overlay.attach(fixture.componentInstance.other); overlay.show(otherId); overlay.hide(otherId); + fixture.detectChanges(); tick(); expect(toggle.closed.emit).toHaveBeenCalledTimes(1); expect(toggle.collapsed).toBe(false); overlay.hideAll(); // as if outside click + fixture.detectChanges(); tick(); expect(toggle.closed.emit).toHaveBeenCalledTimes(2); expect(toggle.collapsed).toBe(true); @@ -170,6 +175,7 @@ describe('IgxToggle', () => { const fixture = TestBed.createComponent(IgxToggleActionTestComponent); fixture.detectChanges(); fixture.componentInstance.toggle.open(); + fixture.detectChanges(); tick(); const divEl = fixture.debugElement.query(By.directive(IgxToggleDirective)).nativeElement; @@ -179,8 +185,8 @@ describe('IgxToggle', () => { button.triggerEventHandler('click', null); - tick(); fixture.detectChanges(); + tick(); expect(divEl.classList.contains(HIDDEN_TOGGLER_CLASS)).toBeTruthy(); })); @@ -195,6 +201,7 @@ describe('IgxToggle', () => { spyOn(toggle.opened, 'emit'); fixture.componentInstance.toggleAction.onClick(); + fixture.detectChanges(); tick(); expect(toggle.opening.emit).toHaveBeenCalled(); expect(toggle.opened.emit).toHaveBeenCalled(); @@ -205,8 +212,8 @@ describe('IgxToggle', () => { spyOn(toggle.closed, 'emit'); p.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); expect(toggle.closing.emit).toHaveBeenCalled(); expect(toggle.closed.emit).toHaveBeenCalled(); @@ -263,15 +270,15 @@ describe('IgxToggle', () => { spyOn(toggle.closed, 'emit'); button.triggerEventHandler('click', null); - tick(); fix.detectChanges(); + tick(); expect(toggle.opened.emit).toHaveBeenCalled(); expect(toggleElm.classList.contains(TOGGLER_CLASS)).toBe(true); button.triggerEventHandler('click', null); - tick(); fix.detectChanges(); + tick(); expect(toggle.closed.emit).toHaveBeenCalled(); expect(toggleElm.classList.contains(HIDDEN_TOGGLER_CLASS)).toBe(true); @@ -429,15 +436,15 @@ describe('IgxToggle', () => { spyOn(toggle.opening, 'emit'); spyOn(toggle.opened, 'emit'); toggle.open(); - tick(); fixture.detectChanges(); + tick(); expect(toggle.opening.emit).toHaveBeenCalledTimes(1); expect(toggle.opened.emit).toHaveBeenCalledTimes(1); toggle.open(); - tick(); fixture.detectChanges(); + tick(); expect(toggle.opening.emit).toHaveBeenCalledTimes(1); expect(toggle.opened.emit).toHaveBeenCalledTimes(1); @@ -451,8 +458,8 @@ describe('IgxToggle', () => { spyOn(toggle.opening, 'emit'); spyOn(toggle.opened, 'emit'); toggle.open(); - tick(); fixture.detectChanges(); + tick(); expect(toggle.opening.emit).toHaveBeenCalledTimes(1); expect(toggle.opened.emit).toHaveBeenCalledTimes(1); @@ -460,15 +467,15 @@ describe('IgxToggle', () => { spyOn(toggle.closing, 'emit'); spyOn(toggle.closed, 'emit'); toggle.close(); - tick(); fixture.detectChanges(); + tick(); expect(toggle.closing.emit).toHaveBeenCalledTimes(1); expect(toggle.closed.emit).toHaveBeenCalledTimes(1); toggle.close(); - tick(); fixture.detectChanges(); + tick(); expect(toggle.closing.emit).toHaveBeenCalledTimes(1); expect(toggle.closed.emit).toHaveBeenCalledTimes(1); @@ -601,15 +608,15 @@ describe('IgxToggle', () => { const button = fixture.debugElement.query(By.css('button')).nativeElement; button.click(); - tick(); fixture.detectChanges(); + tick(); expect(toggle.opening.emit).toHaveBeenCalledTimes(1); expect(toggle.opened.emit).toHaveBeenCalledTimes(1); document.documentElement.dispatchEvent(new Event('click')); - tick(); fixture.detectChanges(); + tick(); expect(toggle.closing.emit).toHaveBeenCalledTimes(1); expect(toggle.closing.emit).toHaveBeenCalledWith({ id: '0', owner: toggle, cancel: false, event: new Event('click') }); diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts index 1cd84369e48..f30273a06a7 100644 --- a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts @@ -75,12 +75,14 @@ describe('IgxTooltip', () => { it('IgxTooltip is shown/hidden when hovering/unhovering its target', fakeAsync(() => { hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); unhoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false); })); @@ -89,7 +91,8 @@ describe('IgxTooltip', () => { expect(tooltipTarget.hasArrow).toBeFalse(); hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); @@ -105,7 +108,8 @@ describe('IgxTooltip', () => { fix.detectChanges(); hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); @@ -120,7 +124,8 @@ describe('IgxTooltip', () => { it('show target tooltip when hovering its target and ignore [tooltip] input', fakeAsync(() => { hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); expect(tooltipNativeElement.textContent.trim()).toEqual('Hello, I am a tooltip!'); @@ -128,7 +133,8 @@ describe('IgxTooltip', () => { it('verify tooltip default position', fakeAsync(() => { hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipPosition(tooltipNativeElement, button); })); @@ -137,14 +143,16 @@ describe('IgxTooltip', () => { fix.detectChanges(); hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false); tooltipTarget.tooltipDisabled = false; fix.detectChanges(); hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); })); @@ -169,7 +177,8 @@ describe('IgxTooltip', () => { fix.detectChanges(); hoverElement(button); - flush(); + fix.detectChanges(); + tick(); unhoverElement(button); tick(HIDE_DELAY); @@ -185,11 +194,11 @@ describe('IgxTooltip', () => { it('IgxTooltip is shown/hidden when invoking respective API methods', fakeAsync(() => { tooltipTarget.showTooltip(); - flush(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); tooltipTarget.hideTooltip(); - flush(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false); })); @@ -208,7 +217,7 @@ describe('IgxTooltip', () => { fix.detectChanges(); tooltipTarget.showTooltip(); - flush(); + tick(); tooltipTarget.hideTooltip(); @@ -219,11 +228,13 @@ describe('IgxTooltip', () => { it('IgxTooltip respects the passed overlaySettings', fakeAsync(() => { // Hover the button. hoverElement(button); - flush(); + fix.detectChanges(); + tick(); // Verify default position of the tooltip. verifyTooltipPosition(tooltipNativeElement, button); unhoverElement(button); - flush(); + fix.detectChanges(); + tick(); // Use custom overlaySettings. tooltipTarget.overlaySettings = /**/ { @@ -239,7 +250,8 @@ describe('IgxTooltip', () => { // Hover the button again. hoverElement(button); - flush(); + fix.detectChanges(); + tick(); // Verify that the position of the tooltip is changed. verifyTooltipPosition(tooltipNativeElement, button, false); const targetRect = tooltipTarget.nativeElement.getBoundingClientRect(); @@ -247,17 +259,19 @@ describe('IgxTooltip', () => { expect(Math.abs(tooltipRect.top - targetRect.bottom) <= 0.5).toBe(true); expect(Math.abs(tooltipRect.left - targetRect.right) <= 0.5).toBe(true); unhoverElement(button); - flush(); + fix.detectChanges(); + tick(); })); it('IgxTooltip closes when the target is clicked', fakeAsync(() => { hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); UIInteractions.simulateClickAndSelectEvent(button); - flush(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false); })); @@ -279,24 +293,25 @@ describe('IgxTooltip', () => { it('IgxTooltip hides on pressing \'escape\' key', fakeAsync(() => { tooltipTarget.showTooltip(); - flush(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); UIInteractions.triggerKeyDownEvtUponElem('Escape', document.documentElement); - flush(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false); })); it('IgxTooltip is hidden when its target is destroyed', fakeAsync(() => { hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); fix.componentInstance.showButton = false; fix.detectChanges(); - flush(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false); })); @@ -308,12 +323,12 @@ describe('IgxTooltip', () => { hoverElement(button); expect(tooltipTarget.tooltipShow.emit).toHaveBeenCalled(); - flush(); + tick(); unhoverElement(button); tick(500); expect(tooltipTarget.tooltipHide.emit).toHaveBeenCalled(); - flush(); + tick(); })); it('should emit the proper events when showing/hiding tooltip through API', fakeAsync(() => { @@ -322,12 +337,12 @@ describe('IgxTooltip', () => { tooltipTarget.showTooltip(); expect(tooltipTarget.tooltipShow.emit).toHaveBeenCalled(); - flush(); + tick(); tooltipTarget.hideTooltip(); tick(500); expect(tooltipTarget.tooltipHide.emit).toHaveBeenCalled(); - flush(); + tick(); })); it('should emit the proper events with correct eventArgs when hover/unhover', fakeAsync(() => { @@ -339,12 +354,12 @@ describe('IgxTooltip', () => { hoverElement(button); expect(tooltipTarget.tooltipShow.emit).toHaveBeenCalledWith(tooltipShowArgs); - flush(); + tick(); unhoverElement(button); tick(500); expect(tooltipTarget.tooltipHide.emit).toHaveBeenCalledWith(tooltipHideArgs); - flush(); + tick(); })); it('should emit the proper events with correct eventArgs when show/hide through API', fakeAsync(() => { @@ -356,19 +371,20 @@ describe('IgxTooltip', () => { tooltipTarget.showTooltip(); expect(tooltipTarget.tooltipShow.emit).toHaveBeenCalledWith(tooltipShowArgs); - flush(); + tick(); tooltipTarget.hideTooltip(); tick(500); expect(tooltipTarget.tooltipHide.emit).toHaveBeenCalledWith(tooltipHideArgs); - flush(); + tick(); })); it('should cancel the showing event when hover', fakeAsync(() => { fix.componentInstance.cancelShowing = true; hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false); })); @@ -377,10 +393,12 @@ describe('IgxTooltip', () => { fix.componentInstance.cancelHiding = true; hoverElement(button); - flush(); + fix.detectChanges(); + tick(); unhoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); })); @@ -389,7 +407,7 @@ describe('IgxTooltip', () => { fix.componentInstance.cancelShowing = true; tooltipTarget.showTooltip(); - flush(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false); })); @@ -398,10 +416,10 @@ describe('IgxTooltip', () => { fix.componentInstance.cancelHiding = true; tooltipTarget.showTooltip(); - flush(); + tick(); tooltipTarget.hideTooltip(); - flush(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); })); @@ -410,13 +428,15 @@ describe('IgxTooltip', () => { describe('Tooltip touch', () => { it('IgxTooltip is shown/hidden when touching/untouching its target', fakeAsync(() => { touchElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); const dummyDiv = fix.debugElement.query(By.css('.dummyDiv')); touchElement(dummyDiv); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false); })); @@ -426,14 +446,16 @@ describe('IgxTooltip', () => { fix.detectChanges(); touchElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false); tooltipTarget.tooltipDisabled = false; fix.detectChanges(); touchElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); })); @@ -458,7 +480,8 @@ describe('IgxTooltip', () => { fix.detectChanges(); touchElement(button); - flush(); + fix.detectChanges(); + tick(); const dummyDiv = fix.debugElement.query(By.css('.dummyDiv')); touchElement(dummyDiv); @@ -486,25 +509,29 @@ describe('IgxTooltip', () => { it('IgxTooltip is initially hidden', fakeAsync(() => { unhoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false); })); it('IgxTooltip is shown/hidden when hovering/unhovering its target', fakeAsync(() => { hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); unhoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false); })); it('Should respect default max-width constraint for plain string tooltip', fakeAsync(() => { hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); @@ -524,7 +551,8 @@ describe('IgxTooltip', () => { it('Should not have max-width constraint for custom content tooltip', fakeAsync(() => { hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); @@ -551,7 +579,8 @@ describe('IgxTooltip', () => { it('Same tooltip shows on different targets depending on which target is hovered', fakeAsync(() => { hoverElement(buttonOne); - flush(); + fix.detectChanges(); + tick(); // Tooltip is positioned relative to buttonOne and NOT relative to buttonTwo verifyTooltipVisibility(tooltipNativeElement, targetOne, true); @@ -559,9 +588,11 @@ describe('IgxTooltip', () => { verifyTooltipPosition(tooltipNativeElement, buttonTwo, false); unhoverElement(buttonOne); - flush(); + fix.detectChanges(); + tick(); hoverElement(buttonTwo); - flush(); + fix.detectChanges(); + tick(); // Tooltip is positioned relative to buttonTwo and NOT relative to buttonOne verifyTooltipVisibility(tooltipNativeElement, targetTwo, true); @@ -574,7 +605,8 @@ describe('IgxTooltip', () => { fix.detectChanges(); hoverElement(buttonOne); - flush(); + fix.detectChanges(); + tick(); unhoverElement(buttonOne); tick(300); @@ -586,7 +618,7 @@ describe('IgxTooltip', () => { verifyTooltipVisibility(tooltipNativeElement, targetTwo, true); verifyTooltipPosition(tooltipNativeElement, buttonTwo); verifyTooltipPosition(tooltipNativeElement, buttonOne, false); - flush(); + tick(); })); it('Should position relative to its target when having no close animation - #16288', fakeAsync(() => { @@ -628,7 +660,8 @@ describe('IgxTooltip', () => { tick(100); hoverElement(buttonTwo); - flush(); + fix.detectChanges(); + tick(); // Tooltip is visible and positioned relative to buttonTwo verifyTooltipVisibility(tooltipNativeElement, targetTwo, true); @@ -646,7 +679,8 @@ describe('IgxTooltip', () => { const dummyDiv = fix.debugElement.query(By.css('.dummyDiv')); touchElement(dummyDiv); - flush(); + fix.detectChanges(); + tick(); expect(targetOne['_hideOnInteraction']).toHaveBeenCalledTimes(1); expect(targetTwo['_hideOnInteraction']).not.toHaveBeenCalled(); @@ -657,7 +691,8 @@ describe('IgxTooltip', () => { spyOn(targetTwo.tooltipHide, 'emit'); hoverElement(buttonOne); - flush(); + fix.detectChanges(); + tick(); const tooltipHideArgsTargetOne = { target: targetOne, tooltip: fix.componentInstance.tooltip, cancel: false }; const tooltipHideArgsTargetTwo = { target: targetTwo, tooltip: fix.componentInstance.tooltip, cancel: false }; @@ -666,32 +701,36 @@ describe('IgxTooltip', () => { tick(500); expect(targetOne.tooltipHide.emit).toHaveBeenCalledOnceWith(tooltipHideArgsTargetOne); expect(targetTwo.tooltipHide.emit).not.toHaveBeenCalled(); - flush(); + tick(); hoverElement(buttonTwo); - flush(); + fix.detectChanges(); + tick(); unhoverElement(buttonTwo); tick(500); expect(targetOne.tooltipHide.emit).toHaveBeenCalledOnceWith(tooltipHideArgsTargetOne); expect(targetTwo.tooltipHide.emit).toHaveBeenCalledOnceWith(tooltipHideArgsTargetTwo); - flush(); + tick(); })); it('IgxTooltip hides when touch one target, then another, then outside', fakeAsync(() => { touchElement(targetOne); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, targetOne, true); verifyTooltipPosition(tooltipNativeElement, targetOne, true); touchElement(targetTwo); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, targetTwo, true); verifyTooltipPosition(tooltipNativeElement, targetTwo, true); touchElement(fix.debugElement); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, targetTwo, false); })); @@ -699,7 +738,8 @@ describe('IgxTooltip', () => { targetOne.sticky = true; fix.detectChanges(); hoverElement(buttonOne); - flush(); + fix.detectChanges(); + tick(); let closeBtn = tooltipNativeElement.querySelector('igx-tooltip-close-button'); expect(closeBtn).not.toBeNull(); @@ -708,7 +748,8 @@ describe('IgxTooltip', () => { targetTwo.sticky = false; fix.detectChanges(); hoverElement(buttonTwo); - flush(); + fix.detectChanges(); + tick(); // It should still show tooltip for targetOne expect(fix.componentInstance.tooltip.role).toBe('status'); @@ -717,10 +758,11 @@ describe('IgxTooltip', () => { closeBtn = tooltipNativeElement.querySelector('igx-tooltip-close-button') as HTMLElement; closeBtn.dispatchEvent(new Event('click')); fix.detectChanges(); - flush(); + tick(); hoverElement(buttonTwo); - flush(); + fix.detectChanges(); + tick(); expect(tooltipNativeElement.querySelector('igx-tooltip-close-button')).toBeNull(); expect(fix.componentInstance.tooltip.role).toBe('tooltip'); @@ -735,7 +777,8 @@ describe('IgxTooltip', () => { fix.detectChanges(); hoverElement(buttonOne); - flush(); + fix.detectChanges(); + tick(); const customClose = tooltipNativeElement.querySelector('.my-close-btn'); expect(customClose).not.toBeNull(); @@ -744,10 +787,11 @@ describe('IgxTooltip', () => { const closeBtn = tooltipNativeElement.querySelector('igx-tooltip-close-button') as HTMLElement; closeBtn.dispatchEvent(new Event('click')); fix.detectChanges(); - flush(); + tick(); hoverElement(buttonTwo); - flush(); + fix.detectChanges(); + tick(); expect(tooltipNativeElement.querySelector('.my-close-btn')).toBeNull(); })); @@ -761,7 +805,8 @@ describe('IgxTooltip', () => { fix.detectChanges(); hoverElement(buttonOne); - flush(); + fix.detectChanges(); + tick(); // Tooltip should be shown for targetOne with custom close button and correct role const tooltip = tooltipNativeElement; @@ -779,7 +824,7 @@ describe('IgxTooltip', () => { targetTwo.closeTemplate = instance.secondCustomCloseTemplate; fix.detectChanges(); - flush(); + tick(); expect(tooltip.querySelector('igx-tooltip-close-button')).toBe(closeButton); // same reference expect(tooltip.querySelector('.my-close-btn')).not.toBeNull(); // still the custom one @@ -795,7 +840,8 @@ describe('IgxTooltip', () => { fix.detectChanges(); hoverElement(buttonOne); - flush(); + fix.detectChanges(); + tick(); fix.detectChanges(); const tooltip = tooltipNativeElement; @@ -809,7 +855,7 @@ describe('IgxTooltip', () => { // Change closeTemplate of active targetOne targetOne.closeTemplate = instance.secondCustomCloseTemplate; fix.detectChanges(); - flush(); + tick(); const updatedCustomClose = tooltip.querySelector('.my-second-close-btn'); expect(updatedCustomClose).not.toBeNull(); @@ -817,7 +863,7 @@ describe('IgxTooltip', () => { targetOne.sticky = false; fix.detectChanges(); - flush(); + tick(); expect(tooltip.getAttribute('role')).toBe('tooltip'); expect(tooltip.querySelector('igx-tooltip-close-button')).toBeNull(); @@ -829,7 +875,7 @@ describe('IgxTooltip', () => { targetOne.sticky = true; fix.detectChanges(); targetOne.showTooltip(); - flush(); + tick(); verifyTooltipVisibility(tooltip, targetOne, true); expect(tooltip.role).toBe('status'); @@ -837,15 +883,15 @@ describe('IgxTooltip', () => { // Programmatically show tooltip for targetTwo (non-sticky) without closing sticky tooltip targetTwo.sticky = false; targetTwo.showTooltip(); - flush(); + tick(); verifyTooltipPosition(tooltip, targetTwo, false); expect(tooltip.role).toBe('status'); targetOne.hideTooltip(); - flush(); + tick(); targetTwo.showTooltip(); - flush(); + tick(); verifyTooltipPosition(tooltip, targetTwo, true); expect(tooltip.role).toBe('tooltip'); })); @@ -855,17 +901,20 @@ describe('IgxTooltip', () => { fix.detectChanges(); hoverElement(buttonOne); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, targetOne, true); let arrow = tooltipNativeElement.querySelector(TOOLTIP_ARROW_SELECTOR) as HTMLElement; expect(arrow.style.display).toEqual(''); unhoverElement(buttonOne); - flush(); + fix.detectChanges(); + tick(); hoverElement(buttonTwo); - flush(); + fix.detectChanges(); + tick(); arrow = tooltipNativeElement.querySelector(TOOLTIP_ARROW_SELECTOR) as HTMLElement; verifyTooltipVisibility(tooltipNativeElement, targetTwo, true); @@ -896,7 +945,8 @@ describe('IgxTooltip', () => { const dummyDiv = fix.debugElement.query(By.css('.dummyDiv')); touchElement(dummyDiv); - flush(); + fix.detectChanges(); + tick(); expect(tooltipOne['onDocumentTouchStart']).toHaveBeenCalledTimes(1); expect(tooltipTwo['onDocumentTouchStart']).not.toHaveBeenCalled(); @@ -917,7 +967,8 @@ describe('IgxTooltip', () => { expect(fix.componentInstance.toggleDir.collapsed).toBe(true); hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); @@ -945,7 +996,8 @@ describe('IgxTooltip', () => { it('should render custom close button when sticky is true', fakeAsync(() => { hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, button, true); const closeBtn = document.querySelector('.my-close-btn'); @@ -958,7 +1010,8 @@ describe('IgxTooltip', () => { tick(); hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); const closeBtn = document.querySelector('.my-close-btn'); @@ -968,13 +1021,14 @@ describe('IgxTooltip', () => { it('should hide the tooltip custom close button is clicked', fakeAsync(() => { hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); const closeBtn = tooltipNativeElement.querySelector('.my-close-btn') as HTMLElement; UIInteractions.simulateClickAndSelectEvent(closeBtn); - flush(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false); })); @@ -986,7 +1040,8 @@ describe('IgxTooltip', () => { tick(); hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); const icon = document.querySelector('igx-icon'); @@ -996,7 +1051,8 @@ describe('IgxTooltip', () => { it('should update the DOM role attribute correctly when sticky changes', fakeAsync(() => { hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); expect(tooltipNativeElement.getAttribute('role')).toBe('status'); @@ -1012,7 +1068,8 @@ describe('IgxTooltip', () => { fix.detectChanges(); hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); // Dispatch Escape key @@ -1022,7 +1079,8 @@ describe('IgxTooltip', () => { cancelable: true }); document.dispatchEvent(escapeEvent); - flush() + fix.detectChanges(); + tick() verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false) })); @@ -1031,7 +1089,8 @@ describe('IgxTooltip', () => { tooltipTarget.sticky = true; fix.detectChanges(); touchElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); const closeBtn = document.querySelector('.my-close-btn'); @@ -1062,7 +1121,8 @@ describe('IgxTooltip', () => { fix.detectChanges(); hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); verifyTooltipPosition(tooltipNativeElement, button, true, Placement.Bottom, customOffset); @@ -1077,7 +1137,8 @@ describe('IgxTooltip', () => { fix.detectChanges(); hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); verifyTooltipPosition(tooltipNativeElement, button, true, Placement.Right, customOffset); @@ -1090,7 +1151,8 @@ describe('IgxTooltip', () => { fix.detectChanges(); hoverElement(button); - flush(); + fix.detectChanges(); + tick(); verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); verifyTooltipPosition(tooltipNativeElement, button, true, Placement.BottomStart); diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts index 929857abe5d..de5b7ff5888 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts @@ -202,15 +202,15 @@ describe('IgxDropDown ', () => { expect(dropdown.collapsed).toBeTruthy(); dropdown.open(); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.collapsed).toBeFalsy(); expect(dropdown.onToggleOpening).toHaveBeenCalledTimes(1); expect(dropdown.onToggleOpened).toHaveBeenCalledTimes(1); dropdown.close(); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.collapsed).toBeTruthy(); expect(dropdown.onToggleClosing).toHaveBeenCalledTimes(1); expect(dropdown.onToggleClosed).toHaveBeenCalledTimes(1); @@ -220,15 +220,15 @@ describe('IgxDropDown ', () => { spyOn(dropdown.opened, 'emit').and.callThrough(); dropdown.open(); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.opening.emit).toHaveBeenCalledTimes(1); expect(dropdown.opened.emit).toHaveBeenCalledTimes(1); dropdown.open(); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.opening.emit).toHaveBeenCalledTimes(1); expect(dropdown.opened.emit).toHaveBeenCalledTimes(1); @@ -293,15 +293,15 @@ describe('IgxDropDown ', () => { dropdown.closing.pipe(take(1)).subscribe((e: CancelableEventArgs) => e.cancel = true); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.opening.emit).toHaveBeenCalledTimes(1); expect(dropdown.opened.emit).toHaveBeenCalledTimes(1); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.closing.emit).toHaveBeenCalledTimes(1); expect(dropdown.closed.emit).toHaveBeenCalledTimes(0); @@ -313,52 +313,52 @@ describe('IgxDropDown ', () => { dropdown.opening.pipe(take(1)).subscribe((e: CancelableEventArgs) => e.cancel = true); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.opening.emit).toHaveBeenCalledTimes(1); expect(dropdown.opened.emit).toHaveBeenCalledTimes(0); })); it('should select item by SPACE/ENTER keys', fakeAsync(() => { dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); let focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); expect(focusedItem.componentInstance.itemIndex).toEqual(0); expect(dropdown.collapsed).toEqual(false); let dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement); - tick(); fixture.detectChanges(); + tick(); focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); expect(focusedItem).toBeDefined(); expect(focusedItem.componentInstance.itemIndex).toEqual(1); expect(dropdown.selectedItem).toBeFalsy(); UIInteractions.triggerEventHandlerKeyDown('Space', dropdownElement); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.selectedItem).toEqual(dropdown.items[1]); expect(dropdown.collapsed).toEqual(true); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement); - tick(); fixture.detectChanges(); + tick(); UIInteractions.triggerEventHandlerKeyDown('Enter', dropdownElement); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.collapsed).toEqual(true); expect(dropdown.selectedItem).toEqual(dropdown.items[2]); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.collapsed).toEqual(false); })); it('should close the dropdown and not change selection by pressing ESC key', fakeAsync(() => { @@ -369,8 +369,8 @@ describe('IgxDropDown ', () => { spyOn(dropdown.closed, 'emit').and.callThrough(); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); let focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); expect(focusedItem).toBeDefined(); @@ -382,8 +382,8 @@ describe('IgxDropDown ', () => { expect(focusedItem.componentInstance.itemIndex).toEqual(1); UIInteractions.triggerEventHandlerKeyDown('Escape', dropdownElement); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.collapsed).toEqual(true); expect(dropdown.opening.emit).toHaveBeenCalledTimes(1); expect(dropdown.opened.emit).toHaveBeenCalledTimes(1); @@ -393,37 +393,37 @@ describe('IgxDropDown ', () => { })); it('should navigate through items using Up/Down/Home/End keys', fakeAsync(() => { dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); dropdownElement.triggerEventHandler('keydown', UIInteractions.getKeyboardEvent('keydown', 'ArrowDown')); - tick(); fixture.detectChanges(); + tick(); let focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); expect(focusedItem.componentInstance.itemIndex).toEqual(1); UIInteractions.triggerEventHandlerKeyDown('End', dropdownElement); - tick(); fixture.detectChanges(); + tick(); focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); expect(focusedItem.componentInstance.itemIndex).toEqual(14); UIInteractions.triggerEventHandlerKeyDown('ArrowUp', dropdownElement); - tick(); fixture.detectChanges(); + tick(); focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); expect(focusedItem.componentInstance.itemIndex).toEqual(13); UIInteractions.triggerEventHandlerKeyDown('Home', dropdownElement); - tick(); fixture.detectChanges(); + tick(); focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); expect(focusedItem.componentInstance.itemIndex).toEqual(0); })); it('should not change selection when setting it to non-existing item', fakeAsync(() => { dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); dropdown.setSelectedItem(0); fixture.detectChanges(); let selectedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_SELECTED}`)); @@ -463,23 +463,23 @@ describe('IgxDropDown ', () => { dropdown.items[10].selected = true; fixture.detectChanges(); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); const selectedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_SELECTED}`)); expect(selectedItem.componentInstance.itemIndex).toEqual(10); const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); UIInteractions.triggerEventHandlerKeyDown('Home', dropdownElement); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.items[1].focused).toBeTruthy(); const focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); expect(focusedItem.componentInstance.itemIndex).toEqual(1); })); it('should set isSelected via igxDropDownIteComponent', fakeAsync(() => { dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.selectedItem).toBeNull(); const items = dropdown.items as IgxDropDownItemComponent[]; @@ -497,8 +497,8 @@ describe('IgxDropDown ', () => { expect(dropdown.selectedItem.itemIndex).toEqual(1); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.selectedItem.itemIndex).toEqual(1); })); it('should not set isSelected via igxDropDownItemBase on header items', fakeAsync(() => { @@ -510,8 +510,8 @@ describe('IgxDropDown ', () => { dropdown.items[10].isHeader = true; fixture.detectChanges(); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.selectedItem).toBeNull(); const items = dropdown.items as IgxDropDownItemComponent[]; @@ -537,16 +537,16 @@ describe('IgxDropDown ', () => { expect(dropdown.selectedItem.itemIndex).toEqual(2); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.selectedItem.itemIndex).toEqual(2); })); it('should return the proper eventArgs if selection has been cancelled', fakeAsync(() => { spyOn(dropdown.selectionChanging, 'emit').and.callThrough(); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); let selectedItem = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_ITEM}`))[3]; selectedItem.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); @@ -576,8 +576,8 @@ describe('IgxDropDown ', () => { const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); let focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); expect(focusedItem).toBeDefined(); @@ -587,16 +587,16 @@ describe('IgxDropDown ', () => { }); UIInteractions.triggerEventHandlerKeyDown('escape', dropdownElement); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.closing.emit).toHaveBeenCalledTimes(1); expect(eventArgs.event).toBeDefined(); expect((eventArgs.event as KeyboardEvent).type).toEqual('keydown'); expect((eventArgs.event as KeyboardEvent).key).toEqual('escape'); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); expect(focusedItem).toBeDefined(); @@ -605,8 +605,8 @@ describe('IgxDropDown ', () => { }); UIInteractions.triggerEventHandlerKeyDown('enter', dropdownElement); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.closing.emit).toHaveBeenCalledTimes(2); expect(eventArgs.event).toBeDefined(); expect((eventArgs.event as KeyboardEvent).type).toEqual('keydown'); @@ -615,8 +615,8 @@ describe('IgxDropDown ', () => { it('should be able to change selection when manipulating ISelectionEventArgs', fakeAsync(() => { expect(dropdown.selectedItem).toEqual(null); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); // Overwrite selection args let expectedSelected = dropdown.items[4]; @@ -637,8 +637,8 @@ describe('IgxDropDown ', () => { // Set header - error dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); expectedSelected = dropdown.items[4]; dropdown.items[4].isHeader = true; @@ -658,14 +658,14 @@ describe('IgxDropDown ', () => { })); it('should not take focus when allowItemsFocus is set to false', fakeAsync(() => { dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); const focusedItem = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_ITEM}`))[0].nativeElement; expect(document.activeElement).toEqual(focusedItem); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); dropdown.allowItemsFocus = false; tick(); @@ -674,8 +674,8 @@ describe('IgxDropDown ', () => { const button = fixture.debugElement.query(By.css('button')).nativeElement; button.focus(); button.click(); - tick(); fixture.detectChanges(); + tick(); expect(document.activeElement).toEqual(button); })); it('should not be able to select disabled and header items', fakeAsync(() => { @@ -684,8 +684,8 @@ describe('IgxDropDown ', () => { fixture.detectChanges(); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); const currentItem = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DISABLED}`))[0]; const headerItem = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_HEADER}`))[0]; expect(currentItem.componentInstance.itemIndex).toEqual(4); @@ -709,8 +709,8 @@ describe('IgxDropDown ', () => { fixture.detectChanges(); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); let disabledItems = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DISABLED}`)); expect(disabledItems.length).toEqual(3); expect(dropdown.items[4].disabled).toBeFalsy(); @@ -731,23 +731,23 @@ describe('IgxDropDown ', () => { dropdown.items[12].disabled = true; fixture.detectChanges(); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); const selectedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_SELECTED}`)); expect(selectedItem.componentInstance.itemIndex).toEqual(10); const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); UIInteractions.triggerEventHandlerKeyDown('End', dropdownElement); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.items[11].focused).toBeTruthy(); let focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); expect(focusedItem.componentInstance.itemIndex).toEqual(11); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.items[11].focused).toBeTruthy(); focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); expect(focusedItem.componentInstance.itemIndex).toEqual(11); @@ -762,34 +762,34 @@ describe('IgxDropDown ', () => { dropdown.items[12].disabled = true; fixture.detectChanges(); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.items[11].focused).toBeTruthy(); let focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); expect(focusedItem.componentInstance.itemIndex).toEqual(11); UIInteractions.triggerEventHandlerKeyDown('ArrowUp', dropdownElement); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.items[10].focused).toBeTruthy(); focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); expect(focusedItem.componentInstance.itemIndex).toEqual(10); UIInteractions.triggerEventHandlerKeyDown('ArrowUp', dropdownElement); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.items[8].focused).toBeTruthy(); focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); expect(focusedItem.componentInstance.itemIndex).toEqual(8); UIInteractions.triggerEventHandlerKeyDown('ArrowUp', dropdownElement); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.items[7].focused).toBeTruthy(); focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); expect(focusedItem.componentInstance.itemIndex).toEqual(7); @@ -801,8 +801,8 @@ describe('IgxDropDown ', () => { dropdown.setSelectedItem(0); fixture.detectChanges(); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.items[0].selected).toBeTruthy(); })); it('should not move the focus when clicking a disabled item', fakeAsync(() => { @@ -814,8 +814,8 @@ describe('IgxDropDown ', () => { dropdown.items[10].selected = true; fixture.detectChanges(); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.items[10].focused).toEqual(true); const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); @@ -877,30 +877,30 @@ describe('IgxDropDown ', () => { expect(dropdown.collapsed).toEqual(true); input.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.collapsed).toEqual(true); expect(dropdown.selectItem).toHaveBeenCalledTimes(0); expect(dropdown.focusedItem).toEqual(null); UIInteractions.triggerEventHandlerKeyDown('Enter', input); - tick(); fixture.detectChanges(); + tick(); // does not attempt to select item on keydown if DD is closed; expect(dropdown.selectItem).toHaveBeenCalledTimes(0); expect(dropdown.selectedItem).toEqual(null); expect(dropdown.collapsed).toEqual(true); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.collapsed).toEqual(false); expect(dropdown.focusedItem).toEqual(dropdown.items[0]); const dropdownItem = dropdown.items[0]; input.triggerEventHandler('keydown', UIInteractions.getKeyboardEvent('keydown', 'Enter')); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.selectItem).toHaveBeenCalledTimes(1); expect(dropdown.selectItem).toHaveBeenCalledWith(dropdownItem, UIInteractions.getKeyboardEvent('keydown', 'Enter')); expect(dropdown.selectedItem).toEqual(dropdownItem); @@ -1081,8 +1081,8 @@ describe('IgxDropDown ', () => { }); it('should update aria-activedescendant to the id of the focused item', fakeAsync(() => { dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)).nativeElement; let focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)).nativeElement; @@ -1093,15 +1093,15 @@ describe('IgxDropDown ', () => { expect(dropdownElement.getAttribute('aria-activedescendant')).toBe(focusedItemId); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`))); - tick(); fixture.detectChanges(); + tick(); focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)).nativeElement; focusedItemId = focusedItem.getAttribute('id'); @@ -1187,8 +1187,8 @@ describe('IgxDropDown ', () => { }); it('should apply selected item class', fakeAsync(() => { dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); const selectedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_ITEM}`)); expect(selectedItem.classes[CSS_CLASS_SELECTED]).toBeFalsy(); @@ -1220,14 +1220,14 @@ describe('IgxDropDown ', () => { }); it('should return items/headers property correctly', fakeAsync(() => { dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.items.length).toEqual(15); expect(dropdown.headers).toEqual([]); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); dropdown.items[0].disabled = true; dropdown.items[1].isHeader = true; dropdown.items[3].disabled = true; @@ -1236,8 +1236,8 @@ describe('IgxDropDown ', () => { dropdown.items[10].isHeader = true; fixture.detectChanges(); dropdown.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.items.length).toEqual(12); expect(dropdown.headers).toBeTruthy(); expect(dropdown.headers.length).toEqual(3); @@ -1304,38 +1304,38 @@ describe('IgxDropDown ', () => { spyOn(dropdown.closing, 'emit').and.callThrough(); spyOn(dropdown.closed, 'emit').and.callThrough(); tabs.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.opening.emit).toHaveBeenCalledTimes(1); expect(dropdown.opened.emit).toHaveBeenCalledTimes(1); let dropdownItems = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_ITEM}`)); dropdownItems[2].triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.closing.emit).toHaveBeenCalledTimes(1); expect(dropdown.closed.emit).toHaveBeenCalledTimes(1); input.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.opening.emit).toHaveBeenCalledTimes(2); expect(dropdown.opened.emit).toHaveBeenCalledTimes(2); dropdownItems = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_ITEM}`)); dropdownItems[1].triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.closing.emit).toHaveBeenCalledTimes(2); expect(dropdown.closed.emit).toHaveBeenCalledTimes(2); img.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.opening.emit).toHaveBeenCalledTimes(3); expect(dropdown.opened.emit).toHaveBeenCalledTimes(3); dropdownItems = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_ITEM}`)); dropdownItems[0].triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); expect(dropdown.closing.emit).toHaveBeenCalledTimes(3); expect(dropdown.closed.emit).toHaveBeenCalledTimes(3); })); @@ -1354,11 +1354,11 @@ describe('IgxDropDown ', () => { expect(dropdownRect.top).toBe(inputRect.bottom); dropdown.close(); - tick(); fixture.detectChanges(); + tick(); dropdown.open(); - tick(); fixture.detectChanges(); + tick(); dropdownRect = dropdownItems[0].nativeElement.getBoundingClientRect(); expect(dropdownRect.left).toBe(0); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts index 285ae6e7bd1..7a5feda843f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts @@ -670,8 +670,8 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => { // Hover the last visible expression chip const expressionItem = fix.nativeElement.querySelectorAll(`.${QueryBuilderSelectors.FILTER_TREE_EXPRESSION_ITEM}`)[9]; expressionItem.dispatchEvent(new MouseEvent('mouseenter')); - tick(); fix.detectChanges(); + tick(); // Click the add icon to display the adding buttons. QueryBuilderFunctions.clickQueryBuilderTreeExpressionChipIcon(fix, [9], 'add'); @@ -708,8 +708,8 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => { // Hover the previous to last visible expression chip. const expressionItem = fix.nativeElement.querySelectorAll(`.${QueryBuilderSelectors.FILTER_TREE_EXPRESSION_ITEM}`)[9]; expressionItem.dispatchEvent(new MouseEvent('mouseenter')); - tick(); fix.detectChanges(); + tick(); // Click the add icon to display the adding buttons. QueryBuilderFunctions.clickQueryBuilderTreeExpressionChipIcon(fix, [9], 'add'); @@ -748,8 +748,8 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => { // Hover the last visible expression chip const expressionItem = fix.nativeElement.querySelectorAll(`.${QueryBuilderSelectors.FILTER_TREE_EXPRESSION_ITEM}`)[9]; expressionItem.dispatchEvent(new MouseEvent('mouseenter')); - tick(); fix.detectChanges(); + tick(); // Click the chip to enter edit mode of the expression. QueryBuilderFunctions.clickQueryBuilderTreeExpressionChip(fix, [9]); @@ -1322,8 +1322,8 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => { // Hover the condition chip to show the add button const expressionItem = fix.nativeElement.querySelectorAll(`.${QueryBuilderSelectors.FILTER_TREE_EXPRESSION_ITEM}`)[0]; expressionItem.dispatchEvent(new MouseEvent('mouseenter')); - tick(); fix.detectChanges(); + tick(); // Click the add icon to display the adding buttons and verify their content. QueryBuilderFunctions.clickQueryBuilderTreeExpressionChipIcon(fix, [0], 'add'); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index 1841cfe1279..0e2ba3ea141 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -358,8 +358,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { GridFunctions.openFilterDDAndSelectCondition(fix, 0); input.triggerEventHandler('click', null); - tick(); fix.detectChanges(); + tick(); const outlet = document.getElementsByClassName('igx-grid__outlet')[0]; const calendar = outlet.getElementsByClassName('igx-calendar')[0]; @@ -368,11 +368,11 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { currentDay.dispatchEvent(new Event('click')); - flush(); fix.detectChanges(); - input.triggerEventHandler('change', null); tick(); + input.triggerEventHandler('change', null); fix.detectChanges(); + tick(); expect(grid.rowList.length).toEqual(1); })); @@ -381,19 +381,19 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { pending('This should be tested in the e2e test'); const filteringCells = fix.debugElement.queryAll(By.css(FILTER_UI_CELL)); filteringCells[4].query(By.css('igx-chip')).nativeElement.click(); - tick(); fix.detectChanges(); + tick(); const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW)); const filterIcon = filterUIRow.query(By.css('igx-icon')); const input = filterUIRow.query(By.directive(IgxInputDirective)); filterIcon.nativeElement.click(); - tick(); fix.detectChanges(); + tick(); input.nativeElement.click(); - tick(); fix.detectChanges(); + tick(); const outlet = document.getElementsByClassName('igx-grid__outlet')[0]; let calendar = outlet.getElementsByClassName('igx-calendar')[0]; @@ -402,14 +402,14 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { const monthView = calendar.querySelector('.igx-calendar-picker__date'); monthView.dispatchEvent(new Event('click')); - tick(); fix.detectChanges(); + tick(); const firstMonth = calendar.querySelector('.igx-calendar__month'); const firstMonthText = (firstMonth as HTMLElement).innerText; firstMonth.dispatchEvent(new Event('click')); - tick(); fix.detectChanges(); + tick(); calendar = outlet.getElementsByClassName('igx-calendar')[0]; const month = calendar.querySelector('.igx-calendar-picker__date'); @@ -421,32 +421,32 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { pending('This should be tested in the e2e test'); const filteringCells = fix.debugElement.queryAll(By.css(FILTER_UI_CELL)); filteringCells[4].query(By.css('igx-chip')).nativeElement.click(); - tick(); fix.detectChanges(); + tick(); const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW)); const filterIcon = filterUIRow.query(By.css('igx-icon')); const input = filterUIRow.query(By.directive(IgxInputDirective)); filterIcon.nativeElement.click(); - tick(); fix.detectChanges(); + tick(); input.nativeElement.click(); - tick(); fix.detectChanges(); + tick(); const outlet = document.getElementsByClassName('igx-grid__outlet')[0]; let calendar = outlet.getElementsByClassName('igx-calendar')[0]; const monthView = calendar.querySelectorAll('.igx-calendar-picker__date')[1]; monthView.dispatchEvent(new Event('click')); - tick(); fix.detectChanges(); + tick(); const firstMonth = calendar.querySelectorAll('.igx-calendar__year')[0]; firstMonth.dispatchEvent(new Event('click')); - tick(); fix.detectChanges(); + tick(); calendar = outlet.getElementsByClassName('igx-calendar')[0]; const month = calendar.querySelectorAll('.igx-calendar-picker__date')[1]; @@ -1275,8 +1275,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { const filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent)); const datePicker = filteringRow.query(By.directive(IgxDatePickerComponent)); datePicker.componentInstance.getEditElement().click(); - tick(); fix.detectChanges(); + tick(); const outlet = document.getElementsByClassName('igx-grid__outlet')[0]; const calendar = outlet.getElementsByClassName('igx-calendar')[0]; @@ -2230,8 +2230,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { // Equals condition datePicker.triggerEventHandler('click', null); - tick(); fix.detectChanges(); + tick(); const currentDay = document.querySelector('.igx-days-view__date--current'); @@ -2684,6 +2684,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { fix.detectChanges(); tBodyContent.triggerEventHandler('focus', null); + fix.detectChanges(); tick(); expect(console.error).not.toHaveBeenCalled(); })); @@ -2955,8 +2956,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { GridFunctions.openFilterDDAndSelectCondition(fix, 0); datePicker.triggerEventHandler('click', null); - tick(); fix.detectChanges(); + tick(); const outlet = document.getElementsByClassName('igx-grid__outlet')[0]; const calendar = outlet.getElementsByClassName('igx-calendar')[0]; @@ -2968,8 +2969,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { flush(); fix.detectChanges(); input.triggerEventHandler('change', null); - tick(); fix.detectChanges(); + tick(); expect(grid.rowList.length).toEqual(1); })); @@ -3324,23 +3325,23 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { const moveRight = GridFunctions.getExcelStyleFilteringMoveButtons(fix)[1]; moveLeft.click(); - tick(); fix.detectChanges(); + tick(); expect(grid.columns[2].field).toBe('ProductName'); expect(grid.columns[1].field).toBe('Downloads'); moveLeft.click(); - tick(); fix.detectChanges(); + tick(); expect(grid.columns[1].field).toBe('ID'); expect(grid.columns[0].field).toBe('Downloads'); ControlsFunction.verifyButtonIsDisabled(moveLeft); moveRight.click(); - tick(); fix.detectChanges(); + tick(); expect(grid.columns[0].field).toBe('ID'); expect(grid.columns[1].field).toBe('Downloads'); @@ -3784,12 +3785,12 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { const checkbox = GridFunctions.getExcelStyleFilteringCheckboxes(fix); checkbox[0].click(); - tick(); fix.detectChanges(); + tick(); checkbox[2].click(); - tick(); fix.detectChanges(); + tick(); GridFunctions.clickApplyExcelStyleFiltering(fix); fix.detectChanges(); @@ -4499,13 +4500,13 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { const checkbox = GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu); checkbox[0].click(); // Select All - tick(); fix.detectChanges(); + tick(); checkbox[2].click(); // Ignite UI for Angular checkbox[3].click(); // Ignite UI for JavaScript - tick(); fix.detectChanges(); + tick(); GridFunctions.clickApplyExcelStyleFiltering(fix, excelMenu); tick(); @@ -4527,14 +4528,14 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { const checkbox = GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu); checkbox[0].click(); // Select All - tick(); fix.detectChanges(); + tick(); checkbox[2].click(); // Ignite UI for Angular checkbox[3].click(); // Ignite UI for JavaScript checkbox[4].click(); // NetAdvantage - tick(); fix.detectChanges(); + tick(); GridFunctions.clickApplyExcelStyleFiltering(fix, excelMenu); tick(); @@ -4556,15 +4557,15 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { const checkbox = GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu); checkbox[0].click(); // Select All - tick(); fix.detectChanges(); + tick(); checkbox[2].click(); checkbox[3].click(); checkbox[4].click(); checkbox[6].click(); - tick(); fix.detectChanges(); + tick(); expect(() => { GridFunctions.clickApplyExcelStyleFiltering(fix, excelMenu); @@ -4578,14 +4579,14 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { const checkbox = GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu); checkbox[0].click(); // Select All - tick(); fix.detectChanges(); + tick(); checkbox[1].click(); // (Blanks) checkbox[2].click(); // Ignite UI for Angular checkbox[3].click(); // Ignite UI for JavaScript - tick(); fix.detectChanges(); + tick(); GridFunctions.clickApplyExcelStyleFiltering(fix, excelMenu); tick(); @@ -5587,8 +5588,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { const checkbox = GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu)[1]; checkbox.click(); - tick(); fix.detectChanges(); + tick(); const applyButton = GridFunctions.getApplyButtonExcelStyleFiltering(fix); applyButton.focus(); @@ -6092,12 +6093,12 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { fix.detectChanges(); checkboxes[0].click(); - tick(); fix.detectChanges(); + tick(); checkboxes[2].click(); - tick(); fix.detectChanges(); + tick(); GridFunctions.clickApplyExcelStyleFiltering(fix); tick(); @@ -6288,14 +6289,14 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { const expressions = GridFunctions.getExcelCustomFilteringDateExpressions(fix); const lastExpression = expressions[expressions.length - 1]; (lastExpression.querySelector('igx-select').querySelector('igx-input-group') as HTMLElement).click(); - tick(); fix.detectChanges(); + tick(); const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down__list.igx-toggle')); const todayItem = dropdownList.children[0].children.find(item => item.nativeElement?.innerText === 'Today'); todayItem.nativeElement.click(); - tick(); fix.detectChanges(); + tick(); GridFunctions.clickClearFilterExcelStyleCustomFiltering(fix); tick(); @@ -6439,23 +6440,23 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { const moveRight = GridFunctions.getExcelStyleFilteringMoveButtons(fix)[1]; moveLeft.click(); - tick(); fix.detectChanges(); + tick(); expect(grid.columns[2].field).toBe('ProductName'); expect(grid.columns[1].field).toBe('Downloads'); moveLeft.click(); - tick(); fix.detectChanges(); + tick(); expect(grid.columns[1].field).toBe('ID'); expect(grid.columns[0].field).toBe('Downloads'); ControlsFunction.verifyButtonIsDisabled(moveLeft); moveRight.click(); - tick(); fix.detectChanges(); + tick(); expect(grid.columns[0].field).toBe('ID'); expect(grid.columns[1].field).toBe('Downloads'); @@ -6848,8 +6849,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { const checkboxElements = GridFunctions.getExcelStyleFilteringCheckboxes(fix); checkboxElements[2].click(); - tick(); fix.detectChanges(); + tick(); GridFunctions.clickApplyExcelStyleFiltering(fix); fix.detectChanges(); @@ -7548,8 +7549,8 @@ const closeChipFromFilteringUIRow = (fix, grid, columnName, index) => { GridFunctions.openFilterDDAndSelectCondition(fix, index); close.triggerEventHandler('click', null); - tick(); fix.detectChanges(); + tick(); const filteringExpressions = grid.filteringExpressionsTree.find(columnName) as FilteringExpressionsTree; verifyEmitFilteringDone(grid, filteringExpressions, 1); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-validation.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-validation.spec.ts index 9b660e56674..81720de7653 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-validation.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-validation.spec.ts @@ -220,14 +220,14 @@ describe('IgxGrid - Validation #grid', () => { expect(positionSettings.closeAnimation.options.params).toEqual({ duration: '75ms' }); cell.errorTooltip.first.close(); - tick(); fixture.detectChanges(); + tick(); expect(cell.errorTooltip.first.collapsed).toBeTrue(); const element = fixture.debugElement.query(By.directive(IgxTooltipTargetDirective)).nativeElement; element.dispatchEvent(new MouseEvent('mouseenter')); - flush(); fixture.detectChanges(); + tick(); expect(cell.errorTooltip.first.collapsed).toBeFalse(); })); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts index 9b0937c4fcc..ffa5822baa7 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts @@ -759,6 +759,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect(hidingUI).toBeDefined(); hidingUI.click(); + fixture.detectChanges(); tick(); fixture.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts index 153afd981d6..13eee0cc921 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts @@ -1125,7 +1125,6 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { column.disabledSummaries = ['count']; fixture.detectChanges(); tick(); - fixture.detectChanges(); expect(getterSpy).toHaveBeenCalledTimes(7); expect(summaryCell.textContent.trim()).toEqual(''); @@ -1466,7 +1465,6 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { fixture.componentInstance.islandCols2.push('Col2'); fixture.detectChanges(); tick(); - fixture.detectChanges(); child2Headers = child2Grid.queryAll(By.css('igx-grid-header')); expect(child2Headers.length).toEqual(4); @@ -1517,7 +1515,6 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { fixture.componentInstance.islandCols2.push('Col2'); fixture.detectChanges(); tick(); - fixture.detectChanges(); UIInteractions.simulateClickAndSelectEvent(row1.expander); fixture.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts index bca74571c50..2bbeda44a15 100644 --- a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts +++ b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts @@ -200,8 +200,8 @@ describe('IgxQueryBuilder', () => { const buttonsContainer = Array.from(group.querySelectorAll('.igx-filter-tree__buttons'))[1]; const buttons = Array.from(buttonsContainer.querySelectorAll('button')); (buttons[0] as HTMLElement).click(); - tick(); fix.detectChanges(); + tick(); // Newly added condition should be empty QueryBuilderFunctions.verifyEditModeExpressionInputStates(fix, true, false, false, false); @@ -237,8 +237,8 @@ describe('IgxQueryBuilder', () => { const buttonsContainer = Array.from(group.querySelectorAll('.igx-filter-tree__buttons'))[1]; const buttons = Array.from(buttonsContainer.querySelectorAll('button')); (buttons[1] as HTMLElement).click(); - tick(); fix.detectChanges(); + tick(); // Newly added condition should be empty QueryBuilderFunctions.verifyEditModeExpressionInputStates(fix, true, false, false, false); @@ -296,8 +296,8 @@ describe('IgxQueryBuilder', () => { const buttonsContainer = Array.from(group.querySelectorAll('.igx-filter-tree__buttons'))[1]; const buttons = Array.from(buttonsContainer.querySelectorAll('button')); (buttons[1] as HTMLElement).click(); - tick(); fix.detectChanges(); + tick(); // Newly added condition should be empty QueryBuilderFunctions.verifyEditModeExpressionInputStates(fix, true, false, false, false); @@ -1662,8 +1662,8 @@ describe('IgxQueryBuilder', () => { //cancel edit closeBtn.click(); - tick(); fix.detectChanges(); + tick(); //Verify changes are reverted QueryBuilderFunctions.verifyExpressionChipContent(fix, [1], 'OrderId', 'Greater Than', '3'); @@ -1742,8 +1742,8 @@ describe('IgxQueryBuilder', () => { const buttonsContainer = Array.from(group.querySelectorAll('.igx-filter-tree__buttons'))[1]; const buttons = Array.from(buttonsContainer.querySelectorAll('button')); (buttons[0] as HTMLElement).click(); - tick(); fix.detectChanges(); + tick(); QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 3); // Select 'Delivered' column. QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 1); // Select 'True' operator. @@ -1773,8 +1773,8 @@ describe('IgxQueryBuilder', () => { const buttonsContainer = Array.from(group.querySelectorAll('.igx-filter-tree__buttons'))[1]; const buttons = Array.from(buttonsContainer.querySelectorAll('button')); (buttons[0] as HTMLElement).click(); - tick(); fix.detectChanges(); + tick(); // Click on the 'close' button const closeBtn = QueryBuilderFunctions.getQueryBuilderExpressionCloseButton(fix); @@ -1799,8 +1799,8 @@ describe('IgxQueryBuilder', () => { const buttonsContainer = Array.from(group.querySelectorAll('.igx-filter-tree__buttons'))[1]; const buttons = Array.from(buttonsContainer.querySelectorAll('button')); (buttons[0] as HTMLElement).click(); - tick(); fix.detectChanges(); + tick(); // Add condition with 'in' operator to open inner query QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 0); // Select 'OrderName' column. @@ -2403,16 +2403,16 @@ describe('IgxQueryBuilder', () => { // Open the combo (combo.querySelector('igx-input-group') as HTMLElement).click(); - tick(); fixture.detectChanges(); + tick(); // Select item const outlet = Array.from(document.querySelectorAll(`.igx-drop-down__list-scroll`)) .filter(item => (item as HTMLElement).checkVisibility())[0] as HTMLElement; const comboItem = outlet.querySelectorAll(`.igx-drop-down__item`)[0] as HTMLElement; comboItem.click(); - tick(); fixture.detectChanges(); + tick(); // Commit the expression QueryBuilderFunctions.clickQueryBuilderExpressionCommitButton(fixture); diff --git a/projects/igniteui-angular/src/lib/select/select.component.spec.ts b/projects/igniteui-angular/src/lib/select/select.component.spec.ts index 76a525181e9..8fcb47cf07c 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.spec.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.spec.ts @@ -210,8 +210,8 @@ describe('igxSelect', () => { expect(select.collapsed).toBeFalsy(); selectedItemEl.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); expect(select.collapsed).toBeTruthy(); })); @@ -223,16 +223,16 @@ describe('igxSelect', () => { const selectedItemEl = selectList.children[1]; expect(select.collapsed).toBeFalsy(); selectedItemEl.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); expect(select.collapsed).toBeTruthy(); select.open(); fixture.detectChanges(); expect(select.collapsed).toBeFalsy(); selectedItemEl.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); expect(select.collapsed).toBeTruthy(); expect(select.selectionChanging.emit).toHaveBeenCalledTimes(1); })); @@ -246,8 +246,8 @@ describe('igxSelect', () => { expect(select.collapsed).toBeFalsy(); toggleBtn.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); expect(select.collapsed).toBeTruthy(); })); @@ -260,8 +260,8 @@ describe('igxSelect', () => { expect(select.collapsed).toBeFalsy(); select.close(); - tick(); fixture.detectChanges(); + tick(); expect(select.collapsed).toBeTruthy(); select.toggle(); @@ -269,8 +269,8 @@ describe('igxSelect', () => { expect(select.collapsed).toBeFalsy(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(select.collapsed).toBeTruthy(); })); @@ -280,8 +280,8 @@ describe('igxSelect', () => { const inputGroup = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP)); inputGroup.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); expect(select.collapsed).toBeTruthy(); expect(selectListWrapper.nativeElement.classList.contains('igx-toggle--hidden')).toBeTruthy(); })); @@ -299,20 +299,20 @@ describe('igxSelect', () => { spyOn(select, 'close').and.callThrough(); inputGroup.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); verifyOpenCloseEvents(1, 0, 1); inputGroup.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); verifyOpenCloseEvents(1, 1, 2); select.disabled = true; fixture.detectChanges(); inputGroup.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); // No additional calls, because select is disabled expect(select.closing.emit).toHaveBeenCalledTimes(1); @@ -325,16 +325,16 @@ describe('igxSelect', () => { const selectedItemEl = selectList.children[2]; select.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(select.collapsed).toBeFalsy(); spyOn(select.closing, 'emit'); spyOn(select.closed, 'emit'); selectedItemEl.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); expect(select.closing.emit).toHaveBeenCalledTimes(1); expect(select.closed.emit).toHaveBeenCalledTimes(1); })); @@ -352,13 +352,13 @@ describe('igxSelect', () => { spyOn(select, 'close').and.callThrough(); toggleBtn.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); verifyOpenCloseEvents(1, 0, 1); toggleBtn.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); verifyOpenCloseEvents(1, 1, 2); })); @@ -369,14 +369,14 @@ describe('igxSelect', () => { expect(select).toBeDefined(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(select.collapsed).toBeFalsy(); dummyInput.focus(); dummyInput.click(); - tick(); fixture.detectChanges(); + tick(); expect(dummyInput).toEqual(document.activeElement); expect(select.collapsed).toBeTruthy(); @@ -399,15 +399,16 @@ describe('igxSelect', () => { expect(select).toBeDefined(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(select.collapsed).toBeFalsy(); dummyInput.focus(); dummyInput.click(); - tick(); + fixture.detectChanges(); + tick(); expect(dummyInput).toEqual(document.activeElement); expect(select.collapsed).toBeFalsy(); @@ -432,14 +433,14 @@ describe('igxSelect', () => { expect(dropdownWrapper.nativeElement.getAttribute('aria-hidden')).toEqual('true'); select.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(inputElement.nativeElement.getAttribute('aria-expanded')).toEqual('true'); expect(dropdownWrapper.nativeElement.getAttribute('aria-hidden')).toEqual('false'); select.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(inputElement.nativeElement.getAttribute('aria-expanded')).toEqual('false'); expect(dropdownWrapper.nativeElement.getAttribute('aria-hidden')).toEqual('true'); })); @@ -469,7 +470,6 @@ describe('igxSelect', () => { select.type = 'box'; fixture.detectChanges(); tick(); - fixture.detectChanges(); expect(inputGroup.nativeElement.classList.contains(CSS_CLASS_INPUT_GROUP_BOX)).toBeTruthy(); select.type = 'border'; @@ -488,8 +488,9 @@ describe('igxSelect', () => { dummyInput.focus(); dummyInput.click(); - tick(); + fixture.detectChanges(); + tick(); expect(dummyInput).toEqual(document.activeElement); expect(select.collapsed).toBeTruthy(); })); @@ -509,8 +510,9 @@ describe('igxSelect', () => { dummyInput.focus(); dummyInput.click(); - tick(); + fixture.detectChanges(); + tick(); expect(dummyInput).toEqual(document.activeElement); expect(select.collapsed).toBeFalsy(); })); @@ -596,8 +598,8 @@ describe('igxSelect', () => { inputGroup.nativeElement.click(); const toggleBtn = fix.debugElement.query(By.css('.' + CSS_CLASS_TOGGLE_BUTTON)); toggleBtn.nativeElement.click(); - tick(); fix.detectChanges(); + tick(); expect(selectComp.collapsed).toEqual(true); inputGroupInvalidClass = dom.query(By.css('.' + CSS_CLASS_INPUT_GROUP_INVALID)); @@ -796,8 +798,8 @@ describe('igxSelect', () => { const inputGroup = fix.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP)); inputGroup.nativeElement.click(); - tick(); fix.detectChanges(); + tick(); expect(selectComp.collapsed).toBeFalsy(); selectComp.close(); @@ -808,8 +810,8 @@ describe('igxSelect', () => { fix.detectChanges(); inputGroup.nativeElement.click(); - tick(); fix.detectChanges(); + tick(); expect(selectComp.collapsed).toBeTruthy(); })); @@ -842,20 +844,20 @@ describe('igxSelect', () => { let selectedItemIndex = 5; select.toggle(); - tick(); fixture.detectChanges(); + tick(); selectList.children[selectedItemIndex].nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); verifySelectedItem(selectedItemIndex); selectedItemIndex = 15; select.toggle(); - tick(); fixture.detectChanges(); + tick(); selectList.children[selectedItemIndex].nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); verifySelectedItem(selectedItemIndex); })); @@ -902,35 +904,35 @@ describe('igxSelect', () => { it('should select item with ENTER/SPACE keys', fakeAsync(() => { let selectedItemIndex = 2; select.toggle(); - tick(); fixture.detectChanges(); + tick(); inputElement.triggerEventHandler('keydown', arrowDownKeyEvent); inputElement.triggerEventHandler('keydown', arrowDownKeyEvent); inputElement.triggerEventHandler('keydown', spaceKeyEvent); - tick(); fixture.detectChanges(); + tick(); verifySelectedItem(selectedItemIndex); selectedItemIndex = 4; select.toggle(); - tick(); fixture.detectChanges(); + tick(); inputElement.triggerEventHandler('keydown', arrowDownKeyEvent); inputElement.triggerEventHandler('keydown', arrowDownKeyEvent); inputElement.triggerEventHandler('keydown', enterKeyEvent); - tick(); fixture.detectChanges(); + tick(); verifySelectedItem(selectedItemIndex); })); it('should allow single selection only', fakeAsync(() => { let selectedItemIndex = 5; select.toggle(); - tick(); fixture.detectChanges(); + tick(); selectList.children[selectedItemIndex].nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); verifySelectedItem(selectedItemIndex); selectedItemIndex = 15; @@ -966,13 +968,13 @@ describe('igxSelect', () => { const focusedItemIndex = 0; const selectedItemIndex = 8; select.toggle(); - tick(); fixture.detectChanges(); + tick(); verifyFocusedItem(focusedItemIndex); selectList.children[selectedItemIndex].nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); verifySelectedItem(selectedItemIndex); expect(select.items[focusedItemIndex].focused).toBeFalsy(); @@ -981,8 +983,8 @@ describe('igxSelect', () => { fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); verifyFocusedItem(focusedItemIndex); })); @@ -1005,11 +1007,11 @@ describe('igxSelect', () => { // Select item - mouse click select.toggle(); - tick(); fixture.detectChanges(); + tick(); selectList.children[selectedItemIndex].nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); checkInputValue(); // Select item - selectItem method @@ -1019,8 +1021,8 @@ describe('igxSelect', () => { tick(); fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); checkInputValue(); // Select item - item selected property @@ -1028,8 +1030,7 @@ describe('igxSelect', () => { selectedItemValue = select.items[selectedItemIndex].value; select.items[selectedItemIndex].selected = true; fixture.detectChanges(); - tick(); - fixture.detectChanges(); + tick(); checkInputValue(); // Select item - value property @@ -1037,8 +1038,7 @@ describe('igxSelect', () => { selectedItemValue = select.items[selectedItemIndex].value; select.value = select.items[selectedItemIndex].value.toString(); fixture.detectChanges(); - tick(); - fixture.detectChanges(); + tick(); checkInputValue(); })); @@ -1059,11 +1059,11 @@ describe('igxSelect', () => { // Select item - mouse click select.toggle(); - tick(); fixture.detectChanges(); + tick(); selectList.children[selectedItemIndex].nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); checkInputValue(); // Select item - selectItem method @@ -1072,16 +1072,15 @@ describe('igxSelect', () => { tick(); fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); checkInputValue(); // Select item - item selected property selectedItemIndex = 2; select.items[selectedItemIndex].selected = true; fixture.detectChanges(); - tick(); - fixture.detectChanges(); + tick(); checkInputValue(); })); @@ -1097,8 +1096,8 @@ describe('igxSelect', () => { tick(); fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); expect(select.selectedItem).toBeUndefined(); expect(select.input.value).toEqual(''); expect(inputElement.nativeElement.value).toEqual(''); @@ -1133,8 +1132,8 @@ describe('igxSelect', () => { // Focus item when there is not a selected item select.toggle(); - tick(); fixture.detectChanges(); + tick(); navigateDropdownItems(arrowDownKeyEvent); expect(select.value).toBeNull(); expect(select.input.value).toEqual(''); @@ -1143,11 +1142,11 @@ describe('igxSelect', () => { // Focus item when there is a selected item selectedItem = select.items[13] as IgxSelectItemComponent; selectedItem.element.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); navigateDropdownItems(arrowUpKeyEvent); focusedItem = select.items[selectedItem.index - navigationStep]; verifyFocusedItemIsNotSelected(); @@ -1192,19 +1191,19 @@ describe('igxSelect', () => { let selectedItemIndex = 4; select.toggle(); - tick(); fixture.detectChanges(); + tick(); select.items[selectedItemIndex].element.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); verifySelectedItem(selectedItemIndex); const previousItem = select.items[selectedItemIndex]; selectedItemIndex = 1; select.items[selectedItemIndex].element.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); verifySelectedItem(selectedItemIndex); expect(previousItem.focused).toBeFalsy(); })); @@ -1214,11 +1213,11 @@ describe('igxSelect', () => { const selectedItem = select.items[2] as IgxSelectItemComponent; inputElement.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); selectedItemEl.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); expect(selectedItem.selected).toBeTruthy(); expect(select.value).toEqual(selectedItem.value); expect(select.input.value.toString().trim()).toEqual(selectedItem.value); @@ -1250,11 +1249,11 @@ describe('igxSelect', () => { }; select.toggle(); - tick(); fixture.detectChanges(); + tick(); selectedItemEl.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); expect(select.selectionChanging.emit).toHaveBeenCalledTimes(1); expect(select.selectItem).toHaveBeenCalledTimes(1); expect(select.selectionChanging.emit).toHaveBeenCalledWith(args); @@ -1264,11 +1263,11 @@ describe('igxSelect', () => { selectedItemEl = selectList.children[10]; args.newSelection = selectedItem; select.toggle(); - tick(); fixture.detectChanges(); + tick(); selectedItemEl.nativeElement.click(); - tick(); fixture.detectChanges(); + tick(); expect(select.selectionChanging.emit).toHaveBeenCalledTimes(2); expect(select.selectItem).toHaveBeenCalledTimes(2); expect(select.selectionChanging.emit).toHaveBeenCalledWith(args); @@ -1319,14 +1318,14 @@ describe('igxSelect', () => { const navigateDropdownItems = (selectEvent: KeyboardEvent) => { inputElement.triggerEventHandler('keydown', altArrowDownKeyEvent); - tick(); fixture.detectChanges(); + tick(); for (let itemIndex = 0; itemIndex < selectedItem.index; itemIndex++) { inputElement.triggerEventHandler('keydown', arrowDownKeyEvent); } inputElement.triggerEventHandler('keydown', selectEvent); - tick(); fixture.detectChanges(); + tick(); }; navigateDropdownItems(enterKeyEvent); @@ -1460,8 +1459,8 @@ describe('igxSelect', () => { // Select item - mouse click select.toggle(); - tick(); fixture.detectChanges(); + tick(); itemElementToSelect.click(); fixture.detectChanges(); checkInputValue(); @@ -1472,8 +1471,8 @@ describe('igxSelect', () => { tick(); fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); checkInputValue(); // Select item - item selected property @@ -1523,11 +1522,11 @@ describe('igxSelect', () => { const selectedItemElement = groupElement.children[selectedItemIndex].nativeElement; select.toggle(); - tick(); fixture.detectChanges(); - selectedItemElement.click(); tick(); + selectedItemElement.click(); fixture.detectChanges(); + tick(); expect(select.input.value).toEqual(select.items[selectedItemIndex - 1].value); expect(select.value).toEqual(select.items[selectedItemIndex - 1].value); const selectedItems = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_SELECTED_ITEM)); @@ -1577,8 +1576,8 @@ describe('igxSelect', () => { const focusedItemElement = groupElement.children[focusedItemIndex].nativeElement; select.toggle(); - tick(); fixture.detectChanges(); + tick(); const focusedItems = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_FOCUSED_ITEM)); expect(focusedItems.length).toEqual(1); expect(focusedItemElement.classList.contains(CSS_CLASS_FOCUSED_ITEM)).toBeTruthy(); @@ -1605,8 +1604,8 @@ describe('igxSelect', () => { expect(select.collapsed).toBeFalsy(); inputElement.triggerEventHandler('keydown', altArrowUpKeyEvent); - tick(); fixture.detectChanges(); + tick(); expect(select.collapsed).toBeTruthy(); })); @@ -1618,8 +1617,8 @@ describe('igxSelect', () => { expect(select.collapsed).toBeFalsy(); inputElement.triggerEventHandler('keydown', enterKeyEvent); - tick(); fixture.detectChanges(); + tick(); expect(select.collapsed).toBeTruthy(); })); @@ -1631,8 +1630,8 @@ describe('igxSelect', () => { expect(select.collapsed).toBeFalsy(); inputElement.triggerEventHandler('keydown', spaceKeyEvent); - tick(); fixture.detectChanges(); + tick(); expect(select.collapsed).toBeTruthy(); })); @@ -1644,8 +1643,8 @@ describe('igxSelect', () => { expect(select.collapsed).toBeFalsy(); inputElement.triggerEventHandler('keydown', escapeKeyEvent); - tick(); fixture.detectChanges(); + tick(); expect(select.collapsed).toBeTruthy(); select.toggle(); @@ -1653,8 +1652,8 @@ describe('igxSelect', () => { expect(select.collapsed).toBeFalsy(); inputElement.triggerEventHandler('keydown', tabKeyEvent); inputElement.nativeElement.dispatchEvent(new Event('blur')); - tick(); fixture.detectChanges(); + tick(); expect(select.collapsed).toBeTruthy(); select.toggle(); @@ -1662,8 +1661,8 @@ describe('igxSelect', () => { expect(select.collapsed).toBeFalsy(); inputElement.triggerEventHandler('keydown', shiftTabKeysEvent); inputElement.nativeElement.dispatchEvent(new Event('blur')); - tick(); fixture.detectChanges(); + tick(); expect(select.collapsed).toBeTruthy(); })); @@ -1677,13 +1676,13 @@ describe('igxSelect', () => { spyOn(select, 'close').and.callThrough(); inputElement.triggerEventHandler('keydown', altArrowDownKeyEvent); - tick(); fixture.detectChanges(); + tick(); verifyOpenCloseEvents(1, 0, 1); inputElement.triggerEventHandler('keydown', altArrowUpKeyEvent); - tick(); fixture.detectChanges(); + tick(); verifyOpenCloseEvents(1, 1, 2); })); @@ -1697,13 +1696,13 @@ describe('igxSelect', () => { spyOn(select, 'toggle').and.callThrough(); inputElement.triggerEventHandler('keydown', enterKeyEvent); - tick(); fixture.detectChanges(); + tick(); verifyOpenCloseEvents(1, 0, 0); inputElement.triggerEventHandler('keydown', escapeKeyEvent); - tick(); fixture.detectChanges(); + tick(); verifyOpenCloseEvents(1, 1, 0); })); @@ -1717,13 +1716,13 @@ describe('igxSelect', () => { spyOn(select, 'toggle').and.callThrough(); inputElement.triggerEventHandler('keydown', spaceKeyEvent); - tick(); fixture.detectChanges(); + tick(); verifyOpenCloseEvents(1, 0, 0); inputElement.triggerEventHandler('keydown', escapeKeyEvent); - tick(); fixture.detectChanges(); + tick(); verifyOpenCloseEvents(1, 1, 0); })); @@ -1842,12 +1841,12 @@ describe('igxSelect', () => { fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); inputElement.triggerEventHandler('keydown', arrowDownKeyEvent); - tick(); fixture.detectChanges(); + tick(); expect(selectedItem.selected).toBeTruthy(); verifyFocusedItem(focusedItemIndex); @@ -1857,12 +1856,12 @@ describe('igxSelect', () => { fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); inputElement.triggerEventHandler('keydown', arrowUpKeyEvent); - tick(); fixture.detectChanges(); + tick(); selectedItem = select.items[7]; focusedItemIndex = selectedItem.index - 1; verifyFocusedItem(focusedItemIndex); @@ -1885,10 +1884,12 @@ describe('igxSelect', () => { fixture.detectChanges(); inputElement.triggerEventHandler('keydown', arrowDownKeyEvent); + fixture.detectChanges(); verifySelectedItem(selectedItemIndex); inputElement.triggerEventHandler('keydown', arrowUpKeyEvent); + fixture.detectChanges(); verifySelectedItem(--selectedItemIndex); // Does not wrap selection - arrow up stays on the first item if selected @@ -1898,6 +1899,7 @@ describe('igxSelect', () => { fixture.detectChanges(); inputElement.triggerEventHandler('keydown', arrowUpKeyEvent); + fixture.detectChanges(); verifySelectedItem(selectedItemIndex); }); @@ -1960,11 +1962,11 @@ describe('igxSelect', () => { const filteredItemsInxs = fixture.componentInstance.filterCities('pa'); for (const item of filteredItemsInxs) { inputElement.triggerEventHandler('keydown', { key: 'p' }); - tick(); fixture.detectChanges(); + tick(); inputElement.triggerEventHandler('keydown', { key: 'a' }); - tick(); fixture.detectChanges(); + tick(); verifyFocusedItem(item); tick(500); fixture.detectChanges(); @@ -1978,15 +1980,15 @@ describe('igxSelect', () => { const filteredItemsInxs = fixture.componentInstance.filterCities('l'); inputElement.triggerEventHandler('keydown', { key: 'l' }); - tick(); fixture.detectChanges(); + tick(); verifyFocusedItem(filteredItemsInxs[0]); tick(500); fixture.detectChanges(); inputElement.triggerEventHandler('keydown', { key: 'L' }); - tick(); fixture.detectChanges(); + tick(); verifyFocusedItem(filteredItemsInxs[1]); discardPeriodicTasks(); })); @@ -1998,16 +2000,16 @@ describe('igxSelect', () => { const filteredItemsInxs = fixture.componentInstance.filterCities('l'); for (const item of filteredItemsInxs) { inputElement.triggerEventHandler('keydown', { key: 'l' }); - tick(); fixture.detectChanges(); + tick(); verifyFocusedItem(item); tick(500); fixture.detectChanges(); } // Navigate back to the first filtered item to verify that selection is wrapped inputElement.triggerEventHandler('keydown', { key: 'l' }); - tick(); fixture.detectChanges(); + tick(); verifyFocusedItem(filteredItemsInxs[0]); discardPeriodicTasks(); @@ -2034,8 +2036,8 @@ describe('igxSelect', () => { let filteredItemsInxs = fixture.componentInstance.filterCities('ü'); for (const item of filteredItemsInxs) { inputElement.triggerEventHandler('keydown', { key: 'ü' }); - tick(); fixture.detectChanges(); + tick(); verifyFocusedItem(item); tick(500); fixture.detectChanges(); @@ -2045,8 +2047,8 @@ describe('igxSelect', () => { filteredItemsInxs = fixture.componentInstance.filterCities('с'); for (const item of filteredItemsInxs) { inputElement.triggerEventHandler('keydown', { key: 'с' }); - tick(); fixture.detectChanges(); + tick(); verifyFocusedItem(item); tick(500); fixture.detectChanges(); @@ -2056,21 +2058,21 @@ describe('igxSelect', () => { it('should not change focus when pressing non-matching character and dropdown is opened', fakeAsync(() => { select.open(); - tick(); fixture.detectChanges(); + tick(); const filteredItemsInxs = fixture.componentInstance.filterCities('l'); inputElement.triggerEventHandler('keydown', { key: 'l' }); - tick(); fixture.detectChanges(); + tick(); verifyFocusedItem(filteredItemsInxs[0]); tick(500); fixture.detectChanges(); // Verify that focus is unchanged inputElement.triggerEventHandler('keydown', { key: 'w' }); - tick(); fixture.detectChanges(); + tick(); verifyFocusedItem(filteredItemsInxs[0]); discardPeriodicTasks(); @@ -2080,11 +2082,11 @@ describe('igxSelect', () => { const filteredItemsInxs = fixture.componentInstance.filterCities('pa'); for (const item of filteredItemsInxs) { inputElement.triggerEventHandler('keydown', { key: 'p' }); - tick(); fixture.detectChanges(); + tick(); inputElement.triggerEventHandler('keydown', { key: 'a' }); - tick(); fixture.detectChanges(); + tick(); verifySelectedItem(item); tick(500); fixture.detectChanges(); @@ -2095,15 +2097,15 @@ describe('igxSelect', () => { it('character key navigation when dropdown is closed should be case insensitive', fakeAsync(() => { const filteredItemsInxs = fixture.componentInstance.filterCities('l'); inputElement.triggerEventHandler('keydown', { key: 'l' }); - tick(); fixture.detectChanges(); + tick(); verifySelectedItem(filteredItemsInxs[0]); tick(500); fixture.detectChanges(); inputElement.triggerEventHandler('keydown', { key: 'L' }); - tick(); fixture.detectChanges(); + tick(); verifySelectedItem(filteredItemsInxs[1]); discardPeriodicTasks(); @@ -2113,16 +2115,16 @@ describe('igxSelect', () => { const filteredItemsInxs = fixture.componentInstance.filterCities('l'); for (const item of filteredItemsInxs) { inputElement.triggerEventHandler('keydown', { key: 'l' }); - tick(); fixture.detectChanges(); + tick(); verifySelectedItem(item); tick(500); fixture.detectChanges(); } // Navigate back to the first filtered item to verify that selection is wrapped inputElement.triggerEventHandler('keydown', { key: 'l' }); - tick(); fixture.detectChanges(); + tick(); verifySelectedItem(filteredItemsInxs[0]); discardPeriodicTasks(); @@ -2147,8 +2149,8 @@ describe('igxSelect', () => { let filteredItemsInxs = fixture.componentInstance.filterCities('ü'); for (const item of filteredItemsInxs) { inputElement.triggerEventHandler('keydown', { key: 'ü' }); - tick(); fixture.detectChanges(); + tick(); verifySelectedItem(item); tick(500); fixture.detectChanges(); @@ -2158,8 +2160,8 @@ describe('igxSelect', () => { filteredItemsInxs = fixture.componentInstance.filterCities('с'); for (const item of filteredItemsInxs) { inputElement.triggerEventHandler('keydown', { key: 'с' }); - tick(); fixture.detectChanges(); + tick(); verifySelectedItem(item); tick(500); fixture.detectChanges(); @@ -2170,23 +2172,23 @@ describe('igxSelect', () => { it('should not change selection when pressing non-matching character and dropdown is closed', fakeAsync(() => { const filteredItemsInxs = fixture.componentInstance.filterCities('l'); inputElement.triggerEventHandler('keydown', { key: 'l' }); - tick(); fixture.detectChanges(); + tick(); verifyFocusedItem(filteredItemsInxs[0]); tick(500); fixture.detectChanges(); // Verify that selection is unchanged inputElement.triggerEventHandler('keydown', { key: 'q' }); - tick(); fixture.detectChanges(); + tick(); verifyFocusedItem(filteredItemsInxs[0]); tick(500); fixture.detectChanges(); inputElement.triggerEventHandler('keydown', { key: 'l' }); - tick(); fixture.detectChanges(); + tick(); verifyFocusedItem(filteredItemsInxs[1]); discardPeriodicTasks(); @@ -2254,8 +2256,8 @@ describe('igxSelect', () => { select.items[selectedItemIndex].selected = true; fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); getBoundingRectangles(); verifySelectedItemPositioning(); listTop = selectedItemRect.top - selectedItemRect.height; @@ -2263,13 +2265,13 @@ describe('igxSelect', () => { selectedItemIndex = 2; select.toggle(); - tick(); fixture.detectChanges(); + tick(); select.items[selectedItemIndex].selected = true; fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); getBoundingRectangles(); verifySelectedItemPositioning(); listTop = selectedItemRect.top - selectedItemRect.height * 2; @@ -2277,13 +2279,13 @@ describe('igxSelect', () => { selectedItemIndex = 0; select.toggle(); - tick(); fixture.detectChanges(); + tick(); select.items[selectedItemIndex].selected = true; fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); getBoundingRectangles(); verifySelectedItemPositioning(); listTop = selectedItemRect.top; @@ -2308,32 +2310,32 @@ describe('igxSelect', () => { select.items[selectedItemIndex].selected = true; fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); getBoundingRectangles(); verifySelectedItemPositioning(); selectedItemIndex = 5; select.toggle(); - tick(); fixture.detectChanges(); + tick(); select.items[selectedItemIndex].selected = true; fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); getBoundingRectangles(); verifySelectedItemPositioning(); selectedItemIndex = 9; select.toggle(); - tick(); fixture.detectChanges(); + tick(); select.items[selectedItemIndex].selected = true; fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); getBoundingRectangles(); verifySelectedItemPositioning(); })); @@ -2353,8 +2355,8 @@ describe('igxSelect', () => { select.items[selectedItemIndex].selected = true; fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); getBoundingRectangles(); verifySelectedItemPositioning(); })); @@ -2367,8 +2369,8 @@ describe('igxSelect', () => { (select.element as HTMLElement).style.marginTop = '10px'; fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); getBoundingRectangles(); verifySelectedItemPositioning(); (select.element as HTMLElement).parentElement.style.marginTop = '10px'; @@ -2382,8 +2384,8 @@ describe('igxSelect', () => { select.items[selectedItemIndex].selected = true; fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); getBoundingRectangles(); })); }); @@ -2403,8 +2405,8 @@ describe('igxSelect', () => { select.items[selectedItemIndex].selected = true; fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); getBoundingRectangles(); })); it('should display selected item and all possible items above and below when item in the middle of the list is selected', @@ -2414,8 +2416,8 @@ describe('igxSelect', () => { select.items[selectedItemIndex].selected = true; fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); getBoundingRectangles(); })); @@ -2427,8 +2429,8 @@ describe('igxSelect', () => { select.items[selectedItemIndex].selected = true; fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); getBoundingRectangles(); })); }); @@ -2448,10 +2450,11 @@ describe('igxSelect', () => { select.items[selectedItemIndex].selected = true; fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); document.documentElement.scrollLeft += 50; document.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); getBoundingRectangles(); verifySelectedItemPositioning(); @@ -2460,15 +2463,16 @@ describe('igxSelect', () => { selectedItemIndex = 2; select.toggle(); - tick(); fixture.detectChanges(); + tick(); select.items[selectedItemIndex].selected = true; fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); document.documentElement.scrollLeft += 50; document.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); getBoundingRectangles(); verifySelectedItemPositioning(); @@ -2477,15 +2481,16 @@ describe('igxSelect', () => { selectedItemIndex = 0; select.toggle(); - tick(); fixture.detectChanges(); + tick(); select.items[selectedItemIndex].selected = true; fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); document.documentElement.scrollLeft += 50; document.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); getBoundingRectangles(); verifySelectedItemPositioning(); @@ -2498,10 +2503,11 @@ describe('igxSelect', () => { select.items[selectedItemIndex].selected = true; fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); document.documentElement.scrollTop += 20; document.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); getBoundingRectangles(); verifySelectedItemPositioning(); @@ -2510,15 +2516,16 @@ describe('igxSelect', () => { selectedItemIndex = 2; select.toggle(); - tick(); fixture.detectChanges(); + tick(); select.items[selectedItemIndex].selected = true; fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); document.documentElement.scrollTop += 20; document.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); getBoundingRectangles(); verifySelectedItemPositioning(); @@ -2527,15 +2534,16 @@ describe('igxSelect', () => { selectedItemIndex = 0; select.toggle(); - tick(); fixture.detectChanges(); + tick(); select.items[selectedItemIndex].selected = true; fixture.detectChanges(); select.toggle(); - tick(); fixture.detectChanges(); + tick(); document.documentElement.scrollTop += 20; document.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); getBoundingRectangles(); verifySelectedItemPositioning(); @@ -2633,8 +2641,8 @@ describe('igxSelect', () => { expect(select.collapsed).toBeTruthy(); hintContainer.click(); - tick(); fixture.detectChanges(); + tick(); expect(select.collapsed).toBeTruthy(); })); diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts index 65fbdebe537..9f6712b2269 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts @@ -377,6 +377,7 @@ describe('igxOverlay', () => { fixture.detectChanges(); fixture.componentInstance.buttonElement.nativeElement.click(); + fixture.detectChanges(); tick(); const overlayDiv = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_MAIN)[0] as HTMLElement; @@ -873,6 +874,7 @@ describe('igxOverlay', () => { const button2 = fixture.nativeElement.getElementsByClassName('buttonTwo')[0]; button1.click(); + fixture.detectChanges(); tick(); const overlayDiv = (fixture.nativeElement as HTMLElement) @@ -881,6 +883,7 @@ describe('igxOverlay', () => { expect(wrapperElement1.style.visibility).toEqual(''); button2.click(); + fixture.detectChanges(); tick(); const wrapperElement2 = overlayDiv.children[1] as HTMLElement; expect(wrapperElement1.style.visibility).toEqual(''); @@ -903,6 +906,7 @@ describe('igxOverlay', () => { .parentElement.getElementsByClassName(CLASS_SCROLLABLE_DIV)[0] as HTMLElement; scrollableDiv.scrollTop += 5; scrollableDiv.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); overlayElement = (fixture.nativeElement as HTMLElement) @@ -911,6 +915,7 @@ describe('igxOverlay', () => { scrollableDiv.scrollTop += 100; scrollableDiv.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); overlayElement = (fixture.nativeElement as HTMLElement) @@ -1304,8 +1309,8 @@ describe('igxOverlay', () => { expect(wrapperElement.style.visibility).toEqual(''); document.body.click(); - tick(); fixture.detectChanges(); + tick(); wrapperElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0] as HTMLElement; @@ -1341,15 +1346,15 @@ describe('igxOverlay', () => { const toggledDiv = componentElement.children[0] as HTMLElement; toggledDiv.click(); - tick(); fixture.detectChanges(); + tick(); wrapperElement = shadowRoot.querySelector(`.${CLASS_OVERLAY_WRAPPER}`) as HTMLElement; expect(wrapperElement.style.visibility).toEqual(''); document.body.click(); - tick(); fixture.detectChanges(); + tick(); wrapperElement = shadowRoot.querySelector(`.${CLASS_OVERLAY_WRAPPER}`) as HTMLElement; expect(wrapperElement.style.visibility).toEqual('hidden'); @@ -2014,6 +2019,7 @@ describe('igxOverlay', () => { document.documentElement.scrollTop += 9; document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); expect(document.documentElement.scrollTop).toEqual(9); @@ -2023,6 +2029,7 @@ describe('igxOverlay', () => { document.documentElement.scrollTop += 25; document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); expect(document.documentElement.scrollTop).toEqual(34); @@ -2059,11 +2066,13 @@ describe('igxOverlay', () => { expect(buttonElement.getBoundingClientRect().y).toEqual(0); document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); expect(document.documentElement.scrollTop).toEqual(0); document.documentElement.scrollTop += 25; document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); expect(document.documentElement.scrollTop).toEqual(25); contentElement = (fixture.nativeElement as HTMLElement) @@ -2074,6 +2083,7 @@ describe('igxOverlay', () => { document.documentElement.scrollTop += 500; document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); contentElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT)[0] as HTMLElement; @@ -2330,8 +2340,6 @@ describe('igxOverlay', () => { buttonElement.click(); fixture.detectChanges(); tick(); - - fixture.detectChanges(); const contentElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT)[0] as HTMLElement; expect(contentElement.children.length).toEqual(1); @@ -2662,6 +2670,7 @@ describe('igxOverlay', () => { expect(overlay.hide).toHaveBeenCalledTimes(0); document.documentElement.scrollTop += scrollTolerance; document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); expect(scrollSpy).toHaveBeenCalledTimes(1); expect(overlay.hide).toHaveBeenCalledTimes(0); @@ -2697,6 +2706,7 @@ describe('igxOverlay', () => { document.documentElement.scrollTop += scrollTolerance; document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); expect(scrollSpy).toHaveBeenCalledTimes(1); expect(scrollStrategy.detach).toHaveBeenCalledTimes(0); @@ -2817,8 +2827,8 @@ describe('igxOverlay', () => { fixture.componentInstance.target = buttonElement; component.ButtonPositioningSettings.minSize = { width: 80, height: 80 }; buttonElement.click(); - tick(); fixture.detectChanges(); + tick(); const contentElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT)[0] as HTMLElement; @@ -3163,6 +3173,7 @@ describe('igxOverlay', () => { expect(overlay.hide).toHaveBeenCalledTimes(0); document.documentElement.scrollTop += scrollTolerance; document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); expect(scrollSpy).toHaveBeenCalledTimes(1); expect(overlay.hide).toHaveBeenCalledTimes(0); @@ -3198,6 +3209,7 @@ describe('igxOverlay', () => { document.documentElement.scrollTop += scrollTolerance; document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); expect(scrollSpy).toHaveBeenCalledTimes(1); expect(scrollStrategy.detach).toHaveBeenCalledTimes(0); @@ -3559,6 +3571,7 @@ describe('igxOverlay', () => { expect(fixture.componentInstance.customComponent.nativeElement.style.height).toEqual('100%'); expect(fixture.componentInstance.customComponent.nativeElement.getBoundingClientRect().height).toEqual(280); fixture.componentInstance.buttonElement.nativeElement.click(); + fixture.detectChanges(); tick(); const componentElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName('customList')[0] as HTMLElement; @@ -3621,6 +3634,7 @@ describe('igxOverlay', () => { document.documentElement.scrollTop = 100; document.documentElement.scrollLeft = 50; document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); expect(componentRect).toEqual(componentElement.getBoundingClientRect()); @@ -3655,16 +3669,19 @@ describe('igxOverlay', () => { tick(); expect(document.documentElement.scrollTop).toEqual(0); document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); expect(document.documentElement.scrollTop).toEqual(0); document.documentElement.scrollTop += 25; document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); expect(document.documentElement.scrollTop).toEqual(0); document.documentElement.scrollTop += 1000; document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); const wrapperElement = (fixture.nativeElement as HTMLElement) @@ -3710,8 +3727,6 @@ describe('igxOverlay', () => { buttonElement.click(); fixture.detectChanges(); tick(); - - fixture.detectChanges(); const contentElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT)[0] as HTMLElement; const expectedStyle = 'width:100px; height:100px; background-color:red'; @@ -3764,8 +3779,6 @@ describe('igxOverlay', () => { buttonElement.click(); fixture.detectChanges(); tick(); - - fixture.detectChanges(); const contentElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT)[0] as HTMLElement; let overlayStyle = contentElement.getElementsByTagName('div')[0].getAttribute('style'); @@ -3817,8 +3830,6 @@ describe('igxOverlay', () => { buttonElement.click(); fixture.detectChanges(); tick(); - - fixture.detectChanges(); const contentElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT)[0] as HTMLElement; const expectedStyle = 'width:100px; height:100px; background-color:red'; @@ -3868,8 +3879,8 @@ describe('igxOverlay', () => { componentElement.ButtonPositioningSettings.horizontalStartPoint = HorizontalAlignment.Left; fixture.componentInstance.target = buttonElement; buttonElement.click(); - tick(); fixture.detectChanges(); + tick(); fixture.detectChanges(); const contentElement = (fixture.nativeElement as HTMLElement) @@ -3922,8 +3933,8 @@ describe('igxOverlay', () => { fixture.componentInstance.target = buttonElement; componentElement.ButtonPositioningSettings.minSize = { width: 80, height: 80 }; buttonElement.click(); - tick(); fixture.detectChanges(); + tick(); const contentElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT)[0] as HTMLElement; @@ -3971,7 +3982,6 @@ describe('igxOverlay', () => { buttonElement.click(); fixture.detectChanges(); tick(); - fixture.detectChanges(); const contentElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT)[0] as HTMLElement; @@ -4016,8 +4026,8 @@ describe('igxOverlay', () => { fixture.componentInstance.target = buttonElement; componentElement.ButtonPositioningSettings.minSize = { width: 80, height: 80 }; buttonElement.click(); - tick(); fixture.detectChanges(); + tick(); const contentElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT)[0] as HTMLElement; @@ -4059,6 +4069,7 @@ describe('igxOverlay', () => { document.documentElement.scrollTop = 100; document.documentElement.scrollLeft = 50; document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); expect(componentRect).toEqual(componentElement.getBoundingClientRect()); @@ -4099,6 +4110,7 @@ describe('igxOverlay', () => { document.documentElement.scrollTop = 40; document.documentElement.scrollLeft = 30; document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); expect(componentRect).toEqual(componentElement.getBoundingClientRect()); @@ -4138,6 +4150,7 @@ describe('igxOverlay', () => { document.documentElement.scrollTop = scrollTolerance; document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); let wrapperElement = (fixture.nativeElement as HTMLElement) @@ -4148,6 +4161,7 @@ describe('igxOverlay', () => { document.documentElement.scrollTop += scrollTolerance * 2; document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); wrapperElement = (fixture.nativeElement as HTMLElement) @@ -4188,6 +4202,7 @@ describe('igxOverlay', () => { document.documentElement.scrollTop += scrollTolerance; document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); expect(document.documentElement.scrollTop).toEqual(scrollTolerance); const wrapperElement = (fixture.nativeElement as HTMLElement) @@ -4227,6 +4242,7 @@ describe('igxOverlay', () => { document.documentElement.scrollTop += scrollTolerance; document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); let wrapperElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0] as HTMLElement; @@ -4236,6 +4252,7 @@ describe('igxOverlay', () => { document.documentElement.scrollTop += scrollTolerance * 2; document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); wrapperElement = (fixture.nativeElement as HTMLElement) @@ -4279,6 +4296,7 @@ describe('igxOverlay', () => { document.documentElement.scrollTop += scrollTolerance; document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); expect(document.documentElement.scrollTop).toEqual(scrollTolerance); expect(document.getElementsByClassName(CLASS_OVERLAY_WRAPPER).length).toEqual(1); @@ -4322,6 +4340,7 @@ describe('igxOverlay', () => { document.documentElement.scrollTop += scrollTolerance; document.documentElement.dispatchEvent(new Event('scroll')); + fixture.detectChanges(); tick(); const newElementRect = componentElement.getBoundingClientRect(); expect(document.documentElement.scrollTop).toEqual(scrollTolerance); @@ -4359,6 +4378,7 @@ describe('igxOverlay', () => { expect(overlay.closing.emit).toHaveBeenCalledTimes(0); document.documentElement.click(); + fixture.detectChanges(); tick(); expect(overlay.closing.emit).toHaveBeenCalledTimes(1); expect(overlay.closing.emit).toHaveBeenCalledWith({ @@ -4394,6 +4414,7 @@ describe('igxOverlay', () => { expect(overlay.show).toHaveBeenCalledTimes(1); divElement.click(); + fixture.detectChanges(); tick(); expect(overlay.closing.emit).toHaveBeenCalledTimes(0); @@ -4420,6 +4441,7 @@ describe('igxOverlay', () => { expect(overlay.show).toHaveBeenCalledTimes(2); divElement.click(); + fixture.detectChanges(); tick(); expect(overlay.closing.emit).toHaveBeenCalledTimes(2); diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts index e64423138d3..1e912287b91 100644 --- a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts @@ -625,6 +625,7 @@ describe('IgxSimpleCombo', () => { expect(dropdownListBox.nativeElement.getAttribute('aria-labelledby')).toEqual(combo.placeholder); combo.open(); + fixture.detectChanges(); tick(); fixture.detectChanges(); @@ -632,6 +633,7 @@ describe('IgxSimpleCombo', () => { expect(list.nativeElement.getAttribute('aria-activedescendant')).toEqual(combo.dropdown.focusedItem.id); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', list); + fixture.detectChanges(); tick(); fixture.detectChanges(); expect(list.nativeElement.getAttribute('aria-activedescendant')).toEqual(combo.dropdown.focusedItem.id); @@ -643,10 +645,12 @@ describe('IgxSimpleCombo', () => { it('should render aria-expanded attribute properly', fakeAsync(() => { expect(input.nativeElement.getAttribute('aria-expanded')).toMatch('false'); combo.open(); + fixture.detectChanges(); tick(); fixture.detectChanges(); expect(input.nativeElement.getAttribute('aria-expanded')).toMatch('true'); combo.close(); + fixture.detectChanges(); tick(); fixture.detectChanges(); expect(input.nativeElement.getAttribute('aria-expanded')).toMatch('false'); @@ -670,6 +674,7 @@ describe('IgxSimpleCombo', () => { fixture.componentInstance.size = "large"; fixture.detectChanges(); combo.toggle(); + fixture.detectChanges(); tick(); fixture.detectChanges(); const dropdownItems = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`)); @@ -1163,17 +1168,20 @@ describe('IgxSimpleCombo', () => { it('should not close the dropdown on ArrowUp key if the active item is the first one in the list', fakeAsync(() => { combo.open(); + fixture.detectChanges(); tick(); fixture.detectChanges(); const list = fixture.debugElement.query(By.css(`.${CSS_CLASS_CONTENT}`)); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', list); + fixture.detectChanges(); tick(); fixture.detectChanges(); expect(combo.collapsed).toEqual(false); UIInteractions.triggerEventHandlerKeyDown('ArrowUp', list); + fixture.detectChanges(); tick(); fixture.detectChanges(); expect(combo.collapsed).toEqual(false); @@ -1204,6 +1212,7 @@ describe('IgxSimpleCombo', () => { const dropdownContent = fixture.debugElement.query(By.css(`.${CSS_CLASS_CONTENT}`)); UIInteractions.triggerEventHandlerKeyDown('Tab', dropdownContent); + fixture.detectChanges(); tick(); fixture.detectChanges(); expect(combo.collapsed).toBeTruthy(); @@ -1253,12 +1262,14 @@ describe('IgxSimpleCombo', () => { const toggleBtn = fixture.debugElement.query(By.css(`.${CSS_CLASS_TOGGLEBUTTON}`)); UIInteractions.triggerEventHandlerKeyDown('Enter', toggleBtn); + fixture.detectChanges(); tick(); fixture.detectChanges(); expect(combo.toggle).toHaveBeenCalledTimes(1); expect(combo.collapsed).toEqual(false); UIInteractions.triggerEventHandlerKeyDown('Enter', toggleBtn); + fixture.detectChanges(); tick(); fixture.detectChanges(); expect(combo.toggle).toHaveBeenCalledTimes(2); @@ -1395,6 +1406,7 @@ describe('IgxSimpleCombo', () => { spyOn(combo, 'close').and.callThrough(); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', input); + fixture.detectChanges(); tick(); fixture.detectChanges(); expect(document.activeElement).toHaveClass('igx-combo__content'); @@ -1785,12 +1797,14 @@ describe('IgxSimpleCombo', () => { expect(combo.collapsed).toBeTruthy(); toggleIcon.nativeElement.click(); + fixture.detectChanges(); tick(); fixture.detectChanges(); expect(combo.collapsed).toBeFalsy(); toggleIcon.nativeElement.click(); + fixture.detectChanges(); tick(); fixture.detectChanges(); @@ -1842,6 +1856,7 @@ describe('IgxSimpleCombo', () => { fixture.detectChanges(); combo.dropdown.close(); + fixture.detectChanges(); tick(); fixture.detectChanges(); expect(combo.collapsed).toEqual(true); @@ -1852,6 +1867,7 @@ describe('IgxSimpleCombo', () => { expect(combo.overlaySettings.positionStrategy.settings.verticalDirection).toBe(-1); combo.dropdown.close(); + fixture.detectChanges(); tick(); fixture.detectChanges(); expect(combo.collapsed).toEqual(true); @@ -1883,6 +1899,7 @@ describe('IgxSimpleCombo', () => { fixture.detectChanges(); combo.toggle(); + fixture.detectChanges(); tick(); fixture.detectChanges(); @@ -2086,6 +2103,7 @@ describe('IgxSimpleCombo', () => { expect(combo.filteredData[0].field).toEqual('Arizona'); combo.close(); + fixture.detectChanges(); tick(); fixture.detectChanges(); @@ -2108,6 +2126,7 @@ describe('IgxSimpleCombo', () => { expect(combo.selection.field).toEqual('Connecticut'); combo.close(); + fixture.detectChanges(); tick(); fixture.detectChanges(); @@ -2122,6 +2141,7 @@ describe('IgxSimpleCombo', () => { it('should not select the first item when combo is focused there is no focus item and Enter is pressed', fakeAsync(() => { combo.open(); + fixture.detectChanges(); tick(); fixture.detectChanges(); @@ -2174,6 +2194,7 @@ describe('IgxSimpleCombo', () => { fixture.detectChanges(); UIInteractions.triggerEventHandlerKeyDown('Tab', input); + fixture.detectChanges(); tick(); fixture.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts index 8eafb66af26..acea5a1e6b1 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts @@ -513,8 +513,8 @@ describe('IgxTimePicker', () => { fixture.detectChanges(); toggleIcon.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); expect(timePicker.collapsed).toBeTruthy(); const pickerValue = new Date(fixture.componentInstance.date); pickerValue.setHours(pickerValue.getHours() - 1); @@ -523,8 +523,8 @@ describe('IgxTimePicker', () => { it('should open the dropdown with `ArrowDown` + `Alt` key press and close it on outside click', fakeAsync(() => { UIInteractions.triggerEventHandlerKeyDown('ArrowDown', timePickerDebElement, true); - tick(); fixture.detectChanges(); + tick(); expect(timePicker.collapsed).toBeFalsy(); const event = new WheelEvent('wheel', { deltaX: 0, deltaY: -100 }); @@ -547,8 +547,8 @@ describe('IgxTimePicker', () => { const input = fixture.debugElement.query(By.css(CSS_CLASS_INPUT)); input.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); expect(timePicker.collapsed).toBeFalsy(); const event = new WheelEvent('wheel', { deltaX: 0, deltaY: -100 }); @@ -605,8 +605,8 @@ describe('IgxTimePicker', () => { it('should open/close the dropdown and keep the current selection on Space/Enter key press', fakeAsync(() => { UIInteractions.triggerEventHandlerKeyDown(' ', timePickerDebElement); - tick(); fixture.detectChanges(); + tick(); expect(timePicker.collapsed).toBeFalsy(); const event = new WheelEvent('wheel', { deltaX: 0, deltaY: -100 }); @@ -644,16 +644,16 @@ describe('IgxTimePicker', () => { expect((dateTimeEditor.nativeElement.value).normalize('NFKC')).toEqual(`0${selectedHour}:${selectedMinutes} ${selectedAmpm}`); UIInteractions.triggerEventHandlerKeyDown('Escape', timePickerDebElement); - tick(); fixture.detectChanges(); + tick(); expect(timePicker.collapsed).toBeTruthy(); expect(timePicker.value).toEqual(fixture.componentInstance.date); })); it('should not change the current selection and close the dropdown on OK button click', fakeAsync(() => { timePicker.open(); - tick(); fixture.detectChanges(); + tick(); const event = new WheelEvent('wheel', { deltaX: 0, deltaY: -100 }); hourColumn.triggerEventHandler('wheel', event); @@ -661,8 +661,8 @@ describe('IgxTimePicker', () => { const okButton = fixture.debugElement.queryAll(By.css('button'))[1]; okButton.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); expect(timePicker.collapsed).toBeTruthy(); const pickerValue = new Date(fixture.componentInstance.date); @@ -672,8 +672,8 @@ describe('IgxTimePicker', () => { it('should close the dropdown and discard the current selection on Cancel button click', fakeAsync(() => { timePicker.open(); - tick(); fixture.detectChanges(); + tick(); const event = new WheelEvent('wheel', { deltaX: 0, deltaY: -100 }); hourColumn.triggerEventHandler('wheel', event); @@ -681,8 +681,8 @@ describe('IgxTimePicker', () => { const cancelButton = fixture.debugElement.queryAll(By.css('button'))[0]; cancelButton.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); expect(timePicker.collapsed).toBeTruthy(); expect(timePicker.value).toEqual(fixture.componentInstance.date); @@ -695,15 +695,15 @@ describe('IgxTimePicker', () => { spyOn(timePicker.closed, 'emit').and.callThrough(); timePicker.open(); - tick(); fixture.detectChanges(); + tick(); expect(timePicker.collapsed).toBeFalsy(); expect(timePicker.opening.emit).toHaveBeenCalled(); expect(timePicker.opened.emit).toHaveBeenCalled(); timePicker.close(); - tick(); fixture.detectChanges(); + tick(); expect(timePicker.collapsed).toBeTruthy(); expect(timePicker.closing.emit).toHaveBeenCalled(); expect(timePicker.closed.emit).toHaveBeenCalled(); @@ -718,8 +718,8 @@ describe('IgxTimePicker', () => { const openingSub = timePicker.opening.subscribe((event) => event.cancel = true); timePicker.open(); - tick(); fixture.detectChanges(); + tick(); expect(timePicker.collapsed).toBeTruthy(); expect(timePicker.opening.emit).toHaveBeenCalled(); expect(timePicker.opened.emit).not.toHaveBeenCalled(); @@ -729,12 +729,12 @@ describe('IgxTimePicker', () => { const closingSub = timePicker.closing.subscribe((event) => event.cancel = true); timePicker.open(); - tick(); fixture.detectChanges(); + tick(); timePicker.close(); - tick(); fixture.detectChanges(); + tick(); expect(timePicker.collapsed).toBeFalsy(); expect(timePicker.closing.emit).toHaveBeenCalled(); expect(timePicker.closed.emit).not.toHaveBeenCalled(); @@ -841,8 +841,8 @@ describe('IgxTimePicker', () => { // apply selected value on toggle btn click const toggleIcon = fixture.debugElement.query(By.css('igx-prefix')); toggleIcon.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); expect(timePicker.collapsed).toBeTrue(); expect((timePicker.value as Date).getHours()).toEqual(expectedValuedHour); @@ -892,8 +892,8 @@ describe('IgxTimePicker', () => { // apply selected value on toggle btn click const toggleIcon = fixture.debugElement.query(By.css('igx-prefix')); toggleIcon.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); expect(timePicker.collapsed).toBeTrue(); expect((timePicker.value as Date).getHours()).toEqual(expectedValuedHour); @@ -1197,22 +1197,22 @@ describe('IgxTimePicker', () => { fixture.detectChanges(); timePicker.open(); - tick(); fixture.detectChanges(); + tick(); let dropdown = fixture.debugElement.query(By.css(CSS_CLASS_DROPDOWN)); expect(dropdown).toBeDefined(); timePicker.close(); - tick(); fixture.detectChanges(); + tick(); fixture.componentInstance.timePicker.mode = PickerInteractionMode.Dialog; fixture.detectChanges(); timePicker.open(); - tick(); fixture.detectChanges(); + tick(); dropdown = fixture.debugElement.query(By.css(CSS_CLASS_DROPDOWN)); expect(dropdown).toBeNull(); @@ -1235,8 +1235,8 @@ describe('IgxTimePicker', () => { fixture.detectChanges(); timePicker.open(); - tick(); fixture.detectChanges(); + tick(); const selectedItems = fixture.debugElement.queryAll(By.css(CSS_CLASS_SELECTED_ITEM)); const selectedHour = selectedItems[0].nativeElement.innerText; @@ -1259,8 +1259,8 @@ describe('IgxTimePicker', () => { fixture.detectChanges(); timePicker.open(); - tick(); fixture.detectChanges(); + tick(); const selectedItems = fixture.debugElement.queryAll(By.css(CSS_CLASS_SELECTED_ITEM)); const selectedHour = selectedItems[0].nativeElement.innerText; @@ -1331,8 +1331,8 @@ describe('IgxTimePicker', () => { fixture.detectChanges(); timePicker.open(); - tick(); fixture.detectChanges(); + tick(); const hourHeader = fixture.debugElement.query(By.css(CSS_CLASS_HEADER_HOUR)); const selectedTime = hourHeader.children[0].nativeElement.innerText; @@ -1353,8 +1353,8 @@ describe('IgxTimePicker', () => { expect(inputEl.getAttribute('aria-expanded')).toEqual('false'); timePicker.open(); - tick(); fixture.detectChanges(); + tick(); expect(inputEl.getAttribute('aria-expanded')).toEqual('true'); let selectedItems = fixture.debugElement.queryAll(By.css(CSS_CLASS_SELECTED_ITEM)); @@ -1381,8 +1381,8 @@ describe('IgxTimePicker', () => { expect(selectedAMPM.attributes['aria-valuemax']).toEqual('PM'); timePicker.close(); - tick(); fixture.detectChanges(); + tick(); expect(inputEl.getAttribute('aria-expanded')).toEqual('false'); timePicker.value = new Date(2021, 24, 2, 6, 42, 0); @@ -1392,8 +1392,8 @@ describe('IgxTimePicker', () => { fixture.detectChanges(); timePicker.open(); - tick(); fixture.detectChanges(); + tick(); selectedItems = fixture.debugElement.queryAll(By.css(CSS_CLASS_SELECTED_ITEM)); selectedHour = selectedItems[0]; @@ -1410,8 +1410,8 @@ describe('IgxTimePicker', () => { const item = ampmColumn.queryAll(By.directive(IgxTimeItemDirective))[4]; item.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); selectedItems = fixture.debugElement.queryAll(By.css(CSS_CLASS_SELECTED_ITEM)); selectedHour = selectedItems[0]; @@ -1427,8 +1427,8 @@ describe('IgxTimePicker', () => { expect(selectedMinute.attributes['aria-valuemax']).toEqual('28'); timePicker.close(); - tick(); fixture.detectChanges(); + tick(); })); it('should select closest value when value does not match dropdown values', fakeAsync(() => { @@ -1438,8 +1438,8 @@ describe('IgxTimePicker', () => { fixture.detectChanges(); timePicker.open(); - tick(); fixture.detectChanges(); + tick(); const selectedItems = fixture.debugElement.queryAll(By.css(CSS_CLASS_SELECTED_ITEM)); const selectedHour = selectedItems[0].nativeElement.innerText; @@ -1458,8 +1458,8 @@ describe('IgxTimePicker', () => { fixture.detectChanges(); timePicker.open(); - tick(); fixture.detectChanges(); + tick(); const selectedItems = fixture.debugElement.queryAll(By.css(CSS_CLASS_SELECTED_ITEM)); const selectedHour = selectedItems[0].nativeElement.innerText; @@ -1479,8 +1479,8 @@ describe('IgxTimePicker', () => { fixture.detectChanges(); timePicker.open(); - tick(); fixture.detectChanges(); + tick(); const selectedItems = fixture.debugElement.queryAll(By.css(CSS_CLASS_SELECTED_ITEM)); const selectedHour = selectedItems[0].nativeElement.innerText; @@ -1497,8 +1497,8 @@ describe('IgxTimePicker', () => { secondsColumn = fixture.debugElement.query(By.css(CSS_CLASS_SECONDSLIST)); timePicker.open(); - tick(); fixture.detectChanges(); + tick(); expect(timePicker.collapsed).toBeFalsy(); const expectedHour = '12'; @@ -1509,32 +1509,32 @@ describe('IgxTimePicker', () => { let item; let selectedItems; item = ampmColumn.queryAll(By.directive(IgxTimeItemDirective))[4]; item.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); selectedItems = fixture.debugElement.queryAll(By.css(CSS_CLASS_SELECTED_ITEM)); let selectedAMPM = selectedItems[3].nativeElement.innerText; expect(selectedAMPM).toEqual(expectedAmPm); item = hourColumn.queryAll(By.directive(IgxTimeItemDirective))[4]; item.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); selectedItems = fixture.debugElement.queryAll(By.css(CSS_CLASS_SELECTED_ITEM)); const selectedHour = selectedItems[0].nativeElement.innerText; expect(selectedHour).toEqual(expectedHour); item = minutesColumn.queryAll(By.directive(IgxTimeItemDirective))[4]; item.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); selectedItems = fixture.debugElement.queryAll(By.css(CSS_CLASS_SELECTED_ITEM)); const selectedMinute = selectedItems[1].nativeElement.innerText; expect(selectedMinute).toEqual(expectedMinute); item = secondsColumn.queryAll(By.directive(IgxTimeItemDirective))[4]; item.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); selectedItems = fixture.debugElement.queryAll(By.css(CSS_CLASS_SELECTED_ITEM)); const selectedSecond = selectedItems[2].nativeElement.innerText; expect(selectedSecond).toEqual(expectedSecond); @@ -1544,8 +1544,8 @@ describe('IgxTimePicker', () => { item = ampmColumn.queryAll(By.directive(IgxTimeItemDirective))[4]; item.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); - tick(); fixture.detectChanges(); + tick(); selectedItems = fixture.debugElement.queryAll(By.css(CSS_CLASS_SELECTED_ITEM)); selectedAMPM = selectedItems[3].nativeElement.innerText; expect(selectedAMPM).toEqual(expectedAmPm); @@ -1577,23 +1577,23 @@ describe('IgxTimePicker', () => { it('should set headerOrientation prop in dialog mode', fakeAsync(() => { timePicker.mode = PickerInteractionMode.Dialog; timePicker.open(); - tick(); fixture.detectChanges(); + tick(); expect(timePicker.headerOrientation).toEqual('horizontal'); let dialogDivVertical = timePickerDebElement.query(By.css(CSS_CLASS_TIME_PICKER_VERTICAL)); expect(dialogDivVertical).toBeNull(); timePicker.close(); - tick(); fixture.detectChanges(); + tick(); timePicker.mode = PickerInteractionMode.Dialog; timePicker.headerOrientation = 'vertical'; fixture.detectChanges(); timePicker.open(); - tick(); fixture.detectChanges(); + tick(); dialogDivVertical = timePickerDebElement.query(By.css(CSS_CLASS_TIME_PICKER_VERTICAL)); expect(dialogDivVertical).not.toBeNull(); @@ -1605,8 +1605,8 @@ describe('IgxTimePicker', () => { fixture.detectChanges(); timePicker.open(); - tick(); fixture.detectChanges(); + tick(); const header = fixture.debugElement.query(By.css(CSS_CLASS_HEADER)); expect(header).toBeNull(); @@ -1671,8 +1671,8 @@ describe('IgxTimePicker', () => { expect(timePicker.collapsed).toBeTruthy(); UIInteractions.triggerEventHandlerKeyDown(' ', timePickerDebElement); - tick(); fixture.detectChanges(); + tick(); expect(timePicker.collapsed).toBeFalsy(); expect(timePicker.opening.emit).toHaveBeenCalledTimes(1); @@ -1685,8 +1685,8 @@ describe('IgxTimePicker', () => { expect(timePicker.collapsed).toBeTruthy(); timePicker.open(); - tick(); fixture.detectChanges(); + tick(); expect(timePicker.collapsed).toBeFalsy(); UIInteractions.triggerKeyDownEvtUponElem('Escape', timePickerElement, true);