feat: add testing utilities for components

* Moves existing testing helpers to a testing folder in the core package.
* The testing utilities currently consist of functions to create dom events and shorthands to dispatch them.
* Also fixes that **releases** include components `spec.d.ts` files.

The `core/testing` utilities are not includes in releases for now. It could be possible to expose them as part of the Component Toolkit.

Closes #2902

Author: devversion

src/lib/autocomplete/autocomplete.spec.ts

@@ -13,6 +13,7 @@ import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
 import {FakeViewportRuler} from '../core/overlay/position/fake-viewport-ruler';
 import {MdAutocomplete} from './autocomplete';
 import {MdInputContainer} from '../input/input-container';
+import {dispatchFakeEvent} from '../core/testing/dispatch-events';
 
 describe('MdAutocomplete', () => {
   let overlayContainerElement: HTMLElement;
@@ -61,7 +62,7 @@ describe('MdAutocomplete', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
           .toBe(false, `Expected panel state to start out closed.`);
 
-      dispatchEvent('focus', input);
+      dispatchFakeEvent(input, 'focus');
       fixture.detectChanges();
 
       expect(fixture.componentInstance.trigger.panelOpen)
@@ -88,11 +89,11 @@ describe('MdAutocomplete', () => {
     });
 
     it('should close the panel when blurred', async(() => {
-      dispatchEvent('focus', input);
+      dispatchFakeEvent(input, 'focus');
       fixture.detectChanges();
 
       fixture.whenStable().then(() => {
-        dispatchEvent('blur', input);
+        dispatchFakeEvent(input, 'blur');
         fixture.detectChanges();
 
         expect(fixture.componentInstance.trigger.panelOpen)
@@ -103,7 +104,7 @@ describe('MdAutocomplete', () => {
     }));
 
     it('should close the panel when an option is clicked', async(() => {
-      dispatchEvent('focus', input);
+      dispatchFakeEvent(input, 'focus');
       fixture.detectChanges();
 
       fixture.whenStable().then(() => {
@@ -119,13 +120,13 @@ describe('MdAutocomplete', () => {
     }));
 
     it('should close the panel when a newly created option is clicked', async(() => {
-      dispatchEvent('focus', input);
+      dispatchFakeEvent(input, 'focus');
       fixture.detectChanges();
 
       fixture.whenStable().then(() => {
         // Filter down the option list to a subset of original options ('Alabama', 'California')
         input.value = 'al';
-        dispatchEvent('input', input);
+        dispatchFakeEvent(input, 'input');
         fixture.detectChanges();
 
         let options =
@@ -135,7 +136,7 @@ describe('MdAutocomplete', () => {
         // Changing value from 'Alabama' to 'al' to re-populate the option list,
         // ensuring that 'California' is created new.
         input.value = 'al';
-        dispatchEvent('input', input);
+        dispatchFakeEvent(input, 'input');
         fixture.detectChanges();
 
         fixture.whenStable().then(() => {
@@ -166,13 +167,13 @@ describe('MdAutocomplete', () => {
     });
 
     it('should close the panel when the options list is empty', async(() => {
-      dispatchEvent('focus', input);
+      dispatchFakeEvent(input, 'focus');
       fixture.detectChanges();
 
       fixture.whenStable().then(() => {
         // Filter down the option list such that no options match the value
         input.value = 'af';
-        dispatchEvent('input', input);
+        dispatchFakeEvent(input, 'input');
         fixture.detectChanges();
 
         expect(fixture.componentInstance.trigger.panelOpen)
@@ -232,14 +233,14 @@ describe('MdAutocomplete', () => {
       fixture.detectChanges();
 
       input.value = 'a';
-      dispatchEvent('input', input);
+      dispatchFakeEvent(input, 'input');
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.value)
           .toEqual('a', 'Expected control value to be updated as user types.');
 
       input.value = 'al';
-      dispatchEvent('input', input);
+      dispatchFakeEvent(input, 'input');
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.value)
@@ -273,7 +274,7 @@ describe('MdAutocomplete', () => {
         fixture.detectChanges();
 
         input.value = 'Californi';
-        dispatchEvent('input', input);
+        dispatchFakeEvent(input, 'input');
         fixture.detectChanges();
 
         expect(fixture.componentInstance.stateCtrl.value)
@@ -330,7 +331,7 @@ describe('MdAutocomplete', () => {
 
     it('should clear the text field if value is reset programmatically', async(() => {
       input.value = 'Alabama';
-      dispatchEvent('input', input);
+      dispatchFakeEvent(input, 'input');
       fixture.detectChanges();
 
       fixture.whenStable().then(() => {
@@ -367,7 +368,7 @@ describe('MdAutocomplete', () => {
           .toBe(false, `Expected control to start out pristine.`);
 
       input.value = 'a';
-      dispatchEvent('input', input);
+      dispatchFakeEvent(input, 'input');
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.dirty)
@@ -409,7 +410,7 @@ describe('MdAutocomplete', () => {
       expect(fixture.componentInstance.stateCtrl.touched)
           .toBe(false, `Expected control to start out untouched.`);
 
-      dispatchEvent('blur', input);
+      dispatchFakeEvent(input, 'blur');
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.touched)
@@ -429,8 +430,8 @@ describe('MdAutocomplete', () => {
       fixture.detectChanges();
 
       input = fixture.debugElement.query(By.css('input')).nativeElement;
-      DOWN_ARROW_EVENT = new FakeKeyboardEvent(DOWN_ARROW) as KeyboardEvent;
-      ENTER_EVENT = new FakeKeyboardEvent(ENTER) as KeyboardEvent;
+      DOWN_ARROW_EVENT = new MockKeyboardEvent(DOWN_ARROW) as KeyboardEvent;
+      ENTER_EVENT = new MockKeyboardEvent(ENTER) as KeyboardEvent;
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
@@ -491,7 +492,7 @@ describe('MdAutocomplete', () => {
         const optionEls =
             overlayContainerElement.querySelectorAll('md-option') as NodeListOf<HTMLElement>;
 
-        const UP_ARROW_EVENT = new FakeKeyboardEvent(UP_ARROW) as KeyboardEvent;
+        const UP_ARROW_EVENT = new MockKeyboardEvent(UP_ARROW) as KeyboardEvent;
         fixture.componentInstance.trigger._handleKeydown(UP_ARROW_EVENT);
 
         fixture.whenStable().then(() => {
@@ -522,7 +523,7 @@ describe('MdAutocomplete', () => {
 
         fixture.whenStable().then(() => {
           input.value = 'o';
-          dispatchEvent('input', input);
+          dispatchFakeEvent(input, 'input');
           fixture.detectChanges();
 
           fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
@@ -556,10 +557,10 @@ describe('MdAutocomplete', () => {
     it('should fill the text field, not select an option, when SPACE is entered', async(() => {
       fixture.whenStable().then(() => {
         input.value = 'New';
-        dispatchEvent('input', input);
+        dispatchFakeEvent(input, 'input');
         fixture.detectChanges();
 
-        const SPACE_EVENT = new FakeKeyboardEvent(SPACE) as KeyboardEvent;
+        const SPACE_EVENT = new MockKeyboardEvent(SPACE) as KeyboardEvent;
         fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
         fixture.componentInstance.trigger._handleKeydown(SPACE_EVENT);
         fixture.detectChanges();
@@ -595,7 +596,7 @@ describe('MdAutocomplete', () => {
             .toEqual('', `Expected panel to close after ENTER key.`);
 
         input.value = 'Alabam';
-        dispatchEvent('input', input);
+        dispatchFakeEvent(input, 'input');
         fixture.detectChanges();
 
         expect(fixture.componentInstance.trigger.panelOpen)
@@ -669,7 +670,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 FakeKeyboardEvent(DOWN_ARROW) as KeyboardEvent;
+        const DOWN_ARROW_EVENT = new MockKeyboardEvent(DOWN_ARROW) as KeyboardEvent;
         fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
         fixture.detectChanges();
 
@@ -773,7 +774,7 @@ describe('MdAutocomplete', () => {
 
       fixture.whenStable().then(() => {
         input.value = 'f';
-        dispatchEvent('input', input);
+        dispatchFakeEvent(input, 'input');
         fixture.detectChanges();
 
         const inputTop = input.getBoundingClientRect().top;
@@ -848,24 +849,8 @@ class SimpleAutocomplete implements OnDestroy {
 
 }
 
-
-
-/**
- * TODO: Move this to core testing utility until Angular has event faking
- * support.
- *
- * Dispatches an event from an element.
- * @param eventName Name of the event
- * @param element The element from which the event will be dispatched.
- */
-function dispatchEvent(eventName: string, element: HTMLElement): void {
-  let event  = document.createEvent('Event');
-  event.initEvent(eventName, true, true);
-  element.dispatchEvent(event);
-}
-
 /** This is a mock keyboard event to test keyboard events in the autocomplete. */
-class FakeKeyboardEvent {
+class MockKeyboardEvent {
   constructor(public keyCode: number) {}
   preventDefault() {}
 }

src/lib/core/overlay/scroll/scroll-dispatcher.spec.ts

@@ -3,6 +3,7 @@ import {NgModule, Component, ViewChild, ElementRef, QueryList, ViewChildren} fro
 import {ScrollDispatcher} from './scroll-dispatcher';
 import {OverlayModule} from '../overlay-directives';
 import {Scrollable} from './scrollable';
+import {dispatchFakeEvent} from '../../testing/dispatch-events';
 
 describe('Scroll Dispatcher', () => {
 
@@ -51,9 +52,7 @@ describe('Scroll Dispatcher', () => {
       // Emit a scroll event from the scrolling element in our component.
       // This event should be picked up by the scrollable directive and notify.
       // The notification should be picked up by the service.
-      const scrollEvent = document.createEvent('UIEvents');
-      scrollEvent.initUIEvent('scroll', true, true, window, 0);
-      fixture.componentInstance.scrollingElement.nativeElement.dispatchEvent(scrollEvent);
+      dispatchFakeEvent(fixture.componentInstance.scrollingElement.nativeElement, 'scroll');
 
       expect(hasDirectiveScrollNotified).toBe(true);
       expect(hasServiceScrollNotified).toBe(true);