diff options
author | Anton Bershanskiy <bershan2@illinois.edu> | 2019-03-22 10:10:03 +0300 |
---|---|---|
committer | Johann-S <johann.servoire@gmail.com> | 2019-07-23 15:23:50 +0300 |
commit | fe6ba2384ae87b8328d2420859b396c28867dbb4 (patch) | |
tree | 703ad0df7791df172d8559e62ed22d6bbf3b0923 /js/src/dom | |
parent | c8c207465043d940aa031570f0bce5e8fff9ffcf (diff) |
rewrite manipulator unit tests
Diffstat (limited to 'js/src/dom')
-rw-r--r-- | js/src/dom/manipulator.spec.js | 158 |
1 files changed, 158 insertions, 0 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) + }) + }) +}) |