Move Manipulator test cases from QUnit to Jasmine

js/src/dom/manipulator.spec.js

@@ -0,0 +1,143 @@
+import Manipulator from './manipulator'
+
+/** Test helpers */
+import { getFixture, clearFixture } from '../../tests/helpers/fixture'
+
+describe('Manipulator', () => {
+  let fixtureEl
+
+  beforeAll(() => {
+    fixtureEl = getFixture()
+  })
+
+  afterEach(() => {
+    clearFixture()
+  })
+
+  describe('setDataAttribute', () => {
+    it('should set data attribute', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      Manipulator.setDataAttribute(div, 'key', 'value')
+      expect(div.getAttribute('data-key')).toEqual('value')
+    })
+
+    it('should set data attribute in lower case', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      Manipulator.setDataAttribute(div, 'tEsT', 'value')
+      expect(div.getAttribute('data-test')).toEqual('value')
+    })
+  })
+
+  describe('removeDataAttribute', () => {
+    it('should remove data attribute', () => {
+      fixtureEl.innerHTML = '<div data-key="value"></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      Manipulator.removeDataAttribute(div, 'key')
+      expect(div.getAttribute('data-key')).toBeNull()
+    })
+
+    it('should remove data attribute in lower case', () => {
+      fixtureEl.innerHTML = '<div data-testkey="value" ></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      Manipulator.removeDataAttribute(div, 'tEStKeY')
+      expect(div.getAttribute('data-testkey')).toBeNull()
+    })
+  })
+
+  describe('getDataAttributes', () => {
+    it('should return empty object for null', () => {
+      expect(Manipulator.getDataAttributes(null), {})
+    })
+
+    it('should get all data attributes', () => {
+      fixtureEl.innerHTML = '<div data-test="js" data-test2="js2" ></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      expect(Manipulator.getDataAttributes(div)).toEqual({
+        test: 'js',
+        test2: 'js2'
+      })
+    })
+  })
+
+  describe('getDataAttribute', () => {
+    it('should get data attribute', () => {
+      fixtureEl.innerHTML = '<div data-test="null" ></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      expect(Manipulator.getDataAttribute(div, 'test')).toBeNull()
+    })
+
+    it('should get data attribute in lower case', () => {
+      fixtureEl.innerHTML = '<div data-test="value" ></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      expect(Manipulator.getDataAttribute(div, 'tEsT')).toEqual('value')
+    })
+  })
+
+  describe('offset', () => {
+    it('should return object with two properties top and left, both numbers', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+      const offset = Manipulator.offset(div)
+
+      expect(offset).toBeDefined()
+      expect(offset.top).toEqual(jasmine.any(Number))
+      expect(offset.left).toEqual(jasmine.any(Number))
+    })
+  })
+
+  describe('position', () => {
+    it('should return object with two properties top and left, both numbers', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+      const position = Manipulator.position(div)
+
+      expect(position).toBeDefined()
+      expect(position.top).toEqual(jasmine.any(Number))
+      expect(position.left).toEqual(jasmine.any(Number))
+    })
+  })
+
+  describe('toggleClass', () => {
+    it('should not error out if element is null or undefined', () => {
+      Manipulator.toggleClass(null, 'test')
+      Manipulator.toggleClass(undefined, 'test')
+      expect().nothing()
+    })
+
+    it('should add class if it is missing', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      Manipulator.toggleClass(div, 'test')
+      expect(div.classList.contains('test')).toEqual(true)
+    })
+
+    it('should remove class if it is set', () => {
+      fixtureEl.innerHTML = '<div class="test"></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      Manipulator.toggleClass(div, 'test')
+      expect(div.classList.contains('test')).toEqual(false)
+    })
+  })
+})