Skip to content

Commit 13a2e70

Browse files
devversiondevversion
committed
Provide consistent testing API
1 parent c581dfc commit 13a2e70

File tree

8 files changed

+41
-81
lines changed

8 files changed

+41
-81
lines changed

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

+6-36
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', ''));
@@ -160,8 +133,8 @@ describe('MdRipple', () => {
160133
const spy = jasmine.createSpy('zone unstable callback');
161134
const subscription = fixture.ngZone.onUnstable.subscribe(spy);
162135

163-
dispatchMouseEvent('mousedown');
164-
dispatchMouseEvent('mouseup');
136+
dispatchMouseEvent(rippleTarget, 'mousedown');
137+
dispatchMouseEvent(rippleTarget, 'mouseup');
165138

166139
expect(spy).not.toHaveBeenCalled();
167140
subscription.unsubscribe();
@@ -298,20 +271,17 @@ describe('MdRipple', () => {
298271
let alternateTrigger = fixture.debugElement.nativeElement
299272
.querySelector('.alternateTrigger') as HTMLElement;
300273

301-
let mousedownEvent = createMouseEvent('mousedown');
302-
let mouseupEvent = createMouseEvent('mouseup');
303-
304-
alternateTrigger.dispatchEvent(mousedownEvent);
305-
alternateTrigger.dispatchEvent(mouseupEvent);
274+
dispatchMouseEvent(alternateTrigger, 'mousedown');
275+
dispatchMouseEvent(alternateTrigger, 'mouseup');
306276

307277
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
308278

309279
// Set the trigger element, and now events should create ripples.
310280
controller.trigger = alternateTrigger;
311281
fixture.detectChanges();
312282

313-
alternateTrigger.dispatchEvent(mousedownEvent);
314-
alternateTrigger.dispatchEvent(mouseupEvent);
283+
dispatchMouseEvent(alternateTrigger, 'mousedown');
284+
dispatchMouseEvent(alternateTrigger, 'mouseup');
315285

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

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

+3-3
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

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ import {
66
} from './event-objects';
77

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

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

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

+4-4
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
@@ -55,8 +55,8 @@ export function createTransitionEndEvent(propertyName: string, elapsedTime = 0)
5555
}
5656

5757
/** Creates a fake event object with any desired event type. */
58-
export function createFakeEvent(eventName: string) {
58+
export function createFakeEvent(type: string) {
5959
let event = document.createEvent('Event');
60-
event.initEvent(eventName, true, true);
60+
event.initEvent(type, true, true);
6161
return event;
6262
}

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

+3-14
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {OverlayContainer} from '../core';
2121
import {MdDialogRef} from './dialog-ref';
2222
import {MD_DIALOG_DATA} from './dialog-injector';
2323
import {ESCAPE} from '../core/keyboard/keycodes';
24+
import {dispatchKeyboardEvent} from '../core/testing/dispatch-events';
2425

2526

2627
describe('MdDialog', () => {
@@ -135,7 +136,7 @@ describe('MdDialog', () => {
135136

136137
viewContainerFixture.detectChanges();
137138

138-
dispatchKeydownEvent(document, ESCAPE);
139+
dispatchKeyboardEvent(document, 'keydown', ESCAPE);
139140

140141
expect(overlayContainerElement.querySelector('md-dialog-container')).toBeNull();
141142
});
@@ -319,7 +320,7 @@ describe('MdDialog', () => {
319320

320321
viewContainerFixture.detectChanges();
321322

322-
dispatchKeydownEvent(document, ESCAPE);
323+
dispatchKeyboardEvent(document, 'keydown', ESCAPE);
323324

324325
expect(overlayContainerElement.querySelector('md-dialog-container')).toBeTruthy();
325326
});
@@ -556,15 +557,3 @@ const TEST_DIRECTIVES = [
556557
],
557558
})
558559
class DialogTestModule { }
559-
560-
561-
// TODO(crisbeto): switch to using function from common testing utils once #2943 is merged.
562-
function dispatchKeydownEvent(element: Node, keyCode: number) {
563-
let event: any = document.createEvent('KeyboardEvent');
564-
(event.initKeyEvent || event.initKeyboardEvent).bind(event)(
565-
'keydown', true, true, window, 0, 0, 0, 0, 0, keyCode);
566-
Object.defineProperty(event, 'keyCode', {
567-
get: function() { return keyCode; }
568-
});
569-
element.dispatchEvent(event);
570-
}

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

+15-15
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

+5-3
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
});

‎src/lib/tooltip/tooltip.spec.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {OverlayContainer} from '../core';
1919
import {Dir, LayoutDirection} from '../core/rtl/dir';
2020
import {OverlayModule} from '../core/overlay/overlay-directives';
2121
import {Scrollable} from '../core/overlay/scroll/scrollable';
22+
import {dispatchFakeEvent} from '../core/testing/dispatch-events';
2223

2324
const initialTooltipMessage = 'initial tooltip message';
2425

@@ -441,9 +442,7 @@ class ScrollableTooltipDemo {
441442
// Emit a scroll event from the scrolling element in our component.
442443
// This event should be picked up by the scrollable directive and notify.
443444
// The notification should be picked up by the service.
444-
const scrollEvent = document.createEvent('UIEvents');
445-
scrollEvent.initUIEvent('scroll', true, true, window, 0);
446-
scrollingContainerEl.dispatchEvent(scrollEvent);
445+
dispatchFakeEvent(scrollingContainerEl, 'scroll');
447446
}
448447
}
449448

0 commit comments

Comments
 (0)