From 2d97cd7b50d21daa2b52d243ca29827b2b4f6d78 Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Wed, 7 Oct 2015 17:34:56 -0700
Subject: [PATCH] Add templatizer tests.  Fix issues from tests.

---
 src/lib/template/templatizer.html   |  14 +-
 src/standard/notify-path.html       |   2 +
 test/runner.html                    |   1 +
 test/unit/templatizer-elements.html | 221 +++++++++++++++++++++++++
 test/unit/templatizer.html          | 241 ++++++++++++++++++++++++++++
 5 files changed, 473 insertions(+), 6 deletions(-)
 create mode 100644 test/unit/templatizer-elements.html
 create mode 100644 test/unit/templatizer.html

diff --git a/src/lib/template/templatizer.html b/src/lib/template/templatizer.html
index 6d209c60de..edc12c1a31 100644
--- a/src/lib/template/templatizer.html
+++ b/src/lib/template/templatizer.html
@@ -109,15 +109,15 @@
       // archetypes do special caching
       this._customPrepAnnotations(archetype, template);
 
+      // forward parent properties to archetype
+      this._prepParentProperties(archetype, template);
+
       // setup accessors
       archetype._prepEffects();
       this._customPrepEffects(archetype);
       archetype._prepBehaviors();
       archetype._prepBindings();
 
-      // forward parent properties to archetype
-      this._prepParentProperties(archetype, template);
-
       // boilerplate code
       archetype._notifyPath = this._notifyPathImpl;
       archetype._scopeElementClass = this._scopeElementClassImpl;
@@ -241,10 +241,12 @@
           }
         }
         // Instance setup
-        this._extendTemplate(template, proto);
         if (template != this) {
           Polymer.Bind.prepareInstance(template);
           template._forwardParentProp = this._forwardParentProp.bind(this);
+        }
+        this._extendTemplate(template, proto);
+        if (template != this) {
           template._pathEffector = this._pathEffectorTemplate.bind(this);
         }
       }
@@ -259,7 +261,7 @@
     _createHostPropEffector: function(prop) {
       var prefix = this._parentPropPrefix;
       return function(source, value) {
-        this.dataHost[prefix + prop] = value;
+        this.dataHost._templatized[prefix + prop] = value;
       };
     },
 
@@ -299,7 +301,7 @@
       // Call extension point for Templatizer sub-classes
       dataHost._forwardInstancePath.call(dataHost, this, path, value);
       if (root in dataHost._parentProps) {
-        dataHost.notifyPath(dataHost._parentPropPrefix + path, value);
+        dataHost._templatized.notifyPath(dataHost._parentPropPrefix + path, value);
       }
     },
 
diff --git a/src/standard/notify-path.html b/src/standard/notify-path.html
index 0ec156a890..9ba2391af4 100644
--- a/src/standard/notify-path.html
+++ b/src/standard/notify-path.html
@@ -491,7 +491,9 @@
       // Base or all in Bind.
       prepareModelNotifyPath: function(model) {
         this.mixin(model, {
+          fire: Polymer.Base.fire,
           notifyPath: Polymer.Base.notifyPath,
+          _EVENT_CHANGED: Polymer.Base._EVENT_CHANGED,
           _notifyPath: Polymer.Base._notifyPath,
           _pathEffector: Polymer.Base._pathEffector,
           _annotationPathEffect: Polymer.Base._annotationPathEffect,
diff --git a/test/runner.html b/test/runner.html
index 0d78dec54c..03dd0a8550 100644
--- a/test/runner.html
+++ b/test/runner.html
@@ -57,6 +57,7 @@
       'unit/styling-cross-scope-unknown-host.html',
       'unit/custom-style.html',
       'unit/dynamic-import.html',
+      'unit/templatizer.html',
       'unit/dom-repeat.html',
       'unit/dom-if.html',
       'unit/dom-bind.html',
diff --git a/test/unit/templatizer-elements.html b/test/unit/templatizer-elements.html
new file mode 100644
index 0000000000..e11d033f7d
--- /dev/null
+++ b/test/unit/templatizer-elements.html
@@ -0,0 +1,221 @@
+<dom-module id="x-host">
+  <template>
+
+    <x-templatizer obj="{{objA}}" prop="{{propA}}" id="templatizer">
+      <template>
+        <x-child id="childA"
+          outer-prop="{{outerProp}}"
+          outer-obj="{{outerObj}}"
+          outer-obj-prop="{{outerObj.prop}}"
+          prop="{{prop}}"
+          obj="{{obj}}"
+          obj-prop="{{obj.prop}}"
+        ></x-child>
+      </template>
+    </x-templatizer>
+
+    <template is="x-templatizee" obj="{{objB}}" prop="{{propB}}" id="templatizee">
+      <x-child id="childB"
+        outer-prop="{{outerProp}}"
+        outer-obj="{{outerObj}}"
+        outer-obj-prop="{{outerObj.prop}}"
+        prop="{{prop}}"
+        obj="{{obj}}"
+        obj-prop="{{obj.prop}}"
+      ></x-child>
+    </template>
+
+  </template>
+</dom-module>
+
+<script>
+  Polymer({
+    is: 'x-child',
+    properties: {
+      outerProp: {
+        notify: true
+      },
+      outerObj: {
+        notify: true
+      },
+      outerObjProp: {
+        notify: true
+      },
+      prop: {
+        notify: true
+      },
+      obj: {
+        notify: true
+      },
+      objProp: {
+        notify: true
+      }
+    },
+    observers: [
+      'objChanged(obj.*)',
+      'outerObjChanged(outerObj.*)'
+    ],
+    objChanged: function() {},
+    outerObjChanged: function() {}
+  });
+
+  Polymer({
+    is: 'x-templatizer',
+    behaviors: [Polymer.Templatizer],
+    properties: {
+      obj: {
+        notify: true
+      },
+      prop: {
+        notify: true,
+        observer: 'propChanged'
+      }
+    },
+    observers: [
+      'objChanged(obj.*)'
+    ],
+    _instanceProps: {
+      obj: true,
+      prop: true
+    },
+    propChanged: function(value) {
+      this._forwardParentProp('prop', value);
+    },
+    objChanged: function(info) {
+      if (info.path == 'obj') {
+        this._forwardParentProp('obj', info.value);
+      } else {
+        this._forwardParentPath(info.path, info.value);
+      }
+    },
+    _forwardParentProp: function(prop, value) {
+      if (this.instance) {
+        this.instance[prop] = value;
+      }
+    },
+    _forwardParentPath: function(path, value) {
+      if (this.instance) {
+        this.instance.notifyPath(path, value, true);
+      }
+    },
+    _forwardInstanceProp: function(inst, prop, value) {
+      if (prop == 'obj') {
+        this.obj = value;
+      } else if (prop == 'prop') {
+        this.prop = value;
+      }
+    },
+    _forwardInstancePath: function(inst, path, value) {
+      if ((path.indexOf('obj.') === 0) || (path.indexOf('prop.') === 0)) {
+        this.notifyPath(path, value);
+      }
+    },
+    go: function() {
+      var template = Polymer.dom(this).querySelector('template');
+      this.templatize(template);
+      this.instance = this.stamp({obj: this.obj, prop: this.prop});
+      var parent = Polymer.dom(this).parentNode;
+      Polymer.dom(parent).appendChild(this.instance.root);
+    }
+  });
+
+  Polymer({
+    is: 'x-templatizee',
+    extends: 'template',
+    behaviors: [Polymer.Templatizer],
+    properties: {
+      obj: {
+        notify: true
+      },
+      prop: {
+        notify: true,
+        observer: 'propChanged'
+      }
+    },
+    observers: [
+      'objChanged(obj.*)'
+    ],
+    _instanceProps: {
+      obj: true,
+      prop: true
+    },
+    propChanged: function(value) {
+      this._forwardParentProp('prop', value);
+    },
+    objChanged: function(info) {
+      if (info.path == 'obj') {
+        this._forwardParentProp('obj', info.value);
+      } else {
+        this._forwardParentPath(info.path, info.value);
+      }
+    },
+    _forwardParentProp: function(prop, value) {
+      if (this.instance) {
+        this.instance[prop] = value;
+      }
+    },
+    _forwardParentPath: function(path, value) {
+      if (this.instance) {
+        this.instance.notifyPath(path, value, true);
+      }
+    },
+    _forwardInstanceProp: function(inst, prop, value) {
+      if (prop == 'obj') {
+        this.obj = value;
+      } else if (prop == 'prop') {
+        this.prop = value;
+      }
+    },
+    _forwardInstancePath: function(inst, path, value) {
+      if ((path.indexOf('obj.') === 0) || (path.indexOf('prop.') === 0)) {
+        this.notifyPath(path, value);
+      }
+    },
+    go: function() {
+      this.templatize(this);
+      this.instance = this.stamp({obj: this.obj, prop: this.prop});
+      var parent = Polymer.dom(this).parentNode;
+      Polymer.dom(parent).appendChild(this.instance.root);
+    }
+  });
+
+  Polymer({
+    is: 'x-host',
+    properties: {
+      outerProp: {
+        value: 'outerProp'
+      },
+      outerObj: {
+        value: function() {
+          return { prop: 'outerObj.prop' };
+        }
+      },
+      propA: {
+        value: 'prop-a'
+      },
+      objA: {
+        value: function() {
+          return { prop: 'objA.prop' };
+        }
+      },
+      propB: {
+        value: 'prop-b'
+      },
+      objB: {
+        value: function() {
+          return { prop: 'objB.prop' };
+        }
+      }
+    },
+    observers: [
+      'outerObjChanged(outerObj.*)',
+      'objAChanged(objA.*)',
+      'objBChanged(objB.*)'
+    ],
+    outerObjChanged: function() {},
+    objAChanged: function() {},
+    objBChanged: function() {}
+  });
+
+</script>
+
diff --git a/test/unit/templatizer.html b/test/unit/templatizer.html
new file mode 100644
index 0000000000..ca5b1dabb6
--- /dev/null
+++ b/test/unit/templatizer.html
@@ -0,0 +1,241 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../../web-component-tester/browser.js"></script>
+  <link rel="import" href="../../polymer.html">
+  <link rel="import" href="templatizer-elements.html">
+</head>
+<body>
+
+<script>
+
+  suite('templatizer client and template separate', function() {
+
+    var host;
+
+    setup(function() {
+      host = document.createElement('x-host');
+      document.body.appendChild(host);
+    });
+
+    teardown(function() {
+      document.body.removeChild(host);
+    });
+
+    test('stamped with initial data', function() {
+      host.$.templatizer.go();
+      assert.ok(childA);
+      assert.equal(childA.outerProp, 'outerProp');
+      assert.equal(childA.outerObj, host.outerObj);
+      assert.equal(childA.outerObjProp, 'outerObj.prop');
+      assert.equal(childA.prop, 'prop-a');
+      assert.equal(childA.obj, host.objA);
+      assert.equal(childA.objProp, 'objA.prop');
+    });
+
+    test('host properties propagated in', function() {
+      host.$.templatizer.go();
+      assert.ok(childA);
+      host.outerProp = 'outerProp++';
+      assert.equal(childA.outerProp, 'outerProp++');
+      host.outerObj = { prop: 'outerObj++.prop' };
+      assert.equal(childA.outerObj, host.outerObj);
+      assert.equal(childA.outerObjProp, 'outerObj++.prop');
+    });
+
+    test('host paths propagated in', function() {
+      host.$.templatizer.go();
+      assert.ok(childA);
+      sinon.spy(childA, 'outerObjChanged');
+      host.set('outerObj.prop', 'outerObj.prop++');
+      assert.equal(childA.outerObjProp, 'outerObj.prop++');
+      assert.isTrue(childA.outerObjChanged.calledOnce);
+      assert.equal(childA.outerObjChanged.getCall(0).args[0].path, 'outerObj.prop');
+      assert.equal(childA.outerObjChanged.getCall(0).args[0].value, 'outerObj.prop++');
+    });
+
+    test('host properties propagated out', function() {
+      host.$.templatizer.go();
+      assert.ok(childA);
+      childA.outerProp = 'outerProp++';
+      assert.equal(host.outerProp, 'outerProp++');
+      childA.outerObj = { prop: 'outerObj++.prop' };
+      assert.equal(host.outerObj.prop, 'outerObj++.prop');
+    });
+
+    test('host paths propagated out', function() {
+      host.$.templatizer.go();
+      assert.ok(childA);
+      sinon.spy(host, 'outerObjChanged');
+      childA.set('outerObj.prop', 'outerObj.prop++');
+      assert.equal(host.outerObj.prop, 'outerObj.prop++');
+      assert.isTrue(host.outerObjChanged.calledOnce);
+      assert.equal(host.outerObjChanged.getCall(0).args[0].path, 'outerObj.prop');
+      assert.equal(host.outerObjChanged.getCall(0).args[0].value, 'outerObj.prop++');
+    });
+
+    test('instance properties propagated in', function() {
+      host.$.templatizer.go();
+      assert.ok(childA);
+      host.propA = 'prop-a++';
+      assert.equal(childA.prop, 'prop-a++');
+      host.objA = { prop: 'objA++.prop' };
+      assert.equal(childA.obj, host.objA);
+      assert.equal(childA.objProp, 'objA++.prop');
+    });
+
+    test('instance paths propagated in', function() {
+      host.$.templatizer.go();
+      assert.ok(childA);
+      sinon.spy(childA, 'objChanged');
+      host.set('objA.prop', 'objA.prop++');
+      assert.equal(childA.obj.prop, 'objA.prop++');
+      assert.isTrue(childA.objChanged.calledOnce);
+      assert.equal(childA.objChanged.getCall(0).args[0].path, 'obj.prop');
+      assert.equal(childA.objChanged.getCall(0).args[0].value, 'objA.prop++');
+    });
+
+    test('instance properties propagated out', function() {
+      host.$.templatizer.go();
+      assert.ok(childA);
+      childA.prop = 'prop-a++';
+      assert.equal(host.propA, 'prop-a++');
+      childA.obj = { prop: 'objA++.prop' };
+      assert.equal(host.objA.prop, 'objA++.prop');
+    });
+
+    test('instance paths propagated out', function() {
+      host.$.templatizer.go();
+      assert.ok(childA);
+      sinon.spy(host, 'objAChanged');
+      childA.set('obj.prop', 'objA.prop++');
+      assert.equal(host.objA.prop, 'objA.prop++');
+      assert.isTrue(host.objAChanged.calledOnce);
+      assert.equal(host.objAChanged.getCall(0).args[0].path, 'objA.prop');
+      assert.equal(host.objAChanged.getCall(0).args[0].value, 'objA.prop++');
+    });
+
+  });
+
+  suite('templatizer client and template same element (template extension)', function() {
+
+    var host;
+
+    setup(function() {
+      host = document.createElement('x-host');
+      document.body.appendChild(host);
+    });
+
+    teardown(function() {
+      document.body.removeChild(host);
+    });
+
+    test('stamped with initial data', function() {
+      host.$.templatizee.go();
+      assert.ok(childB);
+      assert.equal(childB.outerProp, 'outerProp');
+      assert.equal(childB.outerObj, host.outerObj);
+      assert.equal(childB.outerObjProp, 'outerObj.prop');
+      assert.equal(childB.prop, 'prop-b');
+      assert.equal(childB.obj, host.objB);
+      assert.equal(childB.objProp, 'objB.prop');
+    });
+
+    test('host properties propagated in', function() {
+      host.$.templatizee.go();
+      assert.ok(childB);
+      host.outerProp = 'outerProp++';
+      assert.equal(childB.outerProp, 'outerProp++');
+      host.outerObj = { prop: 'outerObj++.prop' };
+      assert.equal(childB.outerObj, host.outerObj);
+      assert.equal(childB.outerObjProp, 'outerObj++.prop');
+    });
+
+    test('host paths propagated in', function() {
+      host.$.templatizee.go();
+      assert.ok(childB);
+      sinon.spy(childB, 'outerObjChanged');
+      host.set('outerObj.prop', 'outerObj.prop++');
+      assert.equal(childB.outerObjProp, 'outerObj.prop++');
+      assert.isTrue(childB.outerObjChanged.calledOnce);
+      assert.equal(childB.outerObjChanged.getCall(0).args[0].path, 'outerObj.prop');
+      assert.equal(childB.outerObjChanged.getCall(0).args[0].value, 'outerObj.prop++');
+    });
+
+    test('host properties propagated out', function() {
+      host.$.templatizee.go();
+      assert.ok(childB);
+      childB.outerProp = 'outerProp++';
+      assert.equal(host.outerProp, 'outerProp++');
+      childB.outerObj = { prop: 'outerObj++.prop' };
+      assert.equal(host.outerObj.prop, 'outerObj++.prop');
+    });
+
+    test('host paths propagated out', function() {
+      host.$.templatizee.go();
+      assert.ok(childB);
+      sinon.spy(host, 'outerObjChanged');
+      childB.set('outerObj.prop', 'outerObj.prop++');
+      assert.equal(host.outerObj.prop, 'outerObj.prop++');
+      assert.isTrue(host.outerObjChanged.calledOnce);
+      assert.equal(host.outerObjChanged.getCall(0).args[0].path, 'outerObj.prop');
+      assert.equal(host.outerObjChanged.getCall(0).args[0].value, 'outerObj.prop++');
+    });
+
+    test('instance properties propagated in', function() {
+      host.$.templatizee.go();
+      assert.ok(childB);
+      host.propB = 'prop-b++';
+      assert.equal(childB.prop, 'prop-b++');
+      host.objB = { prop: 'objB++.prop' };
+      assert.equal(childB.obj, host.objB);
+      assert.equal(childB.objProp, 'objB++.prop');
+    });
+
+    test('instance paths propagated in', function() {
+      host.$.templatizee.go();
+      assert.ok(childB);
+      sinon.spy(childB, 'objChanged');
+      host.set('objB.prop', 'objB.prop++');
+      assert.equal(childB.obj.prop, 'objB.prop++');
+      assert.isTrue(childB.objChanged.calledOnce);
+      assert.equal(childB.objChanged.getCall(0).args[0].path, 'obj.prop');
+      assert.equal(childB.objChanged.getCall(0).args[0].value, 'objB.prop++');
+    });
+
+    test('instance properties propagated out', function() {
+      host.$.templatizee.go();
+      assert.ok(childB);
+      childB.prop = 'prop-b++';
+      assert.equal(host.propB, 'prop-b++');
+      childB.obj = { prop: 'objB++.prop' };
+      assert.equal(host.objB.prop, 'objB++.prop');
+    });
+
+    test('instance paths propagated out', function() {
+      host.$.templatizee.go();
+      assert.ok(childB);
+      sinon.spy(host, 'objBChanged');
+      childB.set('obj.prop', 'objB.prop++');
+      assert.equal(host.objB.prop, 'objB.prop++');
+      assert.isTrue(host.objBChanged.calledOnce);
+      assert.equal(host.objBChanged.getCall(0).args[0].path, 'objB.prop');
+      assert.equal(host.objBChanged.getCall(0).args[0].value, 'objB.prop++');
+    });
+
+  });
+
+</script>
+</body>
+</html>