Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add coverage for untested code paths and features; rm test noise #80

Merged
merged 3 commits into from
Dec 20, 2024
Merged

Add coverage for untested code paths and features; rm test noise #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
42a3dba
cover some additional head handling code paths.
botandrose-machine Dec 20, 2024
1605ae9
cover special value property handling.
botandrose-machine Dec 20, 2024
15643c3
remove debugging noise from test output.
botandrose-machine Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
25 changes: 14 additions & 11 deletions test/bootstrap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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);
});

})
112 changes: 36 additions & 76 deletions test/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>");
});

Expand All @@ -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>");
});

Expand All @@ -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>");
});

Expand All @@ -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>");
});

Expand All @@ -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>");
});
Expand All @@ -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>");
});
Expand All @@ -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>");
});
Expand All @@ -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>");
});
Expand All @@ -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>");
});

Expand All @@ -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>");
});

Expand All @@ -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>");
});

Expand All @@ -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>");
});

Expand All @@ -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>");
Expand Down Expand Up @@ -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();
Expand All @@ -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>');
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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';
Expand All @@ -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';
Expand Down
24 changes: 24 additions & 0 deletions test/head.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -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")
});
});
1 change: 1 addition & 0 deletions test/lib/fixture.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
window.fixture = "FIXTURE";
Loading
Loading