Update normalizeDataKey to match the spec (#29609)

diff --git a/js/src/dom/manipulator.js b/js/src/dom/manipulator.js
index 9768473b59bae089cf2d2f5cb370429089aba242..5629e1fabbf3f77cfcf19b51deb984337110ecda 100644 (file)
--- a/js/src/dom/manipulator.js
+++ b/js/src/dom/manipulator.js
@@ -26,7 +26,7 @@ function normalizeData(val) {
 }
 
 function normalizeDataKey(key) {
-  return key.replace(/[A-Z]/g, chr => chr.toLowerCase())
+  return key.replace(/[A-Z]/g, chr => `-${chr.toLowerCase()}`)
 }
 
 const Manipulator = {

diff --git a/js/tests/unit/dom/manipulator.spec.js b/js/tests/unit/dom/manipulator.spec.js
index 986f6929804280a98fbd399ebf7266f0974d8d04..eec3ced52b1ebb522e427254df776d3a29ccbd67 100644 (file)
--- a/js/tests/unit/dom/manipulator.spec.js
+++ b/js/tests/unit/dom/manipulator.spec.js
@@ -24,13 +24,13 @@ describe('Manipulator', () => {
       expect(div.getAttribute('data-key')).toEqual('value')
     })
 
-    it('should set data attribute in lower case', () => {
+    it('should set data attribute in kebab case', () => {
       fixtureEl.innerHTML = '<div></div>'
 
       const div = fixtureEl.querySelector('div')
 
-      Manipulator.setDataAttribute(div, 'tEsT', 'value')
-      expect(div.getAttribute('data-test')).toEqual('value')
+      Manipulator.setDataAttribute(div, 'testKey', 'value')
+      expect(div.getAttribute('data-test-key')).toEqual('value')
     })
   })
 
@@ -44,13 +44,13 @@ describe('Manipulator', () => {
       expect(div.getAttribute('data-key')).toBeNull()
     })
 
-    it('should remove data attribute in lower case', () => {
-      fixtureEl.innerHTML = '<div data-testkey="value" ></div>'
+    it('should remove data attribute in kebab case', () => {
+      fixtureEl.innerHTML = '<div data-test-key="value"></div>'
 
       const div = fixtureEl.querySelector('div')
 
-      Manipulator.removeDataAttribute(div, 'tEStKeY')
-      expect(div.getAttribute('data-testkey')).toBeNull()
+      Manipulator.removeDataAttribute(div, 'testKey')
+      expect(div.getAttribute('data-test-key')).toBeNull()
     })
   })
 
@@ -81,12 +81,12 @@ describe('Manipulator', () => {
       expect(Manipulator.getDataAttribute(div, 'test')).toBeNull()
     })
 
-    it('should get data attribute in lower case', () => {
-      fixtureEl.innerHTML = '<div data-test="value" ></div>'
+    it('should get data attribute in kebab case', () => {
+      fixtureEl.innerHTML = '<div data-test-key="value" ></div>'
 
       const div = fixtureEl.querySelector('div')
 
-      expect(Manipulator.getDataAttribute(div, 'tEsT')).toEqual('value')
+      expect(Manipulator.getDataAttribute(div, 'testKey')).toEqual('value')
     })
 
     it('should normalize data', () => {