describe('__trigger() unit tests', function() {
beforeEach(function() {
setupTest();
});
afterEach(function() {
cleanupTest();
});
it('triggers event on element', function () {
let div = createProcessedHTML('
')
let called = false
div.addEventListener('custom', () => called = true)
htmx.__trigger(div, 'custom')
assert.isTrue(called)
})
it('passes detail object', function () {
let div = createProcessedHTML('')
let receivedDetail = null
div.addEventListener('custom', (e) => receivedDetail = e.detail)
htmx.__trigger(div, 'custom', {foo: 'bar'})
assert.deepEqual(receivedDetail, {foo: 'bar'})
})
it('bubbles by default', function () {
let parent = createProcessedHTML('
')
let child = parent.querySelector('#child')
let calledOnParent = false
parent.addEventListener('custom', () => calledOnParent = true)
htmx.__trigger(child, 'custom')
assert.isTrue(calledOnParent)
})
it('can disable bubbling', function () {
let parent = createProcessedHTML('
')
let child = parent.querySelector('#child')
let calledOnParent = false
parent.addEventListener('custom', () => calledOnParent = true)
htmx.__trigger(child, 'custom', {}, false)
assert.isFalse(calledOnParent)
})
it('returns true when not cancelled', function () {
let div = createProcessedHTML('')
let result = htmx.__trigger(div, 'custom')
assert.isTrue(result)
})
it('returns false when event prevented', function () {
let div = createProcessedHTML('')
div.addEventListener('custom', (e) => e.preventDefault())
let result = htmx.__trigger(div, 'custom')
assert.isFalse(result)
})
it('works with selector string', function () {
createProcessedHTML('')
let called = false
document.getElementById('target').addEventListener('custom', () => called = true)
htmx.__trigger('#target', 'custom')
assert.isTrue(called)
})
it('handles colon in event name', function () {
let div = createProcessedHTML('')
let receivedEventName = null
div.addEventListener('htmx:custom', (e) => receivedEventName = e.type)
htmx.__trigger(div, 'htmx:custom')
assert.equal(receivedEventName, 'htmx:custom')
})
it('adjusts meta character when configured', function () {
let div = createProcessedHTML('')
let oldMetaCharacter = htmx.config.metaCharacter
htmx.config.metaCharacter = '-'
let receivedEventName = null
div.addEventListener('htmx-custom', (e) => receivedEventName = e.type)
htmx.__trigger(div, 'htmx:custom')
assert.equal(receivedEventName, 'htmx-custom')
htmx.config.metaCharacter = oldMetaCharacter
})
it('handles empty detail object by default', function () {
let div = createProcessedHTML('')
let receivedDetail = null
div.addEventListener('custom', (e) => receivedDetail = e.detail)
htmx.__trigger(div, 'custom')
assert.deepEqual(receivedDetail, {})
})
it('works with document element', function () {
let called = false
document.addEventListener('custom:doc', () => called = true)
htmx.__trigger(document, 'custom:doc')
assert.isTrue(called)
document.removeEventListener('custom:doc', () => {})
})
it('preserves detail properties', function () {
let div = createProcessedHTML('')
let receivedDetail = null
div.addEventListener('custom', (e) => receivedDetail = e.detail)
let detail = {
string: 'value',
number: 42,
boolean: true,
object: {nested: 'prop'},
array: [1, 2, 3]
}
htmx.__trigger(div, 'custom', detail)
assert.deepEqual(receivedDetail, detail)
})
it('event is composed', function () {
let shadowHost = createProcessedHTML('')
let shadowRoot = shadowHost.attachShadow({mode: 'open'})
let shadowChild = document.createElement('div')
shadowRoot.appendChild(shadowChild)
let calledOnHost = false
shadowHost.addEventListener('custom', (e) => {
calledOnHost = true
assert.isTrue(e.composed)
})
htmx.__trigger(shadowChild, 'custom')
assert.isTrue(calledOnHost)
})
it('event is cancelable', function () {
let div = createProcessedHTML('')
let wasCancelable = false
div.addEventListener('custom', (e) => {
wasCancelable = e.cancelable
e.preventDefault()
})
htmx.__trigger(div, 'custom')
assert.isTrue(wasCancelable)
})
});