docs and tests for trigger filters

3 files changed, 130 insertions, 7 deletions

diff --git a/test/attributes/hx-push-url.js b/test/attributes/hx-push-url.js
index 604a6d3c..80f5f366 100644
--- a/test/attributes/hx-push-url.js
+++ b/test/attributes/hx-push-url.js
@@ -37,7 +37,6 @@ describe("hx-push-url attribute", function() {
         this.server.respond();
         getWorkArea().textContent.should.equal("second")
         var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME));
-        console.log(cache);
         cache.length.should.equal(2);
         cache[1].url.should.equal("/abc123");
     });
@@ -193,7 +192,6 @@ describe("hx-push-url attribute", function() {
         for (var i = 0; i < 20; i++) {
             bigContent += bigContent;
         }
-        console.log(bigContent.length);
         try {
             localStorage.removeItem("htmx-history-cache");
             htmx._("saveToHistoryCache")("/dummy", bigContent, "Foo", 0);
diff --git a/test/attributes/hx-trigger.js b/test/attributes/hx-trigger.js
index 8752f864..25431301 100644
--- a/test/attributes/hx-trigger.js
+++ b/test/attributes/hx-trigger.js
@@ -152,7 +152,7 @@ describe("hx-trigger attribute", function(){
         spec.should.deep.equal([{trigger: 'change'}]);
     })
 
-    it('filters properly with filter spec', function(){
+    it('filters properly with false filter spec', function(){
         this.server.respondWith("GET", "/test", "Called!");
         var form = make('<form hx-get="/test" hx-trigger="evt[foo]">Not Called</form>');
         form.click();
@@ -161,10 +161,135 @@ describe("hx-trigger attribute", function(){
         form.dispatchEvent(event);
         this.server.respond();
         form.innerHTML.should.equal("Not Called");
+    })
+
+    it('filters properly with true filter spec', function(){
+        this.server.respondWith("GET", "/test", "Called!");
+        var form = make('<form hx-get="/test" hx-trigger="evt[foo]">Not Called</form>');
+        form.click();
+        form.innerHTML.should.equal("Not Called");
+        var event = htmx._("makeEvent")('evt');
         event.foo = true;
         form.dispatchEvent(event);
         this.server.respond();
         form.innerHTML.should.equal("Called!");
     })
 
+    it('filters properly compound filter spec', function(){
+        this.server.respondWith("GET", "/test", "Called!");
+        var div = make('<div hx-get="/test" hx-trigger="evt[foo&&bar]">Not Called</div>');
+        var event = htmx._("makeEvent")('evt');
+        event.foo = true;
+        div.dispatchEvent(event);
+        this.server.respond();
+        div.innerHTML.should.equal("Not Called");
+        event.bar = true;
+        div.dispatchEvent(event);
+        this.server.respond();
+        div.innerHTML.should.equal("Called!");
+    })
+
+    it('can refer to target element in condition', function(){
+        this.server.respondWith("GET", "/test", "Called!");
+        var div = make('<div hx-get="/test" hx-trigger="evt[target.classList.contains(\'doIt\')]">Not Called</div>');
+        var event = htmx._("makeEvent")('evt');
+        div.dispatchEvent(event);
+        this.server.respond();
+        div.innerHTML.should.equal("Not Called");
+        div.classList.add("doIt");
+        div.dispatchEvent(event);
+        this.server.respond();
+        div.innerHTML.should.equal("Called!");
+    })
+
+    it('negative condition', function(){
+        this.server.respondWith("GET", "/test", "Called!");
+        var div = make('<div hx-get="/test" hx-trigger="evt[!target.classList.contains(\'disabled\')]">Not Called</div>');
+        div.classList.add("disabled");
+        var event = htmx._("makeEvent")('evt');
+        div.dispatchEvent(event);
+        this.server.respond();
+        div.innerHTML.should.equal("Not Called");
+        div.classList.remove("disabled");
+        div.dispatchEvent(event);
+        this.server.respond();
+        div.innerHTML.should.equal("Called!");
+    })
+
+    it('global function call works', function(){
+        window.globalFun = function(evt) {
+            return evt.bar;
+        }
+        try {
+            this.server.respondWith("GET", "/test", "Called!");
+            var div = make('<div hx-get="/test" hx-trigger="evt[globalFun(event)]">Not Called</div>');
+            var event = htmx._("makeEvent")('evt');
+            event.bar = false;
+            div.dispatchEvent(event);
+            this.server.respond();
+            div.innerHTML.should.equal("Not Called");
+            event.bar = true;
+            div.dispatchEvent(event);
+            this.server.respond();
+            div.innerHTML.should.equal("Called!");
+        } finally {
+            delete window.globalFun;
+        }
+    })
+
+    it('global property event filter works', function(){
+        window.foo =  {
+            bar:false
+        }
+        try {
+            this.server.respondWith("GET", "/test", "Called!");
+            var div = make('<div hx-get="/test" hx-trigger="evt[foo.bar]">Not Called</div>');
+            var event = htmx._("makeEvent")('evt');
+            div.dispatchEvent(event);
+            this.server.respond();
+            div.innerHTML.should.equal("Not Called");
+            foo.bar = true;
+            div.dispatchEvent(event);
+            this.server.respond();
+            div.innerHTML.should.equal("Called!");
+        } finally {
+            delete window.foo;
+        }
+    })
+
+    it('global variable filter works', function(){
+        try {
+            this.server.respondWith("GET", "/test", "Called!");
+            var div = make('<div hx-get="/test" hx-trigger="evt[foo]">Not Called</div>');
+            var event = htmx._("makeEvent")('evt');
+            div.dispatchEvent(event);
+            this.server.respond();
+            div.innerHTML.should.equal("Not Called");
+            foo = true;
+            div.dispatchEvent(event);
+            this.server.respond();
+            div.innerHTML.should.equal("Called!");
+        } finally {
+            delete window.foo;
+        }
+    })
+
+    it('bad condition issues error', function(){
+        this.server.respondWith("GET", "/test", "Called!");
+        var div = make('<div hx-get="/test" hx-trigger="evt[a.b]">Not Called</div>');
+        var errorEvent = null;
+        var handler = htmx.on("htmx:eventFilter:error", function (event) {
+            errorEvent = event;
+        });
+        try {
+            var event = htmx._("makeEvent")('evt');
+            div.dispatchEvent(event);
+            should.not.equal(null, errorEvent);
+            should.not.equal(null, errorEvent.detail.source);
+            console.log(errorEvent.detail.source);
+        } finally {
+            htmx.off("htmx:eventFilter:error", handler);
+        }
+})
+
 })
diff --git a/test/core/tokenizer.js b/test/core/tokenizer.js
index aad583a9..30dce2fb 100644
--- a/test/core/tokenizer.js
+++ b/test/core/tokenizer.js
@@ -35,11 +35,11 @@ describe("Core htmx tokenizer tests", function(){
     {
         var tokens = tokenize("[code==4||(code==5&&foo==true)]");
         var conditional = htmx._("maybeGenerateConditional")(tokens);
-        console.log(conditional);
         var func = eval(conditional);
-        console.log(func({code: 5, foo: true}));
-        console.log(func({code: 4, foo: false}));
-        console.log(func({code: 3, foo: false}));
+        func({code: 5, foo: true}).should.equal(true);
+        func({code: 5, foo: false}).should.equal(false);
+        func({code: 4, foo: false}).should.equal(true);
+        func({code: 3, foo: true}).should.equal(false);
     });