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