2016-06-23 12:47:54 -04:00
|
|
|
/**
|
|
|
|
* @license
|
|
|
|
* Copyright Google Inc. All Rights Reserved.
|
|
|
|
*
|
|
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
|
|
* found in the LICENSE file at https://angular.io/license
|
|
|
|
*/
|
|
|
|
|
2016-06-18 12:42:34 -04:00
|
|
|
import {CompilerConfig} from '@angular/compiler/src/config';
|
|
|
|
import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectionStrategy, Component, Directive, DoCheck, Injectable, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation} from '@angular/core';
|
2016-06-08 19:38:52 -04:00
|
|
|
import {LIFECYCLE_HOOKS_VALUES} from '@angular/core/src/metadata/lifecycle_hooks';
|
2016-07-28 07:54:49 -04:00
|
|
|
import {TestBed} from '@angular/core/testing';
|
2016-06-08 19:38:52 -04:00
|
|
|
import {afterEach, beforeEach, beforeEachProviders, ddescribe, describe, expect, iit, inject, it, xdescribe, xit} from '@angular/core/testing/testing_internal';
|
2015-09-14 18:59:09 -04:00
|
|
|
|
2016-07-18 06:50:31 -04:00
|
|
|
import {CompileNgModuleMetadata} from '../src/compile_metadata';
|
2016-07-30 22:31:25 -04:00
|
|
|
import {stringify} from '../src/facade/lang';
|
2016-04-28 20:50:03 -04:00
|
|
|
import {CompileMetadataResolver} from '../src/metadata_resolver';
|
2016-06-08 19:38:52 -04:00
|
|
|
|
2016-02-18 13:53:21 -05:00
|
|
|
import {MalformedStylesComponent} from './metadata_resolver_fixture';
|
feat(testing): add implicit test module
Every test now has an implicit module. It can be configured via `configureModule` (from @angular/core/testing)
to add providers, directives, pipes, ...
The compiler now has to be configured separately via `configureCompiler` (from @angular/core/testing)
to add providers or define whether to use jit.
BREAKING CHANGE:
- Application providers can no longer inject compiler internals (i.e. everything
from `@angular/compiler). Inject `Compiler` instead. This reflects the
changes to `bootstrap` for module support (3f55aa609f60f130f1d69188ed057214b1267cb3).
- Compiler providers can no longer be added via `addProviders` / `withProviders`.
Use the new method `configureCompiler` instead.
- Platform directives / pipes need to be provided via
`configureModule` and can no longer be provided via the
`PLATFORM_PIPES` / `PLATFORM_DIRECTIVES` tokens.
- `setBaseTestProviders()` was renamed into `initTestEnvironment` and
now takes a `PlatformRef` and a factory for a
`Compiler`.
- E.g. for the browser platform:
BEFORE:
```
import {setBaseTestProviders} from ‘@angular/core/testing’;
import {TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS} from ‘@angular/platform-browser-dynamic/testing’;
setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
```
AFTER:
```
import {setBaseTestProviders} from ‘@angular/core/testing’;
import {browserTestCompiler, browserDynamicTestPlatform,
BrowserDynamicTestModule} from ‘@angular/platform-browser-dynamic/testing’;
initTestEnvironment(
browserTestCompiler,
browserDynamicTestPlatform(),
BrowserDynamicTestModule);
```
- E.g. for the server platform:
BEFORE:
```
import {setBaseTestProviders} from ‘@angular/core/testing’;
import {TEST_SERVER_PLATFORM_PROVIDERS,
TEST_SERVER_APPLICATION_PROVIDERS} from ‘@angular/platform-server/testing/server’;
setBaseTestProviders(TEST_SERVER_PLATFORM_PROVIDERS,
TEST_SERVER_APPLICATION_PROVIDERS);
```
AFTER:
```
import {setBaseTestProviders} from ‘@angular/core/testing’;
import {serverTestCompiler, serverTestPlatform,
ServerTestModule} from ‘@angular/platform-browser-dynamic/testing’;
initTestEnvironment(
serverTestCompiler,
serverTestPlatform(),
ServerTestModule);
```
Related to #9726
Closes #9846
2016-07-04 12:37:30 -04:00
|
|
|
import {TEST_COMPILER_PROVIDERS} from './test_bindings';
|
2015-09-14 18:59:09 -04:00
|
|
|
|
|
|
|
export function main() {
|
2016-02-18 13:53:21 -05:00
|
|
|
describe('CompileMetadataResolver', () => {
|
2016-07-28 07:54:49 -04:00
|
|
|
beforeEach(() => { TestBed.configureCompiler({providers: TEST_COMPILER_PROVIDERS}); });
|
2015-09-14 18:59:09 -04:00
|
|
|
|
2016-07-18 06:50:31 -04:00
|
|
|
describe('getDirectiveMetadata', () => {
|
2015-09-14 18:59:09 -04:00
|
|
|
it('should read metadata',
|
2016-02-18 13:53:21 -05:00
|
|
|
inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
|
2015-12-02 13:35:51 -05:00
|
|
|
var meta = resolver.getDirectiveMetadata(ComponentWithEverything);
|
2015-09-14 18:59:09 -04:00
|
|
|
expect(meta.selector).toEqual('someSelector');
|
2015-09-18 13:33:23 -04:00
|
|
|
expect(meta.exportAs).toEqual('someExportAs');
|
2015-09-14 18:59:09 -04:00
|
|
|
expect(meta.isComponent).toBe(true);
|
|
|
|
expect(meta.type.runtime).toBe(ComponentWithEverything);
|
|
|
|
expect(meta.type.name).toEqual(stringify(ComponentWithEverything));
|
2016-08-02 04:12:24 -04:00
|
|
|
expect(meta.type.lifecycleHooks).toEqual(LIFECYCLE_HOOKS_VALUES);
|
2016-06-27 23:00:30 -04:00
|
|
|
expect(meta.changeDetection).toBe(ChangeDetectionStrategy.Default);
|
2015-09-30 23:59:23 -04:00
|
|
|
expect(meta.inputs).toEqual({'someProp': 'someProp'});
|
|
|
|
expect(meta.outputs).toEqual({'someEvent': 'someEvent'});
|
2015-09-18 13:33:23 -04:00
|
|
|
expect(meta.hostListeners).toEqual({'someHostListener': 'someHostListenerExpr'});
|
|
|
|
expect(meta.hostProperties).toEqual({'someHostProp': 'someHostPropExpr'});
|
|
|
|
expect(meta.hostAttributes).toEqual({'someHostAttr': 'someHostAttrValue'});
|
2015-09-14 18:59:09 -04:00
|
|
|
expect(meta.template.encapsulation).toBe(ViewEncapsulation.Emulated);
|
|
|
|
expect(meta.template.styles).toEqual(['someStyle']);
|
|
|
|
expect(meta.template.styleUrls).toEqual(['someStyleUrl']);
|
|
|
|
expect(meta.template.template).toEqual('someTemplate');
|
|
|
|
expect(meta.template.templateUrl).toEqual('someTemplateUrl');
|
2016-06-20 12:52:41 -04:00
|
|
|
expect(meta.template.interpolation).toEqual(['{{', '}}']);
|
2015-09-14 18:59:09 -04:00
|
|
|
}));
|
|
|
|
|
2015-10-01 13:07:49 -04:00
|
|
|
it('should use the moduleUrl from the reflector if none is given',
|
2016-02-18 13:53:21 -05:00
|
|
|
inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
|
2016-07-30 22:31:25 -04:00
|
|
|
const value: string =
|
2016-05-02 12:38:46 -04:00
|
|
|
resolver.getDirectiveMetadata(ComponentWithoutModuleId).type.moduleUrl;
|
2016-07-30 22:31:25 -04:00
|
|
|
const expectedEndValue = './ComponentWithoutModuleId';
|
2015-12-13 20:35:33 -05:00
|
|
|
expect(value.endsWith(expectedEndValue)).toBe(true);
|
2015-09-14 18:59:09 -04:00
|
|
|
}));
|
2016-03-09 17:55:27 -05:00
|
|
|
|
|
|
|
it('should throw when metadata is incorrectly typed',
|
2016-02-18 13:53:21 -05:00
|
|
|
inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
|
2016-06-18 12:42:34 -04:00
|
|
|
expect(() => resolver.getDirectiveMetadata(MalformedStylesComponent))
|
|
|
|
.toThrowError(`Expected 'styles' to be an array of strings.`);
|
2016-03-09 17:55:27 -05:00
|
|
|
}));
|
2016-06-09 19:07:06 -04:00
|
|
|
|
|
|
|
it('should throw with descriptive error message when provider token can not be resolved',
|
|
|
|
inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
|
2016-06-18 12:42:34 -04:00
|
|
|
expect(() => resolver.getDirectiveMetadata(MyBrokenComp1))
|
|
|
|
.toThrowError(`Can't resolve all parameters for MyBrokenComp1: (?).`);
|
|
|
|
}));
|
|
|
|
|
|
|
|
it('should throw with descriptive error message when a param token of a dependency is undefined',
|
|
|
|
inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
|
|
|
|
expect(() => resolver.getDirectiveMetadata(MyBrokenComp2))
|
|
|
|
.toThrowError(`Can't resolve all parameters for NonAnnotatedService: (?).`);
|
2016-06-09 19:07:06 -04:00
|
|
|
}));
|
2016-06-20 12:52:41 -04:00
|
|
|
|
2016-06-21 20:27:27 -04:00
|
|
|
it('should throw with descriptive error message when one of providers is not present',
|
|
|
|
inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
|
|
|
|
expect(() => resolver.getDirectiveMetadata(MyBrokenComp3))
|
|
|
|
.toThrowError(
|
|
|
|
`One or more of providers for "MyBrokenComp3" were not defined: [?, SimpleService, ?].`);
|
|
|
|
}));
|
|
|
|
|
|
|
|
it('should throw with descriptive error message when one of viewProviders is not present',
|
|
|
|
inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
|
|
|
|
expect(() => resolver.getDirectiveMetadata(MyBrokenComp4))
|
|
|
|
.toThrowError(
|
|
|
|
`One or more of viewProviders for "MyBrokenComp4" were not defined: [?, SimpleService, ?].`);
|
|
|
|
}));
|
|
|
|
|
2016-06-20 12:52:41 -04:00
|
|
|
it('should throw an error when the interpolation config has invalid symbols',
|
|
|
|
inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
|
|
|
|
expect(() => resolver.getDirectiveMetadata(ComponentWithInvalidInterpolation1))
|
|
|
|
.toThrowError(`[' ', ' '] contains unusable interpolation symbol.`);
|
|
|
|
expect(() => resolver.getDirectiveMetadata(ComponentWithInvalidInterpolation2))
|
|
|
|
.toThrowError(`['{', '}'] contains unusable interpolation symbol.`);
|
|
|
|
expect(() => resolver.getDirectiveMetadata(ComponentWithInvalidInterpolation3))
|
|
|
|
.toThrowError(`['<%', '%>'] contains unusable interpolation symbol.`);
|
2016-06-21 19:55:17 -04:00
|
|
|
expect(() => resolver.getDirectiveMetadata(ComponentWithInvalidInterpolation4))
|
|
|
|
.toThrowError(`['&#', '}}'] contains unusable interpolation symbol.`);
|
|
|
|
expect(() => resolver.getDirectiveMetadata(ComponentWithInvalidInterpolation5))
|
|
|
|
.toThrowError(`['{', '}}'] contains unusable interpolation symbol.`);
|
2016-06-20 12:52:41 -04:00
|
|
|
}));
|
2015-09-14 18:59:09 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2015-11-02 19:03:42 -05:00
|
|
|
@Directive({selector: 'a-directive'})
|
|
|
|
class ADirective {
|
|
|
|
}
|
|
|
|
|
2015-09-14 18:59:09 -04:00
|
|
|
@Directive({selector: 'someSelector'})
|
2015-12-13 20:35:33 -05:00
|
|
|
class SomeDirective {
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({selector: 'someComponent', template: ''})
|
|
|
|
class ComponentWithoutModuleId {
|
2015-09-14 18:59:09 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'someSelector',
|
2015-09-30 23:59:23 -04:00
|
|
|
inputs: ['someProp'],
|
|
|
|
outputs: ['someEvent'],
|
2015-09-14 18:59:09 -04:00
|
|
|
host: {
|
|
|
|
'[someHostProp]': 'someHostPropExpr',
|
|
|
|
'(someHostListener)': 'someHostListenerExpr',
|
|
|
|
'someHostAttr': 'someHostAttrValue'
|
|
|
|
},
|
2015-09-18 13:33:23 -04:00
|
|
|
exportAs: 'someExportAs',
|
2015-09-14 18:59:09 -04:00
|
|
|
moduleId: 'someModuleId',
|
2016-06-27 23:00:30 -04:00
|
|
|
changeDetection: ChangeDetectionStrategy.Default,
|
2015-09-14 18:59:09 -04:00
|
|
|
template: 'someTemplate',
|
|
|
|
templateUrl: 'someTemplateUrl',
|
|
|
|
encapsulation: ViewEncapsulation.Emulated,
|
|
|
|
styles: ['someStyle'],
|
|
|
|
styleUrls: ['someStyleUrl'],
|
2016-06-20 12:52:41 -04:00
|
|
|
directives: [SomeDirective],
|
|
|
|
interpolation: ['{{', '}}']
|
2015-09-14 18:59:09 -04:00
|
|
|
})
|
|
|
|
class ComponentWithEverything implements OnChanges,
|
|
|
|
OnInit, DoCheck, OnDestroy, AfterContentInit, AfterContentChecked, AfterViewInit,
|
|
|
|
AfterViewChecked {
|
2016-05-09 18:45:04 -04:00
|
|
|
ngOnChanges(changes: SimpleChanges): void {}
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
ngOnInit(): void {}
|
|
|
|
ngDoCheck(): void {}
|
|
|
|
ngOnDestroy(): void {}
|
|
|
|
ngAfterContentInit(): void {}
|
|
|
|
ngAfterContentChecked(): void {}
|
|
|
|
ngAfterViewInit(): void {}
|
|
|
|
ngAfterViewChecked(): void {}
|
2015-09-14 18:59:09 -04:00
|
|
|
}
|
2016-06-09 19:07:06 -04:00
|
|
|
|
|
|
|
@Component({selector: 'my-broken-comp', template: ''})
|
|
|
|
class MyBrokenComp1 {
|
|
|
|
constructor(public dependency: any) {}
|
|
|
|
}
|
2016-06-20 12:52:41 -04:00
|
|
|
|
2016-06-18 12:42:34 -04:00
|
|
|
class NonAnnotatedService {
|
|
|
|
constructor(dep: any) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({selector: 'my-broken-comp', template: '', providers: [NonAnnotatedService]})
|
|
|
|
class MyBrokenComp2 {
|
|
|
|
constructor(dependency: NonAnnotatedService) {}
|
|
|
|
}
|
|
|
|
|
2016-06-21 20:27:27 -04:00
|
|
|
@Injectable()
|
|
|
|
class SimpleService {
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({selector: 'my-broken-comp', template: '', providers: [null, SimpleService, [null]]})
|
|
|
|
class MyBrokenComp3 {
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({selector: 'my-broken-comp', template: '', viewProviders: [null, SimpleService, [null]]})
|
|
|
|
class MyBrokenComp4 {
|
|
|
|
}
|
|
|
|
|
2016-06-20 12:52:41 -04:00
|
|
|
@Component({selector: 'someSelector', template: '', interpolation: [' ', ' ']})
|
|
|
|
class ComponentWithInvalidInterpolation1 {
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({selector: 'someSelector', template: '', interpolation: ['{', '}']})
|
|
|
|
class ComponentWithInvalidInterpolation2 {
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({selector: 'someSelector', template: '', interpolation: ['<%', '%>']})
|
|
|
|
class ComponentWithInvalidInterpolation3 {
|
|
|
|
}
|
2016-06-21 19:55:17 -04:00
|
|
|
|
|
|
|
@Component({selector: 'someSelector', template: '', interpolation: ['&#', '}}']})
|
|
|
|
class ComponentWithInvalidInterpolation4 {
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({selector: 'someSelector', template: '', interpolation: ['{', '}}']})
|
|
|
|
class ComponentWithInvalidInterpolation5 {
|
|
|
|
}
|