fix(change_detection): convert interpolated null values to empty strings

pkozlowski-opensource · pkozlowski-opensource · commit 345fa521dd65 · 2015-07-24T18:05:06.000+02:00
Fixes #3007 Closes #3271
diff --git a/modules/angular2/src/change_detection/change_detection_jit_generator.ts b/modules/angular2/src/change_detection/change_detection_jit_generator.ts
@@ -371,7 +371,7 @@ export class ChangeDetectorJITGenerator {
     for (var i = 0; i < r.args.length; ++i) {
       res += JSON.stringify(r.fixedArgs[i]);
       res += " + ";
-      res += this._localNames[r.args[i]];
+      res += `${UTIL}.s(${this._localNames[r.args[i]]})`;
       res += " + ";
     }
     res += JSON.stringify(r.fixedArgs[r.args.length]);
diff --git a/modules/angular2/src/change_detection/change_detection_util.ts b/modules/angular2/src/change_detection/change_detection_util.ts
@@ -151,4 +151,6 @@ export class ChangeDetectionUtil {
   }
 
   static isValueBlank(value: any): boolean { return isBlank(value); }
+
+  static s(value: any): string { return isPresent(value) ? `${value}` : ''; }
 }
diff --git a/modules/angular2/test/change_detection/change_detector_spec.ts b/modules/angular2/test/change_detection/change_detector_spec.ts
@@ -302,6 +302,15 @@ export function main() {
         expect(val.dispatcher.log).toEqual(['propName=BvalueA']);
       });
 
+      it('should output empty strings for null values in interpolation', () => {
+        var val = _createChangeDetector('interpolation', new TestData('value'));
+        val.changeDetector.hydrate(new TestData(null), null, null, null);
+
+        val.changeDetector.detectChanges();
+
+        expect(val.dispatcher.log).toEqual(['propName=BA']);
+      });
+
       it('should escape values in literals that indicate interpolation',
          () => { expect(_bindSimpleValue('"$"')).toEqual(['propName=$']); });
 
diff --git a/modules/angular2/test/core/compiler/integration_spec.ts b/modules/angular2/test/core/compiler/integration_spec.ts
@@ -94,6 +94,19 @@ export function main() {
                });
          }));
 
+      it('should update text node with a blank string when interpolation evaluates to null',
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({template: '<div>{{null}}{{ctxProp}}</div>'}))
+               .createAsync(MyComp)
+               .then((rootTC) => {
+                 rootTC.componentInstance.ctxProp = null;
+
+                 rootTC.detectChanges();
+                 expect(rootTC.nativeElement).toHaveText('');
+                 async.done();
+               });
+         }));
+
       it('should consume element binding changes',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            tcb.overrideView(MyComp, new viewAnn.View({template: '<div [id]="ctxProp"></div>'}))

Original file line number	Diff line number	Diff line change
`@@ -371,7 +371,7 @@ export class ChangeDetectorJITGenerator {`
`371`	`371`	`for (var i = 0; i < r.args.length; ++i) {`
`372`	`372`	`res += JSON.stringify(r.fixedArgs[i]);`
`373`	`373`	`res += " + ";`
`374`		`- res += this._localNames[r.args[i]];`
	`374`	+ res += `${UTIL}.s(${this._localNames[r.args[i]]})`;
`375`	`375`	`res += " + ";`
`376`	`376`	`}`
`377`	`377`	`res += JSON.stringify(r.fixedArgs[r.args.length]);`
Original file line number	Diff line number	Diff line change
`@@ -151,4 +151,6 @@ export class ChangeDetectionUtil {`
`151`	`151`	`}`
`152`	`152`
`153`	`153`	`static isValueBlank(value: any): boolean { return isBlank(value); }`
	`154`	`+`
	`155`	+ static s(value: any): string { return isPresent(value) ? `${value}` : ''; }
`154`	`156`	`}`