diff options
-rw-r--r-- | js/src/dom/manipulator.spec.js | 158 | ||||
-rw-r--r-- | js/tests/unit/dom/manipulator.js | 128 |
2 files changed, 158 insertions, 128 deletions
diff --git a/js/src/dom/manipulator.spec.js b/js/src/dom/manipulator.spec.js new file mode 100644 index 0000000000..e96c068d44 --- /dev/null +++ b/js/src/dom/manipulator.spec.js @@ -0,0 +1,158 @@ +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) + }) + }) +}) diff --git a/js/tests/unit/dom/manipulator.js b/js/tests/unit/dom/manipulator.js deleted file mode 100644 index f657709059..0000000000 --- a/js/tests/unit/dom/manipulator.js +++ /dev/null @@ -1,128 +0,0 @@ -$(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) - }) -}) |