Add tests for setting custom attribute name

Polymer · Nov 15, 2017 · 1e903a9 · 1e903a9
1 parent 74fb515
commit 1e903a9
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 7 deletions.
diff --git a/lib/mixins/property-effects.html b/lib/mixins/property-effects.html
@@ -2051,7 +2051,7 @@
        * @protected
        */
       _createReflectedProperty(property) {
-        let attr = CaseMap.camelToDashCase(property);
+        let attr = this._attributeForProperty(property);
         if (attr[0] === '-') {
           console.warn('Property ' + property + ' cannot be reflected to attribute ' +
             attr + ' because "-" is not a valid starting attribute name. Use a lowercase first letter for the property instead.');

diff --git a/test/unit/polymer.element.html b/test/unit/polymer.element.html
@@ -40,7 +40,12 @@
               computed: '_compute(computedPropDep)'
             },
             accessor: String,
-            noStomp: String
+            noStomp: String,
+            customAttr: {
+              type: String,
+              attribute: 'foo',
+              reflectToAttribute: true
+            }
           };
         }
 
@@ -323,7 +328,7 @@ <h1>Sub template</h1>
 
   <test-fixture id="my-element-attr">
     <template>
-      <my-element prop="attr"></my-element>
+      <my-element prop="attr" foo="foo"></my-element>
     </template>
   </test-fixture>
 
@@ -409,10 +414,22 @@ <h1>Sub template</h1>
     test('attributes', function() {
       const fixtureEl = fixture('my-element-attr');
       assert.equal(fixtureEl.prop, 'attr');
-      assert.equal(fixtureEl._callAttributeChangedCallback, 1);
+      assert.equal(fixtureEl.customAttr, 'foo');
+      assert.equal(fixtureEl._callAttributeChangedCallback, 3);
       assert.isTrue(fixtureEl.hasAttribute('tabindex'));
     });
 
+    test('reflecting attributes', function() {
+      const fixtureEl = fixture('my-element-attr');
+      fixtureEl.prop = 'propValue';
+      // without reflect effect
+      fixtureEl._propertyToAttribute('prop');
+      assert.equal(fixtureEl.getAttribute('prop'), 'propValue');
+      // with reflect effect
+      fixtureEl.customAttr = 'customAttrValue';
+      assert.equal(fixtureEl.getAttribute('foo'), 'customAttrValue');
+    });
+
   });
 
   suite('subclass', function() {

diff --git a/test/unit/polymer.properties-element.html b/test/unit/polymer.properties-element.html
@@ -25,7 +25,11 @@
         static get properties() {
           return {
             prop: String,
-            noStomp: String
+            noStomp: String,
+            customAttr: {
+              type: String,
+              attribute: 'foo'
+            }
           };
         }
 
@@ -186,7 +190,7 @@
 
   <test-fixture id="my-element-attr">
     <template>
-      <my-element prop="attr"></my-element>
+      <my-element prop="attr" foo="foo"></my-element>
     </template>
   </test-fixture>
 
@@ -244,7 +248,18 @@
     test('attributes', function() {
       const fixtureEl = fixture('my-element-attr');
       assert.equal(fixtureEl.prop, 'attr');
-      assert.equal(fixtureEl._callAttributeChangedCallback, 1);
+      assert.equal(fixtureEl.customAttr, 'foo');
+      assert.equal(fixtureEl._callAttributeChangedCallback, 2);
+    });
+
+    test('reflecting attributes', function() {
+      const fixtureEl = fixture('my-element-attr');
+      fixtureEl.prop = 'propValue';
+      fixtureEl._propertyToAttribute('prop');
+      assert.equal(fixtureEl.getAttribute('prop'), 'propValue');
+      fixtureEl.customAttr = 'customAttrValue';
+      fixtureEl._propertyToAttribute('customAttr');
+      assert.equal(fixtureEl.getAttribute('foo'), 'customAttrValue');
     });
 
   });