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

@@ -14,6 +14,8 @@ import {FakeViewportRuler} from '../core/overlay/position/fake-viewport-ruler';
 import {MdAutocomplete} from './autocomplete';
 import {MdInputContainer} from '../input/input-container';
 import {Observable} from 'rxjs/Observable';
+import {dispatchFakeEvent} from '../core/testing/dispatch-events';
+
 import 'rxjs/add/operator/map';
 
 describe('MdAutocomplete', () => {
@@ -63,7 +65,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)
@@ -90,11 +92,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)
@@ -105,7 +107,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(() => {
@@ -121,7 +123,7 @@ 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(() => {
@@ -166,7 +168,7 @@ describe('MdAutocomplete', () => {
     });
 
     it('should hide the panel when the options list is empty', async(() => {
-      dispatchEvent('focus', input);
+      dispatchFakeEvent(input, 'focus');
 
       fixture.whenStable().then(() => {
         fixture.detectChanges();
@@ -214,7 +216,7 @@ describe('MdAutocomplete', () => {
           .toBe(false, `Expected panel state to start out closed.`);
 
       input.value = 'Alabama';
-      dispatchEvent('input', input);
+      dispatchFakeEvent(input, 'input');
       fixture.detectChanges();
 
       expect(fixture.componentInstance.trigger.panelOpen)
@@ -467,7 +469,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)
@@ -487,8 +489,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();
@@ -549,7 +551,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(() => {
@@ -615,7 +617,7 @@ describe('MdAutocomplete', () => {
         typeInElement('New', 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();
@@ -724,7 +726,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();
 
@@ -866,7 +868,7 @@ describe('MdAutocomplete', () => {
       fixture.detectChanges();
 
       const input = fixture.debugElement.query(By.css('input')).nativeElement;
-      dispatchEvent('focus', input);
+      dispatchFakeEvent(input, 'focus');
       fixture.detectChanges();
 
       expect(fixture.componentInstance.trigger.panelOpen)
@@ -995,21 +997,6 @@ class AutocompleteWithoutForms {
 
 }
 
-/**
- * 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);
-}
-
-
 /**
  * Focuses an input, sets its value and dispatches
  * the `input` event, simulating the user typing.
@@ -1019,11 +1006,11 @@ function dispatchEvent(eventName: string, element: HTMLElement): void {
 function typeInElement(value: string, element: HTMLInputElement) {
   element.focus();
   element.value = value;
-  dispatchEvent('input', element);
+  dispatchFakeEvent(element, 'input');
 }
 
 /** 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} from '@angular/core';
 import {ScrollDispatcher} from './scroll-dispatcher';
 import {OverlayModule} from '../overlay-directives';
 import {Scrollable} from './scrollable';
+import {dispatchFakeEvent} from '../../testing/dispatch-events';
 
 describe('Scroll Dispatcher', () => {
 
@@ -53,9 +54,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');
 
       // The scrollable directive should have notified the service immediately.
       expect(hasDirectiveScrollNotified).toBe(true);

src/lib/core/ripple/ripple.spec.ts

@@ -3,6 +3,7 @@ import {Component, ViewChild} from '@angular/core';
 import {MdRipple, MdRippleModule} from './ripple';
 import {ViewportRuler} from '../overlay/position/viewport-ruler';
 import {RIPPLE_FADE_OUT_DURATION, RIPPLE_FADE_IN_DURATION} from './ripple-renderer';
+import {dispatchMouseEvent} from '../testing/dispatch-events';
 
 
 /** Creates a DOM mouse event. */
@@ -65,15 +66,6 @@ describe('MdRipple', () => {
     document.body.style.margin = originalBodyMargin;
   });
 
-  function dispatchMouseEvent(type: string, offsetX = 0, offsetY = 0) {
-    let mouseEvent = createMouseEvent(type, {
-      clientX: rippleTarget.clientLeft + offsetX,
-      clientY: rippleTarget.clientTop + offsetY
-    });
-
-    rippleTarget.dispatchEvent(mouseEvent);
-  }
-
   describe('basic ripple', () => {
     let rippleDirective: MdRipple;
 
@@ -89,20 +81,20 @@ describe('MdRipple', () => {
     });
 
     it('creates ripple on mousedown', () => {
-      dispatchMouseEvent('mousedown');
-      dispatchMouseEvent('mouseup');
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+      dispatchMouseEvent(rippleTarget, 'mouseup');
 
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
 
-      dispatchMouseEvent('mousedown');
-      dispatchMouseEvent('mouseup');
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+      dispatchMouseEvent(rippleTarget, 'mouseup');
 
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(2);
     });
 
     it('removes ripple after timeout', fakeAsync(() => {
-      dispatchMouseEvent('mousedown');
-      dispatchMouseEvent('mouseup');
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+      dispatchMouseEvent(rippleTarget, 'mouseup');
 
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
 
@@ -140,8 +132,8 @@ describe('MdRipple', () => {
       let elementRect = rippleTarget.getBoundingClientRect();
 
       // Dispatch a ripple at the following relative coordinates (X: 50| Y: 75)
-      dispatchMouseEvent('mousedown', 50, 75);
-      dispatchMouseEvent('mouseup');
+      dispatchMouseEvent(rippleTarget, 'mousedown', 50, 75);
+      dispatchMouseEvent(rippleTarget, 'mouseup');
 
       // Calculate distance from the click to farthest edge of the ripple target.
       let maxDistanceX = TARGET_WIDTH - 50;
@@ -174,8 +166,8 @@ describe('MdRipple', () => {
       fixture.componentInstance.isDestroyed = true;
       fixture.detectChanges();
 
-      dispatchMouseEvent('mousedown');
-      dispatchMouseEvent('mouseup');
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+      dispatchMouseEvent(rippleTarget, 'mouseup');
 
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
     });
@@ -245,15 +237,10 @@ describe('MdRipple', () => {
         rippleTarget.style.top = `${elementTop}px`;
 
         // Simulate a keyboard-triggered click by setting event coordinates to 0.
-        let clickEvent = createMouseEvent('mousedown', {
-          clientX: left + elementLeft - pageScrollLeft,
-          clientY: top + elementTop - pageScrollTop,
-          screenX: left + elementLeft,
-          screenY: top + elementTop
-        });
-
-        rippleTarget.dispatchEvent(clickEvent);
-        dispatchMouseEvent('mouseup');
+        dispatchMouseEvent(rippleTarget, 'mousedown',
+          left + elementLeft - pageScrollLeft,
+          top + elementTop - pageScrollTop
+        );
 
         let expectedRadius = Math.sqrt(250 * 250 + 125 * 125);
         let expectedLeft = left - expectedRadius;
@@ -298,8 +285,8 @@ describe('MdRipple', () => {
       controller.color = backgroundColor;
       fixture.detectChanges();
 
-      dispatchMouseEvent('mousedown');
-      dispatchMouseEvent('mouseup');
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+      dispatchMouseEvent(rippleTarget, 'mouseup');
 
       let ripple = rippleTarget.querySelector('.mat-ripple-element');
       expect(window.getComputedStyle(ripple).backgroundColor).toBe(backgroundColor);
@@ -309,16 +296,16 @@ describe('MdRipple', () => {
       controller.disabled = true;
       fixture.detectChanges();
 
-      dispatchMouseEvent('mousedown');
-      dispatchMouseEvent('mouseup');
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+      dispatchMouseEvent(rippleTarget, 'mouseup');
 
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
 
       controller.disabled = false;
       fixture.detectChanges();
 
-      dispatchMouseEvent('mousedown');
-      dispatchMouseEvent('mouseup');
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+      dispatchMouseEvent(rippleTarget, 'mouseup');
 
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
     });
@@ -352,8 +339,8 @@ describe('MdRipple', () => {
       let elementRect = rippleTarget.getBoundingClientRect();
 
       // Click the ripple element 50 px to the right and 75px down from its upper left.
-      dispatchMouseEvent('mousedown', 50, 75);
-      dispatchMouseEvent('mouseup');
+      dispatchMouseEvent(rippleTarget, 'mousedown', 50, 75);
+      dispatchMouseEvent(rippleTarget, 'mouseup');
 
       // Because the centered input is true, the center of the ripple should be the midpoint of the
       // bounding rect. The ripple should expand to cover the rect corners, which are 150px
@@ -379,8 +366,8 @@ describe('MdRipple', () => {
       let elementRect = rippleTarget.getBoundingClientRect();
 
       // Click the ripple element 50 px to the right and 75px down from its upper left.
-      dispatchMouseEvent('mousedown', 50, 75);
-      dispatchMouseEvent('mouseup');
+      dispatchMouseEvent(rippleTarget, 'mousedown', 50, 75);
+      dispatchMouseEvent(rippleTarget, 'mouseup');
 
       let expectedLeft = elementRect.left + 50 - customRadius;
       let expectedTop = elementRect.top + 75 - customRadius;