added tests

Author: mmalerba

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

@@ -1,15 +1,16 @@
 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';
 
 describe('FocusOriginMonitor', () => {
   let fixture: ComponentFixture<PlainButton>;
   let buttonElement: HTMLElement;
   let buttonRenderer: Renderer;
   let focusOriginMonitor: FocusOriginMonitor;
+  let changeHandler: (origin: FocusOrigin) => void;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -30,7 +31,9 @@ describe('FocusOriginMonitor', () => {
     buttonRenderer = fixture.componentInstance.renderer;
     focusOriginMonitor = fom;
 
-    focusOriginMonitor.registerElementForFocusClasses(buttonElement, buttonRenderer);
+    changeHandler = jasmine.createSpy('focus origin change handler');
+    focusOriginMonitor.registerElementForFocusClasses(buttonElement, buttonRenderer)
+        .subscribe(changeHandler);
 
     // Patch the element focus to properly emit focus events when the browser is blurred.
     patchElementFocus(buttonElement);
@@ -45,6 +48,7 @@ describe('FocusOriginMonitor', () => {
 
       expect(buttonElement.classList.contains('cdk-focused'))
           .toBe(true, 'button should have cdk-focused class');
+      expect(changeHandler).toHaveBeenCalledTimes(1);
     }, 0);
   }));
 
@@ -63,6 +67,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);
   }));
 
@@ -81,6 +86,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);
   }));
 
@@ -98,6 +104,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);
   }));
 
@@ -114,6 +121,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);
   }));
 
@@ -130,6 +138,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);
   }));
 
@@ -146,6 +155,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);
   }));
 });
@@ -154,6 +164,7 @@ describe('FocusOriginMonitor', () => {
 describe('cdkFocusClasses', () => {
   let fixture: ComponentFixture<ButtonWithFocusClasses>;
   let buttonElement: HTMLElement;
+  let changeHandler: (origin: FocusOrigin) => void;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -170,6 +181,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;
 
     // Patch the element focus to properly emit focus events when the browser is blurred.
@@ -195,6 +208,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);
   }));
 
@@ -213,6 +227,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);
   }));
 
@@ -230,6 +245,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);
   }));
 });
@@ -242,7 +258,9 @@ class PlainButton {
 
 
 @Component({template: `<button cdkFocusClasses>focus me!</button>`})
-class ButtonWithFocusClasses {}
+class ButtonWithFocusClasses {
+  @ViewChild(CdkFocusClasses) cdkFocusClasses: CdkFocusClasses;
+}
 
 // TODO(devversion): move helper functions into a global utility file. See #2902
 

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);
   }
 }