Merge pull request #309 from Robert-Frampton/webcomp_state

Default STATE values should be preserved when rendering web components. Fixes #305
metal · Nov 22, 2017 · d8fe8a5 · d8fe8a5
2 parents 46a2d06 + df918b2
commit d8fe8a5
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/packages/metal-component/test/Component.js b/packages/metal-component/test/Component.js
@@ -213,13 +213,13 @@ describe('Component', function() {
 			assert.strictEqual(1, comp.disposed.callCount);
 		});
 
-		it('should emit "disposed" event when component is disposed', function () {
-			var listener = sinon.stub();
+		it('should emit "disposed" event when component is disposed', function() {
+			let listener = sinon.stub();
 
 			comp = new Component({
 				events: {
-					disposed: listener
-				}
+					disposed: listener,
+				},
 			});
 
 			assert.strictEqual(0, listener.callCount);

diff --git a/packages/metal-web-component/src/define_web_component.js b/packages/metal-web-component/src/define_web_component.js
@@ -78,11 +78,15 @@ export function defineWebComponent(tagName, Ctor) {
 				});
 			}
 
-			let opts = {};
+			const opts = {};
 			for (let i = 0, l = observedAttributes.length; i < l; i++) {
-				opts[observedAttributes[i]] = this.deserializeValue_(
+				const deserializedValue = this.deserializeValue_(
 					this.getAttribute(observedAttributes[i])
 				);
+
+				if (deserializedValue) {
+					opts[observedAttributes[i]] = deserializedValue;
+				}
 			}
 			this.component = new Ctor(opts, element);
 			this.componentHasProps = hasProps;

diff --git a/packages/metal-web-component/test/define_web_component.js b/packages/metal-web-component/test/define_web_component.js
@@ -137,6 +137,15 @@ describe('Web components', function() {
 			assert.isUndefined(title.key1);
 			assert.equal(title.key3, 'value3');
 		});
+
+		it('should have the default state value after rendering', function() {
+			const tagName = createWebComponent('custom-test-element-09');
+			el = document.createElement(tagName);
+
+			document.body.appendChild(el);
+
+			assert.equal(el.component.title, 'default title');
+		});
 	});
 
 	describe('Define JSX component', function() {