2019-10-02 11:43:54 +02:00
|
|
|
import Popover from '../../src/popover'
|
2021-08-03 10:59:33 +02:00
|
|
|
import { clearFixture, getFixture, jQueryMock } from '../helpers/fixture'
|
2019-05-08 21:32:50 +02:00
|
|
|
|
|
|
|
describe('Popover', () => {
|
|
|
|
let fixtureEl
|
|
|
|
|
|
|
|
beforeAll(() => {
|
|
|
|
fixtureEl = getFixture()
|
|
|
|
})
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
clearFixture()
|
|
|
|
|
2020-03-25 15:35:02 +01:00
|
|
|
const popoverList = document.querySelectorAll('.popover')
|
2019-05-08 21:32:50 +02:00
|
|
|
|
2021-07-30 08:28:51 +02:00
|
|
|
for (const popoverEl of popoverList) {
|
2021-07-30 00:23:00 +02:00
|
|
|
popoverEl.remove()
|
2021-07-30 08:28:51 +02:00
|
|
|
}
|
2019-05-08 21:32:50 +02:00
|
|
|
})
|
|
|
|
|
|
|
|
describe('VERSION', () => {
|
|
|
|
it('should return plugin version', () => {
|
|
|
|
expect(Popover.VERSION).toEqual(jasmine.any(String))
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('Default', () => {
|
|
|
|
it('should return plugin default config', () => {
|
|
|
|
expect(Popover.Default).toEqual(jasmine.any(Object))
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('NAME', () => {
|
|
|
|
it('should return plugin name', () => {
|
|
|
|
expect(Popover.NAME).toEqual(jasmine.any(String))
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('DATA_KEY', () => {
|
|
|
|
it('should return plugin data key', () => {
|
|
|
|
expect(Popover.DATA_KEY).toEqual('bs.popover')
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('Event', () => {
|
|
|
|
it('should return plugin events', () => {
|
|
|
|
expect(Popover.Event).toEqual(jasmine.any(Object))
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('EVENT_KEY', () => {
|
|
|
|
it('should return plugin event key', () => {
|
|
|
|
expect(Popover.EVENT_KEY).toEqual('.bs.popover')
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('DefaultType', () => {
|
|
|
|
it('should return plugin default type', () => {
|
|
|
|
expect(Popover.DefaultType).toEqual(jasmine.any(Object))
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('show', () => {
|
|
|
|
it('should show a popover', done => {
|
2020-07-22 21:33:11 +02:00
|
|
|
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
|
2019-05-08 21:32:50 +02:00
|
|
|
|
|
|
|
const popoverEl = fixtureEl.querySelector('a')
|
|
|
|
const popover = new Popover(popoverEl)
|
|
|
|
|
|
|
|
popoverEl.addEventListener('shown.bs.popover', () => {
|
2021-05-11 07:45:57 +02:00
|
|
|
expect(document.querySelector('.popover')).not.toBeNull()
|
2019-05-08 21:32:50 +02:00
|
|
|
done()
|
|
|
|
})
|
|
|
|
|
|
|
|
popover.show()
|
|
|
|
})
|
|
|
|
|
|
|
|
it('should set title and content from functions', done => {
|
|
|
|
fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
|
|
|
|
|
|
|
|
const popoverEl = fixtureEl.querySelector('a')
|
|
|
|
const popover = new Popover(popoverEl, {
|
|
|
|
title: () => 'Bootstrap',
|
|
|
|
content: () => 'loves writing tests (╯°□°)╯︵ ┻━┻'
|
|
|
|
})
|
|
|
|
|
|
|
|
popoverEl.addEventListener('shown.bs.popover', () => {
|
|
|
|
const popoverDisplayed = document.querySelector('.popover')
|
|
|
|
|
2021-05-11 07:45:57 +02:00
|
|
|
expect(popoverDisplayed).not.toBeNull()
|
2019-05-08 21:32:50 +02:00
|
|
|
expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Bootstrap')
|
|
|
|
expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('loves writing tests (╯°□°)╯︵ ┻━┻')
|
|
|
|
done()
|
|
|
|
})
|
|
|
|
|
|
|
|
popover.show()
|
|
|
|
})
|
|
|
|
|
|
|
|
it('should show a popover with just content', done => {
|
|
|
|
fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
|
|
|
|
|
|
|
|
const popoverEl = fixtureEl.querySelector('a')
|
|
|
|
const popover = new Popover(popoverEl, {
|
|
|
|
content: 'Popover content'
|
|
|
|
})
|
|
|
|
|
|
|
|
popoverEl.addEventListener('shown.bs.popover', () => {
|
|
|
|
const popoverDisplayed = document.querySelector('.popover')
|
|
|
|
|
2021-05-11 07:45:57 +02:00
|
|
|
expect(popoverDisplayed).not.toBeNull()
|
2019-05-08 21:32:50 +02:00
|
|
|
expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Popover content')
|
|
|
|
done()
|
|
|
|
})
|
|
|
|
|
|
|
|
popover.show()
|
|
|
|
})
|
2020-11-25 08:16:22 +01:00
|
|
|
|
2021-05-18 08:02:39 +02:00
|
|
|
it('should show a popover with just content without having header', done => {
|
|
|
|
fixtureEl.innerHTML = '<a href="#">Nice link</a>'
|
|
|
|
|
|
|
|
const popoverEl = fixtureEl.querySelector('a')
|
|
|
|
const popover = new Popover(popoverEl, {
|
|
|
|
content: 'Some beautiful content :)'
|
|
|
|
})
|
|
|
|
|
|
|
|
popoverEl.addEventListener('shown.bs.popover', () => {
|
|
|
|
const popoverDisplayed = document.querySelector('.popover')
|
|
|
|
|
|
|
|
expect(popoverDisplayed).not.toBeNull()
|
|
|
|
expect(popoverDisplayed.querySelector('.popover-header')).toBeNull()
|
|
|
|
expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Some beautiful content :)')
|
|
|
|
done()
|
|
|
|
})
|
|
|
|
|
|
|
|
popover.show()
|
|
|
|
})
|
|
|
|
|
|
|
|
it('should show a popover with just title without having body', done => {
|
|
|
|
fixtureEl.innerHTML = '<a href="#">Nice link</a>'
|
|
|
|
|
|
|
|
const popoverEl = fixtureEl.querySelector('a')
|
|
|
|
const popover = new Popover(popoverEl, {
|
|
|
|
title: 'Title, which does not require content'
|
|
|
|
})
|
|
|
|
|
|
|
|
popoverEl.addEventListener('shown.bs.popover', () => {
|
|
|
|
const popoverDisplayed = document.querySelector('.popover')
|
|
|
|
|
|
|
|
expect(popoverDisplayed).not.toBeNull()
|
|
|
|
expect(popoverDisplayed.querySelector('.popover-body')).toBeNull()
|
|
|
|
expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title, which does not require content')
|
|
|
|
done()
|
|
|
|
})
|
|
|
|
|
|
|
|
popover.show()
|
|
|
|
})
|
2021-08-03 10:59:33 +02:00
|
|
|
|
|
|
|
it('should call setContent once', done => {
|
|
|
|
fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
|
|
|
|
|
|
|
|
const popoverEl = fixtureEl.querySelector('a')
|
|
|
|
const popover = new Popover(popoverEl, {
|
|
|
|
content: 'Popover content'
|
|
|
|
})
|
|
|
|
|
|
|
|
const spy = spyOn(popover, 'setContent').and.callThrough()
|
|
|
|
let times = 1
|
|
|
|
|
|
|
|
popoverEl.addEventListener('hidden.bs.popover', () => {
|
|
|
|
popover.show()
|
|
|
|
})
|
|
|
|
|
|
|
|
popoverEl.addEventListener('shown.bs.popover', () => {
|
|
|
|
const popoverDisplayed = document.querySelector('.popover')
|
|
|
|
|
|
|
|
expect(popoverDisplayed).not.toBeNull()
|
|
|
|
expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Popover content')
|
|
|
|
expect(spy).toHaveBeenCalledTimes(1)
|
|
|
|
if (times > 1) {
|
|
|
|
done()
|
|
|
|
}
|
|
|
|
|
|
|
|
times++
|
|
|
|
popover.hide()
|
|
|
|
})
|
|
|
|
popover.show()
|
|
|
|
})
|
2021-05-18 08:02:39 +02:00
|
|
|
|
2020-11-25 08:16:22 +01:00
|
|
|
it('should show a popover with provided custom class', done => {
|
|
|
|
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap" data-bs-custom-class="custom-class">BS twitter</a>'
|
|
|
|
|
|
|
|
const popoverEl = fixtureEl.querySelector('a')
|
|
|
|
const popover = new Popover(popoverEl)
|
|
|
|
|
|
|
|
popoverEl.addEventListener('shown.bs.popover', () => {
|
|
|
|
const tip = document.querySelector('.popover')
|
2021-05-11 07:45:57 +02:00
|
|
|
expect(tip).not.toBeNull()
|
2020-11-25 08:16:22 +01:00
|
|
|
expect(tip.classList.contains('custom-class')).toBeTrue()
|
|
|
|
done()
|
|
|
|
})
|
|
|
|
|
|
|
|
popover.show()
|
|
|
|
})
|
2019-05-08 21:32:50 +02:00
|
|
|
})
|
|
|
|
|
|
|
|
describe('hide', () => {
|
|
|
|
it('should hide a popover', done => {
|
2020-07-22 21:33:11 +02:00
|
|
|
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
|
2019-05-08 21:32:50 +02:00
|
|
|
|
|
|
|
const popoverEl = fixtureEl.querySelector('a')
|
|
|
|
const popover = new Popover(popoverEl)
|
|
|
|
|
|
|
|
popoverEl.addEventListener('shown.bs.popover', () => {
|
|
|
|
popover.hide()
|
|
|
|
})
|
|
|
|
|
|
|
|
popoverEl.addEventListener('hidden.bs.popover', () => {
|
|
|
|
expect(document.querySelector('.popover')).toBeNull()
|
|
|
|
done()
|
|
|
|
})
|
|
|
|
|
|
|
|
popover.show()
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
2019-07-28 15:24:46 +02:00
|
|
|
describe('jQueryInterface', () => {
|
2019-05-08 21:32:50 +02:00
|
|
|
it('should create a popover', () => {
|
2020-07-22 21:33:11 +02:00
|
|
|
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
|
2019-05-08 21:32:50 +02:00
|
|
|
|
|
|
|
const popoverEl = fixtureEl.querySelector('a')
|
|
|
|
|
2019-07-28 15:24:46 +02:00
|
|
|
jQueryMock.fn.popover = Popover.jQueryInterface
|
2019-05-08 21:32:50 +02:00
|
|
|
jQueryMock.elements = [popoverEl]
|
|
|
|
|
|
|
|
jQueryMock.fn.popover.call(jQueryMock)
|
|
|
|
|
2021-05-11 07:45:57 +02:00
|
|
|
expect(Popover.getInstance(popoverEl)).not.toBeNull()
|
2019-05-08 21:32:50 +02:00
|
|
|
})
|
|
|
|
|
|
|
|
it('should create a popover with a config object', () => {
|
|
|
|
fixtureEl.innerHTML = '<a href="#" title="Popover">BS twitter</a>'
|
|
|
|
|
|
|
|
const popoverEl = fixtureEl.querySelector('a')
|
|
|
|
|
2019-07-28 15:24:46 +02:00
|
|
|
jQueryMock.fn.popover = Popover.jQueryInterface
|
2019-05-08 21:32:50 +02:00
|
|
|
jQueryMock.elements = [popoverEl]
|
|
|
|
|
|
|
|
jQueryMock.fn.popover.call(jQueryMock, {
|
|
|
|
content: 'Popover content'
|
|
|
|
})
|
|
|
|
|
2021-05-11 07:45:57 +02:00
|
|
|
expect(Popover.getInstance(popoverEl)).not.toBeNull()
|
2019-05-08 21:32:50 +02:00
|
|
|
})
|
|
|
|
|
|
|
|
it('should not re create a popover', () => {
|
2020-07-22 21:33:11 +02:00
|
|
|
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
|
2019-05-08 21:32:50 +02:00
|
|
|
|
|
|
|
const popoverEl = fixtureEl.querySelector('a')
|
|
|
|
const popover = new Popover(popoverEl)
|
|
|
|
|
2019-07-28 15:24:46 +02:00
|
|
|
jQueryMock.fn.popover = Popover.jQueryInterface
|
2019-05-08 21:32:50 +02:00
|
|
|
jQueryMock.elements = [popoverEl]
|
|
|
|
|
|
|
|
jQueryMock.fn.popover.call(jQueryMock)
|
|
|
|
|
2019-07-28 15:24:46 +02:00
|
|
|
expect(Popover.getInstance(popoverEl)).toEqual(popover)
|
2019-05-08 21:32:50 +02:00
|
|
|
})
|
|
|
|
|
|
|
|
it('should throw error on undefined method', () => {
|
2020-07-22 21:33:11 +02:00
|
|
|
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
|
2019-05-08 21:32:50 +02:00
|
|
|
|
|
|
|
const popoverEl = fixtureEl.querySelector('a')
|
|
|
|
const action = 'undefinedMethod'
|
|
|
|
|
2019-07-28 15:24:46 +02:00
|
|
|
jQueryMock.fn.popover = Popover.jQueryInterface
|
2019-05-08 21:32:50 +02:00
|
|
|
jQueryMock.elements = [popoverEl]
|
|
|
|
|
2021-01-13 21:13:30 +01:00
|
|
|
expect(() => {
|
2019-05-08 21:32:50 +02:00
|
|
|
jQueryMock.fn.popover.call(jQueryMock, action)
|
2021-01-13 21:13:30 +01:00
|
|
|
}).toThrowError(TypeError, `No method named "${action}"`)
|
2019-05-08 21:32:50 +02:00
|
|
|
})
|
|
|
|
|
|
|
|
it('should should call show method', () => {
|
2020-07-22 21:33:11 +02:00
|
|
|
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
|
2019-05-08 21:32:50 +02:00
|
|
|
|
|
|
|
const popoverEl = fixtureEl.querySelector('a')
|
|
|
|
const popover = new Popover(popoverEl)
|
|
|
|
|
2019-07-28 15:24:46 +02:00
|
|
|
jQueryMock.fn.popover = Popover.jQueryInterface
|
2019-05-08 21:32:50 +02:00
|
|
|
jQueryMock.elements = [popoverEl]
|
|
|
|
|
|
|
|
spyOn(popover, 'show')
|
|
|
|
|
|
|
|
jQueryMock.fn.popover.call(jQueryMock, 'show')
|
|
|
|
|
|
|
|
expect(popover.show).toHaveBeenCalled()
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
2019-07-28 15:24:46 +02:00
|
|
|
describe('getInstance', () => {
|
2019-05-08 21:32:50 +02:00
|
|
|
it('should return popover instance', () => {
|
2020-07-22 21:33:11 +02:00
|
|
|
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
|
2019-05-08 21:32:50 +02:00
|
|
|
|
|
|
|
const popoverEl = fixtureEl.querySelector('a')
|
|
|
|
const popover = new Popover(popoverEl)
|
|
|
|
|
2019-07-28 15:24:46 +02:00
|
|
|
expect(Popover.getInstance(popoverEl)).toEqual(popover)
|
2020-11-16 16:23:09 +01:00
|
|
|
expect(Popover.getInstance(popoverEl)).toBeInstanceOf(Popover)
|
2019-05-08 21:32:50 +02:00
|
|
|
})
|
|
|
|
|
|
|
|
it('should return null when there is no popover instance', () => {
|
2020-07-22 21:33:11 +02:00
|
|
|
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
|
2019-05-08 21:32:50 +02:00
|
|
|
|
|
|
|
const popoverEl = fixtureEl.querySelector('a')
|
|
|
|
|
2019-07-28 15:24:46 +02:00
|
|
|
expect(Popover.getInstance(popoverEl)).toEqual(null)
|
2019-05-08 21:32:50 +02:00
|
|
|
})
|
|
|
|
})
|
2021-06-03 17:53:27 +02:00
|
|
|
|
|
|
|
describe('getOrCreateInstance', () => {
|
|
|
|
it('should return popover instance', () => {
|
|
|
|
fixtureEl.innerHTML = '<div></div>'
|
|
|
|
|
|
|
|
const div = fixtureEl.querySelector('div')
|
|
|
|
const popover = new Popover(div)
|
|
|
|
|
|
|
|
expect(Popover.getOrCreateInstance(div)).toEqual(popover)
|
|
|
|
expect(Popover.getInstance(div)).toEqual(Popover.getOrCreateInstance(div, {}))
|
|
|
|
expect(Popover.getOrCreateInstance(div)).toBeInstanceOf(Popover)
|
|
|
|
})
|
|
|
|
|
|
|
|
it('should return new instance when there is no popover instance', () => {
|
|
|
|
fixtureEl.innerHTML = '<div></div>'
|
|
|
|
|
|
|
|
const div = fixtureEl.querySelector('div')
|
|
|
|
|
|
|
|
expect(Popover.getInstance(div)).toEqual(null)
|
|
|
|
expect(Popover.getOrCreateInstance(div)).toBeInstanceOf(Popover)
|
|
|
|
})
|
|
|
|
|
|
|
|
it('should return new instance when there is no popover instance with given configuration', () => {
|
|
|
|
fixtureEl.innerHTML = '<div></div>'
|
|
|
|
|
|
|
|
const div = fixtureEl.querySelector('div')
|
|
|
|
|
|
|
|
expect(Popover.getInstance(div)).toEqual(null)
|
|
|
|
const popover = Popover.getOrCreateInstance(div, {
|
|
|
|
placement: 'top'
|
|
|
|
})
|
|
|
|
expect(popover).toBeInstanceOf(Popover)
|
|
|
|
|
|
|
|
expect(popover._config.placement).toEqual('top')
|
|
|
|
})
|
|
|
|
|
|
|
|
it('should return the instance when exists without given configuration', () => {
|
|
|
|
fixtureEl.innerHTML = '<div></div>'
|
|
|
|
|
|
|
|
const div = fixtureEl.querySelector('div')
|
|
|
|
const popover = new Popover(div, {
|
|
|
|
placement: 'top'
|
|
|
|
})
|
|
|
|
expect(Popover.getInstance(div)).toEqual(popover)
|
|
|
|
|
|
|
|
const popover2 = Popover.getOrCreateInstance(div, {
|
|
|
|
placement: 'bottom'
|
|
|
|
})
|
|
|
|
expect(popover).toBeInstanceOf(Popover)
|
|
|
|
expect(popover2).toEqual(popover)
|
|
|
|
|
|
|
|
expect(popover2._config.placement).toEqual('top')
|
|
|
|
})
|
|
|
|
})
|
2019-05-08 21:32:50 +02:00
|
|
|
})
|