fix(jqLite): camelCase keys in jqLite#data

This change aligns jqLite with jQuery 3.

Close angular#15126

BREAKING CHANGE: Previously, keys passed to the data method were left untouched.
Now they are internally camelCased similarly to how jQuery handles it, i.e.
only single (!) hyphens followed by a lowercase letter get converted to an
uppercase letter. This means keys `a-b` and `aB` represent the same data piece;
writing to one of them will also be reflected if you ask for the other one.

If you use Angular with jQuery, it already behaved in this way so no changes
are required on your part.

To migrate the code follow the examples below:

BEFORE:

/* 1 */
elem.data('my-key', 2);
elem.data('myKey', 3);

/* 2 */
elem.data('foo-bar', 42);
elem.data()['foo-bar']; // 42
elem.data()['fooBar']; // undefined

/* 3 */
elem.data()['foo-bar'] = 1;
elem.data()['fooBar'] = 2;
elem.data()['foo-bar']; // 1

AFTER:

/* 1 */
// Rename one of the keys as they would now map to the same data slot.
elem.data('my-key', 2);
elem.data('my-key2', 3);

/* 2 */
elem.data('foo-bar', 42);
elem.data()['foo-bar']; // undefined
elem.data()['fooBar']; // 42

/* 3 */
elem.data()['foo-bar'] = 1;
elem.data()['fooBar'] = 2;
elem.data()['foo-bar']; // 2

Author: mgol

src/jqLite.js

@@ -394,6 +394,7 @@ function jqLiteExpandoStore(element, createIfNecessary) {
 
 function jqLiteData(element, key, value) {
   if (jqLiteAcceptsData(element)) {
+    var prop;
 
     var isSimpleSetter = isDefined(value);
     var isSimpleGetter = !isSimpleSetter && key && !isObject(key);
@@ -402,16 +403,18 @@ function jqLiteData(element, key, value) {
     var data = expandoStore && expandoStore.data;
 
     if (isSimpleSetter) { // data('key', value)
-      data[key] = value;
+      data[kebabToCamel(key)] = value;
     } else {
       if (massGetter) {  // data()
         return data;
       } else {
         if (isSimpleGetter) { // data('key')
           // don't force creation of expandoStore if it doesn't exist yet
-          return data && data[key];
+          return data && data[kebabToCamel(key)];
         } else { // mass-setter: data({key1: val1, key2: val2})
-          extend(data, key);
+          for (prop in key) {
+            data[kebabToCamel(prop)] = key[prop];
+          }
         }
       }
     }

test/jqLiteSpec.js

@@ -594,6 +594,39 @@ describe('jqLite', function() {
         }).not.toThrow();
       });
     });
+
+    describe('camelCasing keys', function() {
+      // jQuery 2.x has different behavior; skip the tests.
+      if (isJQuery2x()) return;
+
+      it('should camelCase the key in a setter', function() {
+        var element = jqLite(a);
+
+        element.data('a-B-c-d-42--e', 'z-x');
+        expect(element.data()).toEqual({'a-BCD-42-E': 'z-x'});
+      });
+
+      it('should camelCase the key in a getter', function() {
+        var element = jqLite(a);
+
+        element.data()['a-BCD-42-E'] = 'x-c';
+        expect(element.data('a-B-c-d-42--e')).toBe('x-c');
+      });
+
+      it('should camelCase the key in a mass setter', function() {
+        var element = jqLite(a);
+
+        element.data({'a-B-c-d-42--e': 'c-v', 'r-t-v': 42});
+        expect(element.data()).toEqual({'a-BCD-42-E': 'c-v', 'rTV': 42});
+      });
+
+      it('should ignore non-camelCase keys in the data in a getter', function() {
+        var element = jqLite(a);
+
+        element.data()['a-b'] = 'b-n';
+        expect(element.data('a-b')).toBe(undefined);
+      });
+    });
   });