fix(list-key-manager): remove handling for home and end keys (#4544)

* Removes the handling for the home and end keys from the ListKeyManager since their usage isn't as generic as the arrow keys.
* Adds the home and end key handling to the select specifically.
* Reworks the Autocomplete, ListKeyManager and ChipList tests to use the `createKeyboardEvent`, instead of making their own fake keyboard events.
* Adds a `target` parameter to the `createKeyboardEvent` function, allowing us to define the event target.

Fixes #3496.

Author: crisbeto

src/lib/autocomplete/autocomplete.spec.ts

@@ -16,13 +16,14 @@ import {MdInputModule} from '../input/index';
 import {Dir, LayoutDirection} from '../core/rtl/dir';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {Subscription} from 'rxjs/Subscription';
-import {ENTER, DOWN_ARROW, SPACE, UP_ARROW, HOME, END} from '../core/keyboard/keycodes';
+import {ENTER, DOWN_ARROW, SPACE, UP_ARROW} from '../core/keyboard/keycodes';
 import {MdOption} from '../core/option/option';
 import {MdAutocomplete} from './autocomplete';
 import {MdInputContainer} from '../input/input-container';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 import {dispatchFakeEvent} from '../core/testing/dispatch-events';
+import {createKeyboardEvent} from '../core/testing/event-objects';
 import {typeInElement} from '../core/testing/type-in-element';
 import {ScrollDispatcher} from '../core/overlay/scroll/scroll-dispatcher';
 
@@ -535,8 +536,8 @@ describe('MdAutocomplete', () => {
       fixture.detectChanges();
 
       input = fixture.debugElement.query(By.css('input')).nativeElement;
-      DOWN_ARROW_EVENT = new MockKeyboardEvent(DOWN_ARROW) as KeyboardEvent;
-      ENTER_EVENT = new MockKeyboardEvent(ENTER) as KeyboardEvent;
+      DOWN_ARROW_EVENT = createKeyboardEvent('keydown', DOWN_ARROW);
+      ENTER_EVENT = createKeyboardEvent('keydown', ENTER);
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
@@ -594,7 +595,7 @@ describe('MdAutocomplete', () => {
       const optionEls =
           overlayContainerElement.querySelectorAll('md-option') as NodeListOf<HTMLElement>;
 
-      const UP_ARROW_EVENT = new MockKeyboardEvent(UP_ARROW) as KeyboardEvent;
+      const UP_ARROW_EVENT = createKeyboardEvent('keydown', UP_ARROW);
       fixture.componentInstance.trigger._handleKeydown(UP_ARROW_EVENT);
       tick();
       fixture.detectChanges();
@@ -668,7 +669,7 @@ describe('MdAutocomplete', () => {
         typeInElement('New', input);
         fixture.detectChanges();
 
-        const SPACE_EVENT = new MockKeyboardEvent(SPACE) as KeyboardEvent;
+        const SPACE_EVENT = createKeyboardEvent('keydown', SPACE);
         fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
 
         fixture.whenStable().then(() => {
@@ -748,7 +749,7 @@ describe('MdAutocomplete', () => {
       const scrollContainer =
           document.querySelector('.cdk-overlay-pane .mat-autocomplete-panel');
 
-      const UP_ARROW_EVENT = new MockKeyboardEvent(UP_ARROW) as KeyboardEvent;
+      const UP_ARROW_EVENT = createKeyboardEvent('keydown', UP_ARROW);
       fixture.componentInstance.trigger._handleKeydown(UP_ARROW_EVENT);
       tick();
       fixture.detectChanges();
@@ -757,36 +758,6 @@ describe('MdAutocomplete', () => {
       expect(scrollContainer.scrollTop).toEqual(272, `Expected panel to reveal last option.`);
     }));
 
-    it('should scroll the active option into view when pressing END', fakeAsync(() => {
-      tick();
-      const scrollContainer =
-          document.querySelector('.cdk-overlay-pane .mat-autocomplete-panel');
-
-      const END_EVENT = new MockKeyboardEvent(END) as KeyboardEvent;
-      fixture.componentInstance.trigger._handleKeydown(END_EVENT);
-      tick();
-      fixture.detectChanges();
-
-      // Expect option bottom minus the panel height (528 - 256 = 272)
-      expect(scrollContainer.scrollTop).toEqual(272, 'Expected panel to reveal the last option.');
-    }));
-
-    it('should scroll the active option into view when pressing HOME', fakeAsync(() => {
-      tick();
-      const scrollContainer =
-          document.querySelector('.cdk-overlay-pane .mat-autocomplete-panel');
-
-      scrollContainer.scrollTop = 100;
-      fixture.detectChanges();
-
-      const HOME_EVENT = new MockKeyboardEvent(HOME) as KeyboardEvent;
-      fixture.componentInstance.trigger._handleKeydown(HOME_EVENT);
-      tick();
-      fixture.detectChanges();
-
-      expect(scrollContainer.scrollTop).toEqual(0, 'Expected panel to reveal the first option.');
-    }));
-
   });
 
   describe('aria', () => {
@@ -832,7 +803,7 @@ describe('MdAutocomplete', () => {
         expect(input.hasAttribute('aria-activedescendant'))
             .toBe(false, 'Expected aria-activedescendant to be absent if no active item.');
 
-        const DOWN_ARROW_EVENT = new MockKeyboardEvent(DOWN_ARROW) as KeyboardEvent;
+        const DOWN_ARROW_EVENT = createKeyboardEvent('keydown', DOWN_ARROW);
         fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
 
         fixture.whenStable().then(() => {
@@ -1140,7 +1111,7 @@ describe('MdAutocomplete', () => {
       tick();
       fixture.detectChanges();
 
-      const DOWN_ARROW_EVENT = new MockKeyboardEvent(DOWN_ARROW) as KeyboardEvent;
+      const DOWN_ARROW_EVENT = createKeyboardEvent('keydown', DOWN_ARROW);
       fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
       tick();
       fixture.detectChanges();
@@ -1418,10 +1389,3 @@ class AutocompleteWithNativeInput {
     });
   }
 }
-
-
-/** This is a mock keyboard event to test keyboard events in the autocomplete. */
-class MockKeyboardEvent {
-  constructor(public keyCode: number) {}
-  preventDefault() {}
-}

src/lib/chips/chip-list.spec.ts

@@ -3,19 +3,10 @@ import {Component, DebugElement, QueryList} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MdChip, MdChipList, MdChipsModule} from './index';
 import {FocusKeyManager} from '../core/a11y/focus-key-manager';
-import {FakeEvent} from '../core/a11y/list-key-manager.spec';
 import {SPACE, LEFT_ARROW, RIGHT_ARROW, TAB} from '../core/keyboard/keycodes';
 import {createKeyboardEvent} from '../core/testing/event-objects';
 
 
-class FakeKeyboardEvent extends FakeEvent {
-  constructor(keyCode: number, protected target: HTMLElement) {
-    super(keyCode);
-
-    this.target = target;
-  }
-}
-
 describe('MdChipList', () => {
   let fixture: ComponentFixture<any>;
   let chipListDebugElement: DebugElement;
@@ -117,7 +108,7 @@ describe('MdChipList', () => {
       let nativeChips = chipListNativeElement.querySelectorAll('md-chip');
       let lastNativeChip = nativeChips[nativeChips.length - 1] as HTMLElement;
 
-      let LEFT_EVENT = new FakeKeyboardEvent(LEFT_ARROW, lastNativeChip) as any;
+      let LEFT_EVENT = createKeyboardEvent('keydown', LEFT_ARROW, lastNativeChip);
       let array = chips.toArray();
       let lastIndex = array.length - 1;
       let lastItem = array[lastIndex];
@@ -138,7 +129,7 @@ describe('MdChipList', () => {
       let nativeChips = chipListNativeElement.querySelectorAll('md-chip');
       let firstNativeChip = nativeChips[0] as HTMLElement;
 
-      let RIGHT_EVENT: KeyboardEvent = new FakeKeyboardEvent(RIGHT_ARROW, firstNativeChip) as any;
+      let RIGHT_EVENT = createKeyboardEvent('keydown', RIGHT_ARROW, firstNativeChip);
       let array = chips.toArray();
       let firstItem = array[0];
 
@@ -164,7 +155,7 @@ describe('MdChipList', () => {
         let nativeChips = chipListNativeElement.querySelectorAll('md-chip');
         let firstNativeChip = nativeChips[0] as HTMLElement;
 
-        let SPACE_EVENT: KeyboardEvent = new FakeKeyboardEvent(SPACE, firstNativeChip) as any;
+        let SPACE_EVENT = createKeyboardEvent('keydown', SPACE, firstNativeChip);
         let firstChip: MdChip = chips.toArray()[0];
 
         spyOn(testComponent, 'chipSelect');
@@ -209,7 +200,7 @@ describe('MdChipList', () => {
       });
 
       it('SPACE ignores selection', () => {
-        let SPACE_EVENT: KeyboardEvent = new FakeEvent(SPACE) as KeyboardEvent;
+        let SPACE_EVENT = createKeyboardEvent('keydown', SPACE);
         let firstChip: MdChip = chips.toArray()[0];
 
         spyOn(testComponent, 'chipSelect');