Merge branch 'main' into jo-docs-thanks-pagejo-docs-thanks-page

21 files changed, 2969 insertions, 523 deletions

diff --git a/js/tests/unit/.eslintrc.json b/js/tests/unit/.eslintrc.json
index e7f8d5d2a..adde3105d 100644
--- a/js/tests/unit/.eslintrc.json
+++ b/js/tests/unit/.eslintrc.json
@@ -1,16 +1,8 @@
 {
-  "root": true,
   "extends": [
     "../../../.eslintrc.json"
   ],
-  "overrides": [
-    {
-      "files": [
-        "**/*.spec.js"
-      ],
-      "env": {
-        "jasmine": true
-      }
-    }
-  ]
+  "env": {
+    "jasmine": true
+  }
 }
diff --git a/js/tests/unit/alert.spec.js b/js/tests/unit/alert.spec.js
index a1322f1c7..194da420e 100644
--- a/js/tests/unit/alert.spec.js
+++ b/js/tests/unit/alert.spec.js
@@ -15,10 +15,27 @@ describe('Alert', () => {
     clearFixture()
   })
 
+  it('should take care of element either passed as a CSS selector or DOM element', () => {
+    fixtureEl.innerHTML = '<div class="alert"></div>'
+
+    const alertEl = fixtureEl.querySelector('.alert')
+    const alertBySelector = new Alert('.alert')
+    const alertByElement = new Alert(alertEl)
+
+    expect(alertBySelector._element).toEqual(alertEl)
+    expect(alertByElement._element).toEqual(alertEl)
+  })
+
   it('should return version', () => {
     expect(typeof Alert.VERSION).toEqual('string')
   })
 
+  describe('DATA_KEY', () => {
+    it('should return plugin data key', () => {
+      expect(Alert.DATA_KEY).toEqual('bs.alert')
+    })
+  })
+
   describe('data-api', () => {
     it('should close an alert without instantiating it manually', () => {
       fixtureEl.innerHTML = [
diff --git a/js/tests/unit/button.spec.js b/js/tests/unit/button.spec.js
index 51aa73774..e7d92cb6d 100644
--- a/js/tests/unit/button.spec.js
+++ b/js/tests/unit/button.spec.js
@@ -18,12 +18,28 @@ describe('Button', () => {
     clearFixture()
   })
 
+  it('should take care of element either passed as a CSS selector or DOM element', () => {
+    fixtureEl.innerHTML = '<button data-bs-toggle="button">Placeholder</button>'
+    const buttonEl = fixtureEl.querySelector('[data-bs-toggle="button"]')
+    const buttonBySelector = new Button('[data-bs-toggle="button"]')
+    const buttonByElement = new Button(buttonEl)
+
+    expect(buttonBySelector._element).toEqual(buttonEl)
+    expect(buttonByElement._element).toEqual(buttonEl)
+  })
+
   describe('VERSION', () => {
     it('should return plugin version', () => {
       expect(Button.VERSION).toEqual(jasmine.any(String))
     })
   })
 
+  describe('DATA_KEY', () => {
+    it('should return plugin data key', () => {
+      expect(Button.DATA_KEY).toEqual('bs.button')
+    })
+  })
+
   describe('data-api', () => {
     it('should toggle active class on click', () => {
       fixtureEl.innerHTML = [
diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js
index 07b8fc311..75c3bbd6d 100644
--- a/js/tests/unit/carousel.spec.js
+++ b/js/tests/unit/carousel.spec.js
@@ -2,7 +2,8 @@ import Carousel from '../../src/carousel'
 import EventHandler from '../../src/dom/event-handler'
 
 /** Test helpers */
-import { getFixture, clearFixture, createEvent, jQueryMock } from '../helpers/fixture'
+import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture'
+import * as util from '../../src/util'
 
 describe('Carousel', () => {
   const { Simulator, PointerEvent } = window
@@ -45,7 +46,24 @@ describe('Carousel', () => {
     })
   })
 
+  describe('DATA_KEY', () => {
+    it('should return plugin data key', () => {
+      expect(Carousel.DATA_KEY).toEqual('bs.carousel')
+    })
+  })
+
   describe('constructor', () => {
+    it('should take care of element either passed as a CSS selector or DOM element', () => {
+      fixtureEl.innerHTML = '<div id="myCarousel" class="carousel slide"></div>'
+
+      const carouselEl = fixtureEl.querySelector('#myCarousel')
+      const carouselBySelector = new Carousel('#myCarousel')
+      const carouselByElement = new Carousel(carouselEl)
+
+      expect(carouselBySelector._element).toEqual(carouselEl)
+      expect(carouselByElement._element).toEqual(carouselEl)
+    })
+
     it('should go to next item if right arrow key is pressed', done => {
       fixtureEl.innerHTML = [
         '<div id="myCarousel" class="carousel slide">',
@@ -158,8 +176,7 @@ describe('Carousel', () => {
       })
 
       const spyKeydown = spyOn(carousel, '_keydown').and.callThrough()
-      const spyPrev = spyOn(carousel, 'prev')
-      const spyNext = spyOn(carousel, 'next')
+      const spySlide = spyOn(carousel, '_slide')
 
       const keydown = createEvent('keydown', { bubbles: true, cancelable: true })
       keydown.key = 'ArrowRight'
@@ -172,12 +189,10 @@ describe('Carousel', () => {
       input.dispatchEvent(keydown)
 
       expect(spyKeydown).toHaveBeenCalled()
-      expect(spyPrev).not.toHaveBeenCalled()
-      expect(spyNext).not.toHaveBeenCalled()
+      expect(spySlide).not.toHaveBeenCalled()
 
       spyKeydown.calls.reset()
-      spyPrev.calls.reset()
-      spyNext.calls.reset()
+      spySlide.calls.reset()
 
       Object.defineProperty(keydown, 'target', {
         value: textarea
@@ -185,8 +200,7 @@ describe('Carousel', () => {
       textarea.dispatchEvent(keydown)
 
       expect(spyKeydown).toHaveBeenCalled()
-      expect(spyPrev).not.toHaveBeenCalled()
-      expect(spyNext).not.toHaveBeenCalled()
+      expect(spySlide).not.toHaveBeenCalled()
     })
 
     it('should wrap around from end to start when wrap option is true', done => {
@@ -295,13 +309,15 @@ describe('Carousel', () => {
 
       spyOn(Carousel.prototype, '_addTouchEventListeners')
 
+      // Headless browser does not support touch events, so need to fake it
+      // to test that touch events are add properly.
       document.documentElement.ontouchstart = () => {}
       const carousel = new Carousel(carouselEl)
 
       expect(carousel._addTouchEventListeners).toHaveBeenCalled()
     })
 
-    it('should allow swiperight and call prev with pointer events', done => {
+    it('should allow swiperight and call _slide (prev) with pointer events', done => {
       if (!supportPointerEvent) {
         expect().nothing()
         done()
@@ -329,11 +345,12 @@ describe('Carousel', () => {
       const item = fixtureEl.querySelector('#item')
       const carousel = new Carousel(carouselEl)
 
-      spyOn(carousel, 'prev').and.callThrough()
+      spyOn(carousel, '_slide').and.callThrough()
 
-      carouselEl.addEventListener('slid.bs.carousel', () => {
+      carouselEl.addEventListener('slid.bs.carousel', event => {
         expect(item.classList.contains('active')).toEqual(true)
-        expect(carousel.prev).toHaveBeenCalled()
+        expect(carousel._slide).toHaveBeenCalledWith('right')
+        expect(event.direction).toEqual('right')
         document.head.removeChild(stylesCarousel)
         delete document.documentElement.ontouchstart
         done()
@@ -373,11 +390,12 @@ describe('Carousel', () => {
       const item = fixtureEl.querySelector('#item')
       const carousel = new Carousel(carouselEl)
 
-      spyOn(carousel, 'next').and.callThrough()
+      spyOn(carousel, '_slide').and.callThrough()
 
-      carouselEl.addEventListener('slid.bs.carousel', () => {
+      carouselEl.addEventListener('slid.bs.carousel', event => {
         expect(item.classList.contains('active')).toEqual(false)
-        expect(carousel.next).toHaveBeenCalled()
+        expect(carousel._slide).toHaveBeenCalledWith('left')
+        expect(event.direction).toEqual('left')
         document.head.removeChild(stylesCarousel)
         delete document.documentElement.ontouchstart
         done()
@@ -390,7 +408,7 @@ describe('Carousel', () => {
       })
     })
 
-    it('should allow swiperight and call prev with touch events', done => {
+    it('should allow swiperight and call _slide (prev) with touch events', done => {
       Simulator.setType('touch')
       clearPointerEvents()
       document.documentElement.ontouchstart = () => {}
@@ -412,11 +430,12 @@ describe('Carousel', () => {
       const item = fixtureEl.querySelector('#item')
       const carousel = new Carousel(carouselEl)
 
-      spyOn(carousel, 'prev').and.callThrough()
+      spyOn(carousel, '_slide').and.callThrough()
 
-      carouselEl.addEventListener('slid.bs.carousel', () => {
+      carouselEl.addEventListener('slid.bs.carousel', event => {
         expect(item.classList.contains('active')).toEqual(true)
-        expect(carousel.prev).toHaveBeenCalled()
+        expect(carousel._slide).toHaveBeenCalledWith('right')
+        expect(event.direction).toEqual('right')
         delete document.documentElement.ontouchstart
         restorePointerEvents()
         done()
@@ -428,7 +447,7 @@ describe('Carousel', () => {
       })
     })
 
-    it('should allow swipeleft and call next with touch events', done => {
+    it('should allow swipeleft and call _slide (next) with touch events', done => {
       Simulator.setType('touch')
       clearPointerEvents()
       document.documentElement.ontouchstart = () => {}
@@ -450,11 +469,12 @@ describe('Carousel', () => {
       const item = fixtureEl.querySelector('#item')
       const carousel = new Carousel(carouselEl)
 
-      spyOn(carousel, 'next').and.callThrough()
+      spyOn(carousel, '_slide').and.callThrough()
 
-      carouselEl.addEventListener('slid.bs.carousel', () => {
+      carouselEl.addEventListener('slid.bs.carousel', event => {
         expect(item.classList.contains('active')).toEqual(false)
-        expect(carousel.next).toHaveBeenCalled()
+        expect(carousel._slide).toHaveBeenCalledWith('left')
+        expect(event.direction).toEqual('left')
         delete document.documentElement.ontouchstart
         restorePointerEvents()
         done()
@@ -659,11 +679,11 @@ describe('Carousel', () => {
     it('should update indicators if present', done => {
       fixtureEl.innerHTML = [
         '<div id="myCarousel" class="carousel slide">',
-        '  <ol class="carousel-indicators">',
-        '    <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>',
-        '    <li id="secondIndicator" data-bs-target="#myCarousel" data-bs-slide-to="1"></li>',
-        '    <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>',
-        '  </ol>',
+        '  <div class="carousel-indicators">',
+        '    <button type="button" id="firstIndicator" data-bs-target="myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>',
+        '    <button type="button" id="secondIndicator" data-bs-target="myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>',
+        '    <button type="button" data-bs-target="myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>',
+        '  </div>',
         '  <div class="carousel-inner">',
         '    <div class="carousel-item active">item 1</div>',
         '    <div class="carousel-item" data-bs-interval="7">item 2</div>',
@@ -673,11 +693,15 @@ describe('Carousel', () => {
       ].join('')
 
       const carouselEl = fixtureEl.querySelector('#myCarousel')
+      const firstIndicator = fixtureEl.querySelector('#firstIndicator')
       const secondIndicator = fixtureEl.querySelector('#secondIndicator')
       const carousel = new Carousel(carouselEl)
 
       carouselEl.addEventListener('slid.bs.carousel', () => {
+        expect(firstIndicator.classList.contains('active')).toEqual(false)
+        expect(firstIndicator.hasAttribute('aria-current')).toEqual(false)
         expect(secondIndicator.classList.contains('active')).toEqual(true)
+        expect(secondIndicator.getAttribute('aria-current')).toEqual('true')
         done()
       })
 
@@ -905,7 +929,7 @@ describe('Carousel', () => {
   })
 
   describe('to', () => {
-    it('should go directement to the provided index', done => {
+    it('should go directly to the provided index', done => {
       fixtureEl.innerHTML = [
         '<div id="myCarousel" class="carousel slide">',
         '  <div class="carousel-inner">',
@@ -1038,6 +1062,77 @@ describe('Carousel', () => {
       })
     })
   })
+  describe('rtl function', () => {
+    it('"_directionToOrder" and "_orderToDirection" must return the right results', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const carouselEl = fixtureEl.querySelector('div')
+      const carousel = new Carousel(carouselEl, {})
+
+      expect(carousel._directionToOrder('left')).toEqual('next')
+      expect(carousel._directionToOrder('prev')).toEqual('prev')
+      expect(carousel._directionToOrder('right')).toEqual('prev')
+      expect(carousel._directionToOrder('next')).toEqual('next')
+
+      expect(carousel._orderToDirection('next')).toEqual('left')
+      expect(carousel._orderToDirection('prev')).toEqual('right')
+    })
+
+    it('"_directionToOrder" and "_orderToDirection" must return the right results when rtl=true', () => {
+      document.documentElement.dir = 'rtl'
+      fixtureEl.innerHTML = '<div></div>'
+
+      const carouselEl = fixtureEl.querySelector('div')
+      const carousel = new Carousel(carouselEl, {})
+      expect(util.isRTL()).toEqual(true, 'rtl has to be true')
+
+      expect(carousel._directionToOrder('left')).toEqual('prev')
+      expect(carousel._directionToOrder('prev')).toEqual('prev')
+      expect(carousel._directionToOrder('right')).toEqual('next')
+      expect(carousel._directionToOrder('next')).toEqual('next')
+
+      expect(carousel._orderToDirection('next')).toEqual('right')
+      expect(carousel._orderToDirection('prev')).toEqual('left')
+      document.documentElement.dir = 'ltl'
+    })
+
+    it('"_slide" has to call _directionToOrder and "_orderToDirection"', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const carouselEl = fixtureEl.querySelector('div')
+      const carousel = new Carousel(carouselEl, {})
+      const spy = spyOn(carousel, '_directionToOrder').and.callThrough()
+      const spy2 = spyOn(carousel, '_orderToDirection').and.callThrough()
+
+      carousel._slide('left')
+      expect(spy).toHaveBeenCalledWith('left')
+      expect(spy2).toHaveBeenCalledWith('next')
+
+      carousel._slide('right')
+      expect(spy).toHaveBeenCalledWith('right')
+      expect(spy2).toHaveBeenCalledWith('prev')
+    })
+
+    it('"_slide" has to call "_directionToOrder" and "_orderToDirection" when rtl=true', () => {
+      document.documentElement.dir = 'rtl'
+      fixtureEl.innerHTML = '<div></div>'
+
+      const carouselEl = fixtureEl.querySelector('div')
+      const carousel = new Carousel(carouselEl, {})
+      const spy = spyOn(carousel, '_directionToOrder').and.callThrough()
+      const spy2 = spyOn(carousel, '_orderToDirection').and.callThrough()
+
+      carousel._slide('left')
+      expect(spy).toHaveBeenCalledWith('left')
+      expect(spy2).toHaveBeenCalledWith('prev')
+
+      carousel._slide('right')
+      expect(spy).toHaveBeenCalledWith('right')
+      expect(spy2).toHaveBeenCalledWith('next')
+
+      document.documentElement.dir = 'ltl'
+    })
+  })
 
   describe('dispose', () => {
     it('should destroy a carousel', () => {
@@ -1052,13 +1147,38 @@ describe('Carousel', () => {
       ].join('')
 
       const carouselEl = fixtureEl.querySelector('#myCarousel')
+      const addEventSpy = spyOn(carouselEl, 'addEventListener').and.callThrough()
+      const removeEventSpy = spyOn(carouselEl, 'removeEventListener').and.callThrough()
+
+      // Headless browser does not support touch events, so need to fake it
+      // to test that touch events are add/removed properly.
+      document.documentElement.ontouchstart = () => {}
+
       const carousel = new Carousel(carouselEl)
 
-      spyOn(EventHandler, 'off').and.callThrough()
+      const expectedArgs = [
+        ['keydown', jasmine.any(Function), jasmine.any(Boolean)],
+        ['mouseover', jasmine.any(Function), jasmine.any(Boolean)],
+        ['mouseout', jasmine.any(Function), jasmine.any(Boolean)],
+        ...(carousel._pointerEvent ?
+          [
+            ['pointerdown', jasmine.any(Function), jasmine.any(Boolean)],
+            ['pointerup', jasmine.any(Function), jasmine.any(Boolean)]
+          ] :
+          [
+            ['touchstart', jasmine.any(Function), jasmine.any(Boolean)],
+            ['touchmove', jasmine.any(Function), jasmine.any(Boolean)],
+            ['touchend', jasmine.any(Function), jasmine.any(Boolean)]
+          ])
+      ]
+
+      expect(addEventSpy.calls.allArgs()).toEqual(expectedArgs)
 
       carousel.dispose()
 
-      expect(EventHandler.off).toHaveBeenCalled()
+      expect(removeEventSpy.calls.allArgs()).toEqual(expectedArgs)
+
+      delete document.documentElement.ontouchstart
     })
   })
 
@@ -1136,11 +1256,9 @@ describe('Carousel', () => {
       jQueryMock.fn.carousel = Carousel.jQueryInterface
       jQueryMock.elements = [div]
 
-      try {
+      expect(() => {
         jQueryMock.fn.carousel.call(jQueryMock, action)
-      } catch (error) {
-        expect(error.message).toEqual(`No method named "${action}"`)
-      }
+      }).toThrowError(TypeError, `No method named "${action}"`)
     })
   })
 
@@ -1156,7 +1274,31 @@ describe('Carousel', () => {
       expect(Carousel.getInstance(carouselEl)).toBeDefined()
     })
 
-    it('should create carousel and go to the next slide on click', done => {
+    it('should create carousel and go to the next slide on click (with real button controls)', done => {
+      fixtureEl.innerHTML = [
+        '<div id="myCarousel" class="carousel slide">',
+        '  <div class="carousel-inner">',
+        '    <div class="carousel-item active">item 1</div>',
+        '    <div id="item2" class="carousel-item">item 2</div>',
+        '    <div class="carousel-item">item 3</div>',
+        '  </div>',
+        '  <button class="carousel-control-prev" data-bs-target="#myCarousel" type="button" data-bs-slide="prev"></button>',
+        '  <button id="next" class="carousel-control-next" data-bs-target="#myCarousel" type="button" data-bs-slide="next"></div>',
+        '</div>'
+      ].join('')
+
+      const next = fixtureEl.querySelector('#next')
+      const item2 = fixtureEl.querySelector('#item2')
+
+      next.click()
+
+      setTimeout(() => {
+        expect(item2.classList.contains('active')).toEqual(true)
+        done()
+      }, 10)
+    })
+
+    it('should create carousel and go to the next slide on click (using links as controls)', done => {
       fixtureEl.innerHTML = [
         '<div id="myCarousel" class="carousel slide">',
         '  <div class="carousel-inner">',
@@ -1164,8 +1306,8 @@ describe('Carousel', () => {
         '    <div id="item2" class="carousel-item">item 2</div>',
         '    <div class="carousel-item">item 3</div>',
         '  </div>',
-        '  <div class="carousel-control-prev" data-bs-target="#myCarousel" role="button" data-bs-slide="prev"></div>',
-        '  <div id="next" class="carousel-control-next" data-bs-target="#myCarousel" role="button" data-bs-slide="next"></div>',
+        '  <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev"></button>',
+        '  <a id="next" class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next"></div>',
         '</div>'
       ].join('')
 
@@ -1211,8 +1353,8 @@ describe('Carousel', () => {
         '    <div class="carousel-item">item 2</div>',
         '    <div class="carousel-item">item 3</div>',
         '  </div>',
-        '  <div class="carousel-control-prev" data-bs-target="#myCarousel" role="button" data-bs-slide="prev"></div>',
-        '  <div id="next" class="carousel-control-next" role="button" data-bs-slide="next"></div>',
+        '  <button class="carousel-control-prev" data-bs-target="#myCarousel" type="button" data-bs-slide="prev"></button>',
+        '  <button id="next" class="carousel-control-next" type="button" data-bs-slide="next"></button>',
         '</div>'
       ].join('')
 
@@ -1231,8 +1373,8 @@ describe('Carousel', () => {
         '    <div id="item2" class="carousel-item">item 2</div>',
         '    <div class="carousel-item">item 3</div>',
         '  </div>',
-        '  <div class="carousel-control-prev" data-bs-target="#myCarousel" role="button" data-bs-slide="prev"></div>',
-        '  <div id="next" class="carousel-control-next" data-bs-target="#myCarousel" role="button" data-bs-slide="next"></div>',
+        '  <button class="carousel-control-prev" data-bs-target="#myCarousel" type="button" data-bs-slide="prev"></div>',
+        '  <button id="next" class="carousel-control-next" data-bs-target="#myCarousel" type="button" data-bs-slide="next"></div>',
         '</div>'
       ].join('')
 
diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js
index d53ab5964..bc7c15771 100644
--- a/js/tests/unit/collapse.spec.js
+++ b/js/tests/unit/collapse.spec.js
@@ -27,7 +27,24 @@ describe('Collapse', () => {
     })
   })
 
+  describe('DATA_KEY', () => {
+    it('should return plugin data key', () => {
+      expect(Collapse.DATA_KEY).toEqual('bs.collapse')
+    })
+  })
+
   describe('constructor', () => {
+    it('should take care of element either passed as a CSS selector or DOM element', () => {
+      fixtureEl.innerHTML = '<div class="my-collapse"></div>'
+
+      const collapseEl = fixtureEl.querySelector('div.my-collapse')
+      const collapseBySelector = new Collapse('div.my-collapse')
+      const collapseByElement = new Collapse(collapseEl)
+
+      expect(collapseBySelector._element).toEqual(collapseEl)
+      expect(collapseByElement._element).toEqual(collapseEl)
+    })
+
     it('should allow jquery object in parent config', () => {
       fixtureEl.innerHTML = [
         '<div class="my-collapse">',
@@ -374,6 +391,29 @@ describe('Collapse', () => {
   })
 
   describe('data-api', () => {
+    it('should prevent url change if click on nested elements', done => {
+      fixtureEl.innerHTML = [
+        '<a role="button" data-bs-toggle="collapse" class="collapsed" href="#collapse">',
+        '  <span id="nested"></span>',
+        '</a>',
+        '<div id="collapse" class="collapse"></div>'
+      ].join('')
+
+      const triggerEl = fixtureEl.querySelector('a')
+      const nestedTriggerEl = fixtureEl.querySelector('#nested')
+
+      spyOn(Event.prototype, 'preventDefault').and.callThrough()
+
+      triggerEl.addEventListener('click', event => {
+        expect(event.target.isEqualNode(nestedTriggerEl)).toEqual(true)
+        expect(event.delegateTarget.isEqualNode(triggerEl)).toEqual(true)
+        expect(Event.prototype.preventDefault).toHaveBeenCalled()
+        done()
+      })
+
+      nestedTriggerEl.click()
+    })
+
     it('should show multiple collapsed elements', done => {
       fixtureEl.innerHTML = [
         '<a role="button" data-bs-toggle="collapse" class="collapsed" href=".multi"></a>',
@@ -796,11 +836,9 @@ describe('Collapse', () => {
       jQueryMock.fn.collapse = Collapse.jQueryInterface
       jQueryMock.elements = [div]
 
-      try {
+      expect(() => {
         jQueryMock.fn.collapse.call(jQueryMock, action)
-      } catch (error) {
-        expect(error.message).toEqual(`No method named "${action}"`)
-      }
+      }).toThrowError(TypeError, `No method named "${action}"`)
     })
   })
 
diff --git a/js/tests/unit/dom/data.spec.js b/js/tests/unit/dom/data.spec.js
index c80f32db0..a00d3b734 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></div>'
+    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 = '<div></div>'
-
-      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 = '<div></div>'
+    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 = '<div></div>'
-
-      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 = '<div></div>'
-
-      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 = '<div></div>'
+    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 = '<div></div>'
+  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 = '<div></div>'
+  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 = '<div></div>'
+    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/dom/event-handler.spec.js b/js/tests/unit/dom/event-handler.spec.js
index e596a49b5..4dc4ffc35 100644
--- a/js/tests/unit/dom/event-handler.spec.js
+++ b/js/tests/unit/dom/event-handler.spec.js
@@ -77,10 +77,78 @@ describe('EventHandler', () => {
 
       div.click()
     })
+
+    it('should handle mouseenter/mouseleave like the native counterpart', done => {
+      fixtureEl.innerHTML = [
+        '<div class="outer">',
+        '<div class="inner">',
+        '<div class="nested">',
+        '<div class="deep"></div>',
+        '</div>',
+        '</div>',
+        '<div class="sibling"></div>',
+        '</div>'
+      ]
+
+      const outer = fixtureEl.querySelector('.outer')
+      const inner = fixtureEl.querySelector('.inner')
+      const nested = fixtureEl.querySelector('.nested')
+      const deep = fixtureEl.querySelector('.deep')
+      const sibling = fixtureEl.querySelector('.sibling')
+
+      const enterSpy = jasmine.createSpy('mouseenter')
+      const leaveSpy = jasmine.createSpy('mouseleave')
+      const delegateEnterSpy = jasmine.createSpy('mouseenter')
+      const delegateLeaveSpy = jasmine.createSpy('mouseleave')
+
+      EventHandler.on(inner, 'mouseenter', enterSpy)
+      EventHandler.on(inner, 'mouseleave', leaveSpy)
+      EventHandler.on(outer, 'mouseenter', '.inner', delegateEnterSpy)
+      EventHandler.on(outer, 'mouseleave', '.inner', delegateLeaveSpy)
+
+      EventHandler.on(sibling, 'mouseenter', () => {
+        expect(enterSpy.calls.count()).toBe(2)
+        expect(leaveSpy.calls.count()).toBe(2)
+        expect(delegateEnterSpy.calls.count()).toBe(2)
+        expect(delegateLeaveSpy.calls.count()).toBe(2)
+        done()
+      })
+
+      const moveMouse = (from, to) => {
+        from.dispatchEvent(new MouseEvent('mouseout', {
+          bubbles: true,
+          relatedTarget: to
+        }))
+
+        to.dispatchEvent(new MouseEvent('mouseover', {
+          bubbles: true,
+          relatedTarget: from
+        }))
+      }
+
+      // from outer to deep and back to outer (nested)
+      moveMouse(outer, inner)
+      moveMouse(inner, nested)
+      moveMouse(nested, deep)
+      moveMouse(deep, nested)
+      moveMouse(nested, inner)
+      moveMouse(inner, outer)
+
+      setTimeout(() => {
+        expect(enterSpy.calls.count()).toBe(1)
+        expect(leaveSpy.calls.count()).toBe(1)
+        expect(delegateEnterSpy.calls.count()).toBe(1)
+        expect(delegateLeaveSpy.calls.count()).toBe(1)
+
+        // from outer to inner to sibling (adjacent)
+        moveMouse(outer, inner)
+        moveMouse(inner, sibling)
+      }, 20)
+    })
   })
 
   describe('one', () => {
-    it('should call listener just one', done => {
+    it('should call listener just once', done => {
       fixtureEl.innerHTML = '<div></div>'
 
       let called = 0
@@ -101,6 +169,28 @@ describe('EventHandler', () => {
         done()
       }, 20)
     })
+
+    it('should call delegated listener just once', done => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      let called = 0
+      const div = fixtureEl.querySelector('div')
+      const obj = {
+        oneListener() {
+          called++
+        }
+      }
+
+      EventHandler.one(fixtureEl, 'bootstrap', 'div', obj.oneListener)
+
+      EventHandler.trigger(div, 'bootstrap')
+      EventHandler.trigger(div, 'bootstrap')
+
+      setTimeout(() => {
+        expect(called).toEqual(1)
+        done()
+      }, 20)
+    })
   })
 
   describe('off', () => {
diff --git a/js/tests/unit/dom/selector-engine.spec.js b/js/tests/unit/dom/selector-engine.spec.js
index 781d0ce1b..d108a2efb 100644
--- a/js/tests/unit/dom/selector-engine.spec.js
+++ b/js/tests/unit/dom/selector-engine.spec.js
@@ -14,14 +14,6 @@ describe('SelectorEngine', () => {
     clearFixture()
   })
 
-  describe('matches', () => {
-    it('should return matched elements', () => {
-      fixtureEl.innerHTML = '<div></div>'
-
-      expect(SelectorEngine.matches(fixtureEl, 'div')).toEqual(true)
-    })
-  })
-
   describe('find', () => {
     it('should find elements', () => {
       fixtureEl.innerHTML = '<div></div>'
diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js
index f6a5feb1b..b0f225140 100644
--- a/js/tests/unit/dropdown.spec.js
+++ b/js/tests/unit/dropdown.spec.js
@@ -1,7 +1,6 @@
-import Popper from 'popper.js'
-
 import Dropdown from '../../src/dropdown'
 import EventHandler from '../../src/dom/event-handler'
+import { noop } from '../../src/util'
 
 /** Test helpers */
 import { getFixture, clearFixture, createEvent, jQueryMock } from '../helpers/fixture'
@@ -35,30 +34,52 @@ describe('Dropdown', () => {
     })
   })
 
+  describe('DATA_KEY', () => {
+    it('should return plugin data key', () => {
+      expect(Dropdown.DATA_KEY).toEqual('bs.dropdown')
+    })
+  })
+
   describe('constructor', () => {
-    it('should create offset modifier correctly when offset option is a function', () => {
+    it('should take care of element either passed as a CSS selector or DOM element', () => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
         '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
-        '    <a class="dropdown-item" href="#">Secondary link</a>',
+        '    <a class="dropdown-item" href="#">Link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const getOffset = offsets => offsets
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdown = new Dropdown(btnDropdown, {
-        offset: getOffset
-      })
+      const dropdownBySelector = new Dropdown('[data-bs-toggle="dropdown"]')
+      const dropdownByElement = new Dropdown(btnDropdown)
 
-      const offset = dropdown._getOffset()
+      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 = [
+        '<div class="dropdown">',
+        '  <button class="btn">Dropdown</button>',
+        '  <div class="dropdown-menu">',
+        '    <a class="dropdown-item" href="#">Secondary link</a>',
+        '  </div>',
+        '</div>'
+      ].join('')
 
-      expect(offset.offset).toBeUndefined()
-      expect(typeof offset.fn).toEqual('function')
+      const btnDropdown = fixtureEl.querySelector('.btn')
+      const dropdown = new Dropdown(btnDropdown)
+
+      spyOn(dropdown, 'toggle')
+
+      btnDropdown.click()
+
+      expect(dropdown.toggle).toHaveBeenCalled()
     })
 
-    it('should create offset modifier correctly when offset option is not a function', () => {
+    it('should create offset modifier correctly when offset option is a function', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
         '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@@ -68,36 +89,42 @@ describe('Dropdown', () => {
         '</div>'
       ].join('')
 
-      const myOffset = 7
+      const getOffset = jasmine.createSpy('getOffset').and.returnValue([10, 20])
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdown = new Dropdown(btnDropdown, {
-        offset: myOffset
+        offset: getOffset,
+        popperConfig: {
+          onFirstUpdate: state => {
+            expect(getOffset).toHaveBeenCalledWith({
+              popper: state.rects.popper,
+              reference: state.rects.reference,
+              placement: state.placement
+            }, btnDropdown)
+            done()
+          }
+        }
       })
-
       const offset = dropdown._getOffset()
 
-      expect(offset.offset).toEqual(myOffset)
-      expect(offset.fn).toBeUndefined()
+      expect(typeof offset).toEqual('function')
+
+      dropdown.show()
     })
 
-    it('should add a listener on trigger which do not have data-bs-toggle="dropdown"', () => {
+    it('should create offset modifier correctly when offset option is a string into data attribute', () => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-offset="10,20">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('.btn')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdown = new Dropdown(btnDropdown)
 
-      spyOn(dropdown, 'toggle')
-
-      btnDropdown.click()
-
-      expect(dropdown.toggle).toHaveBeenCalled()
+      expect(dropdown._getOffset()).toEqual([10, 20])
     })
 
     it('should allow to pass config to Popper with `popperConfig`', () => {
@@ -121,6 +148,28 @@ describe('Dropdown', () => {
 
       expect(popperConfig.placement).toEqual('left')
     })
+
+    it('should allow to pass config to Popper with `popperConfig` as a function', () => {
+      fixtureEl.innerHTML = [
+        '<div class="dropdown">',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-placement="right" >Dropdown</button>',
+        '  <div class="dropdown-menu">',
+        '    <a class="dropdown-item" href="#">Secondary link</a>',
+        '  </div>',
+        '</div>'
+      ].join('')
+
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+      const getPopperConfig = jasmine.createSpy('getPopperConfig').and.returnValue({ placement: 'left' })
+      const dropdown = new Dropdown(btnDropdown, {
+        popperConfig: getPopperConfig
+      })
+
+      const popperConfig = dropdown._getPopperConfig()
+
+      expect(getPopperConfig).toHaveBeenCalled()
+      expect(popperConfig.placement).toEqual('left')
+    })
   })
 
   describe('toggle', () => {
@@ -135,10 +184,9 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
         expect(btnDropdown.classList.contains('show')).toEqual(true)
         expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
         done()
@@ -168,18 +216,17 @@ describe('Dropdown', () => {
       const firstDropdownEl = fixtureEl.querySelector('.first')
       const secondDropdownEl = fixtureEl.querySelector('.second')
       const dropdown1 = new Dropdown(btnDropdown1)
-      const dropdown2 = new Dropdown(btnDropdown2)
 
       firstDropdownEl.addEventListener('shown.bs.dropdown', () => {
         expect(btnDropdown1.classList.contains('show')).toEqual(true)
         spyOn(dropdown1._popper, 'destroy')
-        dropdown2.toggle()
+        btnDropdown2.click()
       })
 
-      secondDropdownEl.addEventListener('shown.bs.dropdown', () => {
+      secondDropdownEl.addEventListener('shown.bs.dropdown', () => setTimeout(() => {
         expect(dropdown1._popper.destroy).toHaveBeenCalled()
         done()
-      })
+      }))
 
       dropdown1.toggle()
     })
@@ -196,25 +243,24 @@ describe('Dropdown', () => {
 
       const defaultValueOnTouchStart = document.documentElement.ontouchstart
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
       document.documentElement.ontouchstart = () => {}
       spyOn(EventHandler, 'on')
       spyOn(EventHandler, 'off')
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
         expect(btnDropdown.classList.contains('show')).toEqual(true)
         expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
-        expect(EventHandler.on).toHaveBeenCalled()
+        expect(EventHandler.on).toHaveBeenCalledWith(jasmine.any(Object), 'mouseover', noop)
 
         dropdown.toggle()
       })
 
-      dropdownEl.addEventListener('hidden.bs.dropdown', () => {
+      btnDropdown.addEventListener('hidden.bs.dropdown', () => {
         expect(btnDropdown.classList.contains('show')).toEqual(false)
         expect(btnDropdown.getAttribute('aria-expanded')).toEqual('false')
-        expect(EventHandler.off).toHaveBeenCalled()
+        expect(EventHandler.off).toHaveBeenCalledWith(jasmine.any(Object), 'mouseover', noop)
 
         document.documentElement.ontouchstart = defaultValueOnTouchStart
         done()
@@ -234,10 +280,9 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
         expect(btnDropdown.classList.contains('show')).toEqual(true)
         expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
         done()
@@ -349,12 +394,11 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown, {
         reference: 'parent'
       })
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
         expect(btnDropdown.classList.contains('show')).toEqual(true)
         expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
         done()
@@ -374,12 +418,11 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown, {
         reference: fixtureEl
       })
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
         expect(btnDropdown.classList.contains('show')).toEqual(true)
         expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
         done()
@@ -399,12 +442,11 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown, {
         reference: { 0: fixtureEl, jquery: 'jQuery' }
       })
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
         expect(btnDropdown.classList.contains('show')).toEqual(true)
         expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
         done()
@@ -413,6 +455,58 @@ describe('Dropdown', () => {
       dropdown.toggle()
     })
 
+    it('should toggle a dropdown with a valid virtual element reference', done => {
+      fixtureEl.innerHTML = [
+        '<div class="dropdown">',
+        '  <button class="btn dropdown-toggle visually-hidden" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+        '  <div class="dropdown-menu">',
+        '    <a class="dropdown-item" href="#">Secondary link</a>',
+        '  </div>',
+        '</div>'
+      ].join('')
+
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+      const virtualElement = {
+        getBoundingClientRect() {
+          return {
+            width: 0,
+            height: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0
+          }
+        }
+      }
+
+      expect(() => new Dropdown(btnDropdown, {
+        reference: {}
+      })).toThrowError(TypeError, 'DROPDOWN: Option "reference" provided type "object" without a required "getBoundingClientRect" method.')
+
+      expect(() => new Dropdown(btnDropdown, {
+        reference: {
+          getBoundingClientRect: 'not-a-function'
+        }
+      })).toThrowError(TypeError, 'DROPDOWN: Option "reference" provided type "object" without a required "getBoundingClientRect" method.')
+
+      // use onFirstUpdate as Poppers internal update is executed async
+      const dropdown = new Dropdown(btnDropdown, {
+        reference: virtualElement,
+        popperConfig: {
+          onFirstUpdate() {
+            expect(virtualElement.getBoundingClientRect).toHaveBeenCalled()
+            expect(btnDropdown.classList.contains('show')).toEqual(true)
+            expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
+            done()
+          }
+        }
+      })
+
+      spyOn(virtualElement, 'getBoundingClientRect').and.callThrough()
+
+      dropdown.toggle()
+    })
+
     it('should not toggle a dropdown if the element is disabled', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
@@ -424,10 +518,9 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
         throw new Error('should not throw shown.bs.dropdown event')
       })
 
@@ -450,10 +543,9 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
         throw new Error('should not throw shown.bs.dropdown event')
       })
 
@@ -476,10 +568,9 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
         throw new Error('should not throw shown.bs.dropdown event')
       })
 
@@ -502,14 +593,13 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
-      dropdownEl.addEventListener('show.bs.dropdown', e => {
+      btnDropdown.addEventListener('show.bs.dropdown', e => {
         e.preventDefault()
       })
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
         throw new Error('should not throw shown.bs.dropdown event')
       })
 
@@ -534,10 +624,9 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
         expect(btnDropdown.classList.contains('show')).toEqual(true)
         done()
       })
@@ -556,10 +645,9 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
         throw new Error('should not throw shown.bs.dropdown event')
       })
 
@@ -582,10 +670,9 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
         throw new Error('should not throw shown.bs.dropdown event')
       })
 
@@ -608,10 +695,9 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
         throw new Error('should not throw shown.bs.dropdown event')
       })
 
@@ -634,14 +720,13 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
-      dropdownEl.addEventListener('show.bs.dropdown', e => {
+      btnDropdown.addEventListener('show.bs.dropdown', e => {
         e.preventDefault()
       })
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
         throw new Error('should not throw shown.bs.dropdown event')
       })
 
@@ -658,7 +743,7 @@ describe('Dropdown', () => {
     it('should hide a dropdown', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="true">Dropdown</button>',
         '  <div class="dropdown-menu show">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
@@ -666,12 +751,12 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
       const dropdown = new Dropdown(btnDropdown)
 
-      dropdownEl.addEventListener('hidden.bs.dropdown', () => {
+      btnDropdown.addEventListener('hidden.bs.dropdown', () => {
         expect(dropdownMenu.classList.contains('show')).toEqual(false)
+        expect(btnDropdown.getAttribute('aria-expanded')).toEqual('false')
         done()
       })
 
@@ -689,15 +774,14 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
         spyOn(dropdown._popper, 'destroy')
         dropdown.hide()
       })
 
-      dropdownEl.addEventListener('hidden.bs.dropdown', () => {
+      btnDropdown.addEventListener('hidden.bs.dropdown', () => {
         expect(dropdown._popper.destroy).toHaveBeenCalled()
         done()
       })
@@ -716,11 +800,10 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
       const dropdown = new Dropdown(btnDropdown)
 
-      dropdownEl.addEventListener('hidden.bs.dropdown', () => {
+      btnDropdown.addEventListener('hidden.bs.dropdown', () => {
         throw new Error('should not throw hidden.bs.dropdown event')
       })
 
@@ -743,11 +826,10 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
       const dropdown = new Dropdown(btnDropdown)
 
-      dropdownEl.addEventListener('hidden.bs.dropdown', () => {
+      btnDropdown.addEventListener('hidden.bs.dropdown', () => {
         throw new Error('should not throw hidden.bs.dropdown event')
       })
 
@@ -770,10 +852,9 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
-      dropdownEl.addEventListener('hidden.bs.dropdown', () => {
+      btnDropdown.addEventListener('hidden.bs.dropdown', () => {
         throw new Error('should not throw hidden.bs.dropdown event')
       })
 
@@ -796,15 +877,14 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
       const dropdown = new Dropdown(btnDropdown)
 
-      dropdownEl.addEventListener('hide.bs.dropdown', e => {
+      btnDropdown.addEventListener('hide.bs.dropdown', e => {
         e.preventDefault()
       })
 
-      dropdownEl.addEventListener('hidden.bs.dropdown', () => {
+      btnDropdown.addEventListener('hidden.bs.dropdown', () => {
         throw new Error('should not throw hidden.bs.dropdown event')
       })
 
@@ -815,6 +895,39 @@ describe('Dropdown', () => {
         done()
       })
     })
+
+    it('should remove event listener on touch-enabled device that was added in show method', done => {
+      fixtureEl.innerHTML = [
+        '<div class="dropdown">',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
+        '  <div class="dropdown-menu">',
+        '    <a class="dropdown-item" href="#">Dropdwon item</a>',
+        '  </div>',
+        '</div>'
+      ].join('')
+
+      const defaultValueOnTouchStart = document.documentElement.ontouchstart
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+      const dropdown = new Dropdown(btnDropdown)
+
+      document.documentElement.ontouchstart = () => {}
+      spyOn(EventHandler, 'off')
+
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
+        dropdown.hide()
+      })
+
+      btnDropdown.addEventListener('hidden.bs.dropdown', () => {
+        expect(btnDropdown.classList.contains('show')).toEqual(false)
+        expect(btnDropdown.getAttribute('aria-expanded')).toEqual('false')
+        expect(EventHandler.off).toHaveBeenCalled()
+
+        document.documentElement.ontouchstart = defaultValueOnTouchStart
+        done()
+      })
+
+      dropdown.show()
+    })
   })
 
   describe('dispose', () => {
@@ -829,16 +942,21 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+      spyOn(btnDropdown, 'addEventListener').and.callThrough()
+      spyOn(btnDropdown, 'removeEventListener').and.callThrough()
+
       const dropdown = new Dropdown(btnDropdown)
 
       expect(dropdown._popper).toBeNull()
       expect(dropdown._menu).toBeDefined()
       expect(dropdown._element).toBeDefined()
+      expect(btnDropdown.addEventListener).toHaveBeenCalledWith('click', jasmine.any(Function), jasmine.any(Boolean))
 
       dropdown.dispose()
 
       expect(dropdown._menu).toBeNull()
       expect(dropdown._element).toBeNull()
+      expect(btnDropdown.removeEventListener).toHaveBeenCalledWith('click', jasmine.any(Function), jasmine.any(Boolean))
     })
 
     it('should dispose dropdown with Popper', () => {
@@ -860,14 +978,11 @@ describe('Dropdown', () => {
       expect(dropdown._menu).toBeDefined()
       expect(dropdown._element).toBeDefined()
 
-      spyOn(Popper.prototype, 'destroy')
-
       dropdown.dispose()
 
       expect(dropdown._popper).toBeNull()
       expect(dropdown._menu).toBeNull()
       expect(dropdown._element).toBeNull()
-      expect(Popper.prototype.destroy).toHaveBeenCalled()
     })
   })
 
@@ -889,12 +1004,12 @@ describe('Dropdown', () => {
 
       expect(dropdown._popper).toBeDefined()
 
-      spyOn(dropdown._popper, 'scheduleUpdate')
+      spyOn(dropdown._popper, 'update')
       spyOn(dropdown, '_detectNavbar')
 
       dropdown.update()
 
-      expect(dropdown._popper.scheduleUpdate).toHaveBeenCalled()
+      expect(dropdown._popper.update).toHaveBeenCalled()
       expect(dropdown._detectNavbar).toHaveBeenCalled()
     })
 
@@ -921,10 +1036,10 @@ describe('Dropdown', () => {
   })
 
   describe('data-api', () => {
-    it('should not add class position-static to dropdown if boundary not set', done => {
+    it('should show and hide a dropdown', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
@@ -932,80 +1047,103 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
+      let showEventTriggered = false
+      let hideEventTriggered = false
+
+      btnDropdown.addEventListener('show.bs.dropdown', () => {
+        showEventTriggered = true
+      })
+
+      btnDropdown.addEventListener('shown.bs.dropdown', e => setTimeout(() => {
+        expect(btnDropdown.classList.contains('show')).toEqual(true)
+        expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
+        expect(showEventTriggered).toEqual(true)
+        expect(e.relatedTarget).toEqual(btnDropdown)
+        document.body.click()
+      }))
+
+      btnDropdown.addEventListener('hide.bs.dropdown', () => {
+        hideEventTriggered = true
+      })
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
-        expect(dropdownEl.classList.contains('position-static')).toEqual(false)
+      btnDropdown.addEventListener('hidden.bs.dropdown', e => {
+        expect(btnDropdown.classList.contains('show')).toEqual(false)
+        expect(btnDropdown.getAttribute('aria-expanded')).toEqual('false')
+        expect(hideEventTriggered).toEqual(true)
+        expect(e.relatedTarget).toEqual(btnDropdown)
         done()
       })
 
       btnDropdown.click()
     })
 
-    it('should add class position-static to dropdown if boundary not scrollParent', done => {
+    it('should not use Popper in navbar', done => {
       fixtureEl.innerHTML = [
-        '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-boundary="viewport">Dropdown</button>',
-        '  <div class="dropdown-menu">',
-        '    <a class="dropdown-item" href="#">Secondary link</a>',
+        '<nav class="navbar navbar-expand-md navbar-light bg-light">',
+        '  <div class="dropdown">',
+        '    <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+        '    <div class="dropdown-menu">',
+        '      <a class="dropdown-item" href="#">Secondary link</a>',
+        '    </div>',
         '  </div>',
-        '</div>'
+        '</nav>'
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
+      const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
+      const dropdown = new Dropdown(btnDropdown)
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
-        expect(dropdownEl.classList.contains('position-static')).toEqual(true)
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
+        expect(dropdown._popper).toBeNull()
+        expect(dropdownMenu.getAttribute('style')).toEqual(null, 'no inline style applied by Popper')
         done()
       })
 
-      btnDropdown.click()
+      dropdown.show()
     })
 
-    it('should show and hide a dropdown', done => {
+    it('should not collapse the dropdown when clicking a select option nested in the dropdown', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
         '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
         '  <div class="dropdown-menu">',
-        '    <a class="dropdown-item" href="#">Secondary link</a>',
+        '    <select>',
+        '      <option selected>Open this select menu</option>',
+        '      <option value="1">One</option>',
+        '    </select>',
         '  </div>',
         '</div>'
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
-      let showEventTriggered = false
-      let hideEventTriggered = false
+      const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
+      const dropdown = new Dropdown(btnDropdown)
 
-      dropdownEl.addEventListener('show.bs.dropdown', () => {
-        showEventTriggered = true
-      })
+      const hideSpy = spyOn(dropdown, '_completeHide')
 
-      dropdownEl.addEventListener('shown.bs.dropdown', e => {
-        expect(btnDropdown.classList.contains('show')).toEqual(true)
-        expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
-        expect(showEventTriggered).toEqual(true)
-        expect(e.relatedTarget).toEqual(btnDropdown)
-        document.body.click()
-      })
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
+        const clickEvent = new MouseEvent('click', {
+          bubbles: true
+        })
 
-      dropdownEl.addEventListener('hide.bs.dropdown', () => {
-        hideEventTriggered = true
+        dropdownMenu.querySelector('option').dispatchEvent(clickEvent)
       })
 
-      dropdownEl.addEventListener('hidden.bs.dropdown', e => {
-        expect(btnDropdown.classList.contains('show')).toEqual(false)
-        expect(btnDropdown.getAttribute('aria-expanded')).toEqual('false')
-        expect(hideEventTriggered).toEqual(true)
-        expect(e.relatedTarget).toEqual(btnDropdown)
-        done()
+      dropdownMenu.addEventListener('click', event => {
+        expect(event.target.tagName).toMatch(/select|option/i)
+
+        Dropdown.clearMenus(event)
+
+        setTimeout(() => {
+          expect(hideSpy).not.toHaveBeenCalled()
+          done()
+        }, 10)
       })
 
-      btnDropdown.click()
+      dropdown.show()
     })
 
-    it('should not use Popper in navbar', done => {
+    it('should manage bs attribute `data-bs-popper`="none" when dropdown is in navbar', done => {
       fixtureEl.innerHTML = [
         '<nav class="navbar navbar-expand-md navbar-light bg-light">',
         '  <div class="dropdown">',
@@ -1018,15 +1156,20 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
+      const dropdown = new Dropdown(btnDropdown)
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
-        expect(dropdownMenu.getAttribute('style')).toEqual(null, 'no inline style applied by Popper')
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
+        expect(dropdownMenu.getAttribute('data-bs-popper')).toEqual('none')
+        dropdown.hide()
+      })
+
+      btnDropdown.addEventListener('hidden.bs.dropdown', () => {
+        expect(dropdownMenu.getAttribute('data-bs-popper')).toBeNull()
         done()
       })
 
-      btnDropdown.click()
+      dropdown.show()
     })
 
     it('should not use Popper if display set to static', done => {
@@ -1040,18 +1183,44 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
         // Popper adds this attribute when we use it
-        expect(dropdownMenu.getAttribute('x-placement')).toEqual(null)
+        expect(dropdownMenu.getAttribute('data-popper-placement')).toEqual(null)
         done()
       })
 
       btnDropdown.click()
     })
 
+    it('should manage bs attribute `data-bs-popper`="static" when display set to static', done => {
+      fixtureEl.innerHTML = [
+        '<div class="dropdown">',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static">Dropdown</button>',
+        '  <div class="dropdown-menu">',
+        '    <a class="dropdown-item" href="#">Secondary link</a>',
+        '  </div>',
+        '</div>'
+      ].join('')
+
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+      const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
+      const dropdown = new Dropdown(btnDropdown)
+
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
+        expect(dropdownMenu.getAttribute('data-bs-popper')).toEqual('static')
+        dropdown.hide()
+      })
+
+      btnDropdown.addEventListener('hidden.bs.dropdown', () => {
+        expect(dropdownMenu.getAttribute('data-bs-popper')).toBeNull()
+        done()
+      })
+
+      dropdown.show()
+    })
+
     it('should remove "show" class if tabbing outside of menu', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
@@ -1063,9 +1232,8 @@ describe('Dropdown', () => {
       ].join('')
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdownEl = fixtureEl.querySelector('.dropdown')
 
-      dropdownEl.addEventListener('shown.bs.dropdown', () => {
+      btnDropdown.addEventListener('shown.bs.dropdown', () => {
         expect(btnDropdown.classList.contains('show')).toEqual(true)
 
         const keyup = createEvent('keyup')
@@ -1074,7 +1242,7 @@ describe('Dropdown', () => {
         document.dispatchEvent(keyup)
       })
 
-      dropdownEl.addEventListener('hidden.bs.dropdown', () => {
+      btnDropdown.addEventListener('hidden.bs.dropdown', () => {
         expect(btnDropdown.classList.contains('show')).toEqual(false)
         done()
       })
@@ -1105,34 +1273,31 @@ describe('Dropdown', () => {
 
       expect(triggerDropdownList.length).toEqual(2)
 
-      const first = triggerDropdownList[0]
-      const last = triggerDropdownList[1]
-      const dropdownTestMenu = first.parentNode
-      const btnGroup = last.parentNode
+      const [triggerDropdownFirst, triggerDropdownLast] = triggerDropdownList
 
-      dropdownTestMenu.addEventListener('shown.bs.dropdown', () => {
-        expect(first.classList.contains('show')).toEqual(true)
+      triggerDropdownFirst.addEventListener('shown.bs.dropdown', () => {
+        expect(triggerDropdownFirst.classList.contains('show')).toEqual(true)
         expect(fixtureEl.querySelectorAll('.dropdown-menu.show').length).toEqual(1)
         document.body.click()
       })
 
-      dropdownTestMenu.addEventListener('hidden.bs.dropdown', () => {
+      triggerDropdownFirst.addEventListener('hidden.bs.dropdown', () => {
         expect(fixtureEl.querySelectorAll('.dropdown-menu.show').length).toEqual(0)
-        last.click()
+        triggerDropdownLast.click()
       })
 
-      btnGroup.addEventListener('shown.bs.dropdown', () => {
-        expect(last.classList.contains('show')).toEqual(true)
+      triggerDropdownLast.addEventListener('shown.bs.dropdown', () => {
+        expect(triggerDropdownLast.classList.contains('show')).toEqual(true)
         expect(fixtureEl.querySelectorAll('.dropdown-menu.show').length).toEqual(1)
         document.body.click()
       })
 
-      btnGroup.addEventListener('hidden.bs.dropdown', () => {
+      triggerDropdownLast.addEventListener('hidden.bs.dropdown', () => {
         expect(fixtureEl.querySelectorAll('.dropdown-menu.show').length).toEqual(0)
         done()
       })
 
-      first.click()
+      triggerDropdownFirst.click()
     })
 
     it('should remove "show" class if body if tabbing outside of menu, with multiple dropdowns', done => {
@@ -1156,13 +1321,10 @@ describe('Dropdown', () => {
 
       expect(triggerDropdownList.length).toEqual(2)
 
-      const first = triggerDropdownList[0]
-      const last = triggerDropdownList[1]
-      const dropdownTestMenu = first.parentNode
-      const btnGroup = last.parentNode
+      const [triggerDropdownFirst, triggerDropdownLast] = triggerDropdownList
 
-      dropdownTestMenu.addEventListener('shown.bs.dropdown', () => {
-        expect(first.classList.contains('show')).toEqual(true, '"show" class added on click')
+      triggerDropdownFirst.addEventListener('shown.bs.dropdown', () => {
+        expect(triggerDropdownFirst.classList.contains('show')).toEqual(true, '"show" class added on click')
         expect(fixtureEl.querySelectorAll('.dropdown-menu.show').length).toEqual(1, 'only one dropdown is shown')
 
         const keyup = createEvent('keyup')
@@ -1171,13 +1333,13 @@ describe('Dropdown', () => {
         document.dispatchEvent(keyup)
       })
 
-      dropdownTestMenu.addEventListener('hidden.bs.dropdown', () => {
+      triggerDropdownFirst.addEventListener('hidden.bs.dropdown', () => {
         expect(fixtureEl.querySelectorAll('.dropdown-menu.show').length).toEqual(0, '"show" class removed')
-        last.click()
+        triggerDropdownLast.click()
       })
 
-      btnGroup.addEventListener('shown.bs.dropdown', () => {
-        expect(last.classList.contains('show')).toEqual(true, '"show" class added on click')
+      triggerDropdownLast.addEventListener('shown.bs.dropdown', () => {
+        expect(triggerDropdownLast.classList.contains('show')).toEqual(true, '"show" class added on click')
         expect(fixtureEl.querySelectorAll('.dropdown-menu.show').length).toEqual(1, 'only one dropdown is shown')
 
         const keyup = createEvent('keyup')
@@ -1186,12 +1348,12 @@ describe('Dropdown', () => {
         document.dispatchEvent(keyup)
       })
 
-      btnGroup.addEventListener('hidden.bs.dropdown', () => {
+      triggerDropdownLast.addEventListener('hidden.bs.dropdown', () => {
         expect(fixtureEl.querySelectorAll('.dropdown-menu.show').length).toEqual(0, '"show" class removed')
         done()
       })
 
-      first.click()
+      triggerDropdownFirst.click()
     })
 
     it('should fire hide and hidden event without a clickEvent if event type is not click', done => {
@@ -1205,18 +1367,17 @@ describe('Dropdown', () => {
       ].join('')
 
       const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdown = fixtureEl.querySelector('.dropdown')
 
-      dropdown.addEventListener('hide.bs.dropdown', e => {
+      triggerDropdown.addEventListener('hide.bs.dropdown', e => {
         expect(e.clickEvent).toBeUndefined()
       })
 
-      dropdown.addEventListener('hidden.bs.dropdown', e => {
+      triggerDropdown.addEventListener('hidden.bs.dropdown', e => {
         expect(e.clickEvent).toBeUndefined()
         done()
       })
 
-      dropdown.addEventListener('shown.bs.dropdown', () => {
+      triggerDropdown.addEventListener('shown.bs.dropdown', () => {
         const keydown = createEvent('keydown')
 
         keydown.key = 'Escape'
@@ -1226,6 +1387,42 @@ describe('Dropdown', () => {
       triggerDropdown.click()
     })
 
+    it('should bubble up the events to the parent elements', done => {
+      fixtureEl.innerHTML = [
+        '<div class="dropdown">',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
+        '  <div class="dropdown-menu">',
+        '    <a class="dropdown-item" href="#subMenu">Sub menu</a>',
+        '  </div>',
+        '</div>'
+      ].join('')
+
+      const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+      const dropdownParent = fixtureEl.querySelector('.dropdown')
+      const dropdown = new Dropdown(triggerDropdown)
+
+      const showFunction = jasmine.createSpy('showFunction')
+      dropdownParent.addEventListener('show.bs.dropdown', showFunction)
+
+      const shownFunction = jasmine.createSpy('shownFunction')
+      dropdownParent.addEventListener('shown.bs.dropdown', () => {
+        shownFunction()
+        dropdown.hide()
+      })
+
+      const hideFunction = jasmine.createSpy('hideFunction')
+      dropdownParent.addEventListener('hide.bs.dropdown', hideFunction)
+
+      dropdownParent.addEventListener('hidden.bs.dropdown', () => {
+        expect(showFunction).toHaveBeenCalled()
+        expect(shownFunction).toHaveBeenCalled()
+        expect(hideFunction).toHaveBeenCalled()
+        done()
+      })
+
+      dropdown.show()
+    })
+
     it('should ignore keyboard events within <input>s and <textarea>s', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
@@ -1239,11 +1436,10 @@ describe('Dropdown', () => {
       ].join('')
 
       const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdown = fixtureEl.querySelector('.dropdown')
       const input = fixtureEl.querySelector('input')
       const textarea = fixtureEl.querySelector('textarea')
 
-      dropdown.addEventListener('shown.bs.dropdown', () => {
+      triggerDropdown.addEventListener('shown.bs.dropdown', () => {
         input.focus()
         const keydown = createEvent('keydown')
 
@@ -1275,9 +1471,8 @@ describe('Dropdown', () => {
       ].join('')
 
       const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdown = fixtureEl.querySelector('.dropdown')
 
-      dropdown.addEventListener('shown.bs.dropdown', () => {
+      triggerDropdown.addEventListener('shown.bs.dropdown', () => {
         const keydown = createEvent('keydown')
         keydown.key = 'ArrowDown'
 
@@ -1311,9 +1506,8 @@ describe('Dropdown', () => {
       ].join('')
 
       const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdown = fixtureEl.querySelector('.dropdown')
 
-      dropdown.addEventListener('shown.bs.dropdown', () => {
+      triggerDropdown.addEventListener('shown.bs.dropdown', () => {
         const keydown = createEvent('keydown')
         keydown.key = 'ArrowDown'
 
@@ -1341,11 +1535,10 @@ describe('Dropdown', () => {
       ].join('')
 
       const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdown = fixtureEl.querySelector('.dropdown')
       const item1 = fixtureEl.querySelector('#item1')
       const item2 = fixtureEl.querySelector('#item2')
 
-      dropdown.addEventListener('shown.bs.dropdown', () => {
+      triggerDropdown.addEventListener('shown.bs.dropdown', () => {
         const keydownArrowDown = createEvent('keydown')
         keydownArrowDown.key = 'ArrowDown'
 
@@ -1379,10 +1572,9 @@ describe('Dropdown', () => {
       ].join('')
 
       const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdown = fixtureEl.querySelector('.dropdown')
       const item1 = fixtureEl.querySelector('#item1')
 
-      dropdown.addEventListener('shown.bs.dropdown', () => {
+      triggerDropdown.addEventListener('shown.bs.dropdown', () => {
         const keydown = createEvent('keydown')
         keydown.key = 'ArrowUp'
 
@@ -1406,7 +1598,6 @@ describe('Dropdown', () => {
       ].join('')
 
       const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdown = fixtureEl.querySelector('.dropdown')
       const input = fixtureEl.querySelector('input')
 
       input.addEventListener('click', () => {
@@ -1414,7 +1605,7 @@ describe('Dropdown', () => {
         done()
       })
 
-      dropdown.addEventListener('shown.bs.dropdown', () => {
+      triggerDropdown.addEventListener('shown.bs.dropdown', () => {
         expect(triggerDropdown.classList.contains('show')).toEqual(true, 'dropdown menu is shown')
         input.dispatchEvent(createEvent('click'))
       })
@@ -1433,7 +1624,6 @@ describe('Dropdown', () => {
       ].join('')
 
       const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdown = fixtureEl.querySelector('.dropdown')
       const textarea = fixtureEl.querySelector('textarea')
 
       textarea.addEventListener('click', () => {
@@ -1441,7 +1631,7 @@ describe('Dropdown', () => {
         done()
       })
 
-      dropdown.addEventListener('shown.bs.dropdown', () => {
+      triggerDropdown.addEventListener('shown.bs.dropdown', () => {
         expect(triggerDropdown.classList.contains('show')).toEqual(true, 'dropdown menu is shown')
         textarea.dispatchEvent(createEvent('click'))
       })
@@ -1462,7 +1652,6 @@ describe('Dropdown', () => {
       ].join('')
 
       const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
-      const dropdown = fixtureEl.querySelector('.dropdown')
       const input = fixtureEl.querySelector('input')
       const textarea = fixtureEl.querySelector('textarea')
 
@@ -1478,7 +1667,7 @@ describe('Dropdown', () => {
       const keydownEscape = createEvent('keydown')
       keydownEscape.key = 'Escape'
 
-      dropdown.addEventListener('shown.bs.dropdown', () => {
+      triggerDropdown.addEventListener('shown.bs.dropdown', () => {
         // Key Space
         input.focus()
         input.dispatchEvent(keydownSpace)
@@ -1557,6 +1746,133 @@ describe('Dropdown', () => {
         done()
       }, 20)
     })
+
+    it('should propagate escape key events if dropdown is closed', done => {
+      fixtureEl.innerHTML = [
+        '<div class="parent">',
+        '  <div class="dropdown">',
+        '    <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
+        '    <div class="dropdown-menu">',
+        '      <a class="dropdown-item" href="#">Some Item</a>',
+        '   </div>',
+        '  </div>',
+        '</div>'
+      ]
+
+      const parent = fixtureEl.querySelector('.parent')
+      const toggle = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+
+      const parentKeyHandler = jasmine.createSpy('parentKeyHandler')
+
+      parent.addEventListener('keydown', parentKeyHandler)
+      parent.addEventListener('keyup', () => {
+        expect(parentKeyHandler).toHaveBeenCalled()
+        done()
+      })
+
+      const keydownEscape = createEvent('keydown', { bubbles: true })
+      keydownEscape.key = 'Escape'
+      const keyupEscape = createEvent('keyup', { bubbles: true })
+      keyupEscape.key = 'Escape'
+
+      toggle.focus()
+      toggle.dispatchEvent(keydownEscape)
+      toggle.dispatchEvent(keyupEscape)
+    })
+
+    it('should close dropdown (only) by clicking inside the dropdown menu when it has data-attribute `data-bs-auto-close="inside"`', done => {
+      fixtureEl.innerHTML = [
+        '<div class="dropdown">',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="inside">Dropdown toggle</button>',
+        '  <div class="dropdown-menu">',
+        '    <a class="dropdown-item" href="#">Dropdown item</a>',
+        ' </div>',
+        '</div>'
+      ]
+
+      const dropdownToggle = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+      const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
+
+      const expectDropdownToBeOpened = () => setTimeout(() => {
+        expect(dropdownToggle.classList.contains('show')).toEqual(true)
+        dropdownMenu.click()
+      }, 150)
+
+      dropdownToggle.addEventListener('shown.bs.dropdown', () => {
+        document.documentElement.click()
+        expectDropdownToBeOpened()
+      })
+
+      dropdownToggle.addEventListener('hidden.bs.dropdown', () => setTimeout(() => {
+        expect(dropdownToggle.classList.contains('show')).toEqual(false)
+        done()
+      }))
+
+      dropdownToggle.click()
+    })
+
+    it('should close dropdown (only) by clicking outside the dropdown menu when it has data-attribute `data-bs-auto-close="outside"`', done => {
+      fixtureEl.innerHTML = [
+        '<div class="dropdown">',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">Dropdown toggle</button>',
+        '  <div class="dropdown-menu">',
+        '    <a class="dropdown-item" href="#">Dropdown item</a>',
+        ' </div>',
+        '</div>'
+      ]
+
+      const dropdownToggle = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+      const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
+
+      const expectDropdownToBeOpened = () => setTimeout(() => {
+        expect(dropdownToggle.classList.contains('show')).toEqual(true)
+        document.documentElement.click()
+      }, 150)
+
+      dropdownToggle.addEventListener('shown.bs.dropdown', () => {
+        dropdownMenu.click()
+        expectDropdownToBeOpened()
+      })
+
+      dropdownToggle.addEventListener('hidden.bs.dropdown', () => {
+        expect(dropdownToggle.classList.contains('show')).toEqual(false)
+        done()
+      })
+
+      dropdownToggle.click()
+    })
+
+    it('should not close dropdown by clicking inside or outside the dropdown menu when it has data-attribute `data-bs-auto-close="false"`', done => {
+      fixtureEl.innerHTML = [
+        '<div class="dropdown">',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="false">Dropdown toggle</button>',
+        '  <div class="dropdown-menu">',
+        '    <a class="dropdown-item" href="#">Dropdown item</a>',
+        ' </div>',
+        '</div>'
+      ]
+
+      const dropdownToggle = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+      const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
+
+      const expectDropdownToBeOpened = (shouldTriggerClick = true) => setTimeout(() => {
+        expect(dropdownToggle.classList.contains('show')).toEqual(true)
+        if (shouldTriggerClick) {
+          document.documentElement.click()
+        } else {
+          done()
+        }
+
+        expectDropdownToBeOpened(false)
+      }, 150)
+
+      dropdownToggle.addEventListener('shown.bs.dropdown', () => {
+        dropdownMenu.click()
+        expectDropdownToBeOpened()
+      })
+
+      dropdownToggle.click()
+    })
   })
 
   describe('jQueryInterface', () => {
@@ -1596,11 +1912,9 @@ describe('Dropdown', () => {
       jQueryMock.fn.dropdown = Dropdown.jQueryInterface
       jQueryMock.elements = [div]
 
-      try {
+      expect(() => {
         jQueryMock.fn.dropdown.call(jQueryMock, action)
-      } catch (error) {
-        expect(error.message).toEqual(`No method named "${action}"`)
-      }
+      }).toThrowError(TypeError, `No method named "${action}"`)
     })
   })
 
@@ -1623,4 +1937,99 @@ describe('Dropdown', () => {
       expect(Dropdown.getInstance(div)).toEqual(null)
     })
   })
+
+  it('should open dropdown when pressing keydown or keyup', done => {
+    fixtureEl.innerHTML = [
+      '<div class="dropdown">',
+      '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
+      '  <div class="dropdown-menu">',
+      '    <a class="dropdown-item disabled" href="#sub1">Submenu 1</a>',
+      '    <button class="dropdown-item" type="button" disabled>Disabled button</button>',
+      '    <a id="item1" class="dropdown-item" href="#">Another link</a>',
+      '  </div>',
+      '</div>'
+    ].join('')
+
+    const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+    const dropdown = fixtureEl.querySelector('.dropdown')
+
+    const keydown = createEvent('keydown')
+    keydown.key = 'ArrowDown'
+
+    const keyup = createEvent('keyup')
+    keyup.key = 'ArrowUp'
+
+    const handleArrowDown = () => {
+      expect(triggerDropdown.classList.contains('show')).toEqual(true)
+      expect(triggerDropdown.getAttribute('aria-expanded')).toEqual('true')
+      setTimeout(() => {
+        dropdown.hide()
+        keydown.key = 'ArrowUp'
+        triggerDropdown.dispatchEvent(keyup)
+      }, 20)
+    }
+
+    const handleArrowUp = () => {
+      expect(triggerDropdown.classList.contains('show')).toEqual(true)
+      expect(triggerDropdown.getAttribute('aria-expanded')).toEqual('true')
+      done()
+    }
+
+    dropdown.addEventListener('shown.bs.dropdown', event => {
+      if (event.target.key === 'ArrowDown') {
+        handleArrowDown()
+      } else {
+        handleArrowUp()
+      }
+    })
+
+    triggerDropdown.dispatchEvent(keydown)
+  })
+
+  it('should allow `data-bs-toggle="dropdown"` click events to bubble up', () => {
+    fixtureEl.innerHTML = [
+      '<div class="dropdown">',
+      '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
+      '  <div class="dropdown-menu">',
+      '    <a class="dropdown-item" href="#">Secondary link</a>',
+      '  </div>',
+      '</div>'
+    ].join('')
+
+    const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+    const clickListener = jasmine.createSpy('clickListener')
+    const delegatedClickListener = jasmine.createSpy('delegatedClickListener')
+
+    btnDropdown.addEventListener('click', clickListener)
+    document.addEventListener('click', delegatedClickListener)
+
+    btnDropdown.click()
+
+    expect(clickListener).toHaveBeenCalled()
+    expect(delegatedClickListener).toHaveBeenCalled()
+  })
+
+  it('should open the dropdown when clicking the child element inside `data-bs-toggle="dropdown"`', done => {
+    fixtureEl.innerHTML = [
+      '<div class="container">',
+      '  <div class="dropdown">',
+      '    <button class="btn dropdown-toggle" data-bs-toggle="dropdown"><span id="childElement">Dropdown</span></button>',
+      '    <div class="dropdown-menu">',
+      '      <a class="dropdown-item" href="#subMenu">Sub menu</a>',
+      '    </div>',
+      '  </div>',
+      '</div>'
+    ].join('')
+
+    const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+    const childElement = fixtureEl.querySelector('#childElement')
+
+    btnDropdown.addEventListener('shown.bs.dropdown', () => setTimeout(() => {
+      expect(btnDropdown.classList.contains('show')).toEqual(true)
+      expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
+      done()
+    }))
+
+    childElement.click()
+  })
 })
diff --git a/js/tests/unit/jquery.spec.js b/js/tests/unit/jquery.spec.js
index 6198cdb85..289612df5 100644
--- a/js/tests/unit/jquery.spec.js
+++ b/js/tests/unit/jquery.spec.js
@@ -52,6 +52,6 @@ describe('jQuery', () => {
         done()
       })
 
-    $(fixtureEl).find('button').click()
+    $(fixtureEl).find('button').trigger('click')
   })
 })
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index f645e9892..a09711b34 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -1,47 +1,30 @@
 import Modal from '../../src/modal'
 import EventHandler from '../../src/dom/event-handler'
+import { getWidth as getScrollBarWidth } from '../../src/util/scrollbar'
 
 /** Test helpers */
-import { getFixture, clearFixture, createEvent, jQueryMock } from '../helpers/fixture'
+import { clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture'
 
 describe('Modal', () => {
   let fixtureEl
-  let style
 
   beforeAll(() => {
     fixtureEl = getFixture()
-
-    // Enable the scrollbar measurer
-    const css = '.modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; }'
-
-    style = document.createElement('style')
-    style.type = 'text/css'
-    style.appendChild(document.createTextNode(css))
-
-    document.head.appendChild(style)
-
-    // Simulate scrollbars
-    document.documentElement.style.paddingRight = '16px'
   })
 
   afterEach(() => {
     clearFixture()
-
+    clearBodyAndDocument()
     document.body.classList.remove('modal-open')
-    document.body.removeAttribute('style')
-    document.body.removeAttribute('data-bs-padding-right')
 
     document.querySelectorAll('.modal-backdrop')
       .forEach(backdrop => {
         document.body.removeChild(backdrop)
       })
-
-    document.body.style.paddingRight = '0px'
   })
 
-  afterAll(() => {
-    document.head.removeChild(style)
-    document.documentElement.style.paddingRight = '0px'
+  beforeEach(() => {
+    clearBodyAndDocument()
   })
 
   describe('VERSION', () => {
@@ -56,10 +39,30 @@ describe('Modal', () => {
     })
   })
 
+  describe('DATA_KEY', () => {
+    it('should return plugin data key', () => {
+      expect(Modal.DATA_KEY).toEqual('bs.modal')
+    })
+  })
+
+  describe('constructor', () => {
+    it('should take care of element either passed as a CSS selector or DOM element', () => {
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
+
+      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 = '<div class="modal"><div class="modal-dialog"></div></div>'
 
+      document.documentElement.style.overflowY = 'scroll'
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
       const originalPadding = '0px'
@@ -74,6 +77,7 @@ describe('Modal', () => {
       modalEl.addEventListener('hidden.bs.modal', () => {
         expect(document.body.getAttribute('data-bs-padding-right')).toBeNull()
         expect().nothing()
+        document.documentElement.style.overflowY = 'auto'
         done()
       })
 
@@ -86,25 +90,28 @@ describe('Modal', () => {
         '<div class="modal"><div class="modal-dialog"></div></div>'
       ].join('')
 
+      document.documentElement.style.overflowY = 'scroll'
       const fixedEl = fixtureEl.querySelector('.fixed-top')
       const originalPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
+      const scrollBarWidth = getScrollBarWidth()
 
       modalEl.addEventListener('shown.bs.modal', () => {
-        const expectedPadding = originalPadding + modal._getScrollbarWidth()
-        const currentPadding = Number.parseInt(window.getComputedStyle(modalEl).paddingRight, 10)
+        const expectedPadding = originalPadding + scrollBarWidth
+        const currentPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
 
-        expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual('0px', 'original fixed element padding should be stored in data-bs-padding-right')
+        expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual(`${originalPadding}px`, 'original fixed element padding should be stored in data-bs-padding-right')
         expect(currentPadding).toEqual(expectedPadding, 'fixed element padding should be adjusted while opening')
         modal.toggle()
       })
 
       modalEl.addEventListener('hidden.bs.modal', () => {
-        const currentPadding = Number.parseInt(window.getComputedStyle(modalEl).paddingRight, 10)
+        const currentPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
 
-        expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual(null, 'data-bs-padding-right should be cleared after closing')
+        expect(fixedEl.hasAttribute('data-bs-padding-right')).toEqual(false, 'data-bs-padding-right should be cleared after closing')
         expect(currentPadding).toEqual(originalPadding, 'fixed element padding should be reset after closing')
+        document.documentElement.style.overflowY = 'auto'
         done()
       })
 
@@ -117,16 +124,19 @@ describe('Modal', () => {
         '<div class="modal"><div class="modal-dialog"></div></div>'
       ].join('')
 
+      document.documentElement.style.overflowY = 'scroll'
+
       const stickyTopEl = fixtureEl.querySelector('.sticky-top')
       const originalMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
+      const scrollBarWidth = getScrollBarWidth()
 
       modalEl.addEventListener('shown.bs.modal', () => {
-        const expectedMargin = originalMargin - modal._getScrollbarWidth()
+        const expectedMargin = originalMargin - scrollBarWidth
         const 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(stickyTopEl.getAttribute('data-bs-margin-right')).toEqual(`${originalMargin}px`, 'original sticky element margin should be stored in data-bs-margin-right')
         expect(currentMargin).toEqual(expectedMargin, 'sticky element margin should be adjusted while opening')
         modal.toggle()
       })
@@ -134,14 +144,40 @@ describe('Modal', () => {
       modalEl.addEventListener('hidden.bs.modal', () => {
         const 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(stickyTopEl.hasAttribute('data-bs-margin-right')).toEqual(false, 'data-bs-margin-right should be cleared after closing')
         expect(currentMargin).toEqual(originalMargin, 'sticky element margin should be reset after closing')
+
+        document.documentElement.style.overflowY = 'auto'
         done()
       })
 
       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 = [
+        '<div class="sticky-top" style="margin-right: 0px; padding-right: 0px; width: calc(100vw - 50%)"></div>',
+        '<div class="modal"><div class="modal-dialog"></div></div>'
+      ].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 = '<div class="modal"><div class="modal-dialog"></div></div>'
       const styleTest = document.createElement('style')
@@ -195,27 +231,6 @@ describe('Modal', () => {
 
       modal.toggle()
     })
-
-    it('should properly restore non-pixel inline body padding after closing', done => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
-
-      document.body.style.paddingRight = '5%'
-
-      const modalEl = fixtureEl.querySelector('.modal')
-      const modal = new Modal(modalEl)
-
-      modalEl.addEventListener('shown.bs.modal', () => {
-        modal.toggle()
-      })
-
-      modalEl.addEventListener('hidden.bs.modal', () => {
-        expect(document.body.style.paddingRight).toEqual('5%')
-        document.body.removeAttribute('style')
-        done()
-      })
-
-      modal.toggle()
-    })
   })
 
   describe('show', () => {
@@ -542,7 +557,7 @@ describe('Modal', () => {
     })
 
     it('should not close modal when clicking outside of modal-content if backdrop = static', done => {
-      fixtureEl.innerHTML = '<div class="modal" data-bs-backdrop="static" ><div class="modal-dialog"></div></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl, {
@@ -569,7 +584,7 @@ describe('Modal', () => {
     })
 
     it('should close modal when escape key is pressed with keyboard = true and backdrop is static', done => {
-      fixtureEl.innerHTML = '<div class="modal" data-bs-backdrop="static"><div class="modal-dialog"></div></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl, {
@@ -626,7 +641,7 @@ describe('Modal', () => {
     })
 
     it('should not overflow when clicking outside of modal-content if backdrop = static', done => {
-      fixtureEl.innerHTML = '<div class="modal" data-bs-backdrop="static"><div class="modal-dialog" style="transition-duration: 20ms;"></div></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" style="transition-duration: 20ms;"></div></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl, {
@@ -662,7 +677,6 @@ describe('Modal', () => {
 
         // Restore scrollbars
         document.body.style.overflow = 'auto'
-        document.documentElement.style.paddingRight = '16px'
         done()
       })
 
@@ -694,7 +708,6 @@ describe('Modal', () => {
         // Restore overridden css
         document.body.style.removeProperty('margin')
         document.body.style.removeProperty('overflow')
-        document.documentElement.style.paddingRight = '16px'
         done()
       })
 
@@ -870,7 +883,7 @@ describe('Modal', () => {
   })
 
   describe('data-api', () => {
-    it('should open modal', done => {
+    it('should toggle modal', done => {
       fixtureEl.innerHTML = [
         '<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"></button>',
         '<div id="exampleModal" class="modal"><div class="modal-dialog"></div></div>'
@@ -885,6 +898,15 @@ describe('Modal', () => {
         expect(modalEl.getAttribute('aria-hidden')).toEqual(null)
         expect(modalEl.style.display).toEqual('block')
         expect(document.querySelector('.modal-backdrop')).toBeDefined()
+        setTimeout(() => trigger.click(), 10)
+      })
+
+      modalEl.addEventListener('hidden.bs.modal', () => {
+        expect(modalEl.getAttribute('aria-modal')).toEqual(null)
+        expect(modalEl.getAttribute('role')).toEqual(null)
+        expect(modalEl.getAttribute('aria-hidden')).toEqual('true')
+        expect(modalEl.style.display).toEqual('none')
+        expect(document.querySelector('.modal-backdrop')).toEqual(null)
         done()
       })
 
@@ -1038,6 +1060,23 @@ describe('Modal', () => {
       expect(Modal.getInstance(div)).toBeDefined()
     })
 
+    it('should create a modal with given config', () => {
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      jQueryMock.fn.modal = Modal.jQueryInterface
+      jQueryMock.elements = [div]
+
+      jQueryMock.fn.modal.call(jQueryMock, { keyboard: false })
+      spyOn(Modal.prototype, 'constructor')
+      expect(Modal.prototype.constructor).not.toHaveBeenCalledWith(div, { keyboard: false })
+
+      const modal = Modal.getInstance(div)
+      expect(modal).toBeDefined()
+      expect(modal._config.keyboard).toBe(false)
+    })
+
     it('should not re create a modal', () => {
       fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
 
@@ -1061,11 +1100,9 @@ describe('Modal', () => {
       jQueryMock.fn.modal = Modal.jQueryInterface
       jQueryMock.elements = [div]
 
-      try {
+      expect(() => {
         jQueryMock.fn.modal.call(jQueryMock, action)
-      } catch (error) {
-        expect(error.message).toEqual(`No method named "${action}"`)
-      }
+      }).toThrowError(TypeError, `No method named "${action}"`)
     })
 
     it('should call show method', () => {
diff --git a/js/tests/unit/offcanvas.spec.js b/js/tests/unit/offcanvas.spec.js
new file mode 100644
index 000000000..30edc2913
--- /dev/null
+++ b/js/tests/unit/offcanvas.spec.js
@@ -0,0 +1,705 @@
+import Offcanvas from '../../src/offcanvas'
+import EventHandler from '../../src/dom/event-handler'
+
+/** Test helpers */
+import { clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture'
+import { isVisible } from '../../src/util'
+
+describe('Offcanvas', () => {
+  let fixtureEl
+
+  beforeAll(() => {
+    fixtureEl = getFixture()
+  })
+
+  afterEach(() => {
+    clearFixture()
+    document.body.classList.remove('offcanvas-open')
+    clearBodyAndDocument()
+  })
+
+  beforeEach(() => {
+    clearBodyAndDocument()
+  })
+
+  describe('VERSION', () => {
+    it('should return plugin version', () => {
+      expect(Offcanvas.VERSION).toEqual(jasmine.any(String))
+    })
+  })
+
+  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 = [
+        '<div class="offcanvas">',
+        '  <a href="#" data-bs-dismiss="offcanvas">Close</a>',
+        '</div>'
+      ].join('')
+
+      const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+      const closeEl = fixtureEl.querySelector('a')
+      const offCanvas = new Offcanvas(offCanvasEl)
+
+      spyOn(offCanvas, 'hide')
+
+      closeEl.click()
+
+      expect(offCanvas._config.keyboard).toBe(true)
+      expect(offCanvas.hide).toHaveBeenCalled()
+    })
+
+    it('should hide if esc is pressed', () => {
+      fixtureEl.innerHTML = '<div class="offcanvas"></div>'
+
+      const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+      const offCanvas = new Offcanvas(offCanvasEl)
+      const keyDownEsc = createEvent('keydown')
+      keyDownEsc.key = 'Escape'
+
+      spyOn(offCanvas, 'hide')
+
+      offCanvasEl.dispatchEvent(keyDownEsc)
+
+      expect(offCanvas.hide).toHaveBeenCalled()
+    })
+
+    it('should not hide if esc is not pressed', () => {
+      fixtureEl.innerHTML = '<div class="offcanvas"></div>'
+
+      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()
+    })
+
+    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._config.keyboard).toBe(false)
+      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._backdrop._config.isVisible).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._backdrop._config.isVisible).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('options', () => {
+    it('if scroll is enabled, should allow body to scroll while offcanvas is open', done => {
+      fixtureEl.innerHTML = '<div class="offcanvas"></div>'
+
+      const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+      const offCanvas = new Offcanvas(offCanvasEl, { scroll: true })
+      const initialOverFlow = document.body.style.overflow
+
+      offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+        expect(document.body.style.overflow).toEqual(initialOverFlow)
+
+        offCanvas.hide()
+      })
+      offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
+        expect(document.body.style.overflow).toEqual(initialOverFlow)
+        done()
+      })
+      offCanvas.show()
+    })
+
+    it('if scroll is disabled, should not allow body to scroll while offcanvas is open', done => {
+      fixtureEl.innerHTML = '<div class="offcanvas"></div>'
+
+      const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+      const offCanvas = new Offcanvas(offCanvasEl, { scroll: false })
+
+      offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+        expect(document.body.style.overflow).toEqual('hidden')
+
+        offCanvas.hide()
+      })
+      offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
+        expect(document.body.style.overflow).not.toEqual('hidden')
+        done()
+      })
+      offCanvas.show()
+    })
+
+    it('should hide a shown element if user click on backdrop', done => {
+      fixtureEl.innerHTML = '<div class="offcanvas"></div>'
+
+      const offCanvasEl = fixtureEl.querySelector('div')
+      const offCanvas = new Offcanvas(offCanvasEl, { backdrop: true })
+
+      const clickEvent = document.createEvent('MouseEvents')
+      clickEvent.initEvent('mousedown', true, true)
+      spyOn(offCanvas._backdrop._config, 'clickCallback').and.callThrough()
+
+      offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+        expect(typeof offCanvas._backdrop._config.clickCallback).toBe('function')
+
+        offCanvas._backdrop._getElement().dispatchEvent(clickEvent)
+      })
+
+      offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
+        expect(offCanvas._backdrop._config.clickCallback).toHaveBeenCalled()
+        done()
+      })
+
+      offCanvas.show()
+    })
+
+    it('should not enforce focus if focus scroll is allowed', done => {
+      fixtureEl.innerHTML = '<div class="offcanvas"></div>'
+
+      const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+      const offCanvas = new Offcanvas(offCanvasEl, {
+        scroll: true
+      })
+
+      spyOn(offCanvas, '_enforceFocusOnElement')
+
+      offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+        expect(offCanvas._enforceFocusOnElement).not.toHaveBeenCalled()
+        done()
+      })
+
+      offCanvas.show()
+    })
+  })
+
+  describe('toggle', () => {
+    it('should call show method if show class is not present', () => {
+      fixtureEl.innerHTML = '<div class="offcanvas"></div>'
+
+      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 = '<div class="offcanvas"></div>'
+
+      const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+      const offCanvas = new Offcanvas(offCanvasEl)
+      offCanvas.show()
+      expect(offCanvasEl.classList.contains('show')).toBe(true)
+
+      spyOn(offCanvas, 'hide')
+
+      offCanvas.toggle()
+
+      expect(offCanvas.hide).toHaveBeenCalled()
+    })
+  })
+
+  describe('show', () => {
+    it('should do nothing if already shown', () => {
+      fixtureEl.innerHTML = '<div class="offcanvas show"></div>'
+
+      const offCanvasEl = fixtureEl.querySelector('div')
+      const offCanvas = new Offcanvas(offCanvasEl)
+      offCanvas.show()
+
+      expect(offCanvasEl.classList.contains('show')).toBe(true)
+
+      spyOn(offCanvas._backdrop, 'show').and.callThrough()
+      spyOn(EventHandler, 'trigger').and.callThrough()
+      offCanvas.show()
+
+      expect(EventHandler.trigger).not.toHaveBeenCalled()
+      expect(offCanvas._backdrop.show).not.toHaveBeenCalled()
+    })
+
+    it('should show a hidden element', done => {
+      fixtureEl.innerHTML = '<div class="offcanvas"></div>'
+
+      const offCanvasEl = fixtureEl.querySelector('div')
+      const offCanvas = new Offcanvas(offCanvasEl)
+      spyOn(offCanvas._backdrop, 'show').and.callThrough()
+
+      offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+        expect(offCanvasEl.classList.contains('show')).toEqual(true)
+        expect(offCanvas._backdrop.show).toHaveBeenCalled()
+        done()
+      })
+
+      offCanvas.show()
+    })
+
+    it('should not fire shown when show is prevented', done => {
+      fixtureEl.innerHTML = '<div class="offcanvas"></div>'
+
+      const offCanvasEl = fixtureEl.querySelector('div')
+      const offCanvas = new Offcanvas(offCanvasEl)
+      spyOn(offCanvas._backdrop, 'show').and.callThrough()
+
+      const expectEnd = () => {
+        setTimeout(() => {
+          expect(offCanvas._backdrop.show).not.toHaveBeenCalled()
+          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()
+    })
+
+    it('on window load, should make visible an offcanvas element, if its markup contains class "show"', done => {
+      fixtureEl.innerHTML = '<div class="offcanvas show"></div>'
+
+      const offCanvasEl = fixtureEl.querySelector('div')
+      spyOn(Offcanvas.prototype, 'show').and.callThrough()
+
+      offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+        done()
+      })
+
+      window.dispatchEvent(createEvent('load'))
+
+      const instance = Offcanvas.getInstance(offCanvasEl)
+      expect(instance).not.toBeNull()
+      expect(Offcanvas.prototype.show).toHaveBeenCalled()
+    })
+
+    it('should enforce focus', done => {
+      fixtureEl.innerHTML = '<div class="offcanvas"></div>'
+
+      const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+      const offCanvas = new Offcanvas(offCanvasEl)
+
+      spyOn(offCanvas, '_enforceFocusOnElement')
+
+      offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+        expect(offCanvas._enforceFocusOnElement).toHaveBeenCalled()
+        done()
+      })
+
+      offCanvas.show()
+    })
+  })
+
+  describe('hide', () => {
+    it('should do nothing if already shown', () => {
+      fixtureEl.innerHTML = '<div class="offcanvas"></div>'
+
+      spyOn(EventHandler, 'trigger').and.callThrough()
+
+      const offCanvasEl = fixtureEl.querySelector('div')
+      const offCanvas = new Offcanvas(offCanvasEl)
+      spyOn(offCanvas._backdrop, 'hide').and.callThrough()
+
+      offCanvas.hide()
+      expect(offCanvas._backdrop.hide).not.toHaveBeenCalled()
+      expect(EventHandler.trigger).not.toHaveBeenCalled()
+    })
+
+    it('should hide a shown element', done => {
+      fixtureEl.innerHTML = '<div class="offcanvas"></div>'
+
+      const offCanvasEl = fixtureEl.querySelector('div')
+      const offCanvas = new Offcanvas(offCanvasEl)
+      spyOn(offCanvas._backdrop, 'hide').and.callThrough()
+      offCanvas.show()
+
+      offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
+        expect(offCanvasEl.classList.contains('show')).toEqual(false)
+        expect(offCanvas._backdrop.hide).toHaveBeenCalled()
+        done()
+      })
+
+      offCanvas.hide()
+    })
+
+    it('should not fire hidden when hide is prevented', done => {
+      fixtureEl.innerHTML = '<div class="offcanvas"></div>'
+
+      const offCanvasEl = fixtureEl.querySelector('div')
+      const offCanvas = new Offcanvas(offCanvasEl)
+      spyOn(offCanvas._backdrop, 'hide').and.callThrough()
+
+      offCanvas.show()
+
+      const expectEnd = () => {
+        setTimeout(() => {
+          expect(offCanvas._backdrop.hide).not.toHaveBeenCalled()
+          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('dispose', () => {
+    it('should dispose an offcanvas', () => {
+      fixtureEl.innerHTML = '<div class="offcanvas"></div>'
+
+      const offCanvasEl = fixtureEl.querySelector('div')
+      const offCanvas = new Offcanvas(offCanvasEl)
+      const backdrop = offCanvas._backdrop
+      spyOn(backdrop, 'dispose').and.callThrough()
+
+      expect(Offcanvas.getInstance(offCanvasEl)).toEqual(offCanvas)
+
+      spyOn(EventHandler, 'off')
+
+      offCanvas.dispose()
+
+      expect(backdrop.dispose).toHaveBeenCalled()
+      expect(offCanvas._backdrop).toBeNull()
+      expect(Offcanvas.getInstance(offCanvasEl)).toEqual(null)
+    })
+  })
+
+  describe('data-api', () => {
+    it('should not prevent event for input', done => {
+      fixtureEl.innerHTML = [
+        '<input type="checkbox" data-bs-toggle="offcanvas" data-bs-target="#offcanvasdiv1" />',
+        '<div id="offcanvasdiv1" class="offcanvas"></div>'
+      ].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 = [
+        '<a href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvasdiv1" class="disabled"></a>',
+        '<div id="offcanvasdiv1" class="offcanvas"></div>'
+      ].join('')
+
+      const target = fixtureEl.querySelector('a')
+
+      spyOn(Offcanvas.prototype, 'toggle')
+
+      target.click()
+
+      expect(Offcanvas.prototype.toggle).not.toHaveBeenCalled()
+    })
+
+    it('should call hide first, if another offcanvas is open', done => {
+      fixtureEl.innerHTML = [
+        '<button id="btn2" data-bs-toggle="offcanvas" data-bs-target="#offcanvas2" ></button>',
+        '<div id="offcanvas1" class="offcanvas"></div>',
+        '<div id="offcanvas2" class="offcanvas"></div>'
+      ].join('')
+
+      const trigger2 = fixtureEl.querySelector('#btn2')
+      const offcanvasEl1 = document.querySelector('#offcanvas1')
+      const offcanvasEl2 = document.querySelector('#offcanvas2')
+      const offcanvas1 = new Offcanvas(offcanvasEl1)
+
+      offcanvasEl1.addEventListener('shown.bs.offcanvas', () => {
+        trigger2.click()
+      })
+      offcanvasEl1.addEventListener('hidden.bs.offcanvas', () => {
+        expect(Offcanvas.getInstance(offcanvasEl2)).not.toBeNull()
+        done()
+      })
+      offcanvas1.show()
+    })
+
+    it('should focus on trigger element after closing offcanvas', done => {
+      fixtureEl.innerHTML = [
+        '<button id="btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" ></button>',
+        '<div id="offcanvas" class="offcanvas"></div>'
+      ].join('')
+
+      const trigger = fixtureEl.querySelector('#btn')
+      const offcanvasEl = fixtureEl.querySelector('#offcanvas')
+      const offcanvas = new Offcanvas(offcanvasEl)
+      spyOn(trigger, 'focus')
+
+      offcanvasEl.addEventListener('shown.bs.offcanvas', () => {
+        offcanvas.hide()
+      })
+      offcanvasEl.addEventListener('hidden.bs.offcanvas', () => {
+        setTimeout(() => {
+          expect(trigger.focus).toHaveBeenCalled()
+          done()
+        }, 5)
+      })
+
+      trigger.click()
+    })
+
+    it('should not focus on trigger element after closing offcanvas, if it is not visible', done => {
+      fixtureEl.innerHTML = [
+        '<button id="btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" ></button>',
+        '<div id="offcanvas" class="offcanvas"></div>'
+      ].join('')
+
+      const trigger = fixtureEl.querySelector('#btn')
+      const offcanvasEl = fixtureEl.querySelector('#offcanvas')
+      const offcanvas = new Offcanvas(offcanvasEl)
+      spyOn(trigger, 'focus')
+
+      offcanvasEl.addEventListener('shown.bs.offcanvas', () => {
+        trigger.style.display = 'none'
+        offcanvas.hide()
+      })
+      offcanvasEl.addEventListener('hidden.bs.offcanvas', () => {
+        setTimeout(() => {
+          expect(isVisible(trigger)).toBe(false)
+          expect(trigger.focus).not.toHaveBeenCalled()
+          done()
+        }, 5)
+      })
+
+      trigger.click()
+    })
+  })
+
+  describe('jQueryInterface', () => {
+    it('should create an offcanvas', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      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 = '<div></div>'
+
+      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 = '<div></div>'
+
+      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 = '<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) {
+        expect(error.message).toEqual(`No method named "${action}"`)
+      }
+    })
+
+    it('should call offcanvas method', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      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()
+    })
+
+    it('should create a offcanvas with given config', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface
+      jQueryMock.elements = [div]
+
+      jQueryMock.fn.offcanvas.call(jQueryMock, { scroll: true })
+      spyOn(Offcanvas.prototype, 'constructor')
+      expect(Offcanvas.prototype.constructor).not.toHaveBeenCalledWith(div, { scroll: true })
+
+      const offcanvas = Offcanvas.getInstance(div)
+      expect(offcanvas).toBeDefined()
+      expect(offcanvas._config.scroll).toBe(true)
+    })
+  })
+
+  describe('getInstance', () => {
+    it('should return offcanvas instance', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      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 = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      expect(Offcanvas.getInstance(div)).toEqual(null)
+    })
+  })
+})
diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js
index 3c04e7ac1..e5c235e2a 100644
--- a/js/tests/unit/popover.spec.js
+++ b/js/tests/unit/popover.spec.js
@@ -206,11 +206,9 @@ describe('Popover', () => {
       jQueryMock.fn.popover = Popover.jQueryInterface
       jQueryMock.elements = [popoverEl]
 
-      try {
+      expect(() => {
         jQueryMock.fn.popover.call(jQueryMock, action)
-      } catch (error) {
-        expect(error.message).toEqual(`No method named "${action}"`)
-      }
+      }).toThrowError(TypeError, `No method named "${action}"`)
     })
 
     it('should should call show method', () => {
diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js
index 45de56fbe..c4130a1aa 100644
--- a/js/tests/unit/scrollspy.spec.js
+++ b/js/tests/unit/scrollspy.spec.js
@@ -1,6 +1,5 @@
 import ScrollSpy from '../../src/scrollspy'
 import Manipulator from '../../src/dom/manipulator'
-import EventHandler from '../../src/dom/event-handler'
 
 /** Test helpers */
 import { getFixture, clearFixture, createEvent, jQueryMock } from '../helpers/fixture'
@@ -48,7 +47,24 @@ describe('ScrollSpy', () => {
     })
   })
 
+  describe('DATA_KEY', () => {
+    it('should return plugin data key', () => {
+      expect(ScrollSpy.DATA_KEY).toEqual('bs.scrollspy')
+    })
+  })
+
   describe('constructor', () => {
+    it('should take care of element either passed as a CSS selector or DOM element', () => {
+      fixtureEl.innerHTML = '<nav id="navigation"></nav><div class="content"></div>'
+
+      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 = [
         '<nav></nav>',
@@ -68,7 +84,7 @@ describe('ScrollSpy', () => {
       fixtureEl.innerHTML = [
         '<nav id="navigation" class="navbar">',
         '  <ul class="navbar-nav">',
-        '    <li class="nav-item active"><a class="nav-link" id="one-link" href="#">One</a></li>',
+        '    <li class="nav-item"><a class="nav-link active" id="one-link" href="#">One</a></li>',
         '    <li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>',
         '    <li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>',
         '  </ul>',
@@ -177,7 +193,7 @@ describe('ScrollSpy', () => {
         '<div id="header" style="height: 500px;"></div>',
         '<nav id="navigation" class="navbar">',
         ' <ul class="navbar-nav">',
-        '   <li class="nav-item active"><a class="nav-link" id="one-link" href="#one">One</a></li>',
+        '   <li class="nav-item"><a class="nav-link active" id="one-link" href="#one">One</a></li>',
         '   <li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>',
         '   <li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>',
         ' </ul>',
@@ -560,14 +576,18 @@ describe('ScrollSpy', () => {
 
   describe('dispose', () => {
     it('should dispose a scrollspy', () => {
-      spyOn(EventHandler, 'off')
       fixtureEl.innerHTML = '<div style="display: none;"></div>'
 
       const divEl = fixtureEl.querySelector('div')
+      spyOn(divEl, 'addEventListener').and.callThrough()
+      spyOn(divEl, 'removeEventListener').and.callThrough()
+
       const scrollSpy = new ScrollSpy(divEl)
+      expect(divEl.addEventListener).toHaveBeenCalledWith('scroll', jasmine.any(Function), jasmine.any(Boolean))
 
       scrollSpy.dispose()
-      expect(EventHandler.off).toHaveBeenCalledWith(divEl, '.bs.scrollspy')
+
+      expect(divEl.removeEventListener).toHaveBeenCalledWith('scroll', jasmine.any(Function), jasmine.any(Boolean))
     })
   })
 
@@ -585,6 +605,23 @@ describe('ScrollSpy', () => {
       expect(ScrollSpy.getInstance(div)).toBeDefined()
     })
 
+    it('should create a scrollspy with given config', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
+      jQueryMock.elements = [div]
+
+      jQueryMock.fn.scrollspy.call(jQueryMock, { offset: 15 })
+      spyOn(ScrollSpy.prototype, 'constructor')
+      expect(ScrollSpy.prototype.constructor).not.toHaveBeenCalledWith(div, { offset: 15 })
+
+      const scrollspy = ScrollSpy.getInstance(div)
+      expect(scrollspy).toBeDefined()
+      expect(scrollspy._config.offset).toBe(15)
+    })
+
     it('should not re create a scrollspy', () => {
       fixtureEl.innerHTML = '<div></div>'
 
@@ -625,11 +662,9 @@ describe('ScrollSpy', () => {
       jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
       jQueryMock.elements = [div]
 
-      try {
+      expect(() => {
         jQueryMock.fn.scrollspy.call(jQueryMock, action)
-      } catch (error) {
-        expect(error.message).toEqual(`No method named "${action}"`)
-      }
+      }).toThrowError(TypeError, `No method named "${action}"`)
     })
   })
 
diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index 67a85b2e4..c8e1475ad 100644
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -20,16 +20,56 @@ describe('Tab', () => {
     })
   })
 
+  describe('constructor', () => {
+    it('should take care of element either passed as a CSS selector or DOM element', () => {
+      fixtureEl.innerHTML = [
+        '<ul class="nav"><li><a href="#home" role="tab">Home</a></li></ul>',
+        '<ul><li id="home"></li></ul>'
+      ].join('')
+
+      const tabEl = fixtureEl.querySelector('[href="#home"]')
+      const tabBySelector = new Tab('[href="#home"]')
+      const tabByElement = new Tab(tabEl)
+
+      expect(tabBySelector._element).toEqual(tabEl)
+      expect(tabByElement._element).toEqual(tabEl)
+    })
+  })
+
   describe('show', () => {
-    it('should activate element by tab id', done => {
+    it('should activate element by tab id (using buttons, the preferred semantic way)', done => {
+      fixtureEl.innerHTML = [
+        '<ul class="nav" role="tablist">',
+        '  <li><button type="button" data-bs-target="#home" role="tab">Home</button></li>',
+        '  <li><button type="button" id="triggerProfile" data-bs-target="#profile" role="tab">Profile</button></li>',
+        '</ul>',
+        '<ul>',
+        '  <li id="home" role="tabpanel"></li>',
+        '  <li id="profile" role="tabpanel"></li>',
+        '</ul>'
+      ].join('')
+
+      const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')
+      const tab = new Tab(profileTriggerEl)
+
+      profileTriggerEl.addEventListener('shown.bs.tab', () => {
+        expect(fixtureEl.querySelector('#profile').classList.contains('active')).toEqual(true)
+        expect(profileTriggerEl.getAttribute('aria-selected')).toEqual('true')
+        done()
+      })
+
+      tab.show()
+    })
+
+    it('should activate element by tab id (using links for tabs - not ideal, but still supported)', done => {
       fixtureEl.innerHTML = [
-        '<ul class="nav">',
+        '<ul class="nav" role="tablist">',
         '  <li><a href="#home" role="tab">Home</a></li>',
-        '  <li><a id="triggerProfile" role="tab" href="#profile">Profile</a></li>',
+        '  <li><a id="triggerProfile" href="#profile" role="tab">Profile</a></li>',
         '</ul>',
         '<ul>',
-        '  <li id="home"></li>',
-        '  <li id="profile"></li>',
+        '  <li id="home" role="tabpanel"></li>',
+        '  <li id="profile" role="tabpanel"></li>',
         '</ul>'
       ].join('')
 
@@ -48,12 +88,12 @@ describe('Tab', () => {
     it('should activate element by tab id in ordered list', done => {
       fixtureEl.innerHTML = [
         '<ol class="nav nav-pills">',
-        '  <li><a href="#home">Home</a></li>',
-        '  <li><a id="triggerProfile" href="#profile">Profile</a></li>',
+        '  <li><button type="button" data-bs-target="#home" role="tab">Home</button></li>',
+        '  <li><button type="button" id="triggerProfile" href="#profile" role="tab">Profile</button></li>',
         '</ol>',
         '<ol>',
-        '  <li id="home"></li>',
-        '  <li id="profile"></li>',
+        '  <li id="home" role="tabpanel"></li>',
+        '  <li id="profile" role="tabpanel"></li>',
         '</ol>'
       ].join('')
 
@@ -71,10 +111,10 @@ describe('Tab', () => {
     it('should activate element by tab id in nav list', done => {
       fixtureEl.innerHTML = [
         '<nav class="nav">',
-        '  <a href="#home">Home</a>',
-        '  <a id="triggerProfile" href="#profile">Profile</a>',
+        '  <button type="button" data-bs-target="#home" role="tab">Home</button>',
+        '  <button type="button" id="triggerProfile" data-bs-target="#profile" role="tab">Profile</a>',
         '</nav>',
-        '<nav><div id="home"></div><div id="profile"></div></nav>'
+        '<div><div id="home" role="tabpanel"></div><div id="profile" role="tabpanel"></div></div>'
       ].join('')
 
       const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')
@@ -90,11 +130,11 @@ describe('Tab', () => {
 
     it('should activate element by tab id in list group', done => {
       fixtureEl.innerHTML = [
-        '<div class="list-group">',
-        '  <a href="#home">Home</a>',
-        '  <a id="triggerProfile" href="#profile">Profile</a>',
+        '<div class="list-group" role="tablist">',
+        '  <button type="button" data-bs-target="#home" role="tab">Home</button>',
+        '  <button type="button" id="triggerProfile" data-bs-target="#profile" role="tab">Profile</button>',
         '</div>',
-        '<nav><div id="home"></div><div id="profile"></div></nav>'
+        '<div><div id="home" role="tabpanel"></div><div id="profile" role="tabpanel"></div></div>'
       ].join('')
 
       const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')
@@ -135,8 +175,8 @@ describe('Tab', () => {
     it('should not fire shown when tab is already active', done => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs" role="tablist">',
-        '  <li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab">Home</a></li>',
-        '  <li class="nav-item" role="presentation"><a href="#profile" class="nav-link" role="tab">Profile</a></li>',
+        '  <li class="nav-item" role="presentation"><button type="button" data-bs-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>',
+        '  <li class="nav-item" role="presentation"><button type="button" data-bs-target="#profile" class="nav-link" role="tab">Profile</button></li>',
         '</ul>',
         '<div class="tab-content">',
         '  <div class="tab-pane active" id="home" role="tabpanel"></div>',
@@ -144,7 +184,7 @@ describe('Tab', () => {
         '</div>'
       ].join('')
 
-      const triggerActive = fixtureEl.querySelector('a.active')
+      const triggerActive = fixtureEl.querySelector('button.active')
       const tab = new Tab(triggerActive)
 
       triggerActive.addEventListener('shown.bs.tab', () => {
@@ -158,37 +198,11 @@ describe('Tab', () => {
       }, 30)
     })
 
-    it('should not fire shown when tab is disabled', done => {
-      fixtureEl.innerHTML = [
-        '<ul class="nav nav-tabs" role="tablist">',
-        '  <li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab">Home</a></li>',
-        '  <li class="nav-item" role="presentation"><a href="#profile" class="nav-link disabled" role="tab">Profile</a></li>',
-        '</ul>',
-        '<div class="tab-content">',
-        '  <div class="tab-pane active" id="home" role="tabpanel"></div>',
-        '  <div class="tab-pane" id="profile" role="tabpanel"></div>',
-        '</div>'
-      ].join('')
-
-      const triggerDisabled = fixtureEl.querySelector('a.disabled')
-      const tab = new Tab(triggerDisabled)
-
-      triggerDisabled.addEventListener('shown.bs.tab', () => {
-        throw new Error('should not trigger shown event')
-      })
-
-      tab.show()
-      setTimeout(() => {
-        expect().nothing()
-        done()
-      }, 30)
-    })
-
     it('show and shown events should reference correct relatedTarget', done => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs" role="tablist">',
-        '  <li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab">Home</a></li>',
-        '  <li class="nav-item" role="presentation"><a id="triggerProfile" href="#profile" class="nav-link" role="tab">Profile</a></li>',
+        '  <li class="nav-item" role="presentation"><button type="button" data-bs-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>',
+        '  <li class="nav-item" role="presentation"><button type="button" id="triggerProfile" data-bs-target="#profile" class="nav-link" role="tab">Profile</button></li>',
         '</ul>',
         '<div class="tab-content">',
         '  <div class="tab-pane active" id="home" role="tabpanel"></div>',
@@ -200,13 +214,13 @@ describe('Tab', () => {
       const secondTab = new Tab(secondTabTrigger)
 
       secondTabTrigger.addEventListener('show.bs.tab', ev => {
-        expect(ev.relatedTarget.hash).toEqual('#home')
+        expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#home')
       })
 
       secondTabTrigger.addEventListener('shown.bs.tab', ev => {
-        expect(ev.relatedTarget.hash).toEqual('#home')
+        expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#home')
         expect(secondTabTrigger.getAttribute('aria-selected')).toEqual('true')
-        expect(fixtureEl.querySelector('a:not(.active)').getAttribute('aria-selected')).toEqual('false')
+        expect(fixtureEl.querySelector('button:not(.active)').getAttribute('aria-selected')).toEqual('false')
         done()
       })
 
@@ -215,13 +229,13 @@ describe('Tab', () => {
 
     it('should fire hide and hidden events', done => {
       fixtureEl.innerHTML = [
-        '<ul class="nav">',
-        '  <li><a href="#home">Home</a></li>',
-        '  <li><a href="#profile">Profile</a></li>',
+        '<ul class="nav" role="tablist">',
+        '  <li><button type="button" data-bs-target="#home" role="tab">Home</button></li>',
+        '  <li><button type="button" data-bs-target="#profile">Profile</button></li>',
         '</ul>'
       ].join('')
 
-      const triggerList = fixtureEl.querySelectorAll('a')
+      const triggerList = fixtureEl.querySelectorAll('button')
       const firstTab = new Tab(triggerList[0])
       const secondTab = new Tab(triggerList[1])
 
@@ -232,12 +246,12 @@ describe('Tab', () => {
 
       triggerList[0].addEventListener('hide.bs.tab', ev => {
         hideCalled = true
-        expect(ev.relatedTarget.hash).toEqual('#profile')
+        expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#profile')
       })
 
       triggerList[0].addEventListener('hidden.bs.tab', ev => {
         expect(hideCalled).toEqual(true)
-        expect(ev.relatedTarget.hash).toEqual('#profile')
+        expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#profile')
         done()
       })
 
@@ -246,13 +260,13 @@ describe('Tab', () => {
 
     it('should not fire hidden when hide is prevented', done => {
       fixtureEl.innerHTML = [
-        '<ul class="nav">',
-        '  <li><a href="#home">Home</a></li>',
-        '  <li><a href="#profile">Profile</a></li>',
+        '<ul class="nav" role="tablist">',
+        '  <li><button type="button" data-bs-target="#home" role="tab">Home</button></li>',
+        '  <li><button type="button" data-bs-target="#profile" role="tab">Profile</button></li>',
         '</ul>'
       ].join('')
 
-      const triggerList = fixtureEl.querySelectorAll('a')
+      const triggerList = fixtureEl.querySelectorAll('button')
       const firstTab = new Tab(triggerList[0])
       const secondTab = new Tab(triggerList[1])
       const expectDone = () => {
@@ -397,11 +411,9 @@ describe('Tab', () => {
       jQueryMock.fn.tab = Tab.jQueryInterface
       jQueryMock.elements = [div]
 
-      try {
+      expect(() => {
         jQueryMock.fn.tab.call(jQueryMock, action)
-      } catch (error) {
-        expect(error.message).toEqual(`No method named "${action}"`)
-      }
+      }).toThrowError(TypeError, `No method named "${action}"`)
     })
   })
 
@@ -425,8 +437,8 @@ describe('Tab', () => {
     it('should create dynamically a tab', done => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs" role="tablist">',
-        '  <li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab">Home</a></li>',
-        '  <li class="nav-item" role="presentation"><a id="triggerProfile" data-bs-toggle="tab" href="#profile" class="nav-link" role="tab">Profile</a></li>',
+        '  <li class="nav-item" role="presentation"><button type="button" data-bs-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>',
+        '  <li class="nav-item" role="presentation"><button type="button" id="triggerProfile" data-bs-toggle="tab" data-bs-target="#profile" class="nav-link" role="tab">Profile</button></li>',
         '</ul>',
         '<div class="tab-content">',
         '  <div class="tab-pane active" id="home" role="tabpanel"></div>',
@@ -468,18 +480,75 @@ describe('Tab', () => {
       expect(fixtureEl.querySelector('li:last-child .dropdown-menu a:first-child').classList.contains('active')).toEqual(false)
     })
 
+    it('selecting a dropdown tab does not activate another', () => {
+      const nav1 = [
+        '<ul class="nav nav-tabs" id="nav1">',
+        '  <li class="nav-item active"><a class="nav-link" href="#home" data-bs-toggle="tab">Home</a></li>',
+        '  <li class="nav-item dropdown">',
+        '    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>',
+        '    <div class="dropdown-menu">',
+        '      <a class="dropdown-item" href="#dropdown1" id="dropdown1-tab" data-bs-toggle="tab">@fat</a>',
+        '    </div>',
+        '  </li>',
+        '</ul>'
+      ].join('')
+      const nav2 = [
+        '<ul class="nav nav-tabs" id="nav2">',
+        '  <li class="nav-item active"><a class="nav-link" href="#home" data-bs-toggle="tab">Home</a></li>',
+        '  <li class="nav-item dropdown">',
+        '    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>',
+        '    <div class="dropdown-menu">',
+        '      <a class="dropdown-item" href="#dropdown1" id="dropdown1-tab" data-bs-toggle="tab">@fat</a>',
+        '    </div>',
+        '  </li>',
+        '</ul>'
+      ].join('')
+
+      fixtureEl.innerHTML = nav1 + nav2
+
+      const firstDropItem = fixtureEl.querySelector('#nav1 .dropdown-item')
+
+      firstDropItem.click()
+      expect(firstDropItem.classList.contains('active')).toEqual(true)
+      expect(fixtureEl.querySelector('#nav1 .dropdown-toggle').classList.contains('active')).toEqual(true)
+      expect(fixtureEl.querySelector('#nav2 .dropdown-toggle').classList.contains('active')).toEqual(false)
+      expect(fixtureEl.querySelector('#nav2 .dropdown-item').classList.contains('active')).toEqual(false)
+    })
+
+    it('should support li > .dropdown-item', () => {
+      fixtureEl.innerHTML = [
+        '<ul class="nav nav-tabs">',
+        '  <li class="nav-item"><a class="nav-link active" href="#home" data-bs-toggle="tab">Home</a></li>',
+        '  <li class="nav-item"><a class="nav-link" href="#profile" data-bs-toggle="tab">Profile</a></li>',
+        '  <li class="nav-item dropdown">',
+        '    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>',
+        '    <ul class="dropdown-menu">',
+        '      <li><a class="dropdown-item" href="#dropdown1" id="dropdown1-tab" data-bs-toggle="tab">@fat</a></li>',
+        '      <li><a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-bs-toggle="tab">@mdo</a></li>',
+        '    </ul>',
+        '  </li>',
+        '</ul>'
+      ].join('')
+
+      const firstDropItem = fixtureEl.querySelector('.dropdown-item')
+
+      firstDropItem.click()
+      expect(firstDropItem.classList.contains('active')).toEqual(true)
+      expect(fixtureEl.querySelector('.nav-link').classList.contains('active')).toEqual(false)
+    })
+
     it('should handle nested tabs', done => {
       fixtureEl.innerHTML = [
         '<nav class="nav nav-tabs" role="tablist">',
-        '  <a id="tab1" href="#x-tab1" class="nav-link" data-bs-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>',
-        '  <a href="#x-tab2" class="nav-link active" data-bs-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>',
-        '  <a href="#x-tab3" class="nav-link" data-bs-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>',
+        '  <button type="button" id="tab1" data-bs-target="#x-tab1" class="nav-link" data-bs-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</button>',
+        '  <button type="button" data-bs-target="#x-tab2" class="nav-link active" data-bs-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</button>',
+        '  <button type="button" data-bs-target="#x-tab3" class="nav-link" data-bs-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</button>',
         '</nav>',
         '<div class="tab-content">',
         '  <div class="tab-pane" id="x-tab1" role="tabpanel">',
         '    <nav class="nav nav-tabs" role="tablist">',
-        '      <a href="#nested-tab1" class="nav-link active" data-bs-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>',
-        '      <a id="tabNested2" href="#nested-tab2" class="nav-link" data-bs-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>',
+        '      <button type="button" data-bs-target="#nested-tab1" class="nav-link active" data-bs-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</button>',
+        '      <button type="button" id="tabNested2" data-bs-target="#nested-tab2" class="nav-link" data-bs-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</button>',
         '    </nav>',
         '    <div class="tab-content">',
         '      <div class="tab-pane active" id="nested-tab1" role="tabpanel">Nested Tab1 Content</div>',
@@ -511,8 +580,8 @@ describe('Tab', () => {
     it('should not remove fade class if no active pane is present', done => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs" role="tablist">',
-        '  <li class="nav-item" role="presentation"><a id="tab-home" href="#home" class="nav-link" data-bs-toggle="tab" role="tab">Home</a></li>',
-        '  <li class="nav-item" role="presentation"><a id="tab-profile" href="#profile" class="nav-link" data-bs-toggle="tab" role="tab">Profile</a></li>',
+        '  <li class="nav-item" role="presentation"><button type="button" id="tab-home" data-bs-target="#home" class="nav-link" data-bs-toggle="tab" role="tab">Home</button></li>',
+        '  <li class="nav-item" role="presentation"><button type="button" id="tab-profile" data-bs-target="#profile" class="nav-link" data-bs-toggle="tab" role="tab">Profile</button></li>',
         '</ul>',
         '<div class="tab-content">',
         '  <div class="tab-pane fade" id="home" role="tabpanel"></div>',
@@ -549,10 +618,10 @@ describe('Tab', () => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs" role="tablist">',
         '  <li class="nav-item" role="presentation">',
-        '    <a class="nav-link nav-tab" href="#home" role="tab" data-bs-toggle="tab">Home</a>',
+        '    <button type="button" class="nav-link nav-tab" data-bs-target="#home" role="tab" data-bs-toggle="tab">Home</button>',
         '  </li>',
         '  <li class="nav-item" role="presentation">',
-        '    <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-bs-toggle="tab">Profile</a>',
+        '    <button type="button" id="secondNav" class="nav-link nav-tab" data-bs-target="#profile" role="tab" data-bs-toggle="tab">Profile</button>',
         '  </li>',
         '</ul>',
         '<div class="tab-content">',
@@ -575,10 +644,10 @@ describe('Tab', () => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs" role="tablist">',
         '  <li class="nav-item" role="presentation">',
-        '    <a class="nav-link nav-tab" href="#home" role="tab" data-bs-toggle="tab">Home</a>',
+        '    <button type="button" class="nav-link nav-tab" data-bs-target="#home" role="tab" data-bs-toggle="tab">Home</button>',
         '  </li>',
         '  <li class="nav-item" role="presentation">',
-        '    <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-bs-toggle="tab">Profile</a>',
+        '    <button type="button" id="secondNav" class="nav-link nav-tab" data-bs-target="#profile" role="tab" data-bs-toggle="tab">Profile</button>',
         '  </li>',
         '</ul>',
         '<div class="tab-content">',
@@ -596,5 +665,74 @@ describe('Tab', () => {
 
       secondNavEl.click()
     })
+
+    it('should prevent default when the trigger is <a> or <area>', done => {
+      fixtureEl.innerHTML = [
+        '<ul class="nav" role="tablist">',
+        '  <li><a type="button" href="#test"  class="active" role="tab" data-bs-toggle="tab">Home</a></li>',
+        '  <li><a type="button" href="#test2" role="tab" data-bs-toggle="tab">Home</a></li>',
+        '</ul>'
+      ].join('')
+
+      const tabEl = fixtureEl.querySelector('[href="#test2"]')
+      spyOn(Event.prototype, 'preventDefault').and.callThrough()
+
+      tabEl.addEventListener('shown.bs.tab', () => {
+        expect(tabEl.classList.contains('active')).toEqual(true)
+        expect(Event.prototype.preventDefault).toHaveBeenCalled()
+        done()
+      })
+
+      tabEl.click()
+    })
+
+    it('should not fire shown when tab has disabled attribute', done => {
+      fixtureEl.innerHTML = [
+        '<ul class="nav nav-tabs" role="tablist">',
+        '  <li class="nav-item" role="presentation"><button type="button" data-bs-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>',
+        '  <li class="nav-item" role="presentation"><button type="button" data-bs-target="#profile" class="nav-link" disabled role="tab">Profile</button></li>',
+        '</ul>',
+        '<div class="tab-content">',
+        '  <div class="tab-pane active" id="home" role="tabpanel"></div>',
+        '  <div class="tab-pane" id="profile" role="tabpanel"></div>',
+        '</div>'
+      ].join('')
+
+      const triggerDisabled = fixtureEl.querySelector('button[disabled]')
+      triggerDisabled.addEventListener('shown.bs.tab', () => {
+        throw new Error('should not trigger shown event')
+      })
+
+      triggerDisabled.click()
+      setTimeout(() => {
+        expect().nothing()
+        done()
+      }, 30)
+    })
+
+    it('should not fire shown when tab has disabled class', done => {
+      fixtureEl.innerHTML = [
+        '<ul class="nav nav-tabs" role="tablist">',
+        '  <li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab" aria-selected="true">Home</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#profile" class="nav-link disabled" role="tab">Profile</a></li>',
+        '</ul>',
+        '<div class="tab-content">',
+        '  <div class="tab-pane active" id="home" role="tabpanel"></div>',
+        '  <div class="tab-pane" id="profile" role="tabpanel"></div>',
+        '</div>'
+      ].join('')
+
+      const triggerDisabled = fixtureEl.querySelector('a.disabled')
+
+      triggerDisabled.addEventListener('shown.bs.tab', () => {
+        throw new Error('should not trigger shown event')
+      })
+
+      triggerDisabled.click()
+      setTimeout(() => {
+        expect().nothing()
+        done()
+      }, 30)
+    })
   })
 })
diff --git a/js/tests/unit/toast.spec.js b/js/tests/unit/toast.spec.js
index cc873d1fe..d298dc993 100644
--- a/js/tests/unit/toast.spec.js
+++ b/js/tests/unit/toast.spec.js
@@ -20,7 +20,24 @@ describe('Toast', () => {
     })
   })
 
+  describe('DATA_KEY', () => {
+    it('should return plugin data key', () => {
+      expect(Toast.DATA_KEY).toEqual('bs.toast')
+    })
+  })
+
   describe('constructor', () => {
+    it('should take care of element either passed as a CSS selector or DOM element', () => {
+      fixtureEl.innerHTML = '<div class="toast"></div>'
+
+      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 = [
         '<div class="toast">',
@@ -274,13 +291,18 @@ describe('Toast', () => {
       fixtureEl.innerHTML = '<div></div>'
 
       const toastEl = fixtureEl.querySelector('div')
+      spyOn(toastEl, 'addEventListener').and.callThrough()
+      spyOn(toastEl, 'removeEventListener').and.callThrough()
+
       const toast = new Toast(toastEl)
 
       expect(Toast.getInstance(toastEl)).toBeDefined()
+      expect(toastEl.addEventListener).toHaveBeenCalledWith('click', jasmine.any(Function), jasmine.any(Boolean))
 
       toast.dispose()
 
       expect(Toast.getInstance(toastEl)).toBeNull()
+      expect(toastEl.removeEventListener).toHaveBeenCalledWith('click', jasmine.any(Function), jasmine.any(Boolean))
     })
 
     it('should allow to destroy toast and hide it before that', done => {
@@ -368,11 +390,9 @@ describe('Toast', () => {
       jQueryMock.fn.toast = Toast.jQueryInterface
       jQueryMock.elements = [div]
 
-      try {
+      expect(() => {
         jQueryMock.fn.toast.call(jQueryMock, action)
-      } catch (error) {
-        expect(error.message).toEqual(`No method named "${action}"`)
-      }
+      }).toThrowError(TypeError, `No method named "${action}"`)
     })
   })
 
diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js
index 9ea9096de..399f1f22a 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 = '<a href="#" id="tooltipEl" rel="tooltip" title="Nice and short title">'
+
+      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 = '<a href="#" rel="tooltip" data-bs-sanitize="false" title="Another tooltip">'
 
@@ -107,6 +118,41 @@ describe('Tooltip', () => {
       tooltipInContainerEl.click()
     })
 
+    it('should create offset modifier when offset is passed as a function', done => {
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Offset from function">'
+
+      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)
+            done()
+          }
+        }
+      })
+
+      const offset = tooltip._getOffset()
+
+      expect(typeof offset).toEqual('function')
+
+      tooltip.show()
+    })
+
+    it('should create offset modifier when offset option is passed in data attribute', () => {
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-bs-offset="10,20" title="Another tooltip">'
+
+      const tooltipEl = fixtureEl.querySelector('a')
+      const tooltip = new Tooltip(tooltipEl)
+
+      expect(tooltip._getOffset()).toEqual([10, 20])
+    })
+
     it('should allow to pass config to Popper with `popperConfig`', () => {
       fixtureEl.innerHTML = '<a href="#" rel="tooltip">'
 
@@ -121,6 +167,21 @@ describe('Tooltip', () => {
 
       expect(popperConfig.placement).toEqual('left')
     })
+
+    it('should allow to pass config to Popper with `popperConfig` as a function', () => {
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip">'
+
+      const tooltipEl = fixtureEl.querySelector('a')
+      const getPopperConfig = jasmine.createSpy('getPopperConfig').and.returnValue({ placement: 'left' })
+      const tooltip = new Tooltip(tooltipEl, {
+        popperConfig: getPopperConfig
+      })
+
+      const popperConfig = tooltip._getPopperConfig('top')
+
+      expect(getPopperConfig).toHaveBeenCalled()
+      expect(popperConfig.placement).toEqual('left')
+    })
   })
 
   describe('enable', () => {
@@ -277,13 +338,45 @@ describe('Tooltip', () => {
       fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
+      const addEventSpy = spyOn(tooltipEl, 'addEventListener').and.callThrough()
+      const removeEventSpy = spyOn(tooltipEl, 'removeEventListener').and.callThrough()
+
       const tooltip = new Tooltip(tooltipEl)
 
       expect(Tooltip.getInstance(tooltipEl)).toEqual(tooltip)
 
+      const expectedArgs = [
+        ['mouseover', jasmine.any(Function), jasmine.any(Boolean)],
+        ['mouseout', jasmine.any(Function), jasmine.any(Boolean)],
+        ['focusin', jasmine.any(Function), jasmine.any(Boolean)],
+        ['focusout', jasmine.any(Function), jasmine.any(Boolean)]
+      ]
+
+      expect(addEventSpy.calls.allArgs()).toEqual(expectedArgs)
+
       tooltip.dispose()
 
       expect(Tooltip.getInstance(tooltipEl)).toEqual(null)
+      expect(removeEventSpy.calls.allArgs()).toEqual(expectedArgs)
+    })
+
+    it('should destroy a tooltip after it is shown and hidden', done => {
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+
+      const tooltipEl = fixtureEl.querySelector('a')
+      const tooltip = new Tooltip(tooltipEl)
+
+      tooltipEl.addEventListener('shown.bs.tooltip', () => {
+        tooltip.hide()
+      })
+      tooltipEl.addEventListener('hidden.bs.tooltip', () => {
+        tooltip.dispose()
+        expect(tooltip.tip).toEqual(null)
+        expect(Tooltip.getInstance(tooltipEl)).toEqual(null)
+        done()
+      })
+
+      tooltip.show()
     })
 
     it('should destroy a tooltip and remove it from the dom', done => {
@@ -357,7 +450,7 @@ describe('Tooltip', () => {
 
       tooltipEl.addEventListener('shown.bs.tooltip', () => {
         expect(document.querySelector('.tooltip')).not.toBeNull()
-        expect(EventHandler.on).toHaveBeenCalled()
+        expect(EventHandler.on).toHaveBeenCalledWith(jasmine.any(Object), 'mouseover', noop)
         document.documentElement.ontouchstart = undefined
         done()
       })
@@ -483,24 +576,6 @@ describe('Tooltip', () => {
       tooltip.show()
     })
 
-    it('should show a tooltip with offset as a function', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
-
-      const spy = jasmine.createSpy('offset').and.returnValue({})
-      const tooltipEl = fixtureEl.querySelector('a')
-      const tooltip = new Tooltip(tooltipEl, {
-        offset: spy
-      })
-
-      tooltipEl.addEventListener('shown.bs.tooltip', () => {
-        expect(document.querySelector('.tooltip')).toBeDefined()
-        expect(spy).toHaveBeenCalled()
-        done()
-      })
-
-      tooltip.show()
-    })
-
     it('should show a tooltip without the animation', done => {
       fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
@@ -633,6 +708,100 @@ describe('Tooltip', () => {
       tooltipEl.dispatchEvent(createEvent('mouseover'))
     })
 
+    it('should not hide tooltip if leave event occurs and interaction remains inside trigger', done => {
+      fixtureEl.innerHTML = [
+        '<a href="#" rel="tooltip" title="Another tooltip">',
+        '<b>Trigger</b>',
+        'the tooltip',
+        '</a>'
+      ]
+
+      const tooltipEl = fixtureEl.querySelector('a')
+      const tooltip = new Tooltip(tooltipEl)
+      const triggerChild = tooltipEl.querySelector('b')
+
+      spyOn(tooltip, 'hide').and.callThrough()
+
+      tooltipEl.addEventListener('mouseover', () => {
+        const moveMouseToChildEvent = createEvent('mouseout')
+        Object.defineProperty(moveMouseToChildEvent, 'relatedTarget', {
+          value: triggerChild
+        })
+
+        tooltipEl.dispatchEvent(moveMouseToChildEvent)
+      })
+
+      tooltipEl.addEventListener('mouseout', () => {
+        expect(tooltip.hide).not.toHaveBeenCalled()
+        done()
+      })
+
+      tooltipEl.dispatchEvent(createEvent('mouseover'))
+    })
+
+    it('should properly maintain tooltip state if leave event occurs and enter event occurs during hide transition', done => {
+      // Style this tooltip to give it plenty of room for popper to do what it wants
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip" data-bs-placement="top" style="position:fixed;left:50%;top:50%;">Trigger</a>'
+
+      const tooltipEl = fixtureEl.querySelector('a')
+      const tooltip = new Tooltip(tooltipEl)
+
+      spyOn(window, 'getComputedStyle').and.returnValue({
+        transitionDuration: '0.15s',
+        transitionDelay: '0s'
+      })
+
+      setTimeout(() => {
+        expect(tooltip._popper).not.toBeNull()
+        expect(tooltip.getTipElement().getAttribute('data-popper-placement')).toBe('top')
+        tooltipEl.dispatchEvent(createEvent('mouseout'))
+
+        setTimeout(() => {
+          expect(tooltip.getTipElement().classList.contains('show')).toEqual(false)
+          tooltipEl.dispatchEvent(createEvent('mouseover'))
+        }, 100)
+
+        setTimeout(() => {
+          expect(tooltip._popper).not.toBeNull()
+          expect(tooltip.getTipElement().getAttribute('data-popper-placement')).toBe('top')
+          done()
+        }, 200)
+      }, 0)
+
+      tooltipEl.dispatchEvent(createEvent('mouseover'))
+    })
+
+    it('should only trigger inserted event if a new tooltip element was created', done => {
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+
+      const tooltipEl = fixtureEl.querySelector('a')
+      const tooltip = new Tooltip(tooltipEl)
+
+      spyOn(window, 'getComputedStyle').and.returnValue({
+        transitionDuration: '0.15s',
+        transitionDelay: '0s'
+      })
+
+      const insertedFunc = jasmine.createSpy()
+      tooltipEl.addEventListener('inserted.bs.tooltip', insertedFunc)
+
+      setTimeout(() => {
+        expect(insertedFunc).toHaveBeenCalledTimes(1)
+        tooltip.hide()
+
+        setTimeout(() => {
+          tooltip.show()
+        }, 100)
+
+        setTimeout(() => {
+          expect(insertedFunc).toHaveBeenCalledTimes(1)
+          done()
+        }, 200)
+      }, 0)
+
+      tooltip.show()
+    })
+
     it('should show a tooltip with custom class provided in data attributes', done => {
       fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip" data-bs-custom-class="custom-class">'
 
@@ -720,7 +889,7 @@ describe('Tooltip', () => {
 
       tooltipEl.addEventListener('hidden.bs.tooltip', () => {
         expect(document.querySelector('.tooltip')).toBeNull()
-        expect(EventHandler.off).toHaveBeenCalled()
+        expect(EventHandler.off).toHaveBeenCalledWith(jasmine.any(Object), 'mouseover', noop)
         document.documentElement.ontouchstart = undefined
         done()
       })
@@ -789,18 +958,18 @@ describe('Tooltip', () => {
   })
 
   describe('update', () => {
-    it('should call popper schedule update', done => {
+    it('should call popper update', done => {
       fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
 
       tooltipEl.addEventListener('shown.bs.tooltip', () => {
-        spyOn(tooltip._popper, 'scheduleUpdate')
+        spyOn(tooltip._popper, 'update')
 
         tooltip.update()
 
-        expect(tooltip._popper.scheduleUpdate).toHaveBeenCalled()
+        expect(tooltip._popper.update).toHaveBeenCalled()
         done()
       })
 
@@ -1206,11 +1375,9 @@ describe('Tooltip', () => {
       jQueryMock.fn.tooltip = Tooltip.jQueryInterface
       jQueryMock.elements = [div]
 
-      try {
+      expect(() => {
         jQueryMock.fn.tooltip.call(jQueryMock, action)
-      } catch (error) {
-        expect(error.message).toEqual(`No method named "${action}"`)
-      }
+      }).toThrowError(TypeError, `No method named "${action}"`)
     })
   })
 })
diff --git a/js/tests/unit/util/backdrop.spec.js b/js/tests/unit/util/backdrop.spec.js
new file mode 100644
index 000000000..0a20a13bc
--- /dev/null
+++ b/js/tests/unit/util/backdrop.spec.js
@@ -0,0 +1,241 @@
+import Backdrop from '../../../src/util/backdrop'
+import { getTransitionDurationFromElement } from '../../../src/util/index'
+import { clearFixture, getFixture } from '../../helpers/fixture'
+
+const CLASS_BACKDROP = '.modal-backdrop'
+const CLASS_NAME_FADE = 'fade'
+const CLASS_NAME_SHOW = 'show'
+
+describe('Backdrop', () => {
+  let fixtureEl
+
+  beforeAll(() => {
+    fixtureEl = getFixture()
+  })
+
+  afterEach(() => {
+    clearFixture()
+    const list = document.querySelectorAll(CLASS_BACKDROP)
+
+    list.forEach(el => {
+      document.body.removeChild(el)
+    })
+  })
+
+  describe('show', () => {
+    it('if it is "shown", should append the backdrop html once, on show, and contain "show" class', done => {
+      const instance = new Backdrop({
+        isVisible: true,
+        isAnimated: false
+      })
+      const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
+
+      expect(getElements().length).toEqual(0)
+
+      instance.show()
+      instance.show(() => {
+        expect(getElements().length).toEqual(1)
+        getElements().forEach(el => {
+          expect(el.classList.contains(CLASS_NAME_SHOW)).toEqual(true)
+        })
+        done()
+      })
+    })
+
+    it('if it is not "shown", should not append the backdrop html', done => {
+      const instance = new Backdrop({
+        isVisible: false,
+        isAnimated: true
+      })
+      const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
+
+      expect(getElements().length).toEqual(0)
+      instance.show(() => {
+        expect(getElements().length).toEqual(0)
+        done()
+      })
+    })
+
+    it('if it is "shown" and "animated", should append the backdrop html once, and contain "fade" class', done => {
+      const instance = new Backdrop({
+        isVisible: true,
+        isAnimated: true
+      })
+      const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
+
+      expect(getElements().length).toEqual(0)
+
+      instance.show(() => {
+        expect(getElements().length).toEqual(1)
+        getElements().forEach(el => {
+          expect(el.classList.contains(CLASS_NAME_FADE)).toEqual(true)
+        })
+        done()
+      })
+    })
+
+    it('Should be appended on "document.body" by default', done => {
+      const instance = new Backdrop({
+        isVisible: true
+      })
+      const getElement = () => document.querySelector(CLASS_BACKDROP)
+      instance.show(() => {
+        expect(getElement().parentElement).toEqual(document.body)
+        done()
+      })
+    })
+
+    it('Should appended on any element given by the proper config', done => {
+      fixtureEl.innerHTML = [
+        '<div id="wrapper">',
+        '</div>'
+      ].join('')
+
+      const wrapper = fixtureEl.querySelector('#wrapper')
+      const instance = new Backdrop({
+        isVisible: true,
+        rootElement: wrapper
+      })
+      const getElement = () => document.querySelector(CLASS_BACKDROP)
+      instance.show(() => {
+        expect(getElement().parentElement).toEqual(wrapper)
+        done()
+      })
+    })
+  })
+
+  describe('hide', () => {
+    it('should remove the backdrop html', done => {
+      const instance = new Backdrop({
+        isVisible: true,
+        isAnimated: true
+      })
+
+      const getElements = () => document.body.querySelectorAll(CLASS_BACKDROP)
+
+      expect(getElements().length).toEqual(0)
+      instance.show(() => {
+        expect(getElements().length).toEqual(1)
+        instance.hide(() => {
+          expect(getElements().length).toEqual(0)
+          done()
+        })
+      })
+    })
+
+    it('should remove "show" class', done => {
+      const instance = new Backdrop({
+        isVisible: true,
+        isAnimated: true
+      })
+      const elem = instance._getElement()
+
+      instance.show()
+      instance.hide(() => {
+        expect(elem.classList.contains(CLASS_NAME_SHOW)).toEqual(false)
+        done()
+      })
+    })
+
+    it('if it is not "shown", should not try to remove Node on remove method', done => {
+      const instance = new Backdrop({
+        isVisible: false,
+        isAnimated: true
+      })
+      const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
+      const spy = spyOn(instance, 'dispose').and.callThrough()
+
+      expect(getElements().length).toEqual(0)
+      expect(instance._isAppended).toEqual(false)
+      instance.show(() => {
+        instance.hide(() => {
+          expect(getElements().length).toEqual(0)
+          expect(spy).not.toHaveBeenCalled()
+          expect(instance._isAppended).toEqual(false)
+          done()
+        })
+      })
+    })
+  })
+
+  describe('click callback', () => {
+    it('it should execute callback on click', done => {
+      const spy = jasmine.createSpy('spy')
+
+      const instance = new Backdrop({
+        isVisible: true,
+        isAnimated: false,
+        clickCallback: () => spy()
+      })
+      const endTest = () => {
+        setTimeout(() => {
+          expect(spy).toHaveBeenCalled()
+          done()
+        }, 10)
+      }
+
+      instance.show(() => {
+        const clickEvent = document.createEvent('MouseEvents')
+        clickEvent.initEvent('mousedown', true, true)
+        document.querySelector(CLASS_BACKDROP).dispatchEvent(clickEvent)
+        endTest()
+      })
+    })
+  })
+
+  describe('animation callbacks', () => {
+    it('if it is animated, should show and hide backdrop after counting transition duration', done => {
+      const instance = new Backdrop({
+        isVisible: true,
+        isAnimated: true
+      })
+      const spy2 = jasmine.createSpy('spy2')
+
+      const execDone = () => {
+        setTimeout(() => {
+          expect(spy2).toHaveBeenCalledTimes(2)
+          done()
+        }, 10)
+      }
+
+      instance.show(spy2)
+      instance.hide(() => {
+        spy2()
+        execDone()
+      })
+      expect(spy2).not.toHaveBeenCalled()
+    })
+
+    it('if it is not animated, should show and hide backdrop without delay', done => {
+      const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
+      const instance = new Backdrop({
+        isVisible: true,
+        isAnimated: false
+      })
+      const spy2 = jasmine.createSpy('spy2')
+
+      instance.show(spy2)
+      instance.hide(spy2)
+
+      setTimeout(() => {
+        expect(spy2).toHaveBeenCalled()
+        expect(spy).not.toHaveBeenCalled()
+        done()
+      }, 10)
+    })
+
+    it('if it is not "shown", should not call delay callbacks', done => {
+      const instance = new Backdrop({
+        isVisible: false,
+        isAnimated: true
+      })
+      const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
+
+      instance.show()
+      instance.hide(() => {
+        expect(spy).not.toHaveBeenCalled()
+        done()
+      })
+    })
+  })
+})
diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js
index ecad59b4d..11b6f7fa4 100644
--- a/js/tests/unit/util/index.spec.js
+++ b/js/tests/unit/util/index.spec.js
@@ -57,6 +57,28 @@ describe('Util', () => {
       expect(Util.getSelectorFromElement(testEl)).toEqual('.target')
     })
 
+    it('should return null if a selector from a href is a url without an anchor', () => {
+      fixtureEl.innerHTML = [
+        '<a id="test" data-bs-target="#" href="foo/bar.html"></a>',
+        '<div class="target"></div>'
+      ].join('')
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(Util.getSelectorFromElement(testEl)).toBeNull()
+    })
+
+    it('should return the anchor if a selector from a href is a url', () => {
+      fixtureEl.innerHTML = [
+        '<a id="test" data-bs-target="#" href="foo/bar.html#target"></a>',
+        '<div id="target"></div>'
+      ].join('')
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(Util.getSelectorFromElement(testEl)).toEqual('#target')
+    })
+
     it('should return null if selector not found', () => {
       fixtureEl.innerHTML = '<a id="test" href=".target"></a>'
 
@@ -212,7 +234,7 @@ describe('Util', () => {
 
       expect(() => {
         Util.typeCheckConfig(namePlugin, config, defaultType)
-      }).toThrow(new Error('COLLAPSE: Option "parent" provided type "number" but expected type "(string|element)".'))
+      }).toThrowError(TypeError, 'COLLAPSE: Option "parent" provided type "number" but expected type "(string|element)".')
     })
 
     it('should return null stringified when null is passed', () => {
@@ -295,6 +317,114 @@ 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, or doesn\'t have attribute', () => {
+      fixtureEl.innerHTML = [
+        '<div>',
+        '  <div id="element" disabled="false"></div>',
+        '  <div id="element1" ></div>',
+        '</div>'
+      ].join('')
+
+      const div = fixtureEl.querySelector('#element')
+      const div1 = fixtureEl.querySelector('#element1')
+
+      expect(Util.isDisabled(div)).toEqual(false)
+      expect(Util.isDisabled(div1)).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
@@ -347,8 +477,8 @@ describe('Util', () => {
   })
 
   describe('noop', () => {
-    it('should return a function', () => {
-      expect(typeof Util.noop()).toEqual('function')
+    it('should be a function', () => {
+      expect(typeof Util.noop).toEqual('function')
     })
   })
 
@@ -413,4 +543,37 @@ describe('Util', () => {
       expect(spy).toHaveBeenCalled()
     })
   })
+
+  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 = function () {}
+      pluginMock.jQueryInterface = function () {}
+
+      Util.defineJQueryPlugin('test', pluginMock)
+      expect(fakejQuery.fn.test).toBe(pluginMock.jQueryInterface)
+      expect(fakejQuery.fn.test.Constructor).toBe(pluginMock)
+      expect(typeof fakejQuery.fn.test.noConflict).toEqual('function')
+    })
+  })
+
+  describe('execute', () => {
+    it('should execute if arg is function', () => {
+      const spy = jasmine.createSpy('spy')
+      Util.execute(spy)
+      expect(spy).toHaveBeenCalled()
+    })
+  })
 })
diff --git a/js/tests/unit/util/sanitizer.spec.js b/js/tests/unit/util/sanitizer.spec.js
index 869b8c561..7379d221f 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 = '<img src="test.jpg">'
+
+      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 000000000..e09a37ce7
--- /dev/null
+++ b/js/tests/unit/util/scrollbar.spec.js
@@ -0,0 +1,261 @@
+import * as Scrollbar from '../../../src/util/scrollbar'
+import { clearBodyAndDocument, clearFixture, getFixture } from '../../helpers/fixture'
+import Manipulator from '../../../src/dom/manipulator'
+
+describe('ScrollBar', () => {
+  let fixtureEl
+  const parseInt = arg => Number.parseInt(arg, 10)
+  const getRightPadding = el => parseInt(window.getComputedStyle(el).paddingRight)
+  const getOverFlow = el => el.style.overflow
+  const getPaddingAttr = el => Manipulator.getDataAttribute(el, 'padding-right')
+  const getOverFlowAttr = el => Manipulator.getDataAttribute(el, 'overflow')
+  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()
+  })
+
+  afterEach(() => {
+    clearFixture()
+    clearBodyAndDocument()
+  })
+
+  beforeEach(() => {
+    clearBodyAndDocument()
+  })
+
+  describe('isBodyOverflowing', () => {
+    it('should return true if body is overflowing', () => {
+      document.documentElement.style.overflowY = 'scroll'
+      document.body.style.overflowY = 'scroll'
+      fixtureEl.innerHTML = [
+        '<div style="height: 110vh; width: 100%"></div>'
+      ].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 = [
+        '<div style="height: 110vh; width: 100%"></div>'
+      ].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 = [
+        '<div style="height: 110vh; width: 100%"></div>'
+      ].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 = [
+        '<div style="height: 110vh; width: 100%"></div>'
+      ].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 = [
+        '<div style="height: 110vh; width: 100%">' +
+        '<div class="fixed-top" id="fixed1" style="padding-right: 0px; width: 100vw"></div>',
+        '<div class="fixed-top" id="fixed2" style="padding-right: 5px; width: 100vw"></div>',
+        '</div>'
+      ].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 = [
+        '<div style="height: 110vh">' +
+        '<div class="sticky-top" style="margin-right: 0px; width: 100vw; height: 10px"></div>',
+        '</div>'
+      ].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 = [
+        '<div class="sticky-top" style="margin-right: 0px; padding-right: 0px; width: 50vw"></div>'
+      ].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()
+    })
+
+    describe('Body Handling', () => {
+      it('should hide scrollbar and reset it to its initial value', () => {
+        const styleSheetPadding = '7px'
+        fixtureEl.innerHTML = [
+          '<style>',
+          '  body {',
+          `       padding-right: ${styleSheetPadding} }`,
+          '  }',
+          '</style>'
+        ].join('')
+
+        const el = document.body
+        const inlineStylePadding = '10px'
+        el.style.paddingRight = inlineStylePadding
+
+        const originalPadding = getRightPadding(el)
+        expect(originalPadding).toEqual(parseInt(inlineStylePadding)) // Respect only the inline style as it has prevails this of css
+        const originalOverFlow = 'auto'
+        el.style.overflow = originalOverFlow
+        const scrollBarWidth = Scrollbar.getWidth()
+
+        Scrollbar.hide()
+
+        const currentPadding = getRightPadding(el)
+
+        expect(currentPadding).toEqual(scrollBarWidth + originalPadding)
+        expect(currentPadding).toEqual(scrollBarWidth + parseInt(inlineStylePadding))
+        expect(getPaddingAttr(el)).toEqual(inlineStylePadding)
+        expect(getOverFlow(el)).toEqual('hidden')
+        expect(getOverFlowAttr(el)).toEqual(originalOverFlow)
+
+        Scrollbar.reset()
+
+        const currentPadding1 = getRightPadding(el)
+        expect(currentPadding1).toEqual(originalPadding)
+        expect(getPaddingAttr(el)).toEqual(null)
+        expect(getOverFlow(el)).toEqual(originalOverFlow)
+        expect(getOverFlowAttr(el)).toEqual(null)
+      })
+
+      it('should hide scrollbar and reset it to its initial value - respecting css rules', () => {
+        const styleSheetPadding = '7px'
+        fixtureEl.innerHTML = [
+          '<style>',
+          '  body {',
+          `       padding-right: ${styleSheetPadding} }`,
+          '  }',
+          '</style>'
+        ].join('')
+        const el = document.body
+        const originalPadding = getRightPadding(el)
+        const originalOverFlow = 'scroll'
+        el.style.overflow = originalOverFlow
+        const scrollBarWidth = Scrollbar.getWidth()
+
+        Scrollbar.hide()
+
+        const currentPadding = getRightPadding(el)
+
+        expect(currentPadding).toEqual(scrollBarWidth + originalPadding)
+        expect(currentPadding).toEqual(scrollBarWidth + parseInt(styleSheetPadding))
+        expect(getPaddingAttr(el)).toBeNull() // We do not have to keep css padding
+        expect(getOverFlow(el)).toEqual('hidden')
+        expect(getOverFlowAttr(el)).toEqual(originalOverFlow)
+
+        Scrollbar.reset()
+
+        const currentPadding1 = getRightPadding(el)
+        expect(currentPadding1).toEqual(originalPadding)
+        expect(getPaddingAttr(el)).toEqual(null)
+        expect(getOverFlow(el)).toEqual(originalOverFlow)
+        expect(getOverFlowAttr(el)).toEqual(null)
+      })
+    })
+  })
+})