',
diff --git a/js/tests/unit/dom/data.spec.js b/js/tests/unit/dom/data.spec.js
index c80f32db0f5b..a00d3b7341e9 100644
--- a/js/tests/unit/dom/data.spec.js
+++ b/js/tests/unit/dom/data.spec.js
@@ -4,128 +4,103 @@ import Data from '../../../src/dom/data'
import { getFixture, clearFixture } from '../../helpers/fixture'
describe('Data', () => {
+ const TEST_KEY = 'bs.test'
+ const UNKNOWN_KEY = 'bs.unknown'
+ const TEST_DATA = {
+ test: 'bsData'
+ }
+
let fixtureEl
+ let div
beforeAll(() => {
fixtureEl = getFixture()
})
+ beforeEach(() => {
+ fixtureEl.innerHTML = ''
+ div = fixtureEl.querySelector('div')
+ })
+
afterEach(() => {
+ Data.remove(div, TEST_KEY)
clearFixture()
})
- describe('setData', () => {
- it('should set data in an element by adding a bsKey attribute', () => {
- fixtureEl.innerHTML = ''
-
- const div = fixtureEl.querySelector('div')
- const data = {
- test: 'bsData'
- }
-
- Data.setData(div, 'test', data)
- expect(div.bsKey).toBeDefined()
- })
+ it('should return null for unknown elements', () => {
+ const data = { ...TEST_DATA }
- it('should change data if something is already stored', () => {
- fixtureEl.innerHTML = ''
+ Data.set(div, TEST_KEY, data)
- const div = fixtureEl.querySelector('div')
- const data = {
- test: 'bsData'
- }
-
- Data.setData(div, 'test', data)
-
- data.test = 'bsData2'
- Data.setData(div, 'test', data)
-
- expect(div.bsKey).toBeDefined()
- })
+ expect(Data.get(null)).toBeNull()
+ expect(Data.get(undefined)).toBeNull()
+ expect(Data.get(document.createElement('div'), TEST_KEY)).toBeNull()
})
- describe('getData', () => {
- it('should return stored data', () => {
- fixtureEl.innerHTML = ''
-
- const div = fixtureEl.querySelector('div')
- const data = {
- test: 'bsData'
- }
+ it('should return null for unknown keys', () => {
+ const data = { ...TEST_DATA }
- Data.setData(div, 'test', data)
- expect(Data.getData(div, 'test')).toEqual(data)
- })
+ Data.set(div, TEST_KEY, data)
- it('should return null on undefined element', () => {
- expect(Data.getData(null)).toEqual(null)
- expect(Data.getData(undefined)).toEqual(null)
- })
-
- it('should return null when an element have nothing stored', () => {
- fixtureEl.innerHTML = ''
-
- const div = fixtureEl.querySelector('div')
-
- expect(Data.getData(div, 'test')).toEqual(null)
- })
-
- it('should return null when an element have nothing stored with the provided key', () => {
- fixtureEl.innerHTML = ''
+ expect(Data.get(div, null)).toBeNull()
+ expect(Data.get(div, undefined)).toBeNull()
+ expect(Data.get(div, UNKNOWN_KEY)).toBeNull()
+ })
- const div = fixtureEl.querySelector('div')
- const data = {
- test: 'bsData'
- }
+ it('should store data for an element with a given key and return it', () => {
+ const data = { ...TEST_DATA }
- Data.setData(div, 'test', data)
+ Data.set(div, TEST_KEY, data)
- expect(Data.getData(div, 'test2')).toEqual(null)
- })
+ expect(Data.get(div, TEST_KEY)).toBe(data)
})
- describe('removeData', () => {
- it('should do nothing when an element have nothing stored', () => {
- fixtureEl.innerHTML = ''
+ it('should overwrite data if something is already stored', () => {
+ const data = { ...TEST_DATA }
+ const copy = { ...data }
- const div = fixtureEl.querySelector('div')
+ Data.set(div, TEST_KEY, data)
+ Data.set(div, TEST_KEY, copy)
- Data.removeData(div, 'test')
- expect().nothing()
- })
+ expect(Data.get(div, TEST_KEY)).not.toBe(data)
+ expect(Data.get(div, TEST_KEY)).toBe(copy)
+ })
- it('should should do nothing if it\'s not a valid key provided', () => {
- fixtureEl.innerHTML = ''
+ it('should do nothing when an element have nothing stored', () => {
+ Data.remove(div, TEST_KEY)
- const div = fixtureEl.querySelector('div')
- const data = {
- test: 'bsData'
- }
+ expect().nothing()
+ })
- Data.setData(div, 'test', data)
+ it('should remove nothing for an unknown key', () => {
+ const data = { ...TEST_DATA }
- expect(div.bsKey).toBeDefined()
+ Data.set(div, TEST_KEY, data)
+ Data.remove(div, UNKNOWN_KEY)
- Data.removeData(div, 'test2')
+ expect(Data.get(div, TEST_KEY)).toBe(data)
+ })
- expect(div.bsKey).toBeDefined()
- })
+ it('should remove data for a given key', () => {
+ const data = { ...TEST_DATA }
- it('should remove data if something is stored', () => {
- fixtureEl.innerHTML = ''
+ Data.set(div, TEST_KEY, data)
+ Data.remove(div, TEST_KEY)
- const div = fixtureEl.querySelector('div')
- const data = {
- test: 'bsData'
- }
+ expect(Data.get(div, TEST_KEY)).toBeNull()
+ })
- Data.setData(div, 'test', data)
+ it('should console.error a message if called with multiple keys', () => {
+ /* eslint-disable no-console */
+ console.error = jasmine.createSpy('console.error')
- expect(div.bsKey).toBeDefined()
+ const data = { ...TEST_DATA }
+ const copy = { ...data }
- Data.removeData(div, 'test')
+ Data.set(div, TEST_KEY, data)
+ Data.set(div, UNKNOWN_KEY, copy)
- expect(div.bsKey).toBeUndefined()
- })
+ expect(console.error).toHaveBeenCalled()
+ expect(Data.get(div, UNKNOWN_KEY)).toBe(null)
})
})
diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js
index 658cb65b04ad..b7e771c95041 100644
--- a/js/tests/unit/dropdown.spec.js
+++ b/js/tests/unit/dropdown.spec.js
@@ -40,6 +40,24 @@ describe('Dropdown', () => {
})
describe('constructor', () => {
+ it('should take care of element either passed as a CSS selector or DOM element', () => {
+ fixtureEl.innerHTML = [
+ '
',
+ ' ',
+ ' ',
+ '
'
+ ].join('')
+
+ const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const dropdownBySelector = new Dropdown('[data-bs-toggle="dropdown"]')
+ const dropdownByElement = new Dropdown(btnDropdown)
+
+ expect(dropdownBySelector._element).toEqual(btnDropdown)
+ expect(dropdownByElement._element).toEqual(btnDropdown)
+ })
+
it('should add a listener on trigger which do not have data-bs-toggle="dropdown"', () => {
fixtureEl.innerHTML = [
'',
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index 8a159eef6c98..2e46b9cb3627 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -62,6 +62,19 @@ describe('Modal', () => {
})
})
+ describe('constructor', () => {
+ it('should take care of element either passed as a CSS selector or DOM element', () => {
+ fixtureEl.innerHTML = '
'
+
+ const modalEl = fixtureEl.querySelector('.modal')
+ const modalBySelector = new Modal('.modal')
+ const modalByElement = new Modal(modalEl)
+
+ expect(modalBySelector._element).toEqual(modalEl)
+ expect(modalByElement._element).toEqual(modalEl)
+ })
+ })
+
describe('toggle', () => {
it('should toggle a modal', done => {
fixtureEl.innerHTML = '
'
@@ -148,6 +161,30 @@ describe('Modal', () => {
modal.toggle()
})
+ it('should not adjust the inline margin and padding of sticky and fixed elements when element do not have full width', done => {
+ fixtureEl.innerHTML = [
+ '',
+ '
'
+ ].join('')
+
+ const stickyTopEl = fixtureEl.querySelector('.sticky-top')
+ const originalMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+ const originalPadding = Number.parseInt(window.getComputedStyle(stickyTopEl).paddingRight, 10)
+ const modalEl = fixtureEl.querySelector('.modal')
+ const modal = new Modal(modalEl)
+
+ modalEl.addEventListener('shown.bs.modal', () => {
+ const currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+ const currentPadding = Number.parseInt(window.getComputedStyle(stickyTopEl).paddingRight, 10)
+
+ expect(currentMargin).toEqual(originalMargin, 'sticky element\'s margin should not be adjusted while opening')
+ expect(currentPadding).toEqual(originalPadding, 'sticky element\'s padding should not be adjusted while opening')
+ done()
+ })
+
+ modal.show()
+ })
+
it('should ignore values set via CSS when trying to restore body padding after closing', done => {
fixtureEl.innerHTML = '
'
const styleTest = document.createElement('style')
diff --git a/js/tests/unit/offcanvas.spec.js b/js/tests/unit/offcanvas.spec.js
new file mode 100644
index 000000000000..d07c0c61021f
--- /dev/null
+++ b/js/tests/unit/offcanvas.spec.js
@@ -0,0 +1,324 @@
+import OffCanvas from '../../src/offcanvas'
+import EventHandler from '../../src/dom/event-handler'
+
+/** Test helpers */
+import { clearFixture, getFixture, jQueryMock, createEvent } from '../helpers/fixture'
+
+describe('OffCanvas', () => {
+ let fixtureEl
+
+ beforeAll(() => {
+ fixtureEl = getFixture()
+ })
+
+ afterEach(() => {
+ clearFixture()
+ document.body.classList.remove('offcanvas-open')
+ })
+
+ describe('VERSION', () => {
+ it('should return plugin version', () => {
+ expect(OffCanvas.VERSION).toEqual(jasmine.any(String))
+ })
+ })
+
+ describe('constructor', () => {
+ it('should call hide when a element with data-bs-dismiss="offcanvas" is clicked', () => {
+ fixtureEl.innerHTML = [
+ '
',
+ ' Close',
+ '
'
+ ].join('')
+
+ const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+ const closeEl = fixtureEl.querySelector('a')
+ const offCanvas = new OffCanvas(offCanvasEl)
+
+ spyOn(offCanvas, 'hide')
+
+ closeEl.click()
+
+ expect(offCanvas.hide).toHaveBeenCalled()
+ })
+
+ it('should hide if esc is pressed', () => {
+ fixtureEl.innerHTML = ''
+
+ const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+ const offCanvas = new OffCanvas(offCanvasEl)
+ const keyDownEsc = createEvent('keydown')
+ keyDownEsc.key = 'Escape'
+
+ spyOn(offCanvas, 'hide')
+
+ document.dispatchEvent(keyDownEsc)
+
+ expect(offCanvas.hide).toHaveBeenCalled()
+ })
+
+ it('should not hide if esc is not pressed', () => {
+ fixtureEl.innerHTML = ''
+
+ const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+ const offCanvas = new OffCanvas(offCanvasEl)
+ const keydownTab = createEvent('keydown')
+ keydownTab.key = 'Tab'
+
+ spyOn(offCanvas, 'hide')
+
+ document.dispatchEvent(keydownTab)
+
+ expect(offCanvas.hide).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('toggle', () => {
+ it('should call show method if show class is not present', () => {
+ fixtureEl.innerHTML = ''
+
+ const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+ const offCanvas = new OffCanvas(offCanvasEl)
+
+ spyOn(offCanvas, 'show')
+
+ offCanvas.toggle()
+
+ expect(offCanvas.show).toHaveBeenCalled()
+ })
+
+ it('should call hide method if show class is present', () => {
+ fixtureEl.innerHTML = ''
+
+ const offCanvasEl = fixtureEl.querySelector('.show')
+ const offCanvas = new OffCanvas(offCanvasEl)
+
+ spyOn(offCanvas, 'hide')
+
+ offCanvas.toggle()
+
+ expect(offCanvas.hide).toHaveBeenCalled()
+ })
+ })
+
+ describe('show', () => {
+ it('should do nothing if already shown', () => {
+ fixtureEl.innerHTML = ''
+
+ spyOn(EventHandler, 'trigger')
+
+ const offCanvasEl = fixtureEl.querySelector('div')
+ const offCanvas = new OffCanvas(offCanvasEl)
+
+ offCanvas.show()
+
+ expect(EventHandler.trigger).not.toHaveBeenCalled()
+ })
+
+ it('should show a hidden element', done => {
+ fixtureEl.innerHTML = ''
+
+ const offCanvasEl = fixtureEl.querySelector('div')
+ const offCanvas = new OffCanvas(offCanvasEl)
+
+ offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+ expect(offCanvasEl.classList.contains('show')).toEqual(true)
+ done()
+ })
+
+ offCanvas.show()
+ })
+
+ it('should not fire shown when show is prevented', done => {
+ fixtureEl.innerHTML = ''
+
+ const offCanvasEl = fixtureEl.querySelector('div')
+ const offCanvas = new OffCanvas(offCanvasEl)
+
+ const expectEnd = () => {
+ setTimeout(() => {
+ expect().nothing()
+ done()
+ }, 10)
+ }
+
+ offCanvasEl.addEventListener('show.bs.offcanvas', e => {
+ e.preventDefault()
+ expectEnd()
+ })
+
+ offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+ throw new Error('should not fire shown event')
+ })
+
+ offCanvas.show()
+ })
+ })
+
+ describe('hide', () => {
+ it('should do nothing if already shown', () => {
+ fixtureEl.innerHTML = ''
+
+ spyOn(EventHandler, 'trigger')
+
+ const offCanvasEl = fixtureEl.querySelector('div')
+ const offCanvas = new OffCanvas(offCanvasEl)
+
+ offCanvas.hide()
+
+ expect(EventHandler.trigger).not.toHaveBeenCalled()
+ })
+
+ it('should hide a shown element', done => {
+ fixtureEl.innerHTML = ''
+
+ const offCanvasEl = fixtureEl.querySelector('div')
+ const offCanvas = new OffCanvas(offCanvasEl)
+
+ offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
+ expect(offCanvasEl.classList.contains('show')).toEqual(false)
+ done()
+ })
+
+ offCanvas.hide()
+ })
+
+ it('should not fire hidden when hide is prevented', done => {
+ fixtureEl.innerHTML = ''
+
+ const offCanvasEl = fixtureEl.querySelector('div')
+ const offCanvas = new OffCanvas(offCanvasEl)
+
+ const expectEnd = () => {
+ setTimeout(() => {
+ expect().nothing()
+ done()
+ }, 10)
+ }
+
+ offCanvasEl.addEventListener('hide.bs.offcanvas', e => {
+ e.preventDefault()
+ expectEnd()
+ })
+
+ offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
+ throw new Error('should not fire hidden event')
+ })
+
+ offCanvas.hide()
+ })
+ })
+
+ describe('data-api', () => {
+ it('should not prevent event for input', done => {
+ fixtureEl.innerHTML = [
+ '',
+ ''
+ ].join('')
+
+ const target = fixtureEl.querySelector('input')
+ const offCanvasEl = fixtureEl.querySelector('#offcanvasdiv1')
+
+ offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+ expect(offCanvasEl.classList.contains('show')).toEqual(true)
+ expect(target.checked).toEqual(true)
+ done()
+ })
+
+ target.click()
+ })
+
+ it('should not call toggle on disabled elements', () => {
+ fixtureEl.innerHTML = [
+ '',
+ ''
+ ].join('')
+
+ const target = fixtureEl.querySelector('a')
+
+ spyOn(OffCanvas.prototype, 'toggle')
+
+ target.click()
+
+ expect(OffCanvas.prototype.toggle).not.toHaveBeenCalled()
+ })
+ })
+
+ 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)).toBeDefined()
+ })
+
+ 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]
+
+ try {
+ jQueryMock.fn.offcanvas.call(jQueryMock, action)
+ } catch (error) {
+ expect(error.message).toEqual(`No method named "${action}"`)
+ }
+ })
+
+ it('should call offcanvas method', () => {
+ fixtureEl.innerHTML = ''
+
+ const div = fixtureEl.querySelector('div')
+
+ spyOn(OffCanvas.prototype, 'show')
+
+ jQueryMock.fn.offcanvas = OffCanvas.jQueryInterface
+ jQueryMock.elements = [div]
+
+ jQueryMock.fn.offcanvas.call(jQueryMock, 'show')
+ expect(OffCanvas.prototype.show).toHaveBeenCalled()
+ })
+ })
+
+ describe('getInstance', () => {
+ it('should return offcanvas instance', () => {
+ fixtureEl.innerHTML = ''
+
+ const div = fixtureEl.querySelector('div')
+ const offCanvas = new OffCanvas(div)
+
+ expect(OffCanvas.getInstance(div)).toEqual(offCanvas)
+ expect(OffCanvas.getInstance(div)).toBeInstanceOf(OffCanvas)
+ })
+
+ it('should return null when there is no offcanvas instance', () => {
+ fixtureEl.innerHTML = ''
+
+ const div = fixtureEl.querySelector('div')
+
+ expect(OffCanvas.getInstance(div)).toEqual(null)
+ })
+ })
+})
diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js
index a00da485f8d2..f7258ba355b8 100644
--- a/js/tests/unit/scrollspy.spec.js
+++ b/js/tests/unit/scrollspy.spec.js
@@ -54,6 +54,17 @@ describe('ScrollSpy', () => {
})
describe('constructor', () => {
+ it('should take care of element either passed as a CSS selector or DOM element', () => {
+ fixtureEl.innerHTML = ''
+
+ const sSpyEl = fixtureEl.querySelector('#navigation')
+ const sSpyBySelector = new ScrollSpy('#navigation')
+ const sSpyByElement = new ScrollSpy(sSpyEl)
+
+ expect(sSpyBySelector._element).toEqual(sSpyEl)
+ expect(sSpyByElement._element).toEqual(sSpyEl)
+ })
+
it('should generate an id when there is not one', () => {
fixtureEl.innerHTML = [
'',
diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index 463fb79afd40..35d17e16b972 100644
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -20,6 +20,22 @@ describe('Tab', () => {
})
})
+ describe('constructor', () => {
+ it('should take care of element either passed as a CSS selector or DOM element', () => {
+ fixtureEl.innerHTML = [
+ '',
+ '',
' ',
diff --git a/js/tests/unit/toast.spec.js b/js/tests/unit/toast.spec.js
index f8ef6e54b4bd..d298dc993113 100644
--- a/js/tests/unit/toast.spec.js
+++ b/js/tests/unit/toast.spec.js
@@ -27,6 +27,17 @@ describe('Toast', () => {
})
describe('constructor', () => {
+ it('should take care of element either passed as a CSS selector or DOM element', () => {
+ fixtureEl.innerHTML = ''
+
+ const toastEl = fixtureEl.querySelector('.toast')
+ const toastBySelector = new Toast('.toast')
+ const toastByElement = new Toast(toastEl)
+
+ expect(toastBySelector._element).toEqual(toastEl)
+ expect(toastByElement._element).toEqual(toastEl)
+ })
+
it('should allow to config in js', done => {
fixtureEl.innerHTML = [
'
',
diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js
index 84f5abcdade1..7bf6aa3ab837 100644
--- a/js/tests/unit/tooltip.spec.js
+++ b/js/tests/unit/tooltip.spec.js
@@ -63,6 +63,17 @@ describe('Tooltip', () => {
})
describe('constructor', () => {
+ it('should take care of element either passed as a CSS selector or DOM element', () => {
+ fixtureEl.innerHTML = ''
+
+ const tooltipEl = fixtureEl.querySelector('#tooltipEl')
+ const tooltipBySelector = new Tooltip('#tooltipEl')
+ const tooltipByElement = new Tooltip(tooltipEl)
+
+ expect(tooltipBySelector._element).toEqual(tooltipEl)
+ expect(tooltipByElement._element).toEqual(tooltipEl)
+ })
+
it('should not take care of disallowed data attributes', () => {
fixtureEl.innerHTML = ''
diff --git a/js/tests/unit/util/sanitizer.spec.js b/js/tests/unit/util/sanitizer.spec.js
index 869b8c561581..7379d221f478 100644
--- a/js/tests/unit/util/sanitizer.spec.js
+++ b/js/tests/unit/util/sanitizer.spec.js
@@ -66,5 +66,15 @@ describe('Sanitizer', () => {
expect(result).toEqual(template)
expect(DOMParser.prototype.parseFromString).not.toHaveBeenCalled()
})
+
+ it('should allow multiple sanitation passes of the same template', () => {
+ const template = '
'
+
+ const firstResult = sanitizeHtml(template, DefaultAllowlist, null)
+ const secondResult = sanitizeHtml(template, DefaultAllowlist, null)
+
+ expect(firstResult).toContain('src')
+ expect(secondResult).toContain('src')
+ })
})
})
diff --git a/js/tests/unit/util/scrollbar.spec.js b/js/tests/unit/util/scrollbar.spec.js
new file mode 100644
index 000000000000..eb344a0aa64c
--- /dev/null
+++ b/js/tests/unit/util/scrollbar.spec.js
@@ -0,0 +1,182 @@
+import * as Scrollbar from '../../../src/util/scrollbar'
+import { clearFixture, getFixture } from '../../helpers/fixture'
+
+describe('ScrollBar', () => {
+ let fixtureEl
+ const windowCalculations = () => {
+ return {
+ htmlClient: document.documentElement.clientWidth,
+ htmlOffset: document.documentElement.offsetWidth,
+ docClient: document.body.clientWidth,
+ htmlBound: document.documentElement.getBoundingClientRect().width,
+ bodyBound: document.body.getBoundingClientRect().width,
+ window: window.innerWidth,
+ width: Math.abs(window.innerWidth - document.documentElement.clientWidth)
+ }
+ }
+
+ const isScrollBarHidden = () => { // IOS devices, Android devices and Browsers on Mac, hide scrollbar by default and appear it, only while scrolling. So the tests for scrollbar would fail
+ const calc = windowCalculations()
+ return calc.htmlClient === calc.htmlOffset && calc.htmlClient === calc.window
+ }
+
+ beforeAll(() => {
+ fixtureEl = getFixture()
+ // custom fixture to avoid extreme style values
+ fixtureEl.removeAttribute('style')
+ })
+
+ afterAll(() => {
+ fixtureEl.remove()
+ document.documentElement.style.overflowY = 'auto'
+ document.body.style.overflowY = 'auto'
+ })
+
+ afterEach(() => {
+ clearFixture()
+ document.documentElement.removeAttribute('style')
+ })
+
+ beforeEach(() => {
+ document.documentElement.removeAttribute('style')
+ })
+
+ describe('isBodyOverflowing', () => {
+ it('should return true if body is overflowing', () => {
+ document.documentElement.style.overflowY = 'scroll'
+ document.body.style.overflowY = 'scroll'
+ fixtureEl.innerHTML = [
+ ''
+ ].join('')
+ const result = Scrollbar.isBodyOverflowing()
+
+ if (isScrollBarHidden()) {
+ expect(result).toEqual(false)
+ } else {
+ expect(result).toEqual(true)
+ }
+ })
+
+ it('should return false if body is overflowing', () => {
+ document.documentElement.style.overflowY = 'hidden'
+ document.body.style.overflowY = 'hidden'
+ fixtureEl.innerHTML = [
+ ''
+ ].join('')
+ const result = Scrollbar.isBodyOverflowing()
+
+ expect(result).toEqual(false)
+ })
+ })
+
+ describe('getWidth', () => {
+ it('should return an integer greater than zero, if body is overflowing', () => {
+ document.documentElement.style.overflowY = 'scroll'
+ document.body.style.overflowY = 'scroll'
+ fixtureEl.innerHTML = [
+ ''
+ ].join('')
+ const result = Scrollbar.getWidth()
+
+ if (isScrollBarHidden()) {
+ expect(result).toBe(0)
+ } else {
+ expect(result).toBeGreaterThan(1)
+ }
+ })
+
+ it('should return 0 if body is not overflowing', () => {
+ document.documentElement.style.overflowY = 'hidden'
+ document.body.style.overflowY = 'hidden'
+ fixtureEl.innerHTML = [
+ ''
+ ].join('')
+
+ const result = Scrollbar.getWidth()
+
+ expect(result).toEqual(0)
+ })
+ })
+
+ describe('hide - reset', () => {
+ it('should adjust the inline padding of fixed elements which are full-width', done => {
+ fixtureEl.innerHTML = [
+ '
'
+
+ const firstResult = sanitizeHtml(template, DefaultAllowlist, null)
+ const secondResult = sanitizeHtml(template, DefaultAllowlist, null)
+
+ expect(firstResult).toContain('src')
+ expect(secondResult).toContain('src')
+ })
})
})
diff --git a/js/tests/unit/util/scrollbar.spec.js b/js/tests/unit/util/scrollbar.spec.js
new file mode 100644
index 000000000000..eb344a0aa64c
--- /dev/null
+++ b/js/tests/unit/util/scrollbar.spec.js
@@ -0,0 +1,182 @@
+import * as Scrollbar from '../../../src/util/scrollbar'
+import { clearFixture, getFixture } from '../../helpers/fixture'
+
+describe('ScrollBar', () => {
+ let fixtureEl
+ const windowCalculations = () => {
+ return {
+ htmlClient: document.documentElement.clientWidth,
+ htmlOffset: document.documentElement.offsetWidth,
+ docClient: document.body.clientWidth,
+ htmlBound: document.documentElement.getBoundingClientRect().width,
+ bodyBound: document.body.getBoundingClientRect().width,
+ window: window.innerWidth,
+ width: Math.abs(window.innerWidth - document.documentElement.clientWidth)
+ }
+ }
+
+ const isScrollBarHidden = () => { // IOS devices, Android devices and Browsers on Mac, hide scrollbar by default and appear it, only while scrolling. So the tests for scrollbar would fail
+ const calc = windowCalculations()
+ return calc.htmlClient === calc.htmlOffset && calc.htmlClient === calc.window
+ }
+
+ beforeAll(() => {
+ fixtureEl = getFixture()
+ // custom fixture to avoid extreme style values
+ fixtureEl.removeAttribute('style')
+ })
+
+ afterAll(() => {
+ fixtureEl.remove()
+ document.documentElement.style.overflowY = 'auto'
+ document.body.style.overflowY = 'auto'
+ })
+
+ afterEach(() => {
+ clearFixture()
+ document.documentElement.removeAttribute('style')
+ })
+
+ beforeEach(() => {
+ document.documentElement.removeAttribute('style')
+ })
+
+ describe('isBodyOverflowing', () => {
+ it('should return true if body is overflowing', () => {
+ document.documentElement.style.overflowY = 'scroll'
+ document.body.style.overflowY = 'scroll'
+ fixtureEl.innerHTML = [
+ ''
+ ].join('')
+ const result = Scrollbar.isBodyOverflowing()
+
+ if (isScrollBarHidden()) {
+ expect(result).toEqual(false)
+ } else {
+ expect(result).toEqual(true)
+ }
+ })
+
+ it('should return false if body is overflowing', () => {
+ document.documentElement.style.overflowY = 'hidden'
+ document.body.style.overflowY = 'hidden'
+ fixtureEl.innerHTML = [
+ ''
+ ].join('')
+ const result = Scrollbar.isBodyOverflowing()
+
+ expect(result).toEqual(false)
+ })
+ })
+
+ describe('getWidth', () => {
+ it('should return an integer greater than zero, if body is overflowing', () => {
+ document.documentElement.style.overflowY = 'scroll'
+ document.body.style.overflowY = 'scroll'
+ fixtureEl.innerHTML = [
+ ''
+ ].join('')
+ const result = Scrollbar.getWidth()
+
+ if (isScrollBarHidden()) {
+ expect(result).toBe(0)
+ } else {
+ expect(result).toBeGreaterThan(1)
+ }
+ })
+
+ it('should return 0 if body is not overflowing', () => {
+ document.documentElement.style.overflowY = 'hidden'
+ document.body.style.overflowY = 'hidden'
+ fixtureEl.innerHTML = [
+ ''
+ ].join('')
+
+ const result = Scrollbar.getWidth()
+
+ expect(result).toEqual(0)
+ })
+ })
+
+ describe('hide - reset', () => {
+ it('should adjust the inline padding of fixed elements which are full-width', done => {
+ fixtureEl.innerHTML = [
+ '' +
+ '',
+ '',
+ '
'
+ ].join('')
+ document.documentElement.style.overflowY = 'scroll'
+
+ const fixedEl = fixtureEl.querySelector('#fixed1')
+ const fixedEl2 = fixtureEl.querySelector('#fixed2')
+ const originalPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
+ const originalPadding2 = Number.parseInt(window.getComputedStyle(fixedEl2).paddingRight, 10)
+ const expectedPadding = originalPadding + Scrollbar.getWidth()
+ const expectedPadding2 = originalPadding2 + Scrollbar.getWidth()
+
+ Scrollbar.hide()
+
+ let currentPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
+ let currentPadding2 = Number.parseInt(window.getComputedStyle(fixedEl2).paddingRight, 10)
+ expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual('0px', 'original fixed element padding should be stored in data-bs-padding-right')
+ expect(fixedEl2.getAttribute('data-bs-padding-right')).toEqual('5px', 'original fixed element padding should be stored in data-bs-padding-right')
+ expect(currentPadding).toEqual(expectedPadding, 'fixed element padding should be adjusted while opening')
+ expect(currentPadding2).toEqual(expectedPadding2, 'fixed element padding should be adjusted while opening')
+
+ Scrollbar.reset()
+ currentPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
+ currentPadding2 = Number.parseInt(window.getComputedStyle(fixedEl2).paddingRight, 10)
+ expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual(null, 'data-bs-padding-right should be cleared after closing')
+ expect(fixedEl2.getAttribute('data-bs-padding-right')).toEqual(null, 'data-bs-padding-right should be cleared after closing')
+ expect(currentPadding).toEqual(originalPadding, 'fixed element padding should be reset after closing')
+ expect(currentPadding2).toEqual(originalPadding2, 'fixed element padding should be reset after closing')
+ done()
+ })
+
+ it('should adjust the inline margin of sticky elements', done => {
+ fixtureEl.innerHTML = [
+ '' +
+ '',
+ '
'
+ ].join('')
+ document.documentElement.style.overflowY = 'scroll'
+
+ const stickyTopEl = fixtureEl.querySelector('.sticky-top')
+ const originalMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+ const expectedMargin = originalMargin - Scrollbar.getWidth()
+ Scrollbar.hide()
+
+ let currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+ expect(stickyTopEl.getAttribute('data-bs-margin-right')).toEqual('0px', 'original sticky element margin should be stored in data-bs-margin-right')
+ expect(currentMargin).toEqual(expectedMargin, 'sticky element margin should be adjusted while opening')
+
+ Scrollbar.reset()
+ currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+
+ expect(stickyTopEl.getAttribute('data-bs-margin-right')).toEqual(null, 'data-bs-margin-right should be cleared after closing')
+ expect(currentMargin).toEqual(originalMargin, 'sticky element margin should be reset after closing')
+ done()
+ })
+
+ it('should not adjust the inline margin and padding of sticky and fixed elements when element do not have full width', () => {
+ fixtureEl.innerHTML = [
+ ''
+ ].join('')
+
+ const stickyTopEl = fixtureEl.querySelector('.sticky-top')
+ const originalMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+ const originalPadding = Number.parseInt(window.getComputedStyle(stickyTopEl).paddingRight, 10)
+
+ Scrollbar.hide()
+
+ const currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+ const currentPadding = Number.parseInt(window.getComputedStyle(stickyTopEl).paddingRight, 10)
+
+ expect(currentMargin).toEqual(originalMargin, 'sticky element\'s margin should not be adjusted while opening')
+ expect(currentPadding).toEqual(originalPadding, 'sticky element\'s padding should not be adjusted while opening')
+
+ Scrollbar.reset()
+ })
+ })
+})
diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html
index 07f9b972df05..c5e2efafad57 100644
--- a/js/tests/visual/alert.html
+++ b/js/tests/visual/alert.html
@@ -46,6 +46,7 @@