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, '
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 = ""), [], {morphStyle:'magic'}); + }).should.throw("Do not understand how to morph style magic"); + }); + it('can morph a template tag properly', function() { let initial = make("Foo"); @@ -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 !== "