added tests

Author: mmalerba

Diff for: src/lib/core/keyboard/keycodes.ts

@@ -9,6 +9,12 @@ export const DOWN_ARROW = 40;
 export const RIGHT_ARROW = 39;
 export const LEFT_ARROW = 37;
 
+export const PAGE_UP = 33;
+export const PAGE_DOWN = 34;
+
+export const HOME = 36;
+export const END = 35;
+
 export const ENTER = 13;
 export const SPACE = 32;
 export const TAB = 9;

Diff for: src/lib/slider/slider.spec.ts

@@ -1,10 +1,18 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {ReactiveFormsModule, FormControl} from '@angular/forms';
 import {Component, DebugElement} from '@angular/core';
-import {By} from '@angular/platform-browser';
+import {By, HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
 import {MdSlider, MdSliderModule} from './slider';
-import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
 import {TestGestureConfig} from './test-gesture-config';
+import {
+  UP_ARROW,
+  RIGHT_ARROW,
+  DOWN_ARROW,
+  PAGE_DOWN,
+  PAGE_UP,
+  END,
+  HOME, LEFT_ARROW
+} from '../core/keyboard/keycodes';
 
 
 describe('MdSlider', () => {
@@ -746,6 +754,90 @@ describe('MdSlider', () => {
       expect(testComponent.onChange).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('keyboard support', () => {
+    let fixture: ComponentFixture<StandardSlider>;
+    let sliderDebugElement: DebugElement;
+    let sliderNativeElement: HTMLElement;
+    let sliderTrackElement: HTMLElement;
+    let testComponent: StandardSlider;
+    let sliderInstance: MdSlider;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(StandardSlider);
+      fixture.detectChanges();
+
+      testComponent = fixture.debugElement.componentInstance;
+      sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider));
+      sliderNativeElement = sliderDebugElement.nativeElement;
+      sliderTrackElement = <HTMLElement>sliderNativeElement.querySelector('.md-slider-track');
+      sliderInstance = sliderDebugElement.injector.get(MdSlider);
+    });
+
+    it('should increment slider by 1 on up arrow pressed', () => {
+      dispatchKeydownEvent(sliderNativeElement, UP_ARROW);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toBe(1);
+    });
+
+    it('should increment slider by 1 on right arrow pressed', () => {
+      dispatchKeydownEvent(sliderNativeElement, RIGHT_ARROW);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toBe(1);
+    });
+
+    it('should decrement slider by 1 on down arrow pressed', () => {
+      sliderInstance.value = 100;
+
+      dispatchKeydownEvent(sliderNativeElement, DOWN_ARROW);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toBe(99);
+    });
+
+    it('should decrement slider by 1 on left arrow pressed', () => {
+      sliderInstance.value = 100;
+
+      dispatchKeydownEvent(sliderNativeElement, LEFT_ARROW);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toBe(99);
+    });
+
+    it('should increment slider by 10 on page up pressed', () => {
+      dispatchKeydownEvent(sliderNativeElement, PAGE_UP);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toBe(10);
+    });
+
+    it('should decrement slider by 10 on page down pressed', () => {
+      sliderInstance.value = 100;
+
+      dispatchKeydownEvent(sliderNativeElement, PAGE_DOWN);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toBe(90);
+    });
+
+    it('should set slider to max on end pressed', () => {
+      dispatchKeydownEvent(sliderNativeElement, END);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toBe(100);
+    });
+
+    it('should set slider to min on home pressed', () => {
+      sliderInstance.value = 100;
+
+      dispatchKeydownEvent(sliderNativeElement, HOME);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toBe(0);
+    });
+  });
 });
 
 // Disable animations and make the slider an even 100px (+ 8px padding on either side)
@@ -953,3 +1045,9 @@ function dispatchMouseenterEvent(element: HTMLElement): void {
       'mouseenter', true, true, window, 0, x, y, x, y, false, false, false, false, 0, null);
   element.dispatchEvent(event);
 }
+
+function dispatchKeydownEvent(element: HTMLElement, keyCode: number): void {
+  let event = new Event('keydown');
+  (<any>event).keyCode = keyCode;
+  element.dispatchEvent(event);
+}

Diff for: src/lib/slider/slider.ts

@@ -1,18 +1,28 @@
 import {
-    NgModule,
-    ModuleWithProviders,
-    Component,
-    ElementRef,
-    Input,
-    Output,
-    ViewEncapsulation,
-    forwardRef,
-    EventEmitter,
+  NgModule,
+  ModuleWithProviders,
+  Component,
+  ElementRef,
+  Input,
+  Output,
+  ViewEncapsulation,
+  forwardRef,
+  EventEmitter
 } from '@angular/core';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormsModule} from '@angular/forms';
 import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
 import {MdGestureConfig, coerceBooleanProperty, coerceNumberProperty} from '../core';
 import {Input as HammerInput} from 'hammerjs';
+import {
+  PAGE_UP,
+  PAGE_DOWN,
+  END,
+  HOME,
+  LEFT_ARROW,
+  UP_ARROW,
+  RIGHT_ARROW,
+  DOWN_ARROW
+} from '../core/keyboard/keycodes';
 
 /**
  * Visually, a 30px separation between tick marks looks best. This is very subjective but it is
@@ -260,28 +270,28 @@ export class MdSlider implements ControlValueAccessor {
     if (this.disabled) { return; }
 
     switch (event.keyCode) {
-      case 33: /* page up */
+      case PAGE_UP:
         this._increment(10);
         break;
-      case 34: /* page down */
+      case PAGE_DOWN:
         this._increment(-10);
         break;
-      case 35: /* end */
+      case END:
         this.value = this.max;
         break;
-      case 36: /* home */
+      case HOME:
         this.value = this.min;
         break;
-      case 37: /* left arrow */
+      case LEFT_ARROW:
         this._increment(-1);
         break;
-      case 38: /* up arrow */
+      case UP_ARROW:
         this._increment(1);
         break;
-      case 39: /* right arrow */
+      case RIGHT_ARROW:
         this._increment(1);
         break;
-      case 40: /* down arrow */
+      case DOWN_ARROW:
         this._increment(-1);
         break;
       default: