diff --git a/src/material/autocomplete/autocomplete.spec.ts b/src/material/autocomplete/autocomplete.spec.ts index 9632f858a588..2016cd689100 100644 --- a/src/material/autocomplete/autocomplete.spec.ts +++ b/src/material/autocomplete/autocomplete.spec.ts @@ -10,14 +10,12 @@ import { dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent, - MockNgZone, typeInElement, } from '@angular/cdk/testing/private'; import { ChangeDetectionStrategy, Component, ElementRef, - NgZone, OnDestroy, OnInit, Provider, @@ -58,7 +56,6 @@ import { describe('MDC-based MatAutocomplete', () => { let overlayContainerElement: HTMLElement; - let zone: MockNgZone; // Creates a test component fixture. function createComponent(component: Type, providers: Provider[] = []) { @@ -72,7 +69,7 @@ describe('MDC-based MatAutocomplete', () => { NoopAnimationsModule, OverlayModule, ], - providers: [{provide: NgZone, useFactory: () => (zone = new MockNgZone())}, ...providers], + providers: [...providers], declarations: [component], }); @@ -163,25 +160,19 @@ describe('MDC-based MatAutocomplete', () => { .toContain('California'); }); - it('should show the panel when the first open is after the initial zone stabilization', waitForAsync(() => { - // Note that we're running outside the Angular zone, in order to be able - // to test properly without the subscription from `_subscribeToClosingActions` - // giving us a false positive. - fixture.ngZone!.runOutsideAngular(() => { - fixture.componentInstance.trigger.openPanel(); + it('should show the panel when the first open is after the initial render', waitForAsync(() => { + fixture.componentInstance.trigger.openPanel(); - Promise.resolve().then(() => { - expect(fixture.componentInstance.panel.showPanel) - .withContext(`Expected panel to be visible.`) - .toBe(true); - }); + Promise.resolve().then(() => { + expect(fixture.componentInstance.panel.showPanel) + .withContext(`Expected panel to be visible.`) + .toBe(true); }); })); it('should close the panel when the user clicks away', fakeAsync(() => { dispatchFakeEvent(input, 'focusin'); fixture.detectChanges(); - zone.simulateZoneExit(); dispatchFakeEvent(document, 'click'); tick(); @@ -196,7 +187,6 @@ describe('MDC-based MatAutocomplete', () => { it('should close the panel when the user clicks away via auxilliary button', fakeAsync(() => { dispatchFakeEvent(input, 'focusin'); fixture.detectChanges(); - zone.simulateZoneExit(); dispatchFakeEvent(document, 'auxclick'); tick(); @@ -225,7 +215,6 @@ describe('MDC-based MatAutocomplete', () => { it('should close the panel when an option is clicked', fakeAsync(() => { dispatchFakeEvent(input, 'focusin'); fixture.detectChanges(); - zone.simulateZoneExit(); const option = overlayContainerElement.querySelector('mat-option') as HTMLElement; option.click(); @@ -243,7 +232,6 @@ describe('MDC-based MatAutocomplete', () => { it('should close the panel when a newly created option is clicked', fakeAsync(() => { dispatchFakeEvent(input, 'focusin'); fixture.detectChanges(); - zone.simulateZoneExit(); // Filter down the option list to a subset of original options ('Alabama', 'California') typeInElement(input, 'al'); @@ -331,7 +319,6 @@ describe('MDC-based MatAutocomplete', () => { .withContext('Expected label to float as soon as panel opens.') .toEqual('always'); - zone.simulateZoneExit(); fixture.detectChanges(); const options = overlayContainerElement.querySelectorAll( @@ -603,7 +590,6 @@ describe('MDC-based MatAutocomplete', () => { dispatchFakeEvent(input, 'focusin'); fixture.detectChanges(); - zone.simulateZoneExit(); expect(fixture.componentInstance.trigger.panelOpen) .withContext('Expected panel to be opened on focus.') @@ -629,7 +615,6 @@ describe('MDC-based MatAutocomplete', () => { dispatchFakeEvent(input, 'focusin'); fixture.detectChanges(); - zone.simulateZoneExit(); expect(fixture.componentInstance.trigger.panelOpen) .withContext('Expected panel to be opened on focus.') @@ -712,7 +697,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); // Select an option and reopen the panel. (overlayContainerElement.querySelector('mat-option') as HTMLElement).click(); @@ -721,7 +705,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.detectChanges(); fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); expect(fixture.componentInstance.options.first.selected).toBe(true); @@ -742,7 +725,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); // Select an option and reopen the panel. (overlayContainerElement.querySelector('mat-option') as HTMLElement).click(); @@ -751,7 +733,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.detectChanges(); fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); expect(fixture.componentInstance.options.first.selected).toBe(true); @@ -778,7 +759,6 @@ describe('MDC-based MatAutocomplete', () => { it('should update control value as user types with input value', () => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); typeInElement(input, 'a'); fixture.detectChanges(); @@ -811,7 +791,6 @@ describe('MDC-based MatAutocomplete', () => { it('should update control value when option is selected with option value', fakeAsync(() => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); const options = overlayContainerElement.querySelectorAll( 'mat-option', @@ -827,7 +806,6 @@ describe('MDC-based MatAutocomplete', () => { it('should update the control back to a string if user types after an option is selected', fakeAsync(() => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); const options = overlayContainerElement.querySelectorAll( 'mat-option', @@ -848,7 +826,6 @@ describe('MDC-based MatAutocomplete', () => { it('should fill the text field with display value when an option is selected', fakeAsync(() => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); const options = overlayContainerElement.querySelectorAll( 'mat-option', @@ -864,7 +841,6 @@ describe('MDC-based MatAutocomplete', () => { it('should fill the text field with value if displayWith is not set', fakeAsync(() => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.componentInstance.panel.displayWith = null; fixture.componentInstance.options.toArray()[1].value = 'test value'; @@ -909,7 +885,6 @@ describe('MDC-based MatAutocomplete', () => { it('should clear the previous selection when reactive form field is reset programmatically', fakeAsync(() => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); const options = overlayContainerElement.querySelectorAll( 'mat-option', @@ -976,7 +951,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); const options = overlayContainerElement.querySelectorAll( 'mat-option', @@ -1074,7 +1048,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); })); it('should not focus the option when DOWN key is pressed', () => { @@ -1634,7 +1607,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); const container = document.querySelector('.mat-mdc-autocomplete-panel') as HTMLElement; @@ -1664,7 +1636,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); const container = document.querySelector('.mat-mdc-autocomplete-panel') as HTMLElement; @@ -1751,7 +1722,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); const container = document.querySelector('.mat-mdc-autocomplete-panel') as HTMLElement; @@ -1976,7 +1946,6 @@ describe('MDC-based MatAutocomplete', () => { it('should restore focus to the input when clicking to select a value', fakeAsync(() => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); const option = overlayContainerElement.querySelector('mat-option') as HTMLElement; @@ -2009,7 +1978,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); const inputBottom = inputReference.getBoundingClientRect().bottom; @@ -2068,7 +2036,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); const inputTop = inputReference.getBoundingClientRect().top; @@ -2100,7 +2067,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); let panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!; let initialPanelHeight = panel.getBoundingClientRect().height; @@ -2116,7 +2082,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!; @@ -2136,7 +2101,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); typeInElement(input, 'f'); fixture.detectChanges(); @@ -2169,7 +2133,6 @@ describe('MDC-based MatAutocomplete', () => { dispatchFakeEvent(inputEl, 'focusin'); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); let panel = overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel')!; @@ -2217,7 +2180,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); const inputBottom = inputReference.getBoundingClientRect().bottom; @@ -2243,7 +2205,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); const inputTop = inputReference.getBoundingClientRect().top; @@ -2264,7 +2225,6 @@ describe('MDC-based MatAutocomplete', () => { let openPanel = () => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); }; @@ -2317,7 +2277,6 @@ describe('MDC-based MatAutocomplete', () => { ) as NodeListOf; options[0].click(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); let componentOptions = fixture.componentInstance.options.toArray(); @@ -2346,7 +2305,6 @@ describe('MDC-based MatAutocomplete', () => { ) as NodeListOf; options[0].click(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); let componentOptions = fixture.componentInstance.options.toArray(); @@ -2368,7 +2326,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.componentInstance.trigger.autocomplete.autoActiveFirstOption = true; fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList) @@ -2386,7 +2343,6 @@ describe('MDC-based MatAutocomplete', () => { testComponent.states[1].disabled = true; testComponent.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); expect(overlayContainerElement.querySelectorAll('mat-option')[2].classList) @@ -2403,7 +2359,6 @@ describe('MDC-based MatAutocomplete', () => { } testComponent.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); const selectedOptions = overlayContainerElement.querySelectorAll( @@ -2422,7 +2377,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.componentInstance.trigger.autocomplete.autoActiveFirstOption = true; fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); expect(input.getAttribute('aria-activedescendant')) @@ -2444,7 +2398,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); // Note: should not have a detectChanges call here // in order for the test to fail when it's supposed to. @@ -2463,7 +2416,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.detectChanges(); fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList) @@ -2486,13 +2438,11 @@ describe('MDC-based MatAutocomplete', () => { fixture.detectChanges(); fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); const option = overlayContainerElement.querySelector('mat-option') as HTMLElement; option.click(); fixture.detectChanges(); - zone.simulateZoneExit(); expect(spy).toHaveBeenCalledWith(jasmine.any(MatOptionSelectionChange)); subscription!.unsubscribe(); @@ -2505,10 +2455,8 @@ describe('MDC-based MatAutocomplete', () => { fixture.detectChanges(); fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); (overlayContainerElement.querySelector('mat-option') as HTMLElement).click(); fixture.detectChanges(); - zone.simulateZoneExit(); }; fixture.componentInstance.states = [{code: 'OR', name: 'Oregon'}]; @@ -2537,7 +2485,6 @@ describe('MDC-based MatAutocomplete', () => { typeInElement(input, 'Cali'); fixture.detectChanges(); tick(); - zone.simulateZoneExit(); fixture.detectChanges(); const inputBottom = inputReference.getBoundingClientRect().bottom; @@ -2564,7 +2511,6 @@ describe('MDC-based MatAutocomplete', () => { it('should clear the selected option when the input value is cleared', fakeAsync(() => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); const input = fixture.nativeElement.querySelector('input'); const option = overlayContainerElement.querySelector('mat-option') as HTMLElement; @@ -2604,7 +2550,6 @@ describe('MDC-based MatAutocomplete', () => { trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); const options = overlayContainerElement.querySelectorAll( 'mat-option', @@ -2636,7 +2581,6 @@ describe('MDC-based MatAutocomplete', () => { trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); const options = overlayContainerElement.querySelectorAll( 'mat-option', @@ -2669,7 +2613,6 @@ describe('MDC-based MatAutocomplete', () => { trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); for (let i = 0; i < 5; i++) { dispatchKeyboardEvent(input, 'keydown', DOWN_ARROW); @@ -2697,7 +2640,6 @@ describe('MDC-based MatAutocomplete', () => { trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); const spy = jasmine.createSpy('optionSelected spy'); const subscription = trigger.optionSelections.subscribe(spy); @@ -2735,7 +2677,6 @@ describe('MDC-based MatAutocomplete', () => { trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); const spy = jasmine.createSpy('optionSelected spy'); const subscription = trigger.optionSelections.subscribe(spy); @@ -2766,7 +2707,6 @@ describe('MDC-based MatAutocomplete', () => { trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); const spy = jasmine.createSpy('optionSelected spy'); const subscription = trigger.optionSelections.subscribe(spy); @@ -2791,7 +2731,6 @@ describe('MDC-based MatAutocomplete', () => { // Simulate opening the input and clicking the first option. trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); (overlayContainerElement.querySelector('mat-option') as HTMLElement).click(); tick(); fixture.detectChanges(); @@ -2806,7 +2745,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.detectChanges(); dispatchFakeEvent(input, 'input'); fixture.detectChanges(); - zone.simulateZoneExit(); expect(trigger.panelOpen).toBe(true); expect(input.value).toBe('Alabam'); @@ -2869,7 +2807,6 @@ describe('MDC-based MatAutocomplete', () => { const tabEvent = createKeyboardEvent('keydown', TAB); input.focus(); - zone.simulateZoneExit(); trigger._handleKeydown(tabEvent); @@ -2899,7 +2836,6 @@ describe('MDC-based MatAutocomplete', () => { it('should not prevent escape key propagation when there are no options', () => { fixture.componentInstance.filteredStates = fixture.componentInstance.states = []; fixture.detectChanges(); - zone.simulateZoneExit(); const event = createKeyboardEvent('keydown', ESCAPE); spyOn(event, 'stopPropagation').and.callThrough(); @@ -3110,7 +3046,6 @@ describe('MDC-based MatAutocomplete', () => { trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); expect(trigger.panelOpen).withContext('Expected panel to be open.').toBe(true); @@ -3165,7 +3100,6 @@ describe('MDC-based MatAutocomplete', () => { trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); expect(stateCtrl.value).toBeFalsy(); @@ -3197,7 +3131,6 @@ describe('MDC-based MatAutocomplete', () => { trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); typeInElement(input, 'al'); fixture.detectChanges(); @@ -3253,7 +3186,6 @@ describe('MDC-based MatAutocomplete', () => { trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); expect(stateCtrl.value).toBeFalsy(); @@ -3279,7 +3211,6 @@ describe('MDC-based MatAutocomplete', () => { trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); expect(stateCtrl.value).toBeFalsy(); @@ -3304,7 +3235,6 @@ describe('MDC-based MatAutocomplete', () => { trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); expect(stateCtrl.value).toBeFalsy(); @@ -3329,7 +3259,6 @@ describe('MDC-based MatAutocomplete', () => { trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); expect(stateCtrl.value).toBeFalsy(); @@ -3354,7 +3283,6 @@ describe('MDC-based MatAutocomplete', () => { trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.detectChanges(); expect(stateCtrl.value).toBeFalsy(); @@ -3554,7 +3482,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.detectChanges(); fixture.componentInstance.trigger.openPanel(); - zone.simulateZoneExit(); fixture.detectChanges(); let options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; @@ -3579,7 +3506,6 @@ describe('MDC-based MatAutocomplete', () => { const input = fixture.nativeElement.querySelector('input'); fixture.componentInstance.trigger.openPanel(); - zone.simulateZoneExit(); fixture.detectChanges(); const options = overlayContainerElement.querySelectorAll( @@ -3628,7 +3554,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.detectChanges(); fixture.componentInstance.trigger.openPanel(); - zone.simulateZoneExit(); fixture.detectChanges(); const input = fixture.nativeElement.querySelector('input'); @@ -3656,7 +3581,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.detectChanges(); fixture.componentInstance.trigger.openPanel(); - zone.simulateZoneExit(); fixture.detectChanges(); const input = fixture.nativeElement.querySelector('input'); @@ -3681,7 +3605,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.detectChanges(); fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); const overlayRect = overlayContainerElement .querySelector('.cdk-overlay-pane')! @@ -3699,7 +3622,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.detectChanges(); fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); fixture.componentInstance.trigger.closePanel(); fixture.detectChanges(); @@ -3709,7 +3631,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); const overlayRect = overlayContainerElement .querySelector('.cdk-overlay-pane')! @@ -3758,7 +3679,6 @@ describe('MDC-based MatAutocomplete', () => { fixture.detectChanges(); fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - zone.simulateZoneExit(); expect(fixture.componentInstance.trigger.panelOpen).toBe(true); @@ -3769,31 +3689,6 @@ describe('MDC-based MatAutocomplete', () => { expect(fixture.componentInstance.trigger.panelOpen).toBe(true); }); - it('should emit from `autocomplete.closed` after click outside inside the NgZone', fakeAsync(() => { - const inZoneSpy = jasmine.createSpy('in zone spy'); - - const fixture = createComponent(SimpleAutocomplete, [ - {provide: NgZone, useFactory: () => new NgZone({enableLongStackTrace: false})}, - ]); - const ngZone = TestBed.inject(NgZone); - fixture.detectChanges(); - - fixture.componentInstance.trigger.openPanel(); - fixture.detectChanges(); - flush(); - - const subscription = fixture.componentInstance.trigger.autocomplete.closed.subscribe(() => - inZoneSpy(NgZone.isInAngularZone()), - ); - ngZone.onStable.emit(null); - - dispatchFakeEvent(document, 'click'); - - expect(inZoneSpy).toHaveBeenCalledWith(true); - - subscription.unsubscribe(); - })); - describe('a11y', () => { it('should display checkmark for selection by default', () => { const fixture = createComponent(AutocompleteWithNgModel);