From 0adbc33c922f5b06436c09f1420e25cdcbaf6eee Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sun, 20 Aug 2017 13:33:53 +0200 Subject: [PATCH] refactor: address feedback --- src/lib/autocomplete/autocomplete.spec.ts | 38 +++++++++++++++++++---- src/lib/autocomplete/autocomplete.ts | 9 +++--- 2 files changed, 37 insertions(+), 10 deletions(-) diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index 08d83fe9fea3..f1b009aa472c 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -20,7 +20,7 @@ import { MdAutocomplete, MdAutocompleteModule, MdAutocompleteTrigger, - MdAutocompleteSelect, + MdAutocompleteSelectedEvent, } from './index'; import {MdInputModule} from '../input/index'; import {Subscription} from 'rxjs/Subscription'; @@ -1466,7 +1466,7 @@ describe('MdAutocomplete', () => { }); })); - it('should call emit an event when an option is selected', fakeAsync(() => { + it('should emit an event when an option is selected', fakeAsync(() => { let fixture = TestBed.createComponent(AutocompleteWithSelectEvent); fixture.detectChanges(); @@ -1475,7 +1475,7 @@ describe('MdAutocomplete', () => { fixture.detectChanges(); let options = overlayContainerElement.querySelectorAll('md-option') as NodeListOf; - let spy = fixture.componentInstance.select; + let spy = fixture.componentInstance.optionSelected; options[1].click(); tick(); @@ -1483,11 +1483,37 @@ describe('MdAutocomplete', () => { expect(spy).toHaveBeenCalledTimes(1); - let event = spy.calls.mostRecent().args[0] as MdAutocompleteSelect; + let event = spy.calls.mostRecent().args[0] as MdAutocompleteSelectedEvent; expect(event.source).toBe(fixture.componentInstance.autocomplete); expect(event.option.value).toBe('Washington'); })); + + it('should emit an event when a newly-added option is selected', fakeAsync(() => { + let fixture = TestBed.createComponent(AutocompleteWithSelectEvent); + + fixture.detectChanges(); + fixture.componentInstance.trigger.openPanel(); + tick(); + fixture.detectChanges(); + + fixture.componentInstance.states.push('Puerto Rico'); + fixture.detectChanges(); + + let options = overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + let spy = fixture.componentInstance.optionSelected; + + options[3].click(); + tick(); + fixture.detectChanges(); + + expect(spy).toHaveBeenCalledTimes(1); + + let event = spy.calls.mostRecent().args[0] as MdAutocompleteSelectedEvent; + + expect(event.source).toBe(fixture.componentInstance.autocomplete); + expect(event.option.value).toBe('Puerto Rico'); + })); }); @Component({ @@ -1738,7 +1764,7 @@ class AutocompleteWithFormsAndNonfloatingPlaceholder { - + {{ state }} @@ -1748,7 +1774,7 @@ class AutocompleteWithFormsAndNonfloatingPlaceholder { class AutocompleteWithSelectEvent { selectedState: string; states = ['New York', 'Washington', 'Oregon']; - select = jasmine.createSpy('select callback'); + optionSelected = jasmine.createSpy('optionSelected callback'); @ViewChild(MdAutocompleteTrigger) trigger: MdAutocompleteTrigger; @ViewChild(MdAutocomplete) autocomplete: MdAutocomplete; diff --git a/src/lib/autocomplete/autocomplete.ts b/src/lib/autocomplete/autocomplete.ts index 52d74bbd99f5..97ad3336b522 100644 --- a/src/lib/autocomplete/autocomplete.ts +++ b/src/lib/autocomplete/autocomplete.ts @@ -32,7 +32,7 @@ import {ActiveDescendantKeyManager} from '@angular/cdk/a11y'; let _uniqueAutocompleteIdCounter = 0; /** Event object that is emitted when an autocomplete option is selected */ -export class MdAutocompleteSelect { +export class MdAutocompleteSelectedEvent { constructor(public source: MdAutocomplete, public option: MdOption) { } } @@ -71,7 +71,8 @@ export class MdAutocomplete implements AfterContentInit { @Input() displayWith: ((value: any) => string) | null = null; /** Event that is emitted whenever an option from the list is selected. */ - @Output() select: EventEmitter = new EventEmitter(); + @Output() optionSelected: EventEmitter = + new EventEmitter(); /** Unique ID to be used by autocomplete trigger's "aria-owns" property. */ id: string = `md-autocomplete-${_uniqueAutocompleteIdCounter++}`; @@ -107,8 +108,8 @@ export class MdAutocomplete implements AfterContentInit { /** Emits the `select` event. */ _emitSelectEvent(option: MdOption): void { - const selectEvent = new MdAutocompleteSelect(this, option); - this.select.emit(selectEvent); + const event = new MdAutocompleteSelectedEvent(this, option); + this.optionSelected.emit(event); } /** Sets a class on the panel based on whether it is visible. */