Fix/issue 2314 htmx:oobErrorNoTarget event does not trigger

[CaliViking]

Description

Issue is described in #2314
htmx:oobErrorNoTarget event does not trigger

I changed the function oobSwap so that it tests for the length of target "if (targets.length > 0) {":

        /**
         *
         * @param {string} oobValue
         * @param {HTMLElement} oobElement
         * @param {*} settleInfo
         * @returns
         */
        function oobSwap(oobValue, oobElement, settleInfo) {
            var selector = "#" + getRawAttribute(oobElement, "id");
            var swapStyle = "outerHTML";
            if (oobValue === "true") {
                // do nothing
            } else if (oobValue.indexOf(":") > 0) {
                swapStyle = oobValue.substr(0, oobValue.indexOf(":"));
                selector  = oobValue.substr(oobValue.indexOf(":") + 1, oobValue.length);
            } else {
                swapStyle = oobValue;
            }

            var targets = getDocument().querySelectorAll(selector);
            if (targets.length > 0) {
                forEach(
                    targets,
                    function (target) {
                        var fragment;
                        var oobElementClone = oobElement.cloneNode(true);
                        fragment = getDocument().createDocumentFragment();
                        fragment.appendChild(oobElementClone);
                        if (!isInlineSwap(swapStyle, target)) {
                            fragment = oobElementClone; // if this is not an inline swap, we use the content of the node, not the node itself
                        }

                        var beforeSwapDetails = {shouldSwap: true, target: target, fragment:fragment };
                        if (!triggerEvent(target, 'htmx:oobBeforeSwap', beforeSwapDetails)) return;

                        target = beforeSwapDetails.target; // allow re-targeting
                        if (beforeSwapDetails['shouldSwap']){
                            swap(swapStyle, target, target, fragment, settleInfo);
                        }
                        forEach(settleInfo.elts, function (elt) {
                            triggerEvent(elt, 'htmx:oobAfterSwap', beforeSwapDetails);
                        });
                    }
                );
                oobElement.parentNode.removeChild(oobElement);
            } else {
                oobElement.parentNode.removeChild(oobElement);
                triggerErrorEvent(getDocument().body, "htmx:oobErrorNoTarget", {content: oobElement});
            }
            return oobValue;
        }

Corresponding issue:

Testing

I added a unit test in hx-swab-oob.js:

    it('triggers htmx:oobErrorNoTarget when no targets found', function (done) {
        this.server.respondWith("GET", "/test", "Clicked<div id='nonexistent' hx-swap-oob='true'>Swapped</div>");
        var div = make('<div hx-get="/test">click me</div>');
        
        // Define the event listener function so it can be removed later
        var eventListenerFunction = function (event) {
            event.detail.content.innerHTML.should.equal("Swapped");
            document.body.removeEventListener('htmx:oobErrorNoTarget', eventListenerFunction);
            done();
        };
    
        document.body.addEventListener('htmx:oobErrorNoTarget', eventListenerFunction);
        div.click();
        this.server.respond();
    });

Checklist

• I have read the contribution guidelines
• I have targeted this PR against the correct branch (master for website changes, dev for
  source changes)
• This is either a bugfix, a documentation update, or a new feature that has been explicitly
  approved via an issue
• I ran the test suite locally (npm run test) and verified that it succeeded

[CaliViking]

It looks like #2215 is addressing the same bug.
An open item is whether we should use querySelectorAll (like it is today) or getElementById, but this is a bigger issue. See #2472 and #1902