honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(upgrade): pass correct values to `ngOnChanges` for interpolation bindings (#14301) 

Previously, the `previousValue` and `currentValue` arguments passed to the
`SimpleChange` constructor were swapped for interpolation bindings.

This commit also refactors the code, so that interpolation bindings and property
bindings share the same implementation, and fixes some broken tests (that hide
failures by allowing the `$exceptionHandler` to swallow thrown exceptions).

PR Close #14301
This commit is contained in:
Georgios Kalpakas 2017-02-04 17:19:09 +02:00 committed by Miško Hevery
parent 701074cf89
commit 1e3dd3dd9b
5 changed files with 88 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
modules/@angular/upgrade/src/common/downgrade_component_adapter.ts
View File

@ -78,17 +78,15 @@ export class DowngradeComponentAdapter {
let expr: any /** TODO #9100 */ = null; let expr: any /** TODO #9100 */ = null;
if (attrs.hasOwnProperty(input.attr)) { if (attrs.hasOwnProperty(input.attr)) {
const observeFn = ((prop: any /** TODO #9100 */) => { const observeFn = (prop => {
let prevValue = INITIAL_VALUE; let prevValue = INITIAL_VALUE;
return (value: any /** TODO #9100 */) => { return (currValue: any) => {
if (this.inputChanges !== null) { if (prevValue === INITIAL_VALUE) {
this.inputChangeCount++; prevValue = currValue;
this.inputChanges[prop] = new SimpleChange(
value, prevValue === INITIAL_VALUE ? value : prevValue,
prevValue === INITIAL_VALUE);
prevValue = value;
} }
this.component[prop] = value;
this.updateInput(prop, prevValue, currValue);
prevValue = currValue;
}; };
})(input.prop); })(input.prop);
attrs.$observe(input.attr, observeFn); attrs.$observe(input.attr, observeFn);
@ -104,14 +102,8 @@ export class DowngradeComponentAdapter {
} }
if (expr != null) { if (expr != null) {
const watchFn = const watchFn =
((prop: any /** TODO #9100 */) => ( (prop => (currValue: any, prevValue: any) =>
value: any /** TODO #9100 */, prevValue: any /** TODO #9100 */) => { this.updateInput(prop, prevValue, currValue))(input.prop);
if (this.inputChanges != null) {
this.inputChangeCount++;
this.inputChanges[prop] = new SimpleChange(prevValue, value, prevValue === value);
}
this.component[prop] = value;
})(input.prop);
this.componentScope.$watch(expr, watchFn); this.componentScope.$watch(expr, watchFn);
} }
} }
@ -185,4 +177,13 @@ export class DowngradeComponentAdapter {
} }
getInjector(): Injector { return this.componentRef && this.componentRef.injector; } getInjector(): Injector { return this.componentRef && this.componentRef.injector; }
private updateInput(prop: string, prevValue: any, currValue: any) {
if (this.inputChanges) {
this.inputChangeCount++;
this.inputChanges[prop] = new SimpleChange(prevValue, currValue, prevValue === currValue);
}
this.component[prop] = currValue;
}
} }

18
modules/@angular/upgrade/test/dynamic/upgrade_spec.ts
View File

@ -290,9 +290,11 @@ export function main() {
it('should bind properties, events', async(() => { it('should bind properties, events', async(() => {
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
const ng1Module = angular.module('ng1', []); const ng1Module =
angular.module('ng1', []).value('$exceptionHandler', (err: any) => { throw err; });
ng1Module.run(($rootScope: any) => { ng1Module.run(($rootScope: any) => {
$rootScope.name = 'world';
$rootScope.dataA = 'A'; $rootScope.dataA = 'A';
$rootScope.dataB = 'B'; $rootScope.dataB = 'B';
$rootScope.modelA = 'initModelA'; $rootScope.modelA = 'initModelA';
@ -363,9 +365,10 @@ export function main() {
break; break;
case 1: case 1:
assertChange('twoWayA', 'newA'); assertChange('twoWayA', 'newA');
assertChange('twoWayB', 'newB');
break; break;
case 2: case 2:
assertChange('twoWayB', 'newB'); assertChange('interpolate', 'Hello everyone');
break; break;
default: default:
throw new Error('Called too many times! ' + JSON.stringify(changes)); throw new Error('Called too many times! ' + JSON.stringify(changes));
@ -380,7 +383,7 @@ export function main() {
}).Class({constructor: function() {}}); }).Class({constructor: function() {}});
const element = html(`<div> const element = html(`<div>
<ng2 literal="Text" interpolate="Hello {{'world'}}" <ng2 literal="Text" interpolate="Hello {{name}}"
bind-one-way-a="dataA" [one-way-b]="dataB" bind-one-way-a="dataA" [one-way-b]="dataB"
bindon-two-way-a="modelA" [(two-way-b)]="modelB" bindon-two-way-a="modelA" [(two-way-b)]="modelB"
on-event-a='eventA=$event' (event-b)="eventB=$event"></ng2> on-event-a='eventA=$event' (event-b)="eventB=$event"></ng2>
@ -393,6 +396,15 @@ export function main() {
'literal: Text; interpolate: Hello world; ' + 'literal: Text; interpolate: Hello world; ' +
'oneWayA: A; oneWayB: B; twoWayA: newA; twoWayB: newB; (2) | ' + 'oneWayA: A; oneWayB: B; twoWayA: newA; twoWayB: newB; (2) | ' +
'modelA: newA; modelB: newB; eventA: aFired; eventB: bFired;'); 'modelA: newA; modelB: newB; eventA: aFired; eventB: bFired;');
ref.ng1RootScope.$apply('name = "everyone"');
expect(multiTrim(document.body.textContent))
.toEqual(
'ignore: -; ' +
'literal: Text; interpolate: Hello everyone; ' +
'oneWayA: A; oneWayB: B; twoWayA: newA; twoWayB: newB; (3) | ' +
'modelA: newA; modelB: newB; eventA: aFired; eventB: bFired;');
ref.dispose(); ref.dispose();
}); });

22
modules/@angular/upgrade/test/static/integration/downgrade_component_spec.ts
View File

@ -13,7 +13,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import * as angular from '@angular/upgrade/src/common/angular1'; import * as angular from '@angular/upgrade/src/common/angular1';
import {UpgradeModule, downgradeComponent} from '@angular/upgrade/static'; import {UpgradeModule, downgradeComponent} from '@angular/upgrade/static';
import {bootstrap, html, multiTrim} from '../test_helpers'; import {$apply, bootstrap, html, multiTrim} from '../test_helpers';
export function main() { export function main() {
describe('downgrade ng2 component', () => { describe('downgrade ng2 component', () => {
@ -22,8 +22,11 @@ export function main() {
afterEach(() => destroyPlatform()); afterEach(() => destroyPlatform());
it('should bind properties, events', async(() => { it('should bind properties, events', async(() => {
const ng1Module =
const ng1Module = angular.module('ng1', []).run(($rootScope: angular.IScope) => { angular.module('ng1', []).value('$exceptionHandler', (err: any) => {
throw err;
}).run(($rootScope: angular.IScope) => {
$rootScope['name'] = 'world';
$rootScope['dataA'] = 'A'; $rootScope['dataA'] = 'A';
$rootScope['dataB'] = 'B'; $rootScope['dataB'] = 'B';
$rootScope['modelA'] = 'initModelA'; $rootScope['modelA'] = 'initModelA';
@ -94,9 +97,10 @@ export function main() {
break; break;
case 1: case 1:
assertChange('twoWayA', 'newA'); assertChange('twoWayA', 'newA');
assertChange('twoWayB', 'newB');
break; break;
case 2: case 2:
assertChange('twoWayB', 'newB'); assertChange('interpolate', 'Hello everyone');
break; break;
default: default:
throw new Error('Called too many times! ' + JSON.stringify(changes)); throw new Error('Called too many times! ' + JSON.stringify(changes));
@ -125,7 +129,7 @@ export function main() {
const element = html(` const element = html(`
<div> <div>
<ng2 literal="Text" interpolate="Hello {{'world'}}" <ng2 literal="Text" interpolate="Hello {{name}}"
bind-one-way-a="dataA" [one-way-b]="dataB" bind-one-way-a="dataA" [one-way-b]="dataB"
bindon-two-way-a="modelA" [(two-way-b)]="modelB" bindon-two-way-a="modelA" [(two-way-b)]="modelB"
on-event-a='eventA=$event' (event-b)="eventB=$event"></ng2> on-event-a='eventA=$event' (event-b)="eventB=$event"></ng2>
@ -139,6 +143,14 @@ export function main() {
'literal: Text; interpolate: Hello world; ' + 'literal: Text; interpolate: Hello world; ' +
'oneWayA: A; oneWayB: B; twoWayA: newA; twoWayB: newB; (2) | ' + 'oneWayA: A; oneWayB: B; twoWayA: newA; twoWayB: newB; (2) | ' +
'modelA: newA; modelB: newB; eventA: aFired; eventB: bFired;'); 'modelA: newA; modelB: newB; eventA: aFired; eventB: bFired;');
$apply(upgrade, 'name = "everyone"');
expect(multiTrim(document.body.textContent))
.toEqual(
'ignore: -; ' +
'literal: Text; interpolate: Hello everyone; ' +
'oneWayA: A; oneWayB: B; twoWayA: newA; twoWayB: newB; (3) | ' +
'modelA: newA; modelB: newB; eventA: aFired; eventB: bFired;');
}); });
})); }));

50
modules/@angular/upgrade/test/static/integration/upgrade_component_spec.ts
View File

@ -13,7 +13,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import * as angular from '@angular/upgrade/src/common/angular1'; import * as angular from '@angular/upgrade/src/common/angular1';
import {UpgradeComponent, UpgradeModule, downgradeComponent} from '@angular/upgrade/static'; import {UpgradeComponent, UpgradeModule, downgradeComponent} from '@angular/upgrade/static';
import {bootstrap, digest, html, multiTrim} from '../test_helpers'; import {$digest, bootstrap, html, multiTrim} from '../test_helpers';
export function main() { export function main() {
describe('upgrade ng1 component', () => { describe('upgrade ng1 component', () => {
@ -530,7 +530,7 @@ export function main() {
ng2ComponentInstance.dataA = 'foo2'; ng2ComponentInstance.dataA = 'foo2';
ng2ComponentInstance.dataB = 'bar2'; ng2ComponentInstance.dataB = 'bar2';
digest(adapter); $digest(adapter);
tick(); tick();
expect(multiTrim(element.textContent)) expect(multiTrim(element.textContent))
@ -605,7 +605,7 @@ export function main() {
ng2ComponentInstance.dataA = {value: 'foo2'}; ng2ComponentInstance.dataA = {value: 'foo2'};
ng2ComponentInstance.dataB = {value: 'bar2'}; ng2ComponentInstance.dataB = {value: 'bar2'};
digest(adapter); $digest(adapter);
tick(); tick();
expect(multiTrim(element.textContent)) expect(multiTrim(element.textContent))
@ -682,7 +682,7 @@ export function main() {
ng2ComponentInstance.dataA = {value: 'foo2'}; ng2ComponentInstance.dataA = {value: 'foo2'};
ng2ComponentInstance.dataB = {value: 'bar2'}; ng2ComponentInstance.dataB = {value: 'bar2'};
digest(adapter); $digest(adapter);
tick(); tick();
expect(multiTrim(element.textContent)) expect(multiTrim(element.textContent))
@ -929,7 +929,7 @@ export function main() {
ng1Controller1.outputA({value: 'foo again'}); ng1Controller1.outputA({value: 'foo again'});
ng1Controller2.outputB('bar again'); ng1Controller2.outputB('bar again');
digest(adapter); $digest(adapter);
tick(); tick();
expect(ng1Controller0.inputA).toEqual({value: 'foo again'}); expect(ng1Controller0.inputA).toEqual({value: 'foo again'});
@ -1010,7 +1010,7 @@ export function main() {
.toBe('ng1 - Data: [4,5] - Length: 2 | ng2 - Data: 4,5 - Length: 2'); .toBe('ng1 - Data: [4,5] - Length: 2 | ng2 - Data: 4,5 - Length: 2');
ng1Controller.$scope.outputA(6); ng1Controller.$scope.outputA(6);
digest(adapter); $digest(adapter);
tick(); tick();
expect(ng1Controller.$scope.inputA).toEqual([4, 5, 6]); expect(ng1Controller.$scope.inputA).toEqual([4, 5, 6]);
@ -1858,7 +1858,7 @@ export function main() {
// Change: Re-assign `data` // Change: Re-assign `data`
ng2ComponentInstance.data = {foo: 'baz'}; ng2ComponentInstance.data = {foo: 'baz'};
digest(adapter); $digest(adapter);
tick(); tick();
expect(scopeOnChanges.calls.count()).toBe(2); expect(scopeOnChanges.calls.count()).toBe(2);
@ -1879,7 +1879,7 @@ export function main() {
// No change: Update internal property // No change: Update internal property
ng2ComponentInstance.data.foo = 'qux'; ng2ComponentInstance.data.foo = 'qux';
digest(adapter); $digest(adapter);
tick(); tick();
expect(scopeOnChanges.calls.count()).toBe(2); expect(scopeOnChanges.calls.count()).toBe(2);
@ -1888,7 +1888,7 @@ export function main() {
// Change: Re-assign `data` (even if it looks the same) // Change: Re-assign `data` (even if it looks the same)
ng2ComponentInstance.data = {foo: 'qux'}; ng2ComponentInstance.data = {foo: 'qux'};
digest(adapter); $digest(adapter);
tick(); tick();
expect(scopeOnChanges.calls.count()).toBe(3); expect(scopeOnChanges.calls.count()).toBe(3);
@ -2008,7 +2008,7 @@ export function main() {
// Change: Re-assign `data` // Change: Re-assign `data`
ng2ComponentInstance.data = {foo: 'baz'}; ng2ComponentInstance.data = {foo: 'baz'};
digest(adapter); $digest(adapter);
tick(); tick();
expect(scopeOnChangesA.calls.count()).toBe(2); expect(scopeOnChangesA.calls.count()).toBe(2);
@ -2029,7 +2029,7 @@ export function main() {
// No change: Update internal property // No change: Update internal property
ng2ComponentInstance.data.foo = 'qux'; ng2ComponentInstance.data.foo = 'qux';
digest(adapter); $digest(adapter);
tick(); tick();
expect(scopeOnChangesA.calls.count()).toBe(2); expect(scopeOnChangesA.calls.count()).toBe(2);
@ -2039,7 +2039,7 @@ export function main() {
// Change: Re-assign `data` (even if it looks the same) // Change: Re-assign `data` (even if it looks the same)
ng2ComponentInstance.data = {foo: 'qux'}; ng2ComponentInstance.data = {foo: 'qux'};
digest(adapter); $digest(adapter);
tick(); tick();
expect(scopeOnChangesA.calls.count()).toBe(3); expect(scopeOnChangesA.calls.count()).toBe(3);
@ -2399,12 +2399,12 @@ export function main() {
// Run a `$digest` // Run a `$digest`
// (Since it's the first one since the `$doCheck` watcher was added, // (Since it's the first one since the `$doCheck` watcher was added,
// the `watchFn` will be run twice.) // the `watchFn` will be run twice.)
digest(adapter); $digest(adapter);
expect(controllerDoCheckA.calls.count()).toBe(3); expect(controllerDoCheckA.calls.count()).toBe(3);
expect(controllerDoCheckB.calls.count()).toBe(3); expect(controllerDoCheckB.calls.count()).toBe(3);
// Run another `$digest` // Run another `$digest`
digest(adapter); $digest(adapter);
expect(controllerDoCheckA.calls.count()).toBe(4); expect(controllerDoCheckA.calls.count()).toBe(4);
expect(controllerDoCheckB.calls.count()).toBe(4); expect(controllerDoCheckB.calls.count()).toBe(4);
}); });
@ -2474,11 +2474,11 @@ export function main() {
expect(scopeDoCheck).not.toHaveBeenCalled(); expect(scopeDoCheck).not.toHaveBeenCalled();
// Run a `$digest` // Run a `$digest`
digest(adapter); $digest(adapter);
expect(scopeDoCheck).not.toHaveBeenCalled(); expect(scopeDoCheck).not.toHaveBeenCalled();
// Run another `$digest` // Run another `$digest`
digest(adapter); $digest(adapter);
expect(scopeDoCheck).not.toHaveBeenCalled(); expect(scopeDoCheck).not.toHaveBeenCalled();
}); });
})); }));
@ -2788,7 +2788,7 @@ export function main() {
expect(scopeDestroyListener).not.toHaveBeenCalled(); expect(scopeDestroyListener).not.toHaveBeenCalled();
ng2ComponentAInstance.destroyIt = true; ng2ComponentAInstance.destroyIt = true;
digest(adapter); $digest(adapter);
expect(scopeDestroyListener).toHaveBeenCalled(); expect(scopeDestroyListener).toHaveBeenCalled();
}); });
@ -2952,7 +2952,7 @@ export function main() {
// (Should not propagate upwards.) // (Should not propagate upwards.)
ng2ComponentBInstance.ng2BInputA = 'foo2'; ng2ComponentBInstance.ng2BInputA = 'foo2';
ng2ComponentBInstance.ng2BInputC = 'baz2'; ng2ComponentBInstance.ng2BInputC = 'baz2';
digest(adapter); $digest(adapter);
tick(); tick();
expect(multiTrim(document.body.textContent)) expect(multiTrim(document.body.textContent))
@ -2962,7 +2962,7 @@ export function main() {
// (Should propagate all the way up to `ng1ADataC` and back all the way down to // (Should propagate all the way up to `ng1ADataC` and back all the way down to
// `ng2BInputC`.) // `ng2BInputC`.)
ng2ComponentBInstance.ng2BOutputC.emit('baz3'); ng2ComponentBInstance.ng2BOutputC.emit('baz3');
digest(adapter); $digest(adapter);
tick(); tick();
expect(multiTrim(document.body.textContent)) expect(multiTrim(document.body.textContent))
@ -2972,7 +2972,7 @@ export function main() {
// (Should not propagate upwards, only downwards.) // (Should not propagate upwards, only downwards.)
ng1ControllerXInstance.ng1XInputA = 'foo4'; ng1ControllerXInstance.ng1XInputA = 'foo4';
ng1ControllerXInstance.ng1XInputB = {value: 'bar4'}; ng1ControllerXInstance.ng1XInputB = {value: 'bar4'};
digest(adapter); $digest(adapter);
tick(); tick();
expect(multiTrim(document.body.textContent)) expect(multiTrim(document.body.textContent))
@ -2981,7 +2981,7 @@ export function main() {
// Update `ng1XInputC`. // Update `ng1XInputC`.
// (Should propagate upwards and downwards.) // (Should propagate upwards and downwards.)
ng1ControllerXInstance.ng1XInputC = {value: 'baz5'}; ng1ControllerXInstance.ng1XInputC = {value: 'baz5'};
digest(adapter); $digest(adapter);
tick(); tick();
expect(multiTrim(document.body.textContent)) expect(multiTrim(document.body.textContent))
@ -2990,7 +2990,7 @@ export function main() {
// Update a property on `ng1XInputC`. // Update a property on `ng1XInputC`.
// (Should propagate upwards and downwards.) // (Should propagate upwards and downwards.)
ng1ControllerXInstance.ng1XInputC.value = 'baz6'; ng1ControllerXInstance.ng1XInputC.value = 'baz6';
digest(adapter); $digest(adapter);
tick(); tick();
expect(multiTrim(document.body.textContent)) expect(multiTrim(document.body.textContent))
@ -2999,7 +2999,7 @@ export function main() {
// Emit from `ng1XOutputA`. // Emit from `ng1XOutputA`.
// (Should propagate upwards to `ng1ADataA` and back all the way down to `ng2BInputA`.) // (Should propagate upwards to `ng1ADataA` and back all the way down to `ng2BInputA`.)
(ng1ControllerXInstance as any).ng1XOutputA({value: 'foo7'}); (ng1ControllerXInstance as any).ng1XOutputA({value: 'foo7'});
digest(adapter); $digest(adapter);
tick(); tick();
expect(multiTrim(document.body.textContent)) expect(multiTrim(document.body.textContent))
@ -3009,7 +3009,7 @@ export function main() {
// (Should propagate upwards to `ng1ADataB`, but not downwards, // (Should propagate upwards to `ng1ADataB`, but not downwards,
// since `ng1XInputB` has been re-assigned (i.e. `ng2ADataB !== ng1XInputB`).) // since `ng1XInputB` has been re-assigned (i.e. `ng2ADataB !== ng1XInputB`).)
(ng1ControllerXInstance as any).ng1XOutputB('bar8'); (ng1ControllerXInstance as any).ng1XOutputB('bar8');
digest(adapter); $digest(adapter);
tick(); tick();
expect(multiTrim(document.body.textContent)) expect(multiTrim(document.body.textContent))
@ -3020,7 +3020,7 @@ export function main() {
ng2ComponentAInstance.ng2ADataA = {value: 'foo9'}; ng2ComponentAInstance.ng2ADataA = {value: 'foo9'};
ng2ComponentAInstance.ng2ADataB = {value: 'bar9'}; ng2ComponentAInstance.ng2ADataB = {value: 'bar9'};
ng2ComponentAInstance.ng2ADataC = {value: 'baz9'}; ng2ComponentAInstance.ng2ADataC = {value: 'baz9'};
digest(adapter); $digest(adapter);
tick(); tick();
expect(multiTrim(document.body.textContent)) expect(multiTrim(document.body.textContent))

7
modules/@angular/upgrade/test/static/test_helpers.ts
View File

@ -24,7 +24,12 @@ export function bootstrap(
}); });
} }
export function digest(adapter: UpgradeModule) { export function $apply(adapter: UpgradeModule, exp: angular.Ng1Expression) {
const $rootScope = adapter.$injector.get($ROOT_SCOPE) as angular.IRootScopeService;
$rootScope.$apply(exp);
}
export function $digest(adapter: UpgradeModule) {
const $rootScope = adapter.$injector.get($ROOT_SCOPE) as angular.IRootScopeService; const $rootScope = adapter.$injector.get($ROOT_SCOPE) as angular.IRootScopeService;
$rootScope.$digest(); $rootScope.$digest();
} }