/** * @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 {DomElementSchemaRegistry} from '@angular/compiler/src/schema/dom_element_schema_registry'; import {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SecurityContext} from '@angular/core'; 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('', 'TestComp'); const nodeName = (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 ', () => { expect(registry.hasProperty('ng-container', 'id', [])).toBeFalsy(); }); it('should support ', () => { 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'); }); }); }); }