{{valueFromPromise}}',
+ selector: 'ng2',
+ template: `{{l('2A')}}
{{l('2C')}}`
})
- class ChildComponent {
- valueFromPromise?: number;
- @Input()
- set value(v: number) { expect(NgZone.isInAngularZone()).toBe(true); }
-
- constructor(private zone: NgZone) {}
-
- ngOnChanges(changes: SimpleChanges) {
- if (changes['value'].isFirstChange()) return;
-
- // HACK(ivy): Using setTimeout allows this test to pass but hides the ivy
- // renderer timing BC.
- // setTimeout(() => {
- // expect(element.textContent).toEqual('5');
- // upgradeRef.dispose();
- // }, 0);
- this.zone.onMicrotaskEmpty.subscribe(() => {
- expect(element.textContent).toEqual('5');
- upgradeRef.dispose();
- });
-
- Promise.resolve().then(
- () => this.valueFromPromise = changes['value'].currentValue);
- }
+ class Ng2 {
+ l: any;
+ constructor() { this.l = l; }
}
- @NgModule({declarations: [AppComponent, ChildComponent], imports: [BrowserModule]})
+ @NgModule({
+ declarations: [
+ adapter.upgradeNg1Component('ng1a'), adapter.upgradeNg1Component('ng1b'), Ng2
+ ],
+ imports: [BrowserModule],
+ })
class Ng2Module {
}
- const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
- const ng1Module = angular.module('ng1', []).directive(
- 'myApp', adapter.downgradeNg2Component(AppComponent));
-
- const element = html('
');
+ ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+ const element =
+ html('
');
adapter.bootstrap(element, ['ng1']).ready((ref) => {
- upgradeRef = ref;
- appComponent.value = 5;
+ 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();
});
}));
+
+ it('should propagate changes to a downgraded component inside the ngZone', async(() => {
+ let appComponent: AppComponent;
+ let upgradeRef: UpgradeAdapterRef;
+
+ @Component({selector: 'my-app', template: '
'})
+ class AppComponent {
+ value?: number;
+ constructor() { appComponent = this; }
+ }
+
+ @Component({
+ selector: 'my-child',
+ template: '
{{valueFromPromise}}',
+ })
+ class ChildComponent {
+ valueFromPromise?: number;
+ @Input()
+ set value(v: number) { expect(NgZone.isInAngularZone()).toBe(true); }
+
+ constructor(private zone: NgZone) {}
+
+ ngOnChanges(changes: SimpleChanges) {
+ if (changes['value'].isFirstChange()) return;
+
+ this.zone.onMicrotaskEmpty.subscribe(() => {
+ expect(element.textContent).toEqual('5');
+ upgradeRef.dispose();
+ });
+
+ Promise.resolve().then(() => this.valueFromPromise = changes['value'].currentValue);
+ }
+ }
+
+ @NgModule({declarations: [AppComponent, ChildComponent], imports: [BrowserModule]})
+ class Ng2Module {
+ }
+
+ const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+ const ng1Module = angular.module('ng1', []).directive(
+ 'myApp', adapter.downgradeNg2Component(AppComponent));
+
+ const element = html('
');
+
+ adapter.bootstrap(element, ['ng1']).ready((ref) => {
+ upgradeRef = ref;
+ appComponent.value = 5;
+ });
+ }));
+
// This test demonstrates https://github.com/angular/angular/issues/6385
// which was invalidly fixed by https://github.com/angular/angular/pull/6386
// it('should not trigger $digest from an async operation in a watcher', async(() => {
diff --git a/packages/upgrade/test/static/integration/change_detection_spec.ts b/packages/upgrade/test/static/integration/change_detection_spec.ts
index 9268165ce4..b74c08c4ef 100644
--- a/packages/upgrade/test/static/integration/change_detection_spec.ts
+++ b/packages/upgrade/test/static/integration/change_detection_spec.ts
@@ -21,116 +21,111 @@ withEachNg1Version(() => {
beforeEach(() => destroyPlatform());
afterEach(() => destroyPlatform());
- it('should interleave scope and component expressions', async(() => {
- const log: string[] = [];
- const l = (value: string) => {
- log.push(value);
- return value + ';';
- };
+ fixmeIvy('FW-918: Create API and mental model to work with Host Element; and ChangeDetections')
+ .it('should interleave scope and component expressions', async(() => {
+ const log: string[] = [];
+ const l = (value: string) => {
+ log.push(value);
+ return value + ';';
+ };
- @Directive({selector: 'ng1a'})
- class Ng1aComponent extends UpgradeComponent {
- constructor(elementRef: ElementRef, injector: Injector) {
- super('ng1a', elementRef, injector);
- }
- }
-
- @Directive({selector: 'ng1b'})
- class Ng1bComponent extends UpgradeComponent {
- constructor(elementRef: ElementRef, injector: Injector) {
- super('ng1b', elementRef, injector);
- }
- }
-
- @Component({
- selector: 'ng2',
- template: `{{l('2A')}}
{{l('2B')}}
{{l('2C')}}`
- })
- class Ng2Component {
- l = l;
- }
-
- @NgModule({
- declarations: [Ng1aComponent, Ng1bComponent, Ng2Component],
- entryComponents: [Ng2Component],
- imports: [BrowserModule, UpgradeModule]
- })
- class Ng2Module {
- ngDoBootstrap() {}
- }
-
- const ng1Module = angular.module('ng1', [])
- .directive('ng1a', () => ({template: '{{ l(\'ng1a\') }}'}))
- .directive('ng1b', () => ({template: '{{ l(\'ng1b\') }}'}))
- .directive('ng2', downgradeComponent({component: Ng2Component}))
- .run(($rootScope: angular.IRootScopeService) => {
- $rootScope.l = l;
- $rootScope.reset = () => log.length = 0;
- });
-
- const element =
- html('
{{reset(); l(\'1A\');}}{{l(\'1B\')}}{{l(\'1C\')}}
');
- bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
- expect(document.body.textContent).toEqual('1A;2A;ng1a;2B;ng1b;2C;1C;');
- expect(log).toEqual(['1A', '1C', '2A', '2B', '2C', 'ng1a', 'ng1b']);
- });
- }));
-
- fixmeIvy(
- 'FW-712: Rendering is being run on next "animation frame" rather than "Zone.microTaskEmpty" trigger')
- .it('should propagate changes to a downgraded component inside the ngZone', async(() => {
- const element = html('
');
- let appComponent: AppComponent;
-
- @Component({selector: 'my-app', template: '
'})
- class AppComponent {
- value?: number;
- constructor() { appComponent = this; }
- }
-
- @Component({
- selector: 'my-child',
- template: '
{{ valueFromPromise }}
',
- })
- class ChildComponent {
- valueFromPromise?: number;
- @Input()
- set value(v: number) { expect(NgZone.isInAngularZone()).toBe(true); }
-
- constructor(private zone: NgZone) {}
-
- ngOnChanges(changes: SimpleChanges) {
- if (changes['value'].isFirstChange()) return;
-
- // HACK(ivy): Using setTimeout allows this test to pass but hides the ivy renderer
- // timing BC.
- // setTimeout(() => expect(element.textContent).toEqual('5'), 0);
- this.zone.onMicrotaskEmpty.subscribe(
- () => { expect(element.textContent).toEqual('5'); });
-
- // Create a micro-task to update the value to be rendered asynchronously.
- Promise.resolve().then(
- () => this.valueFromPromise = changes['value'].currentValue);
+ @Directive({selector: 'ng1a'})
+ class Ng1aComponent extends UpgradeComponent {
+ constructor(elementRef: ElementRef, injector: Injector) {
+ super('ng1a', elementRef, injector);
}
}
+ @Directive({selector: 'ng1b'})
+ class Ng1bComponent extends UpgradeComponent {
+ constructor(elementRef: ElementRef, injector: Injector) {
+ super('ng1b', elementRef, injector);
+ }
+ }
+
+ @Component({
+ selector: 'ng2',
+ template: `{{l('2A')}}
{{l('2B')}}
{{l('2C')}}`
+ })
+ class Ng2Component {
+ l = l;
+ }
+
@NgModule({
- declarations: [AppComponent, ChildComponent],
- entryComponents: [AppComponent],
+ declarations: [Ng1aComponent, Ng1bComponent, Ng2Component],
+ entryComponents: [Ng2Component],
imports: [BrowserModule, UpgradeModule]
})
class Ng2Module {
ngDoBootstrap() {}
}
- const ng1Module = angular.module('ng1', []).directive(
- 'myApp', downgradeComponent({component: AppComponent}));
+ const ng1Module = angular.module('ng1', [])
+ .directive('ng1a', () => ({template: '{{ l(\'ng1a\') }}'}))
+ .directive('ng1b', () => ({template: '{{ l(\'ng1b\') }}'}))
+ .directive('ng2', downgradeComponent({component: Ng2Component}))
+ .run(($rootScope: angular.IRootScopeService) => {
+ $rootScope.l = l;
+ $rootScope.reset = () => log.length = 0;
+ });
+ const element =
+ html('
{{reset(); l(\'1A\');}}{{l(\'1B\')}}{{l(\'1C\')}}
');
bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
- appComponent.value = 5;
+ expect(document.body.textContent).toEqual('1A;2A;ng1a;2B;ng1b;2C;1C;');
+ expect(log).toEqual(['1A', '1C', '2A', '2B', '2C', 'ng1a', 'ng1b']);
});
}));
+ it('should propagate changes to a downgraded component inside the ngZone', async(() => {
+ const element = html('
');
+ let appComponent: AppComponent;
+
+ @Component({selector: 'my-app', template: '
'})
+ class AppComponent {
+ value?: number;
+ constructor() { appComponent = this; }
+ }
+
+ @Component({
+ selector: 'my-child',
+ template: '
{{ valueFromPromise }}
',
+ })
+ class ChildComponent {
+ valueFromPromise?: number;
+ @Input()
+ set value(v: number) { expect(NgZone.isInAngularZone()).toBe(true); }
+
+ constructor(private zone: NgZone) {}
+
+ ngOnChanges(changes: SimpleChanges) {
+ if (changes['value'].isFirstChange()) return;
+
+ this.zone.onMicrotaskEmpty.subscribe(
+ () => { expect(element.textContent).toEqual('5'); });
+
+ // Create a micro-task to update the value to be rendered asynchronously.
+ Promise.resolve().then(() => this.valueFromPromise = changes['value'].currentValue);
+ }
+ }
+
+ @NgModule({
+ declarations: [AppComponent, ChildComponent],
+ entryComponents: [AppComponent],
+ imports: [BrowserModule, UpgradeModule]
+ })
+ class Ng2Module {
+ ngDoBootstrap() {}
+ }
+
+ const ng1Module = angular.module('ng1', []).directive(
+ 'myApp', downgradeComponent({component: AppComponent}));
+
+ bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
+ appComponent.value = 5;
+ });
+ }));
+
// This test demonstrates https://github.com/angular/angular/issues/6385
// which was invalidly fixed by https://github.com/angular/angular/pull/6386
// it('should not trigger $digest from an async operation in a watcher', async(() => {