diff options
author | GeoSot <geo.sotis@gmail.com> | 2021-06-03 18:53:27 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-06-03 18:53:27 +0300 |
commit | c98657b8303150bfda3bdea750055b83a29b27a3 (patch) | |
tree | 6f7b347461e3fdd380f0d4e990440e6fc427af61 /js | |
parent | 4a5029ea29ac75243dfec68153051292fc70f5cf (diff) |
Add `getOrCreateInstance` method in base-component (#33276)
Co-authored-by: Rohit Sharma <rohit2sharma95@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'js')
-rw-r--r-- | js/src/alert.js | 7 | ||||
-rw-r--r-- | js/src/base-component.js | 4 | ||||
-rw-r--r-- | js/src/button.js | 13 | ||||
-rw-r--r-- | js/src/carousel.js | 26 | ||||
-rw-r--r-- | js/src/collapse.js | 6 | ||||
-rw-r--r-- | js/src/dropdown.js | 10 | ||||
-rw-r--r-- | js/src/modal.js | 6 | ||||
-rw-r--r-- | js/src/offcanvas.js | 12 | ||||
-rw-r--r-- | js/src/popover.js | 9 | ||||
-rw-r--r-- | js/src/scrollspy.js | 2 | ||||
-rw-r--r-- | js/src/tab.js | 5 | ||||
-rw-r--r-- | js/src/toast.js | 8 | ||||
-rw-r--r-- | js/src/tooltip.js | 7 | ||||
-rw-r--r-- | js/tests/unit/alert.spec.js | 22 | ||||
-rw-r--r-- | js/tests/unit/base-component.spec.js | 17 | ||||
-rw-r--r-- | js/tests/unit/button.spec.js | 22 | ||||
-rw-r--r-- | js/tests/unit/carousel.spec.js | 54 | ||||
-rw-r--r-- | js/tests/unit/collapse.spec.js | 54 | ||||
-rw-r--r-- | js/tests/unit/dropdown.spec.js | 54 | ||||
-rw-r--r-- | js/tests/unit/modal.spec.js | 54 | ||||
-rw-r--r-- | js/tests/unit/offcanvas.spec.js | 88 | ||||
-rw-r--r-- | js/tests/unit/popover.spec.js | 54 | ||||
-rw-r--r-- | js/tests/unit/scrollspy.spec.js | 54 | ||||
-rw-r--r-- | js/tests/unit/tab.spec.js | 22 | ||||
-rw-r--r-- | js/tests/unit/toast.spec.js | 54 | ||||
-rw-r--r-- | js/tests/unit/tooltip.spec.js | 56 |
26 files changed, 602 insertions, 118 deletions
diff --git a/js/src/alert.js b/js/src/alert.js index 679a90cdb4..e5e5e2a5d2 100644 --- a/js/src/alert.js +++ b/js/src/alert.js @@ -9,7 +9,6 @@ import { defineJQueryPlugin, getElementFromSelector } from './util/index' -import Data from './dom/data' import EventHandler from './dom/event-handler' import BaseComponent from './base-component' @@ -87,11 +86,7 @@ class Alert extends BaseComponent { static jQueryInterface(config) { return this.each(function () { - let data = Data.get(this, DATA_KEY) - - if (!data) { - data = new Alert(this) - } + const data = Alert.getOrCreateInstance(this) if (config === 'close') { data[config](this) diff --git a/js/src/base-component.js b/js/src/base-component.js index 368cc99c88..cadd53d26a 100644 --- a/js/src/base-component.js +++ b/js/src/base-component.js @@ -51,6 +51,10 @@ class BaseComponent { return Data.get(element, this.DATA_KEY) } + static getOrCreateInstance(element, config = {}) { + return this.getInstance(element) || new this(element, typeof config === 'object' ? config : null) + } + static get VERSION() { return VERSION } diff --git a/js/src/button.js b/js/src/button.js index 6ef7531367..c0e6b5d2b1 100644 --- a/js/src/button.js +++ b/js/src/button.js @@ -6,7 +6,6 @@ */ import { defineJQueryPlugin } from './util/index' -import Data from './dom/data' import EventHandler from './dom/event-handler' import BaseComponent from './base-component' @@ -51,11 +50,7 @@ class Button extends BaseComponent { static jQueryInterface(config) { return this.each(function () { - let data = Data.get(this, DATA_KEY) - - if (!data) { - data = new Button(this) - } + const data = Button.getOrCreateInstance(this) if (config === 'toggle') { data[config]() @@ -74,11 +69,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => { event.preventDefault() const button = event.target.closest(SELECTOR_DATA_TOGGLE) - - let data = Data.get(button, DATA_KEY) - if (!data) { - data = new Button(button) - } + const data = Button.getOrCreateInstance(button) data.toggle() }) diff --git a/js/src/carousel.js b/js/src/carousel.js index 7d197ab1ee..a956ebc8bb 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -15,7 +15,6 @@ import { triggerTransitionEnd, typeCheckConfig } from './util/index' -import Data from './dom/data' import EventHandler from './dom/event-handler' import Manipulator from './dom/manipulator' import SelectorEngine from './dom/selector-engine' @@ -219,7 +218,8 @@ class Carousel extends BaseComponent { _getConfig(config) { config = { ...Default, - ...config + ...Manipulator.getDataAttributes(this._element), + ...(typeof config === 'object' ? config : {}) } typeCheckConfig(NAME, config, DefaultType) return config @@ -496,25 +496,11 @@ class Carousel extends BaseComponent { // Static static carouselInterface(element, config) { - let data = Data.get(element, DATA_KEY) - let _config = { - ...Default, - ...Manipulator.getDataAttributes(element) - } - - if (typeof config === 'object') { - _config = { - ..._config, - ...config - } - } + const data = Carousel.getOrCreateInstance(element, config) + const { _config } = data const action = typeof config === 'string' ? config : _config.slide - if (!data) { - data = new Carousel(element, _config) - } - if (typeof config === 'number') { data.to(config) } else if (typeof action === 'string') { @@ -555,7 +541,7 @@ class Carousel extends BaseComponent { Carousel.carouselInterface(target, config) if (slideIndex) { - Data.get(target, DATA_KEY).to(slideIndex) + Carousel.getInstance(target).to(slideIndex) } event.preventDefault() @@ -574,7 +560,7 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => { const carousels = SelectorEngine.find(SELECTOR_DATA_RIDE) for (let i = 0, len = carousels.length; i < len; i++) { - Carousel.carouselInterface(carousels[i], Data.get(carousels[i], DATA_KEY)) + Carousel.carouselInterface(carousels[i], Carousel.getInstance(carousels[i])) } }) diff --git a/js/src/collapse.js b/js/src/collapse.js index fd85fbde2d..2d12ef57f0 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -145,7 +145,7 @@ class Collapse extends BaseComponent { const container = SelectorEngine.findOne(this._selector) if (actives) { const tempActiveData = actives.find(elem => container !== elem) - activesData = tempActiveData ? Data.get(tempActiveData, DATA_KEY) : null + activesData = tempActiveData ? Collapse.getInstance(tempActiveData) : null if (activesData && activesData._isTransitioning) { return @@ -310,7 +310,7 @@ class Collapse extends BaseComponent { // Static static collapseInterface(element, config) { - let data = Data.get(element, DATA_KEY) + let data = Collapse.getInstance(element) const _config = { ...Default, ...Manipulator.getDataAttributes(element), @@ -358,7 +358,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function ( const selectorElements = SelectorEngine.find(selector) selectorElements.forEach(element => { - const data = Data.get(element, DATA_KEY) + const data = Collapse.getInstance(element) let config if (data) { // update parent attribute diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 34beb65129..e79ac45910 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -19,7 +19,6 @@ import { getNextActiveElement, typeCheckConfig } from './util/index' -import Data from './dom/data' import EventHandler from './dom/event-handler' import Manipulator from './dom/manipulator' import SelectorEngine from './dom/selector-engine' @@ -369,12 +368,7 @@ class Dropdown extends BaseComponent { // Static static dropdownInterface(element, config) { - let data = Data.get(element, DATA_KEY) - const _config = typeof config === 'object' ? config : null - - if (!data) { - data = new Dropdown(element, _config) - } + const data = Dropdown.getOrCreateInstance(element, config) if (typeof config === 'string') { if (typeof data[config] === 'undefined') { @@ -399,7 +393,7 @@ class Dropdown extends BaseComponent { const toggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE) for (let i = 0, len = toggles.length; i < len; i++) { - const context = Data.get(toggles[i], DATA_KEY) + const context = Dropdown.getInstance(toggles[i]) if (!context || context._config.autoClose === false) { continue } diff --git a/js/src/modal.js b/js/src/modal.js index e8eee3b4d0..74b608303f 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -209,7 +209,7 @@ class Modal extends BaseComponent { config = { ...Default, ...Manipulator.getDataAttributes(this._element), - ...config + ...(typeof config === 'object' ? config : {}) } typeCheckConfig(NAME, config, DefaultType) return config @@ -389,7 +389,7 @@ class Modal extends BaseComponent { static jQueryInterface(config, relatedTarget) { return this.each(function () { - const data = Modal.getInstance(this) || new Modal(this, typeof config === 'object' ? config : {}) + const data = Modal.getOrCreateInstance(this, config) if (typeof config !== 'string') { return @@ -430,7 +430,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function ( }) }) - const data = Modal.getInstance(target) || new Modal(target) + const data = Modal.getOrCreateInstance(target) data.toggle(this) }) diff --git a/js/src/offcanvas.js b/js/src/offcanvas.js index fed892f4c7..f990ff1998 100644 --- a/js/src/offcanvas.js +++ b/js/src/offcanvas.js @@ -13,7 +13,6 @@ import { typeCheckConfig } from './util/index' import { hide as scrollBarHide, reset as scrollBarReset } from './util/scrollbar' -import Data from './dom/data' import EventHandler from './dom/event-handler' import BaseComponent from './base-component' import SelectorEngine from './dom/selector-engine' @@ -211,7 +210,7 @@ class Offcanvas extends BaseComponent { static jQueryInterface(config) { return this.each(function () { - const data = Data.get(this, DATA_KEY) || new Offcanvas(this, typeof config === 'object' ? config : {}) + const data = Offcanvas.getOrCreateInstance(this, config) if (typeof config !== 'string') { return @@ -256,14 +255,13 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function ( Offcanvas.getInstance(allReadyOpen).hide() } - const data = Data.get(target, DATA_KEY) || new Offcanvas(target) - + const data = Offcanvas.getOrCreateInstance(target) data.toggle(this) }) -EventHandler.on(window, EVENT_LOAD_DATA_API, () => { - SelectorEngine.find(OPEN_SELECTOR).forEach(el => (Data.get(el, DATA_KEY) || new Offcanvas(el)).show()) -}) +EventHandler.on(window, EVENT_LOAD_DATA_API, () => + SelectorEngine.find(OPEN_SELECTOR).forEach(el => Offcanvas.getOrCreateInstance(el).show()) +) /** * ------------------------------------------------------------------------ diff --git a/js/src/popover.js b/js/src/popover.js index 929391392a..457760c14c 100644 --- a/js/src/popover.js +++ b/js/src/popover.js @@ -6,7 +6,6 @@ */ import { defineJQueryPlugin } from './util/index' -import Data from './dom/data' import SelectorEngine from './dom/selector-engine' import Tooltip from './tooltip' @@ -146,13 +145,7 @@ class Popover extends Tooltip { static jQueryInterface(config) { return this.each(function () { - let data = Data.get(this, DATA_KEY) - const _config = typeof config === 'object' ? config : null - - if (!data) { - data = new Popover(this, _config) - Data.set(this, DATA_KEY, data) - } + const data = Popover.getOrCreateInstance(this, config) if (typeof config === 'string') { if (typeof data[config] === 'undefined') { diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js index 3297c45c23..b7ea2a4e5f 100644 --- a/js/src/scrollspy.js +++ b/js/src/scrollspy.js @@ -270,7 +270,7 @@ class ScrollSpy extends BaseComponent { static jQueryInterface(config) { return this.each(function () { - const data = ScrollSpy.getInstance(this) || new ScrollSpy(this, typeof config === 'object' ? config : {}) + const data = ScrollSpy.getOrCreateInstance(this, config) if (typeof config !== 'string') { return diff --git a/js/src/tab.js b/js/src/tab.js index 51deb170f8..6de48e4cd0 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -11,7 +11,6 @@ import { isDisabled, reflow } from './util/index' -import Data from './dom/data' import EventHandler from './dom/event-handler' import SelectorEngine from './dom/selector-engine' import BaseComponent from './base-component' @@ -181,7 +180,7 @@ class Tab extends BaseComponent { static jQueryInterface(config) { return this.each(function () { - const data = Data.get(this, DATA_KEY) || new Tab(this) + const data = Tab.getOrCreateInstance(this) if (typeof config === 'string') { if (typeof data[config] === 'undefined') { @@ -209,7 +208,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function ( return } - const data = Data.get(this, DATA_KEY) || new Tab(this) + const data = Tab.getOrCreateInstance(this) data.show() }) diff --git a/js/src/toast.js b/js/src/toast.js index 40cd40d9a9..8aeaa01483 100644 --- a/js/src/toast.js +++ b/js/src/toast.js @@ -10,7 +10,6 @@ import { reflow, typeCheckConfig } from './util/index' -import Data from './dom/data' import EventHandler from './dom/event-handler' import Manipulator from './dom/manipulator' import BaseComponent from './base-component' @@ -218,12 +217,7 @@ class Toast extends BaseComponent { static jQueryInterface(config) { return this.each(function () { - let data = Data.get(this, DATA_KEY) - const _config = typeof config === 'object' && config - - if (!data) { - data = new Toast(this, _config) - } + const data = Toast.getOrCreateInstance(this, config) if (typeof config === 'string') { if (typeof data[config] === 'undefined') { diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 2eb91965b2..78b7c478ba 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -722,12 +722,7 @@ class Tooltip extends BaseComponent { static jQueryInterface(config) { return this.each(function () { - let data = Data.get(this, DATA_KEY) - const _config = typeof config === 'object' && config - - if (!data) { - data = new Tooltip(this, _config) - } + const data = Tooltip.getOrCreateInstance(this, config) if (typeof config === 'string') { if (typeof data[config] === 'undefined') { diff --git a/js/tests/unit/alert.spec.js b/js/tests/unit/alert.spec.js index 29b99d7921..53dc0700c9 100644 --- a/js/tests/unit/alert.spec.js +++ b/js/tests/unit/alert.spec.js @@ -207,4 +207,26 @@ describe('Alert', () => { expect(Alert.getInstance(div)).toEqual(null) }) }) + + describe('getOrCreateInstance', () => { + it('should return alert instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const alert = new Alert(div) + + expect(Alert.getOrCreateInstance(div)).toEqual(alert) + expect(Alert.getInstance(div)).toEqual(Alert.getOrCreateInstance(div, {})) + expect(Alert.getOrCreateInstance(div)).toBeInstanceOf(Alert) + }) + + it('should return new instance when there is no alert instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(Alert.getInstance(div)).toEqual(null) + expect(Alert.getOrCreateInstance(div)).toBeInstanceOf(Alert) + }) + }) }) diff --git a/js/tests/unit/base-component.spec.js b/js/tests/unit/base-component.spec.js index 7a849be062..1000f2841d 100644 --- a/js/tests/unit/base-component.spec.js +++ b/js/tests/unit/base-component.spec.js @@ -112,5 +112,22 @@ describe('Base Component', () => { expect(DummyClass.getInstance(div)).toEqual(null) }) }) + describe('getOrCreateInstance', () => { + it('should return an instance', () => { + createInstance() + + expect(DummyClass.getOrCreateInstance(element)).toEqual(instance) + expect(DummyClass.getInstance(element)).toEqual(DummyClass.getOrCreateInstance(element, {})) + expect(DummyClass.getOrCreateInstance(element)).toBeInstanceOf(DummyClass) + }) + + it('should return new instance when there is no alert instance', () => { + fixtureEl.innerHTML = '<div id="foo"></div>' + element = fixtureEl.querySelector('#foo') + + expect(DummyClass.getInstance(element)).toEqual(null) + expect(DummyClass.getOrCreateInstance(element)).toBeInstanceOf(DummyClass) + }) + }) }) }) diff --git a/js/tests/unit/button.spec.js b/js/tests/unit/button.spec.js index 90cf766144..be99177e87 100644 --- a/js/tests/unit/button.spec.js +++ b/js/tests/unit/button.spec.js @@ -164,4 +164,26 @@ describe('Button', () => { expect(Button.getInstance(div)).toEqual(null) }) }) + + describe('getOrCreateInstance', () => { + it('should return button instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const button = new Button(div) + + expect(Button.getOrCreateInstance(div)).toEqual(button) + expect(Button.getInstance(div)).toEqual(Button.getOrCreateInstance(div, {})) + expect(Button.getOrCreateInstance(div)).toBeInstanceOf(Button) + }) + + it('should return new instance when there is no button instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(Button.getInstance(div)).toEqual(null) + expect(Button.getOrCreateInstance(div)).toBeInstanceOf(Button) + }) + }) }) diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js index 324ff19a70..5120cc6015 100644 --- a/js/tests/unit/carousel.spec.js +++ b/js/tests/unit/carousel.spec.js @@ -1202,6 +1202,60 @@ describe('Carousel', () => { }) }) + describe('getOrCreateInstance', () => { + it('should return carousel instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const carousel = new Carousel(div) + + expect(Carousel.getOrCreateInstance(div)).toEqual(carousel) + expect(Carousel.getInstance(div)).toEqual(Carousel.getOrCreateInstance(div, {})) + expect(Carousel.getOrCreateInstance(div)).toBeInstanceOf(Carousel) + }) + + it('should return new instance when there is no carousel instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(Carousel.getInstance(div)).toEqual(null) + expect(Carousel.getOrCreateInstance(div)).toBeInstanceOf(Carousel) + }) + + it('should return new instance when there is no carousel instance with given configuration', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(Carousel.getInstance(div)).toEqual(null) + const carousel = Carousel.getOrCreateInstance(div, { + interval: 1 + }) + expect(carousel).toBeInstanceOf(Carousel) + + expect(carousel._config.interval).toEqual(1) + }) + + it('should return the instance when exists without given configuration', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const carousel = new Carousel(div, { + interval: 1 + }) + expect(Carousel.getInstance(div)).toEqual(carousel) + + const carousel2 = Carousel.getOrCreateInstance(div, { + interval: 2 + }) + expect(carousel).toBeInstanceOf(Carousel) + expect(carousel2).toEqual(carousel) + + expect(carousel2._config.interval).toEqual(1) + }) + }) + 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 0997ae7c20..11d8d52bf5 100644 --- a/js/tests/unit/collapse.spec.js +++ b/js/tests/unit/collapse.spec.js @@ -862,4 +862,58 @@ describe('Collapse', () => { expect(Collapse.getInstance(div)).toEqual(null) }) }) + + describe('getOrCreateInstance', () => { + it('should return collapse instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const collapse = new Collapse(div) + + expect(Collapse.getOrCreateInstance(div)).toEqual(collapse) + expect(Collapse.getInstance(div)).toEqual(Collapse.getOrCreateInstance(div, {})) + expect(Collapse.getOrCreateInstance(div)).toBeInstanceOf(Collapse) + }) + + it('should return new instance when there is no collapse instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(Collapse.getInstance(div)).toEqual(null) + expect(Collapse.getOrCreateInstance(div)).toBeInstanceOf(Collapse) + }) + + it('should return new instance when there is no collapse instance with given configuration', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(Collapse.getInstance(div)).toEqual(null) + const collapse = Collapse.getOrCreateInstance(div, { + toggle: false + }) + expect(collapse).toBeInstanceOf(Collapse) + + expect(collapse._config.toggle).toEqual(false) + }) + + it('should return the instance when exists without given configuration', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const collapse = new Collapse(div, { + toggle: false + }) + expect(Collapse.getInstance(div)).toEqual(collapse) + + const collapse2 = Collapse.getOrCreateInstance(div, { + toggle: true + }) + expect(collapse).toBeInstanceOf(Collapse) + expect(collapse2).toEqual(collapse) + + expect(collapse2._config.toggle).toEqual(false) + }) + }) }) diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js index 390cddfbfa..9703eaab19 100644 --- a/js/tests/unit/dropdown.spec.js +++ b/js/tests/unit/dropdown.spec.js @@ -1991,6 +1991,60 @@ describe('Dropdown', () => { }) }) + describe('getOrCreateInstance', () => { + it('should return dropdown instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const dropdown = new Dropdown(div) + + expect(Dropdown.getOrCreateInstance(div)).toEqual(dropdown) + expect(Dropdown.getInstance(div)).toEqual(Dropdown.getOrCreateInstance(div, {})) + expect(Dropdown.getOrCreateInstance(div)).toBeInstanceOf(Dropdown) + }) + + it('should return new instance when there is no dropdown instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(Dropdown.getInstance(div)).toEqual(null) + expect(Dropdown.getOrCreateInstance(div)).toBeInstanceOf(Dropdown) + }) + + it('should return new instance when there is no dropdown instance with given configuration', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(Dropdown.getInstance(div)).toEqual(null) + const dropdown = Dropdown.getOrCreateInstance(div, { + display: 'dynamic' + }) + expect(dropdown).toBeInstanceOf(Dropdown) + + expect(dropdown._config.display).toEqual('dynamic') + }) + + it('should return the instance when exists without given configuration', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const dropdown = new Dropdown(div, { + display: 'dynamic' + }) + expect(Dropdown.getInstance(div)).toEqual(dropdown) + + const dropdown2 = Dropdown.getOrCreateInstance(div, { + display: 'static' + }) + expect(dropdown).toBeInstanceOf(Dropdown) + expect(dropdown2).toEqual(dropdown) + + expect(dropdown2._config.display).toEqual('dynamic') + }) + }) + it('should open dropdown when pressing keydown or keyup', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js index 2974495cac..0056e82f63 100644 --- a/js/tests/unit/modal.spec.js +++ b/js/tests/unit/modal.spec.js @@ -1058,4 +1058,58 @@ describe('Modal', () => { expect(Modal.getInstance(div)).toBeNull() }) }) + + describe('getOrCreateInstance', () => { + it('should return modal instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const modal = new Modal(div) + + expect(Modal.getOrCreateInstance(div)).toEqual(modal) + expect(Modal.getInstance(div)).toEqual(Modal.getOrCreateInstance(div, {})) + expect(Modal.getOrCreateInstance(div)).toBeInstanceOf(Modal) + }) + + it('should return new instance when there is no modal instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(Modal.getInstance(div)).toEqual(null) + expect(Modal.getOrCreateInstance(div)).toBeInstanceOf(Modal) + }) + + it('should return new instance when there is no modal instance with given configuration', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(Modal.getInstance(div)).toEqual(null) + const modal = Modal.getOrCreateInstance(div, { + backdrop: true + }) + expect(modal).toBeInstanceOf(Modal) + + expect(modal._config.backdrop).toEqual(true) + }) + + it('should return the instance when exists without given configuration', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const modal = new Modal(div, { + backdrop: true + }) + expect(Modal.getInstance(div)).toEqual(modal) + + const modal2 = Modal.getOrCreateInstance(div, { + backdrop: false + }) + expect(modal).toBeInstanceOf(Modal) + expect(modal2).toEqual(modal) + + expect(modal2._config.backdrop).toEqual(true) + }) + }) }) diff --git a/js/tests/unit/offcanvas.spec.js b/js/tests/unit/offcanvas.spec.js index dfb6c429e2..0f67fef9d1 100644 --- a/js/tests/unit/offcanvas.spec.js +++ b/js/tests/unit/offcanvas.spec.js @@ -620,38 +620,6 @@ describe('Offcanvas', () => { }).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>' @@ -675,8 +643,6 @@ describe('Offcanvas', () => { 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).not.toBeNull() @@ -703,4 +669,58 @@ describe('Offcanvas', () => { expect(Offcanvas.getInstance(div)).toBeNull() }) }) + + describe('getOrCreateInstance', () => { + it('should return offcanvas instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const offcanvas = new Offcanvas(div) + + expect(Offcanvas.getOrCreateInstance(div)).toEqual(offcanvas) + expect(Offcanvas.getInstance(div)).toEqual(Offcanvas.getOrCreateInstance(div, {})) + expect(Offcanvas.getOrCreateInstance(div)).toBeInstanceOf(Offcanvas) + }) + + it('should return new instance when there is no Offcanvas instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(Offcanvas.getInstance(div)).toEqual(null) + expect(Offcanvas.getOrCreateInstance(div)).toBeInstanceOf(Offcanvas) + }) + + it('should return new instance when there is no offcanvas instance with given configuration', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(Offcanvas.getInstance(div)).toEqual(null) + const offcanvas = Offcanvas.getOrCreateInstance(div, { + scroll: true + }) + expect(offcanvas).toBeInstanceOf(Offcanvas) + + expect(offcanvas._config.scroll).toEqual(true) + }) + + it('should return the instance when exists without given configuration', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const offcanvas = new Offcanvas(div, { + scroll: true + }) + expect(Offcanvas.getInstance(div)).toEqual(offcanvas) + + const offcanvas2 = Offcanvas.getOrCreateInstance(div, { + scroll: false + }) + expect(offcanvas).toBeInstanceOf(Offcanvas) + expect(offcanvas2).toEqual(offcanvas) + + expect(offcanvas2._config.scroll).toEqual(true) + }) + }) }) diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js index def0f5f040..f5a163050e 100644 --- a/js/tests/unit/popover.spec.js +++ b/js/tests/unit/popover.spec.js @@ -287,4 +287,58 @@ describe('Popover', () => { expect(Popover.getInstance(popoverEl)).toEqual(null) }) }) + + describe('getOrCreateInstance', () => { + it('should return popover instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const popover = new Popover(div) + + expect(Popover.getOrCreateInstance(div)).toEqual(popover) + expect(Popover.getInstance(div)).toEqual(Popover.getOrCreateInstance(div, {})) + expect(Popover.getOrCreateInstance(div)).toBeInstanceOf(Popover) + }) + + it('should return new instance when there is no popover instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(Popover.getInstance(div)).toEqual(null) + expect(Popover.getOrCreateInstance(div)).toBeInstanceOf(Popover) + }) + + it('should return new instance when there is no popover instance with given configuration', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(Popover.getInstance(div)).toEqual(null) + const popover = Popover.getOrCreateInstance(div, { + placement: 'top' + }) + expect(popover).toBeInstanceOf(Popover) + + expect(popover._config.placement).toEqual('top') + }) + + it('should return the instance when exists without given configuration', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const popover = new Popover(div, { + placement: 'top' + }) + expect(Popover.getInstance(div)).toEqual(popover) + + const popover2 = Popover.getOrCreateInstance(div, { + placement: 'bottom' + }) + expect(popover).toBeInstanceOf(Popover) + expect(popover2).toEqual(popover) + + expect(popover2._config.placement).toEqual('top') + }) + }) }) diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js index 6b2a134302..8724b83690 100644 --- a/js/tests/unit/scrollspy.spec.js +++ b/js/tests/unit/scrollspy.spec.js @@ -684,6 +684,60 @@ describe('ScrollSpy', () => { }) }) + describe('getOrCreateInstance', () => { + it('should return scrollspy instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const scrollspy = new ScrollSpy(div) + + expect(ScrollSpy.getOrCreateInstance(div)).toEqual(scrollspy) + expect(ScrollSpy.getInstance(div)).toEqual(ScrollSpy.getOrCreateInstance(div, {})) + expect(ScrollSpy.getOrCreateInstance(div)).toBeInstanceOf(ScrollSpy) + }) + + it('should return new instance when there is no scrollspy instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(ScrollSpy.getInstance(div)).toEqual(null) + expect(ScrollSpy.getOrCreateInstance(div)).toBeInstanceOf(ScrollSpy) + }) + + it('should return new instance when there is no scrollspy instance with given configuration', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(ScrollSpy.getInstance(div)).toEqual(null) + const scrollspy = ScrollSpy.getOrCreateInstance(div, { + offset: 1 + }) + expect(scrollspy).toBeInstanceOf(ScrollSpy) + + expect(scrollspy._config.offset).toEqual(1) + }) + + it('should return the instance when exists without given configuration', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const scrollspy = new ScrollSpy(div, { + offset: 1 + }) + expect(ScrollSpy.getInstance(div)).toEqual(scrollspy) + + const scrollspy2 = ScrollSpy.getOrCreateInstance(div, { + offset: 2 + }) + expect(scrollspy).toBeInstanceOf(ScrollSpy) + expect(scrollspy2).toEqual(scrollspy) + + expect(scrollspy2._config.offset).toEqual(1) + }) + }) + describe('event handler', () => { it('should create scrollspy on window load event', () => { fixtureEl.innerHTML = '<div data-bs-spy="scroll"></div>' diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index 76d4765258..621012c12e 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -433,6 +433,28 @@ describe('Tab', () => { }) }) + describe('getOrCreateInstance', () => { + it('should return tab instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const tab = new Tab(div) + + expect(Tab.getOrCreateInstance(div)).toEqual(tab) + expect(Tab.getInstance(div)).toEqual(Tab.getOrCreateInstance(div, {})) + expect(Tab.getOrCreateInstance(div)).toBeInstanceOf(Tab) + }) + + it('should return new instance when there is no tab instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(Tab.getInstance(div)).toEqual(null) + expect(Tab.getOrCreateInstance(div)).toBeInstanceOf(Tab) + }) + }) + describe('data-api', () => { it('should create dynamically a tab', done => { fixtureEl.innerHTML = [ diff --git a/js/tests/unit/toast.spec.js b/js/tests/unit/toast.spec.js index 62cfc966de..59d0247b28 100644 --- a/js/tests/unit/toast.spec.js +++ b/js/tests/unit/toast.spec.js @@ -591,4 +591,58 @@ describe('Toast', () => { expect(Toast.getInstance(div)).toEqual(null) }) }) + + describe('getOrCreateInstance', () => { + it('should return toast instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const toast = new Toast(div) + + expect(Toast.getOrCreateInstance(div)).toEqual(toast) + expect(Toast.getInstance(div)).toEqual(Toast.getOrCreateInstance(div, {})) + expect(Toast.getOrCreateInstance(div)).toBeInstanceOf(Toast) + }) + + it('should return new instance when there is no toast instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(Toast.getInstance(div)).toEqual(null) + expect(Toast.getOrCreateInstance(div)).toBeInstanceOf(Toast) + }) + + it('should return new instance when there is no toast instance with given configuration', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(Toast.getInstance(div)).toEqual(null) + const toast = Toast.getOrCreateInstance(div, { + delay: 1 + }) + expect(toast).toBeInstanceOf(Toast) + + expect(toast._config.delay).toEqual(1) + }) + + it('should return the instance when exists without given configuration', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const toast = new Toast(div, { + delay: 1 + }) + expect(Toast.getInstance(div)).toEqual(toast) + + const toast2 = Toast.getOrCreateInstance(div, { + delay: 2 + }) + expect(toast).toBeInstanceOf(Toast) + expect(toast2).toEqual(toast) + + expect(toast2._config.delay).toEqual(1) + }) + }) }) diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js index b5a34bfe0a..8f8524c895 100644 --- a/js/tests/unit/tooltip.spec.js +++ b/js/tests/unit/tooltip.spec.js @@ -3,7 +3,7 @@ import EventHandler from '../../src/dom/event-handler' import { noop } from '../../src/util/index' /** Test helpers */ -import { getFixture, clearFixture, jQueryMock, createEvent } from '../helpers/fixture' +import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture' describe('Tooltip', () => { let fixtureEl @@ -1306,6 +1306,60 @@ describe('Tooltip', () => { }) }) + describe('getOrCreateInstance', () => { + it('should return tooltip instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const tooltip = new Tooltip(div) + + expect(Tooltip.getOrCreateInstance(div)).toEqual(tooltip) + expect(Tooltip.getInstance(div)).toEqual(Tooltip.getOrCreateInstance(div, {})) + expect(Tooltip.getOrCreateInstance(div)).toBeInstanceOf(Tooltip) + }) + + it('should return new instance when there is no tooltip instance', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(Tooltip.getInstance(div)).toEqual(null) + expect(Tooltip.getOrCreateInstance(div)).toBeInstanceOf(Tooltip) + }) + + it('should return new instance when there is no tooltip instance with given configuration', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + + expect(Tooltip.getInstance(div)).toEqual(null) + const tooltip = Tooltip.getOrCreateInstance(div, { + title: () => 'test' + }) + expect(tooltip).toBeInstanceOf(Tooltip) + + expect(tooltip.getTitle()).toEqual('test') + }) + + it('should return the instance when exists without given configuration', () => { + fixtureEl.innerHTML = '<div></div>' + + const div = fixtureEl.querySelector('div') + const tooltip = new Tooltip(div, { + title: () => 'nothing' + }) + expect(Tooltip.getInstance(div)).toEqual(tooltip) + + const tooltip2 = Tooltip.getOrCreateInstance(div, { + title: () => 'test' + }) + expect(tooltip).toBeInstanceOf(Tooltip) + expect(tooltip2).toEqual(tooltip) + + expect(tooltip2.getTitle()).toEqual('nothing') + }) + }) + describe('jQueryInterface', () => { it('should create a tooltip', () => { fixtureEl.innerHTML = '<div></div>' |