cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(compiler): allow to serialize and deserialize DirectiveMetadata

Browse Source
This commit is contained in:
Tobias Bosch
2015-09-11 13:35:46 -07:00
parent 67c79ba3f6
commit 71cbb49672
10 changed files with 443 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
modules/angular2/test/compiler/api_spec.ts Normal file
View File

@ -0,0 +1,108 @@
import {
AsyncTestCompleter,
beforeEach,
ddescribe,
describe,
el,
expect,
iit,
inject,
it,
xit,
TestComponentBuilder
} from 'angular2/test_lib';
import {
DirectiveMetadata,
TypeMetadata,
TemplateMetadata,
ChangeDetectionMetadata
} from 'angular2/src/compiler/api';
import {ViewEncapsulation} from 'angular2/src/core/render/api';
import {ChangeDetectionStrategy} from 'angular2/src/core/change_detection';
export function main() {
describe('Compiler api', () => {
var fullTypeMeta: TypeMetadata;
var fullTemplateMeta: TemplateMetadata;
var fullChangeDetectionMeta: ChangeDetectionMetadata;
var fullDirectiveMeta: DirectiveMetadata;
beforeEach(() => {
fullTypeMeta = new TypeMetadata({id: 23, typeName: 'SomeType', typeUrl: 'someUrl'});
fullTemplateMeta = new TemplateMetadata({
encapsulation: ViewEncapsulation.Emulated,
template: '<a></a>',
styles: ['someStyle'],
styleAbsUrls: ['someStyleUrl'],
ngContentSelectors: ['*']
});
fullChangeDetectionMeta = new ChangeDetectionMetadata({
changeDetection: ChangeDetectionStrategy.Default,
properties: ['someProp'],
events: ['someEvent'],
hostListeners: {'event1': 'handler1'},
hostProperties: {'prop1': 'expr1'},
callAfterContentInit: true,
callAfterContentChecked: true,
callAfterViewInit: true,
callAfterViewChecked: true,
callOnChanges: true,
callDoCheck: true,
callOnInit: true
});
fullDirectiveMeta = new DirectiveMetadata({
selector: 'someSelector',
isComponent: true,
hostAttributes: {'attr1': 'attrValue2'},
type: fullTypeMeta, template: fullTemplateMeta,
changeDetection: fullChangeDetectionMeta,
});
});
describe('DirectiveMetadata', () => {
it('should serialize with full data', () => {
expect(DirectiveMetadata.fromJson(fullDirectiveMeta.toJson())).toEqual(fullDirectiveMeta);
});
it('should serialize with no data', () => {
var empty = new DirectiveMetadata();
expect(DirectiveMetadata.fromJson(empty.toJson())).toEqual(empty);
});
});
describe('TypeMetadata', () => {
it('should serialize with full data',
() => { expect(TypeMetadata.fromJson(fullTypeMeta.toJson())).toEqual(fullTypeMeta); });
it('should serialize with no data', () => {
var empty = new TypeMetadata();
expect(TypeMetadata.fromJson(empty.toJson())).toEqual(empty);
});
});
describe('TemplateMetadata', () => {
it('should serialize with full data', () => {
expect(TemplateMetadata.fromJson(fullTemplateMeta.toJson())).toEqual(fullTemplateMeta);
});
it('should serialize with no data', () => {
var empty = new TemplateMetadata();
expect(TemplateMetadata.fromJson(empty.toJson())).toEqual(empty);
});
});
describe('ChangeDetectionMetadata', () => {
it('should serialize with full data', () => {
expect(ChangeDetectionMetadata.fromJson(fullChangeDetectionMeta.toJson()))
.toEqual(fullChangeDetectionMeta);
});
it('should serialize with no data', () => {
var empty = new ChangeDetectionMetadata();
expect(ChangeDetectionMetadata.fromJson(empty.toJson())).toEqual(empty);
});
});
});
}

165
modules/angular2/test/compiler/html_parser_spec.ts
View File

@ -15,89 +15,114 @@ export function main() {
var parser: HtmlParser;
beforeEach(() => { parser = new HtmlParser(); });
describe('text nodes', () => {
it('should parse root level text nodes', () => {
expect(humanizeDom(parser.parse('a', 'TestComp')))
.toEqual([[HtmlTextAst, 'a', 'TestComp > #text(a):nth-child(0)']]);
describe('parse', () => {
describe('text nodes', () => {
it('should parse root level text nodes', () => {
expect(humanizeDom(parser.parse('a', 'TestComp')))
.toEqual([[HtmlTextAst, 'a', 'TestComp > #text(a):nth-child(0)']]);
});
it('should parse text nodes inside regular elements', () => {
expect(humanizeDom(parser.parse('<div>a</div>', 'TestComp')))
.toEqual([
[HtmlElementAst, 'div', 'TestComp > div:nth-child(0)'],
[HtmlTextAst, 'a', 'TestComp > div:nth-child(0) > #text(a):nth-child(0)']
]);
});
it('should parse text nodes inside template elements', () => {
expect(humanizeDom(parser.parse('<template>a</template>', 'TestComp')))
.toEqual([
[HtmlElementAst, 'template', 'TestComp > template:nth-child(0)'],
[HtmlTextAst, 'a', 'TestComp > template:nth-child(0) > #text(a):nth-child(0)']
]);
});
});
it('should parse text nodes inside regular elements', () => {
expect(humanizeDom(parser.parse('<div>a</div>', 'TestComp')))
.toEqual([
[HtmlElementAst, 'div', 'TestComp > div:nth-child(0)'],
[HtmlTextAst, 'a', 'TestComp > div:nth-child(0) > #text(a):nth-child(0)']
]);
describe('elements', () => {
it('should parse root level elements', () => {
expect(humanizeDom(parser.parse('<div></div>', 'TestComp')))
.toEqual([[HtmlElementAst, 'div', 'TestComp > div:nth-child(0)']]);
});
it('should parse elements inside of regular elements', () => {
expect(humanizeDom(parser.parse('<div><span></span></div>', 'TestComp')))
.toEqual([
[HtmlElementAst, 'div', 'TestComp > div:nth-child(0)'],
[HtmlElementAst, 'span', 'TestComp > div:nth-child(0) > span:nth-child(0)']
]);
});
it('should parse elements inside of template elements', () => {
expect(humanizeDom(parser.parse('<template><span></span></template>', 'TestComp')))
.toEqual([
[HtmlElementAst, 'template', 'TestComp > template:nth-child(0)'],
[HtmlElementAst, 'span', 'TestComp > template:nth-child(0) > span:nth-child(0)']
]);
});
});
it('should parse text nodes inside template elements', () => {
expect(humanizeDom(parser.parse('<template>a</template>', 'TestComp')))
.toEqual([
[HtmlElementAst, 'template', 'TestComp > template:nth-child(0)'],
[HtmlTextAst, 'a', 'TestComp > template:nth-child(0) > #text(a):nth-child(0)']
]);
describe('attributes', () => {
it('should parse attributes on regular elements', () => {
expect(humanizeDom(parser.parse('<div k="v"></div>', 'TestComp')))
.toEqual([
[HtmlElementAst, 'div', 'TestComp > div:nth-child(0)'],
[HtmlAttrAst, 'k', 'v', 'TestComp > div:nth-child(0)[k=v]']
]);
});
it('should parse attributes on template elements', () => {
expect(humanizeDom(parser.parse('<template k="v"></template>', 'TestComp')))
.toEqual([
[HtmlElementAst, 'template', 'TestComp > template:nth-child(0)'],
[HtmlAttrAst, 'k', 'v', 'TestComp > template:nth-child(0)[k=v]']
]);
});
});
describe('ng-non-bindable', () => {
it('should ignore text nodes and elements inside of elements with ng-non-bindable', () => {
expect(humanizeDom(
parser.parse('<div ng-non-bindable>hello<span></span></div>', 'TestComp')))
.toEqual([
[HtmlElementAst, 'div', 'TestComp > div:nth-child(0)'],
[
HtmlAttrAst,
'ng-non-bindable',
'',
'TestComp > div:nth-child(0)[ng-non-bindable=]'
]
]);
});
});
});
describe('elements', () => {
it('should parse root level elements', () => {
expect(humanizeDom(parser.parse('<div></div>', 'TestComp')))
.toEqual([[HtmlElementAst, 'div', 'TestComp > div:nth-child(0)']]);
describe('unparse', () => {
it('should unparse text nodes',
() => { expect(parser.unparse(parser.parse('a', null))).toEqual('a'); });
it('should unparse elements',
() => { expect(parser.unparse(parser.parse('<a></a>', null))).toEqual('<a></a>'); });
it('should unparse attributes', () => {
expect(parser.unparse(parser.parse('<div a b="c"></div>', null)))
.toEqual('<div a="" b="c"></div>');
});
it('should parse elements inside of regular elements', () => {
expect(humanizeDom(parser.parse('<div><span></span></div>', 'TestComp')))
.toEqual([
[HtmlElementAst, 'div', 'TestComp > div:nth-child(0)'],
[HtmlElementAst, 'span', 'TestComp > div:nth-child(0) > span:nth-child(0)']
]);
it('should unparse nested elements', () => {
expect(parser.unparse(parser.parse('<div><a></a></div>', null)))
.toEqual('<div><a></a></div>');
});
it('should parse elements inside of template elements', () => {
expect(humanizeDom(parser.parse('<template><span></span></template>', 'TestComp')))
.toEqual([
[HtmlElementAst, 'template', 'TestComp > template:nth-child(0)'],
[HtmlElementAst, 'span', 'TestComp > template:nth-child(0) > span:nth-child(0)']
]);
});
});
describe('attributes', () => {
it('should parse attributes on regular elements', () => {
expect(humanizeDom(parser.parse('<div k="v"></div>', 'TestComp')))
.toEqual([
[HtmlElementAst, 'div', 'TestComp > div:nth-child(0)'],
[HtmlAttrAst, 'k', 'v', 'TestComp > div:nth-child(0)[k=v]']
]);
});
it('should parse attributes on template elements', () => {
expect(humanizeDom(parser.parse('<template k="v"></template>', 'TestComp')))
.toEqual([
[HtmlElementAst, 'template', 'TestComp > template:nth-child(0)'],
[HtmlAttrAst, 'k', 'v', 'TestComp > template:nth-child(0)[k=v]']
]);
});
});
describe('ng-non-bindable', () => {
it('should ignore text nodes and elements inside of elements with ng-non-bindable', () => {
expect(
humanizeDom(parser.parse('<div ng-non-bindable>hello<span></span></div>', 'TestComp')))
.toEqual([
[HtmlElementAst, 'div', 'TestComp > div:nth-child(0)'],
[
HtmlAttrAst,
'ng-non-bindable',
'',
'TestComp > div:nth-child(0)[ng-non-bindable=]'
]
]);
it('should unparse nested text nodes', () => {
expect(parser.unparse(parser.parse('<div>a</div>', null))).toEqual('<div>a</div>');
});
});
});
}
export function humanizeDom(asts: HtmlAst[]): any[] {
function humanizeDom(asts: HtmlAst[]): any[] {
var humanizer = new Humanizer();
htmlVisitAll(humanizer, asts);
return humanizer.result;
@ -105,17 +130,17 @@ export function humanizeDom(asts: HtmlAst[]): any[] {
class Humanizer implements HtmlAstVisitor {
result: any[] = [];
visitElement(ast: HtmlElementAst): any {
visitElement(ast: HtmlElementAst, context: any): any {
this.result.push([HtmlElementAst, ast.name, ast.sourceInfo]);
htmlVisitAll(this, ast.attrs);
htmlVisitAll(this, ast.children);
return null;
}
visitAttr(ast: HtmlAttrAst): any {
visitAttr(ast: HtmlAttrAst, context: any): any {
this.result.push([HtmlAttrAst, ast.name, ast.value, ast.sourceInfo]);
return null;
}
visitText(ast: HtmlTextAst): any {
visitText(ast: HtmlTextAst, context: any): any {
this.result.push([HtmlTextAst, ast.value, ast.sourceInfo]);
return null;
}

67
modules/angular2/test/compiler/template_loader_spec.ts
View File

@ -13,12 +13,11 @@ import {
} from 'angular2/test_lib';
import {HtmlParser} from 'angular2/src/compiler/html_parser';
import {TypeMetadata, ViewEncapsulation, TemplateMetadata} from 'angular2/src/compiler/api';
import {TypeMetadata, TemplateMetadata} from 'angular2/src/compiler/api';
import {ViewEncapsulation} from 'angular2/src/core/render/api';
import {TemplateLoader} from 'angular2/src/compiler/template_loader';
import {UrlResolver} from 'angular2/src/core/services/url_resolver';
import {humanizeDom} from './html_parser_spec';
import {HtmlTextAst, HtmlElementAst, HtmlAttrAst} from 'angular2/src/compiler/html_ast';
import {XHR} from 'angular2/src/core/render/xhr';
import {MockXHR} from 'angular2/src/core/render/xhr_mock';
@ -27,21 +26,22 @@ export function main() {
var loader: TemplateLoader;
var dirType: TypeMetadata;
var xhr: MockXHR;
var htmlParser: HtmlParser;
beforeEach(inject([XHR], (mockXhr) => {
xhr = mockXhr;
var urlResolver = new UrlResolver();
loader = new TemplateLoader(xhr, urlResolver, new HtmlParser());
htmlParser = new HtmlParser();
loader = new TemplateLoader(xhr, new UrlResolver(), htmlParser);
dirType = new TypeMetadata({typeUrl: 'http://sometypeurl', typeName: 'SomeComp'});
}));
describe('loadTemplate', () => {
describe('inline template', () => {
it('should parse the template', inject([AsyncTestCompleter], (async) => {
it('should store the template', inject([AsyncTestCompleter], (async) => {
loader.loadTemplate(dirType, null, 'a', null, [], ['test.css'])
.then((template: TemplateMetadata) => {
expect(humanizeDom(template.nodes))
.toEqual([[HtmlTextAst, 'a', 'SomeComp > #text(a):nth-child(0)']])
async.done();
expect(template.template).toEqual('a');
async.done();
});
}));
@ -61,9 +61,8 @@ export function main() {
xhr.expect('http://sometypeurl/sometplurl', 'a');
loader.loadTemplate(dirType, null, null, 'sometplurl', [], ['test.css'])
.then((template: TemplateMetadata) => {
expect(humanizeDom(template.nodes))
.toEqual([[HtmlTextAst, 'a', 'SomeComp > #text(a):nth-child(0)']])
async.done();
expect(template.template).toEqual('a');
async.done();
});
xhr.flush();
}));
@ -91,44 +90,46 @@ export function main() {
expect(template.encapsulation).toBe(viewEncapsulation);
});
it('should parse the template as html', () => {
it('should keep the template as html', () => {
var template =
loader.createTemplateFromString(dirType, null, 'a', 'http://someurl/', [], []);
expect(humanizeDom(template.nodes))
.toEqual([[HtmlTextAst, 'a', 'SomeComp > #text(a):nth-child(0)']])
expect(template.template).toEqual('a')
});
it('should collect and keep ngContent', () => {
var template = loader.createTemplateFromString(dirType, null, '<ng-content select="a">',
'http://someurl/', [], []);
var template = loader.createTemplateFromString(
dirType, null, '<ng-content select="a"></ng-content>', 'http://someurl/', [], []);
expect(template.ngContentSelectors).toEqual(['a']);
expect(humanizeDom(template.nodes))
.toEqual([
[HtmlElementAst, 'ng-content', 'SomeComp > ng-content:nth-child(0)'],
[HtmlAttrAst, 'select', 'a', 'SomeComp > ng-content:nth-child(0)[select=a]']
])
expect(template.template).toEqual('<ng-content select="a"></ng-content>');
});
it('should normalize ngContent wildcard selector', () => {
var template = loader.createTemplateFromString(
dirType, null,
'<ng-content></ng-content><ng-content select></ng-content><ng-content select="*"></ng-content>',
'http://someurl/', [], []);
expect(template.ngContentSelectors).toEqual(['*', '*', '*']);
});
it('should collect and remove top level styles in the template', () => {
var template = loader.createTemplateFromString(dirType, null, '<style>a</style>',
'http://someurl/', [], []);
expect(template.styles).toEqual(['a']);
expect(template.nodes).toEqual([]);
expect(template.template).toEqual('');
});
it('should collect and remove styles inside in elements', () => {
var template = loader.createTemplateFromString(dirType, null, '<div><style>a</style></div>',
'http://someurl/', [], []);
expect(template.styles).toEqual(['a']);
expect(humanizeDom(template.nodes))
.toEqual([[HtmlElementAst, 'div', 'SomeComp > div:nth-child(0)']]);
expect(template.template).toEqual('<div></div>');
});
it('should collect and remove styleUrls in the template', () => {
var template = loader.createTemplateFromString(
dirType, null, '<link rel="stylesheet" href="aUrl">', 'http://someurl/', [], []);
expect(template.styleAbsUrls).toEqual(['http://someurl/aUrl']);
expect(template.nodes).toEqual([]);
expect(template.template).toEqual('');
});
it('should collect and remove styleUrls in elements', () => {
@ -136,20 +137,14 @@ export function main() {
dirType, null, '<div><link rel="stylesheet" href="aUrl"></div>', 'http://someurl/', [],
[]);
expect(template.styleAbsUrls).toEqual(['http://someurl/aUrl']);
expect(humanizeDom(template.nodes))
.toEqual([[HtmlElementAst, 'div', 'SomeComp > div:nth-child(0)']]);
expect(template.template).toEqual('<div></div>');
});
it('should keep link elements with non stylesheet rel attribute', () => {
var template = loader.createTemplateFromString(dirType, null, '<link rel="a" href="b">',
'http://someurl/', [], []);
var template = loader.createTemplateFromString(
dirType, null, '<link href="b" rel="a"></link>', 'http://someurl/', [], []);
expect(template.styleAbsUrls).toEqual([]);
expect(humanizeDom(template.nodes))
.toEqual([
[HtmlElementAst, 'link', 'SomeComp > link:nth-child(0)'],
[HtmlAttrAst, 'href', 'b', 'SomeComp > link:nth-child(0)[href=b]'],
[HtmlAttrAst, 'rel', 'a', 'SomeComp > link:nth-child(0)[rel=a]']
]);
expect(template.template).toEqual('<link href="b" rel="a"></link>');
});
it('should extract @import style urls into styleAbsUrl', () => {