refactor(core): remove deprecated @Component.directives and @Component.pipes
BREAKING CHANGE: previously deprecated @Component.directives and @Component.pipes support was removed. All the components and pipes now must be declarated via an NgModule. NgModule is the basic compilation block passed into the Angular compiler via Compiler#compileModuleSync or #compileModuleAsync. Because of this change, the Compiler#compileComponentAsync and #compileComponentSync were removed as well - any code doing compilation should compile module instead using the apis mentioned above. Lastly, since modules are the basic compilation unit, the ngUpgrade module was modified to always require an NgModule to be passed into the UpgradeAdapter's constructor - previously this was optional.
This commit is contained in:
Igor Minar
@ -6,9 +6,8 @@
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Class, Component, EventEmitter, Inject, NgModule, OpaqueToken, Testability, destroyPlatform} from '@angular/core';
|
||||
import {Class, Component, EventEmitter, Inject, NgModule, OpaqueToken, Testability, destroyPlatform, forwardRef} from '@angular/core';
|
||||
import {async} from '@angular/core/testing';
|
||||
import {AsyncTestCompleter, ddescribe, describe, expect, iit, inject, it} from '@angular/core/testing/testing_internal';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {UpgradeAdapter} from '@angular/upgrade';
|
||||
import * as angular from '@angular/upgrade/src/angular_js';
|
||||
@ -20,34 +19,40 @@ export function main() {
|
||||
|
||||
it('should have angular 1 loaded', () => expect(angular.version.major).toBe(1));
|
||||
|
||||
it('should instantiate ng2 in ng1 template and project content',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
it('should instantiate ng2 in ng1 template and project content', async(() => {
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
|
||||
var Ng2 = Component({selector: 'ng2', template: `{{ 'NG2' }}(<ng-content></ng-content>)`})
|
||||
.Class({constructor: function() {}});
|
||||
|
||||
var Ng2Module = NgModule({declarations: [Ng2], imports: [BrowserModule]}).Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
var element =
|
||||
html('<div>{{ \'ng1[\' }}<ng2>~{{ \'ng-content\' }}~</ng2>{{ \']\' }}</div>');
|
||||
|
||||
var adapter: UpgradeAdapter = new UpgradeAdapter();
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(Ng2Module);
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(document.body.textContent).toEqual('ng1[NG2(~ng-content~)]');
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should instantiate ng1 in ng2 template and project content',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter: UpgradeAdapter = new UpgradeAdapter();
|
||||
it('should instantiate ng1 in ng2 template and project content', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
|
||||
var Ng2 = Component({
|
||||
selector: 'ng2',
|
||||
template: `{{ 'ng2(' }}<ng1>{{'transclude'}}</ng1>{{ ')' }}`,
|
||||
directives: [adapter.upgradeNg1Component('ng1')]
|
||||
}).Class({constructor: function() {}});
|
||||
}).Class({constructor: function Ng2() {}});
|
||||
|
||||
var Ng2Module = NgModule({
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function Ng2Module() {}});
|
||||
|
||||
ng1Module.directive('ng1', () => {
|
||||
return {transclude: true, template: '{{ "ng1" }}(<ng-transclude></ng-transclude>)'};
|
||||
@ -59,19 +64,17 @@ export function main() {
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(document.body.textContent).toEqual('ng1(ng2(ng1(transclude)))');
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
describe('scope/component change-detection', () => {
|
||||
it('should interleave scope and component expressions',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
it('should interleave scope and component expressions', async(() => {
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
var log: any[] /** TODO #9100 */ = [];
|
||||
var l = function(value: any /** TODO #9100 */) {
|
||||
log.push(value);
|
||||
return value + ';';
|
||||
};
|
||||
var adapter: UpgradeAdapter = new UpgradeAdapter();
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
|
||||
ng1Module.directive('ng1a', () => { return {template: '{{ l(\'ng1a\') }}'}; });
|
||||
ng1Module.directive('ng1b', () => { return {template: '{{ l(\'ng1b\') }}'}; });
|
||||
@ -80,13 +83,18 @@ export function main() {
|
||||
$rootScope.reset = () => log.length = 0;
|
||||
});
|
||||
|
||||
var Ng2 =
|
||||
Component({
|
||||
selector: 'ng2',
|
||||
template: `{{l('2A')}}<ng1a></ng1a>{{l('2B')}}<ng1b></ng1b>{{l('2C')}}`,
|
||||
directives:
|
||||
[adapter.upgradeNg1Component('ng1a'), adapter.upgradeNg1Component('ng1b')]
|
||||
}).Class({constructor: function() { this.l = l; }});
|
||||
var Ng2 = Component({
|
||||
selector: 'ng2',
|
||||
template: `{{l('2A')}}<ng1a></ng1a>{{l('2B')}}<ng1b></ng1b>{{l('2C')}}`
|
||||
}).Class({constructor: function() { this.l = l; }});
|
||||
|
||||
var Ng2Module =
|
||||
NgModule({
|
||||
declarations: [
|
||||
adapter.upgradeNg1Component('ng1a'), adapter.upgradeNg1Component('ng1b'), Ng2
|
||||
],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
|
||||
@ -97,15 +105,13 @@ export function main() {
|
||||
// https://github.com/angular/angular.js/issues/12983
|
||||
expect(log).toEqual(['1A', '1B', '1C', '2A', '2B', '2C', 'ng1a', 'ng1b']);
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
describe('downgrade ng2 component', () => {
|
||||
it('should bind properties, events',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter: UpgradeAdapter = new UpgradeAdapter();
|
||||
it('should bind properties, events', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
|
||||
ng1Module.run(($rootScope: any /** TODO #9100 */) => {
|
||||
@ -189,6 +195,11 @@ export function main() {
|
||||
}
|
||||
});
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
|
||||
var Ng2Module = NgModule({declarations: [Ng2], imports: [BrowserModule]}).Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
var element = html(`<div>
|
||||
<ng2 literal="Text" interpolate="Hello {{'world'}}"
|
||||
bind-one-way-a="dataA" [one-way-b]="dataB"
|
||||
@ -204,14 +215,12 @@ export function main() {
|
||||
'oneWayA: A; oneWayB: B; twoWayA: newA; twoWayB: newB; (2) | ' +
|
||||
'modelA: newA; modelB: newB; eventA: aFired; eventB: bFired;');
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
|
||||
}));
|
||||
|
||||
it('should properly run cleanup when ng1 directive is destroyed',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter: UpgradeAdapter = new UpgradeAdapter();
|
||||
it('should properly run cleanup when ng1 directive is destroyed', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
var onDestroyed: EventEmitter<string> = new EventEmitter<string>();
|
||||
|
||||
@ -229,20 +238,21 @@ export function main() {
|
||||
constructor: function() {},
|
||||
ngOnDestroy: function() { onDestroyed.emit('destroyed'); }
|
||||
});
|
||||
|
||||
var Ng2Module = NgModule({declarations: [Ng2], imports: [BrowserModule]}).Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
var element = html('<ng1></ng1>');
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
onDestroyed.subscribe(() => {
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
onDestroyed.subscribe(() => { ref.dispose(); });
|
||||
});
|
||||
}));
|
||||
|
||||
|
||||
it('should fallback to the root ng2.injector when compiled outside the dom',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter: UpgradeAdapter = new UpgradeAdapter();
|
||||
it('should fallback to the root ng2.injector when compiled outside the dom', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
|
||||
ng1Module.directive('ng1', [
|
||||
@ -262,12 +272,16 @@ export function main() {
|
||||
|
||||
var Ng2 =
|
||||
Component({selector: 'ng2', template: 'test'}).Class({constructor: function() {}});
|
||||
|
||||
var Ng2Module = NgModule({declarations: [Ng2], imports: [BrowserModule]}).Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
var element = html('<ng1></ng1>');
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(multiTrim(document.body.textContent)).toEqual('test');
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
@ -308,9 +322,8 @@ export function main() {
|
||||
});
|
||||
|
||||
describe('upgrade ng1 component', () => {
|
||||
it('should bind properties, events',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter = new UpgradeAdapter();
|
||||
it('should bind properties, events', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
|
||||
var ng1 = function() {
|
||||
@ -338,8 +351,7 @@ export function main() {
|
||||
'<ng1 fullName="{{last}}, {{first}}" [modelA]="first" [(modelB)]="last" ' +
|
||||
'(event)="event=$event"></ng1>' +
|
||||
'<ng1 fullName="{{\'TEST\'}}" modelA="First" modelB="Last"></ng1>' +
|
||||
'{{event}}-{{last}}, {{first}}',
|
||||
directives: [adapter.upgradeNg1Component('ng1')]
|
||||
'{{event}}-{{last}}, {{first}}'
|
||||
}).Class({
|
||||
constructor: function() {
|
||||
this.first = 'Victor';
|
||||
@ -347,6 +359,12 @@ export function main() {
|
||||
this.event = '?';
|
||||
}
|
||||
});
|
||||
|
||||
var Ng2Module = NgModule({
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
var element = html(`<div><ng2></ng2></div>`);
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
@ -357,14 +375,13 @@ export function main() {
|
||||
.toEqual(
|
||||
'Hello SAVKIN, Victor; A: VICTOR; B: SAVKIN; | Hello TEST; A: First; B: Last; | WORKS-SAVKIN, Victor');
|
||||
ref.dispose();
|
||||
async.done();
|
||||
}, 0);
|
||||
});
|
||||
}));
|
||||
|
||||
it('should bind properties, events in controller when bindToController is not used',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter = new UpgradeAdapter();
|
||||
async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
|
||||
var ng1 = function() {
|
||||
@ -383,8 +400,7 @@ export function main() {
|
||||
Component({
|
||||
selector: 'ng2',
|
||||
template:
|
||||
'{{someText}} - Length: {{dataList.length}} | <ng1 [(data)]="dataList"></ng1>',
|
||||
directives: [adapter.upgradeNg1Component('ng1')],
|
||||
'{{someText}} - Length: {{dataList.length}} | <ng1 [(data)]="dataList"></ng1>'
|
||||
}).Class({
|
||||
|
||||
constructor: function() {
|
||||
@ -392,6 +408,12 @@ export function main() {
|
||||
this.someText = 'ng2';
|
||||
}
|
||||
});
|
||||
|
||||
var Ng2Module = NgModule({
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
var element = html(`<div><ng2></ng2></div>`);
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
@ -401,14 +423,12 @@ export function main() {
|
||||
expect(multiTrim(document.body.textContent))
|
||||
.toEqual('ng2 - Length: 3 | ng1 - Data: 1,2,3 - Length: 3');
|
||||
ref.dispose();
|
||||
async.done();
|
||||
}, 0);
|
||||
});
|
||||
}));
|
||||
|
||||
it('should bind properties, events in link function',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter = new UpgradeAdapter();
|
||||
it('should bind properties, events in link function', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
|
||||
var ng1 = function() {
|
||||
@ -427,8 +447,7 @@ export function main() {
|
||||
Component({
|
||||
selector: 'ng2',
|
||||
template:
|
||||
'{{someText}} - Length: {{dataList.length}} | <ng1 [(data)]="dataList"></ng1>',
|
||||
directives: [adapter.upgradeNg1Component('ng1')],
|
||||
'{{someText}} - Length: {{dataList.length}} | <ng1 [(data)]="dataList"></ng1>'
|
||||
}).Class({
|
||||
|
||||
constructor: function() {
|
||||
@ -436,6 +455,12 @@ export function main() {
|
||||
this.someText = 'ng2';
|
||||
}
|
||||
});
|
||||
|
||||
var Ng2Module = NgModule({
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
var element = html(`<div><ng2></ng2></div>`);
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
@ -445,14 +470,12 @@ export function main() {
|
||||
expect(multiTrim(document.body.textContent))
|
||||
.toEqual('ng2 - Length: 3 | ng1 - Data: 1,2,3 - Length: 3');
|
||||
ref.dispose();
|
||||
async.done();
|
||||
}, 0);
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support templateUrl fetched from $httpBackend',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter = new UpgradeAdapter();
|
||||
it('should support templateUrl fetched from $httpBackend', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
ng1Module.value(
|
||||
'$httpBackend', (method: any /** TODO #9100 */, url: any /** TODO #9100 */,
|
||||
@ -461,23 +484,25 @@ export function main() {
|
||||
|
||||
var ng1 = function() { return {templateUrl: 'url.html'}; };
|
||||
ng1Module.directive('ng1', ng1);
|
||||
var Ng2 = Component({
|
||||
selector: 'ng2',
|
||||
template: '<ng1></ng1>',
|
||||
directives: [adapter.upgradeNg1Component('ng1')]
|
||||
}).Class({constructor: function() {}});
|
||||
var Ng2 = Component({selector: 'ng2', template: '<ng1></ng1>'}).Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
var Ng2Module = NgModule({
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
var element = html(`<div><ng2></ng2></div>`);
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(multiTrim(document.body.textContent)).toEqual('GET:url.html');
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support templateUrl as a function',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter = new UpgradeAdapter();
|
||||
it('should support templateUrl as a function', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
ng1Module.value(
|
||||
'$httpBackend', (method: any /** TODO #9100 */, url: any /** TODO #9100 */,
|
||||
@ -486,88 +511,100 @@ export function main() {
|
||||
|
||||
var ng1 = function() { return {templateUrl() { return 'url.html'; }}; };
|
||||
ng1Module.directive('ng1', ng1);
|
||||
var Ng2 = Component({
|
||||
selector: 'ng2',
|
||||
template: '<ng1></ng1>',
|
||||
directives: [adapter.upgradeNg1Component('ng1')]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
var Ng2 = Component({selector: 'ng2', template: '<ng1></ng1>'}).Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
var Ng2Module = NgModule({
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
var element = html(`<div><ng2></ng2></div>`);
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(multiTrim(document.body.textContent)).toEqual('GET:url.html');
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support empty template',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter = new UpgradeAdapter();
|
||||
it('should support empty template', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
|
||||
var ng1 = function() { return {template: ''}; };
|
||||
ng1Module.directive('ng1', ng1);
|
||||
var Ng2 = Component({
|
||||
selector: 'ng2',
|
||||
template: '<ng1></ng1>',
|
||||
directives: [adapter.upgradeNg1Component('ng1')]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
var Ng2 = Component({selector: 'ng2', template: '<ng1></ng1>'}).Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
var Ng2Module = NgModule({
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
var element = html(`<div><ng2></ng2></div>`);
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(multiTrim(document.body.textContent)).toEqual('');
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support template as a function',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter = new UpgradeAdapter();
|
||||
it('should support template as a function', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
|
||||
var ng1 = function() { return {template() { return ''; }}; };
|
||||
ng1Module.directive('ng1', ng1);
|
||||
var Ng2 = Component({
|
||||
selector: 'ng2',
|
||||
template: '<ng1></ng1>',
|
||||
directives: [adapter.upgradeNg1Component('ng1')]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
var Ng2 = Component({selector: 'ng2', template: '<ng1></ng1>'}).Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
var Ng2Module = NgModule({
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
var element = html(`<div><ng2></ng2></div>`);
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(multiTrim(document.body.textContent)).toEqual('');
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support templateUrl fetched from $templateCache',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter = new UpgradeAdapter();
|
||||
it('should support templateUrl fetched from $templateCache', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
ng1Module.run(
|
||||
($templateCache: any /** TODO #9100 */) => $templateCache.put('url.html', 'WORKS'));
|
||||
|
||||
var ng1 = function() { return {templateUrl: 'url.html'}; };
|
||||
ng1Module.directive('ng1', ng1);
|
||||
var Ng2 = Component({
|
||||
selector: 'ng2',
|
||||
template: '<ng1></ng1>',
|
||||
directives: [adapter.upgradeNg1Component('ng1')]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
var Ng2 = Component({selector: 'ng2', template: '<ng1></ng1>'}).Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
var Ng2Module = NgModule({
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
var element = html(`<div><ng2></ng2></div>`);
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(multiTrim(document.body.textContent)).toEqual('WORKS');
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support controller with controllerAs',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter = new UpgradeAdapter();
|
||||
it('should support controller with controllerAs', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
|
||||
var ng1 = function() {
|
||||
@ -592,23 +629,26 @@ export function main() {
|
||||
};
|
||||
};
|
||||
ng1Module.directive('ng1', ng1);
|
||||
var Ng2 = Component({
|
||||
selector: 'ng2',
|
||||
template: '<ng1></ng1>',
|
||||
directives: [adapter.upgradeNg1Component('ng1')]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
var Ng2 = Component({selector: 'ng2', template: '<ng1></ng1>'}).Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
var Ng2Module = NgModule({
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
var element = html(`<div><ng2></ng2></div>`);
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(multiTrim(document.body.textContent)).toEqual('scope; isClass; NG1; published');
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support bindToController',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter = new UpgradeAdapter();
|
||||
it('should support bindToController', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
|
||||
var ng1 = function() {
|
||||
@ -621,23 +661,26 @@ export function main() {
|
||||
};
|
||||
};
|
||||
ng1Module.directive('ng1', ng1);
|
||||
var Ng2 = Component({
|
||||
selector: 'ng2',
|
||||
template: '<ng1 title="WORKS"></ng1>',
|
||||
directives: [adapter.upgradeNg1Component('ng1')]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
var Ng2 = Component({selector: 'ng2', template: '<ng1 title="WORKS"></ng1>'}).Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
var Ng2Module = NgModule({
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
var element = html(`<div><ng2></ng2></div>`);
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(multiTrim(document.body.textContent)).toEqual('WORKS');
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support bindToController with bindings',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter = new UpgradeAdapter();
|
||||
it('should support bindToController with bindings', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
|
||||
var ng1 = function() {
|
||||
@ -650,23 +693,26 @@ export function main() {
|
||||
};
|
||||
};
|
||||
ng1Module.directive('ng1', ng1);
|
||||
var Ng2 = Component({
|
||||
selector: 'ng2',
|
||||
template: '<ng1 title="WORKS"></ng1>',
|
||||
directives: [adapter.upgradeNg1Component('ng1')]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
var Ng2 = Component({selector: 'ng2', template: '<ng1 title="WORKS"></ng1>'}).Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
var Ng2Module = NgModule({
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
var element = html(`<div><ng2></ng2></div>`);
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(multiTrim(document.body.textContent)).toEqual('WORKS');
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support single require in linking fn',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter = new UpgradeAdapter();
|
||||
it('should support single require in linking fn', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
|
||||
var ng1 = function($rootScope: any /** TODO #9100 */) {
|
||||
@ -688,23 +734,26 @@ export function main() {
|
||||
};
|
||||
};
|
||||
ng1Module.directive('ng1', ng1);
|
||||
var Ng2 = Component({
|
||||
selector: 'ng2',
|
||||
template: '<ng1></ng1>',
|
||||
directives: [adapter.upgradeNg1Component('ng1')]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
var Ng2 = Component({selector: 'ng2', template: '<ng1></ng1>'}).Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
var Ng2Module = NgModule({
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
var element = html(`<div><ng2></ng2></div>`);
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(multiTrim(document.body.textContent)).toEqual('WORKS');
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support array require in linking fn',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter = new UpgradeAdapter();
|
||||
it('should support array require in linking fn', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
|
||||
var parent = function() {
|
||||
@ -731,23 +780,26 @@ export function main() {
|
||||
};
|
||||
ng1Module.directive('parent', parent);
|
||||
ng1Module.directive('ng1', ng1);
|
||||
var Ng2 = Component({
|
||||
selector: 'ng2',
|
||||
template: '<ng1></ng1>',
|
||||
directives: [adapter.upgradeNg1Component('ng1')]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
var Ng2 = Component({selector: 'ng2', template: '<ng1></ng1>'}).Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
var Ng2Module = NgModule({
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
var element = html(`<div><parent><ng2></ng2></parent></div>`);
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(multiTrim(document.body.textContent)).toEqual('PARENT:WORKS');
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should call $onInit of components',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter = new UpgradeAdapter();
|
||||
it('should call $onInit of components', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
var valueToFind = '$onInit';
|
||||
|
||||
@ -759,24 +811,26 @@ export function main() {
|
||||
};
|
||||
ng1Module.component('ng1', ng1);
|
||||
|
||||
var Ng2 = Component({
|
||||
selector: 'ng2',
|
||||
template: '<ng1></ng1>',
|
||||
directives: [adapter.upgradeNg1Component('ng1')]
|
||||
}).Class({constructor: function() {}});
|
||||
var Ng2 = Component({selector: 'ng2', template: '<ng1></ng1>'}).Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
var Ng2Module = NgModule({
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
|
||||
var element = html(`<div><ng2></ng2></div>`);
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(multiTrim(document.body.textContent)).toEqual(valueToFind);
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should bind input properties (<) of components',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter = new UpgradeAdapter();
|
||||
it('should bind input properties (<) of components', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
|
||||
var ng1 = {
|
||||
@ -786,26 +840,27 @@ export function main() {
|
||||
};
|
||||
ng1Module.component('ng1', ng1);
|
||||
|
||||
var Ng2 = Component({
|
||||
selector: 'ng2',
|
||||
template: '<ng1 [personProfile]="goku"></ng1>',
|
||||
directives: [adapter.upgradeNg1Component('ng1')]
|
||||
}).Class({
|
||||
constructor: function() { this.goku = {firstName: 'GOKU', lastName: 'SAN'}; }
|
||||
});
|
||||
var Ng2 =
|
||||
Component({selector: 'ng2', template: '<ng1 [personProfile]="goku"></ng1>'}).Class({
|
||||
constructor: function() { this.goku = {firstName: 'GOKU', lastName: 'SAN'}; }
|
||||
});
|
||||
|
||||
var Ng2Module = NgModule({
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
|
||||
var element = html(`<div><ng2></ng2></div>`);
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(multiTrim(document.body.textContent)).toEqual(`Hello GOKU SAN`);
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support ng2 > ng1 > ng2',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter = new UpgradeAdapter();
|
||||
it('should support ng2 > ng1 > ng2', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
|
||||
var ng1 = {
|
||||
@ -813,22 +868,23 @@ export function main() {
|
||||
};
|
||||
ng1Module.component('ng1', ng1);
|
||||
|
||||
var Ng2a = Component({
|
||||
selector: 'ng2a',
|
||||
template: 'ng2a(<ng1></ng1>)',
|
||||
directives: [adapter.upgradeNg1Component('ng1')]
|
||||
}).Class({constructor: function() {}});
|
||||
ng1Module.directive('ng2a', adapter.downgradeNg2Component(Ng2a));
|
||||
|
||||
var Ng2b = Component({selector: 'ng2b', template: 'ng2b', directives: []}).Class({
|
||||
var Ng2a = Component({selector: 'ng2a', template: 'ng2a(<ng1></ng1>)'}).Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
ng1Module.directive('ng2a', adapter.downgradeNg2Component(Ng2a));
|
||||
|
||||
var Ng2b =
|
||||
Component({selector: 'ng2b', template: 'ng2b'}).Class({constructor: function() {}});
|
||||
ng1Module.directive('ng2b', adapter.downgradeNg2Component(Ng2b));
|
||||
|
||||
var Ng2Module = NgModule({
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2a, Ng2b],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
var element = html(`<div><ng2a></ng2a></div>`);
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(multiTrim(document.body.textContent)).toEqual('ng2a(ng1(ng2b))');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
});
|
||||
@ -837,12 +893,12 @@ export function main() {
|
||||
function SomeToken() {}
|
||||
|
||||
it('should export ng2 instance to ng1', async(() => {
|
||||
var MyModule = NgModule({
|
||||
providers: [{provide: SomeToken, useValue: 'correct_value'}],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function() {}});
|
||||
var MyNg2Module = NgModule({
|
||||
providers: [{provide: SomeToken, useValue: 'correct_value'}],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
var adapter = new UpgradeAdapter(MyModule);
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(MyNg2Module);
|
||||
var module = angular.module('myExample', []);
|
||||
module.factory('someToken', adapter.downgradeNg2Provider(SomeToken));
|
||||
adapter.bootstrap(html('<div>'), ['myExample']).ready((ref) => {
|
||||
@ -851,9 +907,11 @@ export function main() {
|
||||
});
|
||||
}));
|
||||
|
||||
it('should export ng1 instance to ng2',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter = new UpgradeAdapter();
|
||||
it('should export ng1 instance to ng2', async(() => {
|
||||
var MyNg2Module =
|
||||
NgModule({imports: [BrowserModule]}).Class({constructor: function() {}});
|
||||
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(MyNg2Module);
|
||||
var module = angular.module('myExample', []);
|
||||
module.value('testValue', 'secreteToken');
|
||||
adapter.upgradeNg1Provider('testValue');
|
||||
@ -864,15 +922,16 @@ export function main() {
|
||||
expect(ref.ng2Injector.get(String)).toBe('secreteToken');
|
||||
expect(ref.ng2Injector.get('testToken')).toBe('secreteToken');
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
describe('testability', () => {
|
||||
it('should handle deferred bootstrap',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter: UpgradeAdapter = new UpgradeAdapter();
|
||||
it('should handle deferred bootstrap', async(() => {
|
||||
var MyNg2Module =
|
||||
NgModule({imports: [BrowserModule]}).Class({constructor: function() {}});
|
||||
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(MyNg2Module);
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
var bootstrapResumed: boolean = false;
|
||||
|
||||
@ -882,7 +941,6 @@ export function main() {
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(bootstrapResumed).toEqual(true);
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
@ -891,9 +949,11 @@ export function main() {
|
||||
}, 100);
|
||||
}));
|
||||
|
||||
it('should wait for ng2 testability',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter: UpgradeAdapter = new UpgradeAdapter();
|
||||
it('should wait for ng2 testability', async(() => {
|
||||
var MyNg2Module =
|
||||
NgModule({imports: [BrowserModule]}).Class({constructor: function() {}});
|
||||
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(MyNg2Module);
|
||||
var ng1Module = angular.module('ng1', []);
|
||||
var element = html('<div></div>');
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
@ -904,7 +964,6 @@ export function main() {
|
||||
angular.getTestability(element).whenStable(function() {
|
||||
expect(ng2Stable).toEqual(true);
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
@ -916,9 +975,8 @@ export function main() {
|
||||
});
|
||||
|
||||
describe('examples', () => {
|
||||
it('should verify UpgradeAdapter example',
|
||||
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
||||
var adapter = new UpgradeAdapter();
|
||||
it('should verify UpgradeAdapter example', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
var module = angular.module('myExample', []);
|
||||
|
||||
module.directive('ng1', function() {
|
||||
@ -929,15 +987,18 @@ export function main() {
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
var Ng2 =
|
||||
Component({
|
||||
selector: 'ng2',
|
||||
inputs: ['name'],
|
||||
template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)',
|
||||
directives: [adapter.upgradeNg1Component('ng1')]
|
||||
template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)'
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
var Ng2Module = NgModule({
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
|
||||
imports: [BrowserModule]
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
|
||||
document.body.innerHTML = '<ng2 name="World">project</ng2>';
|
||||
@ -946,7 +1007,6 @@ export function main() {
|
||||
expect(multiTrim(document.body.textContent))
|
||||
.toEqual('ng2[ng1[Hello World!](transclude)](project)');
|
||||
ref.dispose();
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user