From 514003e78ae433dea456349b44d66515bb00d17c Mon Sep 17 00:00:00 2001 From: Kara Erickson Date: Tue, 7 Mar 2017 21:50:25 -0800 Subject: [PATCH] fix(autocomplete): aria-expanded should be updated when panel hides --- src/lib/autocomplete/autocomplete-trigger.ts | 2 +- src/lib/autocomplete/autocomplete.spec.ts | 102 ++++++++++++------- 2 files changed, 66 insertions(+), 38 deletions(-) diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index 09829b82adb0..314134ab13ce 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -114,7 +114,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { /* Whether or not the autocomplete panel is open. */ get panelOpen(): boolean { - return this._panelOpen; + return this._panelOpen && this.autocomplete.showPanel; } /** Opens the autocomplete suggestion panel. */ diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index 26c609fc1c7d..c08ca577bba8 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -61,35 +61,39 @@ describe('MdAutocomplete', () => { input = fixture.debugElement.query(By.css('input')).nativeElement; }); - it('should open the panel when the input is focused', () => { + it('should open the panel when the input is focused', async(() => { expect(fixture.componentInstance.trigger.panelOpen) .toBe(false, `Expected panel state to start out closed.`); dispatchFakeEvent(input, 'focus'); - fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); - expect(fixture.componentInstance.trigger.panelOpen) - .toBe(true, `Expected panel state to read open when input is focused.`); - expect(overlayContainerElement.textContent) - .toContain('Alabama', `Expected panel to display when input is focused.`); - expect(overlayContainerElement.textContent) - .toContain('California', `Expected panel to display when input is focused.`); - }); + expect(fixture.componentInstance.trigger.panelOpen) + .toBe(true, `Expected panel state to read open when input is focused.`); + expect(overlayContainerElement.textContent) + .toContain('Alabama', `Expected panel to display when input is focused.`); + expect(overlayContainerElement.textContent) + .toContain('California', `Expected panel to display when input is focused.`); + }); + })); - it('should open the panel programmatically', () => { + it('should open the panel programmatically', async(() => { expect(fixture.componentInstance.trigger.panelOpen) .toBe(false, `Expected panel state to start out closed.`); fixture.componentInstance.trigger.openPanel(); - fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); - expect(fixture.componentInstance.trigger.panelOpen) - .toBe(true, `Expected panel state to read open when opened programmatically.`); - expect(overlayContainerElement.textContent) - .toContain('Alabama', `Expected panel to display when opened programmatically.`); - expect(overlayContainerElement.textContent) - .toContain('California', `Expected panel to display when opened programmatically.`); - }); + expect(fixture.componentInstance.trigger.panelOpen) + .toBe(true, `Expected panel state to read open when opened programmatically.`); + expect(overlayContainerElement.textContent) + .toContain('Alabama', `Expected panel to display when opened programmatically.`); + expect(overlayContainerElement.textContent) + .toContain('California', `Expected panel to display when opened programmatically.`); + }); + })); it('should close the panel when blurred', async(() => { dispatchFakeEvent(input, 'focus'); @@ -185,8 +189,6 @@ describe('MdAutocomplete', () => { fixture.whenStable().then(() => { fixture.detectChanges(); - expect(fixture.componentInstance.trigger.panelOpen) - .toBe(true, `Expected panel to stay open when options list is empty.`); expect(panel.classList) .toContain('mat-autocomplete-hidden', `Expected panel to hide itself when empty.`); }); @@ -748,20 +750,43 @@ describe('MdAutocomplete', () => { .toBe('false', 'Expected aria-expanded to be false while panel is closed.'); fixture.componentInstance.trigger.openPanel(); - fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); - expect(input.getAttribute('aria-expanded')) - .toBe('true', 'Expected aria-expanded to be true while panel is open.'); + expect(input.getAttribute('aria-expanded')) + .toBe('true', 'Expected aria-expanded to be true while panel is open.'); - fixture.componentInstance.trigger.closePanel(); - fixture.detectChanges(); + fixture.componentInstance.trigger.closePanel(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - expect(input.getAttribute('aria-expanded')) - .toBe('false', 'Expected aria-expanded to be false when panel closes again.'); + fixture.whenStable().then(() => { + expect(input.getAttribute('aria-expanded')) + .toBe('false', 'Expected aria-expanded to be false when panel closes again.'); + }); }); })); + it('should set aria-expanded properly when the panel is hidden', async(() => { + fixture.componentInstance.trigger.openPanel(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(input.getAttribute('aria-expanded')) + .toBe('true', 'Expected aria-expanded to be true while panel is open.'); + + typeInElement('zz', input); + fixture.whenStable().then(() => { + fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(input.getAttribute('aria-expanded')) + .toBe('false', 'Expected aria-expanded to be false when panel hides itself.'); + }); + }); + }); + })); + it('should set aria-owns based on the attached autocomplete', () => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); @@ -863,21 +888,24 @@ describe('MdAutocomplete', () => { }).not.toThrowError(); }); - it('should work when input is wrapped in ngIf', () => { + it('should work when input is wrapped in ngIf', async(() => { const fixture = TestBed.createComponent(NgIfAutocomplete); fixture.detectChanges(); const input = fixture.debugElement.query(By.css('input')).nativeElement; dispatchFakeEvent(input, 'focus'); - fixture.detectChanges(); - expect(fixture.componentInstance.trigger.panelOpen) - .toBe(true, `Expected panel state to read open when input is focused.`); - expect(overlayContainerElement.textContent) - .toContain('One', `Expected panel to display when input is focused.`); - expect(overlayContainerElement.textContent) - .toContain('Two', `Expected panel to display when input is focused.`); - }); + fixture.whenStable().then(() => { + fixture.detectChanges(); + + expect(fixture.componentInstance.trigger.panelOpen) + .toBe(true, `Expected panel state to read open when input is focused.`); + expect(overlayContainerElement.textContent) + .toContain('One', `Expected panel to display when input is focused.`); + expect(overlayContainerElement.textContent) + .toContain('Two', `Expected panel to display when input is focused.`); + }); + })); }); });