Do not reflect uppercase properties

Add tests for warning on uppercase properties and attribute bindings beginning with '-' Fixes #3500
Polymer · Mar 9, 2016 · 72d35e0 · 72d35e0
1 parent 8066919
commit 72d35e0
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 16 deletions.
diff --git a/src/standard/effectBuilder.html b/src/standard/effectBuilder.html
@@ -65,9 +65,14 @@
               event: Polymer.CaseMap.camelToDashCase(p) + '-changed'});
           }
           if (prop.reflectToAttribute) {
-            this._addPropertyEffect(p, 'reflect', {
-              attribute: Polymer.CaseMap.camelToDashCase(p)
-            });
+            var attr = Polymer.CaseMap.camelToDashCase(p);
+            if (attr[0] === '-') {
+              this._warn(this._logf('_addPropertyEffects', 'Property ' + p + ' cannot be reflected to attribute ' + attr + ' because "-" is not a valid starting attribute name. Use a lowercase first letter for the property instead.'));
+            } else {
+              this._addPropertyEffect(p, 'reflect', {
+                attribute: attr
+              });
+            }
           }
           if (prop.readOnly) {
             // Ensure accessor is created
@@ -98,7 +103,7 @@
           trigger: null,
           name: name,
           dynamicFn: dynamicFn
-        })
+        });
       }
     },
 
@@ -168,18 +173,22 @@
           this._addAnnotatedComputationEffect(note, part, index);
         } else if (!part.literal) {
           // add 'annotation' binding effect for property 'model'
-          this._addPropertyEffect(part.model, 'annotation', {
-            kind: note.kind,
-            index: index,
-            name: note.name,
-            propertyName: note.propertyName,
-            value: part.value,
-            isCompound: note.isCompound,
-            compoundIndex: part.compoundIndex,
-            event: part.event,
-            customEvent: part.customEvent,
-            negate: part.negate
-          });
+          if (note.kind === 'attribute' && note.name[0] === '-') {
+            this._warn(this._logf('_addAnnotationEffect', 'Cannot set attribute ' + note.name + ' because "-" is not a valid attribute starting character'));
+          } else {
+            this._addPropertyEffect(part.model, 'annotation', {
+              kind: note.kind,
+              index: index,
+              name: note.name,
+              propertyName: note.propertyName,
+              value: part.value,
+              isCompound: note.isCompound,
+              compoundIndex: part.compoundIndex,
+              event: part.event,
+              customEvent: part.customEvent,
+              negate: part.negate
+            });
+          }
         }
       }
     },

diff --git a/test/unit/attributes-elements.html b/test/unit/attributes-elements.html
@@ -44,6 +44,10 @@
         type: String,
         value: 'none'
       },
+      UPCASE: {
+        type: String,
+        value: 'none'
+      },
       noType: {
         value: 'none'
       },
@@ -120,6 +124,11 @@
         reflectToAttribute: true,
         value: 'none'
       },
+      UPCASE: {
+        type: String,
+        reflectToAttribute: true,
+        value: 'none'
+      },
       noType: {
         value: 'none'
       },
@@ -128,6 +137,12 @@
         value: 'default',
         readOnly: true
       }
+    },
+    _warn: function() {
+      var search = Array.prototype.join.call(arguments, '');
+      if (search.indexOf('UPCASE') > -1) {
+        this.__warnedAboutUPCASE = true;
+      }
     }
   });
 </script>

diff --git a/test/unit/attributes.html b/test/unit/attributes.html
@@ -29,6 +29,7 @@
   string="The quick brown fox"
   bool
   date="Wed Mar 04 2015 10:46:05 GMT-0800 (PST)"
+  -u-p-c-a-s-e="The quick brown fox"
   dash-case="The quick brown fox"
   no-type="Should be String"
   read-only="Should not change"
@@ -47,6 +48,7 @@
   bool
   date="Wed Mar 04 2015 10:46:05 GMT-0800 (PST)"
   dash-case="The quick brown fox"
+  -u-p-c-a-s-e="The quick brown fox"
   no-type="Should be String"
   read-only="Should not change"
   class="Should not deserialize"
@@ -75,6 +77,7 @@
     assert.strictEqual(basicDefault.negBool, false);
     assert.strictEqual(basicDefault.date.getTime(), 0);
     assert.strictEqual(basicDefault.dashCase, 'none');
+    assert.strictEqual(basicDefault.UPCASE, 'none');
     assert.strictEqual(basicDefault.noType, 'none');
     assert.strictEqual(basicDefault.readOnly, 'default');
   });
@@ -88,6 +91,7 @@
     assert.strictEqual(basicConfigured.negBool, false);
     assert.strictEqual(basicConfigured.date.getTime(), configuredTime);
     assert.strictEqual(basicConfigured.dashCase, configuredString);
+    assert.strictEqual(basicConfigured.UPCASE, configuredString);
     assert.strictEqual(basicConfigured.noType, configuredNoType);
     assert.strictEqual(basicConfigured.readOnly, 'default');
     assert.strictEqual(basicConfigured.class, undefined);
@@ -103,6 +107,7 @@
     assert.strictEqual(reflectDefault.negBool, false);
     assert.strictEqual(reflectDefault.date.getTime(), 0);
     assert.strictEqual(reflectDefault.dashCase, 'none');
+    assert.strictEqual(reflectDefault.UPCASE, 'none');
     assert.strictEqual(reflectDefault.noType, 'none');
     assert.strictEqual(reflectDefault.readOnly, 'default');
   });
@@ -116,12 +121,17 @@
     assert.strictEqual(reflectConfigured.negBool, false);
     assert.strictEqual(reflectConfigured.date.getTime(), configuredTime);
     assert.strictEqual(reflectConfigured.dashCase, configuredString);
+    assert.strictEqual(reflectConfigured.UPCASE, configuredString);
     assert.strictEqual(reflectConfigured.noType, configuredNoType);
     assert.strictEqual(reflectConfigured.readOnly, 'default');
     assert.strictEqual(reflectConfigured.class, undefined);
     assert.strictEqual(reflectConfigured.nard, undefined);
   });
 
+  test('reflected warned about reflection for UPCASE', function() {
+    assert.isTrue(reflectDefault.__warnedAboutUPCASE = true);
+  });
+
 });
 
 suite('imperative attribute change (no-reflect)', function() {

diff --git a/test/unit/bind-elements.html b/test/unit/bind-elements.html
@@ -662,3 +662,26 @@
     });
   </script>
 </dom-module>
+
+<dom-module id="x-bind-bad-attribute-name">
+  <template>
+    <div -u-p-c-a-s-e$="[[UPCASE]]"></div>
+  </template>
+  <script>
+    Polymer({
+      is: 'x-bind-bad-attribute-name',
+      properties: {
+        UPCASE: {
+          type: String,
+          value: 'foo'
+        }
+      },
+      _warn: function() {
+        var search = Array.prototype.join.call(arguments, '');
+        if (search.indexOf('-u-p-c-a-s-e') > -1) {
+          this.__warnedAboutUPCASE = true;
+        }
+      }
+    });
+  </script>
+</dom-module>
diff --git a/test/unit/bind.html b/test/unit/bind.html
@@ -826,6 +826,11 @@
     assert.equal(warned, true, 'no warning for undefined computed function');
   });
 
+  test('binding to a bad attribute warns', function() {
+    var el = document.createElement('x-bind-bad-attribute-name');
+    assert.equal(el.__warnedAboutUPCASE, true, 'no warning for setting a bad attribute');
+  });
+
 });
 
 suite('binding corner cases', function() {