describe('Request Headers', function() { beforeEach(function() { setupTest(); }); afterEach(function() { cleanupTest(); }); describe('HX-Source header', function() { it('formats element with id', function() { let btn = createProcessedHTML(''); let ctx = htmx.__createRequestContext(btn, new Event('click')); ctx.request.headers['HX-Source'].should.equal('button#test-btn'); }); it('formats element with neither id nor name', function() { let btn = createProcessedHTML(''); let ctx = htmx.__createRequestContext(btn, new Event('click')); ctx.request.headers['HX-Source'].should.equal('button'); }); it('formats div element', function() { let div = createProcessedHTML('
'); let ctx = htmx.__createRequestContext(div, new Event('click')); ctx.request.headers['HX-Source'].should.equal('div#content'); }); it('formats form element', function() { let form = createProcessedHTML(''); let ctx = htmx.__createRequestContext(form, new Event('submit')); ctx.request.headers['HX-Source'].should.equal('form#my-form'); }); }); describe('HX-Target header', function() { it('formats target element with id', async function() { createProcessedHTML(''); let btn = document.querySelector('button'); let ctx = htmx.__createRequestContext(btn, new Event('click')); await htmx.__handleTriggerEvent(ctx); ctx.request.headers['HX-Target'].should.equal('div#result'); }); it('formats target when targeting self', async function() { let btn = createProcessedHTML(''); let ctx = htmx.__createRequestContext(btn, new Event('click')); await htmx.__handleTriggerEvent(ctx); ctx.request.headers['HX-Target'].should.equal('button#self-btn'); }); it('formats body target', async function() { let btn = createProcessedHTML(''); let ctx = htmx.__createRequestContext(btn, new Event('click')); await htmx.__handleTriggerEvent(ctx); ctx.request.headers['HX-Target'].should.equal('body'); }); }); describe('HX-Request-Type header', function() { it('sets to partial for regular element target', async function() { createProcessedHTML(''); let btn = document.querySelector('button'); let ctx = htmx.__createRequestContext(btn, new Event('click')); await htmx.__handleTriggerEvent(ctx); ctx.request.headers['HX-Request-Type'].should.equal('partial'); }); it('sets to partial when targeting self', async function() { let btn = createProcessedHTML(''); let ctx = htmx.__createRequestContext(btn, new Event('click')); await htmx.__handleTriggerEvent(ctx); ctx.request.headers['HX-Request-Type'].should.equal('partial'); }); it('sets to full when targeting body', async function() { let btn = createProcessedHTML(''); let ctx = htmx.__createRequestContext(btn, new Event('click')); await htmx.__handleTriggerEvent(ctx); ctx.request.headers['HX-Request-Type'].should.equal('full'); }); it('sets to full when hx-select is present', async function() { let btn = createProcessedHTML(''); let ctx = htmx.__createRequestContext(btn, new Event('click')); await htmx.__handleTriggerEvent(ctx); ctx.request.headers['HX-Request-Type'].should.equal('full'); }); it('sets to full when hx-select and body target both present', async function() { let btn = createProcessedHTML(''); let ctx = htmx.__createRequestContext(btn, new Event('click')); await htmx.__handleTriggerEvent(ctx); ctx.request.headers['HX-Request-Type'].should.equal('full'); }); }); describe('__buildIdentifier method', function() { it('builds identifier with id only', function() { let div = document.createElement('div'); div.id = 'test'; htmx.__buildIdentifier(div).should.equal('div#test'); }); it('builds identifier with neither id nor name', function() { let span = document.createElement('span'); htmx.__buildIdentifier(span).should.equal('span'); }); it('handles body element', function() { htmx.__buildIdentifier(document.body).should.equal('body'); }); }); });