diff --git a/package-lock.json b/package-lock.json index a1f7f26..0977a06 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,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" @@ -4693,6 +4694,33 @@ "node": ">=6" } }, + "node_modules/p-wait-for": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/p-wait-for/-/p-wait-for-5.0.2.tgz", + "integrity": "sha512-lwx6u1CotQYPVju77R+D0vFomni/AqRfqLmqQ8hekklqZ6gAY9rONh7lBQ0uxWMkC2AuX9b2DVAl8To0NyP1JA==", + "dev": true, + "dependencies": { + "p-timeout": "^6.0.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/p-wait-for/node_modules/p-timeout": { + "version": "6.1.3", + "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-6.1.3.tgz", + "integrity": "sha512-UJUyfKbwvr/uZSV6btANfb+0t/mOhKV/KXcCUTp8FcQI+v/0d+wXqH4htrW0E4rR6WiEO/EPvUFiV9D5OI4vlw==", + "dev": true, + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/pac-proxy-agent": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.1.0.tgz", diff --git a/package.json b/package.json index a0787f3..abc7ebe 100644 --- 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 index 9c9c25a..9da9b2a 100644 --- 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, '
E
F
D
', {}); - 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 index c0e01f3..67ddc70 100644 --- a/test/core.js +++ b/test/core.js @@ -14,10 +14,6 @@ describe("Core morphing tests", function(){ let finalSrc = ""; let final = make(finalSrc); Idiomorph.morph(initial, final, {morphStyle:'outerHTML'}); - if (initial.outerHTML !== "") { - console.log("HTML after morph: " + initial.outerHTML); - console.log("Expected: " + finalSrc); - } initial.outerHTML.should.equal(""); }); @@ -26,10 +22,6 @@ describe("Core morphing tests", function(){ let initial = make(""); let finalSrc = ""; Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'}); - if (initial.outerHTML !== "") { - console.log("HTML after morph: " + initial.outerHTML); - console.log("Expected: " + finalSrc); - } initial.outerHTML.should.equal(""); }); @@ -39,10 +31,6 @@ describe("Core morphing tests", function(){ let finalSrc = "
"; let final = make(finalSrc).children; Idiomorph.morph(initial, final, {morphStyle:'outerHTML'}); - if (initial.outerHTML !== "") { - console.log("HTML after morph: " + initial.outerHTML); - console.log("Expected: " + finalSrc); - } initial.outerHTML.should.equal(""); }); @@ -52,10 +40,6 @@ describe("Core morphing tests", function(){ let finalSrc = "
"; let final = [...make(finalSrc).children]; Idiomorph.morph(initial, final, {morphStyle:'outerHTML'}); - if (initial.outerHTML !== "") { - console.log("HTML after morph: " + initial.outerHTML); - console.log("Expected: " + finalSrc); - } initial.outerHTML.should.equal(""); }); @@ -66,10 +50,6 @@ describe("Core morphing tests", function(){ let finalSrc = "

Foo

Bar

"; let final = makeElements(finalSrc); Idiomorph.morph(initial, final, {morphStyle:'outerHTML'}); - if (initial.outerHTML !== "") { - console.log("HTML after morph: " + initial.outerHTML); - console.log("Expected: " + finalSrc); - } initial.outerHTML.should.equal(""); initial.parentElement.innerHTML.should.equal("

Foo

Bar

"); }); @@ -81,10 +61,6 @@ describe("Core morphing tests", function(){ let finalSrc = "

Foo

Bar

"; let final = [...makeElements(finalSrc)]; Idiomorph.morph(initial, final, {morphStyle:'outerHTML'}); - if (initial.outerHTML !== "") { - console.log("HTML after morph: " + initial.outerHTML); - console.log("Expected: " + finalSrc); - } initial.outerHTML.should.equal(""); initial.parentElement.innerHTML.should.equal("

Foo

Bar

"); }); @@ -95,10 +71,6 @@ describe("Core morphing tests", function(){ let initial = parent.querySelector("button"); let finalSrc = "

Foo

Bar

"; Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'}); - if (initial.outerHTML !== "") { - console.log("HTML after morph: " + initial.outerHTML); - console.log("Expected: " + finalSrc); - } initial.outerHTML.should.equal(""); initial.parentElement.innerHTML.should.equal("

Foo

Bar

"); }); @@ -109,10 +81,6 @@ describe("Core morphing tests", function(){ let initial = parent.querySelector("button"); let finalSrc = "

Doh

Foo

Bar

Ray

"; Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'}); - if (initial.outerHTML !== "") { - console.log("HTML after morph: " + initial.outerHTML); - console.log("Expected: " + finalSrc); - } initial.outerHTML.should.equal(""); initial.parentElement.innerHTML.should.equal("

Doh

Foo

Bar

Ray

"); }); @@ -130,10 +98,6 @@ describe("Core morphing tests", function(){ let finalSrc = ""; let final = make(finalSrc); Idiomorph.morph(initial, final, {morphStyle:'innerHTML'}); - if (initial.outerHTML !== "") { - console.log("HTML after morph: " + initial.outerHTML); - console.log("Expected: " + finalSrc); - } initial.outerHTML.should.equal("
"); }); @@ -142,10 +106,6 @@ describe("Core morphing tests", function(){ let initial = make(""); let finalSrc = ""; Idiomorph.morph(initial, finalSrc, {morphStyle:'innerHTML'}); - if (initial.outerHTML !== "") { - console.log("HTML after morph: " + initial.outerHTML); - console.log("Expected: " + finalSrc); - } initial.outerHTML.should.equal(""); }); @@ -155,10 +115,6 @@ describe("Core morphing tests", function(){ let finalSrc = "
"; let final = make(finalSrc).children; Idiomorph.morph(initial, final, {morphStyle:'innerHTML'}); - if (initial.outerHTML !== "") { - console.log("HTML after morph: " + initial.outerHTML); - console.log("Expected: " + finalSrc); - } initial.outerHTML.should.equal(""); }); @@ -168,10 +124,6 @@ describe("Core morphing tests", function(){ let finalSrc = "
"; let final = [...make(finalSrc).children]; Idiomorph.morph(initial, final, {morphStyle:'innerHTML'}); - if (initial.outerHTML !== "") { - console.log("HTML after morph: " + initial.outerHTML); - console.log("Expected: " + finalSrc); - } initial.outerHTML.should.equal(""); }); @@ -182,6 +134,13 @@ describe("Core morphing tests", function(){ initial.outerHTML.should.equal("
"); }); + it('errors on bad morphStyle', function() + { + (() => { + Idiomorph.morph(make("

"), [], {morphStyle:'magic'}); + }).should.throw("Do not understand how to morph style magic"); + }); + it('can morph a template tag properly', function() { let initial = make(""); @@ -345,10 +304,6 @@ describe("Core morphing tests", function(){ let finalSrc = ''; Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'}); - if (initial.outerHTML !== '') { - console.log("HTML after morph: " + initial.outerHTML); - console.log("Expected: " + finalSrc); - } initial.outerHTML.should.equal(''); 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('

'); + let final = make(''); + final.value = "bar"; + Idiomorph.morph(initial, final, {morphStyle:'innerHTML'}); + initial.innerHTML.should.equal(''); + }); + + it('can morph textarea value properly because value property is special and doesnt reflect', function() + { + let initial = make(''); + let final = make(''); + 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('
'); + let final = make(''); + final.value = "bar"; + Idiomorph.morph(initial, final, {morphStyle:'innerHTML',callbacks:{ + beforeAttributeUpdated: (attr, to, updatetype) => false, + }}); + initial.innerHTML.should.equal(''); + }); + it('can morph input checked properly, remove checked', function() { let parent = make('
'); @@ -370,10 +354,6 @@ describe("Core morphing tests", function(){ let finalSrc = ''; Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'}); - if (initial.outerHTML !== '') { - console.log("HTML after morph: " + initial.outerHTML); - console.log("Expected: " + finalSrc); - } initial.outerHTML.should.equal(''); initial.checked.should.equal(false); document.body.removeChild(parent); @@ -387,10 +367,6 @@ describe("Core morphing tests", function(){ let finalSrc = ''; Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'}); - if (initial.outerHTML !== '') { - console.log("HTML after morph: " + initial.outerHTML); - console.log("Expected: " + finalSrc); - } initial.outerHTML.should.equal(''); initial.checked.should.equal(true); document.body.removeChild(parent); @@ -405,10 +381,6 @@ describe("Core morphing tests", function(){ let finalSrc = ''; Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'}); - if (initial.outerHTML !== '') { - console.log("HTML after morph: " + initial.outerHTML); - console.log("Expected: " + finalSrc); - } initial.outerHTML.should.equal(''); initial.checked.should.equal(true); document.body.removeChild(parent); @@ -423,10 +395,6 @@ describe("Core morphing tests", function(){ let finalSrc = ''; Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'}); - if (initial.outerHTML !== '') { - console.log("HTML after morph: " + initial.outerHTML); - console.log("Expected: " + finalSrc); - } initial.outerHTML.should.equal(''); 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 !== "") { - console.log("HTML after morph: " + initial.outerHTML); - console.log("Expected: " + finalSrc); - } initial.outerHTML.should.equal(""); } 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 !== "") { - console.log("HTML after morph: " + initial.outerHTML); - console.log("Expected: " + finalSrc); - } initial.outerHTML.should.equal(""); } finally { Idiomorph.defaults.morphStyle = 'outerHTML'; diff --git a/test/head.js b/test/head.js index 628561c..799a6f6 100644 --- 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(""); }); + it('ignore style ignores head', function () { + let parser = new DOMParser(); + let document = parser.parseFromString("Foo", "text/html"); + let originalHead = document.head; + Idiomorph.morph(document, "", {head:{ignore:true}}); + + originalHead.outerHTML.should.equal("Foo"); + }); + it('im-preserve preserves', function () { let parser = new DOMParser(); let document = parser.parseFromString("Foo", "text/html"); @@ -96,6 +105,21 @@ describe("Tests to ensure that the head tag merging works correctly", function() originalHead.childNodes[1].outerHTML.should.equal(""); }); + it('im-re-append re-appends with append style', function () { + let parser = new DOMParser(); + let document = parser.parseFromString("", "text/html"); + let originalHead = document.head; + let originalTitle = originalHead.children[0]; + Idiomorph.morph(document, "", {head:{style:'append'}}); + originalHead.should.equal(document.head); + originalHead.childNodes.length.should.equal(2); + originalHead.innerHTML.should.equal(''); + }); + it('can handle scripts with block mode', async function(){ + Idiomorph.morph(window.document, ``,{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 new file mode 100644 index 0000000..c77858d --- /dev/null +++ b/test/lib/fixture.js @@ -0,0 +1 @@ +window.fixture = "FIXTURE"; diff --git a/test/perf.js b/test/perf.js index 5b37771..2df4d4f 100644 --- a/test/perf.js +++ b/test/perf.js @@ -25,9 +25,10 @@ describe("Tests to compare perf with morphdom", function(){ let startElt = make(start); let endElt = make(end); - console.log("Content Size"); - console.log(" Start: " + start.length + " characters"); - console.log(" End : " + end.length + " characters"); + // // debugging output + // console.log("Content Size"); + // console.log(" Start: " + start.length + " characters"); + // console.log(" End : " + end.length + " characters"); console.time('idiomorph timing') Idiomorph.morph(startElt, endElt); // startElt.outerHTML.should.equal(end); diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs index c00d184..b6f7cd4 100644 --- a/web-test-runner.config.mjs +++ b/web-test-runner.config.mjs @@ -15,6 +15,11 @@ let config = { + +