refactor: use a Map instead of an Object in dom/data (#32180)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Rohit Sharma <rohit2sharma95@gmail.com>

js/tests/unit/dom/data.spec.js

@@ -4,128 +4,103 @@ import Data from '../../../src/dom/data'
 import { getFixture, clearFixture } from '../../helpers/fixture'
 
 describe('Data', () => {
+  const TEST_KEY = 'bs.test'
+  const UNKNOWN_KEY = 'bs.unknown'
+  const TEST_DATA = {
+    test: 'bsData'
+  }
+
   let fixtureEl
+  let div
 
   beforeAll(() => {
     fixtureEl = getFixture()
   })
 
+  beforeEach(() => {
+    fixtureEl.innerHTML = '<div></div>'
+    div = fixtureEl.querySelector('div')
+  })
+
   afterEach(() => {
+    Data.remove(div, TEST_KEY)
     clearFixture()
   })
 
-  describe('setData', () => {
-    it('should set data in an element by adding a bsKey attribute', () => {
-      fixtureEl.innerHTML = '<div></div>'
+  it('should return null for unknown elements', () => {
+    const data = { ...TEST_DATA }
 
-      const div = fixtureEl.querySelector('div')
-      const data = {
-        test: 'bsData'
-      }
+    Data.set(div, TEST_KEY, data)
 
-      Data.setData(div, 'test', data)
-      expect(div.bsKey).toBeDefined()
-    })
-
-    it('should change data if something is already stored', () => {
-      fixtureEl.innerHTML = '<div></div>'
-
-      const div = fixtureEl.querySelector('div')
-      const data = {
-        test: 'bsData'
-      }
-
-      Data.setData(div, 'test', data)
-
-      data.test = 'bsData2'
-      Data.setData(div, 'test', data)
-
-      expect(div.bsKey).toBeDefined()
-    })
+    expect(Data.get(null)).toBeNull()
+    expect(Data.get(undefined)).toBeNull()
+    expect(Data.get(document.createElement('div'), TEST_KEY)).toBeNull()
   })
 
-  describe('getData', () => {
-    it('should return stored data', () => {
-      fixtureEl.innerHTML = '<div></div>'
+  it('should return null for unknown keys', () => {
+    const data = { ...TEST_DATA }
 
-      const div = fixtureEl.querySelector('div')
-      const data = {
-        test: 'bsData'
-      }
+    Data.set(div, TEST_KEY, data)
 
-      Data.setData(div, 'test', data)
-      expect(Data.getData(div, 'test')).toEqual(data)
-    })
-
-    it('should return null on undefined element', () => {
-      expect(Data.getData(null)).toEqual(null)
-      expect(Data.getData(undefined)).toEqual(null)
-    })
-
-    it('should return null when an element have nothing stored', () => {
-      fixtureEl.innerHTML = '<div></div>'
-
-      const div = fixtureEl.querySelector('div')
-
-      expect(Data.getData(div, 'test')).toEqual(null)
-    })
-
-    it('should return null when an element have nothing stored with the provided key', () => {
-      fixtureEl.innerHTML = '<div></div>'
-
-      const div = fixtureEl.querySelector('div')
-      const data = {
-        test: 'bsData'
-      }
-
-      Data.setData(div, 'test', data)
-
-      expect(Data.getData(div, 'test2')).toEqual(null)
-    })
+    expect(Data.get(div, null)).toBeNull()
+    expect(Data.get(div, undefined)).toBeNull()
+    expect(Data.get(div, UNKNOWN_KEY)).toBeNull()
   })
 
-  describe('removeData', () => {
-    it('should do nothing when an element have nothing stored', () => {
-      fixtureEl.innerHTML = '<div></div>'
+  it('should store data for an element with a given key and return it', () => {
+    const data = { ...TEST_DATA }
 
-      const div = fixtureEl.querySelector('div')
+    Data.set(div, TEST_KEY, data)
 
-      Data.removeData(div, 'test')
-      expect().nothing()
-    })
+    expect(Data.get(div, TEST_KEY)).toBe(data)
+  })
 
-    it('should should do nothing if it\'s not a valid key provided', () => {
-      fixtureEl.innerHTML = '<div></div>'
+  it('should overwrite data if something is already stored', () => {
+    const data = { ...TEST_DATA }
+    const copy = { ...data }
 
-      const div = fixtureEl.querySelector('div')
-      const data = {
-        test: 'bsData'
-      }
+    Data.set(div, TEST_KEY, data)
+    Data.set(div, TEST_KEY, copy)
 
-      Data.setData(div, 'test', data)
+    expect(Data.get(div, TEST_KEY)).not.toBe(data)
+    expect(Data.get(div, TEST_KEY)).toBe(copy)
+  })
 
-      expect(div.bsKey).toBeDefined()
+  it('should do nothing when an element have nothing stored', () => {
+    Data.remove(div, TEST_KEY)
 
-      Data.removeData(div, 'test2')
+    expect().nothing()
+  })
 
-      expect(div.bsKey).toBeDefined()
-    })
+  it('should remove nothing for an unknown key', () => {
+    const data = { ...TEST_DATA }
 
-    it('should remove data if something is stored', () => {
-      fixtureEl.innerHTML = '<div></div>'
+    Data.set(div, TEST_KEY, data)
+    Data.remove(div, UNKNOWN_KEY)
 
-      const div = fixtureEl.querySelector('div')
-      const data = {
-        test: 'bsData'
-      }
+    expect(Data.get(div, TEST_KEY)).toBe(data)
+  })
 
-      Data.setData(div, 'test', data)
+  it('should remove data for a given key', () => {
+    const data = { ...TEST_DATA }
 
-      expect(div.bsKey).toBeDefined()
+    Data.set(div, TEST_KEY, data)
+    Data.remove(div, TEST_KEY)
 
-      Data.removeData(div, 'test')
+    expect(Data.get(div, TEST_KEY)).toBeNull()
+  })
 
-      expect(div.bsKey).toBeUndefined()
-    })
+  it('should console.error a message if called with multiple keys', () => {
+    /* eslint-disable no-console */
+    console.error = jasmine.createSpy('console.error')
+
+    const data = { ...TEST_DATA }
+    const copy = { ...data }
+
+    Data.set(div, TEST_KEY, data)
+    Data.set(div, UNKNOWN_KEY, copy)
+
+    expect(console.error).toHaveBeenCalled()
+    expect(Data.get(div, UNKNOWN_KEY)).toBe(null)
   })
 })