create a base component

23 files changed, 229 insertions, 113 deletions

diff --git a/js/src/alert.js b/js/src/alert.js
index 724cda0173..6f4c0be8de 100644
--- a/js/src/alert.js
+++ b/js/src/alert.js
@@ -15,6 +15,7 @@ import {
 } from './util/index'
 import Data from './dom/data'
 import EventHandler from './dom/event-handler'
+import BaseComponent from './base-component'
 
 /**
  * ------------------------------------------------------------------------
@@ -44,21 +45,17 @@ const CLASSNAME_SHOW = 'show'
  * ------------------------------------------------------------------------
  */
 
-class Alert {
-  constructor(element) {
-    this._element = element
-
-    if (this._element) {
-      Data.setData(element, DATA_KEY, this)
-    }
-  }
-
+class Alert extends BaseComponent {
   // Getters
 
   static get VERSION() {
     return VERSION
   }
 
+  static get DATA_KEY() {
+    return DATA_KEY
+  }
+
   // Public
 
   close(element) {
@@ -134,10 +131,6 @@ class Alert {
       alertInstance.close(this)
     }
   }
-
-  static getInstance(element) {
-    return Data.getData(element, DATA_KEY)
-  }
 }
 
 /**
diff --git a/js/src/base-component.js b/js/src/base-component.js
new file mode 100644
index 0000000000..a6c7f36bde
--- /dev/null
+++ b/js/src/base-component.js
@@ -0,0 +1,31 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.0.0-alpha3): base-component.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import Data from './dom/data'
+
+class BaseComponent {
+  constructor(element) {
+    if (!element) {
+      return
+    }
+
+    this._element = element
+    Data.setData(element, this.constructor.DATA_KEY, this)
+  }
+
+  /** Static */
+
+  static getInstance(element) {
+    return Data.getData(element, this.DATA_KEY)
+  }
+
+  static get DATA_KEY() {
+    return null
+  }
+}
+
+export default BaseComponent
diff --git a/js/src/button.js b/js/src/button.js
index 42376943de..2694e7b786 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -8,6 +8,7 @@
 import { getjQuery, onDOMContentLoaded } from './util/index'
 import Data from './dom/data'
 import EventHandler from './dom/event-handler'
+import BaseComponent from './base-component'
 
 /**
  * ------------------------------------------------------------------------
@@ -33,18 +34,17 @@ const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
  * ------------------------------------------------------------------------
  */
 
-class Button {
-  constructor(element) {
-    this._element = element
-    Data.setData(element, DATA_KEY, this)
-  }
-
+class Button extends BaseComponent {
   // Getters
 
   static get VERSION() {
     return VERSION
   }
 
+  static get DATA_KEY() {
+    return DATA_KEY
+  }
+
   // Public
 
   toggle() {
@@ -72,10 +72,6 @@ class Button {
       }
     })
   }
-
-  static getInstance(element) {
-    return Data.getData(element, DATA_KEY)
-  }
 }
 
 /**
diff --git a/js/src/carousel.js b/js/src/carousel.js
index c663efbeac..6a035c9abd 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -21,6 +21,7 @@ import Data from './dom/data'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
 import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
 
 /**
  * ------------------------------------------------------------------------
@@ -104,8 +105,10 @@ const PointerType = {
  * Class Definition
  * ------------------------------------------------------------------------
  */
-class Carousel {
+class Carousel extends BaseComponent {
   constructor(element, config) {
+    super(element)
+
     this._items = null
     this._interval = null
     this._activeElement = null
@@ -116,7 +119,6 @@ class Carousel {
     this.touchDeltaX = 0
 
     this._config = this._getConfig(config)
-    this._element = element
     this._indicatorsElement = SelectorEngine.findOne(SELECTOR_INDICATORS, this._element)
     this._touchSupported = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
     this._pointerEvent = Boolean(window.PointerEvent)
@@ -135,6 +137,10 @@ class Carousel {
     return Default
   }
 
+  static get DATA_KEY() {
+    return DATA_KEY
+  }
+
   // Public
 
   next() {
@@ -590,10 +596,6 @@ class Carousel {
 
     event.preventDefault()
   }
-
-  static getInstance(element) {
-    return Data.getData(element, DATA_KEY)
-  }
 }
 
 /**
diff --git a/js/src/collapse.js b/js/src/collapse.js
index 2ddcb0c047..c76426c7c4 100644
--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -21,6 +21,7 @@ import Data from './dom/data'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
 import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
 
 /**
  * ------------------------------------------------------------------------
@@ -67,10 +68,11 @@ const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]'
  * ------------------------------------------------------------------------
  */
 
-class Collapse {
+class Collapse extends BaseComponent {
   constructor(element, config) {
+    super(element)
+
     this._isTransitioning = false
-    this._element = element
     this._config = this._getConfig(config)
     this._triggerArray = SelectorEngine.find(
       `${SELECTOR_DATA_TOGGLE}[href="#${element.id}"],` +
@@ -114,6 +116,10 @@ class Collapse {
     return Default
   }
 
+  static get DATA_KEY() {
+    return DATA_KEY
+  }
+
   // Public
 
   toggle() {
@@ -368,10 +374,6 @@ class Collapse {
       Collapse.collapseInterface(this, config)
     })
   }
-
-  static getInstance(element) {
-    return Data.getData(element, DATA_KEY)
-  }
 }
 
 /**
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index b9f5a4cd39..16d35b911d 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -19,6 +19,7 @@ import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
 import Popper from 'popper.js'
 import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
 
 /**
  * ------------------------------------------------------------------------
@@ -96,9 +97,10 @@ const DefaultType = {
  * ------------------------------------------------------------------------
  */
 
-class Dropdown {
+class Dropdown extends BaseComponent {
   constructor(element, config) {
-    this._element = element
+    super(element)
+
     this._popper = null
     this._config = this._getConfig(config)
     this._menu = this._getMenuElement()
@@ -122,6 +124,10 @@ class Dropdown {
     return DefaultType
   }
 
+  static get DATA_KEY() {
+    return DATA_KEY
+  }
+
   // Public
 
   toggle() {
@@ -489,10 +495,6 @@ class Dropdown {
 
     items[index].focus()
   }
-
-  static getInstance(element) {
-    return Data.getData(element, DATA_KEY)
-  }
 }
 
 /**
diff --git a/js/src/modal.js b/js/src/modal.js
index 4309cbd9a2..1e7ce03469 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -20,6 +20,7 @@ import Data from './dom/data'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
 import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
 
 /**
  * ------------------------------------------------------------------------
@@ -81,10 +82,11 @@ const SELECTOR_STICKY_CONTENT = '.sticky-top'
  * ------------------------------------------------------------------------
  */
 
-class Modal {
+class Modal extends BaseComponent {
   constructor(element, config) {
+    super(element)
+
     this._config = this._getConfig(config)
-    this._element = element
     this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, element)
     this._backdrop = null
     this._isShown = false
@@ -105,6 +107,10 @@ class Modal {
     return Default
   }
 
+  static get DATA_KEY() {
+    return DATA_KEY
+  }
+
   // Public
 
   toggle(relatedTarget) {
@@ -563,10 +569,6 @@ class Modal {
       }
     })
   }
-
-  static getInstance(element) {
-    return Data.getData(element, DATA_KEY)
-  }
 }
 
 /**
diff --git a/js/src/popover.js b/js/src/popover.js
index 46b693e696..bae5537aa2 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -108,7 +108,7 @@ class Popover extends Tooltip {
     this.setElementContent(SelectorEngine.findOne(SELECTOR_TITLE, tip), this.getTitle())
     let content = this._getContent()
     if (typeof content === 'function') {
-      content = content.call(this.element)
+      content = content.call(this._element)
     }
 
     this.setElementContent(SelectorEngine.findOne(SELECTOR_CONTENT, tip), content)
@@ -123,7 +123,7 @@ class Popover extends Tooltip {
   }
 
   _getContent() {
-    return this.element.getAttribute('data-bs-content') ||
+    return this._element.getAttribute('data-bs-content') ||
       this.config.content
   }
 
@@ -161,10 +161,6 @@ class Popover extends Tooltip {
       }
     })
   }
-
-  static getInstance(element) {
-    return Data.getData(element, DATA_KEY)
-  }
 }
 
 /**
diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index de456e0805..6eb66f3b4a 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -17,6 +17,7 @@ import Data from './dom/data'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
 import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
 
 /**
  * ------------------------------------------------------------------------
@@ -66,9 +67,9 @@ const METHOD_POSITION = 'position'
  * ------------------------------------------------------------------------
  */
 
-class ScrollSpy {
+class ScrollSpy extends BaseComponent {
   constructor(element, config) {
-    this._element = element
+    super(element)
     this._scrollElement = element.tagName === 'BODY' ? window : element
     this._config = this._getConfig(config)
     this._selector = `${this._config.target} ${SELECTOR_NAV_LINKS}, ${this._config.target} ${SELECTOR_LIST_ITEMS}, ${this._config.target} .${CLASS_NAME_DROPDOWN_ITEM}`
@@ -95,6 +96,10 @@ class ScrollSpy {
     return Default
   }
 
+  static get DATA_KEY() {
+    return DATA_KEY
+  }
+
   // Public
 
   refresh() {
@@ -301,10 +306,6 @@ class ScrollSpy {
       }
     })
   }
-
-  static getInstance(element) {
-    return Data.getData(element, DATA_KEY)
-  }
 }
 
 /**
diff --git a/js/src/tab.js b/js/src/tab.js
index 56269e2fac..523810a392 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -17,6 +17,7 @@ import {
 import Data from './dom/data'
 import EventHandler from './dom/event-handler'
 import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
 
 /**
  * ------------------------------------------------------------------------
@@ -56,19 +57,17 @@ const SELECTOR_DROPDOWN_ACTIVE_CHILD = ':scope > .dropdown-menu .active'
  * ------------------------------------------------------------------------
  */
 
-class Tab {
-  constructor(element) {
-    this._element = element
-
-    Data.setData(this._element, DATA_KEY, this)
-  }
-
+class Tab extends BaseComponent {
   // Getters
 
   static get VERSION() {
     return VERSION
   }
 
+  static get DATA_KEY() {
+    return DATA_KEY
+  }
+
   // Public
 
   show() {
@@ -217,10 +216,6 @@ class Tab {
       }
     })
   }
-
-  static getInstance(element) {
-    return Data.getData(element, DATA_KEY)
-  }
 }
 
 /**
diff --git a/js/src/toast.js b/js/src/toast.js
index 1e50b06693..c351139be0 100644
--- a/js/src/toast.js
+++ b/js/src/toast.js
@@ -17,6 +17,7 @@ import {
 import Data from './dom/data'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
+import BaseComponent from './base-component'
 
 /**
  * ------------------------------------------------------------------------
@@ -60,9 +61,10 @@ const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="toast"]'
  * ------------------------------------------------------------------------
  */
 
-class Toast {
+class Toast extends BaseComponent {
   constructor(element, config) {
-    this._element = element
+    super(element)
+
     this._config = this._getConfig(config)
     this._timeout = null
     this._setListeners()
@@ -83,6 +85,10 @@ class Toast {
     return Default
   }
 
+  static get DATA_KEY() {
+    return DATA_KEY
+  }
+
   // Public
 
   show() {
@@ -208,10 +214,6 @@ class Toast {
       }
     })
   }
-
-  static getInstance(element) {
-    return Data.getData(element, DATA_KEY)
-  }
 }
 
 /**
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 368e04b30c..99f910efc7 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -26,6 +26,7 @@ import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
 import Popper from 'popper.js'
 import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
 
 /**
  * ------------------------------------------------------------------------
@@ -124,12 +125,14 @@ const TRIGGER_MANUAL = 'manual'
  * ------------------------------------------------------------------------
  */
 
-class Tooltip {
+class Tooltip extends BaseComponent {
   constructor(element, config) {
     if (typeof Popper === 'undefined') {
       throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org)')
     }
 
+    super(element)
+
     // private
     this._isEnabled = true
     this._timeout = 0
@@ -138,7 +141,6 @@ class Tooltip {
     this._popper = null
 
     // Protected
-    this.element = element
     this.config = this._getConfig(config)
     this.tip = null
 
@@ -227,10 +229,10 @@ class Tooltip {
   dispose() {
     clearTimeout(this._timeout)
 
-    Data.removeData(this.element, this.constructor.DATA_KEY)
+    Data.removeData(this._element, this.constructor.DATA_KEY)
 
-    EventHandler.off(this.element, this.constructor.EVENT_KEY)
-    EventHandler.off(this.element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler)
+    EventHandler.off(this._element, this.constructor.EVENT_KEY)
+    EventHandler.off(this._element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler)
 
     if (this.tip) {
       this.tip.parentNode.removeChild(this.tip)
@@ -245,22 +247,22 @@ class Tooltip {
     }
 
     this._popper = null
-    this.element = null
+    this._element = null
     this.config = null
     this.tip = null
   }
 
   show() {
-    if (this.element.style.display === 'none') {
+    if (this._element.style.display === 'none') {
       throw new Error('Please use show on visible elements')
     }
 
     if (this.isWithContent() && this._isEnabled) {
-      const showEvent = EventHandler.trigger(this.element, this.constructor.Event.SHOW)
-      const shadowRoot = findShadowRoot(this.element)
+      const showEvent = EventHandler.trigger(this._element, this.constructor.Event.SHOW)
+      const shadowRoot = findShadowRoot(this._element)
       const isInTheDom = shadowRoot === null ?
-        this.element.ownerDocument.documentElement.contains(this.element) :
-        shadowRoot.contains(this.element)
+        this._element.ownerDocument.documentElement.contains(this._element) :
+        shadowRoot.contains(this._element)
 
       if (showEvent.defaultPrevented || !isInTheDom) {
         return
@@ -270,7 +272,7 @@ class Tooltip {
       const tipId = getUID(this.constructor.NAME)
 
       tip.setAttribute('id', tipId)
-      this.element.setAttribute('aria-describedby', tipId)
+      this._element.setAttribute('aria-describedby', tipId)
 
       this.setContent()
 
@@ -279,7 +281,7 @@ class Tooltip {
       }
 
       const placement = typeof this.config.placement === 'function' ?
-        this.config.placement.call(this, tip, this.element) :
+        this.config.placement.call(this, tip, this._element) :
         this.config.placement
 
       const attachment = this._getAttachment(placement)
@@ -288,13 +290,13 @@ class Tooltip {
       const container = this._getContainer()
       Data.setData(tip, this.constructor.DATA_KEY, this)
 
-      if (!this.element.ownerDocument.documentElement.contains(this.tip)) {
+      if (!this._element.ownerDocument.documentElement.contains(this.tip)) {
         container.appendChild(tip)
       }
 
-      EventHandler.trigger(this.element, this.constructor.Event.INSERTED)
+      EventHandler.trigger(this._element, this.constructor.Event.INSERTED)
 
-      this._popper = new Popper(this.element, tip, this._getPopperConfig(attachment))
+      this._popper = new Popper(this._element, tip, this._getPopperConfig(attachment))
 
       tip.classList.add(CLASS_NAME_SHOW)
 
@@ -321,7 +323,7 @@ class Tooltip {
         const prevHoverState = this._hoverState
         this._hoverState = null
 
-        EventHandler.trigger(this.element, this.constructor.Event.SHOWN)
+        EventHandler.trigger(this._element, this.constructor.Event.SHOWN)
 
         if (prevHoverState === HOVER_STATE_OUT) {
           this._leave(null, this)
@@ -350,12 +352,12 @@ class Tooltip {
       }
 
       this._cleanTipClass()
-      this.element.removeAttribute('aria-describedby')
-      EventHandler.trigger(this.element, this.constructor.Event.HIDDEN)
+      this._element.removeAttribute('aria-describedby')
+      EventHandler.trigger(this._element, this.constructor.Event.HIDDEN)
       this._popper.destroy()
     }
 
-    const hideEvent = EventHandler.trigger(this.element, this.constructor.Event.HIDE)
+    const hideEvent = EventHandler.trigger(this._element, this.constructor.Event.HIDE)
     if (hideEvent.defaultPrevented) {
       return
     }
@@ -450,11 +452,11 @@ class Tooltip {
   }
 
   getTitle() {
-    let title = this.element.getAttribute('data-bs-original-title')
+    let title = this._element.getAttribute('data-bs-original-title')
 
     if (!title) {
       title = typeof this.config.title === 'function' ?
-        this.config.title.call(this.element) :
+        this.config.title.call(this._element) :
         this.config.title
     }
 
@@ -503,7 +505,7 @@ class Tooltip {
       offset.fn = data => {
         data.offsets = {
           ...data.offsets,
-          ...(this.config.offset(data.offsets, this.element) || {})
+          ...(this.config.offset(data.offsets, this._element) || {})
         }
 
         return data
@@ -536,7 +538,7 @@ class Tooltip {
 
     triggers.forEach(trigger => {
       if (trigger === 'click') {
-        EventHandler.on(this.element,
+        EventHandler.on(this._element,
           this.constructor.Event.CLICK,
           this.config.selector,
           event => this.toggle(event)
@@ -549,12 +551,12 @@ class Tooltip {
           this.constructor.Event.MOUSELEAVE :
           this.constructor.Event.FOCUSOUT
 
-        EventHandler.on(this.element,
+        EventHandler.on(this._element,
           eventIn,
           this.config.selector,
           event => this._enter(event)
         )
-        EventHandler.on(this.element,
+        EventHandler.on(this._element,
           eventOut,
           this.config.selector,
           event => this._leave(event)
@@ -563,12 +565,12 @@ class Tooltip {
     })
 
     this._hideModalHandler = () => {
-      if (this.element) {
+      if (this._element) {
         this.hide()
       }
     }
 
-    EventHandler.on(this.element.closest(`.${CLASS_NAME_MODAL}`),
+    EventHandler.on(this._element.closest(`.${CLASS_NAME_MODAL}`),
       'hide.bs.modal',
       this._hideModalHandler
     )
@@ -585,12 +587,12 @@ class Tooltip {
   }
 
   _fixTitle() {
-    const title = this.element.getAttribute('title')
-    const originalTitleType = typeof this.element.getAttribute('data-bs-original-title')
+    const title = this._element.getAttribute('title')
+    const originalTitleType = typeof this._element.getAttribute('data-bs-original-title')
 
     if (title || originalTitleType !== 'string') {
-      this.element.setAttribute('data-bs-original-title', title || '')
-      this.element.setAttribute('title', '')
+      this._element.setAttribute('data-bs-original-title', title || '')
+      this._element.setAttribute('title', '')
     }
   }
 
@@ -683,7 +685,7 @@ class Tooltip {
   }
 
   _getConfig(config) {
-    const dataAttributes = Manipulator.getDataAttributes(this.element)
+    const dataAttributes = Manipulator.getDataAttributes(this._element)
 
     Object.keys(dataAttributes).forEach(dataAttr => {
       if (DISALLOWED_ATTRIBUTES.has(dataAttr)) {
@@ -792,10 +794,6 @@ class Tooltip {
       }
     })
   }
-
-  static getInstance(element) {
-    return Data.getData(element, DATA_KEY)
-  }
 }
 
 /**
diff --git a/js/tests/unit/alert.spec.js b/js/tests/unit/alert.spec.js
index a746d85011..52643e575d 100644
--- a/js/tests/unit/alert.spec.js
+++ b/js/tests/unit/alert.spec.js
@@ -170,4 +170,24 @@ describe('Alert', () => {
       expect(fixtureEl.querySelector('.alert')).not.toBeNull()
     })
   })
+
+  describe('getInstance', () => {
+    it('should return alert instance', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+      const alert = new Alert(div)
+
+      expect(Alert.getInstance(div)).toEqual(alert)
+      expect(Alert.getInstance(div) instanceof Alert).toEqual(true)
+    })
+
+    it('should return null when there is no alert instance', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      expect(Alert.getInstance(div)).toEqual(null)
+    })
+  })
 })
diff --git a/js/tests/unit/button.spec.js b/js/tests/unit/button.spec.js
index 44d7b54b18..e7f6566ea3 100644
--- a/js/tests/unit/button.spec.js
+++ b/js/tests/unit/button.spec.js
@@ -128,4 +128,24 @@ describe('Button', () => {
       expect(btnEl.classList.contains('active')).toEqual(false)
     })
   })
+
+  describe('getInstance', () => {
+    it('should return button instance', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+      const button = new Button(div)
+
+      expect(Button.getInstance(div)).toEqual(button)
+      expect(Button.getInstance(div) instanceof Button).toEqual(true)
+    })
+
+    it('should return null when there is no button instance', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      expect(Button.getInstance(div)).toEqual(null)
+    })
+  })
 })
diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js
index 8c928c429d..a21003dc5e 100644
--- a/js/tests/unit/carousel.spec.js
+++ b/js/tests/unit/carousel.spec.js
@@ -1062,6 +1062,26 @@ describe('Carousel', () => {
     })
   })
 
+  describe('getInstance', () => {
+    it('should return carousel instance', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+      const carousel = new Carousel(div)
+
+      expect(Carousel.getInstance(div)).toEqual(carousel)
+      expect(Carousel.getInstance(div) instanceof Carousel).toEqual(true)
+    })
+
+    it('should return null when there is no carousel instance', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      expect(Carousel.getInstance(div)).toEqual(null)
+    })
+  })
+
   describe('jQueryInterface', () => {
     it('should create a carousel', () => {
       fixtureEl.innerHTML = '<div></div>'
diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js
index c1ead859a9..e5c8c53b5b 100644
--- a/js/tests/unit/collapse.spec.js
+++ b/js/tests/unit/collapse.spec.js
@@ -812,6 +812,7 @@ describe('Collapse', () => {
       const collapse = new Collapse(div)
 
       expect(Collapse.getInstance(div)).toEqual(collapse)
+      expect(Collapse.getInstance(div) instanceof Collapse).toEqual(true)
     })
 
     it('should return null when there is no collapse instance', () => {
diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js
index f5f41636cd..96f677c02c 100644
--- a/js/tests/unit/dropdown.spec.js
+++ b/js/tests/unit/dropdown.spec.js
@@ -1612,6 +1612,7 @@ describe('Dropdown', () => {
       const dropdown = new Dropdown(div)
 
       expect(Dropdown.getInstance(div)).toEqual(dropdown)
+      expect(Dropdown.getInstance(div) instanceof Dropdown).toEqual(true)
     })
 
     it('should return null when there is no dropdown instance', () => {
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index 084f78ad14..8e8d4f0ff6 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -1108,6 +1108,7 @@ describe('Modal', () => {
       const modal = new Modal(div)
 
       expect(Modal.getInstance(div)).toEqual(modal)
+      expect(Modal.getInstance(div) instanceof Modal).toEqual(true)
     })
 
     it('should return null when there is no modal instance', () => {
diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js
index e87ed12144..3a8342a80f 100644
--- a/js/tests/unit/popover.spec.js
+++ b/js/tests/unit/popover.spec.js
@@ -253,6 +253,7 @@ describe('Popover', () => {
       const popover = new Popover(popoverEl)
 
       expect(Popover.getInstance(popoverEl)).toEqual(popover)
+      expect(Popover.getInstance(popoverEl) instanceof Popover).toEqual(true)
     })
 
     it('should return null when there is no popover instance', () => {
diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js
index 33298300cf..303a336f44 100644
--- a/js/tests/unit/scrollspy.spec.js
+++ b/js/tests/unit/scrollspy.spec.js
@@ -634,6 +634,16 @@ describe('ScrollSpy', () => {
   })
 
   describe('getInstance', () => {
+    it('should return scrollspy instance', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+      const scrollSpy = new ScrollSpy(div)
+
+      expect(ScrollSpy.getInstance(div)).toEqual(scrollSpy)
+      expect(ScrollSpy.getInstance(div) instanceof ScrollSpy).toEqual(true)
+    })
+
     it('should return null if there is no instance', () => {
       expect(ScrollSpy.getInstance(fixtureEl)).toEqual(null)
     })
diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index 324c4a09ba..7112dda181 100644
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -417,6 +417,7 @@ describe('Tab', () => {
       const tab = new Tab(divEl)
 
       expect(Tab.getInstance(divEl)).toEqual(tab)
+      expect(Tab.getInstance(divEl) instanceof Tab).toEqual(true)
     })
   })
 
diff --git a/js/tests/unit/toast.spec.js b/js/tests/unit/toast.spec.js
index c4cb69a7f1..60c7d9177b 100644
--- a/js/tests/unit/toast.spec.js
+++ b/js/tests/unit/toast.spec.js
@@ -384,6 +384,7 @@ describe('Toast', () => {
       const toast = new Toast(div)
 
       expect(Toast.getInstance(div)).toEqual(toast)
+      expect(Toast.getInstance(div) instanceof Toast).toEqual(true)
     })
 
     it('should return null when there is no toast instance', () => {
diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js
index da2abba314..36316b42f9 100644
--- a/js/tests/unit/tooltip.spec.js
+++ b/js/tests/unit/tooltip.spec.js
@@ -1030,6 +1030,26 @@ describe('Tooltip', () => {
     })
   })
 
+  describe('getInstance', () => {
+    it('should return tooltip instance', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+      const alert = new Tooltip(div)
+
+      expect(Tooltip.getInstance(div)).toEqual(alert)
+      expect(Tooltip.getInstance(div) instanceof Tooltip).toEqual(true)
+    })
+
+    it('should return null when there is no tooltip instance', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      expect(Tooltip.getInstance(div)).toEqual(null)
+    })
+  })
+
   describe('jQueryInterface', () => {
     it('should create a tooltip', () => {
       fixtureEl.innerHTML = '<div></div>'