mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-28 20:52:21 +01:00
rewrite manipulator unit tests
This commit is contained in:
Anton Bershanskiy
Johann-S
parent
c8c2074650
commit
fe6ba2384a
158
js/src/dom/manipulator.spec.js
Normal file
158
js/src/dom/manipulator.spec.js
Normal file
@ -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)
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -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)
|
||||
})
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user