1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-08 14:46:34 +02:00

Add getOrCreateInstance method in base-component (#33276)

Co-authored-by: Rohit Sharma <rohit2sharma95@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
GeoSot
2021-06-03 18:53:27 +03:00
committed by GitHub
parent 4a5029ea29
commit c98657b830
39 changed files with 744 additions and 124 deletions

View File

@@ -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)
})
})
})

View File

@@ -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)
})
})
})
})

View File

@@ -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)
})
})
})

View File

@@ -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>'

View File

@@ -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)
})
})
})

View File

@@ -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">',

View File

@@ -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)
})
})
})

View File

@@ -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)
})
})
})

View File

@@ -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')
})
})
})

View File

@@ -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>'

View File

@@ -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 = [

View File

@@ -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)
})
})
})

View File

@@ -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>'