123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 |
- import Manipulator from '../../../src/dom/manipulator'
- /** Test helpers */
- import { getFixture, clearFixture } from '../../helpers/fixture'
- describe('Manipulator', () => {
- let fixtureEl
- beforeAll(() => {
- fixtureEl = getFixture()
- })
- afterEach(() => {
- clearFixture()
- })
- describe('setDataAttribute', () => {
- it('should set data attribute prefixed with bs', () => {
- fixtureEl.innerHTML = '<div></div>'
- const div = fixtureEl.querySelector('div')
- Manipulator.setDataAttribute(div, 'key', 'value')
- expect(div.getAttribute('data-bs-key')).toEqual('value')
- })
- it('should set data attribute in kebab case', () => {
- fixtureEl.innerHTML = '<div></div>'
- const div = fixtureEl.querySelector('div')
- Manipulator.setDataAttribute(div, 'testKey', 'value')
- expect(div.getAttribute('data-bs-test-key')).toEqual('value')
- })
- })
- 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>'
- 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')
- })
- it('should remove data attribute in kebab case', () => {
- fixtureEl.innerHTML = '<div data-bs-test-key="value"></div>'
- const div = fixtureEl.querySelector('div')
- Manipulator.removeDataAttribute(div, 'testKey')
- expect(div.getAttribute('data-bs-test-key')).toBeNull()
- })
- })
- describe('getDataAttributes', () => {
- it('should return an empty object for null', () => {
- expect(Manipulator.getDataAttributes(null)).toEqual({})
- expect().nothing()
- })
- it('should get only bs-prefixed data attributes without bs namespace', () => {
- 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>'
- const div = fixtureEl.querySelector('div')
- expect(Manipulator.getDataAttributes(div)).toEqual({
- toggle: 'tabs',
- target: '#element'
- })
- })
- })
- 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>'
- const div = fixtureEl.querySelector('div')
- expect(Manipulator.getDataAttribute(div, 'key')).toEqual('value')
- expect(Manipulator.getDataAttribute(div, 'test')).toBeNull()
- expect(Manipulator.getDataAttribute(div, 'toggle')).toBeNull()
- })
- it('should get data attribute in kebab case', () => {
- fixtureEl.innerHTML = '<div data-bs-test-key="value" ></div>'
- const div = fixtureEl.querySelector('div')
- expect(Manipulator.getDataAttribute(div, 'testKey')).toEqual('value')
- })
- it('should normalize data', () => {
- fixtureEl.innerHTML = '<div data-bs-test="false" ></div>'
- const div = fixtureEl.querySelector('div')
- expect(Manipulator.getDataAttribute(div, 'test')).toEqual(false)
- div.setAttribute('data-bs-test', 'true')
- expect(Manipulator.getDataAttribute(div, 'test')).toEqual(true)
- div.setAttribute('data-bs-test', '1')
- expect(Manipulator.getDataAttribute(div, 'test')).toEqual(1)
- })
- })
- describe('offset', () => {
- it('should return an 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 an 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))
- })
- })
- })
|