diff --git a/modules/@angular/upgrade/test/upgrade_spec.ts b/modules/@angular/upgrade/test/upgrade_spec.ts index ae1e22d845..ca3d423bee 100644 --- a/modules/@angular/upgrade/test/upgrade_spec.ts +++ b/modules/@angular/upgrade/test/upgrade_spec.ts @@ -6,8 +6,8 @@ * found in the LICENSE file at https://angular.io/license */ -import {ChangeDetectorRef, Class, Component, EventEmitter, NO_ERRORS_SCHEMA, NgModule, SimpleChanges, Testability, destroyPlatform, forwardRef} from '@angular/core'; -import {async, fakeAsync, flushMicrotasks, tick} from '@angular/core/testing'; +import {Class, Component, EventEmitter, NO_ERRORS_SCHEMA, NgModule, SimpleChanges, Testability, destroyPlatform, forwardRef} from '@angular/core'; +import {async, fakeAsync, flushMicrotasks} from '@angular/core/testing'; import {BrowserModule} from '@angular/platform-browser'; import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; import {UpgradeAdapter} from '@angular/upgrade'; @@ -96,6 +96,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [adapter.upgradeNg1Component('ng1'), Ng2], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function Ng2Module() {}}); ng1Module.directive('ng1', () => { @@ -169,6 +170,7 @@ export function main() { adapter.upgradeNg1Component('ng1a'), adapter.upgradeNg1Component('ng1b'), Ng2 ], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); @@ -274,6 +276,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [Ng2], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); const element = html(`
@@ -317,6 +320,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [Ng2], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); @@ -350,6 +354,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [Ng2], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); @@ -404,6 +409,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [adapter.upgradeNg1Component('ng1'), Ng2], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); @@ -447,6 +453,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [adapter.upgradeNg1Component('ng1'), Ng2], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); @@ -494,6 +501,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [adapter.upgradeNg1Component('ng1'), Ng2], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); @@ -539,6 +547,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [adapter.upgradeNg1Component('ng1'), Ng2], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); @@ -571,6 +580,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [adapter.upgradeNg1Component('ng1'), Ng2], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); @@ -598,6 +608,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [adapter.upgradeNg1Component('ng1'), Ng2], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); @@ -622,6 +633,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [adapter.upgradeNg1Component('ng1'), Ng2], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); @@ -646,6 +658,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [adapter.upgradeNg1Component('ng1'), Ng2], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); @@ -671,6 +684,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [adapter.upgradeNg1Component('ng1'), Ng2], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); @@ -714,6 +728,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [adapter.upgradeNg1Component('ng1'), Ng2], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); @@ -746,6 +761,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [adapter.upgradeNg1Component('ng1'), Ng2], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); @@ -778,6 +794,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [adapter.upgradeNg1Component('ng1'), Ng2], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); @@ -817,6 +834,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [adapter.upgradeNg1Component('ng1'), Ng2], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); @@ -861,6 +879,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [adapter.upgradeNg1Component('ng1'), Ng2], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); @@ -873,156 +892,154 @@ export function main() { it('should call $onInit of components', async(() => { const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); - const $onInitSpy = jasmine.createSpy('$onInit'); + const ng1Module = angular.module('ng1', []); + const valueToFind = '$onInit'; - @Component({selector: 'ng2', template: ''}) - class Ng2Component { - } + const ng1 = { + bindings: {}, + template: '{{$ctrl.value}}', + controller: Class( + {constructor: function() {}, $onInit: function() { this.value = valueToFind; }}) + }; + ng1Module.component('ng1', ng1); - angular.module('ng1', []) - .component('ng1', { - bindings: {}, - template: '', - controller: function() { this.$onInit = $onInitSpy; } - }) - .directive('ng2', adapter.downgradeNg2Component(Ng2Component)); + const Ng2 = Component({selector: 'ng2', template: ''}).Class({ + constructor: function() {} + }); - @NgModule({ - declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component], - imports: [BrowserModule], - }) - class Ng2Module { - } + const Ng2Module = NgModule({ + declarations: [adapter.upgradeNg1Component('ng1'), Ng2], + imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], + }).Class({constructor: function() {}}); + + ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); const element = html(`
`); adapter.bootstrap(element, ['ng1']).ready((ref) => { - expect($onInitSpy).toHaveBeenCalled(); + expect(multiTrim(document.body.textContent)).toEqual(valueToFind); ref.dispose(); }); })); it('should call $doCheck of components', async(() => { const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); - const $doCheckSpy = jasmine.createSpy('$doCheck'); - let changeDetector: ChangeDetectorRef; + const ng1Module = angular.module('ng1', []); + const valueToFind = '$doCheck'; - @Component({selector: 'ng2', template: ''}) - class Ng2Component { - constructor(cd: ChangeDetectorRef) { changeDetector = cd; } - } + let spy = jasmine.createSpy('doCheck'); - angular.module('ng1', []) - .component('ng1', { - bindings: {}, - template: '{{$ctrl.value}}', - controller: function() { this.$doCheck = $doCheckSpy; } - }) - .directive('ng2', adapter.downgradeNg2Component(Ng2Component)); + const ng1 = { + bindings: {}, + template: '{{$ctrl.value}}', + controller: Class({ + constructor: function() {}, + $doCheck: function() { + this.value = valueToFind; + spy(); + } + }) + }; + ng1Module.component('ng1', ng1); + const Ng2 = Component({selector: 'ng2', template: ''}).Class({ + constructor: function() {} + }); - @NgModule({ - declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component], - imports: [BrowserModule], - }) - class Ng2Module { - } + const Ng2Module = NgModule({ + declarations: [adapter.upgradeNg1Component('ng1'), Ng2], + imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], + }).Class({constructor: function() {}}); + + ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); const element = html(`
`); adapter.bootstrap(element, ['ng1']).ready((ref) => { - expect($doCheckSpy).toHaveBeenCalled(); - - $doCheckSpy.calls.reset(); - changeDetector.detectChanges(); - - expect($doCheckSpy).toHaveBeenCalled(); - - ref.dispose(); + expect(multiTrim(document.body.textContent)).toEqual(valueToFind); + expect(spy).toHaveBeenCalled(); + let count = spy.calls.count(); + setTimeout(() => { + expect(spy.calls.count()).toBeGreaterThan(count); + ref.dispose(); + }, 100); }); })); - it('should call $onChanges of components', fakeAsync(() => { - const EXPECTED_VALUE = '$onChanges called'; + it('should call $onChanges of components', async(() => { const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); - const $onChangesSpy = jasmine.createSpy('$onChanges'); - let ng2Instance: any; + const ng1Module = angular.module('ng1', []); + const valueToFind = '$onChanges init'; + const valueToChange = '$onChanges changed'; - @Component({selector: 'ng2', template: ''}) - class Ng2Component { - constructor() { ng2Instance = this; } - } + const ng1 = { + bindings: {val: '<'}, + template: '{{$ctrl.value}}', + controller: Class({ + constructor: function() {}, + $onChanges: function(changes: any) { this.value = changes.val.currentValue; } + }) + }; + ng1Module.component('ng1', ng1); - angular.module('ng1Module', []) - .component('ng1', { - bindings: {val: '<'}, - template: '', - controller: function() { this.$onChanges = $onChangesSpy; } - }) - .directive('ng2', adapter.downgradeNg2Component(Ng2Component)); + const Ng2 = Component({selector: 'ng2', template: ''}).Class({ + constructor: function() { this.val = valueToFind; }, + ngOnInit: function() { setTimeout(() => { this.val = valueToChange; }, 100); } + }); - @NgModule({ - declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component], - imports: [BrowserModule], - }) - class Ng2Module { - } + const Ng2Module = NgModule({ + declarations: [adapter.upgradeNg1Component('ng1'), Ng2], + imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], + }).Class({constructor: function() {}}); + + ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); const element = html(`
`); - adapter.bootstrap(element, ['ng1Module']).ready((ref) => { - - ng2Instance.val = EXPECTED_VALUE; - tick(); - ref.ng1RootScope.$digest(); - - expect($onChangesSpy).toHaveBeenCalled(); - const changes = $onChangesSpy.calls.mostRecent().args[0] as SimpleChanges; - expect(changes['val'].currentValue).toEqual(EXPECTED_VALUE); - - ref.dispose(); + adapter.bootstrap(element, ['ng1']).ready((ref) => { + expect(multiTrim(document.body.textContent)).toEqual(valueToFind); + setTimeout(() => { + expect(multiTrim(document.body.textContent)).toEqual(valueToChange); + ref.dispose(); + }, 200); }); })); - it('should call $onDestroy of components', fakeAsync(() => { + it('should call $onDestroy of components', async(() => { const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); - const $onDestroySpy = jasmine.createSpy('$onDestroy'); + const ng1Module = angular.module('ng1', []); - @Component({selector: 'ng2', template: ''}) - class Ng2Component { - } + let spy = jasmine.createSpy('$onDestroy'); - angular.module('ng1', []) - .component('ng1', { - bindings: {}, - template: '
ng1
', - controller: function() { this.$onDestroy = $onDestroySpy; } - }) - .directive('ng2', adapter.downgradeNg2Component(Ng2Component)); + const ng1 = { + bindings: {}, + template: '
ng1
', + controller: function($rootScope: any) { this.$onDestroy = function() { spy(); }; } + }; + ng1Module.component('ng1', ng1); + const Ng2 = Component({selector: 'ng2', template: ''}).Class({ + constructor: function() {} + }); - @NgModule({ - declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component], - imports: [BrowserModule], - }) - class Ng2Module { - } + const Ng2Module = NgModule({ + declarations: [adapter.upgradeNg1Component('ng1'), Ng2], + imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], + }).Class({constructor: function() {}}); + ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); const element = html(`
`); adapter.bootstrap(element, ['ng1']).ready((ref) => { - const $rootScope = ref.ng1RootScope as any; - - $rootScope.destroy = false; - tick(); - $rootScope.$digest(); - - expect($onDestroySpy).not.toHaveBeenCalled(); - - $rootScope.destroy = true; - tick(); - $rootScope.$digest(); - - expect($onDestroySpy).toHaveBeenCalled(); - - ref.dispose(); + (ref.ng1RootScope).destroy = false; + setTimeout(() => { + (ref.ng1RootScope).destroy = true; + setTimeout(() => { + expect(spy).toHaveBeenCalled(); + ref.dispose(); + }, 100); + }, 100); }); })); @@ -1045,6 +1062,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [adapter.upgradeNg1Component('ng1'), Ng2], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); @@ -1077,6 +1095,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [adapter.upgradeNg1Component('ng1'), Ng2a, Ng2b], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); const element = html(`
`); @@ -1093,6 +1112,7 @@ export function main() { const MyNg2Module = NgModule({ providers: [{provide: SomeToken, useValue: 'correct_value'}], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); const adapter: UpgradeAdapter = new UpgradeAdapter(MyNg2Module); @@ -1220,6 +1240,7 @@ export function main() { const Ng2Module = NgModule({ declarations: [adapter.upgradeNg1Component('ng1'), Ng2], imports: [BrowserModule], + schemas: [NO_ERRORS_SCHEMA], }).Class({constructor: function() {}}); module.directive('ng2', adapter.downgradeNg2Component(Ng2));