mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-20 12:21:35 +02:00
Accept data-bs-body option in the configuration object as well (#33248)
* Accept data-bs-body option in the configuration object as well Tweak jqueryInterface, add some more tests * Fix Markdown table formatting and tweak the wording on backdrop Co-authored-by: Mark Otto <markdotto@gmail.com> Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
GeoSot
GitHub
@@ -2,7 +2,7 @@ import Offcanvas from '../../src/offcanvas'
|
||||
import EventHandler from '../../src/dom/event-handler'
|
||||
|
||||
/** Test helpers */
|
||||
import { clearFixture, getFixture, jQueryMock, createEvent } from '../helpers/fixture'
|
||||
import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture'
|
||||
|
||||
describe('Offcanvas', () => {
|
||||
let fixtureEl
|
||||
@@ -22,6 +22,18 @@ describe('Offcanvas', () => {
|
||||
})
|
||||
})
|
||||
|
||||
describe('Default', () => {
|
||||
it('should return plugin default config', () => {
|
||||
expect(Offcanvas.Default).toEqual(jasmine.any(Object))
|
||||
})
|
||||
})
|
||||
|
||||
describe('DATA_KEY', () => {
|
||||
it('should return plugin data key', () => {
|
||||
expect(Offcanvas.DATA_KEY).toEqual('bs.offcanvas')
|
||||
})
|
||||
})
|
||||
|
||||
describe('constructor', () => {
|
||||
it('should call hide when a element with data-bs-dismiss="offcanvas" is clicked', () => {
|
||||
fixtureEl.innerHTML = [
|
||||
@@ -70,6 +82,68 @@ describe('Offcanvas', () => {
|
||||
|
||||
expect(offCanvas.hide).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should not hide if esc is pressed but with keyboard = false', () => {
|
||||
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
||||
|
||||
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
|
||||
const offCanvas = new Offcanvas(offCanvasEl, { keyboard: false })
|
||||
const keyDownEsc = createEvent('keydown')
|
||||
keyDownEsc.key = 'Escape'
|
||||
|
||||
spyOn(offCanvas, 'hide')
|
||||
|
||||
document.dispatchEvent(keyDownEsc)
|
||||
|
||||
expect(offCanvas.hide).not.toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
|
||||
describe('config', () => {
|
||||
it('should have default values', () => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div class="offcanvas">',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
|
||||
const offCanvas = new Offcanvas(offCanvasEl)
|
||||
|
||||
expect(offCanvas._config.backdrop).toEqual(true)
|
||||
expect(offCanvas._config.keyboard).toEqual(true)
|
||||
expect(offCanvas._config.scroll).toEqual(false)
|
||||
})
|
||||
|
||||
it('should read data attributes and override default config', () => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div class="offcanvas" data-bs-scroll="true" data-bs-backdrop="false" data-bs-keyboard="false">',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
|
||||
const offCanvas = new Offcanvas(offCanvasEl)
|
||||
|
||||
expect(offCanvas._config.backdrop).toEqual(false)
|
||||
expect(offCanvas._config.keyboard).toEqual(false)
|
||||
expect(offCanvas._config.scroll).toEqual(true)
|
||||
})
|
||||
|
||||
it('given a config object must override data attributes', () => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div class="offcanvas" data-bs-scroll="true" data-bs-backdrop="false" data-bs-keyboard="false">',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
|
||||
const offCanvas = new Offcanvas(offCanvasEl, {
|
||||
backdrop: true,
|
||||
keyboard: true,
|
||||
scroll: false
|
||||
})
|
||||
expect(offCanvas._config.backdrop).toEqual(true)
|
||||
expect(offCanvas._config.keyboard).toEqual(true)
|
||||
expect(offCanvas._config.scroll).toEqual(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('toggle', () => {
|
||||
@@ -280,6 +354,64 @@ describe('Offcanvas', () => {
|
||||
jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface
|
||||
jQueryMock.elements = [div]
|
||||
|
||||
expect(() => {
|
||||
jQueryMock.fn.offcanvas.call(jQueryMock, action)
|
||||
}).toThrowError(TypeError, `No method named "${action}"`)
|
||||
})
|
||||
|
||||
it('should throw error on protected method', () => {
|
||||
fixtureEl.innerHTML = '<div></div>'
|
||||
|
||||
const div = fixtureEl.querySelector('div')
|
||||
const action = '_getConfig'
|
||||
|
||||
jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface
|
||||
jQueryMock.elements = [div]
|
||||
|
||||
expect(() => {
|
||||
jQueryMock.fn.offcanvas.call(jQueryMock, action)
|
||||
}).toThrowError(TypeError, `No method named "${action}"`)
|
||||
})
|
||||
|
||||
it('should throw error if method "constructor" is being called', () => {
|
||||
fixtureEl.innerHTML = '<div></div>'
|
||||
|
||||
const div = fixtureEl.querySelector('div')
|
||||
const action = 'constructor'
|
||||
|
||||
jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface
|
||||
jQueryMock.elements = [div]
|
||||
|
||||
expect(() => {
|
||||
jQueryMock.fn.offcanvas.call(jQueryMock, action)
|
||||
}).toThrowError(TypeError, `No method named "${action}"`)
|
||||
})
|
||||
|
||||
it('should throw error on protected method', () => {
|
||||
fixtureEl.innerHTML = '<div></div>'
|
||||
|
||||
const div = fixtureEl.querySelector('div')
|
||||
const action = '_getConfig'
|
||||
|
||||
jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface
|
||||
jQueryMock.elements = [div]
|
||||
|
||||
try {
|
||||
jQueryMock.fn.offcanvas.call(jQueryMock, action)
|
||||
} catch (error) {
|
||||
expect(error.message).toEqual(`No method named "${action}"`)
|
||||
}
|
||||
})
|
||||
|
||||
it('should throw error if method "constructor" is being called', () => {
|
||||
fixtureEl.innerHTML = '<div></div>'
|
||||
|
||||
const div = fixtureEl.querySelector('div')
|
||||
const action = 'constructor'
|
||||
|
||||
jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface
|
||||
jQueryMock.elements = [div]
|
||||
|
||||
try {
|
||||
jQueryMock.fn.offcanvas.call(jQueryMock, action)
|
||||
} catch (error) {
|
||||
|
||||
@@ -317,6 +317,111 @@ describe('Util', () => {
|
||||
})
|
||||
})
|
||||
|
||||
describe('isDisabled', () => {
|
||||
it('should return true if the element is not defined', () => {
|
||||
expect(Util.isDisabled(null)).toEqual(true)
|
||||
expect(Util.isDisabled(undefined)).toEqual(true)
|
||||
expect(Util.isDisabled()).toEqual(true)
|
||||
})
|
||||
|
||||
it('should return true if the element provided is not a dom element', () => {
|
||||
expect(Util.isDisabled({})).toEqual(true)
|
||||
expect(Util.isDisabled('test')).toEqual(true)
|
||||
})
|
||||
|
||||
it('should return true if the element has disabled attribute', () => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div>',
|
||||
' <div id="element" disabled="disabled"></div>',
|
||||
' <div id="element1" disabled="true"></div>',
|
||||
' <div id="element2" disabled></div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
const div = fixtureEl.querySelector('#element')
|
||||
const div1 = fixtureEl.querySelector('#element1')
|
||||
const div2 = fixtureEl.querySelector('#element2')
|
||||
|
||||
expect(Util.isDisabled(div)).toEqual(true)
|
||||
expect(Util.isDisabled(div1)).toEqual(true)
|
||||
expect(Util.isDisabled(div2)).toEqual(true)
|
||||
})
|
||||
|
||||
it('should return false if the element has disabled attribute with "false" value', () => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div>',
|
||||
' <div id="element" disabled="false"></div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
const div = fixtureEl.querySelector('#element')
|
||||
|
||||
expect(Util.isDisabled(div)).toEqual(false)
|
||||
})
|
||||
|
||||
it('should return false if the element is not disabled ', () => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div>',
|
||||
' <button id="button"></button>',
|
||||
' <select id="select"></select>',
|
||||
' <select id="input"></select>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
const el = selector => fixtureEl.querySelector(selector)
|
||||
|
||||
expect(Util.isDisabled(el('#button'))).toEqual(false)
|
||||
expect(Util.isDisabled(el('#select'))).toEqual(false)
|
||||
expect(Util.isDisabled(el('#input'))).toEqual(false)
|
||||
})
|
||||
it('should return true if the element has disabled attribute', () => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div>',
|
||||
' <input id="input" disabled="disabled"/>',
|
||||
' <input id="input1" disabled="disabled"/>',
|
||||
' <button id="button" disabled="true"></button>',
|
||||
' <button id="button1" disabled="disabled"></button>',
|
||||
' <button id="button2" disabled></button>',
|
||||
' <select id="select" disabled></select>',
|
||||
' <select id="input" disabled></select>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
const el = selector => fixtureEl.querySelector(selector)
|
||||
|
||||
expect(Util.isDisabled(el('#input'))).toEqual(true)
|
||||
expect(Util.isDisabled(el('#input1'))).toEqual(true)
|
||||
expect(Util.isDisabled(el('#button'))).toEqual(true)
|
||||
expect(Util.isDisabled(el('#button1'))).toEqual(true)
|
||||
expect(Util.isDisabled(el('#button2'))).toEqual(true)
|
||||
expect(Util.isDisabled(el('#input'))).toEqual(true)
|
||||
})
|
||||
|
||||
it('should return true if the element has class "disabled"', () => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div>',
|
||||
' <div id="element" class="disabled"></div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
const div = fixtureEl.querySelector('#element')
|
||||
|
||||
expect(Util.isDisabled(div)).toEqual(true)
|
||||
})
|
||||
|
||||
it('should return true if the element has class "disabled" but disabled attribute is false', () => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div>',
|
||||
' <input id="input" class="disabled" disabled="false"/>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
const div = fixtureEl.querySelector('#input')
|
||||
|
||||
expect(Util.isDisabled(div)).toEqual(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe('findShadowRoot', () => {
|
||||
it('should return null if shadow dom is not available', () => {
|
||||
// Only for newer browsers
|
||||
|
||||
Reference in New Issue
Block a user