fix(parse5): support comment nodes with getText and setText

jeffbcross · vsavkin · commit 693d9dce5d11 · 2015-12-10T19:18:14.000Z
In the browser, calling element.textContent causes child comment nodes to be ignored, while getting textContent directly on a comment node will return the comment. This change makes parse5Adapter consistent with this behavior by adding a 2nd argument to getText telling if it's being called recursively. Closes angular#5805
diff --git a/modules/angular2/src/platform/dom/dom_renderer.ts b/modules/angular2/src/platform/dom/dom_renderer.ts
@@ -1,7 +1,5 @@
 import {Inject, Injectable, OpaqueToken} from 'angular2/src/core/di';
 import {AnimationBuilder} from 'angular2/src/animate/animation_builder';
-
-import {StringMapWrapper} from 'angular2/src/facade/collection';
 import {
   isPresent,
   isBlank,
@@ -42,9 +40,8 @@ import {
   DefaultProtoViewRef
 } from 'angular2/src/core/render/view';
 import {ViewEncapsulation} from 'angular2/src/core/metadata';
-
-// TODO move it once DdomAdapter is moved
 import {DOM} from 'angular2/src/platform/dom/dom_adapter';
+import {camelCaseToDashCase} from './util';
 
 const NAMESPACE_URIS =
     CONST_EXPR({'xlink': 'http://www.w3.org/1999/xlink', 'svg': 'http://www.w3.org/2000/svg'});
@@ -162,11 +159,7 @@ export abstract class DomRenderer extends Renderer implements NodeFactory<Node>
       var existingBindings = RegExpWrapper.firstMatch(
           TEMPLATE_BINDINGS_EXP, StringWrapper.replaceAll(DOM.getText(element), /\n/g, ''));
       var parsedBindings = Json.parse(existingBindings[1]);
-      if (isPresent(propertyValue)) {
-        parsedBindings[dashCasedPropertyName] = propertyValue;
-      } else {
-        StringMapWrapper.delete(parsedBindings, dashCasedPropertyName);
-      }
+      parsedBindings[dashCasedPropertyName] = propertyValue;
       DOM.setText(element, StringWrapper.replace(TEMPLATE_COMMENT_TEXT, '{}',
                                                  Json.stringify(parsedBindings)));
     } else {
diff --git a/modules/angular2/src/platform/server/parse5_adapter.ts b/modules/angular2/src/platform/server/parse5_adapter.ts
@@ -239,21 +239,25 @@ export class Parse5DomAdapter extends DomAdapter {
       treeAdapter.appendChild(el, content.childNodes[i]);
     }
   }
-  getText(el): string {
+  getText(el, isRecursive?: boolean): string {
     if (this.isTextNode(el)) {
       return el.data;
+    } else if (this.isCommentNode(el)) {
+      // In the DOM, comments within an element return an empty string for textContent
+      // However, comment node instances return the comment content for textContent getter
+      return isRecursive ? '' : el.data;
     } else if (isBlank(el.childNodes) || el.childNodes.length == 0) {
       return "";
     } else {
       var textContent = "";
       for (var i = 0; i < el.childNodes.length; i++) {
-        textContent += this.getText(el.childNodes[i]);
+        textContent += this.getText(el.childNodes[i], true);
       }
       return textContent;
     }
   }
   setText(el, value: string) {
-    if (this.isTextNode(el)) {
+    if (this.isTextNode(el) || this.isCommentNode(el)) {
       el.data = value;
     } else {
       this.clearNodes(el);
diff --git a/modules/angular2/test/core/linker/integration_spec.ts b/modules/angular2/test/core/linker/integration_spec.ts
@@ -1613,7 +1613,7 @@ export function main() {
 
       it('should reflect property values on template comments',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var tpl = '<template [ng-if]="ctxBoolProp"></template>';
+           var tpl = '<template [ngIf]="ctxBoolProp"></template>';
            tcb.overrideView(MyComp, new ViewMetadata({template: tpl, directives: [NgIf]}))
 
                .createAsync(MyComp)
diff --git a/modules/angular2/test/web_workers/worker/renderer_integration_spec.ts b/modules/angular2/test/web_workers/worker/renderer_integration_spec.ts
@@ -189,7 +189,7 @@ export function main() {
     it('should update any template comment property/attributes',
        inject([TestComponentBuilder, Renderer, AsyncTestCompleter],
               (tcb: TestComponentBuilder, renderer: Renderer, async) => {
-                var tpl = '<template [ng-if]="ctxBoolProp"></template>';
+                var tpl = '<template [ngIf]="ctxBoolProp"></template>';
                 tcb.overrideView(MyComp, new ViewMetadata({template: tpl, directives: [NgIf]}))
 
                     .createAsync(MyComp)

Original file line number	Diff line number	Diff line change
`@@ -239,21 +239,25 @@ export class Parse5DomAdapter extends DomAdapter {`
`239`	`239`	`treeAdapter.appendChild(el, content.childNodes[i]);`
`240`	`240`	`}`
`241`	`241`	`}`
`242`		`- getText(el): string {`
	`242`	`+ getText(el, isRecursive?: boolean): string {`
`243`	`243`	`if (this.isTextNode(el)) {`
`244`	`244`	`return el.data;`
	`245`	`+ } else if (this.isCommentNode(el)) {`
	`246`	`+ // In the DOM, comments within an element return an empty string for textContent`
	`247`	`+ // However, comment node instances return the comment content for textContent getter`
	`248`	`+ return isRecursive ? '' : el.data;`
`245`	`249`	`} else if (isBlank(el.childNodes) \|\| el.childNodes.length == 0) {`
`246`	`250`	`return "";`
`247`	`251`	`} else {`
`248`	`252`	`var textContent = "";`
`249`	`253`	`for (var i = 0; i < el.childNodes.length; i++) {`
`250`		`- textContent += this.getText(el.childNodes[i]);`
	`254`	`+ textContent += this.getText(el.childNodes[i], true);`
`251`	`255`	`}`
`252`	`256`	`return textContent;`
`253`	`257`	`}`
`254`	`258`	`}`
`255`	`259`	`setText(el, value: string) {`
`256`		`- if (this.isTextNode(el)) {`
	`260`	`+ if (this.isTextNode(el) \|\| this.isCommentNode(el)) {`
`257`	`261`	`el.data = value;`
`258`	`262`	`} else {`
`259`	`263`	`this.clearNodes(el);`