Skip to content

Commit

Permalink
refactor: address feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
crisbeto committed Aug 20, 2017
1 parent 2b78839 commit 0adbc33
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 10 deletions.
38 changes: 32 additions & 6 deletions src/lib/autocomplete/autocomplete.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
MdAutocomplete,
MdAutocompleteModule,
MdAutocompleteTrigger,
MdAutocompleteSelect,
MdAutocompleteSelectedEvent,
} from './index';
import {MdInputModule} from '../input/index';
import {Subscription} from 'rxjs/Subscription';
Expand Down Expand Up @@ -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();
Expand All @@ -1475,19 +1475,45 @@ describe('MdAutocomplete', () => {
fixture.detectChanges();

let options = overlayContainerElement.querySelectorAll('md-option') as NodeListOf<HTMLElement>;
let spy = fixture.componentInstance.select;
let spy = fixture.componentInstance.optionSelected;

options[1].click();
tick();
fixture.detectChanges();

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<HTMLElement>;
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({
Expand Down Expand Up @@ -1738,7 +1764,7 @@ class AutocompleteWithFormsAndNonfloatingPlaceholder {
<input mdInput placeholder="State" [mdAutocomplete]="auto" [(ngModel)]="selectedState">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete" (select)="select($event)">
<md-autocomplete #auto="mdAutocomplete" (optionSelected)="optionSelected($event)">
<md-option *ngFor="let state of states" [value]="state">
<span>{{ state }}</span>
</md-option>
Expand All @@ -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;
Expand Down
9 changes: 5 additions & 4 deletions src/lib/autocomplete/autocomplete.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) { }
}

Expand Down Expand Up @@ -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<MdAutocompleteSelect> = new EventEmitter<MdAutocompleteSelect>();
@Output() optionSelected: EventEmitter<MdAutocompleteSelectedEvent> =
new EventEmitter<MdAutocompleteSelectedEvent>();

/** Unique ID to be used by autocomplete trigger's "aria-owns" property. */
id: string = `md-autocomplete-${_uniqueAutocompleteIdCounter++}`;
Expand Down Expand Up @@ -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. */
Expand Down

0 comments on commit 0adbc33

Please sign in to comment.