/** * @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 {CompileQueryMetadata, CompilerConfig, ProxyClass, StaticSymbol, preserveWhitespacesDefault} from '@angular/compiler'; import {CompileAnimationEntryMetadata, CompileDiDependencyMetadata, CompileDirectiveMetadata, CompileDirectiveSummary, CompilePipeMetadata, CompilePipeSummary, CompileProviderMetadata, CompileTemplateMetadata, CompileTokenMetadata, CompileTypeMetadata, tokenReference} from '@angular/compiler/src/compile_metadata'; import {DomElementSchemaRegistry} from '@angular/compiler/src/schema/dom_element_schema_registry'; import {ElementSchemaRegistry} from '@angular/compiler/src/schema/element_schema_registry'; import {AttrAst, BoundDirectivePropertyAst, BoundElementPropertyAst, BoundEventAst, BoundTextAst, DirectiveAst, ElementAst, EmbeddedTemplateAst, NgContentAst, PropertyBindingType, ProviderAstType, ReferenceAst, TemplateAst, TemplateAstVisitor, TextAst, VariableAst, templateVisitAll} from '@angular/compiler/src/template_parser/template_ast'; import {TemplateParser, splitClasses} from '@angular/compiler/src/template_parser/template_parser'; import {ChangeDetectionStrategy, ComponentFactory, RendererType2, SchemaMetadata, SecurityContext, ViewEncapsulation} from '@angular/core'; import {Console} from '@angular/core/src/console'; import {TestBed, inject} from '@angular/core/testing'; import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector'; import {CompileEntryComponentMetadata, CompileStylesheetMetadata} from '../../src/compile_metadata'; import {Identifiers, createTokenForExternalReference, createTokenForReference} from '../../src/identifiers'; import {DEFAULT_INTERPOLATION_CONFIG, InterpolationConfig} from '../../src/ml_parser/interpolation_config'; import {noUndefined} from '../../src/util'; import {MockSchemaRegistry} from '../../testing'; import {unparse} from '../expression_parser/unparser'; import {TEST_COMPILER_PROVIDERS} from '../test_bindings'; const someModuleUrl = 'package:someModule'; const MOCK_SCHEMA_REGISTRY = [{ provide: ElementSchemaRegistry, useValue: new MockSchemaRegistry( {'invalidProp': false}, {'mappedAttr': 'mappedProp'}, {'unknown': false, 'un-known': false}, ['onEvent'], ['onEvent']), }]; function createTypeMeta({reference, diDeps}: {reference: any, diDeps?: any[]}): CompileTypeMetadata { return {reference: reference, diDeps: diDeps || [], lifecycleHooks: []}; } function compileDirectiveMetadataCreate({isHost, type, isComponent, selector, exportAs, changeDetection, inputs, outputs, host, providers, viewProviders, queries, viewQueries, entryComponents, template, componentViewType, rendererType}: { isHost?: boolean, type?: CompileTypeMetadata, isComponent?: boolean, selector?: string | null, exportAs?: string | null, changeDetection?: ChangeDetectionStrategy | null, inputs?: string[], outputs?: string[], host?: {[key: string]: string}, providers?: CompileProviderMetadata[] | null, viewProviders?: CompileProviderMetadata[] | null, queries?: CompileQueryMetadata[] | null, viewQueries?: CompileQueryMetadata[], entryComponents?: CompileEntryComponentMetadata[], template?: CompileTemplateMetadata, componentViewType?: StaticSymbol | ProxyClass | null, rendererType?: StaticSymbol | RendererType2 | null, }) { return CompileDirectiveMetadata.create({ isHost: !!isHost, type: noUndefined(type) !, isComponent: !!isComponent, selector: noUndefined(selector), exportAs: noUndefined(exportAs), changeDetection: null, inputs: inputs || [], outputs: outputs || [], host: host || {}, providers: providers || [], viewProviders: viewProviders || [], queries: queries || [], viewQueries: viewQueries || [], entryComponents: entryComponents || [], template: noUndefined(template) !, componentViewType: noUndefined(componentViewType), rendererType: noUndefined(rendererType), componentFactory: null, }); } function compileTemplateMetadata({encapsulation, template, templateUrl, styles, styleUrls, externalStylesheets, animations, ngContentSelectors, interpolation, isInline, preserveWhitespaces}: { encapsulation?: ViewEncapsulation | null, template?: string | null, templateUrl?: string | null, styles?: string[], styleUrls?: string[], externalStylesheets?: CompileStylesheetMetadata[], ngContentSelectors?: string[], animations?: any[], interpolation?: [string, string] | null, isInline?: boolean, preserveWhitespaces?: boolean | null, }): CompileTemplateMetadata { return new CompileTemplateMetadata({ encapsulation: noUndefined(encapsulation), template: noUndefined(template), templateUrl: noUndefined(templateUrl), styles: styles || [], styleUrls: styleUrls || [], externalStylesheets: externalStylesheets || [], animations: animations || [], ngContentSelectors: ngContentSelectors || [], interpolation: noUndefined(interpolation), isInline: !!isInline, preserveWhitespaces: preserveWhitespacesDefault(noUndefined(preserveWhitespaces)), }); } export function main() { let ngIf: CompileDirectiveSummary; let parse: ( template: string, directives: CompileDirectiveSummary[], pipes?: CompilePipeSummary[], schemas?: SchemaMetadata[], preserveWhitespaces?: boolean) => TemplateAst[]; let console: ArrayConsole; function commonBeforeEach() { beforeEach(() => { console = new ArrayConsole(); TestBed.configureCompiler({ providers: [ {provide: Console, useValue: console}, ], }); }); beforeEach(inject([TemplateParser], (parser: TemplateParser) => { const someAnimation = new CompileAnimationEntryMetadata('someAnimation', []); const someTemplate = compileTemplateMetadata({animations: [someAnimation]}); const component = compileDirectiveMetadataCreate({ isHost: false, selector: 'root', template: someTemplate, type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'Root'}}), isComponent: true }); ngIf = compileDirectiveMetadataCreate({ selector: '[ngIf]', template: someTemplate, type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'NgIf'}}), inputs: ['ngIf'] }).toSummary(); parse = (template: string, directives: CompileDirectiveSummary[], pipes: CompilePipeSummary[] | null = null, schemas: SchemaMetadata[] = [], preserveWhitespaces = true): TemplateAst[] => { if (pipes === null) { pipes = []; } return parser .parse( component, template, directives, pipes, schemas, 'TestComp', preserveWhitespaces) .template; }; })); } describe('TemplateAstVisitor', () => { function expectVisitedNode(visitor: TemplateAstVisitor, node: TemplateAst) { expect(node.visit(visitor, null)).toEqual(node); } it('should visit NgContentAst', () => { expectVisitedNode( new class extends NullVisitor{visitNgContent(ast: NgContentAst, context: any): any{return ast;}}, new NgContentAst(0, 0, null !)); }); it('should visit EmbeddedTemplateAst', () => { expectVisitedNode( new class extends NullVisitor{ visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any) { return ast; } }, new EmbeddedTemplateAst([], [], [], [], [], [], false, [], [], 0, null !)); }); it('should visit ElementAst', () => { expectVisitedNode( new class extends NullVisitor{visitElement(ast: ElementAst, context: any) { return ast; }}, new ElementAst('foo', [], [], [], [], [], [], false, [], [], 0, null !, null !)); }); it('should visit RefererenceAst', () => { expectVisitedNode( new class extends NullVisitor{visitReference(ast: ReferenceAst, context: any): any{return ast;}}, new ReferenceAst('foo', null !, null !)); }); it('should visit VariableAst', () => { expectVisitedNode( new class extends NullVisitor{visitVariable(ast: VariableAst, context: any): any{return ast;}}, new VariableAst('foo', 'bar', null !)); }); it('should visit BoundEventAst', () => { expectVisitedNode( new class extends NullVisitor{visitEvent(ast: BoundEventAst, context: any): any{return ast;}}, new BoundEventAst('foo', 'bar', 'goo', null !, null !)); }); it('should visit BoundElementPropertyAst', () => { expectVisitedNode( new class extends NullVisitor{ visitElementProperty(ast: BoundElementPropertyAst, context: any): any{return ast;} }, new BoundElementPropertyAst('foo', null !, null !, null !, 'bar', null !)); }); it('should visit AttrAst', () => { expectVisitedNode( new class extends NullVisitor{visitAttr(ast: AttrAst, context: any): any{return ast;}}, new AttrAst('foo', 'bar', null !)); }); it('should visit BoundTextAst', () => { expectVisitedNode( new class extends NullVisitor{visitBoundText(ast: BoundTextAst, context: any): any{return ast;}}, new BoundTextAst(null !, 0, null !)); }); it('should visit TextAst', () => { expectVisitedNode( new class extends NullVisitor{visitText(ast: TextAst, context: any): any{return ast;}}, new TextAst('foo', 0, null !)); }); it('should visit DirectiveAst', () => { expectVisitedNode( new class extends NullVisitor{visitDirective(ast: DirectiveAst, context: any): any{return ast;}}, new DirectiveAst(null !, [], [], [], 0, null !)); }); it('should visit DirectiveAst', () => { expectVisitedNode( new class extends NullVisitor{ visitDirectiveProperty(ast: BoundDirectivePropertyAst, context: any): any{return ast;} }, new BoundDirectivePropertyAst('foo', 'bar', null !, null !)); }); it('should skip the typed call of a visitor if visit() returns a truthy value', () => { const visitor = new class extends ThrowingVisitor { visit(ast: TemplateAst, context: any): any { return true; } }; const nodes: TemplateAst[] = [ new NgContentAst(0, 0, null !), new EmbeddedTemplateAst([], [], [], [], [], [], false, [], [], 0, null !), new ElementAst('foo', [], [], [], [], [], [], false, [], [], 0, null !, null !), new ReferenceAst('foo', null !, null !), new VariableAst('foo', 'bar', null !), new BoundEventAst('foo', 'bar', 'goo', null !, null !), new BoundElementPropertyAst('foo', null !, null !, null !, 'bar', null !), new AttrAst('foo', 'bar', null !), new BoundTextAst(null !, 0, null !), new TextAst('foo', 0, null !), new DirectiveAst(null !, [], [], [], 0, null !), new BoundDirectivePropertyAst('foo', 'bar', null !, null !) ]; const result = templateVisitAll(visitor, nodes, null); expect(result).toEqual(new Array(nodes.length).fill(true)); }); }); describe('TemplateParser Security', () => { // Semi-integration test to make sure TemplateParser properly sets the security context. // Uses the actual DomElementSchemaRegistry. beforeEach(() => { TestBed.configureCompiler({ providers: [ TEST_COMPILER_PROVIDERS, {provide: ElementSchemaRegistry, useClass: DomElementSchemaRegistry, deps: []} ] }); }); commonBeforeEach(); describe('security context', () => { function secContext(tpl: string): SecurityContext { const ast = parse(tpl, []); const propBinding = (ast[0]).inputs[0]; return propBinding.securityContext; } it('should set for properties', () => { expect(secContext('
')).toBe(SecurityContext.NONE); expect(secContext('
')).toBe(SecurityContext.HTML); }); it('should set for property value bindings', () => { expect(secContext('
')).toBe(SecurityContext.HTML); }); it('should set for attributes', () => { expect(secContext('')).toBe(SecurityContext.URL); // NB: attributes below need to change case. expect(secContext('')).toBe(SecurityContext.HTML); expect(secContext('')).toBe(SecurityContext.URL); }); it('should set for style', () => { expect(secContext('')).toBe(SecurityContext.STYLE); }); }); }); describe('TemplateParser', () => { beforeEach(() => { TestBed.configureCompiler({providers: [TEST_COMPILER_PROVIDERS, MOCK_SCHEMA_REGISTRY]}); }); commonBeforeEach(); describe('parse', () => { describe('nodes without bindings', () => { it('should parse text nodes', () => { expect(humanizeTplAst(parse('a', []))).toEqual([[TextAst, 'a']]); }); it('should parse elements with attributes', () => { expect(humanizeTplAst(parse('
', [ ]))).toEqual([[ElementAst, 'div'], [AttrAst, 'a', 'b']]); }); }); it('should parse ngContent', () => { const parsed = parse('', []); expect(humanizeTplAst(parsed)).toEqual([[NgContentAst]]); }); it('should parse ngContent when it contains WS only', () => { const parsed = parse(' \n ', []); expect(humanizeTplAst(parsed)).toEqual([[NgContentAst]]); }); it('should parse ngContent regardless the namespace', () => { const parsed = parse('', []); expect(humanizeTplAst(parsed)).toEqual([ [ElementAst, ':svg:svg'], [NgContentAst], ]); }); it('should parse bound text nodes', () => { expect(humanizeTplAst(parse('{{a}}', []))).toEqual([[BoundTextAst, '{{ a }}']]); }); it('should parse with custom interpolation config', inject([TemplateParser], (parser: TemplateParser) => { const component = CompileDirectiveMetadata.create({ selector: 'test', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'Test'}}), isComponent: true, template: new CompileTemplateMetadata({ interpolation: ['{%', '%}'], isInline: false, animations: [], template: null, templateUrl: null, ngContentSelectors: [], externalStylesheets: [], styleUrls: [], styles: [], encapsulation: null, preserveWhitespaces: preserveWhitespacesDefault(null), }), isHost: false, exportAs: null, changeDetection: null, inputs: [], outputs: [], host: {}, providers: [], viewProviders: [], queries: [], viewQueries: [], entryComponents: [], componentViewType: null, rendererType: null, componentFactory: null }); expect(humanizeTplAst( parser.parse(component, '{%a%}', [], [], [], 'TestComp', true).template, {start: '{%', end: '%}'})) .toEqual([[BoundTextAst, '{% a %}']]); })); describe('bound properties', () => { it('should parse mixed case bound properties', () => { expect(humanizeTplAst(parse('
', []))).toEqual([ [ElementAst, 'div'], [BoundElementPropertyAst, PropertyBindingType.Property, 'someProp', 'v', null] ]); }); it('should parse dash case bound properties', () => { expect(humanizeTplAst(parse('
', []))).toEqual([ [ElementAst, 'div'], [BoundElementPropertyAst, PropertyBindingType.Property, 'some-prop', 'v', null] ]); }); it('should parse dotted name bound properties', () => { expect(humanizeTplAst(parse('
', []))).toEqual([ [ElementAst, 'div'], [BoundElementPropertyAst, PropertyBindingType.Property, 'dot.name', 'v', null] ]); }); it('should normalize property names via the element schema', () => { expect(humanizeTplAst(parse('
', []))).toEqual([ [ElementAst, 'div'], [BoundElementPropertyAst, PropertyBindingType.Property, 'mappedProp', 'v', null] ]); }); it('should parse mixed case bound attributes', () => { expect(humanizeTplAst(parse('
', []))).toEqual([ [ElementAst, 'div'], [BoundElementPropertyAst, PropertyBindingType.Attribute, 'someAttr', 'v', null] ]); }); it('should parse and dash case bound classes', () => { expect(humanizeTplAst(parse('
', []))).toEqual([ [ElementAst, 'div'], [BoundElementPropertyAst, PropertyBindingType.Class, 'some-class', 'v', null] ]); }); it('should parse mixed case bound classes', () => { expect(humanizeTplAst(parse('
', []))).toEqual([ [ElementAst, 'div'], [BoundElementPropertyAst, PropertyBindingType.Class, 'someClass', 'v', null] ]); }); it('should parse mixed case bound styles', () => { expect(humanizeTplAst(parse('
', []))).toEqual([ [ElementAst, 'div'], [BoundElementPropertyAst, PropertyBindingType.Style, 'someStyle', 'v', null] ]); }); describe('errors', () => { it('should throw error when binding to an unknown property', () => { expect(() => parse('', [])) .toThrowError(`Template parse errors: Can't bind to 'invalidProp' since it isn't a known property of 'my-component'. 1. If 'my-component' is an Angular component and it has 'invalidProp' input, then verify that it is part of this module. 2. If 'my-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("][invalidProp]="bar">"): TestComp@0:14`); }); it('should throw error when binding to an unknown property of ng-container', () => { expect(() => parse('', [])) .toThrowError( `Template parse errors: Can't bind to 'invalidProp' since it isn't a known property of 'ng-container'. 1. If 'invalidProp' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component. 2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.` + ` ("][invalidProp]="bar">"): TestComp@0:14`); }); it('should throw error when binding to an unknown element w/o bindings', () => { expect(() => parse('', [])).toThrowError(`Template parse errors: 'unknown' is not a known element: 1. If 'unknown' is an Angular component, then verify that it is part of this module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("[ERROR ->]"): TestComp@0:0`); }); it('should throw error when binding to an unknown custom element w/o bindings', () => { expect(() => parse('', [])).toThrowError(`Template parse errors: 'un-known' is not a known element: 1. If 'un-known' is an Angular component, then verify that it is part of this module. 2. If 'un-known' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]"): TestComp@0:0`); }); it('should throw error when binding to an invalid property', () => { expect(() => parse('', [])) .toThrowError(`Template parse errors: Binding to property 'onEvent' is disallowed for security reasons ("][onEvent]="bar">"): TestComp@0:14`); }); it('should throw error when binding to an invalid attribute', () => { expect(() => parse('', [])) .toThrowError(`Template parse errors: Binding to attribute 'onEvent' is disallowed for security reasons ("][attr.onEvent]="bar">"): TestComp@0:14`); }); }); it('should parse bound properties via [...] and not report them as attributes', () => { expect(humanizeTplAst(parse('
', []))).toEqual([ [ElementAst, 'div'], [BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null] ]); }); it('should parse bound properties via bind- and not report them as attributes', () => { expect(humanizeTplAst(parse('
', []))).toEqual([ [ElementAst, 'div'], [BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null] ]); }); it('should parse bound properties via {{...}} and not report them as attributes', () => { expect(humanizeTplAst(parse('
', []))).toEqual([ [ElementAst, 'div'], [BoundElementPropertyAst, PropertyBindingType.Property, 'prop', '{{ v }}', null] ]); }); it('should parse bound properties via bind-animate- and not report them as attributes', () => { expect(humanizeTplAst(parse('
', [], [], []))) .toEqual([ [ElementAst, 'div'], [ BoundElementPropertyAst, PropertyBindingType.Animation, 'someAnimation', 'value2', null ] ]); }); it('should throw an error when parsing detects non-bound properties via @ that contain a value', () => { expect(() => { parse('
', [], [], []); }) .toThrowError( /Assigning animation triggers via @prop="exp" attributes with an expression is invalid. Use property bindings \(e.g. \[@prop\]="exp"\) or use an attribute without a value \(e.g. @prop\) instead. \("
\]@someAnimation="value2">"\): TestComp@0:5/); }); it('should not issue a warning when host attributes contain a valid property-bound animation trigger', () => { const animationEntries = [new CompileAnimationEntryMetadata('prop', [])]; const dirA = compileDirectiveMetadataCreate({ selector: 'div', template: compileTemplateMetadata({animations: animationEntries}), type: createTypeMeta({ reference: {filePath: someModuleUrl, name: 'DirA'}, }), host: {'[@prop]': 'expr'} }).toSummary(); humanizeTplAst(parse('
', [dirA])); expect(console.warnings.length).toEqual(0); }); it('should throw descriptive error when a host binding is not a string expression', () => { const dirA = compileDirectiveMetadataCreate({ selector: 'broken', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}), host: {'[class.foo]': null !} }).toSummary(); expect(() => { parse('', [dirA]); }) .toThrowError( `Template parse errors:\nValue of the host property binding "class.foo" needs to be a string representing an expression but got "null" (object) ("[ERROR ->]"): TestComp@0:0, Directive DirA`); }); it('should throw descriptive error when a host event is not a string expression', () => { const dirA = compileDirectiveMetadataCreate({ selector: 'broken', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}), host: {'(click)': null !} }).toSummary(); expect(() => { parse('', [dirA]); }) .toThrowError( `Template parse errors:\nValue of the host listener "click" needs to be a string representing an expression but got "null" (object) ("[ERROR ->]"): TestComp@0:0, Directive DirA`); }); it('should not issue a warning when an animation property is bound without an expression', () => { humanizeTplAst(parse('
', [], [], [])); expect(console.warnings.length).toEqual(0); }); it('should parse bound properties via [@] and not report them as attributes', () => { expect(humanizeTplAst(parse('
', [], [], []))).toEqual([ [ElementAst, 'div'], [ BoundElementPropertyAst, PropertyBindingType.Animation, 'someAnimation', 'value2', null ] ]); }); }); describe('events', () => { it('should parse bound events with a target', () => { expect(humanizeTplAst(parse('
', []))).toEqual([ [ElementAst, 'div'], [BoundEventAst, 'event', 'window', 'v'], ]); }); it('should report an error on empty expression', () => { expect(() => parse('
', [])) .toThrowError(/Empty expressions are not allowed/); expect(() => parse('
', [])) .toThrowError(/Empty expressions are not allowed/); }); it('should parse bound events via (...) and not report them as attributes', () => { expect(humanizeTplAst(parse('
', [ ]))).toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]); }); it('should parse event names case sensitive', () => { expect(humanizeTplAst(parse('
', [ ]))).toEqual([[ElementAst, 'div'], [BoundEventAst, 'some-event', null, 'v']]); expect(humanizeTplAst(parse('
', [ ]))).toEqual([[ElementAst, 'div'], [BoundEventAst, 'someEvent', null, 'v']]); }); it('should parse bound events via on- and not report them as attributes', () => { expect(humanizeTplAst(parse('
', [ ]))).toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]); }); it('should allow events on explicit embedded templates that are emitted by a directive', () => { const dirA = compileDirectiveMetadataCreate({ selector: 'template,ng-template', outputs: ['e'], type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}) }).toSummary(); expect(humanizeTplAst(parse('', [dirA]))).toEqual([ [EmbeddedTemplateAst], [BoundEventAst, 'e', null, 'f'], [DirectiveAst, dirA], ]); expect(humanizeTplAst(parse('', [dirA]))).toEqual([ [EmbeddedTemplateAst], [BoundEventAst, 'e', null, 'f'], [DirectiveAst, dirA], ]); }); }); describe('bindon', () => { it('should parse bound events and properties via [(...)] and not report them as attributes', () => { expect(humanizeTplAst(parse('
', []))).toEqual([ [ElementAst, 'div'], [BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null], [BoundEventAst, 'propChange', null, 'v = $event'] ]); }); it('should parse bound events and properties via bindon- and not report them as attributes', () => { expect(humanizeTplAst(parse('
', []))).toEqual([ [ElementAst, 'div'], [BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null], [BoundEventAst, 'propChange', null, 'v = $event'] ]); }); }); describe('directives', () => { it('should order directives by the directives array in the View and match them only once', () => { const dirA = compileDirectiveMetadataCreate({ selector: '[a]', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}) }).toSummary(); const dirB = compileDirectiveMetadataCreate({ selector: '[b]', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirB'}}) }).toSummary(); const dirC = compileDirectiveMetadataCreate({ selector: '[c]', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirC'}}) }).toSummary(); expect(humanizeTplAst(parse('
', [dirA, dirB, dirC]))).toEqual([ [ElementAst, 'div'], [AttrAst, 'a', ''], [AttrAst, 'c', ''], [AttrAst, 'b', ''], [AttrAst, 'a', ''], [AttrAst, 'b', ''], [DirectiveAst, dirA], [DirectiveAst, dirB], [DirectiveAst, dirC] ]); }); it('should parse directive dotted properties', () => { const dirA = compileDirectiveMetadataCreate({ selector: '[dot.name]', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}), inputs: ['localName: dot.name'], }).toSummary(); expect(humanizeTplAst(parse('
', [dirA]))).toEqual([ [ElementAst, 'div'], [DirectiveAst, dirA], [BoundDirectivePropertyAst, 'localName', 'expr'], ]); }); it('should locate directives in property bindings', () => { const dirA = compileDirectiveMetadataCreate({ selector: '[a=b]', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}) }).toSummary(); const dirB = compileDirectiveMetadataCreate({ selector: '[b]', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirB'}}) }).toSummary(); expect(humanizeTplAst(parse('
', [dirA, dirB]))).toEqual([ [ElementAst, 'div'], [BoundElementPropertyAst, PropertyBindingType.Property, 'a', 'b', null], [DirectiveAst, dirA] ]); }); it('should locate directives in inline templates', () => { const dirTemplate = compileDirectiveMetadataCreate({ selector: 'template', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'onTemplate'}}) }).toSummary(); expect(humanizeTplAst(parse('
', [ngIf, dirTemplate]))).toEqual([ [EmbeddedTemplateAst], [DirectiveAst, ngIf], [BoundDirectivePropertyAst, 'ngIf', 'cond'], [DirectiveAst, dirTemplate], [ElementAst, 'div'], ]); }); it('should locate directives in event bindings', () => { const dirA = compileDirectiveMetadataCreate({ selector: '[a]', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirB'}}) }).toSummary(); expect(humanizeTplAst(parse('
', [dirA]))).toEqual([ [ElementAst, 'div'], [BoundEventAst, 'a', null, 'b'], [DirectiveAst, dirA] ]); }); it('should parse directive host properties', () => { const dirA = compileDirectiveMetadataCreate({ selector: 'div', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}), host: {'[a]': 'expr'} }).toSummary(); expect(humanizeTplAst(parse('
', [dirA]))).toEqual([ [ElementAst, 'div'], [DirectiveAst, dirA], [BoundElementPropertyAst, PropertyBindingType.Property, 'a', 'expr', null] ]); }); it('should parse directive host listeners', () => { const dirA = compileDirectiveMetadataCreate({ selector: 'div', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}), host: {'(a)': 'expr'} }).toSummary(); expect(humanizeTplAst(parse('
', [dirA]))).toEqual([ [ElementAst, 'div'], [DirectiveAst, dirA], [BoundEventAst, 'a', null, 'expr'] ]); }); it('should parse directive properties', () => { const dirA = compileDirectiveMetadataCreate({ selector: 'div', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}), inputs: ['aProp'] }).toSummary(); expect(humanizeTplAst(parse('
', [dirA]))).toEqual([ [ElementAst, 'div'], [DirectiveAst, dirA], [BoundDirectivePropertyAst, 'aProp', 'expr'] ]); }); it('should parse renamed directive properties', () => { const dirA = compileDirectiveMetadataCreate({ selector: 'div', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}), inputs: ['b:a'] }).toSummary(); expect(humanizeTplAst(parse('
', [dirA]))).toEqual([ [ElementAst, 'div'], [DirectiveAst, dirA], [BoundDirectivePropertyAst, 'b', 'expr'] ]); }); it('should parse literal directive properties', () => { const dirA = compileDirectiveMetadataCreate({ selector: 'div', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}), inputs: ['a'] }).toSummary(); expect(humanizeTplAst(parse('
', [dirA]))).toEqual([ [ElementAst, 'div'], [AttrAst, 'a', 'literal'], [DirectiveAst, dirA], [BoundDirectivePropertyAst, 'a', '"literal"'] ]); }); it('should favor explicit bound properties over literal properties', () => { const dirA = compileDirectiveMetadataCreate({ selector: 'div', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}), inputs: ['a'] }).toSummary(); expect(humanizeTplAst(parse('
', [dirA]))) .toEqual([ [ElementAst, 'div'], [AttrAst, 'a', 'literal'], [DirectiveAst, dirA], [BoundDirectivePropertyAst, 'a', '"literal2"'] ]); }); it('should support optional directive properties', () => { const dirA = compileDirectiveMetadataCreate({ selector: 'div', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}), inputs: ['a'] }).toSummary(); expect(humanizeTplAst(parse('
', [dirA]))).toEqual([ [ElementAst, 'div'], [DirectiveAst, dirA] ]); }); }); describe('providers', () => { let nextProviderId: number; function createToken(value: string): CompileTokenMetadata { let token: CompileTokenMetadata; if (value.startsWith('type:')) { const name = value.substring(5); token = {identifier: createTypeMeta({reference: name})}; } else { token = {value: value}; } return token; } function createDep(value: string): CompileDiDependencyMetadata { let isOptional = false; if (value.startsWith('optional:')) { isOptional = true; value = value.substring(9); } let isSelf = false; if (value.startsWith('self:')) { isSelf = true; value = value.substring(5); } let isHost = false; if (value.startsWith('host:')) { isHost = true; value = value.substring(5); } return { token: createToken(value), isOptional: isOptional, isSelf: isSelf, isHost: isHost }; } function createProvider( token: string, {multi = false, deps = []}: {multi?: boolean, deps?: string[]} = {}): CompileProviderMetadata { const compileToken = createToken(token); return { token: compileToken, multi: multi, useClass: createTypeMeta({reference: tokenReference(compileToken)}), deps: deps.map(createDep), useExisting: undefined, useFactory: undefined, useValue: undefined }; } function createDir( selector: string, {providers = null, viewProviders = null, deps = [], queries = []}: { providers?: CompileProviderMetadata[], viewProviders?: CompileProviderMetadata[], deps?: string[], queries?: string[] } = {}): CompileDirectiveSummary { const isComponent = !selector.startsWith('['); return compileDirectiveMetadataCreate({ selector: selector, type: createTypeMeta({ reference: selector, diDeps: deps.map(createDep), }), isComponent: isComponent, template: compileTemplateMetadata({ngContentSelectors: []}), providers: providers, viewProviders: viewProviders, queries: queries.map((value) => { return { selectors: [createToken(value)], descendants: false, first: false, propertyName: 'test', read: undefined ! }; }) }) .toSummary(); } beforeEach(() => { nextProviderId = 0; }); it('should provide a component', () => { const comp = createDir('my-comp'); const elAst: ElementAst = parse('', [comp])[0]; expect(elAst.providers.length).toBe(1); expect(elAst.providers[0].providerType).toBe(ProviderAstType.Component); expect(elAst.providers[0].providers[0].useClass).toBe(comp.type); }); it('should provide a directive', () => { const dirA = createDir('[dirA]'); const elAst: ElementAst = parse('
', [dirA])[0]; expect(elAst.providers.length).toBe(1); expect(elAst.providers[0].providerType).toBe(ProviderAstType.Directive); expect(elAst.providers[0].providers[0].useClass).toBe(dirA.type); }); it('should use the public providers of a directive', () => { const provider = createProvider('service'); const dirA = createDir('[dirA]', {providers: [provider]}); const elAst: ElementAst = parse('
', [dirA])[0]; expect(elAst.providers.length).toBe(2); expect(elAst.providers[0].providerType).toBe(ProviderAstType.PublicService); expect(elAst.providers[0].providers).toEqual([provider]); }); it('should use the private providers of a component', () => { const provider = createProvider('service'); const comp = createDir('my-comp', {viewProviders: [provider]}); const elAst: ElementAst = parse('', [comp])[0]; expect(elAst.providers.length).toBe(2); expect(elAst.providers[0].providerType).toBe(ProviderAstType.PrivateService); expect(elAst.providers[0].providers).toEqual([provider]); }); it('should support multi providers', () => { const provider0 = createProvider('service0', {multi: true}); const provider1 = createProvider('service1', {multi: true}); const provider2 = createProvider('service0', {multi: true}); const dirA = createDir('[dirA]', {providers: [provider0, provider1]}); const dirB = createDir('[dirB]', {providers: [provider2]}); const elAst: ElementAst = parse('
', [dirA, dirB])[0]; expect(elAst.providers.length).toBe(4); expect(elAst.providers[0].providers).toEqual([provider0, provider2]); expect(elAst.providers[1].providers).toEqual([provider1]); }); it('should overwrite non multi providers', () => { const provider1 = createProvider('service0'); const provider2 = createProvider('service1'); const provider3 = createProvider('service0'); const dirA = createDir('[dirA]', {providers: [provider1, provider2]}); const dirB = createDir('[dirB]', {providers: [provider3]}); const elAst: ElementAst = parse('
', [dirA, dirB])[0]; expect(elAst.providers.length).toBe(4); expect(elAst.providers[0].providers).toEqual([provider3]); expect(elAst.providers[1].providers).toEqual([provider2]); }); it('should overwrite component providers by directive providers', () => { const compProvider = createProvider('service0'); const dirProvider = createProvider('service0'); const comp = createDir('my-comp', {providers: [compProvider]}); const dirA = createDir('[dirA]', {providers: [dirProvider]}); const elAst: ElementAst = parse('', [dirA, comp])[0]; expect(elAst.providers.length).toBe(3); expect(elAst.providers[0].providers).toEqual([dirProvider]); }); it('should overwrite view providers by directive providers', () => { const viewProvider = createProvider('service0'); const dirProvider = createProvider('service0'); const comp = createDir('my-comp', {viewProviders: [viewProvider]}); const dirA = createDir('[dirA]', {providers: [dirProvider]}); const elAst: ElementAst = parse('', [dirA, comp])[0]; expect(elAst.providers.length).toBe(3); expect(elAst.providers[0].providers).toEqual([dirProvider]); }); it('should overwrite directives by providers', () => { const dirProvider = createProvider('type:my-comp'); const comp = createDir('my-comp', {providers: [dirProvider]}); const elAst: ElementAst = parse('', [comp])[0]; expect(elAst.providers.length).toBe(1); expect(elAst.providers[0].providers).toEqual([dirProvider]); }); it('if mixing multi and non multi providers', () => { const provider0 = createProvider('service0'); const provider1 = createProvider('service0', {multi: true}); const dirA = createDir('[dirA]', {providers: [provider0]}); const dirB = createDir('[dirB]', {providers: [provider1]}); expect(() => parse('
', [dirA, dirB])) .toThrowError( `Template parse errors:\n` + `Mixing multi and non multi provider is not possible for token service0 ("[ERROR ->]
"): TestComp@0:0`); }); it('should sort providers by their DI order, lazy providers first', () => { const provider0 = createProvider('service0', {deps: ['type:[dir2]']}); const provider1 = createProvider('service1'); const dir2 = createDir('[dir2]', {deps: ['service1']}); const comp = createDir('my-comp', {providers: [provider0, provider1]}); const elAst: ElementAst = parse('', [comp, dir2])[0]; expect(elAst.providers.length).toBe(4); expect(elAst.providers[1].providers[0].useClass).toEqual(comp.type); expect(elAst.providers[2].providers).toEqual([provider1]); expect(elAst.providers[3].providers[0].useClass).toEqual(dir2.type); expect(elAst.providers[0].providers).toEqual([provider0]); }); it('should sort directives by their DI order', () => { const dir0 = createDir('[dir0]', {deps: ['type:my-comp']}); const dir1 = createDir('[dir1]', {deps: ['type:[dir0]']}); const dir2 = createDir('[dir2]', {deps: ['type:[dir1]']}); const comp = createDir('my-comp'); const elAst: ElementAst = parse('', [comp, dir2, dir0, dir1])[0]; expect(elAst.providers.length).toBe(4); expect(elAst.directives[0].directive).toBe(comp); expect(elAst.directives[1].directive).toBe(dir0); expect(elAst.directives[2].directive).toBe(dir1); expect(elAst.directives[3].directive).toBe(dir2); }); it('should mark directives and dependencies of directives as eager', () => { const provider0 = createProvider('service0'); const provider1 = createProvider('service1'); const dirA = createDir('[dirA]', {providers: [provider0, provider1], deps: ['service0']}); const elAst: ElementAst = parse('
', [dirA])[0]; expect(elAst.providers.length).toBe(3); expect(elAst.providers[1].providers).toEqual([provider0]); expect(elAst.providers[1].eager).toBe(true); expect(elAst.providers[2].providers[0].useClass).toEqual(dirA.type); expect(elAst.providers[2].eager).toBe(true); expect(elAst.providers[0].providers).toEqual([provider1]); expect(elAst.providers[0].eager).toBe(false); }); it('should mark dependencies on parent elements as eager', () => { const provider0 = createProvider('service0'); const provider1 = createProvider('service1'); const dirA = createDir('[dirA]', {providers: [provider0, provider1]}); const dirB = createDir('[dirB]', {deps: ['service0']}); const elAst: ElementAst = parse('
', [dirA, dirB])[0]; expect(elAst.providers.length).toBe(3); expect(elAst.providers[1].providers[0].useClass).toEqual(dirA.type); expect(elAst.providers[1].eager).toBe(true); expect(elAst.providers[2].providers).toEqual([provider0]); expect(elAst.providers[2].eager).toBe(true); expect(elAst.providers[0].providers).toEqual([provider1]); expect(elAst.providers[0].eager).toBe(false); }); it('should mark queried providers as eager', () => { const provider0 = createProvider('service0'); const provider1 = createProvider('service1'); const dirA = createDir('[dirA]', {providers: [provider0, provider1], queries: ['service0']}); const elAst: ElementAst = parse('
', [dirA])[0]; expect(elAst.providers.length).toBe(3); expect(elAst.providers[1].providers[0].useClass).toEqual(dirA.type); expect(elAst.providers[1].eager).toBe(true); expect(elAst.providers[2].providers).toEqual([provider0]); expect(elAst.providers[2].eager).toBe(true); expect(elAst.providers[0].providers).toEqual([provider1]); expect(elAst.providers[0].eager).toBe(false); }); it('should not mark dependencies across embedded views as eager', () => { const provider0 = createProvider('service0'); const dirA = createDir('[dirA]', {providers: [provider0]}); const dirB = createDir('[dirB]', {deps: ['service0']}); const elAst: ElementAst = parse('
', [dirA, dirB])[0]; expect(elAst.providers.length).toBe(2); expect(elAst.providers[1].providers[0].useClass).toEqual(dirA.type); expect(elAst.providers[1].eager).toBe(true); expect(elAst.providers[0].providers).toEqual([provider0]); expect(elAst.providers[0].eager).toBe(false); }); it('should report missing @Self() deps as errors', () => { const dirA = createDir('[dirA]', {deps: ['self:provider0']}); expect(() => parse('
', [dirA])) .toThrowError( 'Template parse errors:\nNo provider for provider0 ("[ERROR ->]
"): TestComp@0:0'); }); it('should change missing @Self() that are optional to nulls', () => { const dirA = createDir('[dirA]', {deps: ['optional:self:provider0']}); const elAst: ElementAst = parse('
', [dirA])[0]; expect(elAst.providers[0].providers[0].deps ![0].isValue).toBe(true); expect(elAst.providers[0].providers[0].deps ![0].value).toBe(null); }); it('should report missing @Host() deps as errors', () => { const dirA = createDir('[dirA]', {deps: ['host:provider0']}); expect(() => parse('
', [dirA])) .toThrowError( 'Template parse errors:\nNo provider for provider0 ("[ERROR ->]
"): TestComp@0:0'); }); it('should change missing @Host() that are optional to nulls', () => { const dirA = createDir('[dirA]', {deps: ['optional:host:provider0']}); const elAst: ElementAst = parse('
', [dirA])[0]; expect(elAst.providers[0].providers[0].deps ![0].isValue).toBe(true); expect(elAst.providers[0].providers[0].deps ![0].value).toBe(null); }); }); describe('references', () => { it('should parse references via #... and not report them as attributes', () => { expect(humanizeTplAst(parse('
', [ ]))).toEqual([[ElementAst, 'div'], [ReferenceAst, 'a', null]]); }); it('should parse references via ref-... and not report them as attributes', () => { expect(humanizeTplAst(parse('
', [ ]))).toEqual([[ElementAst, 'div'], [ReferenceAst, 'a', null]]); }); it('should parse camel case references', () => { expect(humanizeTplAst(parse('
', [ ]))).toEqual([[ElementAst, 'div'], [ReferenceAst, 'someA', null]]); }); it('should assign references with empty value to the element', () => { expect(humanizeTplAst(parse('
', [ ]))).toEqual([[ElementAst, 'div'], [ReferenceAst, 'a', null]]); }); it('should assign references to directives via exportAs', () => { const dirA = compileDirectiveMetadataCreate({ selector: '[a]', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}), exportAs: 'dirA' }).toSummary(); expect(humanizeTplAst(parse('
', [dirA]))).toEqual([ [ElementAst, 'div'], [AttrAst, 'a', ''], [ReferenceAst, 'a', createTokenForReference(dirA.type.reference)], [DirectiveAst, dirA], ]); }); it('should assign references to directives via exportAs with multiple names', () => { const pizzaTestDirective = compileDirectiveMetadataCreate({ selector: 'pizza-test', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'Pizza'}}), exportAs: 'pizza, cheeseSauceBread' }).toSummary(); const template = ''; expect(humanizeTplAst(parse(template, [pizzaTestDirective]))).toEqual([ [ElementAst, 'pizza-test'], [ReferenceAst, 'food', createTokenForReference(pizzaTestDirective.type.reference)], [ReferenceAst, 'yum', createTokenForReference(pizzaTestDirective.type.reference)], [DirectiveAst, pizzaTestDirective], ]); }); it('should report references with values that dont match a directive as errors', () => { expect(() => parse('
', [])).toThrowError(`Template parse errors: There is no directive with "exportAs" set to "dirA" ("
]#a="dirA">
"): TestComp@0:5`); }); it('should report invalid reference names', () => { expect(() => parse('
', [])).toThrowError(`Template parse errors: "-" is not allowed in reference names ("
]#a-b>
"): TestComp@0:5`); }); it('should report variables as errors', () => { expect(() => parse('
', [])).toThrowError(`Template parse errors: "let-" is only supported on template elements. ("
]let-a>
"): TestComp@0:5`); }); it('should report duplicate reference names', () => { expect(() => parse('
', [])) .toThrowError(`Template parse errors: Reference "#a" is defined several times ("
]#a>
"): TestComp@0:19`); }); it('should report duplicate reference names when using mutliple exportAs names', () => { const pizzaDirective = compileDirectiveMetadataCreate({ selector: '[dessert-pizza]', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'Pizza'}}), exportAs: 'dessertPizza, chocolate' }).toSummary(); const chocolateDirective = compileDirectiveMetadataCreate({ selector: '[chocolate]', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'Chocolate'}}), exportAs: 'chocolate' }).toSummary(); const template = '
'; const compileTemplate = () => parse(template, [pizzaDirective, chocolateDirective]); const duplicateReferenceError = 'Template parse errors:\n' + 'Reference "#snack" is defined several times ' + '("
]#snack="chocolate">
")' + ': TestComp@0:29'; expect(compileTemplate).toThrowError(duplicateReferenceError); }); it('should not throw error when there is same reference name in different templates', () => { expect(() => parse('
', [])) .not.toThrowError(); expect(() => parse('
OK
', [])) .not.toThrowError(); }); it('should assign references with empty value to components', () => { const dirA = compileDirectiveMetadataCreate({ selector: '[a]', isComponent: true, type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}), exportAs: 'dirA', template: compileTemplateMetadata({ngContentSelectors: []}) }).toSummary(); expect(humanizeTplAst(parse('
', [dirA]))).toEqual([ [ElementAst, 'div'], [AttrAst, 'a', ''], [ReferenceAst, 'a', createTokenForReference(dirA.type.reference)], [DirectiveAst, dirA], ]); }); it('should not locate directives in references', () => { const dirA = compileDirectiveMetadataCreate({ selector: '[a]', type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}) }).toSummary(); expect(humanizeTplAst(parse('
', [dirA]))).toEqual([ [ElementAst, 'div'], [ReferenceAst, 'a', null] ]); }); }); describe('explicit templates', () => { let reflector: JitReflector; beforeEach(() => { reflector = new JitReflector(); }); it('should create embedded templates for elements', () => { expect(humanizeTplAst(parse('', [ ]))).toEqual([[EmbeddedTemplateAst]]); expect(humanizeTplAst(parse('', [ ]))).toEqual([[EmbeddedTemplateAst]]); expect(humanizeTplAst(parse('', [ ]))).toEqual([[EmbeddedTemplateAst]]); }); it('should create embedded templates for elements regardless the namespace', () => { expect(humanizeTplAst(parse('', []))).toEqual([ [ElementAst, ':svg:svg'], [EmbeddedTemplateAst], ]); expect(humanizeTplAst(parse('', []))).toEqual([ [ElementAst, ':svg:svg'], [EmbeddedTemplateAst], ]); }); it('should support references via #...', () => { expect(humanizeTplAst(parse('