import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach} from 'angular2/test_lib'; import {isPresent} from 'angular2/src/core/facade/lang'; import {Parser, Lexer} from 'angular2/src/core/change_detection/change_detection'; import {TemplateParser, splitClasses} from 'angular2/src/compiler/template_parser'; import {HtmlParser} from 'angular2/src/compiler/html_parser'; import {DirectiveMetadata, TypeMetadata, ChangeDetectionMetadata} from 'angular2/src/compiler/api'; import { templateVisitAll, TemplateAstVisitor, TemplateAst, NgContentAst, EmbeddedTemplateAst, ElementAst, VariableAst, BoundEventAst, BoundElementPropertyAst, BoundDirectivePropertyAst, AttrAst, BoundTextAst, TextAst, PropertyBindingType, DirectiveAst } from 'angular2/src/compiler/template_ast'; import {ElementSchemaRegistry} from 'angular2/src/core/render/dom/schema/element_schema_registry'; import {Unparser} from '../core/change_detection/parser/unparser'; var expressionUnparser = new Unparser(); export function main() { describe('TemplateParser', () => { var domParser: HtmlParser; var parser: TemplateParser; var ngIf; beforeEach(() => { domParser = new HtmlParser(); parser = new TemplateParser( new Parser(new Lexer()), new MockSchemaRegistry({'invalidProp': false}, {'mappedAttr': 'mappedProp'})); ngIf = new DirectiveMetadata({ selector: '[ng-if]', type: new TypeMetadata({typeName: 'NgIf'}), changeDetection: new ChangeDetectionMetadata({properties: ['ngIf']}) }); }); function parse(template: string, directives: DirectiveMetadata[]): TemplateAst[] { return parser.parse(domParser.parse(template, 'TestComp'), directives); } describe('parse', () => { describe('nodes without bindings', () => { it('should parse text nodes', () => { expect(humanizeTemplateAsts(parse('a', []))) .toEqual([[TextAst, 'a', 'TestComp > #text(a):nth-child(0)']]); }); it('should parse elements with attributes', () => { expect(humanizeTemplateAsts(parse('
', []))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [AttrAst, 'a', 'b', 'TestComp > div:nth-child(0)[a=b]'] ]); }); }); it('should parse ngContent', () => { var parsed = parse('', []); expect(humanizeTemplateAsts(parsed)) .toEqual([[NgContentAst, 'a', 'TestComp > ng-content:nth-child(0)']]); }); it('should parse bound text nodes', () => { expect(humanizeTemplateAsts(parse('{{a}}', []))) .toEqual([[BoundTextAst, '{{ a }}', 'TestComp > #text({{a}}):nth-child(0)']]); }); describe('bound properties', () => { it('should parse and camel case bound properties', () => { expect(humanizeTemplateAsts(parse('
', []))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [ BoundElementPropertyAst, PropertyBindingType.Property, 'someProp', 'v', null, 'TestComp > div:nth-child(0)[[some-prop]=v]' ] ]); }); it('should normalize property names via the element schema', () => { expect(humanizeTemplateAsts(parse('
', []))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [ BoundElementPropertyAst, PropertyBindingType.Property, 'mappedProp', 'v', null, 'TestComp > div:nth-child(0)[[mapped-attr]=v]' ] ]); }); it('should parse and camel case bound attributes', () => { expect(humanizeTemplateAsts(parse('
', []))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [ BoundElementPropertyAst, PropertyBindingType.Attribute, 'someAttr', 'v', null, 'TestComp > div:nth-child(0)[[attr.some-attr]=v]' ] ]); }); it('should parse and dash case bound classes', () => { expect(humanizeTemplateAsts(parse('
', []))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [ BoundElementPropertyAst, PropertyBindingType.Class, 'some-class', 'v', null, 'TestComp > div:nth-child(0)[[class.some-class]=v]' ] ]); }); it('should parse and camel case bound styles', () => { expect(humanizeTemplateAsts(parse('
', []))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [ BoundElementPropertyAst, PropertyBindingType.Style, 'someStyle', 'v', null, 'TestComp > div:nth-child(0)[[style.some-style]=v]' ] ]); }); it('should parse bound properties via [...] and not report them as attributes', () => { expect(humanizeTemplateAsts(parse('
', []))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [ BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null, 'TestComp > div:nth-child(0)[[prop]=v]' ] ]); }); it('should parse bound properties via bind- and not report them as attributes', () => { expect(humanizeTemplateAsts(parse('
', []))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [ BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null, 'TestComp > div:nth-child(0)[bind-prop=v]' ] ]); }); it('should parse bound properties via {{...}} and not report them as attributes', () => { expect(humanizeTemplateAsts(parse('
', []))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [ BoundElementPropertyAst, PropertyBindingType.Property, 'prop', '{{ v }}', null, 'TestComp > div:nth-child(0)[prop={{v}}]' ] ]); }); }); describe('events', () => { it('should parse bound events with a target', () => { expect(humanizeTemplateAsts(parse('
', []))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [ BoundEventAst, 'event', 'window', 'v', 'TestComp > div:nth-child(0)[(window:event)=v]' ] ]); }); it('should parse bound events via (...) and not report them as attributes', () => { expect(humanizeTemplateAsts(parse('
', []))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [BoundEventAst, 'event', null, 'v', 'TestComp > div:nth-child(0)[(event)=v]'] ]); }); it('should camel case event names', () => { expect(humanizeTemplateAsts(parse('
', []))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [ BoundEventAst, 'someEvent', null, 'v', 'TestComp > div:nth-child(0)[(some-event)=v]' ] ]); }); it('should parse bound events via on- and not report them as attributes', () => { expect(humanizeTemplateAsts(parse('
', []))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [BoundEventAst, 'event', null, 'v', 'TestComp > div:nth-child(0)[on-event=v]'] ]); }); }); describe('bindon', () => { it('should parse bound events and properties via [(...)] and not report them as attributes', () => { expect(humanizeTemplateAsts(parse('
', []))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [ BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null, 'TestComp > div:nth-child(0)[[(prop)]=v]' ], [ BoundEventAst, 'prop', null, 'v = $event', 'TestComp > div:nth-child(0)[[(prop)]=v]' ] ]); }); it('should parse bound events and properties via bindon- and not report them as attributes', () => { expect(humanizeTemplateAsts(parse('
', []))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [ BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null, 'TestComp > div:nth-child(0)[bindon-prop=v]' ], [ BoundEventAst, 'prop', null, 'v = $event', 'TestComp > div:nth-child(0)[bindon-prop=v]' ] ]); }); }); describe('variables', () => { it('should parse variables via #... and not report them as attributes', () => { expect(humanizeTemplateAsts(parse('
', []))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [VariableAst, 'a', 'b', 'TestComp > div:nth-child(0)[#a=b]'] ]); }); it('should parse variables via var-... and not report them as attributes', () => { expect(humanizeTemplateAsts(parse('
', []))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [VariableAst, 'a', 'b', 'TestComp > div:nth-child(0)[var-a=b]'] ]); }); it('should camel case variables', () => { expect(humanizeTemplateAsts(parse('
', []))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [VariableAst, 'someA', 'b', 'TestComp > div:nth-child(0)[var-some-a=b]'] ]); }); it('should use $implicit as variable name if none was specified', () => { expect(humanizeTemplateAsts(parse('
', []))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [VariableAst, 'a', '$implicit', 'TestComp > div:nth-child(0)[var-a=]'] ]); }); }); describe('directives', () => { it('should locate directives ordered by typeName and components first', () => { var dirA = new DirectiveMetadata( {selector: '[a=b]', type: new TypeMetadata({typeName: 'DirA'})}); var dirB = new DirectiveMetadata({selector: '[a]', type: new TypeMetadata({typeName: 'DirB'})}); var comp = new DirectiveMetadata( {selector: 'div', isComponent: true, type: new TypeMetadata({typeName: 'ZComp'})}); expect(humanizeTemplateAsts(parse('
', [dirB, dirA, comp]))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [AttrAst, 'a', 'b', 'TestComp > div:nth-child(0)[a=b]'], [DirectiveAst, comp, 'TestComp > div:nth-child(0)'], [DirectiveAst, dirA, 'TestComp > div:nth-child(0)'], [DirectiveAst, dirB, 'TestComp > div:nth-child(0)'] ]); }); it('should locate directives in property bindings', () => { var dirA = new DirectiveMetadata( {selector: '[a=b]', type: new TypeMetadata({typeName: 'DirA'})}); var dirB = new DirectiveMetadata({selector: '[b]', type: new TypeMetadata({typeName: 'DirB'})}); expect(humanizeTemplateAsts(parse('
', [dirA, dirB]))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [ BoundElementPropertyAst, PropertyBindingType.Property, 'a', 'b', null, 'TestComp > div:nth-child(0)[[a]=b]' ], [DirectiveAst, dirA, 'TestComp > div:nth-child(0)'] ]); }); it('should locate directives in variable bindings', () => { var dirA = new DirectiveMetadata( {selector: '[a=b]', type: new TypeMetadata({typeName: 'DirA'})}); var dirB = new DirectiveMetadata({selector: '[b]', type: new TypeMetadata({typeName: 'DirB'})}); expect(humanizeTemplateAsts(parse('
', [dirA, dirB]))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [VariableAst, 'a', 'b', 'TestComp > div:nth-child(0)[#a=b]'], [DirectiveAst, dirA, 'TestComp > div:nth-child(0)'] ]); }); it('should parse directive host properties', () => { var dirA = new DirectiveMetadata({ selector: 'div', type: new TypeMetadata({typeName: 'DirA'}), changeDetection: new ChangeDetectionMetadata({hostProperties: {'a': 'expr'}}) }); expect(humanizeTemplateAsts(parse('
', [dirA]))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [DirectiveAst, dirA, 'TestComp > div:nth-child(0)'], [ BoundElementPropertyAst, PropertyBindingType.Property, 'a', 'expr', null, 'TestComp > div:nth-child(0)' ] ]); }); it('should parse directive host listeners', () => { var dirA = new DirectiveMetadata({ selector: 'div', type: new TypeMetadata({typeName: 'DirA'}), changeDetection: new ChangeDetectionMetadata({hostListeners: {'a': 'expr'}}) }); expect(humanizeTemplateAsts(parse('
', [dirA]))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [DirectiveAst, dirA, 'TestComp > div:nth-child(0)'], [BoundEventAst, 'a', null, 'expr', 'TestComp > div:nth-child(0)'] ]); }); it('should parse directive properties', () => { var dirA = new DirectiveMetadata({ selector: 'div', type: new TypeMetadata({typeName: 'DirA'}), changeDetection: new ChangeDetectionMetadata({properties: ['aProp']}) }); expect(humanizeTemplateAsts(parse('
', [dirA]))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [DirectiveAst, dirA, 'TestComp > div:nth-child(0)'], [ BoundDirectivePropertyAst, 'aProp', 'expr', 'TestComp > div:nth-child(0)[[a-prop]=expr]' ] ]); }); it('should parse renamed directive properties', () => { var dirA = new DirectiveMetadata({ selector: 'div', type: new TypeMetadata({typeName: 'DirA'}), changeDetection: new ChangeDetectionMetadata({properties: ['b:a']}) }); expect(humanizeTemplateAsts(parse('
', [dirA]))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [DirectiveAst, dirA, 'TestComp > div:nth-child(0)'], [BoundDirectivePropertyAst, 'b', 'expr', 'TestComp > div:nth-child(0)[[a]=expr]'] ]); }); it('should parse literal directive properties', () => { var dirA = new DirectiveMetadata({ selector: 'div', type: new TypeMetadata({typeName: 'DirA'}), changeDetection: new ChangeDetectionMetadata({properties: ['a']}) }); expect(humanizeTemplateAsts(parse('
', [dirA]))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [AttrAst, 'a', 'literal', 'TestComp > div:nth-child(0)[a=literal]'], [DirectiveAst, dirA, 'TestComp > div:nth-child(0)'], [ BoundDirectivePropertyAst, 'a', '"literal"', 'TestComp > div:nth-child(0)[a=literal]' ] ]); }); it('should support optional directive properties', () => { var dirA = new DirectiveMetadata({ selector: 'div', type: new TypeMetadata({typeName: 'DirA'}), changeDetection: new ChangeDetectionMetadata({properties: ['a']}) }); expect(humanizeTemplateAsts(parse('
', [dirA]))) .toEqual([ [ElementAst, 'TestComp > div:nth-child(0)'], [DirectiveAst, dirA, 'TestComp > div:nth-child(0)'] ]); }); }); describe('explicit templates', () => { it('should create embedded templates for