2021-05-11 09:49:30 +02:00
|
|
|
import BaseComponent from '../../src/base-component'
|
|
|
|
import { clearFixture, getFixture } from '../helpers/fixture'
|
|
|
|
import EventHandler from '../../src/dom/event-handler'
|
|
|
|
import { noop } from '../../src/util'
|
|
|
|
|
|
|
|
class DummyClass extends BaseComponent {
|
|
|
|
constructor(element) {
|
|
|
|
super(element)
|
|
|
|
|
|
|
|
EventHandler.on(this._element, `click${DummyClass.EVENT_KEY}`, noop)
|
|
|
|
}
|
|
|
|
|
|
|
|
static get NAME() {
|
|
|
|
return 'dummy'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
describe('Base Component', () => {
|
|
|
|
let fixtureEl
|
|
|
|
const name = 'dummy'
|
|
|
|
let element
|
|
|
|
let instance
|
|
|
|
const createInstance = () => {
|
|
|
|
fixtureEl.innerHTML = '<div id="foo"></div>'
|
|
|
|
element = fixtureEl.querySelector('#foo')
|
|
|
|
instance = new DummyClass(element)
|
|
|
|
}
|
|
|
|
|
|
|
|
beforeAll(() => {
|
|
|
|
fixtureEl = getFixture()
|
|
|
|
})
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
clearFixture()
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('Static Methods', () => {
|
|
|
|
describe('VERSION', () => {
|
|
|
|
it('should return version', () => {
|
2021-10-14 17:16:54 +02:00
|
|
|
expect(DummyClass.VERSION).toEqual(jasmine.any(String))
|
2021-05-11 09:49:30 +02:00
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('DATA_KEY', () => {
|
|
|
|
it('should return plugin data key', () => {
|
|
|
|
expect(DummyClass.DATA_KEY).toEqual(`bs.${name}`)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('NAME', () => {
|
2021-11-29 13:27:03 +01:00
|
|
|
it('should throw an Error if it is not initialized', () => {
|
|
|
|
expect(() => {
|
|
|
|
// eslint-disable-next-line no-unused-expressions
|
|
|
|
BaseComponent.NAME
|
|
|
|
}).toThrowError(Error)
|
|
|
|
})
|
|
|
|
|
2021-05-11 09:49:30 +02:00
|
|
|
it('should return plugin NAME', () => {
|
|
|
|
expect(DummyClass.NAME).toEqual(name)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('EVENT_KEY', () => {
|
|
|
|
it('should return plugin event key', () => {
|
|
|
|
expect(DummyClass.EVENT_KEY).toEqual(`.bs.${name}`)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
2021-11-26 08:16:59 +01:00
|
|
|
|
2021-05-11 09:49:30 +02:00
|
|
|
describe('Public Methods', () => {
|
|
|
|
describe('constructor', () => {
|
|
|
|
it('should accept element, either passed as a CSS selector or DOM element', () => {
|
|
|
|
fixtureEl.innerHTML = [
|
|
|
|
'<div id="foo"></div>',
|
|
|
|
'<div id="bar"></div>'
|
|
|
|
].join('')
|
|
|
|
|
|
|
|
const el = fixtureEl.querySelector('#foo')
|
|
|
|
const elInstance = new DummyClass(el)
|
|
|
|
const selectorInstance = new DummyClass('#bar')
|
|
|
|
|
|
|
|
expect(elInstance._element).toEqual(el)
|
|
|
|
expect(selectorInstance._element).toEqual(fixtureEl.querySelector('#bar'))
|
|
|
|
})
|
2021-11-29 13:27:03 +01:00
|
|
|
|
|
|
|
it('should not initialize and add element record to Data (caching), if argument `element` is not an HTML element', () => {
|
|
|
|
fixtureEl.innerHTML = ''
|
|
|
|
|
|
|
|
const el = fixtureEl.querySelector('#foo')
|
|
|
|
const elInstance = new DummyClass(el)
|
|
|
|
const selectorInstance = new DummyClass('#bar')
|
|
|
|
|
|
|
|
expect(elInstance._element).not.toBeDefined()
|
|
|
|
expect(selectorInstance._element).not.toBeDefined()
|
|
|
|
})
|
2021-05-11 09:49:30 +02:00
|
|
|
})
|
2021-11-26 08:16:59 +01:00
|
|
|
|
2021-05-11 09:49:30 +02:00
|
|
|
describe('dispose', () => {
|
|
|
|
it('should dispose an component', () => {
|
|
|
|
createInstance()
|
|
|
|
expect(DummyClass.getInstance(element)).not.toBeNull()
|
|
|
|
|
|
|
|
instance.dispose()
|
|
|
|
|
|
|
|
expect(DummyClass.getInstance(element)).toBeNull()
|
|
|
|
expect(instance._element).toBeNull()
|
|
|
|
})
|
|
|
|
|
|
|
|
it('should de-register element event listeners', () => {
|
|
|
|
createInstance()
|
2022-05-31 10:18:32 +02:00
|
|
|
const spy = spyOn(EventHandler, 'off')
|
2021-05-11 09:49:30 +02:00
|
|
|
|
|
|
|
instance.dispose()
|
|
|
|
|
2022-05-31 10:18:32 +02:00
|
|
|
expect(spy).toHaveBeenCalledWith(element, DummyClass.EVENT_KEY)
|
2021-05-11 09:49:30 +02:00
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('getInstance', () => {
|
|
|
|
it('should return an instance', () => {
|
|
|
|
createInstance()
|
|
|
|
|
|
|
|
expect(DummyClass.getInstance(element)).toEqual(instance)
|
|
|
|
expect(DummyClass.getInstance(element)).toBeInstanceOf(DummyClass)
|
|
|
|
})
|
|
|
|
|
2021-06-29 16:45:45 +02:00
|
|
|
it('should accept element, either passed as a CSS selector, jQuery element, or DOM element', () => {
|
|
|
|
createInstance()
|
|
|
|
|
|
|
|
expect(DummyClass.getInstance('#foo')).toEqual(instance)
|
|
|
|
expect(DummyClass.getInstance(element)).toEqual(instance)
|
|
|
|
|
|
|
|
const fakejQueryObject = {
|
|
|
|
0: element,
|
|
|
|
jquery: 'foo'
|
|
|
|
}
|
|
|
|
|
|
|
|
expect(DummyClass.getInstance(fakejQueryObject)).toEqual(instance)
|
|
|
|
})
|
|
|
|
|
2021-05-11 09:49:30 +02:00
|
|
|
it('should return null when there is no instance', () => {
|
|
|
|
fixtureEl.innerHTML = '<div></div>'
|
|
|
|
|
|
|
|
const div = fixtureEl.querySelector('div')
|
|
|
|
|
2021-10-14 17:16:54 +02:00
|
|
|
expect(DummyClass.getInstance(div)).toBeNull()
|
2021-05-11 09:49:30 +02:00
|
|
|
})
|
|
|
|
})
|
2021-11-26 08:16:59 +01:00
|
|
|
|
2021-06-03 17:53:27 +02:00
|
|
|
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')
|
|
|
|
|
2021-10-14 17:16:54 +02:00
|
|
|
expect(DummyClass.getInstance(element)).toBeNull()
|
2021-06-03 17:53:27 +02:00
|
|
|
expect(DummyClass.getOrCreateInstance(element)).toBeInstanceOf(DummyClass)
|
|
|
|
})
|
|
|
|
})
|
2021-05-11 09:49:30 +02:00
|
|
|
})
|
|
|
|
})
|