2019-10-02 11:43:54 +02:00
|
|
|
import Button from '../../src/button'
|
2021-10-08 11:32:11 +02:00
|
|
|
import { getFixture, clearFixture, jQueryMock } from '../helpers/fixture'
|
2019-03-25 11:32:02 +01:00
|
|
|
|
|
|
|
describe('Button', () => {
|
|
|
|
let fixtureEl
|
|
|
|
|
|
|
|
beforeAll(() => {
|
|
|
|
fixtureEl = getFixture()
|
|
|
|
})
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
clearFixture()
|
|
|
|
})
|
|
|
|
|
2021-02-22 08:01:04 +01:00
|
|
|
it('should take care of element either passed as a CSS selector or DOM element', () => {
|
|
|
|
fixtureEl.innerHTML = '<button data-bs-toggle="button">Placeholder</button>'
|
|
|
|
const buttonEl = fixtureEl.querySelector('[data-bs-toggle="button"]')
|
|
|
|
const buttonBySelector = new Button('[data-bs-toggle="button"]')
|
|
|
|
const buttonByElement = new Button(buttonEl)
|
|
|
|
|
|
|
|
expect(buttonBySelector._element).toEqual(buttonEl)
|
|
|
|
expect(buttonByElement._element).toEqual(buttonEl)
|
|
|
|
})
|
|
|
|
|
2019-03-25 11:32:02 +01:00
|
|
|
describe('VERSION', () => {
|
|
|
|
it('should return plugin version', () => {
|
|
|
|
expect(Button.VERSION).toEqual(jasmine.any(String))
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
2021-02-16 07:58:08 +01:00
|
|
|
describe('DATA_KEY', () => {
|
|
|
|
it('should return plugin data key', () => {
|
|
|
|
expect(Button.DATA_KEY).toEqual('bs.button')
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
2019-03-25 11:32:02 +01:00
|
|
|
describe('data-api', () => {
|
|
|
|
it('should toggle active class on click', () => {
|
|
|
|
fixtureEl.innerHTML = [
|
2020-07-22 21:33:11 +02:00
|
|
|
'<button class="btn" data-bs-toggle="button">btn</button>',
|
|
|
|
'<button class="btn testParent" data-bs-toggle="button"><div class="test"></div></button>'
|
2019-03-25 11:32:02 +01:00
|
|
|
].join('')
|
|
|
|
|
|
|
|
const btn = fixtureEl.querySelector('.btn')
|
|
|
|
const divTest = fixtureEl.querySelector('.test')
|
|
|
|
const btnTestParent = fixtureEl.querySelector('.testParent')
|
|
|
|
|
2021-10-14 17:16:54 +02:00
|
|
|
expect(btn).not.toHaveClass('active')
|
2019-03-25 11:32:02 +01:00
|
|
|
|
|
|
|
btn.click()
|
|
|
|
|
2021-10-14 17:16:54 +02:00
|
|
|
expect(btn).toHaveClass('active')
|
2019-03-25 11:32:02 +01:00
|
|
|
|
|
|
|
btn.click()
|
|
|
|
|
2021-10-14 17:16:54 +02:00
|
|
|
expect(btn).not.toHaveClass('active')
|
2019-03-25 11:32:02 +01:00
|
|
|
|
|
|
|
divTest.click()
|
|
|
|
|
2021-10-14 17:16:54 +02:00
|
|
|
expect(btnTestParent).toHaveClass('active')
|
2019-03-25 11:32:02 +01:00
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('toggle', () => {
|
|
|
|
it('should toggle aria-pressed', () => {
|
2020-07-22 21:33:11 +02:00
|
|
|
fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button" aria-pressed="false"></button>'
|
2019-03-25 11:32:02 +01:00
|
|
|
|
|
|
|
const btnEl = fixtureEl.querySelector('.btn')
|
|
|
|
const button = new Button(btnEl)
|
|
|
|
|
|
|
|
expect(btnEl.getAttribute('aria-pressed')).toEqual('false')
|
2021-10-14 17:16:54 +02:00
|
|
|
expect(btnEl).not.toHaveClass('active')
|
2019-03-25 11:32:02 +01:00
|
|
|
|
|
|
|
button.toggle()
|
|
|
|
|
|
|
|
expect(btnEl.getAttribute('aria-pressed')).toEqual('true')
|
2021-10-14 17:16:54 +02:00
|
|
|
expect(btnEl).toHaveClass('active')
|
2019-03-25 11:32:02 +01:00
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('dispose', () => {
|
|
|
|
it('should dispose a button', () => {
|
2020-07-22 21:33:11 +02:00
|
|
|
fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>'
|
2019-03-25 11:32:02 +01:00
|
|
|
|
|
|
|
const btnEl = fixtureEl.querySelector('.btn')
|
|
|
|
const button = new Button(btnEl)
|
|
|
|
|
2021-05-11 07:45:57 +02:00
|
|
|
expect(Button.getInstance(btnEl)).not.toBeNull()
|
2019-03-25 11:32:02 +01:00
|
|
|
|
|
|
|
button.dispose()
|
|
|
|
|
2019-07-28 15:24:46 +02:00
|
|
|
expect(Button.getInstance(btnEl)).toBeNull()
|
2019-03-25 11:32:02 +01:00
|
|
|
})
|
|
|
|
})
|
|
|
|
|
2019-07-28 15:24:46 +02:00
|
|
|
describe('jQueryInterface', () => {
|
2019-03-25 11:32:02 +01:00
|
|
|
it('should handle config passed and toggle existing button', () => {
|
2020-07-22 21:33:11 +02:00
|
|
|
fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>'
|
2019-03-25 11:32:02 +01:00
|
|
|
|
|
|
|
const btnEl = fixtureEl.querySelector('.btn')
|
|
|
|
const button = new Button(btnEl)
|
|
|
|
|
2022-05-31 10:18:32 +02:00
|
|
|
const spy = spyOn(button, 'toggle')
|
2019-03-25 11:32:02 +01:00
|
|
|
|
2019-07-28 15:24:46 +02:00
|
|
|
jQueryMock.fn.button = Button.jQueryInterface
|
2019-03-25 11:32:02 +01:00
|
|
|
jQueryMock.elements = [btnEl]
|
|
|
|
|
|
|
|
jQueryMock.fn.button.call(jQueryMock, 'toggle')
|
|
|
|
|
2022-05-31 10:18:32 +02:00
|
|
|
expect(spy).toHaveBeenCalled()
|
2019-03-25 11:32:02 +01:00
|
|
|
})
|
|
|
|
|
|
|
|
it('should create new button instance and call toggle', () => {
|
2020-07-22 21:33:11 +02:00
|
|
|
fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>'
|
2019-03-25 11:32:02 +01:00
|
|
|
|
|
|
|
const btnEl = fixtureEl.querySelector('.btn')
|
|
|
|
|
2019-07-28 15:24:46 +02:00
|
|
|
jQueryMock.fn.button = Button.jQueryInterface
|
2019-03-25 11:32:02 +01:00
|
|
|
jQueryMock.elements = [btnEl]
|
|
|
|
|
|
|
|
jQueryMock.fn.button.call(jQueryMock, 'toggle')
|
|
|
|
|
2021-05-11 07:45:57 +02:00
|
|
|
expect(Button.getInstance(btnEl)).not.toBeNull()
|
2021-10-14 17:16:54 +02:00
|
|
|
expect(btnEl).toHaveClass('active')
|
2019-03-25 11:32:02 +01:00
|
|
|
})
|
|
|
|
|
|
|
|
it('should just create a button instance without calling toggle', () => {
|
2020-07-22 21:33:11 +02:00
|
|
|
fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>'
|
2019-03-25 11:32:02 +01:00
|
|
|
|
|
|
|
const btnEl = fixtureEl.querySelector('.btn')
|
|
|
|
|
2019-07-28 15:24:46 +02:00
|
|
|
jQueryMock.fn.button = Button.jQueryInterface
|
2019-03-25 11:32:02 +01:00
|
|
|
jQueryMock.elements = [btnEl]
|
|
|
|
|
|
|
|
jQueryMock.fn.button.call(jQueryMock)
|
|
|
|
|
2021-05-11 07:45:57 +02:00
|
|
|
expect(Button.getInstance(btnEl)).not.toBeNull()
|
2021-10-14 17:16:54 +02:00
|
|
|
expect(btnEl).not.toHaveClass('active')
|
2019-03-25 11:32:02 +01:00
|
|
|
})
|
|
|
|
})
|
2019-09-04 16:58:29 +02:00
|
|
|
|
|
|
|
describe('getInstance', () => {
|
|
|
|
it('should return button instance', () => {
|
|
|
|
fixtureEl.innerHTML = '<div></div>'
|
|
|
|
|
|
|
|
const div = fixtureEl.querySelector('div')
|
|
|
|
const button = new Button(div)
|
|
|
|
|
|
|
|
expect(Button.getInstance(div)).toEqual(button)
|
2020-11-16 16:23:09 +01:00
|
|
|
expect(Button.getInstance(div)).toBeInstanceOf(Button)
|
2019-09-04 16:58:29 +02:00
|
|
|
})
|
|
|
|
|
|
|
|
it('should return null when there is no button instance', () => {
|
|
|
|
fixtureEl.innerHTML = '<div></div>'
|
|
|
|
|
|
|
|
const div = fixtureEl.querySelector('div')
|
|
|
|
|
2021-10-14 17:16:54 +02:00
|
|
|
expect(Button.getInstance(div)).toBeNull()
|
2019-09-04 16:58:29 +02:00
|
|
|
})
|
|
|
|
})
|
2021-06-03 17:53:27 +02:00
|
|
|
|
|
|
|
describe('getOrCreateInstance', () => {
|
|
|
|
it('should return button instance', () => {
|
|
|
|
fixtureEl.innerHTML = '<div></div>'
|
|
|
|
|
|
|
|
const div = fixtureEl.querySelector('div')
|
|
|
|
const button = new Button(div)
|
|
|
|
|
|
|
|
expect(Button.getOrCreateInstance(div)).toEqual(button)
|
|
|
|
expect(Button.getInstance(div)).toEqual(Button.getOrCreateInstance(div, {}))
|
|
|
|
expect(Button.getOrCreateInstance(div)).toBeInstanceOf(Button)
|
|
|
|
})
|
|
|
|
|
|
|
|
it('should return new instance when there is no button instance', () => {
|
|
|
|
fixtureEl.innerHTML = '<div></div>'
|
|
|
|
|
|
|
|
const div = fixtureEl.querySelector('div')
|
|
|
|
|
2021-10-14 17:16:54 +02:00
|
|
|
expect(Button.getInstance(div)).toBeNull()
|
2021-06-03 17:53:27 +02:00
|
|
|
expect(Button.getOrCreateInstance(div)).toBeInstanceOf(Button)
|
|
|
|
})
|
|
|
|
})
|
2019-03-25 11:32:02 +01:00
|
|
|
})
|