Revert "feat(Compiler): case sensitive html parser"

This reverts commit 86aeb8be0a.
This commit is contained in:
vsavkin
2015-11-16 14:37:00 -08:00
parent 0611239a0e
commit 4e1d9c93df
14 changed files with 669 additions and 1673 deletions

View File

@ -8,7 +8,7 @@ import {
beforeEach,
afterEach,
inject,
beforeEachProviders
beforeEachBindings
} from 'angular2/testing_internal';
import {provide} from 'angular2/src/core/di';
@ -45,12 +45,9 @@ import {Unparser} from '../core/change_detection/parser/unparser';
var expressionUnparser = new Unparser();
// TODO(tbosch): add tests for checking that we
// keep the correct sourceSpans!
export function main() {
describe('TemplateParser', () => {
beforeEachProviders(() => [
beforeEachBindings(() => [
TEST_PROVIDERS,
provide(ElementSchemaRegistry,
{
@ -75,22 +72,29 @@ export function main() {
describe('parse', () => {
describe('nodes without bindings', () => {
it('should parse text nodes',
() => { expect(humanizeTemplateAsts(parse('a', []))).toEqual([[TextAst, 'a']]); });
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('<div a=b>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'a', 'b']]);
.toEqual([
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[AttrAst, 'a', 'b', 'TestComp > div:nth-child(0)[a=b]']
]);
});
});
it('should parse ngContent', () => {
var parsed = parse('<ng-content select="a">', []);
expect(humanizeTemplateAsts(parsed)).toEqual([[NgContentAst]]);
expect(humanizeTemplateAsts(parsed))
.toEqual([[NgContentAst, 'TestComp > ng-content:nth-child(0)']]);
});
it('should parse bound text nodes', () => {
expect(humanizeTemplateAsts(parse('{{a}}', []))).toEqual([[BoundTextAst, '{{ a }}']]);
expect(humanizeTemplateAsts(parse('{{a}}', [])))
.toEqual([[BoundTextAst, '{{ a }}', 'TestComp > #text({{a}}):nth-child(0)']]);
});
describe('bound properties', () => {
@ -98,64 +102,120 @@ export function main() {
it('should parse and camel case bound properties', () => {
expect(humanizeTemplateAsts(parse('<div [some-prop]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'someProp', 'v', null]
[ElementAst, 'div', '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('<div [mapped-attr]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'mappedProp', 'v', null]
[ElementAst, 'div', '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('<div [attr.some-attr]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Attribute, 'someAttr', 'v', null]
[ElementAst, 'div', '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('<div [class.some-class]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Class, 'some-class', 'v', null]
[ElementAst, 'div', '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('<div [style.some-style]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Style, 'someStyle', 'v', null]
[ElementAst, 'div', '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('<div [prop]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null]
[ElementAst, 'div', '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('<div bind-prop="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null]
[ElementAst, 'div', '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('<div prop="{{v}}">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', '{{ v }}', null]
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[
BoundElementPropertyAst,
PropertyBindingType.Property,
'prop',
'{{ v }}',
null,
'TestComp > div:nth-child(0)[prop={{v}}]'
]
]);
});
@ -165,22 +225,46 @@ export function main() {
it('should parse bound events with a target', () => {
expect(humanizeTemplateAsts(parse('<div (window:event)="v">', [])))
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', 'window', 'v']]);
.toEqual([
[ElementAst, 'div', '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('<div (event)="v">', [])))
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]);
.toEqual([
[ElementAst, 'div', '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('<div (some-event)="v">', [])))
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'someEvent', null, 'v']]);
.toEqual([
[ElementAst, 'div', '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('<div on-event="v">', [])))
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]);
.toEqual([
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[BoundEventAst, 'event', null, 'v', 'TestComp > div:nth-child(0)[on-event=v]']
]);
});
it('should allow events on explicit embedded templates that are emitted by a directive',
@ -192,9 +276,9 @@ export function main() {
});
expect(humanizeTemplateAsts(parse('<template (e)="f"></template>', [dirA])))
.toEqual([
[EmbeddedTemplateAst],
[BoundEventAst, 'e', null, 'f'],
[DirectiveAst, dirA],
[EmbeddedTemplateAst, 'TestComp > template:nth-child(0)'],
[BoundEventAst, 'e', null, 'f', 'TestComp > template:nth-child(0)[(e)=f]'],
[DirectiveAst, dirA, 'TestComp > template:nth-child(0)'],
]);
});
});
@ -204,9 +288,22 @@ export function main() {
() => {
expect(humanizeTemplateAsts(parse('<div [(prop)]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null],
[BoundEventAst, 'propChange', null, 'v = $event']
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[
BoundElementPropertyAst,
PropertyBindingType.Property,
'prop',
'v',
null,
'TestComp > div:nth-child(0)[[(prop)]=v]'
],
[
BoundEventAst,
'propChange',
null,
'v = $event',
'TestComp > div:nth-child(0)[[(prop)]=v]'
]
]);
});
@ -214,9 +311,22 @@ export function main() {
() => {
expect(humanizeTemplateAsts(parse('<div bindon-prop="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null],
[BoundEventAst, 'propChange', null, 'v = $event']
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[
BoundElementPropertyAst,
PropertyBindingType.Property,
'prop',
'v',
null,
'TestComp > div:nth-child(0)[bindon-prop=v]'
],
[
BoundEventAst,
'propChange',
null,
'v = $event',
'TestComp > div:nth-child(0)[bindon-prop=v]'
]
]);
});
@ -239,14 +349,14 @@ export function main() {
});
expect(humanizeTemplateAsts(parse('<div a c b>', [dirA, dirB, dirC, comp])))
.toEqual([
[ElementAst, 'div'],
[AttrAst, 'a', ''],
[AttrAst, 'c', ''],
[AttrAst, 'b', ''],
[DirectiveAst, comp],
[DirectiveAst, dirA],
[DirectiveAst, dirB],
[DirectiveAst, dirC]
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[AttrAst, 'a', '', 'TestComp > div:nth-child(0)[a=]'],
[AttrAst, 'b', '', 'TestComp > div:nth-child(0)[b=]'],
[AttrAst, 'c', '', 'TestComp > div:nth-child(0)[c=]'],
[DirectiveAst, comp, 'TestComp > div:nth-child(0)'],
[DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
[DirectiveAst, dirB, 'TestComp > div:nth-child(0)'],
[DirectiveAst, dirC, 'TestComp > div:nth-child(0)']
]);
});
@ -257,9 +367,16 @@ export function main() {
{selector: '[b]', type: new CompileTypeMetadata({name: 'DirB'})});
expect(humanizeTemplateAsts(parse('<div [a]="b">', [dirA, dirB])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'a', 'b', null],
[DirectiveAst, dirA]
[ElementAst, 'div', '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)']
]);
});
@ -271,9 +388,16 @@ export function main() {
});
expect(humanizeTemplateAsts(parse('<div></div>', [dirA])))
.toEqual([
[ElementAst, 'div'],
[DirectiveAst, dirA],
[BoundElementPropertyAst, PropertyBindingType.Property, 'a', 'expr', null]
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
[
BoundElementPropertyAst,
PropertyBindingType.Property,
'a',
'expr',
null,
'TestComp > div:nth-child(0)'
]
]);
});
@ -284,8 +408,11 @@ export function main() {
host: {'(a)': 'expr'}
});
expect(humanizeTemplateAsts(parse('<div></div>', [dirA])))
.toEqual(
[[ElementAst, 'div'], [DirectiveAst, dirA], [BoundEventAst, 'a', null, 'expr']]);
.toEqual([
[ElementAst, 'div', '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', () => {
@ -293,9 +420,14 @@ export function main() {
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['aProp']});
expect(humanizeTemplateAsts(parse('<div [a-prop]="expr"></div>', [dirA])))
.toEqual([
[ElementAst, 'div'],
[DirectiveAst, dirA],
[BoundDirectivePropertyAst, 'aProp', 'expr']
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
[
BoundDirectivePropertyAst,
'aProp',
'expr',
'TestComp > div:nth-child(0)[[a-prop]=expr]'
]
]);
});
@ -304,9 +436,9 @@ export function main() {
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['b:a']});
expect(humanizeTemplateAsts(parse('<div [a]="expr"></div>', [dirA])))
.toEqual([
[ElementAst, 'div'],
[DirectiveAst, dirA],
[BoundDirectivePropertyAst, 'b', 'expr']
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
[BoundDirectivePropertyAst, 'b', 'expr', 'TestComp > div:nth-child(0)[[a]=expr]']
]);
});
@ -315,10 +447,15 @@ export function main() {
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['a']});
expect(humanizeTemplateAsts(parse('<div a="literal"></div>', [dirA])))
.toEqual([
[ElementAst, 'div'],
[AttrAst, 'a', 'literal'],
[DirectiveAst, dirA],
[BoundDirectivePropertyAst, 'a', '"literal"']
[ElementAst, 'div', '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]'
]
]);
});
@ -327,10 +464,15 @@ export function main() {
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['a']});
expect(humanizeTemplateAsts(parse('<div a="literal" [a]="\'literal2\'"></div>', [dirA])))
.toEqual([
[ElementAst, 'div'],
[AttrAst, 'a', 'literal'],
[DirectiveAst, dirA],
[BoundDirectivePropertyAst, 'a', '"literal2"']
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[AttrAst, 'a', 'literal', 'TestComp > div:nth-child(0)[a=literal]'],
[DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
[
BoundDirectivePropertyAst,
'a',
'"literal2"',
'TestComp > div:nth-child(0)[[a]=\'literal2\']'
]
]);
});
@ -338,7 +480,10 @@ export function main() {
var dirA = CompileDirectiveMetadata.create(
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['a']});
expect(humanizeTemplateAsts(parse('<div></div>', [dirA])))
.toEqual([[ElementAst, 'div'], [DirectiveAst, dirA]]);
.toEqual([
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[DirectiveAst, dirA, 'TestComp > div:nth-child(0)']
]);
});
});
@ -347,22 +492,34 @@ export function main() {
it('should parse variables via #... and not report them as attributes', () => {
expect(humanizeTemplateAsts(parse('<div #a>', [])))
.toEqual([[ElementAst, 'div'], [VariableAst, 'a', '']]);
.toEqual([
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[VariableAst, 'a', '', 'TestComp > div:nth-child(0)[#a=]']
]);
});
it('should parse variables via var-... and not report them as attributes', () => {
expect(humanizeTemplateAsts(parse('<div var-a>', [])))
.toEqual([[ElementAst, 'div'], [VariableAst, 'a', '']]);
.toEqual([
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[VariableAst, 'a', '', 'TestComp > div:nth-child(0)[var-a=]']
]);
});
it('should camel case variables', () => {
expect(humanizeTemplateAsts(parse('<div var-some-a>', [])))
.toEqual([[ElementAst, 'div'], [VariableAst, 'someA', '']]);
.toEqual([
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[VariableAst, 'someA', '', 'TestComp > div:nth-child(0)[var-some-a=]']
]);
});
it('should assign variables with empty value to the element', () => {
expect(humanizeTemplateAsts(parse('<div #a></div>', [])))
.toEqual([[ElementAst, 'div'], [VariableAst, 'a', '']]);
.toEqual([
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[VariableAst, 'a', '', 'TestComp > div:nth-child(0)[#a=]']
]);
});
it('should assign variables to directives via exportAs', () => {
@ -370,22 +527,25 @@ export function main() {
{selector: '[a]', type: new CompileTypeMetadata({name: 'DirA'}), exportAs: 'dirA'});
expect(humanizeTemplateAsts(parse('<div a #a="dirA"></div>', [dirA])))
.toEqual([
[ElementAst, 'div'],
[AttrAst, 'a', ''],
[DirectiveAst, dirA],
[VariableAst, 'a', 'dirA']
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[AttrAst, 'a', '', 'TestComp > div:nth-child(0)[a=]'],
[DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
[VariableAst, 'a', 'dirA', 'TestComp > div:nth-child(0)[#a=dirA]']
]);
});
it('should report variables with values that dont match a directive as errors', () => {
expect(() => parse('<div #a="dirA"></div>', [])).toThrowError(`Template parse errors:
There is no directive with "exportAs" set to "dirA" (<div #a="dirA">): TestComp@0:5`);
There is no directive with "exportAs" set to "dirA" at TestComp > div:nth-child(0)[#a=dirA]`);
});
it('should allow variables with values that dont match a directive on embedded template elements',
() => {
expect(humanizeTemplateAsts(parse('<template #a="b"></template>', [])))
.toEqual([[EmbeddedTemplateAst], [VariableAst, 'a', 'b']]);
.toEqual([
[EmbeddedTemplateAst, 'TestComp > template:nth-child(0)'],
[VariableAst, 'a', 'b', 'TestComp > template:nth-child(0)[#a=b]']
]);
});
it('should assign variables with empty value to components', () => {
@ -398,11 +558,11 @@ There is no directive with "exportAs" set to "dirA" (<div #a="dirA">): TestComp@
});
expect(humanizeTemplateAsts(parse('<div a #a></div>', [dirA])))
.toEqual([
[ElementAst, 'div'],
[AttrAst, 'a', ''],
[VariableAst, 'a', ''],
[DirectiveAst, dirA],
[VariableAst, 'a', '']
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[AttrAst, 'a', '', 'TestComp > div:nth-child(0)[a=]'],
[VariableAst, 'a', '', 'TestComp > div:nth-child(0)[#a=]'],
[DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
[VariableAst, 'a', '', 'TestComp > div:nth-child(0)[#a=]']
]);
});
@ -411,34 +571,50 @@ There is no directive with "exportAs" set to "dirA" (<div #a="dirA">): TestComp@
describe('explicit templates', () => {
it('should create embedded templates for <template> elements', () => {
expect(humanizeTemplateAsts(parse('<template></template>', [])))
.toEqual([[EmbeddedTemplateAst]]);
.toEqual([[EmbeddedTemplateAst, 'TestComp > template:nth-child(0)']]);
});
});
describe('inline templates', () => {
it('should wrap the element into an EmbeddedTemplateAST', () => {
expect(humanizeTemplateAsts(parse('<div template>', [])))
.toEqual([[EmbeddedTemplateAst], [ElementAst, 'div']]);
.toEqual([
[EmbeddedTemplateAst, 'TestComp > div:nth-child(0)'],
[ElementAst, 'div', 'TestComp > div:nth-child(0)']
]);
});
it('should parse bound properties', () => {
expect(humanizeTemplateAsts(parse('<div template="ngIf test">', [ngIf])))
.toEqual([
[EmbeddedTemplateAst],
[DirectiveAst, ngIf],
[BoundDirectivePropertyAst, 'ngIf', 'test'],
[ElementAst, 'div']
[EmbeddedTemplateAst, 'TestComp > div:nth-child(0)'],
[DirectiveAst, ngIf, 'TestComp > div:nth-child(0)'],
[
BoundDirectivePropertyAst,
'ngIf',
'test',
'TestComp > div:nth-child(0)[template=ngIf test]'
],
[ElementAst, 'div', 'TestComp > div:nth-child(0)']
]);
});
it('should parse variables via #...', () => {
expect(humanizeTemplateAsts(parse('<div template="ngIf #a=b">', [])))
.toEqual([[EmbeddedTemplateAst], [VariableAst, 'a', 'b'], [ElementAst, 'div']]);
.toEqual([
[EmbeddedTemplateAst, 'TestComp > div:nth-child(0)'],
[VariableAst, 'a', 'b', 'TestComp > div:nth-child(0)[template=ngIf #a=b]'],
[ElementAst, 'div', 'TestComp > div:nth-child(0)']
]);
});
it('should parse variables via var ...', () => {
expect(humanizeTemplateAsts(parse('<div template="ngIf var a=b">', [])))
.toEqual([[EmbeddedTemplateAst], [VariableAst, 'a', 'b'], [ElementAst, 'div']]);
.toEqual([
[EmbeddedTemplateAst, 'TestComp > div:nth-child(0)'],
[VariableAst, 'a', 'b', 'TestComp > div:nth-child(0)[template=ngIf var a=b]'],
[ElementAst, 'div', 'TestComp > div:nth-child(0)']
]);
});
describe('directives', () => {
@ -449,12 +625,17 @@ There is no directive with "exportAs" set to "dirA" (<div #a="dirA">): TestComp@
{selector: '[b]', type: new CompileTypeMetadata({name: 'DirB'})});
expect(humanizeTemplateAsts(parse('<div template="a b" b>', [dirA, dirB])))
.toEqual([
[EmbeddedTemplateAst],
[DirectiveAst, dirA],
[BoundDirectivePropertyAst, 'a', 'b'],
[ElementAst, 'div'],
[AttrAst, 'b', ''],
[DirectiveAst, dirB]
[EmbeddedTemplateAst, 'TestComp > div:nth-child(0)'],
[DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
[
BoundDirectivePropertyAst,
'a',
'b',
'TestComp > div:nth-child(0)[template=a b]'
],
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[AttrAst, 'b', '', 'TestComp > div:nth-child(0)[b=]'],
[DirectiveAst, dirB, 'TestComp > div:nth-child(0)']
]);
});
@ -465,12 +646,12 @@ There is no directive with "exportAs" set to "dirA" (<div #a="dirA">): TestComp@
{selector: '[b]', type: new CompileTypeMetadata({name: 'DirB'})});
expect(humanizeTemplateAsts(parse('<div template="#a=b" b>', [dirA, dirB])))
.toEqual([
[EmbeddedTemplateAst],
[VariableAst, 'a', 'b'],
[DirectiveAst, dirA],
[ElementAst, 'div'],
[AttrAst, 'b', ''],
[DirectiveAst, dirB]
[EmbeddedTemplateAst, 'TestComp > div:nth-child(0)'],
[VariableAst, 'a', 'b', 'TestComp > div:nth-child(0)[template=#a=b]'],
[DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[AttrAst, 'b', '', 'TestComp > div:nth-child(0)[b=]'],
[DirectiveAst, dirB, 'TestComp > div:nth-child(0)']
]);
});
@ -479,23 +660,30 @@ There is no directive with "exportAs" set to "dirA" (<div #a="dirA">): TestComp@
it('should work with *... and use the attribute name as property binding name', () => {
expect(humanizeTemplateAsts(parse('<div *ng-if="test">', [ngIf])))
.toEqual([
[EmbeddedTemplateAst],
[DirectiveAst, ngIf],
[BoundDirectivePropertyAst, 'ngIf', 'test'],
[ElementAst, 'div']
[EmbeddedTemplateAst, 'TestComp > div:nth-child(0)'],
[DirectiveAst, ngIf, 'TestComp > div:nth-child(0)'],
[
BoundDirectivePropertyAst,
'ngIf',
'test',
'TestComp > div:nth-child(0)[*ng-if=test]'
],
[ElementAst, 'div', 'TestComp > div:nth-child(0)']
]);
});
it('should work with *... and empty value', () => {
expect(humanizeTemplateAsts(parse('<div *ng-if>', [ngIf])))
.toEqual([
[EmbeddedTemplateAst],
[DirectiveAst, ngIf],
[BoundDirectivePropertyAst, 'ngIf', 'null'],
[ElementAst, 'div']
[EmbeddedTemplateAst, 'TestComp > div:nth-child(0)'],
[DirectiveAst, ngIf, 'TestComp > div:nth-child(0)'],
[BoundDirectivePropertyAst, 'ngIf', 'null', 'TestComp > div:nth-child(0)[*ng-if=]'],
[ElementAst, 'div', 'TestComp > div:nth-child(0)']
]);
});
});
});
describe('content projection', () => {
@ -600,14 +788,14 @@ There is no directive with "exportAs" set to "dirA" (<div #a="dirA">): TestComp@
});
describe('error cases', () => {
it('should report invalid property names', () => {
it('should throw on invalid property names', () => {
expect(() => parse('<div [invalid-prop]></div>', [])).toThrowError(`Template parse errors:
Can't bind to 'invalidProp' since it isn't a known native property (<div [invalid-prop]>): TestComp@0:5`);
Can't bind to 'invalidProp' since it isn't a known native property in TestComp > div:nth-child(0)[[invalid-prop]=]`);
});
it('should report errors in expressions', () => {
expect(() => parse('<div [prop]="a b"></div>', [])).toThrowErrorWith(`Template parse errors:
Parser Error: Unexpected token 'b' at column 3 in [a b] in TestComp@0:5 in [prop]="a b": TestComp@0:5`);
Parser Error: Unexpected token 'b' at column 3 in [a b] in TestComp > div:nth-child(0)[[prop]=a b]`);
});
it('should not throw on invalid property names if the property is used by a directive',
@ -633,8 +821,8 @@ Parser Error: Unexpected token 'b' at column 3 in [a b] in TestComp@0:5 in [prop
type: new CompileTypeMetadata({name: 'DirB'}),
template: new CompileTemplateMetadata({ngContentSelectors: []})
});
expect(() => parse('<div/>', [dirB, dirA])).toThrowError(`Template parse errors:
More than one component: DirB,DirA in <div/>: TestComp@0:0`);
expect(() => parse('<div>', [dirB, dirA])).toThrowError(`Template parse errors:
More than one component: DirB,DirA in TestComp > div:nth-child(0)`);
});
it('should not allow components or element bindings nor dom events on explicit embedded templates',
@ -659,20 +847,23 @@ Property binding a not used by any directive on an embedded template in TestComp
type: new CompileTypeMetadata({name: 'DirA'}),
template: new CompileTemplateMetadata({ngContentSelectors: []})
});
expect(() => parse('<div *a="b"></div>', [dirA])).toThrowError(`Template parse errors:
Components on an embedded template: DirA in <div *a="b">: TestComp@0:0
Property binding a not used by any directive on an embedded template in <div *a="b">: TestComp@0:0`);
expect(() => parse('<div *a="b">', [dirA])).toThrowError(`Template parse errors:
Components on an embedded template: DirA in TestComp > div:nth-child(0)
Property binding a not used by any directive on an embedded template in TestComp > div:nth-child(0)[*a=b]`);
});
});
describe('ignore elements', () => {
it('should ignore <script> elements', () => {
expect(humanizeTemplateAsts(parse('<script></script>a', []))).toEqual([[TextAst, 'a']]);
it('should ignore <script> elements but include them for source info', () => {
expect(humanizeTemplateAsts(parse('<script></script>a', [])))
.toEqual([[TextAst, 'a', 'TestComp > #text(a):nth-child(1)']]);
});
it('should ignore <style> elements', () => {
expect(humanizeTemplateAsts(parse('<style></style>a', []))).toEqual([[TextAst, 'a']]);
it('should ignore <style> elements but include them for source info', () => {
expect(humanizeTemplateAsts(parse('<style></style>a', [])))
.toEqual([[TextAst, 'a', 'TestComp > #text(a):nth-child(1)']]);
});
describe('<link rel="stylesheet">', () => {
@ -682,73 +873,108 @@ Property binding a not used by any directive on an embedded template in <div *a=
expect(humanizeTemplateAsts(
parse('<link rel="stylesheet" href="http://someurl"></link>a', [])))
.toEqual([
[ElementAst, 'link'],
[AttrAst, 'href', 'http://someurl'],
[AttrAst, 'rel', 'stylesheet'],
[TextAst, 'a']
[ElementAst, 'link', 'TestComp > link:nth-child(0)'],
[
AttrAst,
'href',
'http://someurl',
'TestComp > link:nth-child(0)[href=http://someurl]'
],
[AttrAst, 'rel', 'stylesheet', 'TestComp > link:nth-child(0)[rel=stylesheet]'],
[TextAst, 'a', 'TestComp > #text(a):nth-child(1)']
]);
});
it('should keep <link rel="stylesheet"> elements if they have no uri', () => {
expect(humanizeTemplateAsts(parse('<link rel="stylesheet"></link>a', [])))
.toEqual([[ElementAst, 'link'], [AttrAst, 'rel', 'stylesheet'], [TextAst, 'a']]);
.toEqual([
[ElementAst, 'link', 'TestComp > link:nth-child(0)'],
[AttrAst, 'rel', 'stylesheet', 'TestComp > link:nth-child(0)[rel=stylesheet]'],
[TextAst, 'a', 'TestComp > #text(a):nth-child(1)']
]);
});
it('should ignore <link rel="stylesheet"> elements if they have a relative uri', () => {
expect(
humanizeTemplateAsts(parse('<link rel="stylesheet" href="./other.css"></link>a', [])))
.toEqual([[TextAst, 'a']]);
.toEqual([[TextAst, 'a', 'TestComp > #text(a):nth-child(1)']]);
});
it('should ignore <link rel="stylesheet"> elements if they have a package: uri', () => {
expect(humanizeTemplateAsts(
parse('<link rel="stylesheet" href="package:somePackage"></link>a', [])))
.toEqual([[TextAst, 'a']]);
.toEqual([[TextAst, 'a', 'TestComp > #text(a):nth-child(1)']]);
});
});
it('should ignore bindings on children of elements with ng-non-bindable', () => {
expect(humanizeTemplateAsts(parse('<div ng-non-bindable>{{b}}</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, '{{b}}']]);
.toEqual([
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[AttrAst, 'ng-non-bindable', '', 'TestComp > div:nth-child(0)[ng-non-bindable=]'],
[TextAst, '{{b}}', 'TestComp > div:nth-child(0) > #text({{b}}):nth-child(0)']
]);
});
it('should keep nested children of elements with ng-non-bindable', () => {
expect(humanizeTemplateAsts(parse('<div ng-non-bindable><span>{{b}}</span></div>', [])))
.toEqual([
[ElementAst, 'div'],
[AttrAst, 'ng-non-bindable', ''],
[ElementAst, 'span'],
[TextAst, '{{b}}']
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[AttrAst, 'ng-non-bindable', '', 'TestComp > div:nth-child(0)[ng-non-bindable=]'],
[ElementAst, 'span', 'TestComp > div:nth-child(0) > span:nth-child(0)'],
[
TextAst,
'{{b}}',
'TestComp > div:nth-child(0) > span:nth-child(0) > #text({{b}}):nth-child(0)'
]
]);
});
it('should ignore <script> elements inside of elements with ng-non-bindable', () => {
expect(humanizeTemplateAsts(parse('<div ng-non-bindable><script></script>a</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, 'a']]);
});
it('should ignore <script> elements inside of elements with ng-non-bindable but include them for source info',
() => {
expect(humanizeTemplateAsts(parse('<div ng-non-bindable><script></script>a</div>', [])))
.toEqual([
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[AttrAst, 'ng-non-bindable', '', 'TestComp > div:nth-child(0)[ng-non-bindable=]'],
[TextAst, 'a', 'TestComp > div:nth-child(0) > #text(a):nth-child(1)']
]);
});
it('should ignore <style> elements inside of elements with ng-non-bindable', () => {
expect(humanizeTemplateAsts(parse('<div ng-non-bindable><style></style>a</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, 'a']]);
});
it('should ignore <style> elements inside of elements with ng-non-bindable but include them for source info',
() => {
expect(humanizeTemplateAsts(parse('<div ng-non-bindable><style></style>a</div>', [])))
.toEqual([
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[AttrAst, 'ng-non-bindable', '', 'TestComp > div:nth-child(0)[ng-non-bindable=]'],
[TextAst, 'a', 'TestComp > div:nth-child(0) > #text(a):nth-child(1)']
]);
});
it('should ignore <link rel="stylesheet"> elements inside of elements with ng-non-bindable',
it('should ignore <link rel="stylesheet"> elements inside of elements with ng-non-bindable but include them for source info',
() => {
expect(humanizeTemplateAsts(
parse('<div ng-non-bindable><link rel="stylesheet"></link>a</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, 'a']]);
.toEqual([
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[AttrAst, 'ng-non-bindable', '', 'TestComp > div:nth-child(0)[ng-non-bindable=]'],
[TextAst, 'a', 'TestComp > div:nth-child(0) > #text(a):nth-child(1)']
]);
});
it('should convert <ng-content> elements into regular elements inside of elements with ng-non-bindable',
it('should convert <ng-content> elements into regular elements inside of elements with ng-non-bindable but include them for source info',
() => {
expect(humanizeTemplateAsts(
parse('<div ng-non-bindable><ng-content></ng-content>a</div>', [])))
.toEqual([
[ElementAst, 'div'],
[AttrAst, 'ng-non-bindable', ''],
[ElementAst, 'ng-content'],
[TextAst, 'a']
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
[AttrAst, 'ng-non-bindable', '', 'TestComp > div:nth-child(0)[ng-non-bindable=]'],
[
ElementAst,
'ng-content',
'TestComp > div:nth-child(0) > ng-content:nth-child(0)'
],
[TextAst, 'a', 'TestComp > div:nth-child(0) > #text(a):nth-child(1)']
]);
});
@ -765,11 +991,11 @@ export function humanizeTemplateAsts(templateAsts: TemplateAst[]): any[] {
class TemplateHumanizer implements TemplateAstVisitor {
result: any[] = [];
visitNgContent(ast: NgContentAst, context: any): any {
this.result.push([NgContentAst]);
this.result.push([NgContentAst, ast.sourceInfo]);
return null;
}
visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {
this.result.push([EmbeddedTemplateAst]);
this.result.push([EmbeddedTemplateAst, ast.sourceInfo]);
templateVisitAll(this, ast.attrs);
templateVisitAll(this, ast.outputs);
templateVisitAll(this, ast.vars);
@ -778,7 +1004,7 @@ class TemplateHumanizer implements TemplateAstVisitor {
return null;
}
visitElement(ast: ElementAst, context: any): any {
this.result.push([ElementAst, ast.name]);
this.result.push([ElementAst, ast.name, ast.sourceInfo]);
templateVisitAll(this, ast.attrs);
templateVisitAll(this, ast.inputs);
templateVisitAll(this, ast.outputs);
@ -788,12 +1014,17 @@ class TemplateHumanizer implements TemplateAstVisitor {
return null;
}
visitVariable(ast: VariableAst, context: any): any {
this.result.push([VariableAst, ast.name, ast.value]);
this.result.push([VariableAst, ast.name, ast.value, ast.sourceInfo]);
return null;
}
visitEvent(ast: BoundEventAst, context: any): any {
this.result.push(
[BoundEventAst, ast.name, ast.target, expressionUnparser.unparse(ast.handler)]);
this.result.push([
BoundEventAst,
ast.name,
ast.target,
expressionUnparser.unparse(ast.handler),
ast.sourceInfo
]);
return null;
}
visitElementProperty(ast: BoundElementPropertyAst, context: any): any {
@ -802,24 +1033,25 @@ class TemplateHumanizer implements TemplateAstVisitor {
ast.type,
ast.name,
expressionUnparser.unparse(ast.value),
ast.unit
ast.unit,
ast.sourceInfo
]);
return null;
}
visitAttr(ast: AttrAst, context: any): any {
this.result.push([AttrAst, ast.name, ast.value]);
this.result.push([AttrAst, ast.name, ast.value, ast.sourceInfo]);
return null;
}
visitBoundText(ast: BoundTextAst, context: any): any {
this.result.push([BoundTextAst, expressionUnparser.unparse(ast.value)]);
this.result.push([BoundTextAst, expressionUnparser.unparse(ast.value), ast.sourceInfo]);
return null;
}
visitText(ast: TextAst, context: any): any {
this.result.push([TextAst, ast.value]);
this.result.push([TextAst, ast.value, ast.sourceInfo]);
return null;
}
visitDirective(ast: DirectiveAst, context: any): any {
this.result.push([DirectiveAst, ast.directive]);
this.result.push([DirectiveAst, ast.directive, ast.sourceInfo]);
templateVisitAll(this, ast.inputs);
templateVisitAll(this, ast.hostProperties);
templateVisitAll(this, ast.hostEvents);
@ -827,16 +1059,16 @@ class TemplateHumanizer implements TemplateAstVisitor {
return null;
}
visitDirectiveProperty(ast: BoundDirectivePropertyAst, context: any): any {
this.result.push(
[BoundDirectivePropertyAst, ast.directiveName, expressionUnparser.unparse(ast.value)]);
this.result.push([
BoundDirectivePropertyAst,
ast.directiveName,
expressionUnparser.unparse(ast.value),
ast.sourceInfo
]);
return null;
}
}
function sourceInfo(ast: TemplateAst): string {
return `${ast.sourceSpan}: ${ast.sourceSpan.start}`;
}
function humanizeContentProjection(templateAsts: TemplateAst[]): any[] {
var humanizer = new TemplateContentProjectionHumanizer();
templateVisitAll(humanizer, templateAsts);