Make the byContentVal model decorator update (#15)

* Make the `byContentVal` model decorator update

* Change indentation to spaces

* Change indentation to use spaces

Author: cuberoot

lib/dom-model/DOMDecorators.js

@@ -70,7 +70,13 @@ let byContentVal = makeDecorator(function() {
         if (target.addProperty) {
             descriptor.writable = true;
             target.addProperty(key, (element) => {
-                return element && element.innerText;
+                let valueFn = () => {
+                    return element && element.innerText;
+                }
+                attachContentListObserver(target, key, element, valueFn, { 
+                    attributes: false, characterData: false, childList: true, subtree: false
+                });
+                return valueFn();
             });
         }
     }
@@ -159,9 +165,8 @@ let byBooleanAttrVal = makeDecorator(function(attrName) {
  * @param   {DOMModel} target - the dom model we are attaching to
  * @param   {String} key - the name of the property we are currently on
  * @param   {HTMLElement} element -  the element that we are parsing 
- * @param   {HTMLElement} child - the element we are observing
- * @param   {Object} observeOptions - the options passed to observe method
  * @param   {function} valueFn - the function to return the value of the child
+ * @param   {Object} observeOptions - the options passed to observe method
  */
 function attachContentListObserver(target, key, element, valueFn, observeOptions ) {
     if (element && !element._isObserved) {

test/dom-model/DOMModelTest.js

@@ -349,6 +349,41 @@ describe("DOMModel", () => {
         })
     });
 
+    describe("byContentVal", () => {
+
+        class ButtonModel extends DOMModel {
+            @byAttrVal() variant;
+            @byContentVal() label;
+        }
+        
+        beforeEach(() => {
+            let result = makeModel(ButtonModel, `
+                <my-button variant='action'>Push Me</my-button>
+            `);
+            element = result.element;
+            model = result.model;
+        });
+        
+        it("parses the model", () => {
+            expect(model.variant).to.equal('action');
+            expect(model.label).to.equal('Push Me');
+        });
+        
+        it("updates when the DOM changes", (done) => {
+            expect(model.variant).to.equal('action');
+            expect(model.label).to.equal('Push Me');
+            
+            element.addEventListener("_updateModel", (event) => {
+                let change = event.detail[0];
+                expect(change.propertyName).to.equal('label');
+                expect(change.value).to.equal('New Label');
+                done();
+            });
+            
+            element.innerHTML = 'New Label';
+        });
+    });
+
     describe("byContent", () => {
         let element, model;