angular-cn/packages/core/test/view/element_spec.ts

300 lines
12 KiB
TypeScript
Raw Normal View History

/**
* @license
* Copyright Google LLC 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 {ɵgetDOM as getDOM} from '@angular/common';
import {ErrorHandler, getDebugNode, SecurityContext} from '@angular/core';
import {getDebugContext} from '@angular/core/src/errors';
import {asElementData, BindingFlags, elementDef, NodeFlags, Services, ViewData, ViewDefinition} from '@angular/core/src/view/index';
import {TestBed} from '@angular/core/testing';
import {ARG_TYPE_VALUES, callMostRecentEventListenerHandler, checkNodeInlineOrDynamic, compViewDef, createAndGetRootNodes, isBrowser, recordNodeToRemove} from './helper';
/**
* We map addEventListener to the Zones internal name. This is because we want to be fast
* and bypass the zone bookkeeping. We know that we can do the bookkeeping faster.
*/
const addEventListener = 'addEventListener';
const removeEventListener = 'removeEventListener';
{
describe(`View Elements`, () => {
describe('create', () => {
it('should create elements without parents', () => {
const rootNodes = createAndGetRootNodes(compViewDef([
elementDef(0, NodeFlags.None, null, null, 0, 'span')
])).rootNodes;
expect(rootNodes.length).toBe(1);
expect(rootNodes[0].nodeName.toLowerCase()).toBe('span');
});
it('should create views with multiple root elements', () => {
const rootNodes = createAndGetRootNodes(compViewDef([
elementDef(0, NodeFlags.None, null, null, 0, 'span'),
elementDef(1, NodeFlags.None, null, null, 0, 'span'),
])).rootNodes;
expect(rootNodes.length).toBe(2);
});
it('should create elements with parents', () => {
const rootNodes = createAndGetRootNodes(compViewDef([
elementDef(0, NodeFlags.None, null, null, 1, 'div'),
elementDef(1, NodeFlags.None, null, null, 0, 'span'),
])).rootNodes;
expect(rootNodes.length).toBe(1);
const spanEl = rootNodes[0].childNodes[0];
expect(spanEl.nodeName.toLowerCase()).toBe('span');
});
it('should set fixed attributes', () => {
const rootNodes = createAndGetRootNodes(compViewDef([
elementDef(0, NodeFlags.None, null, null, 0, 'div', [['title', 'a']]),
])).rootNodes;
expect(rootNodes.length).toBe(1);
expect(rootNodes[0].getAttribute('title')).toBe('a');
});
it('should add debug information to the renderer', () => {
const someContext = {};
const {view, rootNodes} = createAndGetRootNodes(
compViewDef([elementDef(0, NodeFlags.None, null, null, 0, 'div')]), someContext);
expect(getDebugNode(rootNodes[0])!.nativeNode).toBe(asElementData(view, 0).renderElement);
});
});
describe('change properties', () => {
ARG_TYPE_VALUES.forEach((inlineDynamic) => {
it(`should update via strategy ${inlineDynamic}`, () => {
const {view, rootNodes} = createAndGetRootNodes(compViewDef(
[
elementDef(
0, NodeFlags.None, null, null, 0, 'input', null,
[
[BindingFlags.TypeProperty, 'title', SecurityContext.NONE],
[BindingFlags.TypeProperty, 'value', SecurityContext.NONE],
]),
],
null, (check, view) => {
checkNodeInlineOrDynamic(check, view, 0, inlineDynamic, ['v1', 'v2']);
}));
Services.checkAndUpdateView(view);
const el = rootNodes[0];
expect(getDOM().getProperty(el, 'title')).toBe('v1');
expect(getDOM().getProperty(el, 'value')).toBe('v2');
});
});
});
describe('change attributes', () => {
ARG_TYPE_VALUES.forEach((inlineDynamic) => {
it(`should update via strategy ${inlineDynamic}`, () => {
const {view, rootNodes} = createAndGetRootNodes(compViewDef(
[
elementDef(
0, NodeFlags.None, null, null, 0, 'div', null,
[
[BindingFlags.TypeElementAttribute, 'a1', SecurityContext.NONE],
[BindingFlags.TypeElementAttribute, 'a2', SecurityContext.NONE],
]),
],
null, (check, view) => {
checkNodeInlineOrDynamic(check, view, 0, inlineDynamic, ['v1', 'v2']);
}));
Services.checkAndUpdateView(view);
const el = rootNodes[0];
expect(el.getAttribute('a1')).toBe('v1');
expect(el.getAttribute('a2')).toBe('v2');
});
});
});
describe('change classes', () => {
ARG_TYPE_VALUES.forEach((inlineDynamic) => {
it(`should update via strategy ${inlineDynamic}`, () => {
const {view, rootNodes} = createAndGetRootNodes(compViewDef(
[
elementDef(
0, NodeFlags.None, null, null, 0, 'div', null,
[
[BindingFlags.TypeElementClass, 'c1', null],
[BindingFlags.TypeElementClass, 'c2', null],
]),
],
(check, view) => {
checkNodeInlineOrDynamic(check, view, 0, inlineDynamic, [true, true]);
}));
Services.checkAndUpdateView(view);
const el = rootNodes[0];
expect(el.classList.contains('c1')).toBeTruthy();
expect(el.classList.contains('c2')).toBeTruthy();
});
});
});
describe('change styles', () => {
ARG_TYPE_VALUES.forEach((inlineDynamic) => {
it(`should update via strategy ${inlineDynamic}`, () => {
const {view, rootNodes} = createAndGetRootNodes(compViewDef(
[
elementDef(
0, NodeFlags.None, null, null, 0, 'div', null,
[
[BindingFlags.TypeElementStyle, 'width', 'px'],
[BindingFlags.TypeElementStyle, 'color', null],
]),
],
null, (check, view) => {
checkNodeInlineOrDynamic(check, view, 0, inlineDynamic, [10, 'red']);
}));
Services.checkAndUpdateView(view);
const el = rootNodes[0];
expect(el.style['width']).toBe('10px');
expect(el.style['color']).toBe('red');
});
});
});
if (isBrowser()) {
describe('listen to DOM events', () => {
function createAndAttachAndGetRootNodes(viewDef: ViewDefinition):
{rootNodes: any[], view: ViewData} {
const result = createAndGetRootNodes(viewDef);
// Note: We need to append the node to the document.body, otherwise `click` events
// won't work in IE.
result.rootNodes.forEach((node) => {
document.body.appendChild(node);
recordNodeToRemove(node);
});
return result;
}
it('should listen to DOM events', () => {
const handleEventSpy = jasmine.createSpy('handleEvent');
const removeListenerSpy =
spyOn(HTMLElement.prototype, removeEventListener).and.callThrough();
const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef([elementDef(
0, NodeFlags.None, null, null, 0, 'button', null, null, [[null!, 'click']],
handleEventSpy)]));
rootNodes[0].click();
expect(handleEventSpy).toHaveBeenCalled();
let handleEventArgs = handleEventSpy.calls.mostRecent().args;
expect(handleEventArgs[0]).toBe(view);
expect(handleEventArgs[1]).toBe('click');
expect(handleEventArgs[2]).toBeTruthy();
Services.destroyView(view);
expect(removeListenerSpy).toHaveBeenCalled();
});
it('should listen to window events', () => {
const handleEventSpy = jasmine.createSpy('handleEvent');
const addListenerSpy = spyOn(window, addEventListener);
const removeListenerSpy = spyOn(window, removeEventListener);
const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef([elementDef(
0, NodeFlags.None, null, null, 0, 'button', null, null, [['window', 'windowClick']],
handleEventSpy)]));
expect(addListenerSpy).toHaveBeenCalled();
expect(addListenerSpy.calls.mostRecent().args[0]).toBe('windowClick');
callMostRecentEventListenerHandler(addListenerSpy, {name: 'windowClick'});
expect(handleEventSpy).toHaveBeenCalled();
const handleEventArgs = handleEventSpy.calls.mostRecent().args;
expect(handleEventArgs[0]).toBe(view);
expect(handleEventArgs[1]).toBe('window:windowClick');
expect(handleEventArgs[2]).toBeTruthy();
Services.destroyView(view);
expect(removeListenerSpy).toHaveBeenCalled();
});
it('should listen to document events', () => {
const handleEventSpy = jasmine.createSpy('handleEvent');
const addListenerSpy = spyOn(document, addEventListener);
const removeListenerSpy = spyOn(document, removeEventListener);
const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef([elementDef(
0, NodeFlags.None, null, null, 0, 'button', null, null,
[['document', 'documentClick']], handleEventSpy)]));
expect(addListenerSpy).toHaveBeenCalled();
expect(addListenerSpy.calls.mostRecent().args[0]).toBe('documentClick');
callMostRecentEventListenerHandler(addListenerSpy, {name: 'windowClick'});
expect(handleEventSpy).toHaveBeenCalled();
const handleEventArgs = handleEventSpy.calls.mostRecent().args;
expect(handleEventArgs[0]).toBe(view);
expect(handleEventArgs[1]).toBe('document:documentClick');
expect(handleEventArgs[2]).toBeTruthy();
Services.destroyView(view);
expect(removeListenerSpy).toHaveBeenCalled();
});
it('should preventDefault only if the handler returns false', () => {
let eventHandlerResult: any;
let preventDefaultSpy: jasmine.Spy = undefined!;
const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef([elementDef(
0, NodeFlags.None, null, null, 0, 'button', null, null, [[null!, 'click']],
(view, eventName, event) => {
preventDefaultSpy = spyOn(event, 'preventDefault').and.callThrough();
return eventHandlerResult;
})]));
eventHandlerResult = undefined;
rootNodes[0].click();
expect(preventDefaultSpy).not.toHaveBeenCalled();
eventHandlerResult = true;
rootNodes[0].click();
expect(preventDefaultSpy).not.toHaveBeenCalled();
eventHandlerResult = 'someString';
rootNodes[0].click();
expect(preventDefaultSpy).not.toHaveBeenCalled();
eventHandlerResult = false;
rootNodes[0].click();
expect(preventDefaultSpy).toHaveBeenCalled();
});
it('should report debug info on event errors', () => {
const handleErrorSpy = spyOn(TestBed.inject(ErrorHandler), 'handleError');
const addListenerSpy = spyOn(HTMLElement.prototype, addEventListener).and.callThrough();
const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef([elementDef(
0, NodeFlags.None, null, null, 0, 'button', null, null, [[null!, 'click']], () => {
throw new Error('Test');
})]));
callMostRecentEventListenerHandler(addListenerSpy, 'SomeEvent');
const err = handleErrorSpy.calls.mostRecent().args[0];
expect(err).toBeTruthy();
expect(err.message).toBe('Test');
const debugCtx = getDebugContext(err);
expect(debugCtx.view).toBe(view);
expect(debugCtx.nodeIndex).toBe(0);
});
});
}
});
}