Skip to content

Commit

Permalink
test more scenarios, and get morphStyle: outerHTML working with the t…
Browse files Browse the repository at this point in the history 
…wo-pass option.
  • Loading branch information
@botandrose-machine
botandrose-machine committed Dec 13, 2024
1 parent 8d27832 commit e636206
Show file tree
Hide file tree
Showing 2 changed files with 156 additions and 9 deletions.
6 changes: 5 additions & 1 deletion src/idiomorph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,11 @@ var Idiomorph = (function () {
// if there was a best match, merge the siblings in too and return the
// whole bunch
if (morphedNode) {
return insertSiblings(previousSibling, morphedNode, nextSibling);
const elements = insertSiblings(previousSibling, morphedNode, nextSibling);
if (ctx.pantry) {
restoreFromPantry(morphedNode.parentNode, ctx);
}
return elements
}
} else {
// otherwise nothing was added to the DOM
Expand Down
159 changes: 151 additions & 8 deletions test/two-pass.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,22 @@ describe("Two-pass option for retaining more state", function(){
{
getWorkArea().append(make(`
<div>
<input type="checkbox" checked id="first">
<input type="checkbox" checked id="second">
<input type="checkbox" id="first">
<input type="checkbox" id="second">
</div>
`));
document.getElementById("first").indeterminate = true
document.getElementById("second").indeterminate = true

let finalSrc = `
<div>
<input type="checkbox" checked id="second">
<input type="checkbox" checked id="first">
<input type="checkbox" id="second">
<input type="checkbox" id="first">
</div>
`;
Idiomorph.morph(getWorkArea(), finalSrc, {morphStyle:'innerHTML'});

getWorkArea().innerHTML.should.equal(finalSrc);
const states = Array.from(getWorkArea().querySelectorAll("input")).map(e => e.indeterminate);
states.should.eql([true, false]);
});
Expand All @@ -31,21 +32,163 @@ describe("Two-pass option for retaining more state", function(){
{
getWorkArea().append(make(`
<div>
<input type="checkbox" checked id="first">
<input type="checkbox" checked id="second">
<input type="checkbox" id="first">
<input type="checkbox" id="second">
</div>
`));
document.getElementById("first").indeterminate = true
document.getElementById("second").indeterminate = true

let finalSrc = `
<div>
<input type="checkbox" checked id="second">
<input type="checkbox" checked id="first">
<input type="checkbox" id="second">
<input type="checkbox" id="first">
</div>
`;
Idiomorph.morph(getWorkArea(), finalSrc, {morphStyle:'innerHTML',twoPass:true});

getWorkArea().innerHTML.should.equal(finalSrc);
const states = Array.from(getWorkArea().querySelectorAll("input")).map(e => e.indeterminate);
states.should.eql([true, true]);
});

it('preserves all non-attribute element state with two-pass option and outerHTML morphStyle', function()
{
const div = make(`
<div>
<input type="checkbox" id="first">
<input type="checkbox" id="second">
</div>
`);
getWorkArea().append(div);
document.getElementById("first").indeterminate = true
document.getElementById("second").indeterminate = true

let finalSrc = `
<div>
<input type="checkbox" id="second">
<input type="checkbox" id="first">
</div>
`;
Idiomorph.morph(div, finalSrc, {morphStyle:'outerHTML',twoPass:true});

getWorkArea().innerHTML.should.equal(finalSrc);
const states = Array.from(getWorkArea().querySelectorAll("input")).map(e => e.indeterminate);
states.should.eql([true, true]);
});

it('preserves non-attribute state when elements are moved to different levels of the DOM', function()
{
getWorkArea().append(make(`
<div>
<input type="checkbox" id="first">
<div>
<input type="checkbox" id="second">
</div>
</div>
`));
document.getElementById("first").indeterminate = true
document.getElementById("second").indeterminate = true

let finalSrc = `
<div>
<input type="checkbox" id="first">
<input type="checkbox" id="second">
</div>
`;
Idiomorph.morph(getWorkArea(), finalSrc, {morphStyle:'innerHTML',twoPass:true});

getWorkArea().innerHTML.should.equal(finalSrc);
const states = Array.from(getWorkArea().querySelectorAll("input")).map(e => e.indeterminate);
states.should.eql([true, true]);
});

it('preserves non-attribute state when elements are moved to different levels of the DOM', function()
{
getWorkArea().append(make(`
<div>
<input type="checkbox" id="first">
<div>
<input type="checkbox" id="second">
</div>
</div>
`));
document.getElementById("first").indeterminate = true
document.getElementById("second").indeterminate = true

let finalSrc = `
<div>
<input type="checkbox" id="first">
<input type="checkbox" id="second">
</div>
`;
Idiomorph.morph(getWorkArea(), finalSrc, {morphStyle:'innerHTML',twoPass:true});

getWorkArea().innerHTML.should.equal(finalSrc);
const states = Array.from(getWorkArea().querySelectorAll("input")).map(e => e.indeterminate);
states.should.eql([true, true]);
});

it('preserves non-attribute state when elements are moved between different containers', function()
{
getWorkArea().append(make(`
<div>
<div id="left">
<input type="checkbox" id="first">
</div>
<div id="right">
<input type="checkbox" id="second">
</div>
</div>
`));
document.getElementById("first").indeterminate = true
document.getElementById("second").indeterminate = true

let finalSrc = `
<div>
<div id="left">
<input type="checkbox" id="second">
</div>
<div id="right">
<input type="checkbox" id="first">
</div>
</div>
`;
Idiomorph.morph(getWorkArea(), finalSrc, {morphStyle:'innerHTML',twoPass:true});

getWorkArea().innerHTML.should.equal(finalSrc);
const states = Array.from(getWorkArea().querySelectorAll("input")).map(e => e.indeterminate);
states.should.eql([true, true]);
});

it('preserves non-attribute state when parents are reorderd', function()
{
getWorkArea().append(make(`
<div>
<div id="left">
<input type="checkbox" id="first">
</div>
<div id="right">
<input type="checkbox" id="second">
</div>
</div>
`));
document.getElementById("first").indeterminate = true
document.getElementById("second").indeterminate = true

let finalSrc = `
<div>
<div id="right">
<input type="checkbox" id="second">
</div>
<div id="left">
<input type="checkbox" id="first">
</div>
</div>
`;
Idiomorph.morph(getWorkArea(), finalSrc, {morphStyle:'innerHTML',twoPass:true});

getWorkArea().innerHTML.should.equal(finalSrc);
const states = Array.from(getWorkArea().querySelectorAll("input")).map(e => e.indeterminate);
states.should.eql([true, true]);
});
Expand Down

0 comments on commit e636206

Please sign in to comment.