diff --git a/packages/upgrade/test/dynamic/upgrade_spec.ts b/packages/upgrade/test/dynamic/upgrade_spec.ts index 1d7d25bd19..b3bb64dee7 100644 --- a/packages/upgrade/test/dynamic/upgrade_spec.ts +++ b/packages/upgrade/test/dynamic/upgrade_spec.ts @@ -170,52 +170,50 @@ withEachNg1Version(() => { }); describe('scope/component change-detection', () => { - fixmeIvy('FW-714: ng1 projected content is not being rendered') - .it('should interleave scope and component expressions', async(() => { - const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); - const ng1Module = angular.module('ng1', []); - const log: string[] = []; - const l = (value: string) => { - log.push(value); - return value + ';'; - }; + it('should interleave scope and component expressions', async(() => { + const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); + const ng1Module = angular.module('ng1', []); + const log: string[] = []; + const l = (value: string) => { + log.push(value); + return value + ';'; + }; - ng1Module.directive('ng1a', () => ({template: '{{ l(\'ng1a\') }}'})); - ng1Module.directive('ng1b', () => ({template: '{{ l(\'ng1b\') }}'})); - ng1Module.run(($rootScope: any) => { - $rootScope.l = l; - $rootScope.reset = () => log.length = 0; - }); + ng1Module.directive('ng1a', () => ({template: '{{ l(\'ng1a\') }}'})); + ng1Module.directive('ng1b', () => ({template: '{{ l(\'ng1b\') }}'})); + ng1Module.run(($rootScope: any) => { + $rootScope.l = l; + $rootScope.reset = () => log.length = 0; + }); - @Component({ - selector: 'ng2', - template: `{{l('2A')}}{{l('2B')}}{{l('2C')}}` - }) - class Ng2 { - l: any; - constructor() { this.l = l; } - } + @Component({ + selector: 'ng2', + template: `{{l('2A')}}{{l('2B')}}{{l('2C')}}` + }) + class Ng2 { + l: any; + constructor() { this.l = l; } + } - @NgModule({ - declarations: [ - adapter.upgradeNg1Component('ng1a'), adapter.upgradeNg1Component('ng1b'), Ng2 - ], - imports: [BrowserModule], - }) - class Ng2Module { - } + @NgModule({ + declarations: + [adapter.upgradeNg1Component('ng1a'), adapter.upgradeNg1Component('ng1b'), Ng2], + imports: [BrowserModule], + }) + class Ng2Module { + } - ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); + ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); - const element = - html('
{{reset(); l(\'1A\');}}{{l(\'1B\')}}{{l(\'1C\')}}
'); - adapter.bootstrap(element, ['ng1']).ready((ref) => { - expect(document.body.textContent).toEqual('1A;2A;ng1a;2B;ng1b;2C;1C;'); - // https://github.com/angular/angular.js/issues/12983 - expect(log).toEqual(['1A', '1C', '2A', '2B', '2C', 'ng1a', 'ng1b']); - ref.dispose(); - }); - })); + const element = + html('
{{reset(); l(\'1A\');}}{{l(\'1B\')}}{{l(\'1C\')}}
'); + adapter.bootstrap(element, ['ng1']).ready((ref) => { + expect(document.body.textContent).toEqual('1A;2A;ng1a;2B;ng1b;2C;1C;'); + // https://github.com/angular/angular.js/issues/12983 + expect(log).toEqual(['1A', '1C', '2A', '2B', '2C', 'ng1a', 'ng1b']); + ref.dispose(); + }); + })); fixmeIvy( @@ -826,209 +824,197 @@ withEachNg1Version(() => { }); describe('upgrade ng1 component', () => { - fixmeIvy('FW-724: upgraded ng1 components are not being rendered') - .it('should support `@` bindings', fakeAsync(() => { - const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); - let ng2ComponentInstance: Ng2Component; + it('should support `@` bindings', fakeAsync(() => { + const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); + let ng2ComponentInstance: Ng2Component; - // Define `ng1Component` - const ng1Component: angular.IComponent = { - template: 'Inside: {{ $ctrl.inputA }}, {{ $ctrl.inputB }}', - bindings: {inputA: '@inputAttrA', inputB: '@'} - }; + // Define `ng1Component` + const ng1Component: angular.IComponent = { + template: 'Inside: {{ $ctrl.inputA }}, {{ $ctrl.inputB }}', + bindings: {inputA: '@inputAttrA', inputB: '@'} + }; - // Define `Ng2Component` - @Component({ - selector: 'ng2', - template: ` - - | Outside: {{ dataA }}, {{ dataB }} - ` - }) - class Ng2Component { - dataA = 'foo'; - dataB = 'bar'; + // Define `Ng2Component` + @Component({ + selector: 'ng2', + template: ` + + | Outside: {{ dataA }}, {{ dataB }} + ` + }) + class Ng2Component { + dataA = 'foo'; + dataB = 'bar'; - constructor() { ng2ComponentInstance = this; } - } + constructor() { ng2ComponentInstance = this; } + } - // Define `ng1Module` - const ng1Module = - angular.module('ng1Module', []) - .component('ng1', ng1Component) - .directive('ng2', adapter.downgradeNg2Component(Ng2Component)); + // Define `ng1Module` + const ng1Module = angular.module('ng1Module', []) + .component('ng1', ng1Component) + .directive('ng2', adapter.downgradeNg2Component(Ng2Component)); - // Define `Ng2Module` - @NgModule({ - declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component], - imports: [BrowserModule] - }) - class Ng2Module { - } + // Define `Ng2Module` + @NgModule({ + declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component], + imports: [BrowserModule] + }) + class Ng2Module { + } - // Bootstrap - const element = html(``); + // Bootstrap + const element = html(``); - adapter.bootstrap(element, ['ng1Module']).ready(ref => { - const ng1 = element.querySelector('ng1') !; - const ng1Controller = angular.element(ng1).controller !('ng1'); + adapter.bootstrap(element, ['ng1Module']).ready(ref => { + const ng1 = element.querySelector('ng1') !; + const ng1Controller = angular.element(ng1).controller !('ng1'); - expect(multiTrim(element.textContent)) - .toBe('Inside: foo, bar | Outside: foo, bar'); + expect(multiTrim(element.textContent)).toBe('Inside: foo, bar | Outside: foo, bar'); - ng1Controller.inputA = 'baz'; - ng1Controller.inputB = 'qux'; - $digest(ref); + ng1Controller.inputA = 'baz'; + ng1Controller.inputB = 'qux'; + $digest(ref); - expect(multiTrim(element.textContent)) - .toBe('Inside: baz, qux | Outside: foo, bar'); + expect(multiTrim(element.textContent)).toBe('Inside: baz, qux | Outside: foo, bar'); - ng2ComponentInstance.dataA = 'foo2'; - ng2ComponentInstance.dataB = 'bar2'; - $digest(ref); + ng2ComponentInstance.dataA = 'foo2'; + ng2ComponentInstance.dataB = 'bar2'; + $digest(ref); - expect(multiTrim(element.textContent)) - .toBe('Inside: foo2, bar2 | Outside: foo2, bar2'); + expect(multiTrim(element.textContent)) + .toBe('Inside: foo2, bar2 | Outside: foo2, bar2'); - ref.dispose(); - }); - })); + ref.dispose(); + }); + })); - fixmeIvy('FW-724: upgraded ng1 components are not being rendered') - .it('should support `<` bindings', fakeAsync(() => { - const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); - let ng2ComponentInstance: Ng2Component; + it('should support `<` bindings', fakeAsync(() => { + const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); + let ng2ComponentInstance: Ng2Component; - // Define `ng1Component` - const ng1Component: angular.IComponent = { - template: 'Inside: {{ $ctrl.inputA.value }}, {{ $ctrl.inputB.value }}', - bindings: {inputA: ' - | Outside: {{ dataA.value }}, {{ dataB.value }} - ` - }) - class Ng2Component { - dataA = {value: 'foo'}; - dataB = {value: 'bar'}; + // Define `Ng2Component` + @Component({ + selector: 'ng2', + template: ` + + | Outside: {{ dataA.value }}, {{ dataB.value }} + ` + }) + class Ng2Component { + dataA = {value: 'foo'}; + dataB = {value: 'bar'}; - constructor() { ng2ComponentInstance = this; } - } + constructor() { ng2ComponentInstance = this; } + } - // Define `ng1Module` - const ng1Module = - angular.module('ng1Module', []) - .component('ng1', ng1Component) - .directive('ng2', adapter.downgradeNg2Component(Ng2Component)); + // Define `ng1Module` + const ng1Module = angular.module('ng1Module', []) + .component('ng1', ng1Component) + .directive('ng2', adapter.downgradeNg2Component(Ng2Component)); - // Define `Ng2Module` - @NgModule({ - declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component], - imports: [BrowserModule] - }) - class Ng2Module { - } + // Define `Ng2Module` + @NgModule({ + declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component], + imports: [BrowserModule] + }) + class Ng2Module { + } - // Bootstrap - const element = html(``); + // Bootstrap + const element = html(``); - adapter.bootstrap(element, ['ng1Module']).ready(ref => { - const ng1 = element.querySelector('ng1') !; - const ng1Controller = angular.element(ng1).controller !('ng1'); + adapter.bootstrap(element, ['ng1Module']).ready(ref => { + const ng1 = element.querySelector('ng1') !; + const ng1Controller = angular.element(ng1).controller !('ng1'); - expect(multiTrim(element.textContent)) - .toBe('Inside: foo, bar | Outside: foo, bar'); + expect(multiTrim(element.textContent)).toBe('Inside: foo, bar | Outside: foo, bar'); - ng1Controller.inputA = {value: 'baz'}; - ng1Controller.inputB = {value: 'qux'}; - $digest(ref); + ng1Controller.inputA = {value: 'baz'}; + ng1Controller.inputB = {value: 'qux'}; + $digest(ref); - expect(multiTrim(element.textContent)) - .toBe('Inside: baz, qux | Outside: foo, bar'); + expect(multiTrim(element.textContent)).toBe('Inside: baz, qux | Outside: foo, bar'); - ng2ComponentInstance.dataA = {value: 'foo2'}; - ng2ComponentInstance.dataB = {value: 'bar2'}; - $digest(ref); + ng2ComponentInstance.dataA = {value: 'foo2'}; + ng2ComponentInstance.dataB = {value: 'bar2'}; + $digest(ref); - expect(multiTrim(element.textContent)) - .toBe('Inside: foo2, bar2 | Outside: foo2, bar2'); + expect(multiTrim(element.textContent)) + .toBe('Inside: foo2, bar2 | Outside: foo2, bar2'); - ref.dispose(); - }); - })); + ref.dispose(); + }); + })); - fixmeIvy('FW-724: upgraded ng1 components are not being rendered') - .it('should support `=` bindings', fakeAsync(() => { - const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); - let ng2ComponentInstance: Ng2Component; + it('should support `=` bindings', fakeAsync(() => { + const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); + let ng2ComponentInstance: Ng2Component; - // Define `ng1Component` - const ng1Component: angular.IComponent = { - template: 'Inside: {{ $ctrl.inputA.value }}, {{ $ctrl.inputB.value }}', - bindings: {inputA: '=inputAttrA', inputB: '='} - }; + // Define `ng1Component` + const ng1Component: angular.IComponent = { + template: 'Inside: {{ $ctrl.inputA.value }}, {{ $ctrl.inputB.value }}', + bindings: {inputA: '=inputAttrA', inputB: '='} + }; - // Define `Ng2Component` - @Component({ - selector: 'ng2', - template: ` - - | Outside: {{ dataA.value }}, {{ dataB.value }} - ` - }) - class Ng2Component { - dataA = {value: 'foo'}; - dataB = {value: 'bar'}; + // Define `Ng2Component` + @Component({ + selector: 'ng2', + template: ` + + | Outside: {{ dataA.value }}, {{ dataB.value }} + ` + }) + class Ng2Component { + dataA = {value: 'foo'}; + dataB = {value: 'bar'}; - constructor() { ng2ComponentInstance = this; } - } + constructor() { ng2ComponentInstance = this; } + } - // Define `ng1Module` - const ng1Module = - angular.module('ng1Module', []) - .component('ng1', ng1Component) - .directive('ng2', adapter.downgradeNg2Component(Ng2Component)); + // Define `ng1Module` + const ng1Module = angular.module('ng1Module', []) + .component('ng1', ng1Component) + .directive('ng2', adapter.downgradeNg2Component(Ng2Component)); - // Define `Ng2Module` - @NgModule({ - declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component], - imports: [BrowserModule] - }) - class Ng2Module { - } + // Define `Ng2Module` + @NgModule({ + declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component], + imports: [BrowserModule] + }) + class Ng2Module { + } - // Bootstrap - const element = html(``); + // Bootstrap + const element = html(``); - adapter.bootstrap(element, ['ng1Module']).ready(ref => { - const ng1 = element.querySelector('ng1') !; - const ng1Controller = angular.element(ng1).controller !('ng1'); + adapter.bootstrap(element, ['ng1Module']).ready(ref => { + const ng1 = element.querySelector('ng1') !; + const ng1Controller = angular.element(ng1).controller !('ng1'); - expect(multiTrim(element.textContent)) - .toBe('Inside: foo, bar | Outside: foo, bar'); + expect(multiTrim(element.textContent)).toBe('Inside: foo, bar | Outside: foo, bar'); - ng1Controller.inputA = {value: 'baz'}; - ng1Controller.inputB = {value: 'qux'}; - $digest(ref); + ng1Controller.inputA = {value: 'baz'}; + ng1Controller.inputB = {value: 'qux'}; + $digest(ref); - expect(multiTrim(element.textContent)) - .toBe('Inside: baz, qux | Outside: baz, qux'); + expect(multiTrim(element.textContent)).toBe('Inside: baz, qux | Outside: baz, qux'); - ng2ComponentInstance.dataA = {value: 'foo2'}; - ng2ComponentInstance.dataB = {value: 'bar2'}; - $digest(ref); + ng2ComponentInstance.dataA = {value: 'foo2'}; + ng2ComponentInstance.dataB = {value: 'bar2'}; + $digest(ref); - expect(multiTrim(element.textContent)) - .toBe('Inside: foo2, bar2 | Outside: foo2, bar2'); + expect(multiTrim(element.textContent)) + .toBe('Inside: foo2, bar2 | Outside: foo2, bar2'); - ref.dispose(); - }); - })); + ref.dispose(); + }); + })); it('should support `&` bindings', fakeAsync(() => { const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); @@ -1084,208 +1070,196 @@ withEachNg1Version(() => { }); })); - fixmeIvy('FW-724: upgraded ng1 components are not being rendered') - .it('should bind properties, events', async(() => { - const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); - const ng1Module = angular.module('ng1', []); + it('should bind properties, events', async(() => { + const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); + const ng1Module = angular.module('ng1', []); - const ng1 = () => { - return { - template: 'Hello {{fullName}}; A: {{modelA}}; B: {{modelB}}; C: {{modelC}}; | ', - scope: { - fullName: '@', - modelA: '=dataA', - modelB: '=dataB', - modelC: '=', - event: '&' - }, - link: function(scope: any) { - scope.$watch('modelB', (v: string) => { - if (v == 'Savkin') { - scope.modelB = 'SAVKIN'; - scope.event('WORKS'); + const ng1 = () => { + return { + template: 'Hello {{fullName}}; A: {{modelA}}; B: {{modelB}}; C: {{modelC}}; | ', + scope: {fullName: '@', modelA: '=dataA', modelB: '=dataB', modelC: '=', event: '&'}, + link: function(scope: any) { + scope.$watch('modelB', (v: string) => { + if (v == 'Savkin') { + scope.modelB = 'SAVKIN'; + scope.event('WORKS'); - // Should not update because [model-a] is uni directional - scope.modelA = 'VICTOR'; - } - }); - } - }; - }; - ng1Module.directive('ng1', ng1); - @Component({ - selector: 'ng2', - template: - '' + - '' + - '{{event}}-{{last}}, {{first}}, {{city}}' - }) - class Ng2 { - first = 'Victor'; - last = 'Savkin'; - city = 'SF'; - event = '?'; - } + // Should not update because [model-a] is uni directional + scope.modelA = 'VICTOR'; + } + }); + } + }; + }; + ng1Module.directive('ng1', ng1); + @Component({ + selector: 'ng2', + template: + '' + + '' + + '{{event}}-{{last}}, {{first}}, {{city}}' + }) + class Ng2 { + first = 'Victor'; + last = 'Savkin'; + city = 'SF'; + event = '?'; + } - @NgModule({ - declarations: [adapter.upgradeNg1Component('ng1'), Ng2], - imports: [BrowserModule], - }) - class Ng2Module { - } + @NgModule({ + declarations: [adapter.upgradeNg1Component('ng1'), Ng2], + imports: [BrowserModule], + }) + class Ng2Module { + } - ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); - const element = html(`
`); - adapter.bootstrap(element, ['ng1']).ready((ref) => { - // we need to do setTimeout, because the EventEmitter uses setTimeout to schedule - // events, and so without this we would not see the events processed. - setTimeout(() => { - expect(multiTrim(document.body.textContent)) - .toEqual( - 'Hello SAVKIN, Victor, SF; A: VICTOR; B: SAVKIN; C: SF; | Hello TEST; A: First; B: Last; C: City; | WORKS-SAVKIN, Victor, SF'); - ref.dispose(); - }, 0); - }); - })); + ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); + const element = html(`
`); + adapter.bootstrap(element, ['ng1']).ready((ref) => { + // we need to do setTimeout, because the EventEmitter uses setTimeout to schedule + // events, and so without this we would not see the events processed. + setTimeout(() => { + expect(multiTrim(document.body.textContent)) + .toEqual( + 'Hello SAVKIN, Victor, SF; A: VICTOR; B: SAVKIN; C: SF; | Hello TEST; A: First; B: Last; C: City; | WORKS-SAVKIN, Victor, SF'); + ref.dispose(); + }, 0); + }); + })); - fixmeIvy('FW-724: upgraded ng1 components are not being rendered') - .it('should bind optional properties', async(() => { - const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); - const ng1Module = angular.module('ng1', []); + it('should bind optional properties', async(() => { + const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); + const ng1Module = angular.module('ng1', []); - const ng1 = () => { - return { - template: 'Hello; A: {{modelA}}; B: {{modelB}}; | ', - scope: {modelA: '=?dataA', modelB: '=?'} - }; - }; - ng1Module.directive('ng1', ng1); - @Component({ - selector: 'ng2', - template: '' + - '' + - '' + - '' - }) - class Ng2 { - first = 'Victor'; - last = 'Savkin'; - } + const ng1 = () => { + return { + template: 'Hello; A: {{modelA}}; B: {{modelB}}; | ', + scope: {modelA: '=?dataA', modelB: '=?'} + }; + }; + ng1Module.directive('ng1', ng1); + @Component({ + selector: 'ng2', + template: '' + + '' + + '' + + '' + }) + class Ng2 { + first = 'Victor'; + last = 'Savkin'; + } - @NgModule({ - declarations: [adapter.upgradeNg1Component('ng1'), Ng2], - imports: [BrowserModule], - }) - class Ng2Module { - } + @NgModule({ + declarations: [adapter.upgradeNg1Component('ng1'), Ng2], + imports: [BrowserModule], + }) + class Ng2Module { + } - ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); - const element = html(`
`); - adapter.bootstrap(element, ['ng1']).ready((ref) => { - // we need to do setTimeout, because the EventEmitter uses setTimeout to schedule - // events, and so without this we would not see the events processed. - setTimeout(() => { - expect(multiTrim(document.body.textContent)) - .toEqual( - 'Hello; A: Victor; B: Savkin; | Hello; A: First; B: Last; | Hello; A: ; B: ; | Hello; A: ; B: ; |'); - ref.dispose(); - }, 0); - }); - })); + ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); + const element = html(`
`); + adapter.bootstrap(element, ['ng1']).ready((ref) => { + // we need to do setTimeout, because the EventEmitter uses setTimeout to schedule + // events, and so without this we would not see the events processed. + setTimeout(() => { + expect(multiTrim(document.body.textContent)) + .toEqual( + 'Hello; A: Victor; B: Savkin; | Hello; A: First; B: Last; | Hello; A: ; B: ; | Hello; A: ; B: ; |'); + ref.dispose(); + }, 0); + }); + })); - fixmeIvy('FW-724: upgraded ng1 components are not being rendered') - .it('should bind properties, events in controller when bindToController is not used', - async(() => { - const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); - const ng1Module = angular.module('ng1', []); + it('should bind properties, events in controller when bindToController is not used', + async(() => { + const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); + const ng1Module = angular.module('ng1', []); - const ng1 = () => { - return { - restrict: 'E', - template: '{{someText}} - Length: {{data.length}}', - scope: {data: '='}, - controller: function($scope: any) { - $scope.someText = 'ng1 - Data: ' + $scope.data; - } - }; - }; + const ng1 = () => { + return { + restrict: 'E', + template: '{{someText}} - Length: {{data.length}}', + scope: {data: '='}, + controller: function($scope: any) { $scope.someText = 'ng1 - Data: ' + $scope.data; } + }; + }; - ng1Module.directive('ng1', ng1); - @Component({ - selector: 'ng2', - template: - '{{someText}} - Length: {{dataList.length}} | ' - }) - class Ng2 { - dataList = [1, 2, 3]; - someText = 'ng2'; - } + ng1Module.directive('ng1', ng1); + @Component({ + selector: 'ng2', + template: + '{{someText}} - Length: {{dataList.length}} | ' + }) + class Ng2 { + dataList = [1, 2, 3]; + someText = 'ng2'; + } - @NgModule({ - declarations: [adapter.upgradeNg1Component('ng1'), Ng2], - imports: [BrowserModule], - }) - class Ng2Module { - } + @NgModule({ + declarations: [adapter.upgradeNg1Component('ng1'), Ng2], + imports: [BrowserModule], + }) + class Ng2Module { + } - ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); - const element = html(`
`); - adapter.bootstrap(element, ['ng1']).ready((ref) => { - // we need to do setTimeout, because the EventEmitter uses setTimeout to schedule - // events, and so without this we would not see the events processed. - setTimeout(() => { - expect(multiTrim(document.body.textContent)) - .toEqual('ng2 - Length: 3 | ng1 - Data: 1,2,3 - Length: 3'); - ref.dispose(); - }, 0); - }); - })); + ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); + const element = html(`
`); + adapter.bootstrap(element, ['ng1']).ready((ref) => { + // we need to do setTimeout, because the EventEmitter uses setTimeout to schedule + // events, and so without this we would not see the events processed. + setTimeout(() => { + expect(multiTrim(document.body.textContent)) + .toEqual('ng2 - Length: 3 | ng1 - Data: 1,2,3 - Length: 3'); + ref.dispose(); + }, 0); + }); + })); - fixmeIvy('FW-724: upgraded ng1 components are not being rendered') - .it('should bind properties, events in link function', async(() => { - const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); - const ng1Module = angular.module('ng1', []); + it('should bind properties, events in link function', async(() => { + const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); + const ng1Module = angular.module('ng1', []); - const ng1 = () => { - return { - restrict: 'E', - template: '{{someText}} - Length: {{data.length}}', - scope: {data: '='}, - link: function($scope: any) { $scope.someText = 'ng1 - Data: ' + $scope.data; } - }; - }; + const ng1 = () => { + return { + restrict: 'E', + template: '{{someText}} - Length: {{data.length}}', + scope: {data: '='}, + link: function($scope: any) { $scope.someText = 'ng1 - Data: ' + $scope.data; } + }; + }; - ng1Module.directive('ng1', ng1); - @Component({ - selector: 'ng2', - template: - '{{someText}} - Length: {{dataList.length}} | ' - }) - class Ng2 { - dataList = [1, 2, 3]; - someText = 'ng2'; - } + ng1Module.directive('ng1', ng1); + @Component({ + selector: 'ng2', + template: + '{{someText}} - Length: {{dataList.length}} | ' + }) + class Ng2 { + dataList = [1, 2, 3]; + someText = 'ng2'; + } - @NgModule({ - declarations: [adapter.upgradeNg1Component('ng1'), Ng2], - imports: [BrowserModule], - }) - class Ng2Module { - } + @NgModule({ + declarations: [adapter.upgradeNg1Component('ng1'), Ng2], + imports: [BrowserModule], + }) + class Ng2Module { + } - ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); - const element = html(`
`); - adapter.bootstrap(element, ['ng1']).ready((ref) => { - // we need to do setTimeout, because the EventEmitter uses setTimeout to schedule - // events, and so without this we would not see the events processed. - setTimeout(() => { - expect(multiTrim(document.body.textContent)) - .toEqual('ng2 - Length: 3 | ng1 - Data: 1,2,3 - Length: 3'); - ref.dispose(); - }, 0); - }); - })); + ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); + const element = html(`
`); + adapter.bootstrap(element, ['ng1']).ready((ref) => { + // we need to do setTimeout, because the EventEmitter uses setTimeout to schedule + // events, and so without this we would not see the events processed. + setTimeout(() => { + expect(multiTrim(document.body.textContent)) + .toEqual('ng2 - Length: 3 | ng1 - Data: 1,2,3 - Length: 3'); + ref.dispose(); + }, 0); + }); + })); it('should support templateUrl fetched from $httpBackend', async(() => { const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); @@ -1468,75 +1442,73 @@ withEachNg1Version(() => { }); })); - fixmeIvy('FW-724: upgraded ng1 components are not being rendered') - .it('should support bindToController', async(() => { - const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); - const ng1Module = angular.module('ng1', []); + it('should support bindToController', async(() => { + const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); + const ng1Module = angular.module('ng1', []); - const ng1 = () => { - return { - scope: {title: '@'}, - bindToController: true, - template: '{{ctl.title}}', - controllerAs: 'ctl', - controller: class {} - }; - }; - ng1Module.directive('ng1', ng1); + const ng1 = () => { + return { + scope: {title: '@'}, + bindToController: true, + template: '{{ctl.title}}', + controllerAs: 'ctl', + controller: class {} + }; + }; + ng1Module.directive('ng1', ng1); - @Component({selector: 'ng2', template: ''}) - class Ng2 { - } + @Component({selector: 'ng2', template: ''}) + class Ng2 { + } - @NgModule({ - declarations: [adapter.upgradeNg1Component('ng1'), Ng2], - imports: [BrowserModule], - }) - class Ng2Module { - } + @NgModule({ + declarations: [adapter.upgradeNg1Component('ng1'), Ng2], + imports: [BrowserModule], + }) + class Ng2Module { + } - ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); - const element = html(`
`); - adapter.bootstrap(element, ['ng1']).ready((ref) => { - expect(multiTrim(document.body.textContent)).toEqual('WORKS'); - ref.dispose(); - }); - })); + ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); + const element = html(`
`); + adapter.bootstrap(element, ['ng1']).ready((ref) => { + expect(multiTrim(document.body.textContent)).toEqual('WORKS'); + ref.dispose(); + }); + })); - fixmeIvy('FW-724: upgraded ng1 components are not being rendered') - .it('should support bindToController with bindings', async(() => { - const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); - const ng1Module = angular.module('ng1', []); + it('should support bindToController with bindings', async(() => { + const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); + const ng1Module = angular.module('ng1', []); - const ng1 = () => { - return { - scope: {}, - bindToController: {title: '@'}, - template: '{{ctl.title}}', - controllerAs: 'ctl', - controller: class {} - }; - }; - ng1Module.directive('ng1', ng1); + const ng1 = () => { + return { + scope: {}, + bindToController: {title: '@'}, + template: '{{ctl.title}}', + controllerAs: 'ctl', + controller: class {} + }; + }; + ng1Module.directive('ng1', ng1); - @Component({selector: 'ng2', template: ''}) - class Ng2 { - } + @Component({selector: 'ng2', template: ''}) + class Ng2 { + } - @NgModule({ - declarations: [adapter.upgradeNg1Component('ng1'), Ng2], - imports: [BrowserModule], - }) - class Ng2Module { - } + @NgModule({ + declarations: [adapter.upgradeNg1Component('ng1'), Ng2], + imports: [BrowserModule], + }) + class Ng2Module { + } - ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); - const element = html(`
`); - adapter.bootstrap(element, ['ng1']).ready((ref) => { - expect(multiTrim(document.body.textContent)).toEqual('WORKS'); - ref.dispose(); - }); - })); + ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2)); + const element = html(`
`); + adapter.bootstrap(element, ['ng1']).ready((ref) => { + expect(multiTrim(document.body.textContent)).toEqual('WORKS'); + ref.dispose(); + }); + })); it('should support single require in linking fn', async(() => { const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); diff --git a/packages/upgrade/test/static/integration/upgrade_component_spec.ts b/packages/upgrade/test/static/integration/upgrade_component_spec.ts index fbd2316b1a..0f69b35ce8 100644 --- a/packages/upgrade/test/static/integration/upgrade_component_spec.ts +++ b/packages/upgrade/test/static/integration/upgrade_component_spec.ts @@ -2134,8 +2134,7 @@ withEachNg1Version(() => { }); describe('transclusion', () => { - fixmeIvy( - `Error: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.`) + fixmeIvy(`FW-863: Error: Failed to execute 'insertBefore' on 'Node'`) .it('should support single-slot transclusion', async(() => { let ng2ComponentAInstance: Ng2ComponentA; let ng2ComponentBInstance: Ng2ComponentB; @@ -2531,8 +2530,7 @@ withEachNg1Version(() => { }); })); - fixmeIvy( - `Error: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.`) + fixmeIvy(`FW-863: Error: Failed to execute 'insertBefore' on 'Node'`) .it('should support structural directives in transcluded content', async(() => { let ng2ComponentInstance: Ng2Component; @@ -3336,106 +3334,98 @@ withEachNg1Version(() => { })); - fixmeIvy( - 'FW-843: destroy hooks are not registered on upgraded ng1 components contained in ng2 component templates under ivy') - .it('should call `$onDestroy()` on controller', async(() => { - const controllerOnDestroyA = jasmine.createSpy('controllerOnDestroyA'); - const controllerOnDestroyB = jasmine.createSpy('controllerOnDestroyB'); + it('should call `$onDestroy()` on controller', async(() => { + const controllerOnDestroyA = jasmine.createSpy('controllerOnDestroyA'); + const controllerOnDestroyB = jasmine.createSpy('controllerOnDestroyB'); - // Define `ng1Directive` - const ng1DirectiveA: angular.IDirective = { - template: 'ng1A', - scope: {}, - bindToController: false, - controllerAs: '$ctrl', - controller: class {$onDestroy() { controllerOnDestroyA(); }} - }; + // Define `ng1Directive` + const ng1DirectiveA: angular.IDirective = { + template: 'ng1A', + scope: {}, + bindToController: false, + controllerAs: '$ctrl', + controller: class {$onDestroy() { controllerOnDestroyA(); }} + }; - const ng1DirectiveB: angular.IDirective = { - template: 'ng1B', - scope: {}, - bindToController: true, - controllerAs: '$ctrl', - controller: class { - constructor() { (this as any)['$onDestroy'] = controllerOnDestroyB; } - } - }; + const ng1DirectiveB: angular.IDirective = { + template: 'ng1B', + scope: {}, + bindToController: true, + controllerAs: '$ctrl', + controller: + class {constructor() { (this as any)['$onDestroy'] = controllerOnDestroyB; }} + }; - // Define `Ng1ComponentFacade` - @Directive({selector: 'ng1A'}) - class Ng1ComponentAFacade extends UpgradeComponent { - constructor(elementRef: ElementRef, injector: Injector) { - super('ng1A', elementRef, injector); - } - } + // Define `Ng1ComponentFacade` + @Directive({selector: 'ng1A'}) + class Ng1ComponentAFacade extends UpgradeComponent { + constructor(elementRef: ElementRef, injector: Injector) { + super('ng1A', elementRef, injector); + } + } - @Directive({selector: 'ng1B'}) - class Ng1ComponentBFacade extends UpgradeComponent { - constructor(elementRef: ElementRef, injector: Injector) { - super('ng1B', elementRef, injector); - } - } + @Directive({selector: 'ng1B'}) + class Ng1ComponentBFacade extends UpgradeComponent { + constructor(elementRef: ElementRef, injector: Injector) { + super('ng1B', elementRef, injector); + } + } - // Define `Ng2Component` - @Component({ - selector: 'ng2', - template: '
|
' - }) - class Ng2Component { - // TODO(issue/24571): remove '!'. - @Input() show !: boolean; - } + // Define `Ng2Component` + @Component( + {selector: 'ng2', template: '
|
'}) + class Ng2Component { + // TODO(issue/24571): remove '!'. + @Input() show !: boolean; + } - // Define `ng1Module` - const ng1Module = - angular.module('ng1Module', []) - .directive('ng1A', () => ng1DirectiveA) - .directive('ng1B', () => ng1DirectiveB) - .directive('ng2', downgradeComponent({component: Ng2Component})); + // Define `ng1Module` + const ng1Module = angular.module('ng1Module', []) + .directive('ng1A', () => ng1DirectiveA) + .directive('ng1B', () => ng1DirectiveB) + .directive('ng2', downgradeComponent({component: Ng2Component})); - // Define `Ng2Module` - @NgModule({ - declarations: [Ng1ComponentAFacade, Ng1ComponentBFacade, Ng2Component], - entryComponents: [Ng2Component], - imports: [BrowserModule, UpgradeModule] - }) - class Ng2Module { - ngDoBootstrap() {} - } + // Define `Ng2Module` + @NgModule({ + declarations: [Ng1ComponentAFacade, Ng1ComponentBFacade, Ng2Component], + entryComponents: [Ng2Component], + imports: [BrowserModule, UpgradeModule] + }) + class Ng2Module { + ngDoBootstrap() {} + } - // Bootstrap - const element = - html(''); + // Bootstrap + const element = html(''); - bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => { - const $rootScope = - adapter.$injector.get('$rootScope') as angular.IRootScopeService; + bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => { + const $rootScope = adapter.$injector.get('$rootScope') as angular.IRootScopeService; - expect(multiTrim(document.body.textContent)).toBe('ng1A | ng1B'); - expect(controllerOnDestroyA).not.toHaveBeenCalled(); - expect(controllerOnDestroyB).not.toHaveBeenCalled(); + expect(multiTrim(document.body.textContent)).toBe('ng1A | ng1B'); + expect(controllerOnDestroyA).not.toHaveBeenCalled(); + expect(controllerOnDestroyB).not.toHaveBeenCalled(); - $rootScope.$apply('destroyFromNg1 = true'); + $rootScope.$apply('destroyFromNg1 = true'); - expect(multiTrim(document.body.textContent)).toBe(''); - expect(controllerOnDestroyA).toHaveBeenCalled(); - expect(controllerOnDestroyB).toHaveBeenCalled(); + expect(multiTrim(document.body.textContent)).toBe(''); + expect(controllerOnDestroyA).toHaveBeenCalled(); + expect(controllerOnDestroyB).toHaveBeenCalled(); - controllerOnDestroyA.calls.reset(); - controllerOnDestroyB.calls.reset(); - $rootScope.$apply('destroyFromNg1 = false'); + controllerOnDestroyA.calls.reset(); + controllerOnDestroyB.calls.reset(); + $rootScope.$apply('destroyFromNg1 = false'); - expect(multiTrim(document.body.textContent)).toBe('ng1A | ng1B'); - expect(controllerOnDestroyA).not.toHaveBeenCalled(); - expect(controllerOnDestroyB).not.toHaveBeenCalled(); + expect(multiTrim(document.body.textContent)).toBe('ng1A | ng1B'); + expect(controllerOnDestroyA).not.toHaveBeenCalled(); + expect(controllerOnDestroyB).not.toHaveBeenCalled(); - $rootScope.$apply('destroyFromNg2 = true'); + $rootScope.$apply('destroyFromNg2 = true'); - expect(multiTrim(document.body.textContent)).toBe(''); - expect(controllerOnDestroyA).toHaveBeenCalled(); - expect(controllerOnDestroyB).toHaveBeenCalled(); - }); - })); + expect(multiTrim(document.body.textContent)).toBe(''); + expect(controllerOnDestroyA).toHaveBeenCalled(); + expect(controllerOnDestroyB).toHaveBeenCalled(); + }); + })); it('should not call `$onDestroy()` on scope', async(() => { const scopeOnDestroy = jasmine.createSpy('scopeOnDestroy'); @@ -3968,7 +3958,6 @@ withEachNg1Version(() => { }); })); - // fixmeIvy('FW-724: upgraded ng1 components are not being rendered') it('should support ng2 > ng1 > ng2 (with inputs/outputs)', fakeAsync(() => { let ng2ComponentAInstance: Ng2ComponentA; let ng2ComponentBInstance: Ng2ComponentB;