From 0f4ebf62e123a944ec59bff678592630811048b3 Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Thu, 11 May 2017 16:02:00 -0700
Subject: [PATCH] Add tests

---
 test/unit/property-effects.html | 216 +++++++++++++++++++++++++++++++-
 1 file changed, 215 insertions(+), 1 deletion(-)

diff --git a/test/unit/property-effects.html b/test/unit/property-effects.html
index 01761095e4..f6958a660a 100644
--- a/test/unit/property-effects.html
+++ b/test/unit/property-effects.html
@@ -23,7 +23,7 @@
 </dom-repeat>
 
 <script>
-
+/*
 suite('single-element binding effects', function() {
 
   var el;
@@ -1504,6 +1504,220 @@
     assert.equal(fn.callCount, 2);
   });
 
+});
+*/
+
+suite('a la carte usage of API', function() {
+
+  class BaseClass extends Polymer.PropertyEffects(HTMLElement) {
+    connectedCallback() {
+      this.pcSpy = sinon.spy();
+      this._flushProperties();
+    }
+    _propertiesChanged(props, changedProps, oldProps) {
+      this.pcSpy(props, changedProps, oldProps);
+      super._propertiesChanged(props, changedProps, oldProps);
+    }
+  }
+
+  test('generic property effect', function() {
+    class TestClass extends BaseClass {
+      constructor() {
+        super();
+        this.observer = sinon.spy();
+      }
+    }
+    let observer = sinon.spy();
+    TestClass.addPropertyEffect('prop', TestClass.prototype.PROPERTY_EFFECT_TYPES.OBSERVE, {
+      fn: observer
+    });
+    customElements.define('pe-pe', TestClass);
+    let el = document.createElement('pe-pe');
+    document.body.appendChild(el);
+    assert.equal(observer.callCount, 0);
+    assert.equal(el.pcSpy.callCount, 0);
+    el.prop = true;
+    assert.equal(observer.callCount, 1);
+    assert.equal(el.pcSpy.callCount, 1);
+    el.prop = 'hithere';
+    assert.equal(observer.callCount, 2);
+    assert.equal(el.pcSpy.callCount, 2);
+    el.prop = false;
+    assert.equal(observer.callCount, 3);
+    assert.equal(el.pcSpy.callCount, 3);
+    document.body.removeChild(el);
+  });
+
+  test('read only property', function() {
+    class TestClass extends BaseClass {}
+    TestClass.createReadOnlyProperty('prop', true);
+    customElements.define('pe-read-only', TestClass);
+    let el = document.createElement('pe-read-only');
+    document.body.appendChild(el);
+    el.prop = true;
+    assert.equal(el.prop, undefined);
+    assert.equal(el.pcSpy.callCount, 0);
+    el._setProp(true);
+    assert.equal(el.prop, true);
+    assert.equal(el.pcSpy.callCount, 1);
+    el.prop = false;
+    assert.equal(el.prop, true);
+    assert.equal(el.pcSpy.callCount, 1);
+    document.body.removeChild(el);
+  });
+
+  test('reflected property', function() {
+    class TestClass extends BaseClass {}
+    TestClass.createReflectedProperty('prop', true);
+    customElements.define('pe-reflected', TestClass);
+    let el = document.createElement('pe-reflected');
+    document.body.appendChild(el);
+    assert.equal(el.hasAttribute('prop'), false);
+    assert.equal(el.pcSpy.callCount, 0);
+    el.prop = true;
+    assert.equal(el.getAttribute('prop'), '');
+    assert.equal(el.pcSpy.callCount, 1);
+    el.prop = 'hithere';
+    assert.equal(el.getAttribute('prop'), 'hithere');
+    assert.equal(el.pcSpy.callCount, 2);
+    el.prop = false;
+    assert.equal(el.hasAttribute('prop'), false);
+    assert.equal(el.pcSpy.callCount, 3);
+    document.body.removeChild(el);
+  });
+
+  test('property observer', function() {
+    class TestClass extends BaseClass {
+      constructor() {
+        super();
+        this.observer = sinon.spy();
+      }
+    }
+    TestClass.createPropertyObserver('prop', 'observer');
+    customElements.define('pe-observer', TestClass);
+    let el = document.createElement('pe-observer');
+    document.body.appendChild(el);
+    assert.equal(el.observer.callCount, 0);
+    assert.equal(el.pcSpy.callCount, 0);
+    el.prop = true;
+    assert.equal(el.observer.callCount, 1);
+    assert.equal(el.pcSpy.callCount, 1);
+    el.prop = 'hithere';
+    assert.equal(el.observer.callCount, 2);
+    assert.equal(el.pcSpy.callCount, 2);
+    el.prop = false;
+    assert.equal(el.observer.callCount, 3);
+    assert.equal(el.pcSpy.callCount, 3);
+    document.body.removeChild(el);
+  });
+
+  test('method observer', function() {
+    class TestClass extends BaseClass {
+      constructor() {
+        super();
+        this.observer = sinon.spy();
+      }
+    }
+    TestClass.createMethodObserver('observer(a, b.c)');
+    customElements.define('pe-method-observer', TestClass);
+    let el = document.createElement('pe-method-observer');
+    document.body.appendChild(el);
+    assert.equal(el.observer.callCount, 0);
+    assert.equal(el.pcSpy.callCount, 0);
+    el.a = 'a';
+    assert.equal(el.observer.callCount, 1);
+    assert.deepEqual(el.observer.getCall(0).args, ['a', undefined]);
+    assert.equal(el.pcSpy.callCount, 1);
+    el.b = {c: 'c'};
+    assert.equal(el.observer.callCount, 2);
+    assert.deepEqual(el.observer.getCall(1).args, ['a', 'c']);
+    assert.equal(el.pcSpy.callCount, 2);
+    el.setProperties({
+      a: 'A',
+      b: {c: 'C'}
+    })
+    assert.equal(el.observer.callCount, 3);
+    assert.deepEqual(el.observer.getCall(2).args, ['A', 'C']);
+    assert.equal(el.pcSpy.callCount, 3);
+    document.body.removeChild(el);
+  });
+
+  test('computed property', function() {
+    class TestClass extends BaseClass {
+      constructor() {
+        super();
+        this.compute = sinon.spy(function(a, c) { return a + c; });
+      }
+    }
+    TestClass.createComputedProperty('prop', 'compute(a, b.c)');
+    customElements.define('pe-computed', TestClass);
+    let el = document.createElement('pe-computed');
+    document.body.appendChild(el);
+    assert.equal(el.compute.callCount, 0);
+    assert.equal(el.pcSpy.callCount, 0);
+    el.a = 'a';
+    assert.equal(el.compute.callCount, 1);
+    assert.deepEqual(el.compute.getCall(0).args, ['a', undefined]);
+    assert.equal(el.prop, 'aundefined');
+    assert.equal(el.pcSpy.callCount, 1);
+    el.b = {c: 'c'};
+    assert.equal(el.compute.callCount, 2);
+    assert.deepEqual(el.compute.getCall(1).args, ['a', 'c']);
+    assert.equal(el.prop, 'ac');
+    assert.equal(el.pcSpy.callCount, 2);
+    el.setProperties({
+      a: 'A',
+      b: {c: 'C'}
+    })
+    assert.equal(el.compute.callCount, 3);
+    assert.deepEqual(el.compute.getCall(2).args, ['A', 'C']);
+    assert.equal(el.prop, 'AC');
+    assert.equal(el.pcSpy.callCount, 3);
+    document.body.removeChild(el);
+  });
+
+  test('notifying property', function() {
+    class TestClass extends BaseClass { }
+    TestClass.createNotifyingProperty('prop');
+    customElements.define('pe-notify', TestClass);
+    let el = document.createElement('pe-notify');
+    let handler = sinon.spy();
+    el.addEventListener('prop-changed', handler);
+    document.body.appendChild(el);
+    assert.equal(handler.callCount, 0);
+    assert.equal(el.pcSpy.callCount, 0);
+    el.prop = 'prop';
+    assert.equal(handler.callCount, 1);
+    assert.equal(handler.getCall(0).args[0].detail.value, 'prop');
+    assert.equal(el.pcSpy.callCount, 1);
+    el.prop += '+';
+    assert.equal(handler.callCount, 2);
+    assert.equal(handler.getCall(1).args[0].detail.value, 'prop+');
+    document.body.removeChild(el);
+  });
+
+  test('bound template', function() {
+    let template = document.createElement('template');
+    template.innerHTML = '<div>[[prop]]</div><button on-click="handler"></button>';
+    class TestClass extends BaseClass {
+      connectedCallback() {
+        this.handler = sinon.spy();
+        this.attachShadow({mode:'open'}).appendChild(this._stampTemplate(template));
+        super.connectedCallback();
+      }
+    }
+    TestClass.bindTemplate(template);
+    customElements.define('pe-template', TestClass);
+    let el = document.createElement('pe-template');
+    document.body.appendChild(el);
+    assert.equal(el.handler.callCount, 0);
+    el.prop = 'prop';
+    assert.equal(el.shadowRoot.querySelector('div').textContent, 'prop');
+    el.shadowRoot.querySelector('button').click();
+    assert.equal(el.handler.callCount, 1);
+    document.body.removeChild(el);
+  });
+
 });
 
 </script>