Merge pull request #80 from botandrose/test-coverage

Add coverage for untested code paths and features; rm test noise
bigskysoftware · Dec 20, 2024 · 3ea28d4 · 3ea28d4
2 parents 917587a + 15643c3
commit 3ea28d4
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 90 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "chai-dom": "^1.11.0",
     "fs-extra": "^9.1.0",
     "htmx.org": "1.9.9",
+    "p-wait-for": "^5.0.2",
     "sinon": "^9.2.4",
     "typescript": "^5.3.3",
     "uglify-js": "^3.15.0"

diff --git a/test/bootstrap.js b/test/bootstrap.js
@@ -58,14 +58,16 @@ describe("Bootstrap test", function(){
         d2.innerHTML.should.equal("E");
         d3.innerHTML.should.equal("F");
 
-        console.log(morphTo);
-        console.log(div1.outerHTML);
         div1.outerHTML.should.equal(morphTo)
 
-        setTimeout(()=> {
-            console.log("idiomorph mutations : ", div1.mutations);
-            done();
-        }, 0)
+        // // debugging output
+        // console.log(morphTo);
+        // console.log(div1.outerHTML);
+
+        // setTimeout(()=> {
+        //     console.log("idiomorph mutations : ", div1.mutations);
+               done();
+        // }, 0)
     });
 
     it('deep morphdom does not work ideally', function(done)
@@ -78,11 +80,12 @@ describe("Bootstrap test", function(){
 
         morphdom(div1, '<div id="root2"><div><div id="d2">E</div></div><div><div id="d3">F</div></div><div><div id="d1">D</div></div></div>', {});
 
-        setTimeout(()=> {
-            console.log("morphdom mutations : ", div1.mutations);
-            done();
-        }, 0)
-        print(div1);
+        // // debugging output
+        // setTimeout(()=> {
+        //     console.log("morphdom mutations : ", div1.mutations);
+               done();
+        // }, 0)
+        // print(div1);
     });
 
 })
diff --git a/test/core.js b/test/core.js
@@ -14,10 +14,6 @@ describe("Core morphing tests", function(){
         let finalSrc = "<button>Bar</button>";
         let final = make(finalSrc);
         Idiomorph.morph(initial, final, {morphStyle:'outerHTML'});
-        if (initial.outerHTML !== "<button>Bar</button>") {
-            console.log("HTML after morph: " + initial.outerHTML);
-            console.log("Expected:         " + finalSrc);
-        }
         initial.outerHTML.should.equal("<button>Bar</button>");
     });
 
@@ -26,10 +22,6 @@ describe("Core morphing tests", function(){
         let initial = make("<button>Foo</button>");
         let finalSrc = "<button>Bar</button>";
         Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'});
-        if (initial.outerHTML !== "<button>Bar</button>") {
-            console.log("HTML after morph: " + initial.outerHTML);
-            console.log("Expected:         " + finalSrc);
-        }
         initial.outerHTML.should.equal("<button>Bar</button>");
     });
 
@@ -39,10 +31,6 @@ describe("Core morphing tests", function(){
         let finalSrc = "<div><button>Bar</button></div>";
         let final = make(finalSrc).children;
         Idiomorph.morph(initial, final, {morphStyle:'outerHTML'});
-        if (initial.outerHTML !== "<button>Bar</button>") {
-            console.log("HTML after morph: " + initial.outerHTML);
-            console.log("Expected:         " + finalSrc);
-        }
         initial.outerHTML.should.equal("<button>Bar</button>");
     });
 
@@ -52,10 +40,6 @@ describe("Core morphing tests", function(){
         let finalSrc = "<div><button>Bar</button></div>";
         let final = [...make(finalSrc).children];
         Idiomorph.morph(initial, final, {morphStyle:'outerHTML'});
-        if (initial.outerHTML !== "<button>Bar</button>") {
-            console.log("HTML after morph: " + initial.outerHTML);
-            console.log("Expected:         " + finalSrc);
-        }
         initial.outerHTML.should.equal("<button>Bar</button>");
     });
 
@@ -66,10 +50,6 @@ describe("Core morphing tests", function(){
         let finalSrc = "<p>Foo</p><button>Bar</button><p>Bar</p>";
         let final = makeElements(finalSrc);
         Idiomorph.morph(initial, final, {morphStyle:'outerHTML'});
-        if (initial.outerHTML !== "<button>Bar</button>") {
-            console.log("HTML after morph: " + initial.outerHTML);
-            console.log("Expected:         " + finalSrc);
-        }
         initial.outerHTML.should.equal("<button>Bar</button>");
         initial.parentElement.innerHTML.should.equal("<p>Foo</p><button>Bar</button><p>Bar</p>");
     });
@@ -81,10 +61,6 @@ describe("Core morphing tests", function(){
         let finalSrc = "<p>Foo</p><button>Bar</button><p>Bar</p>";
         let final = [...makeElements(finalSrc)];
         Idiomorph.morph(initial, final, {morphStyle:'outerHTML'});
-        if (initial.outerHTML !== "<button>Bar</button>") {
-            console.log("HTML after morph: " + initial.outerHTML);
-            console.log("Expected:         " + finalSrc);
-        }
         initial.outerHTML.should.equal("<button>Bar</button>");
         initial.parentElement.innerHTML.should.equal("<p>Foo</p><button>Bar</button><p>Bar</p>");
     });
@@ -95,10 +71,6 @@ describe("Core morphing tests", function(){
         let initial = parent.querySelector("button");
         let finalSrc = "<p>Foo</p><button>Bar</button><p>Bar</p>";
         Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'});
-        if (initial.outerHTML !== "<button>Bar</button>") {
-            console.log("HTML after morph: " + initial.outerHTML);
-            console.log("Expected:         " + finalSrc);
-        }
         initial.outerHTML.should.equal("<button>Bar</button>");
         initial.parentElement.innerHTML.should.equal("<p>Foo</p><button>Bar</button><p>Bar</p>");
     });
@@ -109,10 +81,6 @@ describe("Core morphing tests", function(){
         let initial = parent.querySelector("button");
         let finalSrc = "<p>Doh</p><p>Foo</p><button>Bar</button><p>Bar</p><p>Ray</p>";
         Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'});
-        if (initial.outerHTML !== "<button>Bar</button>") {
-            console.log("HTML after morph: " + initial.outerHTML);
-            console.log("Expected:         " + finalSrc);
-        }
         initial.outerHTML.should.equal("<button>Bar</button>");
         initial.parentElement.innerHTML.should.equal("<p>Doh</p><p>Foo</p><button>Bar</button><p>Bar</p><p>Ray</p>");
     });
@@ -130,10 +98,6 @@ describe("Core morphing tests", function(){
         let finalSrc = "<button>Bar</button>";
         let final = make(finalSrc);
         Idiomorph.morph(initial, final, {morphStyle:'innerHTML'});
-        if (initial.outerHTML !== "<button>Bar</button>") {
-            console.log("HTML after morph: " + initial.outerHTML);
-            console.log("Expected:         " + finalSrc);
-        }
         initial.outerHTML.should.equal("<div><button>Bar</button></div>");
     });
 
@@ -142,10 +106,6 @@ describe("Core morphing tests", function(){
         let initial = make("<button>Foo</button>");
         let finalSrc = "<button>Bar</button>";
         Idiomorph.morph(initial, finalSrc, {morphStyle:'innerHTML'});
-        if (initial.outerHTML !== "<button>Bar</button>") {
-            console.log("HTML after morph: " + initial.outerHTML);
-            console.log("Expected:         " + finalSrc);
-        }
         initial.outerHTML.should.equal("<button><button>Bar</button></button>");
     });
 
@@ -155,10 +115,6 @@ describe("Core morphing tests", function(){
         let finalSrc = "<div><button>Bar</button></div>";
         let final = make(finalSrc).children;
         Idiomorph.morph(initial, final, {morphStyle:'innerHTML'});
-        if (initial.outerHTML !== "<button>Bar</button>") {
-            console.log("HTML after morph: " + initial.outerHTML);
-            console.log("Expected:         " + finalSrc);
-        }
         initial.outerHTML.should.equal("<button><button>Bar</button></button>");
     });
 
@@ -168,10 +124,6 @@ describe("Core morphing tests", function(){
         let finalSrc = "<div><button>Bar</button></div>";
         let final = [...make(finalSrc).children];
         Idiomorph.morph(initial, final, {morphStyle:'innerHTML'});
-        if (initial.outerHTML !== "<button>Bar</button>") {
-            console.log("HTML after morph: " + initial.outerHTML);
-            console.log("Expected:         " + finalSrc);
-        }
         initial.outerHTML.should.equal("<button><button>Bar</button></button>");
     });
 
@@ -182,6 +134,13 @@ describe("Core morphing tests", function(){
         initial.outerHTML.should.equal("<div></div>");
     });
 
+    it('errors on bad morphStyle', function()
+    {
+        (() => {
+            Idiomorph.morph(make("<p>"), [], {morphStyle:'magic'});
+        }).should.throw("Do not understand how to morph style magic");
+    });
+
     it('can morph a template tag properly', function()
     {
       let initial = make("<template data-old>Foo</template>");
@@ -345,10 +304,6 @@ describe("Core morphing tests", function(){
 
         let finalSrc = '<textarea>bar</textarea>';
         Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'});
-        if (initial.outerHTML !== '<input value="bar">') {
-            console.log("HTML after morph: " + initial.outerHTML);
-            console.log("Expected:         " + finalSrc);
-        }
         initial.outerHTML.should.equal('<textarea>bar</textarea>');
 
         initial.focus();
@@ -362,6 +317,35 @@ describe("Core morphing tests", function(){
         document.body.removeChild(parent);
     });
 
+    it('can morph input value properly because value property is special and doesnt reflect', function()
+    {
+        let initial = make('<div><input value="foo"></div>');
+        let final = make('<input value="foo">');
+        final.value = "bar";
+        Idiomorph.morph(initial, final, {morphStyle:'innerHTML'});
+        initial.innerHTML.should.equal('<input value="bar">');
+    });
+
+    it('can morph textarea value properly because value property is special and doesnt reflect', function()
+    {
+        let initial = make('<textarea>foo</textarea>');
+        let final = make('<textarea>foo</textarea>');
+        final.value = "bar";
+        Idiomorph.morph(initial, final, {morphStyle:'outerHTML'});
+        initial.value.should.equal('bar');
+    });
+
+    it('specially considers textarea value property in beforeAttributeUpdated hook because value property is special and doesnt reflect', function()
+    {
+        let initial = make('<div><textarea>foo</textarea></div>');
+        let final = make('<textarea>foo</textarea>');
+        final.value = "bar";
+        Idiomorph.morph(initial, final, {morphStyle:'innerHTML',callbacks:{
+            beforeAttributeUpdated: (attr, to, updatetype) => false,
+        }});
+        initial.innerHTML.should.equal('<textarea>foo</textarea>');
+    });
+
     it('can morph input checked properly, remove checked', function()
     {
         let parent = make('<div><input type="checkbox" checked></div>');
@@ -370,10 +354,6 @@ describe("Core morphing tests", function(){
 
         let finalSrc = '<input type="checkbox">';
         Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'});
-        if (initial.outerHTML !== '<input type="checkbox">') {
-            console.log("HTML after morph: " + initial.outerHTML);
-            console.log("Expected:         " + finalSrc);
-        }
         initial.outerHTML.should.equal('<input type="checkbox">');
         initial.checked.should.equal(false);
         document.body.removeChild(parent);
@@ -387,10 +367,6 @@ describe("Core morphing tests", function(){
 
         let finalSrc = '<input type="checkbox" checked>';
         Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'});
-        if (initial.outerHTML !== '<input type="checkbox" checked="">') {
-            console.log("HTML after morph: " + initial.outerHTML);
-            console.log("Expected:         " + finalSrc);
-        }
         initial.outerHTML.should.equal('<input type="checkbox" checked="">');
         initial.checked.should.equal(true);
         document.body.removeChild(parent);
@@ -405,10 +381,6 @@ describe("Core morphing tests", function(){
 
         let finalSrc = '<input type="checkbox" checked>';
         Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'});
-        if (initial.outerHTML !== '<input type="checkbox" checked="true">') {
-            console.log("HTML after morph: " + initial.outerHTML);
-            console.log("Expected:         " + finalSrc);
-        }
         initial.outerHTML.should.equal('<input type="checkbox" checked="true">');
         initial.checked.should.equal(true);
         document.body.removeChild(parent);
@@ -423,10 +395,6 @@ describe("Core morphing tests", function(){
 
         let finalSrc = '<input type="checkbox">';
         Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'});
-        if (initial.outerHTML !== '<input type="checkbox">') {
-            console.log("HTML after morph: " + initial.outerHTML);
-            console.log("Expected:         " + finalSrc);
-        }
         initial.outerHTML.should.equal('<input type="checkbox">');
         initial.checked.should.equal(false);
         document.body.removeChild(parent);
@@ -443,10 +411,6 @@ describe("Core morphing tests", function(){
             // should more inner HTML despite no config
             Idiomorph.morph(initial, finalSrc);
 
-            if (initial.outerHTML !== "<button>Bar</button>") {
-                console.log("HTML after morph: " + initial.outerHTML);
-                console.log("Expected:         " + finalSrc);
-            }
             initial.outerHTML.should.equal("<button><button>Bar</button></button>");
         } finally {
             Idiomorph.defaults.morphStyle = 'outerHTML';
@@ -464,10 +428,6 @@ describe("Core morphing tests", function(){
             // should morph outer HTML despite default setting
             Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'});
 
-            if (initial.outerHTML !== "<button>Bar</button>") {
-                console.log("HTML after morph: " + initial.outerHTML);
-                console.log("Expected:         " + finalSrc);
-            }
             initial.outerHTML.should.equal("<button>Bar</button>");
         } finally {
             Idiomorph.defaults.morphStyle = 'outerHTML';

diff --git a/test/head.js b/test/head.js
@@ -70,6 +70,15 @@ describe("Tests to ensure that the head tag merging works correctly", function()
         originalHead.childNodes[1].outerHTML.should.equal("<meta name=\"foo\" content=\"bar\">");
     });
 
+    it('ignore style ignores head', function () {
+        let parser = new DOMParser();
+        let document = parser.parseFromString("<html><head><title>Foo</title></head></html>", "text/html");
+        let originalHead = document.head;
+        Idiomorph.morph(document, "<html><head><meta name='foo' content='bar'></head></html>", {head:{ignore:true}});
+
+        originalHead.outerHTML.should.equal("<head><title>Foo</title></head>");
+    });
+
     it('im-preserve preserves', function () {
         let parser = new DOMParser();
         let document = parser.parseFromString("<html><head><title im-preserve='true'>Foo</title></head></html>", "text/html");
@@ -96,6 +105,21 @@ describe("Tests to ensure that the head tag merging works correctly", function()
         originalHead.childNodes[1].outerHTML.should.equal("<meta name=\"foo\" content=\"bar\">");
     });
 
+    it('im-re-append re-appends with append style', function () {
+        let parser = new DOMParser();
+        let document = parser.parseFromString("<html><head><meta name='foo' content='bar' im-re-append='true'></head></html>", "text/html");
+        let originalHead = document.head;
+        let originalTitle = originalHead.children[0];
+        Idiomorph.morph(document, "<html><head><meta name='bar' content='baz' im-re-append='true'></head></html>", {head:{style:'append'}});
 
+        originalHead.should.equal(document.head);
+        originalHead.childNodes.length.should.equal(2);
+        originalHead.innerHTML.should.equal('<meta name="foo" content="bar" im-re-append="true"><meta name="bar" content="baz" im-re-append="true">');
+    });
 
+    it('can handle scripts with block mode', async function(){
+        Idiomorph.morph(window.document, `<head><script src='/test/lib/fixture.js'></script></head>`,{head:{block:true,style:'append'}});
+        await waitFor(() => window.hasOwnProperty("fixture"))
+        window.fixture.should.equal("FIXTURE")
+    });
 });
diff --git a/test/lib/fixture.js b/test/lib/fixture.js
@@ -0,0 +1 @@
+window.fixture = "FIXTURE";