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;