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

refactor(compiler): use the new compiler everywhere

Browse Source 
Closes #3605

BREAKING CHANGE:
- we don't mark an element as bound any more if it only contains text bindings
  E.g. <div>{{hello}}</div>
  This changes the indices when using `DebugElement.componentViewChildren` / `DebugElement.children`.
- `@Directive.compileChildren` was removed,
  `ng-non-bindable` is now builtin and not a directive any more
- angular no more adds the `ng-binding` class to elements with bindings
- directives are now ordered as they are listed in the View.directives regarding change detection.
  Previously they had an undefined order.
- the `Renderer` interface has new methods `createProtoView` and `registerComponentTemplate`. See `DomRenderer` for default implementations.
- reprojection with `ng-content` is now all or nothing per `ng-content` element
- angular2 transformer can't be used in tests that modify directive metadata.
  Use `angular2/src/transform/inliner_for_test` transformer instead.
This commit is contained in:
Tobias Bosch
2015-10-01 10:07:49 -07:00
parent 30ca0434a2
commit 76247b7097
124 changed files with 2013 additions and 3451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
modules/angular2/test/compiler/change_definition_factory_spec.ts
View File

@ -33,7 +33,7 @@ import {
} from 'angular2/src/core/change_detection/change_detection';
import {Pipes} from 'angular2/src/core/change_detection/pipes';
import {createChangeDetectorDefinitions} from 'angular2/src/compiler/change_definition_factory';
import {TestContext, TestDirective, TestDispatcher, TestPipes} from './change_detector_mocks';
import {TestDirective, TestDispatcher, TestPipes} from './change_detector_mocks';
import {TEST_BINDINGS} from './test_bindings';
@ -186,3 +186,11 @@ export function main() {
});
});
}
class TestContext {
eventLog: string[] = [];
someProp: string;
someProp2: string;
onEvent(value: string) { this.eventLog.push(value); }
}

23
modules/angular2/test/compiler/change_detector_compiler_spec.ts
View File

@ -14,7 +14,7 @@ import {
} from 'angular2/test_lib';
import {bind} from 'angular2/src/core/di';
import {CONST_EXPR} from 'angular2/src/core/facade/lang';
import {CONST_EXPR, stringify} from 'angular2/src/core/facade/lang';
import {MapWrapper} from 'angular2/src/core/facade/collection';
import {Promise} from 'angular2/src/core/facade/async';
@ -46,12 +46,13 @@ import {
import {evalModule} from './eval_module';
import {TEST_BINDINGS} from './test_bindings';
import {TestContext, TestDispatcher, TestPipes} from './change_detector_mocks';
import {codeGenValueFn, codeGenExportVariable} from 'angular2/src/compiler/util';
import {TestDispatcher, TestPipes} from './change_detector_mocks';
import {codeGenValueFn, codeGenExportVariable, MODULE_SUFFIX} from 'angular2/src/compiler/util';
// Attention: These module names have to correspond to real modules!
const THIS_MODULE = 'angular2/test/compiler/change_detector_compiler_spec';
var THIS_MODULE_REF = moduleRef(THIS_MODULE);
var THIS_MODULE_ID = 'angular2/test/compiler/change_detector_compiler_spec';
var THIS_MODULE_URL = `package:${THIS_MODULE_ID}${MODULE_SUFFIX}`;
var THIS_MODULE_REF = moduleRef(THIS_MODULE_URL);
export function main() {
describe('ChangeDetectorCompiler', () => {
@ -68,7 +69,8 @@ export function main() {
describe('compileComponentRuntime', () => {
function detectChanges(compiler: ChangeDetectionCompiler, template: string,
directives: CompileDirectiveMetadata[] = CONST_EXPR([])): string[] {
var type = new CompileTypeMetadata({name: 'SomeComp'});
var type =
new CompileTypeMetadata({name: stringify(SomeComponent), moduleUrl: THIS_MODULE_URL});
var parsedTemplate = parser.parse(template, directives, 'TestComp');
var factories =
compiler.compileComponentRuntime(type, ChangeDetectionStrategy.Default, parsedTemplate);
@ -105,7 +107,8 @@ export function main() {
function detectChanges(compiler: ChangeDetectionCompiler, template: string,
directives: CompileDirectiveMetadata[] = CONST_EXPR([])):
Promise<string[]> {
var type = new CompileTypeMetadata({name: 'SomeComp'});
var type =
new CompileTypeMetadata({name: stringify(SomeComponent), moduleUrl: THIS_MODULE_URL});
var parsedTemplate = parser.parse(template, directives, 'TestComp');
var sourceExpressions =
compiler.compileComponentCodeGen(type, ChangeDetectionStrategy.Default, parsedTemplate);
@ -138,10 +141,14 @@ function createTestableModule(source: SourceExpressions, changeDetectorIndex: nu
export function testChangeDetector(changeDetectorFactory: Function): string[] {
var dispatcher = new TestDispatcher([], []);
var cd = changeDetectorFactory(dispatcher);
var ctx = new TestContext();
var ctx = new SomeComponent();
ctx.someProp = 'someValue';
var locals = new Locals(null, MapWrapper.createFromStringMap({'someVar': null}));
cd.hydrate(ctx, locals, dispatcher, new TestPipes());
cd.detectChanges();
return dispatcher.log;
}
class SomeComponent {
someProp: string;
}

8
modules/angular2/test/compiler/change_detector_mocks.ts
View File

@ -7,14 +7,6 @@ import {
BindingTarget
} from 'angular2/src/core/change_detection/change_detection';
export class TestContext {
eventLog: string[] = [];
someProp: string;
someProp2: string;
onEvent(value: string) { this.eventLog.push(value); }
}
export class TestDirective {
eventLog: string[] = [];
dirProp: string;

16
modules/angular2/test/compiler/command_compiler_spec.ts
View File

@ -40,7 +40,8 @@ import {evalModule} from './eval_module';
import {
escapeSingleQuoteString,
codeGenValueFn,
codeGenExportVariable
codeGenExportVariable,
MODULE_SUFFIX
} from 'angular2/src/compiler/util';
import {TEST_BINDINGS} from './test_bindings';
@ -53,9 +54,10 @@ const NG_CONTENT = 'NG_CONTENT';
const EMBEDDED_TEMPLATE = 'EMBEDDED_TEMPLATE';
// Attention: These module names have to correspond to real modules!
const THIS_MODULE_NAME = 'angular2/test/compiler/command_compiler_spec';
var THIS_MODULE_REF = moduleRef(THIS_MODULE_NAME);
var TEMPLATE_COMMANDS_MODULE_REF = moduleRef('angular2/src/core/compiler/template_commands');
var THIS_MODULE_URL = `package:angular2/test/compiler/command_compiler_spec${MODULE_SUFFIX}`;
var THIS_MODULE_REF = moduleRef(THIS_MODULE_URL);
var TEMPLATE_COMMANDS_MODULE_REF =
moduleRef(`package:angular2/src/core/compiler/template_commands${MODULE_SUFFIX}`);
// Attention: read by eval!
export class RootComp {}
@ -63,11 +65,11 @@ export class SomeDir {}
export class AComp {}
var RootCompTypeMeta =
new CompileTypeMetadata({name: 'RootComp', runtime: RootComp, moduleId: THIS_MODULE_NAME});
new CompileTypeMetadata({name: 'RootComp', runtime: RootComp, moduleUrl: THIS_MODULE_URL});
var SomeDirTypeMeta =
new CompileTypeMetadata({name: 'SomeDir', runtime: SomeDir, moduleId: THIS_MODULE_NAME});
new CompileTypeMetadata({name: 'SomeDir', runtime: SomeDir, moduleUrl: THIS_MODULE_URL});
var ACompTypeMeta =
new CompileTypeMetadata({name: 'AComp', runtime: AComp, moduleId: THIS_MODULE_NAME});
new CompileTypeMetadata({name: 'AComp', runtime: AComp, moduleUrl: THIS_MODULE_URL});
var compTypeTemplateId: Map<CompileTypeMetadata, number> =
MapWrapper.createFromPairs([[RootCompTypeMeta, 1], [SomeDirTypeMeta, 2], [ACompTypeMeta, 3]]);
const APP_ID = 'app1';

3
modules/angular2/test/compiler/directive_metadata_spec.ts
View File

@ -28,7 +28,8 @@ export function main() {
var fullDirectiveMeta: CompileDirectiveMetadata;
beforeEach(() => {
fullTypeMeta = new CompileTypeMetadata({name: 'SomeType', moduleId: 'someUrl'});
fullTypeMeta =
new CompileTypeMetadata({name: 'SomeType', moduleUrl: 'someUrl', isHost: true});
fullTemplateMeta = new CompileTemplateMetadata({
encapsulation: ViewEncapsulation.Emulated,
template: '<a></a>',

2
modules/angular2/test/compiler/eval_module.dart
View File

@ -11,7 +11,7 @@ createIsolateSource(String moduleSource, List<List<String>> moduleImports) {
moduleImports.forEach((sourceImport) {
String modName = sourceImport[0];
String modAlias = sourceImport[1];
moduleSourceParts.add("import 'package:${modName}.dart' as ${modAlias};");
moduleSourceParts.add("import '${modName}' as ${modAlias};");
});
moduleSourceParts.add(moduleSource);
moduleSourceParts.add("""

17
modules/angular2/test/compiler/eval_module.ts
View File

@ -2,6 +2,7 @@ import {Promise, PromiseWrapper} from 'angular2/src/core/facade/async';
import {isPresent, global, StringWrapper} from 'angular2/src/core/facade/lang';
var evalCounter = 0;
var MODULE_URL_REGEX = /^package:(.*)\.js/;
function nextModuleId() {
return `evalScript${evalCounter++}`;
@ -10,24 +11,30 @@ function nextModuleId() {
export function evalModule(moduleSource: string, imports: string[][], args: any[]): Promise<any> {
var moduleId = nextModuleId();
var moduleSourceWithImports = [];
var importModuleNames = [];
var importModuleIds = [];
imports.forEach(sourceImport => {
var modName = sourceImport[0];
var modUrl = sourceImport[0];
var modMatch = MODULE_URL_REGEX.exec(modUrl);
if (!modMatch) {
throw new Error(`Module url ${modUrl} does not match the pattern ${MODULE_URL_REGEX}`);
}
var modId = modMatch[1];
var modAlias = sourceImport[1];
importModuleNames.push(modName);
importModuleIds.push(modId);
// Note: After transpilation to commonJS and loading this file in a browser
// using SystemJS, the loader might get confused by the presence of require,
// and attempt to load "+ modName +.js" !?!
// A simple string concat manages to prevent that, but that is one compiler
// optimaztion away from breaking again. Proceed with caution!
moduleSourceWithImports.push(`var ${modAlias} = require` + `('${modName}');`);
moduleSourceWithImports.push(`var ${modAlias} = require` + `('${modId}');`);
});
moduleSourceWithImports.push(moduleSource);
var moduleBody = new Function('require', 'exports', 'module', moduleSourceWithImports.join('\n'));
var System = global['System'];
if (isPresent(System) && isPresent(System.registerDynamic)) {
System.registerDynamic(moduleId, importModuleNames, false, moduleBody);
System.registerDynamic(moduleId, importModuleIds, false, moduleBody);
return <Promise<any>>System.import(moduleId).then((module) => module.run(args));
} else {
var exports = {};

4
modules/angular2/test/compiler/eval_module_spec.ts
View File

@ -19,14 +19,14 @@ import {evalModule} from './eval_module';
// when evaling the test module!
export var TEST_VALUE = 23;
const THIS_MODULE = 'angular2/test/compiler/eval_module_spec';
const THIS_MODULE_URL = `package:angular2/test/compiler/eval_module_spec${IS_DART?'.dart':'.js'}`;
export function main() {
describe('evalModule', () => {
it('should call the "run" function and allow to use imports',
inject([AsyncTestCompleter], (async) => {
var moduleSource = IS_DART ? testDartModule : testJsModule;
evalModule(moduleSource, [[THIS_MODULE, 'tst']], [1])
evalModule(moduleSource, [[THIS_MODULE_URL, 'tst']], [1])
.then((value) => {
expect(value).toEqual([1, 23]);
async.done();

92
modules/angular2/test/compiler/runtime_compiler_spec.ts Normal file
View File

@ -0,0 +1,92 @@
import {
ddescribe,
describe,
xdescribe,
it,
iit,
xit,
expect,
beforeEach,
afterEach,
AsyncTestCompleter,
inject,
beforeEachBindings
} from 'angular2/test_lib';
import {Component, View, bind} from 'angular2/core';
import {PromiseWrapper} from 'angular2/src/core/facade/async';
import {SpyProtoViewFactory} from '../core/spies';
import {
CompiledHostTemplate,
CompiledTemplate,
BeginComponentCmd
} from 'angular2/src/core/compiler/template_commands';
import {RuntimeCompiler} from 'angular2/src/compiler/runtime_compiler';
import {ProtoViewFactory} from 'angular2/src/core/compiler/proto_view_factory';
import {AppProtoView} from 'angular2/src/core/compiler/view';
export function main() {
describe('RuntimeCompiler', () => {
var compiler: RuntimeCompiler;
beforeEach(inject([RuntimeCompiler], (_compiler) => { compiler = _compiler; }));
describe('compileInHost', () => {
var protoViewFactorySpy;
var someProtoView;
beforeEachBindings(() => {
protoViewFactorySpy = new SpyProtoViewFactory();
someProtoView = new AppProtoView(null, null, null, null, null, null);
protoViewFactorySpy.spy('createHost').andReturn(someProtoView);
return [bind(ProtoViewFactory).toValue(protoViewFactorySpy)];
});
it('should compile the template via TemplateCompiler',
inject([AsyncTestCompleter], (async) => {
var cht: CompiledHostTemplate;
protoViewFactorySpy.spy('createHost')
.andCallFake((_cht) => {
cht = _cht;
return someProtoView;
});
compiler.compileInHost(SomeComponent)
.then((_) => {
var beginComponentCmd =
<BeginComponentCmd>cht.getTemplate().getData('app1').commands[0];
expect(beginComponentCmd.name).toEqual('some-comp');
async.done();
});
}));
});
it('should cache the result', inject([AsyncTestCompleter], (async) => {
PromiseWrapper
.all([compiler.compileInHost(SomeComponent), compiler.compileInHost(SomeComponent)])
.then((protoViewRefs) => {
expect(protoViewRefs[0]).toBe(protoViewRefs[1]);
async.done();
});
}));
it('should clear the cache',
inject([AsyncTestCompleter], (async) => {compiler.compileInHost(SomeComponent)
.then((protoViewRef1) => {
compiler.clearCache();
compiler.compileInHost(SomeComponent)
.then((protoViewRef2) => {
expect(protoViewRef1)
.not.toBe(protoViewRef2);
async.done();
});
})}));
});
}
@Component({selector: 'some-comp'})
@View({template: ''})
class SomeComponent {
}

14
modules/angular2/test/compiler/runtime_metadata_spec.ts
View File

@ -34,7 +34,7 @@ import {
} from 'angular2/core';
import {TEST_BINDINGS} from './test_bindings';
import {IS_DART} from '../platform';
import {MODULE_SUFFIX, IS_DART} from 'angular2/src/compiler/util';
export function main() {
describe('RuntimeMetadataResolver', () => {
@ -50,7 +50,7 @@ export function main() {
expect(meta.dynamicLoadable).toBe(true);
expect(meta.type.runtime).toBe(ComponentWithEverything);
expect(meta.type.name).toEqual(stringify(ComponentWithEverything));
expect(meta.type.moduleId).toEqual('someModuleId');
expect(meta.type.moduleUrl).toEqual(`package:someModuleId${MODULE_SUFFIX}`);
expect(meta.lifecycleHooks).toEqual(LIFECYCLE_HOOKS_VALUES);
expect(meta.changeDetection).toBe(ChangeDetectionStrategy.CheckAlways);
expect(meta.inputs).toEqual({'someProp': 'someProp'});
@ -65,12 +65,12 @@ export function main() {
expect(meta.template.templateUrl).toEqual('someTemplateUrl');
}));
it('should use the moduleId from the reflector if none is given',
it('should use the moduleUrl from the reflector if none is given',
inject([RuntimeMetadataResolver], (resolver: RuntimeMetadataResolver) => {
var expectedValue =
IS_DART ? 'base/dist/dart/angular2/test/compiler/runtime_metadata_spec' : './';
expect(resolver.getMetadata(DirectiveWithoutModuleId).type.moduleId)
.toEqual(expectedValue);
var value: string = resolver.getMetadata(DirectiveWithoutModuleId).type.moduleUrl;
var expectedEndValue =
IS_DART ? 'base/dist/dart/angular2/test/compiler/runtime_metadata_spec.dart' : './';
expect((<any>value).endsWith(expectedEndValue)).toBe(true);
}));
});

16
modules/angular2/test/compiler/source_module_spec.ts
View File

@ -19,22 +19,26 @@ export function main() {
describe('getSourceWithImports', () => {
it('should generate named imports for modules', () => {
var sourceWithImports =
new SourceModule('some/moda', `${moduleRef('some/modb')}A`).getSourceWithImports();
new SourceModule('package:some/moda', `${moduleRef('package:some/modb')}A`)
.getSourceWithImports();
expect(sourceWithImports.source).toEqual('import0.A');
expect(sourceWithImports.imports).toEqual([['some/modb', 'import0']]);
expect(sourceWithImports.imports).toEqual([['package:some/modb', 'import0']]);
});
it('should dedupe imports', () => {
var sourceWithImports =
new SourceModule('some/moda', `${moduleRef('some/modb')}A + ${moduleRef('some/modb')}B`)
new SourceModule(
'package:some/moda',
`${moduleRef('package:some/modb')}A + ${moduleRef('package:some/modb')}B`)
.getSourceWithImports();
expect(sourceWithImports.source).toEqual('import0.A + import0.B');
expect(sourceWithImports.imports).toEqual([['some/modb', 'import0']]);
expect(sourceWithImports.imports).toEqual([['package:some/modb', 'import0']]);
});
it('should not use an import for the moduleId of the SourceModule', () => {
it('should not use an import for the moduleUrl of the SourceModule', () => {
var sourceWithImports =
new SourceModule('some/moda', `${moduleRef('some/moda')}A`).getSourceWithImports();
new SourceModule('package:some/moda', `${moduleRef('package:some/moda')}A`)
.getSourceWithImports();
expect(sourceWithImports.source).toEqual('A');
expect(sourceWithImports.imports).toEqual([]);
});

0
modules/angular2/test/compiler/style_compiler_import.shim.ts → modules/angular2/test/compiler/style_compiler_import.css.shim.ts
View File

0
modules/angular2/test/compiler/style_compiler_import.ts → modules/angular2/test/compiler/style_compiler_import.css.ts
View File

53
modules/angular2/test/compiler/style_compiler_spec.ts
View File

@ -29,15 +29,15 @@ import {
import {SourceExpression, SourceModule} from 'angular2/src/compiler/source_module';
import {ViewEncapsulation} from 'angular2/src/core/render/api';
import {TEST_BINDINGS} from './test_bindings';
import {codeGenValueFn, codeGenExportVariable} from 'angular2/src/compiler/util';
import {codeGenValueFn, codeGenExportVariable, MODULE_SUFFIX} from 'angular2/src/compiler/util';
// Attention: These module names have to correspond to real modules!
const MODULE_NAME = 'angular2/test/compiler/style_compiler_spec';
const IMPORT_ABS_MODULE_NAME = 'angular2/test/compiler/style_compiler_import';
const IMPORT_REL_MODULE_NAME = './style_compiler_import';
var MODULE_URL = `package:angular2/test/compiler/style_compiler_spec${MODULE_SUFFIX}`;
var IMPORT_ABS_STYLESHEET_URL = `package:angular2/test/compiler/style_compiler_import.css`;
var IMPORT_REL_STYLESHEET_URL = './style_compiler_import.css';
// Note: Not a real module, only used via mocks.
const IMPORT_ABS_MODULE_NAME_WITH_IMPORT =
'angular2/test/compiler/style_compiler_transitive_import';
var IMPORT_ABS_STYLESHEET_URL_WITH_IMPORT =
`package:angular2/test/compiler/style_compiler_transitive_import.css`;
export function main() {
describe('StyleCompiler', () => {
@ -65,9 +65,9 @@ export function main() {
beforeEach(() => {
xhrCount = 0;
xhrUrlResults = {};
xhrUrlResults[IMPORT_ABS_MODULE_NAME] = 'span {color: blue}';
xhrUrlResults[IMPORT_ABS_MODULE_NAME_WITH_IMPORT] =
`a {color: green}@import ${IMPORT_REL_MODULE_NAME};`;
xhrUrlResults[IMPORT_ABS_STYLESHEET_URL] = 'span {color: blue}';
xhrUrlResults[IMPORT_ABS_STYLESHEET_URL_WITH_IMPORT] =
`a {color: green}@import ${IMPORT_REL_STYLESHEET_URL};`;
});
function compile(styles: string[], styleAbsUrls: string[], encapsulation: ViewEncapsulation):
@ -100,7 +100,7 @@ export function main() {
}));
it('should allow to import rules', inject([AsyncTestCompleter], (async) => {
compile(['div {color: red}'], [IMPORT_ABS_MODULE_NAME], encapsulation)
compile(['div {color: red}'], [IMPORT_ABS_STYLESHEET_URL], encapsulation)
.then(styles => {
expect(styles).toEqual(['div {color: red}', 'span {color: blue}']);
async.done();
@ -108,7 +108,7 @@ export function main() {
}));
it('should allow to import rules transitively', inject([AsyncTestCompleter], (async) => {
compile(['div {color: red}'], [IMPORT_ABS_MODULE_NAME_WITH_IMPORT], encapsulation)
compile(['div {color: red}'], [IMPORT_ABS_STYLESHEET_URL_WITH_IMPORT], encapsulation)
.then(styles => {
expect(styles)
.toEqual(['div {color: red}', 'a {color: green}', 'span {color: blue}']);
@ -132,7 +132,7 @@ export function main() {
}));
it('should allow to import rules', inject([AsyncTestCompleter], (async) => {
compile(['div {\ncolor: red;\n}'], [IMPORT_ABS_MODULE_NAME], encapsulation)
compile(['div {\ncolor: red;\n}'], [IMPORT_ABS_STYLESHEET_URL], encapsulation)
.then(styles => {
compareStyles(styles, [
'div[_ngcontent-app1-23] {\ncolor: red;\n}',
@ -143,7 +143,8 @@ export function main() {
}));
it('should allow to import rules transitively', inject([AsyncTestCompleter], (async) => {
compile(['div {\ncolor: red;\n}'], [IMPORT_ABS_MODULE_NAME_WITH_IMPORT], encapsulation)
compile(['div {\ncolor: red;\n}'], [IMPORT_ABS_STYLESHEET_URL_WITH_IMPORT],
encapsulation)
.then(styles => {
compareStyles(styles, [
'div[_ngcontent-app1-23] {\ncolor: red;\n}',
@ -157,8 +158,8 @@ export function main() {
it('should cache stylesheets for parallel requests', inject([AsyncTestCompleter], (async) => {
PromiseWrapper.all([
compile([], [IMPORT_ABS_MODULE_NAME], ViewEncapsulation.None),
compile([], [IMPORT_ABS_MODULE_NAME], ViewEncapsulation.None)
compile([], [IMPORT_ABS_STYLESHEET_URL], ViewEncapsulation.None),
compile([], [IMPORT_ABS_STYLESHEET_URL], ViewEncapsulation.None)
])
.then((styleArrays) => {
expect(styleArrays[0]).toEqual(['span {color: blue}']);
@ -169,10 +170,10 @@ export function main() {
}));
it('should cache stylesheets for serial requests', inject([AsyncTestCompleter], (async) => {
compile([], [IMPORT_ABS_MODULE_NAME], ViewEncapsulation.None)
compile([], [IMPORT_ABS_STYLESHEET_URL], ViewEncapsulation.None)
.then((styles0) => {
xhrUrlResults[IMPORT_ABS_MODULE_NAME] = 'span {color: black}';
return compile([], [IMPORT_ABS_MODULE_NAME], ViewEncapsulation.None)
xhrUrlResults[IMPORT_ABS_STYLESHEET_URL] = 'span {color: black}';
return compile([], [IMPORT_ABS_STYLESHEET_URL], ViewEncapsulation.None)
.then((styles1) => {
expect(styles0).toEqual(['span {color: blue}']);
expect(styles1).toEqual(['span {color: blue}']);
@ -183,11 +184,11 @@ export function main() {
}));
it('should allow to clear the cache', inject([AsyncTestCompleter], (async) => {
compile([], [IMPORT_ABS_MODULE_NAME], ViewEncapsulation.None)
compile([], [IMPORT_ABS_STYLESHEET_URL], ViewEncapsulation.None)
.then((_) => {
compiler.clearCache();
xhrUrlResults[IMPORT_ABS_MODULE_NAME] = 'span {color: black}';
return compile([], [IMPORT_ABS_MODULE_NAME], ViewEncapsulation.None);
xhrUrlResults[IMPORT_ABS_STYLESHEET_URL] = 'span {color: black}';
return compile([], [IMPORT_ABS_STYLESHEET_URL], ViewEncapsulation.None);
})
.then((styles) => {
expect(xhrCount).toBe(2);
@ -229,7 +230,7 @@ export function main() {
}));
it('should allow to import rules', inject([AsyncTestCompleter], (async) => {
compile(['div {color: red}'], [IMPORT_ABS_MODULE_NAME], encapsulation)
compile(['div {color: red}'], [IMPORT_ABS_STYLESHEET_URL], encapsulation)
.then(styles => {
expect(styles).toEqual(['div {color: red}', 'span {color: blue}']);
async.done();
@ -252,7 +253,7 @@ export function main() {
}));
it('should allow to import rules', inject([AsyncTestCompleter], (async) => {
compile(['div {color: red}'], [IMPORT_ABS_MODULE_NAME], encapsulation)
compile(['div {color: red}'], [IMPORT_ABS_STYLESHEET_URL], encapsulation)
.then(styles => {
compareStyles(styles, [
'div[_ngcontent-app1-23] {\ncolor: red;\n}',
@ -266,7 +267,7 @@ export function main() {
describe('compileStylesheetCodeGen', () => {
function compile(style: string): Promise<string[][]> {
var sourceModules = compiler.compileStylesheetCodeGen(MODULE_NAME, style);
var sourceModules = compiler.compileStylesheetCodeGen(MODULE_URL, style);
return PromiseWrapper.all(sourceModules.map(sourceModule => {
var sourceWithImports = testableModule(sourceModule).getSourceWithImports();
return evalModule(sourceWithImports.source, sourceWithImports.imports, null);
@ -286,7 +287,7 @@ export function main() {
it('should allow to import rules with relative paths',
inject([AsyncTestCompleter], (async) => {
compile(`div {color: red}@import ${IMPORT_REL_MODULE_NAME};`)
compile(`div {color: red}@import ${IMPORT_REL_STYLESHEET_URL};`)
.then(stylesAndShimStyles => {
var expected = [
['div {color: red}', 'span {color: blue}'],
@ -314,7 +315,7 @@ function testableExpression(source: SourceExpression): SourceModule {
function testableModule(sourceModule: SourceModule): SourceModule {
var testableSource = `${sourceModule.sourceWithModuleRefs}
${codeGenExportVariable('run')}${codeGenValueFn(['_'], 'STYLES')};`;
return new SourceModule(sourceModule.moduleId, testableSource);
return new SourceModule(sourceModule.moduleUrl, testableSource);
}
// Needed for Android browsers which add an extra space at the end of some lines

48
modules/angular2/test/compiler/template_compiler_spec.ts
View File

@ -44,13 +44,13 @@ import {
import {Component, View, Directive, bind} from 'angular2/core';
import {TEST_BINDINGS} from './test_bindings';
import {TestContext, TestDispatcher, TestPipes} from './change_detector_mocks';
import {codeGenValueFn, codeGenExportVariable} from 'angular2/src/compiler/util';
import {TestDispatcher, TestPipes} from './change_detector_mocks';
import {codeGenValueFn, codeGenExportVariable, MODULE_SUFFIX} from 'angular2/src/compiler/util';
import {APP_ID} from 'angular2/src/core/render/dom/dom_tokens';
// Attention: This path has to point to this test file!
const THIS_MODULE = 'angular2/test/compiler/template_compiler_spec';
var THIS_MODULE_REF = moduleRef(THIS_MODULE);
const THIS_MODULE_ID = 'angular2/test/compiler/template_compiler_spec';
var THIS_MODULE_REF = moduleRef(`package:${THIS_MODULE_ID}${MODULE_SUFFIX}`);
const APP_ID_VALUE = 'app1';
@ -136,7 +136,7 @@ export function main() {
it('should cache components for parallel requests',
inject([AsyncTestCompleter, XHR], (async, xhr: MockXHR) => {
xhr.expect('angular2/test/compiler/compUrl.html', 'a');
xhr.expect('package:angular2/test/compiler/compUrl.html', 'a');
PromiseWrapper.all([compile([CompWithTemplateUrl]), compile([CompWithTemplateUrl])])
.then((humanizedTemplates) => {
expect(humanizedTemplates[0]['commands'][1]['commands']).toEqual(['#text(a)']);
@ -149,7 +149,7 @@ export function main() {
it('should cache components for sequential requests',
inject([AsyncTestCompleter, XHR], (async, xhr: MockXHR) => {
xhr.expect('angular2/test/compiler/compUrl.html', 'a');
xhr.expect('package:angular2/test/compiler/compUrl.html', 'a');
compile([CompWithTemplateUrl])
.then((humanizedTemplate0) => {
return compile([CompWithTemplateUrl])
@ -166,11 +166,11 @@ export function main() {
it('should allow to clear the cache',
inject([AsyncTestCompleter, XHR], (async, xhr: MockXHR) => {
xhr.expect('angular2/test/compiler/compUrl.html', 'a');
xhr.expect('package:angular2/test/compiler/compUrl.html', 'a');
compile([CompWithTemplateUrl])
.then((humanizedTemplate) => {
compiler.clearCache();
xhr.expect('angular2/test/compiler/compUrl.html', 'b');
xhr.expect('package:angular2/test/compiler/compUrl.html', 'b');
var result = compile([CompWithTemplateUrl]);
xhr.flush();
return result;
@ -200,8 +200,7 @@ export function main() {
function compile(components: Type[]): Promise<any[]> {
return PromiseWrapper.all(components.map(normalizeComponent))
.then((normalizedCompWithViewDirMetas: NormalizedComponentWithViewDirectives[]) => {
var sourceModule =
compiler.compileTemplatesCodeGen(THIS_MODULE, normalizedCompWithViewDirMetas);
var sourceModule = compiler.compileTemplatesCodeGen(normalizedCompWithViewDirMetas);
var sourceWithImports =
testableTemplateModule(sourceModule,
normalizedCompWithViewDirMetas[0].component)
@ -227,7 +226,7 @@ export function main() {
it('should normalize the template',
inject([AsyncTestCompleter, XHR], (async, xhr: MockXHR) => {
xhr.expect('angular2/test/compiler/compUrl.html', 'loadedTemplate');
xhr.expect('package:angular2/test/compiler/compUrl.html', 'loadedTemplate');
compiler.normalizeDirectiveMetadata(
runtimeMetadataResolver.getMetadata(CompWithTemplateUrl))
.then((meta: CompileDirectiveMetadata) => {
@ -260,7 +259,8 @@ export function main() {
describe('compileStylesheetCodeGen', () => {
it('should compile stylesheets into code', inject([AsyncTestCompleter], (async) => {
var cssText = 'div {color: red}';
var sourceModule = compiler.compileStylesheetCodeGen('someModuleId', cssText)[0];
var sourceModule =
compiler.compileStylesheetCodeGen('package:someModuleUrl', cssText)[0];
var sourceWithImports = testableStylesModule(sourceModule).getSourceWithImports();
evalModule(sourceWithImports.source, sourceWithImports.imports, null)
.then(loadedCssText => {
@ -276,52 +276,47 @@ export function main() {
@Component({
selector: 'comp-a',
host: {'[title]': 'someProp'},
moduleId: THIS_MODULE,
moduleId: THIS_MODULE_ID,
exportAs: 'someExportAs'
})
@View({template: '<a [href]="someProp"></a>', styles: ['div {color: red}']})
class CompWithBindingsAndStyles {
}
@Component({selector: 'tree', moduleId: THIS_MODULE})
@Component({selector: 'tree', moduleId: THIS_MODULE_ID})
@View({template: '<tree></tree>', directives: [TreeComp]})
class TreeComp {
}
@Component({selector: 'comp-url', moduleId: THIS_MODULE})
@Component({selector: 'comp-url', moduleId: THIS_MODULE_ID})
@View({templateUrl: 'compUrl.html'})
class CompWithTemplateUrl {
}
@Component({selector: 'comp-tpl', moduleId: THIS_MODULE})
@Component({selector: 'comp-tpl', moduleId: THIS_MODULE_ID})
@View({template: '<template><a [href]="someProp"></a></template>'})
class CompWithEmbeddedTemplate {
}
@Directive({selector: 'plain', moduleId: THIS_MODULE})
@Directive({selector: 'plain', moduleId: THIS_MODULE_ID})
@View({template: ''})
class NonComponent {
}
@Component({selector: 'comp', moduleId: THIS_MODULE})
@View({template: ''})
class CompWithoutHost {
}
function testableTemplateModule(sourceModule: SourceModule, normComp: CompileDirectiveMetadata):
SourceModule {
var resultExpression =
`${THIS_MODULE_REF}humanizeTemplate(Host${normComp.type.name}Template.getTemplate())`;
var testableSource = `${sourceModule.sourceWithModuleRefs}
${codeGenExportVariable('run')}${codeGenValueFn(['_'], resultExpression)};`;
return new SourceModule(sourceModule.moduleId, testableSource);
return new SourceModule(sourceModule.moduleUrl, testableSource);
}
function testableStylesModule(sourceModule: SourceModule): SourceModule {
var testableSource = `${sourceModule.sourceWithModuleRefs}
${codeGenExportVariable('run')}${codeGenValueFn(['_'], 'STYLES')};`;
return new SourceModule(sourceModule.moduleId, testableSource);
return new SourceModule(sourceModule.moduleUrl, testableSource);
}
// Attention: read by eval!
@ -347,6 +342,11 @@ export function humanizeTemplate(template: CompiledTemplate,
return result;
}
class TestContext implements CompWithBindingsAndStyles, TreeComp, CompWithTemplateUrl,
CompWithEmbeddedTemplate {
someProp: string;
}
function testChangeDetector(changeDetectorFactory: Function): string[] {
var ctx = new TestContext();

77
modules/angular2/test/compiler/template_normalizer_spec.ts
View File

@ -31,7 +31,7 @@ export function main() {
beforeEachBindings(() => TEST_BINDINGS);
beforeEach(() => {
dirType = new CompileTypeMetadata({moduleId: 'some/module/id', name: 'SomeComp'});
dirType = new CompileTypeMetadata({moduleUrl: 'package:some/module/a.js', name: 'SomeComp'});
});
describe('loadTemplate', () => {
@ -48,12 +48,12 @@ export function main() {
}))
.then((template: CompileTemplateMetadata) => {
expect(template.template).toEqual('a');
expect(template.templateUrl).toEqual('some/module/id');
expect(template.templateUrl).toEqual('package:some/module/a.js');
async.done();
});
}));
it('should resolve styles on the annotation against the moduleId',
it('should resolve styles on the annotation against the moduleUrl',
inject([AsyncTestCompleter, TemplateNormalizer],
(async, normalizer: TemplateNormalizer) => {
normalizer.normalizeTemplate(dirType, new CompileTemplateMetadata({
@ -64,12 +64,12 @@ export function main() {
styleUrls: ['test.css']
}))
.then((template: CompileTemplateMetadata) => {
expect(template.styleUrls).toEqual(['some/module/test.css']);
expect(template.styleUrls).toEqual(['package:some/module/test.css']);
async.done();
});
}));
it('should resolve styles in the template against the moduleId',
it('should resolve styles in the template against the moduleUrl',
inject([AsyncTestCompleter, TemplateNormalizer],
(async, normalizer: TemplateNormalizer) => {
normalizer.normalizeTemplate(dirType, new CompileTemplateMetadata({
@ -80,7 +80,7 @@ export function main() {
styleUrls: []
}))
.then((template: CompileTemplateMetadata) => {
expect(template.styleUrls).toEqual(['some/module/test.css']);
expect(template.styleUrls).toEqual(['package:some/module/test.css']);
async.done();
});
}));
@ -88,38 +88,39 @@ export function main() {
describe('templateUrl', () => {
it('should load a template from a url that is resolved against moduleId',
it('should load a template from a url that is resolved against moduleUrl',
inject([AsyncTestCompleter, TemplateNormalizer, XHR],
(async, normalizer: TemplateNormalizer, xhr: MockXHR) => {
xhr.expect('some/module/sometplurl', 'a');
xhr.expect('package:some/module/sometplurl.html', 'a');
normalizer.normalizeTemplate(dirType, new CompileTemplateMetadata({
encapsulation: null,
template: null,
templateUrl: 'sometplurl',
templateUrl: 'sometplurl.html',
styles: [],
styleUrls: ['test.css']
}))
.then((template: CompileTemplateMetadata) => {
expect(template.template).toEqual('a');
expect(template.templateUrl).toEqual('some/module/sometplurl');
expect(template.templateUrl)
.toEqual('package:some/module/sometplurl.html');
async.done();
});
xhr.flush();
}));
it('should resolve styles on the annotation against the moduleId',
it('should resolve styles on the annotation against the moduleUrl',
inject([AsyncTestCompleter, TemplateNormalizer, XHR],
(async, normalizer: TemplateNormalizer, xhr: MockXHR) => {
xhr.expect('some/module/tpl/sometplurl', '');
xhr.expect('package:some/module/tpl/sometplurl.html', '');
normalizer.normalizeTemplate(dirType, new CompileTemplateMetadata({
encapsulation: null,
template: null,
templateUrl: 'tpl/sometplurl',
templateUrl: 'tpl/sometplurl.html',
styles: [],
styleUrls: ['test.css']
}))
.then((template: CompileTemplateMetadata) => {
expect(template.styleUrls).toEqual(['some/module/test.css']);
expect(template.styleUrls).toEqual(['package:some/module/test.css']);
async.done();
});
xhr.flush();
@ -128,16 +129,17 @@ export function main() {
it('should resolve styles in the template against the templateUrl',
inject([AsyncTestCompleter, TemplateNormalizer, XHR],
(async, normalizer: TemplateNormalizer, xhr: MockXHR) => {
xhr.expect('some/module/tpl/sometplurl', '<style>@import test.css</style>');
xhr.expect('package:some/module/tpl/sometplurl.html',
'<style>@import test.css</style>');
normalizer.normalizeTemplate(dirType, new CompileTemplateMetadata({
encapsulation: null,
template: null,
templateUrl: 'tpl/sometplurl',
templateUrl: 'tpl/sometplurl.html',
styles: [],
styleUrls: []
}))
.then((template: CompileTemplateMetadata) => {
expect(template.styleUrls).toEqual(['some/module/tpl/test.css']);
expect(template.styleUrls).toEqual(['package:some/module/tpl/test.css']);
async.done();
});
xhr.flush();
@ -163,7 +165,7 @@ export function main() {
var template = normalizer.normalizeLoadedTemplate(
dirType, new CompileTemplateMetadata(
{encapsulation: viewEncapsulation, styles: [], styleUrls: []}),
'', 'some/module/');
'', 'package:some/module/');
expect(template.encapsulation).toBe(viewEncapsulation);
}));
@ -172,7 +174,7 @@ export function main() {
var template = normalizer.normalizeLoadedTemplate(
dirType,
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}), 'a',
'some/module/');
'package:some/module/');
expect(template.template).toEqual('a')
}));
@ -181,7 +183,7 @@ export function main() {
var template = normalizer.normalizeLoadedTemplate(
dirType,
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
'<ng-content select="a"></ng-content>', 'some/module/');
'<ng-content select="a"></ng-content>', 'package:some/module/');
expect(template.ngContentSelectors).toEqual(['a']);
}));
@ -191,7 +193,7 @@ export function main() {
dirType,
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
'<ng-content></ng-content><ng-content select></ng-content><ng-content select="*"></ng-content>',
'some/module/');
'package:some/module/');
expect(template.ngContentSelectors).toEqual(['*', '*', '*']);
}));
@ -200,7 +202,7 @@ export function main() {
var template = normalizer.normalizeLoadedTemplate(
dirType,
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
'<style>a</style>', 'some/module/');
'<style>a</style>', 'package:some/module/');
expect(template.styles).toEqual(['a']);
}));
@ -209,7 +211,7 @@ export function main() {
var template = normalizer.normalizeLoadedTemplate(
dirType,
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
'<div><style>a</style></div>', 'some/module/');
'<div><style>a</style></div>', 'package:some/module/');
expect(template.styles).toEqual(['a']);
}));
@ -218,8 +220,8 @@ export function main() {
var template = normalizer.normalizeLoadedTemplate(
dirType,
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
'<link rel="stylesheet" href="aUrl">', 'some/module/');
expect(template.styleUrls).toEqual(['some/module/aUrl']);
'<link rel="stylesheet" href="aUrl">', 'package:some/module/');
expect(template.styleUrls).toEqual(['package:some/module/aUrl']);
}));
it('should collect styleUrls in elements',
@ -227,8 +229,8 @@ export function main() {
var template = normalizer.normalizeLoadedTemplate(
dirType,
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
'<div><link rel="stylesheet" href="aUrl"></div>', 'some/module/');
expect(template.styleUrls).toEqual(['some/module/aUrl']);
'<div><link rel="stylesheet" href="aUrl"></div>', 'package:some/module/');
expect(template.styleUrls).toEqual(['package:some/module/aUrl']);
}));
it('should ignore link elements with non stylesheet rel attribute',
@ -236,7 +238,7 @@ export function main() {
var template = normalizer.normalizeLoadedTemplate(
dirType,
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
'<link href="b" rel="a"></link>', 'some/module/');
'<link href="b" rel="a"></link>', 'package:some/module/');
expect(template.styleUrls).toEqual([]);
}));
@ -245,9 +247,9 @@ export function main() {
var template = normalizer.normalizeLoadedTemplate(
dirType, new CompileTemplateMetadata(
{encapsulation: null, styles: ['@import "test.css";'], styleUrls: []}),
'', 'some/module/id');
'', 'package:some/module/id');
expect(template.styles).toEqual(['']);
expect(template.styleUrls).toEqual(['some/module/test.css']);
expect(template.styleUrls).toEqual(['package:some/module/test.css']);
}));
it('should resolve relative urls in inline styles',
@ -258,9 +260,9 @@ export function main() {
styles: ['.foo{background-image: url(\'double.jpg\');'],
styleUrls: []
}),
'', 'some/module/id');
'', 'package:some/module/id');
expect(template.styles)
.toEqual(['.foo{background-image: url(\'some/module/double.jpg\');']);
.toEqual(['.foo{background-image: url(\'package:some/module/double.jpg\');']);
}));
it('should resolve relative style urls in styleUrls',
@ -268,9 +270,9 @@ export function main() {
var template = normalizer.normalizeLoadedTemplate(
dirType, new CompileTemplateMetadata(
{encapsulation: null, styles: [], styleUrls: ['test.css']}),
'', 'some/module/id');
'', 'package:some/module/id');
expect(template.styles).toEqual([]);
expect(template.styleUrls).toEqual(['some/module/test.css']);
expect(template.styleUrls).toEqual(['package:some/module/test.css']);
}));
it('should normalize ViewEncapsulation.Emulated to ViewEncapsulation.None if there are no stlyes nor stylesheets',
@ -278,7 +280,7 @@ export function main() {
var template = normalizer.normalizeLoadedTemplate(
dirType, new CompileTemplateMetadata(
{encapsulation: ViewEncapsulation.Emulated, styles: [], styleUrls: []}),
'', 'some/module/id');
'', 'package:some/module/id');
expect(template.encapsulation).toEqual(ViewEncapsulation.None);
}));
@ -287,7 +289,8 @@ export function main() {
var template = normalizer.normalizeLoadedTemplate(
dirType,
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
'<div ng-non-bindable><ng-content select="a"></ng-content></div>', 'some/module/');
'<div ng-non-bindable><ng-content select="a"></ng-content></div>',
'package:some/module/');
expect(template.ngContentSelectors).toEqual([]);
}));
@ -296,7 +299,7 @@ export function main() {
var template = normalizer.normalizeLoadedTemplate(
dirType,
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
'<div ng-non-bindable><style>div {color:red}</style></div>', 'some/module/');
'<div ng-non-bindable><style>div {color:red}</style></div>', 'package:some/module/');
expect(template.styles).toEqual(['div {color:red}']);
}));
});