feat: add interface definitions which zone extends EventTarget (#35304)

Close #35173

PR Close #35304
This commit is contained in:
JiaLiPassion 2020-02-11 04:23:58 +09:00 committed by Miško Hevery
parent df816c9c80
commit 4acb676f2e
4 changed files with 87 additions and 30 deletions

View File

@ -12,12 +12,27 @@ genrule(
) )
genrule( genrule(
name = "zone_d_ts", name = "zone_js_d_ts",
srcs = ["//packages/zone.js/lib:zone_d_ts"], srcs = ["//packages/zone.js/lib:zone_d_ts"],
outs = ["zone.js.d.ts"], outs = ["zone.js.d.ts"],
cmd = "cp $< $@", cmd = "cp $< $@",
) )
genrule(
name = "zone_extensions_d_ts",
srcs = ["//packages/zone.js/lib:zone.api.extensions.ts"],
outs = ["zone.api.extensions.ts"],
cmd = "cp $< $@",
)
filegroup(
name = "zone_d_ts",
srcs = [
":zone_extensions_d_ts",
":zone_js_d_ts",
],
)
zone_rollup_bundle( zone_rollup_bundle(
bundles = ES5_BUNDLES.items(), bundles = ES5_BUNDLES.items(),
config_file = "//packages/zone.js:rollup-es5.config.js", config_file = "//packages/zone.js:rollup-es5.config.js",

View File

@ -0,0 +1,38 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* Additional `EventTarget` methods added by `Zone.js`.
*
* 1. removeAllListeners, remove all event listeners of the given event name.
* 2. eventListeners, get all event listeners of the given event name.
*/
interface EventTarget {
/**
*
* Remove all event listeners by name for this event target.
*
* If the `eventName` is provided, will remove event listeners of that name.
* If the `eventName` is not provided, will remove all event listeners associated with
* `EventTarget`.
*
* @param eventName the name of the event, such as `click`. This parameter is optional.
*/
removeAllListeners(eventName?: string): void;
/**
*
* Retrieve all event listeners by name.
*
* If the `eventName` is provided, will return an array of event handlers or event listener
* objects of the given event.
* If the `eventName` is not provided, will return all listeners.
*
* @param eventName the name of the event, such as click. This parameter is optional.
*/
eventListeners(eventName?: string): EventListenerOrEventListenerObject[];
}

View File

@ -1120,11 +1120,11 @@ describe('Zone', function() {
}); });
zone.run(() => { button.addEventListener('click', function() { logs.push('click'); }); }); zone.run(() => { button.addEventListener('click', function() { logs.push('click'); }); });
let listeners = (button as any).eventListeners('click'); let listeners = button.eventListeners('click');
expect(listeners.length).toBe(1); expect(listeners.length).toBe(1);
eventTask !.zone.cancelTask(eventTask !); eventTask !.zone.cancelTask(eventTask !);
listeners = (button as any).eventListeners('click'); listeners = button.eventListeners('click');
button.dispatchEvent(clickEvent); button.dispatchEvent(clickEvent);
expect(logs.length).toBe(0); expect(logs.length).toBe(0);
expect(listeners.length).toBe(0); expect(listeners.length).toBe(0);
@ -1146,11 +1146,11 @@ describe('Zone', function() {
zone.run(() => { zone.run(() => {
button.addEventListener('click', function() { logs.push('click'); }, true); button.addEventListener('click', function() { logs.push('click'); }, true);
}); });
let listeners = (button as any).eventListeners('click'); let listeners = button.eventListeners('click');
expect(listeners.length).toBe(1); expect(listeners.length).toBe(1);
eventTask !.zone.cancelTask(eventTask !); eventTask !.zone.cancelTask(eventTask !);
listeners = (button as any).eventListeners('click'); listeners = button.eventListeners('click');
button.dispatchEvent(clickEvent); button.dispatchEvent(clickEvent);
expect(logs.length).toBe(0); expect(logs.length).toBe(0);
expect(listeners.length).toBe(0); expect(listeners.length).toBe(0);
@ -1172,7 +1172,7 @@ describe('Zone', function() {
zone.run( zone.run(
() => { button.addEventListener('click', function() { logs.push('click1'); }); }); () => { button.addEventListener('click', function() { logs.push('click1'); }); });
button.addEventListener('click', function() { logs.push('click2'); }); button.addEventListener('click', function() { logs.push('click2'); });
let listeners = (button as any).eventListeners('click'); let listeners = button.eventListeners('click');
expect(listeners.length).toBe(2); expect(listeners.length).toBe(2);
button.dispatchEvent(clickEvent); button.dispatchEvent(clickEvent);
@ -1181,7 +1181,7 @@ describe('Zone', function() {
eventTask !.zone.cancelTask(eventTask !); eventTask !.zone.cancelTask(eventTask !);
logs = []; logs = [];
listeners = (button as any).eventListeners('click'); listeners = button.eventListeners('click');
button.dispatchEvent(clickEvent); button.dispatchEvent(clickEvent);
expect(logs.length).toBe(1); expect(logs.length).toBe(1);
expect(listeners.length).toBe(1); expect(listeners.length).toBe(1);
@ -1205,7 +1205,7 @@ describe('Zone', function() {
button.addEventListener('click', function() { logs.push('click1'); }, true); button.addEventListener('click', function() { logs.push('click1'); }, true);
}); });
button.addEventListener('click', function() { logs.push('click2'); }, true); button.addEventListener('click', function() { logs.push('click2'); }, true);
let listeners = (button as any).eventListeners('click'); let listeners = button.eventListeners('click');
expect(listeners.length).toBe(2); expect(listeners.length).toBe(2);
button.dispatchEvent(clickEvent); button.dispatchEvent(clickEvent);
@ -1214,7 +1214,7 @@ describe('Zone', function() {
eventTask !.zone.cancelTask(eventTask !); eventTask !.zone.cancelTask(eventTask !);
logs = []; logs = [];
listeners = (button as any).eventListeners('click'); listeners = button.eventListeners('click');
button.dispatchEvent(clickEvent); button.dispatchEvent(clickEvent);
expect(logs.length).toBe(1); expect(logs.length).toBe(1);
expect(listeners.length).toBe(1); expect(listeners.length).toBe(1);
@ -1238,7 +1238,7 @@ describe('Zone', function() {
button.addEventListener('click', function() { logs.push('click1'); }, true); button.addEventListener('click', function() { logs.push('click1'); }, true);
}); });
button.addEventListener('click', function() { logs.push('click2'); }); button.addEventListener('click', function() { logs.push('click2'); });
let listeners = (button as any).eventListeners('click'); let listeners = button.eventListeners('click');
expect(listeners.length).toBe(2); expect(listeners.length).toBe(2);
button.dispatchEvent(clickEvent); button.dispatchEvent(clickEvent);
@ -1247,7 +1247,7 @@ describe('Zone', function() {
eventTask !.zone.cancelTask(eventTask !); eventTask !.zone.cancelTask(eventTask !);
logs = []; logs = [];
listeners = (button as any).eventListeners('click'); listeners = button.eventListeners('click');
button.dispatchEvent(clickEvent); button.dispatchEvent(clickEvent);
expect(logs.length).toBe(1); expect(logs.length).toBe(1);
expect(listeners.length).toBe(1); expect(listeners.length).toBe(1);
@ -1789,7 +1789,7 @@ describe('Zone', function() {
function() { function() {
let logs: string[] = []; let logs: string[] = [];
const listener1 = function() { const listener1 = function() {
(button as any).removeAllListeners('click'); button.removeAllListeners('click');
logs.push('listener1'); logs.push('listener1');
}; };
const listener2 = function() { logs.push('listener2'); }; const listener2 = function() { logs.push('listener2'); };
@ -1812,7 +1812,7 @@ describe('Zone', function() {
function() { function() {
let logs: string[] = []; let logs: string[] = [];
const listener1 = function() { const listener1 = function() {
(button as any).removeAllListeners('click'); button.removeAllListeners('click');
logs.push('listener1'); logs.push('listener1');
}; };
const listener2 = function() { logs.push('listener2'); }; const listener2 = function() { logs.push('listener2'); };
@ -1836,7 +1836,7 @@ describe('Zone', function() {
let logs: string[] = []; let logs: string[] = [];
const listener1 = function() { logs.push('listener1'); }; const listener1 = function() { logs.push('listener1'); };
const listener2 = function() { const listener2 = function() {
(button as any).removeAllListeners('click'); button.removeAllListeners('click');
logs.push('listener2'); logs.push('listener2');
}; };
const listener3 = {handleEvent: function(event: Event) { logs.push('listener3'); }}; const listener3 = {handleEvent: function(event: Event) { logs.push('listener3'); }};
@ -1859,7 +1859,7 @@ describe('Zone', function() {
let logs: string[] = []; let logs: string[] = [];
const listener1 = function() { logs.push('listener1'); }; const listener1 = function() { logs.push('listener1'); };
const listener2 = function() { const listener2 = function() {
(button as any).removeAllListeners('click'); button.removeAllListeners('click');
logs.push('listener2'); logs.push('listener2');
}; };
const listener3 = {handleEvent: function(event: Event) { logs.push('listener3'); }}; const listener3 = {handleEvent: function(event: Event) { logs.push('listener3'); }};
@ -1885,7 +1885,7 @@ describe('Zone', function() {
const listener3 = { const listener3 = {
handleEvent: function(event: Event) { handleEvent: function(event: Event) {
logs.push('listener3'); logs.push('listener3');
(button as any).removeAllListeners('click'); button.removeAllListeners('click');
} }
}; };
@ -1910,7 +1910,7 @@ describe('Zone', function() {
const listener3 = { const listener3 = {
handleEvent: function(event: Event) { handleEvent: function(event: Event) {
logs.push('listener3'); logs.push('listener3');
(button as any).removeAllListeners('click'); button.removeAllListeners('click');
} }
}; };
@ -1939,7 +1939,7 @@ describe('Zone', function() {
button.addEventListener('click', listener3); button.addEventListener('click', listener3);
button.addEventListener('mouseover', listener4); button.addEventListener('mouseover', listener4);
const listeners = (button as any).eventListeners('click'); const listeners = button.eventListeners('click');
expect(listeners.length).toBe(3); expect(listeners.length).toBe(3);
expect(listeners).toEqual([listener1, listener2, listener3]); expect(listeners).toEqual([listener1, listener2, listener3]);
button.removeEventListener('click', listener1); button.removeEventListener('click', listener1);
@ -1956,7 +1956,7 @@ describe('Zone', function() {
button.addEventListener('mouseover', listener2); button.addEventListener('mouseover', listener2);
button.addEventListener('mousehover', listener3); button.addEventListener('mousehover', listener3);
const listeners = (button as any).eventListeners(); const listeners = button.eventListeners();
expect(listeners.length).toBe(3); expect(listeners.length).toBe(3);
expect(listeners).toEqual([listener1, listener2, listener3]); expect(listeners).toEqual([listener1, listener2, listener3]);
button.removeEventListener('click', listener1); button.removeEventListener('click', listener1);
@ -1979,8 +1979,8 @@ describe('Zone', function() {
button.onmouseover = listener5; button.onmouseover = listener5;
expect((button as any)[Zone.__symbol__('ON_PROPERTYmouseover')]).toEqual(listener5); expect((button as any)[Zone.__symbol__('ON_PROPERTYmouseover')]).toEqual(listener5);
(button as any).removeAllListeners('mouseover'); button.removeAllListeners('mouseover');
const listeners = (button as any).eventListeners('mouseover'); const listeners = button.eventListeners('mouseover');
expect(listeners.length).toBe(0); expect(listeners.length).toBe(0);
expect((button as any)[Zone.__symbol__('ON_PROPERTYmouseover')]).toBeNull(); expect((button as any)[Zone.__symbol__('ON_PROPERTYmouseover')]).toBeNull();
expect(!!button.onmouseover).toBeFalsy(); expect(!!button.onmouseover).toBeFalsy();
@ -2010,8 +2010,8 @@ describe('Zone', function() {
button.addEventListener('mouseover', listener3, true); button.addEventListener('mouseover', listener3, true);
button.addEventListener('click', listener4, true); button.addEventListener('click', listener4, true);
(button as any).removeAllListeners('mouseover'); button.removeAllListeners('mouseover');
const listeners = (button as any).eventListeners('mouseover'); const listeners = button.eventListeners('mouseover');
expect(listeners.length).toBe(0); expect(listeners.length).toBe(0);
const mouseEvent = document.createEvent('Event'); const mouseEvent = document.createEvent('Event');
@ -2039,8 +2039,8 @@ describe('Zone', function() {
button.addEventListener('mouseover', listener3, true); button.addEventListener('mouseover', listener3, true);
button.addEventListener('click', listener4, true); button.addEventListener('click', listener4, true);
(button as any).removeAllListeners('mouseover'); button.removeAllListeners('mouseover');
const listeners = (button as any).eventListeners('mouseove'); const listeners = button.eventListeners('mouseove');
expect(listeners.length).toBe(0); expect(listeners.length).toBe(0);
const mouseEvent = document.createEvent('Event'); const mouseEvent = document.createEvent('Event');
@ -2070,8 +2070,8 @@ describe('Zone', function() {
button.onmouseover = listener5; button.onmouseover = listener5;
expect((button as any)[Zone.__symbol__('ON_PROPERTYmouseover')]).toEqual(listener5); expect((button as any)[Zone.__symbol__('ON_PROPERTYmouseover')]).toEqual(listener5);
(button as any).removeAllListeners(); button.removeAllListeners();
const listeners = (button as any).eventListeners('mouseover'); const listeners = button.eventListeners('mouseover');
expect(listeners.length).toBe(0); expect(listeners.length).toBe(0);
expect((button as any)[Zone.__symbol__('ON_PROPERTYmouseover')]).toBeNull(); expect((button as any)[Zone.__symbol__('ON_PROPERTYmouseover')]).toBeNull();
expect(!!button.onmouseover).toBeFalsy(); expect(!!button.onmouseover).toBeFalsy();
@ -2102,7 +2102,7 @@ describe('Zone', function() {
button.removeEventListener('mouseover', listener2); button.removeEventListener('mouseover', listener2);
button.removeEventListener('click', listener3); button.removeEventListener('click', listener3);
button.removeEventListener('click', listener4); button.removeEventListener('click', listener4);
const listeners = (button as any).eventListeners('mouseover'); const listeners = button.eventListeners('mouseover');
expect(listeners.length).toBe(0); expect(listeners.length).toBe(0);
const mouseEvent = document.createEvent('Event'); const mouseEvent = document.createEvent('Event');
@ -2127,8 +2127,8 @@ describe('Zone', function() {
button.addEventListener('click', listener3); button.addEventListener('click', listener3);
(button as any)[Zone.__symbol__('addEventListener')]('click', listener4); (button as any)[Zone.__symbol__('addEventListener')]('click', listener4);
(button as any).removeAllListeners(); button.removeAllListeners();
const listeners = (button as any).eventListeners('mouseover'); const listeners = button.eventListeners('mouseover');
expect(listeners.length).toBe(0); expect(listeners.length).toBe(0);
const mouseEvent = document.createEvent('Event'); const mouseEvent = document.createEvent('Event');

View File

@ -39,6 +39,9 @@ describe('Zone.js npm_package', () => {
describe('typescript support', () => { describe('typescript support', () => {
it('should have an zone.js.d.ts file', it('should have an zone.js.d.ts file',
() => { expect(shx.cat('zone.js.d.ts')).toContain('declare const'); }); () => { expect(shx.cat('zone.js.d.ts')).toContain('declare const'); });
it('should have an zone.api.extensions.ts file',
() => { expect(shx.cat('zone.api.extensions.ts')).toContain('EventTarget'); });
}); });
describe('closure', () => { describe('closure', () => {
@ -136,6 +139,7 @@ describe('Zone.js npm_package', () => {
'zone-testing.min.js', 'zone-testing.min.js',
'zone.js', 'zone.js',
'zone.js.d.ts', 'zone.js.d.ts',
'zone.api.extensions.ts',
'zone.min.js', 'zone.min.js',
].sort(); ].sort();
expect(list.length).toBe(expected.length); expect(list.length).toBe(expected.length);