Skip to content

Commit be154a6

Browse files
devversiondevversion
committed
Provide consistent testing API
1 parent ecdab95 commit be154a6

File tree

10 files changed

+44
-113
lines changed

10 files changed

+44
-113
lines changed

‎src/lib/autocomplete/autocomplete.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ describe('MdAutocomplete', () => {
213213
.toBe(false, `Expected panel state to start out closed.`);
214214

215215
input.value = 'Alabama';
216-
dispatchEvent('input', input);
216+
dispatchFakeEvent(input, 'input');
217217
fixture.detectChanges();
218218

219219
expect(fixture.componentInstance.trigger.panelOpen)
@@ -912,7 +912,7 @@ class AutocompleteWithoutForms {
912912
* @param value Value to be set on the input.
913913
* @param element Element onto which to set the value.
914914
*/
915-
function typeInElement(value: string, element: HTMLInputElement) {
915+
function typeInElement(value: string, element: HTMLInputElement, autoFocus = true) {
916916
element.focus();
917917
element.value = value;
918918
dispatchFakeEvent(element, 'input');

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

Lines changed: 6 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,6 @@ import {ViewportRuler} from '../overlay/position/viewport-ruler';
55
import {RIPPLE_FADE_OUT_DURATION, RIPPLE_FADE_IN_DURATION} from './ripple-renderer';
66
import {dispatchMouseEvent} from '../testing/dispatch-events';
77

8-
9-
/** Creates a DOM mouse event. */
10-
const createMouseEvent = (eventType: string, dict: any = {}) => {
11-
// Ideally this would just be "return new MouseEvent(eventType, dict)". But IE11 doesn't support
12-
// the MouseEvent constructor, and Edge inexplicably divides clientX and clientY by 100 to get
13-
// pageX and pageY. (Really. After "e = new MouseEvent('click', {clientX: 200, clientY: 300})",
14-
// e.clientX is 200, e.pageX is 2, e.clientY is 300, and e.pageY is 3.)
15-
// So instead we use the deprecated createEvent/initMouseEvent API, which works everywhere.
16-
const event = document.createEvent('MouseEvents');
17-
event.initMouseEvent(eventType,
18-
false, /* canBubble */
19-
false, /* cancelable */
20-
window, /* view */
21-
0, /* detail */
22-
dict.screenX || 0,
23-
dict.screenY || 0,
24-
dict.clientX || 0,
25-
dict.clientY || 0,
26-
false, /* ctrlKey */
27-
false, /* altKey */
28-
false, /* shiftKey */
29-
false, /* metaKey */
30-
0, /* button */
31-
null /* relatedTarget */);
32-
return event;
33-
};
34-
358
/** Extracts the numeric value of a pixel size string like '123px'. */
369
const pxStringToFloat = (s: string) => {
3710
return parseFloat(s.replace('px', ''));
@@ -176,8 +149,8 @@ describe('MdRipple', () => {
176149
const spy = jasmine.createSpy('zone unstable callback');
177150
const subscription = fixture.ngZone.onUnstable.subscribe(spy);
178151

179-
dispatchMouseEvent('mousedown');
180-
dispatchMouseEvent('mouseup');
152+
dispatchMouseEvent(rippleTarget, 'mousedown');
153+
dispatchMouseEvent(rippleTarget, 'mouseup');
181154

182155
expect(spy).not.toHaveBeenCalled();
183156
subscription.unsubscribe();
@@ -314,20 +287,17 @@ describe('MdRipple', () => {
314287
let alternateTrigger = fixture.debugElement.nativeElement
315288
.querySelector('.alternateTrigger') as HTMLElement;
316289

317-
let mousedownEvent = createMouseEvent('mousedown');
318-
let mouseupEvent = createMouseEvent('mouseup');
319-
320-
alternateTrigger.dispatchEvent(mousedownEvent);
321-
alternateTrigger.dispatchEvent(mouseupEvent);
290+
dispatchMouseEvent(alternateTrigger, 'mousedown');
291+
dispatchMouseEvent(alternateTrigger, 'mouseup');
322292

323293
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
324294

325295
// Set the trigger element, and now events should create ripples.
326296
controller.trigger = alternateTrigger;
327297
fixture.detectChanges();
328298

329-
alternateTrigger.dispatchEvent(mousedownEvent);
330-
alternateTrigger.dispatchEvent(mouseupEvent);
299+
dispatchMouseEvent(alternateTrigger, 'mousedown');
300+
dispatchMouseEvent(alternateTrigger, 'mouseup');
331301

332302
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
333303
});

‎src/lib/core/style/focus-origin-monitor.spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ describe('FocusOriginMonitor', () => {
5757

5858
it('should detect focus via keyboard', async(() => {
5959
// Simulate focus via keyboard.
60-
dispatchKeyboardEvent(document, TAB);
60+
dispatchKeyboardEvent(document, 'keydown', TAB);
6161
buttonElement.focus();
6262
fixture.detectChanges();
6363

@@ -95,7 +95,7 @@ describe('FocusOriginMonitor', () => {
9595

9696
it('should detect focus via touch', async(() => {
9797
// Simulate focus via touch.
98-
dispatchTouchstartEvent(buttonElement);
98+
dispatchMouseEvent(buttonElement, 'touchstart');
9999
buttonElement.focus();
100100
fixture.detectChanges();
101101

@@ -272,7 +272,7 @@ describe('cdkMonitorFocus', () => {
272272

273273
it('should detect focus via keyboard', async(() => {
274274
// Simulate focus via keyboard.
275-
dispatchKeyboardEvent(document, TAB, 'keydown');
275+
dispatchKeyboardEvent(document, 'keydown', TAB);
276276
buttonElement.focus();
277277
fixture.detectChanges();
278278

‎src/lib/core/testing/dispatch-events.ts

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,20 @@
11
import {
22
createFakeEvent,
33
createKeyboardEvent,
4-
createMouseEvent,
5-
createTransitionEndEvent
4+
createMouseEvent
65
} from './event-objects';
76

87
/** Shorthand to dispatch a fake event on a specified node. */
9-
export function dispatchFakeEvent(node: Node, eventName: string) {
10-
node.dispatchEvent(createFakeEvent(eventName));
8+
export function dispatchFakeEvent(node: Node, type: string) {
9+
node.dispatchEvent(createFakeEvent(type));
1110
}
1211

1312
/** Shorthand to dispatch a keyboard event with a specified key code. */
14-
export function dispatchKeyboardEvent(node: Node, keyCode: number, type = 'keydown') {
13+
export function dispatchKeyboardEvent(node: Node, type: string, keyCode: number) {
1514
node.dispatchEvent(createKeyboardEvent(type, keyCode));
1615
}
1716

1817
/** Shorthand to dispatch a mouse event on the specified coordinates. */
1918
export function dispatchMouseEvent(node: Node, type: string, x = 0, y = 0) {
2019
node.dispatchEvent(createMouseEvent(type, x, y));
2120
}
22-
23-
/** Shorthand to dispatch a transition event with a specified property. */
24-
export function dispatchTransitionEndEvent(node: Node, propertyName: string, elapsedTime = 0) {
25-
node.dispatchEvent(createTransitionEndEvent(propertyName, elapsedTime));
26-
}

‎src/lib/core/testing/event-objects.ts

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@ export function createMouseEvent(type: string, x = 0, y = 0) {
2222
}
2323

2424
/** Dispatches a keydown event from an element. */
25-
export function createKeyboardEvent(eventType: string, keyCode: number) {
25+
export function createKeyboardEvent(type: string, keyCode: number) {
2626
let event = document.createEvent('KeyboardEvent') as any;
2727
// Firefox does not support `initKeyboardEvent`, but supports `initKeyEvent`.
2828
let initEventFn = (event.initKeyEvent || event.initKeyboardEvent).bind(event);
2929

30-
initEventFn(eventType, true, true, window, 0, 0, 0, 0, 0, keyCode);
30+
initEventFn(type, true, true, window, 0, 0, 0, 0, 0, keyCode);
3131

3232
// Webkit Browsers don't set the keyCode when calling the init function.
3333
// See related bug https://bugs.webkit.org/show_bug.cgi?id=16735
@@ -38,25 +38,9 @@ export function createKeyboardEvent(eventType: string, keyCode: number) {
3838
return event;
3939
}
4040

41-
/** Creates a transition event with the specified property name. */
42-
export function createTransitionEndEvent(propertyName: string, elapsedTime = 0) {
43-
// Some browsers have the TransitionEvent class, but once the class is being instantiated
44-
// the browser will throw an exception. Those browsers don't support the constructor yet.
45-
// To ensure that those browsers also work, the TransitionEvent is created by using the
46-
// deprecated `initTransitionEvent` function.
47-
try {
48-
// TypeScript does not have valid types for the TransitionEvent class, so use `any`.
49-
return new (TransitionEvent as any)('transitionend', {propertyName, elapsedTime});
50-
} catch (e) {
51-
let event = document.createEvent('TransitionEvent');
52-
event.initTransitionEvent('transitionend', false, false, propertyName, elapsedTime);
53-
return event;
54-
}
55-
}
56-
5741
/** Creates a fake event object with any desired event type. */
58-
export function createFakeEvent(eventName: string) {
42+
export function createFakeEvent(type: string) {
5943
let event = document.createEvent('Event');
60-
event.initEvent(eventName, true, true);
44+
event.initEvent(type, true, true);
6145
return event;
6246
}

‎src/lib/dialog/dialog.spec.ts

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {MdDialogContainer} from './dialog-container';
2222
import {OverlayContainer, ESCAPE} from '../core';
2323
import {MdDialogRef} from './dialog-ref';
2424
import {MD_DIALOG_DATA} from './dialog-injector';
25+
import {dispatchKeyboardEvent} from '../core/testing/dispatch-events';
2526

2627

2728
describe('MdDialog', () => {
@@ -130,7 +131,7 @@ describe('MdDialog', () => {
130131
viewContainerRef: testViewContainerRef
131132
});
132133

133-
dispatchKeydownEvent(document, ESCAPE);
134+
dispatchKeyboardEvent(document, 'keydown', ESCAPE);
134135
viewContainerFixture.detectChanges();
135136

136137
viewContainerFixture.whenStable().then(() => {
@@ -366,7 +367,7 @@ describe('MdDialog', () => {
366367
});
367368

368369
viewContainerFixture.detectChanges();
369-
dispatchKeydownEvent(document, ESCAPE);
370+
dispatchKeyboardEvent(document, 'keydown', ESCAPE);
370371

371372
expect(overlayContainerElement.querySelector('md-dialog-container')).toBeTruthy();
372373
});
@@ -613,15 +614,3 @@ const TEST_DIRECTIVES = [
613614
],
614615
})
615616
class DialogTestModule { }
616-
617-
618-
// TODO(crisbeto): switch to using function from common testing utils once #2943 is merged.
619-
function dispatchKeydownEvent(element: Node, keyCode: number) {
620-
let event: any = document.createEvent('KeyboardEvent');
621-
(event.initKeyEvent || event.initKeyboardEvent).bind(event)(
622-
'keydown', true, true, window, 0, 0, 0, 0, 0, keyCode);
623-
Object.defineProperty(event, 'keyCode', {
624-
get: function() { return keyCode; }
625-
});
626-
element.dispatchEvent(event);
627-
}

‎src/lib/slide-toggle/slide-toggle.spec.ts

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -684,10 +684,3 @@ class SlideToggleFormsTestApp {
684684
class SlideToggleWithFormControl {
685685
formControl = new FormControl();
686686
}
687-
688-
// TODO(devversion): replace with global utility once pull request #2943 is merged.
689-
function dispatchFakeEvent(element: HTMLElement, eventName: string): void {
690-
let event = document.createEvent('Event');
691-
event.initEvent(eventName, true, true);
692-
element.dispatchEvent(event);
693-
}

‎src/lib/slider/slider.spec.ts

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -729,7 +729,7 @@ describe('MdSlider', () => {
729729
it('should update the model on keydown', () => {
730730
expect(testComponent.val).toBe(0);
731731

732-
dispatchKeyboardEvent(sliderNativeElement, UP_ARROW);
732+
dispatchKeyboardEvent(sliderNativeElement, 'keydown', UP_ARROW);
733733
fixture.detectChanges();
734734

735735
expect(testComponent.val).toBe(1);
@@ -949,14 +949,14 @@ describe('MdSlider', () => {
949949
});
950950

951951
it('should increment slider by 1 on up arrow pressed', () => {
952-
dispatchKeyboardEvent(sliderNativeElement, UP_ARROW);
952+
dispatchKeyboardEvent(sliderNativeElement, 'keydown', UP_ARROW);
953953
fixture.detectChanges();
954954

955955
expect(sliderInstance.value).toBe(1);
956956
});
957957

958958
it('should increment slider by 1 on right arrow pressed', () => {
959-
dispatchKeyboardEvent(sliderNativeElement, RIGHT_ARROW);
959+
dispatchKeyboardEvent(sliderNativeElement, 'keydown', RIGHT_ARROW);
960960
fixture.detectChanges();
961961

962962
expect(sliderInstance.value).toBe(1);
@@ -965,7 +965,7 @@ describe('MdSlider', () => {
965965
it('should decrement slider by 1 on down arrow pressed', () => {
966966
sliderInstance.value = 100;
967967

968-
dispatchKeyboardEvent(sliderNativeElement, DOWN_ARROW);
968+
dispatchKeyboardEvent(sliderNativeElement, 'keydown', DOWN_ARROW);
969969
fixture.detectChanges();
970970

971971
expect(sliderInstance.value).toBe(99);
@@ -974,14 +974,14 @@ describe('MdSlider', () => {
974974
it('should decrement slider by 1 on left arrow pressed', () => {
975975
sliderInstance.value = 100;
976976

977-
dispatchKeyboardEvent(sliderNativeElement, LEFT_ARROW);
977+
dispatchKeyboardEvent(sliderNativeElement, 'keydown', LEFT_ARROW);
978978
fixture.detectChanges();
979979

980980
expect(sliderInstance.value).toBe(99);
981981
});
982982

983983
it('should increment slider by 10 on page up pressed', () => {
984-
dispatchKeyboardEvent(sliderNativeElement, PAGE_UP);
984+
dispatchKeyboardEvent(sliderNativeElement, 'keydown', PAGE_UP);
985985
fixture.detectChanges();
986986

987987
expect(sliderInstance.value).toBe(10);
@@ -990,14 +990,14 @@ describe('MdSlider', () => {
990990
it('should decrement slider by 10 on page down pressed', () => {
991991
sliderInstance.value = 100;
992992

993-
dispatchKeyboardEvent(sliderNativeElement, PAGE_DOWN);
993+
dispatchKeyboardEvent(sliderNativeElement, 'keydown', PAGE_DOWN);
994994
fixture.detectChanges();
995995

996996
expect(sliderInstance.value).toBe(90);
997997
});
998998

999999
it('should set slider to max on end pressed', () => {
1000-
dispatchKeyboardEvent(sliderNativeElement, END);
1000+
dispatchKeyboardEvent(sliderNativeElement, 'keydown', END);
10011001
fixture.detectChanges();
10021002

10031003
expect(sliderInstance.value).toBe(100);
@@ -1006,7 +1006,7 @@ describe('MdSlider', () => {
10061006
it('should set slider to min on home pressed', () => {
10071007
sliderInstance.value = 100;
10081008

1009-
dispatchKeyboardEvent(sliderNativeElement, HOME);
1009+
dispatchKeyboardEvent(sliderNativeElement, 'keydown', HOME);
10101010
fixture.detectChanges();
10111011

10121012
expect(sliderInstance.value).toBe(0);
@@ -1067,7 +1067,7 @@ describe('MdSlider', () => {
10671067
testComponent.invert = true;
10681068
fixture.detectChanges();
10691069

1070-
dispatchKeyboardEvent(sliderNativeElement, RIGHT_ARROW);
1070+
dispatchKeyboardEvent(sliderNativeElement, 'keydown', RIGHT_ARROW);
10711071
fixture.detectChanges();
10721072

10731073
expect(sliderInstance.value).toBe(1);
@@ -1078,7 +1078,7 @@ describe('MdSlider', () => {
10781078
sliderInstance.value = 100;
10791079
fixture.detectChanges();
10801080

1081-
dispatchKeyboardEvent(sliderNativeElement, LEFT_ARROW);
1081+
dispatchKeyboardEvent(sliderNativeElement, 'keydown', LEFT_ARROW);
10821082
fixture.detectChanges();
10831083

10841084
expect(sliderInstance.value).toBe(99);
@@ -1089,7 +1089,7 @@ describe('MdSlider', () => {
10891089
sliderInstance.value = 100;
10901090
fixture.detectChanges();
10911091

1092-
dispatchKeyboardEvent(sliderNativeElement, RIGHT_ARROW);
1092+
dispatchKeyboardEvent(sliderNativeElement, 'keydown', RIGHT_ARROW);
10931093
fixture.detectChanges();
10941094

10951095
expect(sliderInstance.value).toBe(99);
@@ -1099,7 +1099,7 @@ describe('MdSlider', () => {
10991099
testComponent.dir = 'rtl';
11001100
fixture.detectChanges();
11011101

1102-
dispatchKeyboardEvent(sliderNativeElement, LEFT_ARROW);
1102+
dispatchKeyboardEvent(sliderNativeElement, 'keydown', LEFT_ARROW);
11031103
fixture.detectChanges();
11041104

11051105
expect(sliderInstance.value).toBe(1);
@@ -1111,7 +1111,7 @@ describe('MdSlider', () => {
11111111
sliderInstance.value = 100;
11121112
fixture.detectChanges();
11131113

1114-
dispatchKeyboardEvent(sliderNativeElement, RIGHT_ARROW);
1114+
dispatchKeyboardEvent(sliderNativeElement, 'keydown', RIGHT_ARROW);
11151115
fixture.detectChanges();
11161116

11171117
expect(sliderInstance.value).toBe(99);
@@ -1122,7 +1122,7 @@ describe('MdSlider', () => {
11221122
testComponent.invert = true;
11231123
fixture.detectChanges();
11241124

1125-
dispatchKeyboardEvent(sliderNativeElement, LEFT_ARROW);
1125+
dispatchKeyboardEvent(sliderNativeElement, 'keydown', LEFT_ARROW);
11261126
fixture.detectChanges();
11271127

11281128
expect(sliderInstance.value).toBe(1);

‎src/lib/tabs/tab-header.spec.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -106,19 +106,21 @@ describe('MdTabHeader', () => {
106106
fixture.detectChanges();
107107
expect(appComponent.mdTabHeader.focusIndex).toBe(0);
108108

109+
let tabListContainer = appComponent.mdTabHeader._tabListContainer.nativeElement;
110+
109111
// Move focus right to 2
110-
dispatchKeyboardEvent(appComponent.mdTabHeader._tabListContainer.nativeElement, RIGHT_ARROW);
112+
dispatchKeyboardEvent(tabListContainer, 'keydown', RIGHT_ARROW);
111113
fixture.detectChanges();
112114
expect(appComponent.mdTabHeader.focusIndex).toBe(2);
113115

114116
// Select the focused index 2
115117
expect(appComponent.selectedIndex).toBe(0);
116-
dispatchKeyboardEvent(appComponent.mdTabHeader._tabListContainer.nativeElement, ENTER);
118+
dispatchKeyboardEvent(tabListContainer, 'keydown', ENTER);
117119
fixture.detectChanges();
118120
expect(appComponent.selectedIndex).toBe(2);
119121

120122
// Move focus right to 0
121-
dispatchKeyboardEvent(appComponent.mdTabHeader._tabListContainer.nativeElement, LEFT_ARROW);
123+
dispatchKeyboardEvent(tabListContainer, 'keydown', LEFT_ARROW);
122124
fixture.detectChanges();
123125
expect(appComponent.mdTabHeader.focusIndex).toBe(0);
124126
});

0 commit comments

Comments
 (0)