0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-04 16:24:22 +01:00
Bootstrap/js/tests/unit/dom/manipulator.spec.js

136 lines
4.5 KiB
JavaScript
Raw Normal View History

import Manipulator from '../../../src/dom/manipulator'
import { clearFixture, getFixture } from '../../helpers/fixture'
2019-03-22 08:10:03 +01:00
describe('Manipulator', () => {
let fixtureEl
beforeAll(() => {
fixtureEl = getFixture()
})
afterEach(() => {
clearFixture()
})
describe('setDataAttribute', () => {
it('should set data attribute prefixed with bs', () => {
2019-03-22 08:10:03 +01:00
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
Manipulator.setDataAttribute(div, 'key', 'value')
expect(div.getAttribute('data-bs-key')).toEqual('value')
2019-03-22 08:10:03 +01:00
})
it('should set data attribute in kebab case', () => {
2019-03-22 08:10:03 +01:00
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
Manipulator.setDataAttribute(div, 'testKey', 'value')
expect(div.getAttribute('data-bs-test-key')).toEqual('value')
2019-03-22 08:10:03 +01:00
})
})
describe('removeDataAttribute', () => {
it('should only remove bs-prefixed data attribute', () => {
fixtureEl.innerHTML = '<div data-bs-key="value" data-key-bs="postfixed" data-key="value"></div>'
2019-03-22 08:10:03 +01:00
const div = fixtureEl.querySelector('div')
Manipulator.removeDataAttribute(div, 'key')
expect(div.getAttribute('data-bs-key')).toBeNull()
expect(div.getAttribute('data-key-bs')).toEqual('postfixed')
expect(div.getAttribute('data-key')).toEqual('value')
2019-03-22 08:10:03 +01:00
})
it('should remove data attribute in kebab case', () => {
fixtureEl.innerHTML = '<div data-bs-test-key="value"></div>'
2019-03-22 08:10:03 +01:00
const div = fixtureEl.querySelector('div')
Manipulator.removeDataAttribute(div, 'testKey')
expect(div.getAttribute('data-bs-test-key')).toBeNull()
2019-03-22 08:10:03 +01:00
})
})
describe('getDataAttributes', () => {
it('should return an empty object for null', () => {
expect(Manipulator.getDataAttributes(null)).toEqual({})
2019-03-22 08:10:03 +01:00
expect().nothing()
})
it('should get only bs-prefixed data attributes without bs namespace', () => {
2020-11-11 07:37:04 +01:00
fixtureEl.innerHTML = '<div data-bs-toggle="tabs" data-bs-target="#element" data-another="value" data-target-bs="#element" data-in-bs-out="in-between"></div>'
2019-03-22 08:10:03 +01:00
const div = fixtureEl.querySelector('div')
expect(Manipulator.getDataAttributes(div)).toEqual({
toggle: 'tabs',
target: '#element'
})
})
it('should omit `bs-config` data attribute', () => {
fixtureEl.innerHTML = '<div data-bs-toggle="tabs" data-bs-target="#element" data-bs-config=\'{"testBool":false}\'></div>'
const div = fixtureEl.querySelector('div')
expect(Manipulator.getDataAttributes(div)).toEqual({
toggle: 'tabs',
target: '#element'
})
})
2019-03-22 08:10:03 +01:00
})
describe('getDataAttribute', () => {
it('should only get bs-prefixed data attribute', () => {
fixtureEl.innerHTML = '<div data-bs-key="value" data-test-bs="postFixed" data-toggle="tab"></div>'
2019-03-22 08:10:03 +01:00
const div = fixtureEl.querySelector('div')
expect(Manipulator.getDataAttribute(div, 'key')).toEqual('value')
2019-03-22 08:10:03 +01:00
expect(Manipulator.getDataAttribute(div, 'test')).toBeNull()
expect(Manipulator.getDataAttribute(div, 'toggle')).toBeNull()
2019-03-22 08:10:03 +01:00
})
it('should get data attribute in kebab case', () => {
fixtureEl.innerHTML = '<div data-bs-test-key="value" ></div>'
2019-03-22 08:10:03 +01:00
const div = fixtureEl.querySelector('div')
expect(Manipulator.getDataAttribute(div, 'testKey')).toEqual('value')
2019-03-22 08:10:03 +01:00
})
it('should normalize data', () => {
fixtureEl.innerHTML = '<div data-bs-test="false" ></div>'
2019-03-22 08:10:03 +01:00
const div = fixtureEl.querySelector('div')
expect(Manipulator.getDataAttribute(div, 'test')).toBeFalse()
2019-03-22 08:10:03 +01:00
div.setAttribute('data-bs-test', 'true')
expect(Manipulator.getDataAttribute(div, 'test')).toBeTrue()
2019-03-22 08:10:03 +01:00
div.setAttribute('data-bs-test', '1')
2019-03-22 08:10:03 +01:00
expect(Manipulator.getDataAttribute(div, 'test')).toEqual(1)
})
it('should normalize json data', () => {
fixtureEl.innerHTML = '<div data-bs-test=\'{"delay":{"show":100,"hide":10}}\'></div>'
const div = fixtureEl.querySelector('div')
expect(Manipulator.getDataAttribute(div, 'test')).toEqual({ delay: { show: 100, hide: 10 } })
const objectData = { 'Super Hero': ['Iron Man', 'Super Man'], testNum: 90, url: 'http://localhost:8080/test?foo=bar' }
const dataStr = JSON.stringify(objectData)
div.setAttribute('data-bs-test', encodeURIComponent(dataStr))
expect(Manipulator.getDataAttribute(div, 'test')).toEqual(objectData)
div.setAttribute('data-bs-test', dataStr)
expect(Manipulator.getDataAttribute(div, 'test')).toEqual(objectData)
})
2019-03-22 08:10:03 +01:00
})
})