rewrite manipulator unit tests

js/src/dom/manipulator.spec.js

+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), {})
+      expect().nothing()
+    })
+
+    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')
+    })
+
+    it('should normalize data', () => {
+      fixtureEl.innerHTML = '<div data-test="false" ></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      expect(Manipulator.getDataAttribute(div, 'test')).toEqual(false)
+
+      div.setAttribute('data-test', 'true')
+      expect(Manipulator.getDataAttribute(div, 'test')).toEqual(true)
+
+      div.setAttribute('data-test', '1')
+      expect(Manipulator.getDataAttribute(div, 'test')).toEqual(1)
+    })
+  })
+
+  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)
+    })
+  })
+})

js/tests/unit/dom/manipulator.js

-$(function () {
-  'use strict'
-
-  QUnit.module('manipulator')
-
-  QUnit.test('should be defined', function (assert) {
-    assert.expect(1)
-    assert.ok(Manipulator, 'Manipulator is defined')
-  })
-
-  QUnit.test('should set data attribute', function (assert) {
-    assert.expect(1)
-
-    var $div = $('<div />').appendTo('#qunit-fixture')
-
-    Manipulator.setDataAttribute($div[0], 'test', 'test')
-
-    assert.strictEqual($div[0].getAttribute('data-test'), 'test')
-  })
-
-  QUnit.test('should set data attribute in lower case', function (assert) {
-    assert.expect(1)
-
-    var $div = $('<div />').appendTo('#qunit-fixture')
-
-    Manipulator.setDataAttribute($div[0], 'tEsT', 'test')
-
-    assert.strictEqual($div[0].getAttribute('data-test'), 'test')
-  })
-
-  QUnit.test('should get data attribute', function (assert) {
-    assert.expect(2)
-
-    var $div = $('<div data-test="null" />').appendTo('#qunit-fixture')
-
-    assert.strictEqual(Manipulator.getDataAttribute($div[0], 'test'), null)
-
-    var $div2 = $('<div data-test2="js" />').appendTo('#qunit-fixture')
-
-    assert.strictEqual(Manipulator.getDataAttribute($div2[0], 'tEst2'), 'js')
-  })
-
-  QUnit.test('should get data attributes', function (assert) {
-    assert.expect(4)
-
-    var $div = $('<div data-test="js" data-test2="js2" />').appendTo('#qunit-fixture')
-    var $div2 = $('<div data-test3="js" data-test4="js2" />').appendTo('#qunit-fixture')
-    var $div3 = $('<div attri="1" />').appendTo('#qunit-fixture')
-
-    assert.propEqual(Manipulator.getDataAttributes($div[0]), {
-      test: 'js',
-      test2: 'js2'
-    })
-
-    assert.propEqual(Manipulator.getDataAttributes(null), {})
-    assert.propEqual(Manipulator.getDataAttributes($div2[0]), {
-      test3: 'js',
-      test4: 'js2'
-    })
-    assert.propEqual(Manipulator.getDataAttributes($div3[0]), {})
-  })
-
-  QUnit.test('should remove data attribute', function (assert) {
-    assert.expect(2)
-
-    var $div = $('<div />').appendTo('#qunit-fixture')
-
-    Manipulator.setDataAttribute($div[0], 'test', 'test')
-
-    assert.strictEqual($div[0].getAttribute('data-test'), 'test')
-
-    Manipulator.removeDataAttribute($div[0], 'test')
-
-    assert.strictEqual($div[0].getAttribute('data-test'), null)
-  })
-
-  QUnit.test('should remove data attribute in lower case', function (assert) {
-    assert.expect(2)
-
-    var $div = $('<div />').appendTo('#qunit-fixture')
-
-    Manipulator.setDataAttribute($div[0], 'test', 'test')
-
-    assert.strictEqual($div[0].getAttribute('data-test'), 'test')
-
-    Manipulator.removeDataAttribute($div[0], 'tESt')
-
-    assert.strictEqual($div[0].getAttribute('data-test'), null)
-  })
-
-  QUnit.test('should return element offsets', function (assert) {
-    assert.expect(2)
-
-    var $div = $('<div />').appendTo('#qunit-fixture')
-
-    var offset = Manipulator.offset($div[0])
-
-    assert.ok(typeof offset.top === 'number')
-    assert.ok(typeof offset.left === 'number')
-  })
-
-  QUnit.test('should return element position', function (assert) {
-    assert.expect(2)
-
-    var $div = $('<div />').appendTo('#qunit-fixture')
-
-    var offset = Manipulator.position($div[0])
-
-    assert.ok(typeof offset.top === 'number')
-    assert.ok(typeof offset.left === 'number')
-  })
-
-  QUnit.test('should toggle class', function (assert) {
-    assert.expect(2)
-
-    var $div = $('<div class="test" />').appendTo('#qunit-fixture')
-
-    Manipulator.toggleClass($div[0], 'test')
-
-    assert.ok(!$div.hasClass('test'))
-
-    Manipulator.toggleClass($div[0], 'test')
-
-    assert.ok($div.hasClass('test'))
-
-    Manipulator.toggleClass(null)
-  })
-})