angular-cn/packages/zone.js/test/browser/element.spec.ts

339 lines
10 KiB
TypeScript

/**
* @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
*/
import {ifEnvSupports} from '../test-util';
describe('element', function() {
let button: HTMLButtonElement;
beforeEach(function() {
button = document.createElement('button');
document.body.appendChild(button);
});
afterEach(function() {
document.body.removeChild(button);
});
// https://github.com/angular/zone.js/issues/190
it('should work when addEventListener / removeEventListener are called in the global context',
function() {
const clickEvent = document.createEvent('Event');
let callCount = 0;
clickEvent.initEvent('click', true, true);
const listener = function(event: Event) {
callCount++;
expect(event).toBe(clickEvent);
};
// `this` would be null inside the method when `addEventListener` is called from strict mode
// it would be `window`:
// - when called from non strict-mode,
// - when `window.addEventListener` is called explicitly.
addEventListener('click', listener);
button.dispatchEvent(clickEvent);
expect(callCount).toEqual(1);
removeEventListener('click', listener);
button.dispatchEvent(clickEvent);
expect(callCount).toEqual(1);
});
it('should work with addEventListener when called with a function listener', function() {
const clickEvent = document.createEvent('Event');
clickEvent.initEvent('click', true, true);
button.addEventListener('click', function(event) {
expect(event).toBe(clickEvent as any);
});
button.dispatchEvent(clickEvent);
});
it('should not call microtasks early when an event is invoked', function(done) {
let log = '';
button.addEventListener('click', () => {
Zone.current.scheduleMicroTask('test', () => log += 'microtask;');
log += 'click;';
});
button.click();
expect(log).toEqual('click;');
done();
});
it('should call microtasks early when an event is invoked', function(done) {
/*
* In this test we escape the Zone using unpatched setTimeout.
* This way the eventTask invoked from click will think it is the top most
* task and eagerly drain the microtask queue.
*
* THIS IS THE WRONG BEHAVIOR!
*
* But there is no easy way for the task to know if it is the top most task.
*
* Given that this can only arise when someone is emulating clicks on DOM in a synchronous
* fashion we have few choices:
* 1. Ignore as this is unlikely to be a problem outside of tests.
* 2. Monkey patch the event methods to increment the _numberOfNestedTaskFrames and prevent
* eager drainage.
* 3. Pay the cost of throwing an exception in event tasks and verifying that we are the
* top most frame.
*
* For now we are choosing to ignore it and assume that this arises in tests only.
* As an added measure we make sure that all jasmine tests always run in a task. See: jasmine.ts
*/
(window as any)[(Zone as any).__symbol__('setTimeout')](() => {
let log = '';
button.addEventListener('click', () => {
Zone.current.scheduleMicroTask('test', () => log += 'microtask;');
log += 'click;';
});
button.click();
expect(log).toEqual('click;microtask;');
done();
});
});
it('should work with addEventListener when called with an EventListener-implementing listener',
function() {
const eventListener = {
x: 5,
handleEvent: function(event: Event) {
// Test that context is preserved
expect(this.x).toBe(5);
expect(event).toBe(clickEvent);
}
};
const clickEvent = document.createEvent('Event');
clickEvent.initEvent('click', true, true);
button.addEventListener('click', eventListener);
button.dispatchEvent(clickEvent);
});
it('should respect removeEventListener when called with a function listener', function() {
let log = '';
const logFunction = function logFunction() {
log += 'a';
};
button.addEventListener('click', logFunction);
button.addEventListener('focus', logFunction);
button.click();
expect(log).toEqual('a');
const focusEvent = document.createEvent('Event');
focusEvent.initEvent('focus', true, true);
button.dispatchEvent(focusEvent);
expect(log).toEqual('aa');
button.removeEventListener('click', logFunction);
button.click();
expect(log).toEqual('aa');
});
it('should respect removeEventListener with an EventListener-implementing listener', function() {
const eventListener = {x: 5, handleEvent: jasmine.createSpy('handleEvent')};
button.addEventListener('click', eventListener);
button.removeEventListener('click', eventListener);
button.click();
expect(eventListener.handleEvent).not.toHaveBeenCalled();
});
it('should have no effect while calling addEventListener without listener', function() {
const onAddEventListenerSpy = jasmine.createSpy('addEventListener');
const eventListenerZone =
Zone.current.fork({name: 'eventListenerZone', onScheduleTask: onAddEventListenerSpy});
expect(function() {
eventListenerZone.run(function() {
button.addEventListener('click', null as any);
button.addEventListener('click', undefined as any);
});
}).not.toThrowError();
expect(onAddEventListenerSpy).not.toHaveBeenCalledWith();
});
it('should have no effect while calling removeEventListener without listener', function() {
const onAddEventListenerSpy = jasmine.createSpy('removeEventListener');
const eventListenerZone =
Zone.current.fork({name: 'eventListenerZone', onScheduleTask: onAddEventListenerSpy});
expect(function() {
eventListenerZone.run(function() {
button.removeEventListener('click', null as any);
button.removeEventListener('click', undefined as any);
});
}).not.toThrowError();
expect(onAddEventListenerSpy).not.toHaveBeenCalledWith();
});
it('should only add a listener once for a given set of arguments', function() {
const log: string[] = [];
const clickEvent = document.createEvent('Event');
function listener() {
log.push('listener');
}
clickEvent.initEvent('click', true, true);
button.addEventListener('click', listener);
button.addEventListener('click', listener);
button.addEventListener('click', listener);
button.dispatchEvent(clickEvent);
expect(log).toEqual(['listener']);
button.removeEventListener('click', listener);
button.dispatchEvent(clickEvent);
expect(log).toEqual(['listener']);
});
it('should correctly handler capturing versus nonCapturing eventListeners', function() {
const log: string[] = [];
const clickEvent = document.createEvent('Event');
function capturingListener() {
log.push('capturingListener');
}
function bubblingListener() {
log.push('bubblingListener');
}
clickEvent.initEvent('click', true, true);
document.body.addEventListener('click', capturingListener, true);
document.body.addEventListener('click', bubblingListener);
button.dispatchEvent(clickEvent);
expect(log).toEqual(['capturingListener', 'bubblingListener']);
});
it('should correctly handler a listener that is both capturing and nonCapturing', function() {
const log: string[] = [];
const clickEvent = document.createEvent('Event');
function listener() {
log.push('listener');
}
clickEvent.initEvent('click', true, true);
document.body.addEventListener('click', listener, true);
document.body.addEventListener('click', listener);
button.dispatchEvent(clickEvent);
document.body.removeEventListener('click', listener, true);
document.body.removeEventListener('click', listener);
button.dispatchEvent(clickEvent);
expect(log).toEqual(['listener', 'listener']);
});
describe('onclick', function() {
function supportsOnClick() {
const div = document.createElement('div');
const clickPropDesc = Object.getOwnPropertyDescriptor(div, 'onclick');
return !(
EventTarget && div instanceof EventTarget && clickPropDesc &&
clickPropDesc.value === null);
}
(<any>supportsOnClick).message = 'Supports Element#onclick patching';
ifEnvSupports(supportsOnClick, function() {
it('should spawn new child zones', function() {
let run = false;
button.onclick = function() {
run = true;
};
button.click();
expect(run).toBeTruthy();
});
});
it('should only allow one onclick handler', function() {
let log = '';
button.onclick = function() {
log += 'a';
};
button.onclick = function() {
log += 'b';
};
button.click();
expect(log).toEqual('b');
});
it('should handler removing onclick', function() {
let log = '';
button.onclick = function() {
log += 'a';
};
button.onclick = null as any;
button.click();
expect(log).toEqual('');
});
it('should be able to deregister the same event twice', function() {
const listener = (event: Event) => {};
document.body.addEventListener('click', listener, false);
document.body.removeEventListener('click', listener, false);
document.body.removeEventListener('click', listener, false);
});
});
describe('onEvent default behavior', function() {
let checkbox: HTMLInputElement;
beforeEach(function() {
checkbox = document.createElement('input');
checkbox.type = 'checkbox';
document.body.appendChild(checkbox);
});
afterEach(function() {
document.body.removeChild(checkbox);
});
it('should be possible to prevent default behavior by returning false', function() {
checkbox.onclick = function() {
return false;
};
checkbox.click();
expect(checkbox.checked).toBe(false);
});
it('should have no effect on default behavior when not returning anything', function() {
checkbox.onclick = function() {};
checkbox.click();
expect(checkbox.checked).toBe(true);
});
});
});