added tests

Author: mmalerba

src/lib/core/style/focus-classes.spec.ts

@@ -1,9 +1,9 @@
 import {async, ComponentFixture, TestBed, inject} from '@angular/core/testing';
-import {Component, Renderer} from '@angular/core';
+import {Component, Renderer, ViewChild} from '@angular/core';
 import {StyleModule} from './index';
 import {By} from '@angular/platform-browser';
 import {TAB} from '../keyboard/keycodes';
-import {FocusOriginMonitor} from './focus-classes';
+import {FocusOriginMonitor, FocusOrigin, CdkFocusClasses} from './focus-classes';
 import {PlatformModule} from '../platform/index';
 import {Platform} from '../platform/platform';
 
@@ -20,6 +20,7 @@ describe('FocusOriginMonitor', () => {
   let buttonRenderer: Renderer;
   let focusOriginMonitor: FocusOriginMonitor;
   let platform: Platform;
+  let changeHandler: (origin: FocusOrigin) => void;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -41,7 +42,9 @@ describe('FocusOriginMonitor', () => {
     focusOriginMonitor = fom;
     platform = pfm;
 
-    focusOriginMonitor.registerElementForFocusClasses(buttonElement, buttonRenderer);
+    changeHandler = jasmine.createSpy('focus origin change handler');
+    focusOriginMonitor.registerElementForFocusClasses(buttonElement, buttonRenderer)
+        .subscribe(changeHandler);
   }));
 
   it('manually registered element should receive focus classes', async(() => {
@@ -55,6 +58,7 @@ describe('FocusOriginMonitor', () => {
 
       expect(buttonElement.classList.contains('cdk-focused'))
           .toBe(true, 'button should have cdk-focused class');
+      expect(changeHandler).toHaveBeenCalledTimes(1);
     }, 0);
   }));
 
@@ -75,6 +79,7 @@ describe('FocusOriginMonitor', () => {
           .toBe(true, 'button should have cdk-focused class');
       expect(buttonElement.classList.contains('cdk-keyboard-focused'))
           .toBe(true, 'button should have cdk-keyboard-focused class');
+      expect(changeHandler).toHaveBeenCalledWith('keyboard');
     }, 0);
   }));
 
@@ -95,6 +100,7 @@ describe('FocusOriginMonitor', () => {
           .toBe(true, 'button should have cdk-focused class');
       expect(buttonElement.classList.contains('cdk-mouse-focused'))
           .toBe(true, 'button should have cdk-mouse-focused class');
+      expect(changeHandler).toHaveBeenCalledWith('mouse');
     }, 0);
   }));
 
@@ -114,6 +120,7 @@ describe('FocusOriginMonitor', () => {
           .toBe(true, 'button should have cdk-focused class');
       expect(buttonElement.classList.contains('cdk-program-focused'))
           .toBe(true, 'button should have cdk-program-focused class');
+      expect(changeHandler).toHaveBeenCalledWith('program');
     }, 0);
   }));
 
@@ -132,6 +139,7 @@ describe('FocusOriginMonitor', () => {
           .toBe(true, 'button should have cdk-focused class');
       expect(buttonElement.classList.contains('cdk-keyboard-focused'))
           .toBe(true, 'button should have cdk-keyboard-focused class');
+      expect(changeHandler).toHaveBeenCalledWith('keyboard');
     }, 0);
   }));
 
@@ -150,6 +158,7 @@ describe('FocusOriginMonitor', () => {
           .toBe(true, 'button should have cdk-focused class');
       expect(buttonElement.classList.contains('cdk-mouse-focused'))
           .toBe(true, 'button should have cdk-mouse-focused class');
+      expect(changeHandler).toHaveBeenCalledWith('mouse');
     }, 0);
   }));
 
@@ -168,6 +177,7 @@ describe('FocusOriginMonitor', () => {
           .toBe(true, 'button should have cdk-focused class');
       expect(buttonElement.classList.contains('cdk-program-focused'))
           .toBe(true, 'button should have cdk-program-focused class');
+      expect(changeHandler).toHaveBeenCalledWith('program');
     }, 0);
   }));
 });
@@ -177,6 +187,7 @@ describe('cdkFocusClasses', () => {
   let fixture: ComponentFixture<ButtonWithFocusClasses>;
   let buttonElement: HTMLElement;
   let platform: Platform;
+  let changeHandler: (origin: FocusOrigin) => void;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -193,6 +204,8 @@ describe('cdkFocusClasses', () => {
     fixture = TestBed.createComponent(ButtonWithFocusClasses);
     fixture.detectChanges();
 
+    changeHandler = jasmine.createSpy('focus origin change handler');
+    fixture.componentInstance.cdkFocusClasses.changes.subscribe(changeHandler);
     buttonElement = fixture.debugElement.query(By.css('button')).nativeElement;
     platform = pfm;
   }));
@@ -218,6 +231,7 @@ describe('cdkFocusClasses', () => {
           .toBe(true, 'button should have cdk-focused class');
       expect(buttonElement.classList.contains('cdk-keyboard-focused'))
           .toBe(true, 'button should have cdk-keyboard-focused class');
+      expect(changeHandler).toHaveBeenCalledWith('keyboard');
     }, 0);
   }));
 
@@ -238,6 +252,7 @@ describe('cdkFocusClasses', () => {
           .toBe(true, 'button should have cdk-focused class');
       expect(buttonElement.classList.contains('cdk-mouse-focused'))
           .toBe(true, 'button should have cdk-mouse-focused class');
+      expect(changeHandler).toHaveBeenCalledWith('mouse');
     }, 0);
   }));
 
@@ -257,6 +272,7 @@ describe('cdkFocusClasses', () => {
           .toBe(true, 'button should have cdk-focused class');
       expect(buttonElement.classList.contains('cdk-program-focused'))
           .toBe(true, 'button should have cdk-program-focused class');
+      expect(changeHandler).toHaveBeenCalledWith('program');
     }, 0);
   }));
 });
@@ -269,7 +285,9 @@ class PlainButton {
 
 
 @Component({template: `<button cdkFocusClasses>focus me!</button>`})
-class ButtonWithFocusClasses {}
+class ButtonWithFocusClasses {
+  @ViewChild(CdkFocusClasses) cdkFocusClasses: CdkFocusClasses;
+}
 
 
 /** Dispatches a mousedown event on the specified element. */

src/lib/core/style/focus-classes.ts

@@ -44,7 +44,10 @@ export class FocusOriginMonitor {
 
   /** Handles focus events on a registered element. */
   private _onFocus(element: Element, renderer: Renderer, subject: Subject<FocusOrigin>) {
+    // If we couldn't detect a cause for the focus event, assume it was due to programmatically
+    // setting the focus.
     this._origin = this._origin || 'program';
+
     renderer.setElementClass(element, 'cdk-focused', true);
     renderer.setElementClass(element, 'cdk-keyboard-focused', this._origin == 'keyboard');
     renderer.setElementClass(element, 'cdk-mouse-focused', this._origin == 'mouse');
@@ -72,8 +75,11 @@ export class FocusOriginMonitor {
   selector: '[cdkFocusClasses]',
 })
 export class CdkFocusClasses {
+  changes: Observable<FocusOrigin>;
+
   constructor(elementRef: ElementRef, focusOriginMonitor: FocusOriginMonitor, renderer: Renderer) {
-    focusOriginMonitor.registerElementForFocusClasses(elementRef.nativeElement, renderer);
+    this.changes =
+        focusOriginMonitor.registerElementForFocusClasses(elementRef.nativeElement, renderer);
   }
 }