0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-05 17:24:20 +01:00
Bootstrap/js/tests/unit/popover.spec.js

414 lines
14 KiB
JavaScript
Raw Normal View History

import Popover from '../../src/popover'
import EventHandler from '../../src/dom/event-handler'
import { clearFixture, getFixture, jQueryMock } from '../helpers/fixture'
2019-05-08 21:32:50 +02:00
describe('Popover', () => {
let fixtureEl
beforeAll(() => {
fixtureEl = getFixture()
})
afterEach(() => {
clearFixture()
const popoverList = document.querySelectorAll('.popover')
2019-05-08 21:32:50 +02:00
for (const popoverEl of popoverList) {
popoverEl.remove()
}
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_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', () => {
return new Promise(resolve => {
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-05-08 21:32:50 +02:00
popoverEl.addEventListener('shown.bs.popover', () => {
expect(document.querySelector('.popover')).not.toBeNull()
resolve()
})
2019-05-08 21:32:50 +02:00
popover.show()
})
2019-05-08 21:32:50 +02:00
})
it('should set title and content from functions', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
2019-05-08 21:32:50 +02:00
const popoverEl = fixtureEl.querySelector('a')
const popover = new Popover(popoverEl, {
title: () => 'Bootstrap',
content: () => 'loves writing tests (╯°□°)╯︵ ┻━┻'
})
2019-05-08 21:32:50 +02:00
popoverEl.addEventListener('shown.bs.popover', () => {
const popoverDisplayed = document.querySelector('.popover')
2019-05-08 21:32:50 +02:00
expect(popoverDisplayed).not.toBeNull()
expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Bootstrap')
expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('loves writing tests (╯°□°)╯︵ ┻━┻')
resolve()
})
2019-05-08 21:32:50 +02:00
popover.show()
})
2019-05-08 21:32:50 +02:00
})
it('should show a popover with just content without having header', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#">Nice link</a>'
2019-05-08 21:32:50 +02:00
const popoverEl = fixtureEl.querySelector('a')
const popover = new Popover(popoverEl, {
content: 'Some beautiful content :)'
})
2019-05-08 21:32:50 +02:00
popoverEl.addEventListener('shown.bs.popover', () => {
const popoverDisplayed = document.querySelector('.popover')
2019-05-08 21:32:50 +02:00
expect(popoverDisplayed).not.toBeNull()
expect(popoverDisplayed.querySelector('.popover-header')).toBeNull()
expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Some beautiful content :)')
resolve()
})
2019-05-08 21:32:50 +02:00
popover.show()
})
2019-05-08 21:32:50 +02:00
})
it('should show a popover with just title without having body', () => {
return new Promise(resolve => {
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')
resolve()
})
popover.show()
})
})
it('should show a popover with just title without having body using data-attribute to get config', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" data-bs-content="" title="Title which does not require content">Nice link</a>'
const popoverEl = fixtureEl.querySelector('a')
const popover = new Popover(popoverEl)
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')
resolve()
})
popover.show()
})
})
it('should NOT show a popover without `title` and `content`', () => {
fixtureEl.innerHTML = '<a href="#" data-bs-content="" title="">Nice link</a>'
const popoverEl = fixtureEl.querySelector('a')
const popover = new Popover(popoverEl, { animation: false })
const spy = spyOn(EventHandler, 'trigger').and.callThrough()
popover.show()
expect(spy).not.toHaveBeenCalledWith(popoverEl, Popover.eventName('show'))
expect(document.querySelector('.popover')).toBeNull()
})
it('"setContent" should keep the initial template', () => {
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)
popover.setContent({ '.tooltip-inner': 'foo' })
const tip = popover._getTipElement()
expect(tip).toHaveClass('popover')
expect(tip).toHaveClass('bs-popover-auto')
expect(tip.querySelector('.popover-arrow')).not.toBeNull()
expect(tip.querySelector('.popover-header')).not.toBeNull()
expect(tip.querySelector('.popover-body')).not.toBeNull()
})
it('should call setContent once', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
const popoverEl = fixtureEl.querySelector('a')
const popover = new Popover(popoverEl, {
content: 'Popover content'
})
expect(popover._templateFactory).toBeNull()
let spy = null
let times = 1
popoverEl.addEventListener('hidden.bs.popover', () => {
popover.show()
})
popoverEl.addEventListener('shown.bs.popover', () => {
spy = spy || spyOn(popover._templateFactory, 'constructor').and.callThrough()
const popoverDisplayed = document.querySelector('.popover')
expect(popoverDisplayed).not.toBeNull()
expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Popover content')
expect(spy).toHaveBeenCalledTimes(0)
if (times > 1) {
resolve()
}
times++
popover.hide()
})
popover.show()
})
})
it('should show a popover with provided custom class', () => {
return new Promise(resolve => {
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')
expect(tip).not.toBeNull()
expect(tip).toHaveClass('custom-class')
resolve()
})
popover.show()
})
})
2019-05-08 21:32:50 +02:00
})
describe('hide', () => {
it('should hide a popover', () => {
return new Promise(resolve => {
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-05-08 21:32:50 +02:00
popoverEl.addEventListener('shown.bs.popover', () => {
popover.hide()
})
2019-05-08 21:32:50 +02:00
popoverEl.addEventListener('hidden.bs.popover', () => {
expect(document.querySelector('.popover')).toBeNull()
resolve()
})
2019-05-08 21:32:50 +02:00
popover.show()
})
2019-05-08 21:32:50 +02:00
})
})
2019-07-28 15:24:46 +02:00
describe('jQueryInterface', () => {
2019-05-08 21:32:50 +02:00
it('should create a popover', () => {
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)
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'
})
expect(Popover.getInstance(popoverEl)).not.toBeNull()
2019-05-08 21:32:50 +02:00
})
it('should not re create a popover', () => {
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', () => {
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]
expect(() => {
2019-05-08 21:32:50 +02:00
jQueryMock.fn.popover.call(jQueryMock, action)
}).toThrowError(TypeError, `No method named "${action}"`)
2019-05-08 21:32:50 +02:00
})
it('should should call show method', () => {
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]
const spy = spyOn(popover, 'show')
2019-05-08 21:32:50 +02:00
jQueryMock.fn.popover.call(jQueryMock, 'show')
expect(spy).toHaveBeenCalled()
2019-05-08 21:32:50 +02:00
})
})
2019-07-28 15:24:46 +02:00
describe('getInstance', () => {
2019-05-08 21:32:50 +02:00
it('should return popover instance', () => {
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)
expect(Popover.getInstance(popoverEl)).toBeInstanceOf(Popover)
2019-05-08 21:32:50 +02:00
})
it('should return null when there is no popover instance', () => {
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')
expect(Popover.getInstance(popoverEl)).toBeNull()
2019-05-08 21:32:50 +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)).toBeNull()
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)).toBeNull()
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
})