',
@@ -1307,8 +1256,8 @@ describe('Dropdown', () => {
const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
btnDropdown.addEventListener('shown.bs.dropdown', () => {
- // Popper adds this attribute when we use it
- expect(dropdownMenu.getAttribute('data-popper-placement')).toBeNull()
+ // Floating UI adds this attribute when we use it
+ expect(dropdownMenu.getAttribute('data-bs-placement')).toBeNull()
resolve()
})
@@ -1316,7 +1265,7 @@ describe('Dropdown', () => {
})
})
- it('should manage bs attribute `data-bs-popper`="static" when display set to static', () => {
+ it('should manage bs attribute `data-bs-display`="static" when display set to static', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'
',
@@ -1332,12 +1281,12 @@ describe('Dropdown', () => {
const dropdown = new Dropdown(btnDropdown)
btnDropdown.addEventListener('shown.bs.dropdown', () => {
- expect(dropdownMenu.getAttribute('data-bs-popper')).toEqual('static')
+ expect(dropdownMenu.getAttribute('data-bs-display')).toEqual('static')
dropdown.hide()
})
btnDropdown.addEventListener('hidden.bs.dropdown', () => {
- expect(dropdownMenu.getAttribute('data-bs-popper')).toBeNull()
+ expect(dropdownMenu.getAttribute('data-bs-display')).toBeNull()
resolve()
})
@@ -2218,49 +2167,6 @@ describe('Dropdown', () => {
})
})
- describe('jQueryInterface', () => {
- it('should create a dropdown', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
-
- jQueryMock.fn.dropdown = Dropdown.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.dropdown.call(jQueryMock)
-
- expect(Dropdown.getInstance(div)).not.toBeNull()
- })
-
- it('should not re create a dropdown', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
- const dropdown = new Dropdown(div)
-
- jQueryMock.fn.dropdown = Dropdown.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.dropdown.call(jQueryMock)
-
- expect(Dropdown.getInstance(div)).toEqual(dropdown)
- })
-
- it('should throw error on undefined method', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
- const action = 'undefinedMethod'
-
- jQueryMock.fn.dropdown = Dropdown.jQueryInterface
- jQueryMock.elements = [div]
-
- expect(() => {
- jQueryMock.fn.dropdown.call(jQueryMock, action)
- }).toThrowError(TypeError, `No method named "${action}"`)
- })
- })
-
describe('getInstance', () => {
it('should return dropdown instance', () => {
fixtureEl.innerHTML = '
'
@@ -2433,4 +2339,136 @@ describe('Dropdown', () => {
childElement.click()
})
})
+
+ describe('responsive placements', () => {
+ it('should parse responsive placement string and create instance', () => {
+ fixtureEl.innerHTML = [
+ '
',
+ ' ',
+ ' ',
+ '
'
+ ].join('')
+
+ const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const dropdown = new Dropdown(btnDropdown)
+
+ // Dropdown should have parsed responsive placements
+ expect(dropdown._responsivePlacements).not.toBeNull()
+ expect(dropdown._responsivePlacements.xs).toEqual('bottom-start')
+ expect(dropdown._responsivePlacements.md).toEqual('top-end')
+ })
+
+ it('should return null for non-responsive placement', () => {
+ fixtureEl.innerHTML = [
+ '
',
+ ' ',
+ ' ',
+ '
'
+ ].join('')
+
+ const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const dropdown = new Dropdown(btnDropdown)
+
+ // Non-responsive placement should not create responsive placements object
+ expect(dropdown._responsivePlacements).toBeNull()
+ })
+ })
+
+ describe('virtual element reference', () => {
+ it('should work with virtual element as reference', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '
',
+ ' ',
+ ' ',
+ '
'
+ ].join('')
+
+ const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+
+ // Virtual element with getBoundingClientRect
+ const virtualElement = {
+ getBoundingClientRect() {
+ return {
+ width: 100,
+ height: 50,
+ top: 100,
+ left: 100,
+ right: 200,
+ bottom: 150,
+ x: 100,
+ y: 100
+ }
+ }
+ }
+
+ const dropdown = new Dropdown(btnDropdown, {
+ reference: virtualElement
+ })
+
+ btnDropdown.addEventListener('shown.bs.dropdown', () => {
+ expect(document.querySelector('.dropdown-menu.show')).not.toBeNull()
+ resolve()
+ })
+
+ dropdown.show()
+ })
+ })
+
+ it('should throw error for object reference without getBoundingClientRect', () => {
+ fixtureEl.innerHTML = [
+ '
',
+ ' ',
+ ' ',
+ '
'
+ ].join('')
+
+ const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+
+ expect(() => {
+ // eslint-disable-next-line no-new
+ new Dropdown(btnDropdown, {
+ reference: { someProperty: 'value' } // Object without getBoundingClientRect
+ })
+ }).toThrowError(TypeError)
+ })
+ })
+
+ describe('selectMenuItem', () => {
+ it('should do nothing when dropdown menu has no visible items', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '
',
+ ' ',
+ ' ',
+ '
'
+ ].join('')
+
+ const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const dropdown = new Dropdown(btnDropdown)
+
+ btnDropdown.addEventListener('shown.bs.dropdown', () => {
+ // Simulate ArrowDown key - should not throw when no items
+ const keydown = createEvent('keydown')
+ keydown.key = 'ArrowDown'
+ btnDropdown.dispatchEvent(keydown)
+
+ // No error thrown means test passed
+ expect(true).toBeTrue()
+ resolve()
+ })
+
+ dropdown.show()
+ })
+ })
+ })
})
diff --git a/js/tests/unit/jquery.spec.js b/js/tests/unit/jquery.spec.js
deleted file mode 100644
index 7d7f29dc72..0000000000
--- a/js/tests/unit/jquery.spec.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/* eslint-env jquery */
-
-import Alert from '../../src/alert.js'
-import Button from '../../src/button.js'
-import Carousel from '../../src/carousel.js'
-import Collapse from '../../src/collapse.js'
-import Dropdown from '../../src/dropdown.js'
-import Modal from '../../src/modal.js'
-import Offcanvas from '../../src/offcanvas.js'
-import Popover from '../../src/popover.js'
-import ScrollSpy from '../../src/scrollspy.js'
-import Tab from '../../src/tab.js'
-import Toast from '../../src/toast.js'
-import Tooltip from '../../src/tooltip.js'
-import { clearFixture, getFixture } from '../helpers/fixture.js'
-
-describe('jQuery', () => {
- let fixtureEl
-
- beforeAll(() => {
- fixtureEl = getFixture()
- })
-
- afterEach(() => {
- clearFixture()
- })
-
- it('should add all plugins in jQuery', () => {
- expect(Alert.jQueryInterface).toEqual(jQuery.fn.alert)
- expect(Button.jQueryInterface).toEqual(jQuery.fn.button)
- expect(Carousel.jQueryInterface).toEqual(jQuery.fn.carousel)
- expect(Collapse.jQueryInterface).toEqual(jQuery.fn.collapse)
- expect(Dropdown.jQueryInterface).toEqual(jQuery.fn.dropdown)
- expect(Modal.jQueryInterface).toEqual(jQuery.fn.modal)
- expect(Offcanvas.jQueryInterface).toEqual(jQuery.fn.offcanvas)
- expect(Popover.jQueryInterface).toEqual(jQuery.fn.popover)
- expect(ScrollSpy.jQueryInterface).toEqual(jQuery.fn.scrollspy)
- expect(Tab.jQueryInterface).toEqual(jQuery.fn.tab)
- expect(Toast.jQueryInterface).toEqual(jQuery.fn.toast)
- expect(Tooltip.jQueryInterface).toEqual(jQuery.fn.tooltip)
- })
-
- it('should use jQuery event system', () => {
- return new Promise(resolve => {
- fixtureEl.innerHTML = [
- '
',
- ' ',
- '
'
- ].join('')
-
- $(fixtureEl).find('.alert')
- .one('closed.bs.alert', () => {
- expect($(fixtureEl).find('.alert')).toHaveSize(0)
- resolve()
- })
-
- $(fixtureEl).find('button').trigger('click')
- })
- })
-})
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index 9e481aa282..48c24f4bae 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -2,7 +2,7 @@ import EventHandler from '../../src/dom/event-handler.js'
import Modal from '../../src/modal.js'
import ScrollBarHelper from '../../src/util/scrollbar.js'
import {
- clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock
+ clearBodyAndDocument, clearFixture, createEvent, getFixture
} from '../helpers/fixture.js'
describe('Modal', () => {
@@ -1162,96 +1162,6 @@ describe('Modal', () => {
})
})
})
- describe('jQueryInterface', () => {
- it('should create a modal', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
-
- jQueryMock.fn.modal = Modal.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.modal.call(jQueryMock)
-
- expect(Modal.getInstance(div)).not.toBeNull()
- })
-
- it('should create a modal with given config', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
-
- jQueryMock.fn.modal = Modal.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.modal.call(jQueryMock, { keyboard: false })
- const spy = spyOn(Modal.prototype, 'constructor')
- expect(spy).not.toHaveBeenCalledWith(div, { keyboard: false })
-
- const modal = Modal.getInstance(div)
- expect(modal).not.toBeNull()
- expect(modal._config.keyboard).toBeFalse()
- })
-
- it('should not re create a modal', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
- const modal = new Modal(div)
-
- jQueryMock.fn.modal = Modal.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.modal.call(jQueryMock)
-
- expect(Modal.getInstance(div)).toEqual(modal)
- })
-
- it('should throw error on undefined method', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
- const action = 'undefinedMethod'
-
- jQueryMock.fn.modal = Modal.jQueryInterface
- jQueryMock.elements = [div]
-
- expect(() => {
- jQueryMock.fn.modal.call(jQueryMock, action)
- }).toThrowError(TypeError, `No method named "${action}"`)
- })
-
- it('should call show method', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
- const modal = new Modal(div)
-
- jQueryMock.fn.modal = Modal.jQueryInterface
- jQueryMock.elements = [div]
-
- const spy = spyOn(modal, 'show')
-
- jQueryMock.fn.modal.call(jQueryMock, 'show')
-
- expect(spy).toHaveBeenCalled()
- })
-
- it('should not call show method', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
-
- jQueryMock.fn.modal = Modal.jQueryInterface
- jQueryMock.elements = [div]
-
- const spy = spyOn(Modal.prototype, 'show')
-
- jQueryMock.fn.modal.call(jQueryMock)
-
- expect(spy).not.toHaveBeenCalled()
- })
- })
describe('getInstance', () => {
it('should return modal instance', () => {
diff --git a/js/tests/unit/offcanvas.spec.js b/js/tests/unit/offcanvas.spec.js
index 27004f5466..22ed8ebb73 100644
--- a/js/tests/unit/offcanvas.spec.js
+++ b/js/tests/unit/offcanvas.spec.js
@@ -3,7 +3,7 @@ import Offcanvas from '../../src/offcanvas.js'
import { isVisible } from '../../src/util/index.js'
import ScrollBarHelper from '../../src/util/scrollbar.js'
import {
- clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock
+ clearBodyAndDocument, clearFixture, createEvent, getFixture
} from '../helpers/fixture.js'
describe('Offcanvas', () => {
@@ -738,106 +738,6 @@ describe('Offcanvas', () => {
})
})
- describe('jQueryInterface', () => {
- it('should create an offcanvas', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
-
- jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.offcanvas.call(jQueryMock)
-
- expect(Offcanvas.getInstance(div)).not.toBeNull()
- })
-
- it('should not re create an offcanvas', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
- const offCanvas = new Offcanvas(div)
-
- jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.offcanvas.call(jQueryMock)
-
- expect(Offcanvas.getInstance(div)).toEqual(offCanvas)
- })
-
- it('should throw error on undefined method', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
- const action = 'undefinedMethod'
-
- 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 = '
'
-
- 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 = '
'
-
- 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 call offcanvas method', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
-
- const spy = spyOn(Offcanvas.prototype, 'show')
-
- jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.offcanvas.call(jQueryMock, 'show')
- expect(spy).toHaveBeenCalled()
- })
-
- it('should create a offcanvas with given config', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
-
- jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.offcanvas.call(jQueryMock, { scroll: true })
-
- const offcanvas = Offcanvas.getInstance(div)
- expect(offcanvas).not.toBeNull()
- expect(offcanvas._config.scroll).toBeTrue()
- })
- })
-
describe('getInstance', () => {
it('should return offcanvas instance', () => {
fixtureEl.innerHTML = '
'
diff --git a/js/tests/unit/orange-navbar.spec.js b/js/tests/unit/orange-navbar.spec.js
index 8c2c75bebc..b8ff953917 100644
--- a/js/tests/unit/orange-navbar.spec.js
+++ b/js/tests/unit/orange-navbar.spec.js
@@ -1,6 +1,6 @@
import OrangeNavbar from '../../src/orange-navbar.js'
import {
- clearFixture, getFixture, createEvent, jQueryMock
+ clearFixture, getFixture, createEvent
} from '../helpers/fixture.js'
describe('OrangeNavbar', () => {
@@ -38,49 +38,6 @@ describe('OrangeNavbar', () => {
})
})
- describe('jQueryInterface', () => {
- it('should create an orange navbar', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
-
- jQueryMock.fn.orangenavbar = OrangeNavbar.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.orangenavbar.call(jQueryMock)
-
- expect(OrangeNavbar.getInstance(div)).not.toBeNull()
- })
-
- it('should not re create an orange navbar', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
- const orangenavbar = new OrangeNavbar(div)
-
- jQueryMock.fn.orangenavbar = OrangeNavbar.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.orangenavbar.call(jQueryMock)
-
- expect(OrangeNavbar.getInstance(div)).toEqual(orangenavbar)
- })
-
- it('should throw error on undefined method', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
- const action = 'undefinedMethod'
-
- jQueryMock.fn.orangenavbar = OrangeNavbar.jQueryInterface
- jQueryMock.elements = [div]
-
- expect(() => {
- jQueryMock.fn.orangenavbar.call(jQueryMock, action)
- }).toThrowError(TypeError, `No method named "${action}"`)
- })
- })
-
it('should call enableMinimizing when the page finish loading', () => {
fixtureEl.innerHTML = [
'
'
diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js
index 1338821bc8..c25f5af9c3 100644
--- a/js/tests/unit/popover.spec.js
+++ b/js/tests/unit/popover.spec.js
@@ -1,7 +1,7 @@
import EventHandler from '../../src/dom/event-handler.js'
import Popover from '../../src/popover.js'
import {
- clearFixture, getFixture, jQueryMock, createEvent
+ clearFixture, getFixture, createEvent
} from '../helpers/fixture.js'
describe('Popover', () => {
@@ -361,80 +361,6 @@ describe('Popover', () => {
})
})
- describe('jQueryInterface', () => {
- it('should create a popover', () => {
- fixtureEl.innerHTML = '
BS X'
-
- const popoverEl = fixtureEl.querySelector('a')
-
- jQueryMock.fn.popover = Popover.jQueryInterface
- jQueryMock.elements = [popoverEl]
-
- jQueryMock.fn.popover.call(jQueryMock)
-
- expect(Popover.getInstance(popoverEl)).not.toBeNull()
- })
-
- it('should create a popover with a config object', () => {
- fixtureEl.innerHTML = '
BS X'
-
- const popoverEl = fixtureEl.querySelector('a')
-
- jQueryMock.fn.popover = Popover.jQueryInterface
- jQueryMock.elements = [popoverEl]
-
- jQueryMock.fn.popover.call(jQueryMock, {
- content: 'Popover content'
- })
-
- expect(Popover.getInstance(popoverEl)).not.toBeNull()
- })
-
- it('should not re create a popover', () => {
- fixtureEl.innerHTML = '
BS X'
-
- const popoverEl = fixtureEl.querySelector('a')
- const popover = new Popover(popoverEl)
-
- jQueryMock.fn.popover = Popover.jQueryInterface
- jQueryMock.elements = [popoverEl]
-
- jQueryMock.fn.popover.call(jQueryMock)
-
- expect(Popover.getInstance(popoverEl)).toEqual(popover)
- })
-
- it('should throw error on undefined method', () => {
- fixtureEl.innerHTML = '
BS X'
-
- const popoverEl = fixtureEl.querySelector('a')
- const action = 'undefinedMethod'
-
- jQueryMock.fn.popover = Popover.jQueryInterface
- jQueryMock.elements = [popoverEl]
-
- expect(() => {
- jQueryMock.fn.popover.call(jQueryMock, action)
- }).toThrowError(TypeError, `No method named "${action}"`)
- })
-
- it('should should call show method', () => {
- fixtureEl.innerHTML = '
BS X'
-
- const popoverEl = fixtureEl.querySelector('a')
- const popover = new Popover(popoverEl)
-
- jQueryMock.fn.popover = Popover.jQueryInterface
- jQueryMock.elements = [popoverEl]
-
- const spy = spyOn(popover, 'show')
-
- jQueryMock.fn.popover.call(jQueryMock, 'show')
-
- expect(spy).toHaveBeenCalled()
- })
- })
-
describe('getInstance', () => {
it('should return popover instance', () => {
fixtureEl.innerHTML = '
BS X'
@@ -508,4 +434,59 @@ describe('Popover', () => {
expect(popover2._config.placement).toEqual('top')
})
})
+
+ describe('data-api', () => {
+ it('should toggle popover on click via data-api', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
Click me'
+
+ const popoverEl = fixtureEl.querySelector('[data-bs-toggle="popover"]')
+
+ popoverEl.addEventListener('shown.bs.popover', () => {
+ expect(document.querySelector('.popover')).not.toBeNull()
+ resolve()
+ })
+
+ popoverEl.click()
+ })
+ })
+
+ it('should do nothing when clicking on element without data-bs-toggle', () => {
+ fixtureEl.innerHTML = '
Click me'
+
+ const linkEl = fixtureEl.querySelector('a')
+ linkEl.click()
+
+ expect(document.querySelector('.popover')).toBeNull()
+ expect(Popover.getInstance(linkEl)).toBeNull()
+ })
+
+ it('should show popover on focusin via data-api', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
+
+ const popoverEl = fixtureEl.querySelector('[data-bs-toggle="popover"]')
+
+ popoverEl.addEventListener('shown.bs.popover', () => {
+ expect(document.querySelector('.popover')).not.toBeNull()
+ resolve()
+ })
+
+ const focusEvent = createEvent('focusin')
+ popoverEl.dispatchEvent(focusEvent)
+ })
+ })
+
+ it('should prevent default on click via data-api', () => {
+ fixtureEl.innerHTML = '
Click me'
+
+ const popoverEl = fixtureEl.querySelector('[data-bs-toggle="popover"]')
+ const clickEvent = createEvent('click')
+ const preventDefaultSpy = spyOn(clickEvent, 'preventDefault').and.callThrough()
+
+ popoverEl.dispatchEvent(clickEvent)
+
+ expect(preventDefaultSpy).toHaveBeenCalled()
+ })
+ })
})
diff --git a/js/tests/unit/quantity-selector.spec.js b/js/tests/unit/quantity-selector.spec.js
index c73460dca6..d3ccd7b601 100644
--- a/js/tests/unit/quantity-selector.spec.js
+++ b/js/tests/unit/quantity-selector.spec.js
@@ -1,6 +1,6 @@
import QuantitySelector from '../../src/quantity-selector.js'
import {
- clearFixture, getFixture, createEvent, jQueryMock
+ clearFixture, getFixture, createEvent
} from '../helpers/fixture.js'
describe('QuantitySelector', () => {
@@ -38,49 +38,6 @@ describe('QuantitySelector', () => {
})
})
- describe('jQueryInterface', () => {
- it('should create a quantity selector', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
-
- jQueryMock.fn.quantitySelector = QuantitySelector.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.quantitySelector.call(jQueryMock)
-
- expect(QuantitySelector.getInstance(div)).not.toBeNull()
- })
-
- it('should not re create a quantity selector', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
- const quantitySelector = new QuantitySelector(div)
-
- jQueryMock.fn.quantitySelector = QuantitySelector.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.quantitySelector.call(jQueryMock)
-
- expect(QuantitySelector.getInstance(div)).toEqual(quantitySelector)
- })
-
- it('should throw error on undefined method', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
- const action = 'undefinedMethod'
-
- jQueryMock.fn.quantitySelector = QuantitySelector.jQueryInterface
- jQueryMock.elements = [div]
-
- expect(() => {
- jQueryMock.fn.quantitySelector.call(jQueryMock, action)
- }).toThrowError(TypeError, `No method named "${action}"`)
- })
- })
-
it('should take care of element either passed as a CSS selector or DOM element (Step Up button)', () => {
fixtureEl.innerHTML = [
'
',
diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js
index 0960f974ab..8e54bcfc76 100644
--- a/js/tests/unit/scrollspy.spec.js
+++ b/js/tests/unit/scrollspy.spec.js
@@ -1,7 +1,7 @@
import EventHandler from '../../src/dom/event-handler.js'
import ScrollSpy from '../../src/scrollspy.js'
import {
- clearFixture, createEvent, getFixture, jQueryMock
+ clearFixture, createEvent, getFixture
} from '../helpers/fixture.js'
describe('ScrollSpy', () => {
@@ -648,111 +648,6 @@ describe('ScrollSpy', () => {
})
})
- describe('jQueryInterface', () => {
- it('should create a scrollspy', () => {
- fixtureEl.innerHTML = getDummyFixture()
-
- const div = fixtureEl.querySelector('.content')
-
- jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.scrollspy.call(jQueryMock, { target: '#navBar' })
-
- expect(ScrollSpy.getInstance(div)).not.toBeNull()
- })
-
- it('should create a scrollspy with given config', () => {
- fixtureEl.innerHTML = getDummyFixture()
-
- const div = fixtureEl.querySelector('.content')
-
- jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.scrollspy.call(jQueryMock, { rootMargin: '100px' })
- const spy = spyOn(ScrollSpy.prototype, 'constructor')
- expect(spy).not.toHaveBeenCalledWith(div, { rootMargin: '100px' })
-
- const scrollspy = ScrollSpy.getInstance(div)
- expect(scrollspy).not.toBeNull()
- expect(scrollspy._config.rootMargin).toEqual('100px')
- })
-
- it('should not re create a scrollspy', () => {
- fixtureEl.innerHTML = getDummyFixture()
-
- const div = fixtureEl.querySelector('.content')
- const scrollSpy = new ScrollSpy(div)
-
- jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.scrollspy.call(jQueryMock)
-
- expect(ScrollSpy.getInstance(div)).toEqual(scrollSpy)
- })
-
- it('should call a scrollspy method', () => {
- fixtureEl.innerHTML = getDummyFixture()
-
- const div = fixtureEl.querySelector('.content')
- const scrollSpy = new ScrollSpy(div)
-
- const spy = spyOn(scrollSpy, 'refresh')
-
- jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.scrollspy.call(jQueryMock, 'refresh')
-
- expect(ScrollSpy.getInstance(div)).toEqual(scrollSpy)
- expect(spy).toHaveBeenCalled()
- })
-
- it('should throw error on undefined method', () => {
- fixtureEl.innerHTML = getDummyFixture()
-
- const div = fixtureEl.querySelector('.content')
- const action = 'undefinedMethod'
-
- jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
- jQueryMock.elements = [div]
-
- expect(() => {
- jQueryMock.fn.scrollspy.call(jQueryMock, action)
- }).toThrowError(TypeError, `No method named "${action}"`)
- })
-
- it('should throw error on protected method', () => {
- fixtureEl.innerHTML = getDummyFixture()
-
- const div = fixtureEl.querySelector('.content')
- const action = '_getConfig'
-
- jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
- jQueryMock.elements = [div]
-
- expect(() => {
- jQueryMock.fn.scrollspy.call(jQueryMock, action)
- }).toThrowError(TypeError, `No method named "${action}"`)
- })
-
- it('should throw error if method "constructor" is being called', () => {
- fixtureEl.innerHTML = getDummyFixture()
-
- const div = fixtureEl.querySelector('.content')
- const action = 'constructor'
-
- jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
- jQueryMock.elements = [div]
-
- expect(() => {
- jQueryMock.fn.scrollspy.call(jQueryMock, action)
- }).toThrowError(TypeError, `No method named "${action}"`)
- })
- })
-
describe('getInstance', () => {
it('should return scrollspy instance', () => {
fixtureEl.innerHTML = getDummyFixture()
diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index 4fcf8ee0f0..781086010f 100644
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -1,6 +1,6 @@
import Tab from '../../src/tab.js'
import {
- clearFixture, createEvent, getFixture, jQueryMock
+ clearFixture, createEvent, getFixture
} from '../helpers/fixture.js'
describe('Tab', () => {
@@ -827,66 +827,6 @@ describe('Tab', () => {
})
})
- describe('jQueryInterface', () => {
- it('should create a tab', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('.nav > div')
-
- jQueryMock.fn.tab = Tab.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.tab.call(jQueryMock)
-
- expect(Tab.getInstance(div)).not.toBeNull()
- })
-
- it('should not re create a tab', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('.nav > div')
- const tab = new Tab(div)
-
- jQueryMock.fn.tab = Tab.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.tab.call(jQueryMock)
-
- expect(Tab.getInstance(div)).toEqual(tab)
- })
-
- it('should call a tab method', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('.nav > div')
- const tab = new Tab(div)
-
- const spy = spyOn(tab, 'show')
-
- jQueryMock.fn.tab = Tab.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.tab.call(jQueryMock, 'show')
-
- expect(Tab.getInstance(div)).toEqual(tab)
- expect(spy).toHaveBeenCalled()
- })
-
- it('should throw error on undefined method', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('.nav > div')
- const action = 'undefinedMethod'
-
- jQueryMock.fn.tab = Tab.jQueryInterface
- jQueryMock.elements = [div]
-
- expect(() => {
- jQueryMock.fn.tab.call(jQueryMock, action)
- }).toThrowError(TypeError, `No method named "${action}"`)
- })
- })
-
describe('getInstance', () => {
it('should return null if there is no instance', () => {
expect(Tab.getInstance(fixtureEl)).toBeNull()
diff --git a/js/tests/unit/toast.spec.js b/js/tests/unit/toast.spec.js
index 561c176414..3a2f4fabaf 100644
--- a/js/tests/unit/toast.spec.js
+++ b/js/tests/unit/toast.spec.js
@@ -1,6 +1,6 @@
import Toast from '../../src/toast.js'
import {
- clearFixture, createEvent, getFixture, jQueryMock
+ clearFixture, createEvent, getFixture
} from '../helpers/fixture.js'
describe('Toast', () => {
@@ -536,66 +536,6 @@ describe('Toast', () => {
})
})
- describe('jQueryInterface', () => {
- it('should create a toast', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
-
- jQueryMock.fn.toast = Toast.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.toast.call(jQueryMock)
-
- expect(Toast.getInstance(div)).not.toBeNull()
- })
-
- it('should not re create a toast', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
- const toast = new Toast(div)
-
- jQueryMock.fn.toast = Toast.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.toast.call(jQueryMock)
-
- expect(Toast.getInstance(div)).toEqual(toast)
- })
-
- it('should call a toast method', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
- const toast = new Toast(div)
-
- const spy = spyOn(toast, 'show')
-
- jQueryMock.fn.toast = Toast.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.toast.call(jQueryMock, 'show')
-
- expect(Toast.getInstance(div)).toEqual(toast)
- expect(spy).toHaveBeenCalled()
- })
-
- it('should throw error on undefined method', () => {
- fixtureEl.innerHTML = '
'
-
- const div = fixtureEl.querySelector('div')
- const action = 'undefinedMethod'
-
- jQueryMock.fn.toast = Toast.jQueryInterface
- jQueryMock.elements = [div]
-
- expect(() => {
- jQueryMock.fn.toast.call(jQueryMock, action)
- }).toThrowError(TypeError, `No method named "${action}"`)
- })
- })
-
describe('getInstance', () => {
it('should return a toast instance', () => {
fixtureEl.innerHTML = '
'
diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js
index 37f2c230d0..dc6b72ae1c 100644
--- a/js/tests/unit/tooltip.spec.js
+++ b/js/tests/unit/tooltip.spec.js
@@ -2,7 +2,7 @@ import EventHandler from '../../src/dom/event-handler.js'
import Tooltip from '../../src/tooltip.js'
import { noop } from '../../src/util/index.js'
import {
- clearFixture, createEvent, getFixture, jQueryMock
+ clearFixture, createEvent, getFixture
} from '../helpers/fixture.js'
describe('Tooltip', () => {
@@ -121,23 +121,19 @@ describe('Tooltip', () => {
const getOffset = jasmine.createSpy('getOffset').and.returnValue([10, 20])
const tooltipEl = fixtureEl.querySelector('a')
const tooltip = new Tooltip(tooltipEl, {
- offset: getOffset,
- popperConfig: {
- onFirstUpdate(state) {
- expect(getOffset).toHaveBeenCalledWith({
- popper: state.rects.popper,
- reference: state.rects.reference,
- placement: state.placement
- }, tooltipEl)
- resolve()
- }
- }
+ offset: getOffset
})
const offset = tooltip._getOffset()
expect(offset).toEqual(jasmine.any(Function))
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ // The offset function should have been called during positioning
+ expect(getOffset).toHaveBeenCalled()
+ resolve()
+ })
+
tooltip.show()
})
})
@@ -151,37 +147,37 @@ describe('Tooltip', () => {
expect(tooltip._getOffset()).toEqual([10, 20])
})
- it('should allow to pass config to Popper with `popperConfig`', () => {
+ it('should allow to pass config to Floating UI with `floatingConfig`', () => {
fixtureEl.innerHTML = '
'
const tooltipEl = fixtureEl.querySelector('a')
const tooltip = new Tooltip(tooltipEl, {
- popperConfig: {
+ floatingConfig: {
placement: 'left'
}
})
- const popperConfig = tooltip._getPopperConfig('top')
+ const floatingConfig = tooltip._getFloatingConfig('top', [])
- expect(popperConfig.placement).toEqual('left')
+ expect(floatingConfig.placement).toEqual('left')
})
- it('should allow to pass config to Popper with `popperConfig` as a function', () => {
+ it('should allow to pass config to Floating UI with `floatingConfig` as a function', () => {
fixtureEl.innerHTML = '
'
const tooltipEl = fixtureEl.querySelector('a')
- const getPopperConfig = jasmine.createSpy('getPopperConfig').and.returnValue({ placement: 'left' })
+ const getFloatingConfig = jasmine.createSpy('getFloatingConfig').and.returnValue({ placement: 'left' })
const tooltip = new Tooltip(tooltipEl, {
- popperConfig: getPopperConfig
+ floatingConfig: getFloatingConfig
})
- const popperConfig = tooltip._getPopperConfig('top')
+ const floatingConfig = tooltip._getFloatingConfig('top', [])
// Ensure that the function was called with the default config.
- expect(getPopperConfig).toHaveBeenCalledWith(jasmine.objectContaining({
+ expect(getFloatingConfig).toHaveBeenCalledWith(jasmine.objectContaining({
placement: jasmine.any(String)
}))
- expect(popperConfig.placement).toEqual('left')
+ expect(floatingConfig.placement).toEqual('left')
})
it('should use original title, if not "data-bs-title" is given', () => {
@@ -518,7 +514,8 @@ describe('Tooltip', () => {
const tooltipEl = fixtureEl.querySelector('a')
const tooltip = new Tooltip(tooltipEl, {
- placement: 'bottom'
+ placement: 'bottom',
+ fallbackPlacements: [] // Disable flip to get exact placement
})
tooltipEl.addEventListener('inserted.bs.tooltip', () => {
@@ -527,7 +524,7 @@ describe('Tooltip', () => {
tooltipEl.addEventListener('shown.bs.tooltip', () => {
expect(tooltip._getTipElement()).toHaveClass('bs-tooltip-auto')
- expect(tooltip._getTipElement().getAttribute('data-popper-placement')).toEqual('bottom')
+ expect(tooltip._getTipElement().getAttribute('data-bs-placement')).toEqual('bottom')
resolve()
})
@@ -582,27 +579,6 @@ describe('Tooltip', () => {
})
})
- it('should show a tooltip with a jquery element container', () => {
- return new Promise(resolve => {
- fixtureEl.innerHTML = '
'
-
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl, {
- container: {
- 0: fixtureEl,
- jquery: 'jQuery'
- }
- })
-
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- expect(fixtureEl.querySelector('.tooltip')).not.toBeNull()
- resolve()
- })
-
- tooltip.show()
- })
- })
-
it('should show a tooltip with a selector in container', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '
'
@@ -662,14 +638,14 @@ describe('Tooltip', () => {
})
})
- it('should throw an error the element is not visible', () => {
+ it('should throw an error the element is not visible', async () => {
fixtureEl.innerHTML = '
'
const tooltipEl = fixtureEl.querySelector('a')
const tooltip = new Tooltip(tooltipEl)
try {
- tooltip.show()
+ await tooltip.show()
} catch (error) {
expect(error.message).toEqual('Please use show on visible elements')
}
@@ -816,7 +792,7 @@ describe('Tooltip', () => {
it('should properly maintain tooltip state if leave event occurs and enter event occurs during hide transition', () => {
return new Promise(resolve => {
- // Style this tooltip to give it plenty of room for popper to do what it wants
+ // Style this tooltip to give it plenty of room for Floating UI to do what it wants
fixtureEl.innerHTML = '
Trigger'
const tooltipEl = fixtureEl.querySelector('a')
@@ -828,8 +804,8 @@ describe('Tooltip', () => {
})
setTimeout(() => {
- expect(tooltip._popper).not.toBeNull()
- expect(tooltip._getTipElement().getAttribute('data-popper-placement')).toEqual('top')
+ expect(tooltip._floatingCleanup).not.toBeNull()
+ expect(tooltip._getTipElement().getAttribute('data-bs-placement')).toEqual('top')
tooltipEl.dispatchEvent(createEvent('mouseout'))
setTimeout(() => {
@@ -838,8 +814,8 @@ describe('Tooltip', () => {
}, 100)
setTimeout(() => {
- expect(tooltip._popper).not.toBeNull()
- expect(tooltip._getTipElement().getAttribute('data-popper-placement')).toEqual('top')
+ expect(tooltip._floatingCleanup).not.toBeNull()
+ expect(tooltip._getTipElement().getAttribute('data-bs-placement')).toEqual('top')
resolve()
}, 200)
}, 10)
@@ -1053,7 +1029,7 @@ describe('Tooltip', () => {
})
})
- it('should not throw error running hide if popper hasn\'t been shown', () => {
+ it('should not throw error running hide if tooltip hasn\'t been shown', () => {
fixtureEl.innerHTML = '
'
const div = fixtureEl.querySelector('div')
@@ -1069,7 +1045,7 @@ describe('Tooltip', () => {
})
describe('update', () => {
- it('should call popper update', () => {
+ it('should call floating position update', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '
'
@@ -1077,7 +1053,7 @@ describe('Tooltip', () => {
const tooltip = new Tooltip(tooltipEl)
tooltipEl.addEventListener('shown.bs.tooltip', () => {
- const spy = spyOn(tooltip._popper, 'update')
+ const spy = spyOn(tooltip, '_updateFloatingPosition')
tooltip.update()
@@ -1168,18 +1144,30 @@ describe('Tooltip', () => {
})
it('should re-show tip if it was already shown', () => {
- fixtureEl.innerHTML = '
'
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
- tooltip.show()
- const tip = () => tooltip._getTipElement()
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
+ const tip = () => tooltip._getTipElement()
- expect(tip()).toHaveClass('show')
- tooltip.setContent({ '.tooltip-inner': 'foo' })
+ tooltipEl.addEventListener('shown.bs.tooltip', function handler() {
+ tooltipEl.removeEventListener('shown.bs.tooltip', handler)
- expect(tip()).toHaveClass('show')
- expect(tip().querySelector('.tooltip-inner').textContent).toEqual('foo')
+ expect(tip()).toHaveClass('show')
+
+ // Listen for the re-show after setContent
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ expect(tip()).toHaveClass('show')
+ expect(tip().querySelector('.tooltip-inner').textContent).toEqual('foo')
+ resolve()
+ })
+
+ tooltip.setContent({ '.tooltip-inner': 'foo' })
+ })
+
+ tooltip.show()
+ })
})
it('should keep tip hidden, if it was already hidden before', () => {
@@ -1243,25 +1231,6 @@ describe('Tooltip', () => {
expect().nothing()
})
- it('should add the content as a child of the element for jQuery elements', () => {
- fixtureEl.innerHTML = [
- '
',
- ' ',
- ''
- ].join('')
-
- const tooltipEl = fixtureEl.querySelector('a')
- const childContent = fixtureEl.querySelector('div')
- const tooltip = new Tooltip(tooltipEl, {
- html: true
- })
-
- tooltip.setContent({ '.tooltip': { 0: childContent, jquery: 'jQuery' } })
- tooltip.show()
-
- expect(childContent.parentNode).toEqual(tooltip._getTipElement())
- })
-
it('should add the child text content in the element', () => {
fixtureEl.innerHTML = [
'
',
@@ -1522,64 +1491,4 @@ describe('Tooltip', () => {
expect(tooltip2._getTitle()).toEqual('nothing')
})
})
-
- describe('jQueryInterface', () => {
- it('should create a tooltip', () => {
- fixtureEl.innerHTML = ''
-
- const div = fixtureEl.querySelector('div')
-
- jQueryMock.fn.tooltip = Tooltip.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.tooltip.call(jQueryMock)
-
- expect(Tooltip.getInstance(div)).not.toBeNull()
- })
-
- it('should not re create a tooltip', () => {
- fixtureEl.innerHTML = ''
-
- const div = fixtureEl.querySelector('div')
- const tooltip = new Tooltip(div)
-
- jQueryMock.fn.tooltip = Tooltip.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.tooltip.call(jQueryMock)
-
- expect(Tooltip.getInstance(div)).toEqual(tooltip)
- })
-
- it('should call a tooltip method', () => {
- fixtureEl.innerHTML = ''
-
- const div = fixtureEl.querySelector('div')
- const tooltip = new Tooltip(div)
-
- const spy = spyOn(tooltip, 'show')
-
- jQueryMock.fn.tooltip = Tooltip.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.tooltip.call(jQueryMock, 'show')
-
- expect(Tooltip.getInstance(div)).toEqual(tooltip)
- expect(spy).toHaveBeenCalled()
- })
-
- it('should throw error on undefined method', () => {
- fixtureEl.innerHTML = ''
-
- const div = fixtureEl.querySelector('div')
- const action = 'undefinedMethod'
-
- jQueryMock.fn.tooltip = Tooltip.jQueryInterface
- jQueryMock.elements = [div]
-
- expect(() => {
- jQueryMock.fn.tooltip.call(jQueryMock, action)
- }).toThrowError(TypeError, `No method named "${action}"`)
- })
- })
})
diff --git a/js/tests/unit/util/floating-ui.spec.js b/js/tests/unit/util/floating-ui.spec.js
new file mode 100644
index 0000000000..720d518175
--- /dev/null
+++ b/js/tests/unit/util/floating-ui.spec.js
@@ -0,0 +1,263 @@
+import {
+ BREAKPOINTS,
+ getDefaultPlacement,
+ parseResponsivePlacement,
+ getResponsivePlacement,
+ createBreakpointListeners,
+ disposeBreakpointListeners
+} from '../../../src/util/floating-ui.js'
+
+describe('FloatingUI Util', () => {
+ describe('BREAKPOINTS', () => {
+ it('should export breakpoint values', () => {
+ expect(BREAKPOINTS).toEqual(jasmine.any(Object))
+ expect(BREAKPOINTS.xs).toBe(390)
+ expect(BREAKPOINTS.sm).toBe(480)
+ expect(BREAKPOINTS.md).toBe(736)
+ expect(BREAKPOINTS.lg).toBe(1024)
+ expect(BREAKPOINTS.xl).toBe(1320)
+ expect(BREAKPOINTS['2xl']).toBe(1640)
+ expect(BREAKPOINTS['3xl']).toBe(1880)
+ })
+ })
+
+ describe('getDefaultPlacement', () => {
+ it('should return fallback placement when no alignment', () => {
+ expect(getDefaultPlacement('bottom')).toBe('bottom')
+ expect(getDefaultPlacement('top')).toBe('top')
+ expect(getDefaultPlacement('left')).toBe('left')
+ expect(getDefaultPlacement('right')).toBe('right')
+ })
+
+ it('should return default "bottom" when no argument provided', () => {
+ expect(getDefaultPlacement()).toBe('bottom')
+ })
+
+ it('should return placement with alignment in LTR mode', () => {
+ // In LTR mode (default), alignment should be preserved
+ const htmlEl = document.documentElement
+ const originalDir = htmlEl.getAttribute('dir')
+ htmlEl.removeAttribute('dir')
+
+ expect(getDefaultPlacement('bottom-start')).toBe('bottom-start')
+ expect(getDefaultPlacement('bottom-end')).toBe('bottom-end')
+ expect(getDefaultPlacement('top-start')).toBe('top-start')
+ expect(getDefaultPlacement('top-end')).toBe('top-end')
+
+ if (originalDir) {
+ htmlEl.setAttribute('dir', originalDir)
+ }
+ })
+
+ it('should flip alignment in RTL mode', () => {
+ const htmlEl = document.documentElement
+ const originalDir = htmlEl.getAttribute('dir')
+ htmlEl.setAttribute('dir', 'rtl')
+
+ expect(getDefaultPlacement('bottom-start')).toBe('bottom-end')
+ expect(getDefaultPlacement('bottom-end')).toBe('bottom-start')
+ expect(getDefaultPlacement('top-start')).toBe('top-end')
+ expect(getDefaultPlacement('top-end')).toBe('top-start')
+
+ if (originalDir) {
+ htmlEl.setAttribute('dir', originalDir)
+ } else {
+ htmlEl.removeAttribute('dir')
+ }
+ })
+ })
+
+ describe('parseResponsivePlacement', () => {
+ it('should return null for non-responsive placement strings', () => {
+ expect(parseResponsivePlacement('bottom')).toBeNull()
+ expect(parseResponsivePlacement('top-start')).toBeNull()
+ expect(parseResponsivePlacement('left-end')).toBeNull()
+ expect(parseResponsivePlacement('')).toBeNull()
+ expect(parseResponsivePlacement(null)).toBeNull()
+ expect(parseResponsivePlacement(undefined)).toBeNull()
+ })
+
+ it('should parse simple responsive placement', () => {
+ const result = parseResponsivePlacement('bottom md:top')
+ expect(result).toEqual({
+ xs: 'bottom',
+ md: 'top'
+ })
+ })
+
+ it('should parse responsive placement with alignments', () => {
+ const result = parseResponsivePlacement('bottom-start md:top-end lg:right')
+ expect(result).toEqual({
+ xs: 'bottom-start',
+ md: 'top-end',
+ lg: 'right'
+ })
+ })
+
+ it('should parse all breakpoints', () => {
+ const result = parseResponsivePlacement('bottom sm:top md:left lg:right xl:bottom-start 2xl:top-end')
+ expect(result).toEqual({
+ xs: 'bottom',
+ sm: 'top',
+ md: 'left',
+ lg: 'right',
+ xl: 'bottom-start',
+ '2xl': 'top-end'
+ })
+ })
+
+ it('should use default placement for xs when base is not specified', () => {
+ const result = parseResponsivePlacement('md:top lg:bottom', 'right')
+ expect(result).toEqual({
+ xs: 'right',
+ md: 'top',
+ lg: 'bottom'
+ })
+ })
+
+ it('should ignore invalid breakpoints', () => {
+ const result = parseResponsivePlacement('bottom invalid:top md:left')
+ expect(result).toEqual({
+ xs: 'bottom',
+ md: 'left'
+ })
+ expect(result.invalid).toBeUndefined()
+ })
+
+ it('should handle placement string with only responsive prefixes', () => {
+ const result = parseResponsivePlacement('md:top')
+ expect(result).toEqual({
+ xs: 'bottom', // default
+ md: 'top'
+ })
+ })
+ })
+
+ describe('getResponsivePlacement', () => {
+ it('should return default placement when responsivePlacements is null', () => {
+ expect(getResponsivePlacement(null)).toBe('bottom')
+ expect(getResponsivePlacement(null, 'top')).toBe('top')
+ })
+
+ it('should return default placement when responsivePlacements is undefined', () => {
+ expect(getResponsivePlacement(undefined)).toBe('bottom')
+ expect(getResponsivePlacement(undefined, 'left')).toBe('left')
+ })
+
+ it('should return xs placement for small viewports', () => {
+ // Mock a small viewport (less than sm breakpoint)
+ spyOnProperty(window, 'innerWidth').and.returnValue(400)
+
+ const placements = { xs: 'bottom', md: 'top' }
+ expect(getResponsivePlacement(placements)).toBe('bottom')
+ })
+
+ it('should return appropriate placement for sm viewport', () => {
+ spyOnProperty(window, 'innerWidth').and.returnValue(600)
+
+ const placements = { xs: 'bottom', sm: 'top', md: 'left' }
+ expect(getResponsivePlacement(placements)).toBe('top')
+ })
+
+ it('should return appropriate placement for md viewport', () => {
+ spyOnProperty(window, 'innerWidth').and.returnValue(800)
+
+ const placements = {
+ xs: 'bottom',
+ sm: 'top',
+ md: 'left',
+ lg: 'right'
+ }
+ expect(getResponsivePlacement(placements)).toBe('left')
+ })
+
+ it('should return appropriate placement for lg viewport', () => {
+ spyOnProperty(window, 'innerWidth').and.returnValue(1100)
+
+ const placements = { xs: 'bottom', md: 'top', lg: 'right' }
+ expect(getResponsivePlacement(placements)).toBe('right')
+ })
+
+ it('should return appropriate placement for xl viewport', () => {
+ spyOnProperty(window, 'innerWidth').and.returnValue(1400)
+
+ const placements = { xs: 'bottom', lg: 'top', xl: 'left' }
+ expect(getResponsivePlacement(placements)).toBe('left')
+ })
+
+ it('should return appropriate placement for 2xl viewport', () => {
+ spyOnProperty(window, 'innerWidth').and.returnValue(1700)
+
+ const placements = { xs: 'bottom', xl: 'top', '2xl': 'right-start' }
+ expect(getResponsivePlacement(placements)).toBe('right-start')
+ })
+
+ it('should cascade to smaller breakpoints when larger ones are not defined', () => {
+ spyOnProperty(window, 'innerWidth').and.returnValue(1600)
+
+ // Only xs and md defined, viewport is 2xl
+ const placements = { xs: 'bottom', md: 'top' }
+ expect(getResponsivePlacement(placements)).toBe('top')
+ })
+
+ it('should use default when xs is not defined', () => {
+ spyOnProperty(window, 'innerWidth').and.returnValue(400)
+
+ const placements = { md: 'top' } // No xs
+ expect(getResponsivePlacement(placements, 'left')).toBe('left')
+ })
+ })
+
+ describe('createBreakpointListeners', () => {
+ it('should create listeners for all breakpoints', () => {
+ const callback = jasmine.createSpy('callback')
+ const listeners = createBreakpointListeners(callback)
+
+ expect(listeners).toEqual(jasmine.any(Array))
+ expect(listeners.length).toBe(Object.keys(BREAKPOINTS).length)
+
+ // Each listener should have mql and handler
+ for (const listener of listeners) {
+ expect(listener.mql).toBeDefined()
+ expect(listener.handler).toBe(callback)
+ }
+
+ // Clean up
+ disposeBreakpointListeners(listeners)
+ })
+
+ it('should create MediaQueryList objects with correct queries', () => {
+ const callback = jasmine.createSpy('callback')
+ const listeners = createBreakpointListeners(callback)
+
+ // Verify media query objects are created
+ expect(listeners[0].mql.media).toContain('min-width')
+
+ // Clean up
+ disposeBreakpointListeners(listeners)
+ })
+ })
+
+ describe('disposeBreakpointListeners', () => {
+ it('should remove all event listeners', () => {
+ const callback = jasmine.createSpy('callback')
+ const listeners = createBreakpointListeners(callback)
+
+ // Spy on removeEventListener for each mql
+ const spies = listeners.map(listener =>
+ spyOn(listener.mql, 'removeEventListener').and.callThrough()
+ )
+
+ disposeBreakpointListeners(listeners)
+
+ // Verify removeEventListener was called on each
+ for (const spy of spies) {
+ expect(spy).toHaveBeenCalledWith('change', callback)
+ }
+ })
+
+ it('should handle empty array', () => {
+ expect(() => disposeBreakpointListeners([])).not.toThrow()
+ })
+ })
+})
diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js
index 8b37fbaed2..51ec18830c 100644
--- a/js/tests/unit/util/index.spec.js
+++ b/js/tests/unit/util/index.spec.js
@@ -72,18 +72,6 @@ describe('Util', () => {
expect(Util.isElement({})).toBeFalse()
expect(Util.isElement(fixtureEl.querySelectorAll('.test'))).toBeFalse()
})
-
- it('should detect jQuery element', () => {
- fixtureEl.innerHTML = ''
-
- const el = fixtureEl.querySelector('div')
- const fakejQuery = {
- 0: el,
- jquery: 'foo'
- }
-
- expect(Util.isElement(fakejQuery)).toBeTrue()
- })
})
describe('getElement', () => {
@@ -103,13 +91,6 @@ describe('Util', () => {
expect(Util.getElement()).toBeNull()
expect(Util.getElement(null)).toBeNull()
expect(Util.getElement(fixtureEl.querySelectorAll('.test'))).toBeNull()
-
- const fakejQueryObject = {
- 0: el,
- jquery: 'foo'
- }
-
- expect(Util.getElement(fakejQueryObject)).toEqual(el)
})
})
@@ -425,39 +406,6 @@ describe('Util', () => {
})
})
- describe('getjQuery', () => {
- const fakejQuery = { trigger() {} }
-
- beforeEach(() => {
- Object.defineProperty(window, 'jQuery', {
- value: fakejQuery,
- writable: true
- })
- })
-
- afterEach(() => {
- window.jQuery = undefined
- })
-
- it('should return jQuery object when present', () => {
- expect(Util.getjQuery()).toEqual(fakejQuery)
- })
-
- it('should not return jQuery object when present if data-bs-no-jquery', () => {
- document.body.setAttribute('data-bs-no-jquery', '')
-
- expect(window.jQuery).toEqual(fakejQuery)
- expect(Util.getjQuery()).toBeNull()
-
- document.body.removeAttribute('data-bs-no-jquery')
- })
-
- it('should not return jQuery if not present', () => {
- window.jQuery = undefined
- expect(Util.getjQuery()).toBeNull()
- })
- })
-
describe('onDOMContentLoaded', () => {
it('should execute callbacks when DOMContentLoaded is fired and should not add more than one listener', () => {
const spy = jasmine.createSpy()
@@ -486,32 +434,6 @@ describe('Util', () => {
})
})
- describe('defineJQueryPlugin', () => {
- const fakejQuery = { fn: {} }
-
- beforeEach(() => {
- Object.defineProperty(window, 'jQuery', {
- value: fakejQuery,
- writable: true
- })
- })
-
- afterEach(() => {
- window.jQuery = undefined
- })
-
- it('should define a plugin on the jQuery instance', () => {
- const pluginMock = Util.noop
- pluginMock.NAME = 'test'
- pluginMock.jQueryInterface = Util.noop
-
- Util.defineJQueryPlugin(pluginMock)
- expect(fakejQuery.fn.test).toEqual(pluginMock.jQueryInterface)
- expect(fakejQuery.fn.test.Constructor).toEqual(pluginMock)
- expect(fakejQuery.fn.test.noConflict).toEqual(jasmine.any(Function))
- })
- })
-
describe('execute', () => {
it('should execute if arg is function', () => {
const spy = jasmine.createSpy('spy')
diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
index fb8451d52c..cd0c8077aa 100644
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -188,7 +188,7 @@ Dropdown Bootstrap Visual Test