From 0ed30a8e2ea48e0df5490dc9218d83184de3aca4 Mon Sep 17 00:00:00 2001
From: carson <carson@leaddyno.com>
Date: Sun, 26 Apr 2020 10:00:40 -0700
Subject: [PATCH] test cleanup and test append/prepend

---
 src/htmx.js    |  6 ++--
 test/core.html | 86 +++++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 77 insertions(+), 15 deletions(-)

diff --git a/src/htmx.js b/src/htmx.js
index ee640b8c..5e2672df 100644
--- a/src/htmx.js
+++ b/src/htmx.js
@@ -1,13 +1,13 @@
 var HTMx = HTMx || (function()
 {
     // resolve with both hx and data-hx prefixes
-    function getAttribute(elt, qualifiedName) {
+    function getAttributeValue(elt, qualifiedName) {
         return elt.getAttribute(qualifiedName) || elt.getAttribute("data-" + qualifiedName);
     }
 
     function getClosestAttributeValue(elt, attributeName)
     {
-        let attribute = getAttribute(elt, attributeName);
+        let attribute = getAttributeValue(elt, attributeName);
         if(attribute)
         {
             return attribute;
@@ -102,7 +102,7 @@ var HTMx = HTMx || (function()
     function processElement(elt) {
         if(elt.getAttribute('hx-get')) {
             elt.addEventListener("click", function(evt){
-                issueAjaxRequest(elt, getAttribute(elt, 'hx-get'));
+                issueAjaxRequest(elt, getAttributeValue(elt, 'hx-get'));
                 evt.stopPropagation();
             });
         }
diff --git a/test/core.html b/test/core.html
index b64c9d9b..28b90920 100644
--- a/test/core.html
+++ b/test/core.html
@@ -46,31 +46,37 @@
         });
 
         // bootstrap test
-        it('issues a GET request on click and swaps content', function() {
-            let btn = make('<button hx-get="/test1">Click Me!</button>')
-            this.server.respondWith("GET", "/test1", "Clicked!");
+        it('issues a GET request on click and swaps content', function()
+        {
+            this.server.respondWith("GET", "/core_test1", "Clicked!");
+
+            let btn = make('<button hx-get="/core_test1">Click Me!</button>')
             btn.click();
             this.server.respond();
             btn.innerHTML.should.equal("Clicked!");
         });
 
-        it('processes inner content properly', function() {
-            let div = make('<div hx-get="/test2"></div>')
-            this.server.respondWith("GET", "/test2", '<a hx-get="/test2_2">Click Me</a>');
-            this.server.respondWith("GET", "/test2_2", "Clicked!");
+        it('processes inner content properly', function()
+        {
+            this.server.respondWith("GET", "/core_test2", '<a hx-get="/core_test2_2">Click Me</a>');
+            this.server.respondWith("GET", "/core_test2_2", "Clicked!");
+
+            let div = make('<div hx-get="/core_test2"></div>')
             div.click();
             this.server.respond();
-            div.innerHTML.should.equal('<a hx-get="/test2_2">Click Me</a>');
+            div.innerHTML.should.equal('<a hx-get="/core_test2_2">Click Me</a>');
             let a = div.querySelector('a');
             a.click();
             this.server.respond();
             a.innerHTML.should.equal('Clicked!');
         });
 
-        it('handles swap outerHTML properly', function() {
-            let div = make('<div id="div-outer-html-test" hx-get="/test3" hx-swap="outerHTML"></div>')
-            this.server.respondWith("GET", "/test3", '<a id="a-outer-html-test" hx-get="/test3_2">Click Me</a>');
-            this.server.respondWith("GET", "/test3_2", "Clicked!");
+        it('handles swap outerHTML properly', function()
+        {
+            this.server.respondWith("GET", "/core_test3", '<a id="a-outer-html-test" hx-get="/core_test3_2">Click Me</a>');
+            this.server.respondWith("GET", "/core_test3_2", "Clicked!");
+
+            let div = make('<div id="div-outer-html-test" hx-get="/core_test3" hx-swap="outerHTML"></div>')
             div.click();
             should.equal(byId("div-outer-html-test"), div);
             this.server.respond();
@@ -80,11 +86,67 @@
             byId("a-outer-html-test").innerHTML.should.equal('Clicked!');
         });
 
+        it('handles prepend properly', function()
+        {
+            let i = 0;
+            this.server.respondWith("GET", "/core_test4", function(xhr){
+                i++;
+                xhr.respond(200, {}, '<a id="a-prepend-test-' + i + '" hx-get="/core_test4_2" hx-swap="innerHTML">' + i + '</a>');
+            });
+            this.server.respondWith("GET", "/core_test4_2", "*");
+
+            let div = make('<div hx-get="/core_test4" hx-swap="prepend">*</div>')
+            div.click();
+            this.server.respond();
+            div.innerText.should.equal("1*");
+
+            byId("a-prepend-test-1").click();
+            this.server.respond();
+            div.innerText.should.equal("**");
+
+            div.click();
+            this.server.respond();
+            div.innerText.should.equal("2**");
+
+            byId("a-prepend-test-2").click();
+            this.server.respond();
+            div.innerText.should.equal("***");
+        });
+
+        it('handles append properly', function()
+        {
+            let i = 0;
+            this.server.respondWith("GET", "/core_test5", function(xhr){
+                i++;
+                xhr.respond(200, {}, '<a id="a-append-test-' + i + '" hx-get="/core_test5_2" hx-swap="innerHTML">' + i + '</a>');
+            });
+            this.server.respondWith("GET", "/core_test5_2", "*");
+
+            let div = make('<div hx-get="/core_test5" hx-swap="append">*</div>')
+            div.click();
+            this.server.respond();
+            div.innerText.should.equal("*1");
+
+            byId("a-append-test-1").click();
+            this.server.respond();
+            div.innerText.should.equal("**");
+
+            div.click();
+            this.server.respond();
+            div.innerText.should.equal("**2");
+
+            byId("a-append-test-2").click();
+            this.server.respond();
+            div.innerText.should.equal("***");
+        });
+
     })
 </script>
 
 <script class="mocha-exec">
     mocha.run();
 </script>
+<em>Work Area</em>
+<hr/>
 </body>
 </html>