237 lines
11 KiB
TypeScript
237 lines
11 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 {DomElementSchemaRegistry} from '@angular/compiler/src/schema/dom_element_schema_registry';
|
|
import {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SecurityContext} from '@angular/core';
|
|
import {beforeEach, describe, expect, it} from '@angular/core/testing/src/testing_internal';
|
|
import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
|
|
|
|
import {Element} from '../../src/ml_parser/ast';
|
|
import {HtmlParser} from '../../src/ml_parser/html_parser';
|
|
|
|
import {extractSchema} from './schema_extractor';
|
|
|
|
{
|
|
describe('DOMElementSchema', () => {
|
|
let registry: DomElementSchemaRegistry;
|
|
beforeEach(() => { registry = new DomElementSchemaRegistry(); });
|
|
|
|
it('should detect elements', () => {
|
|
expect(registry.hasElement('div', [])).toBeTruthy();
|
|
expect(registry.hasElement('b', [])).toBeTruthy();
|
|
expect(registry.hasElement('ng-container', [])).toBeTruthy();
|
|
expect(registry.hasElement('ng-content', [])).toBeTruthy();
|
|
|
|
expect(registry.hasElement('my-cmp', [])).toBeFalsy();
|
|
expect(registry.hasElement('abc', [])).toBeFalsy();
|
|
});
|
|
|
|
// https://github.com/angular/angular/issues/11219
|
|
it('should detect elements missing from chrome', () => {
|
|
expect(registry.hasElement('data', [])).toBeTruthy();
|
|
expect(registry.hasElement('menuitem', [])).toBeTruthy();
|
|
expect(registry.hasElement('summary', [])).toBeTruthy();
|
|
expect(registry.hasElement('time', [])).toBeTruthy();
|
|
});
|
|
|
|
it('should detect properties on regular elements', () => {
|
|
expect(registry.hasProperty('div', 'id', [])).toBeTruthy();
|
|
expect(registry.hasProperty('div', 'title', [])).toBeTruthy();
|
|
expect(registry.hasProperty('h1', 'align', [])).toBeTruthy();
|
|
expect(registry.hasProperty('h2', 'align', [])).toBeTruthy();
|
|
expect(registry.hasProperty('h3', 'align', [])).toBeTruthy();
|
|
expect(registry.hasProperty('h4', 'align', [])).toBeTruthy();
|
|
expect(registry.hasProperty('h5', 'align', [])).toBeTruthy();
|
|
expect(registry.hasProperty('h6', 'align', [])).toBeTruthy();
|
|
expect(registry.hasProperty('h7', 'align', [])).toBeFalsy();
|
|
expect(registry.hasProperty('textarea', 'disabled', [])).toBeTruthy();
|
|
expect(registry.hasProperty('input', 'disabled', [])).toBeTruthy();
|
|
expect(registry.hasProperty('div', 'unknown', [])).toBeFalsy();
|
|
});
|
|
|
|
// https://github.com/angular/angular/issues/11219
|
|
it('should detect properties on elements missing from Chrome', () => {
|
|
expect(registry.hasProperty('data', 'value', [])).toBeTruthy();
|
|
|
|
expect(registry.hasProperty('menuitem', 'type', [])).toBeTruthy();
|
|
expect(registry.hasProperty('menuitem', 'default', [])).toBeTruthy();
|
|
|
|
expect(registry.hasProperty('time', 'dateTime', [])).toBeTruthy();
|
|
});
|
|
|
|
it('should detect different kinds of types', () => {
|
|
// inheritance: video => media => [HTMLElement] => [Element]
|
|
expect(registry.hasProperty('video', 'className', [])).toBeTruthy(); // from [Element]
|
|
expect(registry.hasProperty('video', 'id', [])).toBeTruthy(); // string
|
|
expect(registry.hasProperty('video', 'scrollLeft', [])).toBeTruthy(); // number
|
|
expect(registry.hasProperty('video', 'height', [])).toBeTruthy(); // number
|
|
expect(registry.hasProperty('video', 'autoplay', [])).toBeTruthy(); // boolean
|
|
expect(registry.hasProperty('video', 'classList', [])).toBeTruthy(); // object
|
|
// from *; but events are not properties
|
|
expect(registry.hasProperty('video', 'click', [])).toBeFalsy();
|
|
});
|
|
|
|
it('should treat custom elements as an unknown element by default', () => {
|
|
expect(registry.hasProperty('custom-like', 'unknown', [])).toBe(false);
|
|
expect(registry.hasProperty('custom-like', 'className', [])).toBeTruthy();
|
|
expect(registry.hasProperty('custom-like', 'style', [])).toBeTruthy();
|
|
expect(registry.hasProperty('custom-like', 'id', [])).toBeTruthy();
|
|
});
|
|
|
|
it('should return true for custom-like elements if the CUSTOM_ELEMENTS_SCHEMA was used', () => {
|
|
expect(registry.hasProperty('custom-like', 'unknown', [CUSTOM_ELEMENTS_SCHEMA])).toBeTruthy();
|
|
|
|
expect(registry.hasElement('custom-like', [CUSTOM_ELEMENTS_SCHEMA])).toBeTruthy();
|
|
});
|
|
|
|
it('should return true for all elements if the NO_ERRORS_SCHEMA was used', () => {
|
|
expect(registry.hasProperty('custom-like', 'unknown', [NO_ERRORS_SCHEMA])).toBeTruthy();
|
|
expect(registry.hasProperty('a', 'unknown', [NO_ERRORS_SCHEMA])).toBeTruthy();
|
|
|
|
expect(registry.hasElement('custom-like', [NO_ERRORS_SCHEMA])).toBeTruthy();
|
|
expect(registry.hasElement('unknown', [NO_ERRORS_SCHEMA])).toBeTruthy();
|
|
});
|
|
|
|
it('should re-map property names that are specified in DOM facade',
|
|
() => { expect(registry.getMappedPropName('readonly')).toEqual('readOnly'); });
|
|
|
|
it('should not re-map property names that are not specified in DOM facade', () => {
|
|
expect(registry.getMappedPropName('title')).toEqual('title');
|
|
expect(registry.getMappedPropName('exotic-unknown')).toEqual('exotic-unknown');
|
|
});
|
|
|
|
it('should return an error message when asserting event properties', () => {
|
|
let report = registry.validateProperty('onClick');
|
|
expect(report.error).toBeTruthy();
|
|
expect(report.msg)
|
|
.toEqual(
|
|
`Binding to event property 'onClick' is disallowed for security reasons, please use (Click)=...
|
|
If 'onClick' is a directive input, make sure the directive is imported by the current module.`);
|
|
|
|
report = registry.validateProperty('onAnything');
|
|
expect(report.error).toBeTruthy();
|
|
expect(report.msg)
|
|
.toEqual(
|
|
`Binding to event property 'onAnything' is disallowed for security reasons, please use (Anything)=...
|
|
If 'onAnything' is a directive input, make sure the directive is imported by the current module.`);
|
|
});
|
|
|
|
it('should return an error message when asserting event attributes', () => {
|
|
let report = registry.validateAttribute('onClick');
|
|
expect(report.error).toBeTruthy();
|
|
expect(report.msg)
|
|
.toEqual(
|
|
`Binding to event attribute 'onClick' is disallowed for security reasons, please use (Click)=...`);
|
|
|
|
report = registry.validateAttribute('onAnything');
|
|
expect(report.error).toBeTruthy();
|
|
expect(report.msg)
|
|
.toEqual(
|
|
`Binding to event attribute 'onAnything' is disallowed for security reasons, please use (Anything)=...`);
|
|
});
|
|
|
|
it('should not return an error message when asserting non-event properties or attributes',
|
|
() => {
|
|
let report = registry.validateProperty('title');
|
|
expect(report.error).toBeFalsy();
|
|
expect(report.msg).not.toBeDefined();
|
|
|
|
report = registry.validateProperty('exotic-unknown');
|
|
expect(report.error).toBeFalsy();
|
|
expect(report.msg).not.toBeDefined();
|
|
});
|
|
|
|
it('should return security contexts for elements', () => {
|
|
expect(registry.securityContext('iframe', 'srcdoc', false)).toBe(SecurityContext.HTML);
|
|
expect(registry.securityContext('p', 'innerHTML', false)).toBe(SecurityContext.HTML);
|
|
expect(registry.securityContext('a', 'href', false)).toBe(SecurityContext.URL);
|
|
expect(registry.securityContext('a', 'style', false)).toBe(SecurityContext.STYLE);
|
|
expect(registry.securityContext('ins', 'cite', false)).toBe(SecurityContext.URL);
|
|
expect(registry.securityContext('base', 'href', false)).toBe(SecurityContext.RESOURCE_URL);
|
|
});
|
|
|
|
it('should detect properties on namespaced elements', () => {
|
|
const htmlAst = new HtmlParser().parse('<svg:style>', 'TestComp');
|
|
const nodeName = (<Element>htmlAst.rootNodes[0]).name;
|
|
expect(registry.hasProperty(nodeName, 'type', [])).toBeTruthy();
|
|
});
|
|
|
|
it('should check security contexts case insensitive', () => {
|
|
expect(registry.securityContext('p', 'iNnErHtMl', false)).toBe(SecurityContext.HTML);
|
|
expect(registry.securityContext('p', 'formaction', false)).toBe(SecurityContext.URL);
|
|
expect(registry.securityContext('p', 'formAction', false)).toBe(SecurityContext.URL);
|
|
});
|
|
|
|
it('should check security contexts for attributes', () => {
|
|
expect(registry.securityContext('p', 'innerHtml', true)).toBe(SecurityContext.HTML);
|
|
expect(registry.securityContext('p', 'formaction', true)).toBe(SecurityContext.URL);
|
|
});
|
|
|
|
describe('Angular custom elements', () => {
|
|
it('should support <ng-container>',
|
|
() => { expect(registry.hasProperty('ng-container', 'id', [])).toBeFalsy(); });
|
|
|
|
it('should support <ng-content>', () => {
|
|
expect(registry.hasProperty('ng-content', 'id', [])).toBeFalsy();
|
|
expect(registry.hasProperty('ng-content', 'select', [])).toBeFalsy();
|
|
});
|
|
});
|
|
|
|
if (browserDetection.isChromeDesktop) {
|
|
it('generate a new schema', () => {
|
|
let schema = '\n';
|
|
extractSchema() !.forEach(
|
|
(props, name) => { schema += `'${name}|${props.join(',')}',\n`; });
|
|
// Uncomment this line to see:
|
|
// the generated schema which can then be pasted to the DomElementSchemaRegistry
|
|
// console.log(schema);
|
|
});
|
|
}
|
|
|
|
describe('normalizeAnimationStyleProperty', () => {
|
|
it('should normalize the given CSS property to camelCase', () => {
|
|
expect(registry.normalizeAnimationStyleProperty('border-radius')).toBe('borderRadius');
|
|
expect(registry.normalizeAnimationStyleProperty('zIndex')).toBe('zIndex');
|
|
expect(registry.normalizeAnimationStyleProperty('-webkit-animation'))
|
|
.toBe('WebkitAnimation');
|
|
});
|
|
});
|
|
|
|
describe('normalizeAnimationStyleValue', () => {
|
|
it('should normalize the given dimensional CSS style value to contain a PX value when numeric',
|
|
() => {
|
|
expect(
|
|
registry.normalizeAnimationStyleValue('borderRadius', 'border-radius', 10)['value'])
|
|
.toBe('10px');
|
|
});
|
|
|
|
it('should not normalize any values that are of zero', () => {
|
|
expect(registry.normalizeAnimationStyleValue('opacity', 'opacity', 0)['value']).toBe('0');
|
|
expect(registry.normalizeAnimationStyleValue('width', 'width', 0)['value']).toBe('0');
|
|
});
|
|
|
|
it('should retain the given dimensional CSS style value\'s unit if it already exists', () => {
|
|
expect(
|
|
registry.normalizeAnimationStyleValue('borderRadius', 'border-radius', '10em')['value'])
|
|
.toBe('10em');
|
|
});
|
|
|
|
it('should trim the provided CSS style value', () => {
|
|
expect(registry.normalizeAnimationStyleValue('color', 'color', ' red ')['value'])
|
|
.toBe('red');
|
|
});
|
|
|
|
it('should stringify all non dimensional numeric style values', () => {
|
|
expect(registry.normalizeAnimationStyleValue('zIndex', 'zIndex', 10)['value']).toBe('10');
|
|
expect(registry.normalizeAnimationStyleValue('opacity', 'opacity', 0.5)['value'])
|
|
.toBe('0.5');
|
|
});
|
|
});
|
|
});
|
|
}
|