Precise DOM morphing
morphing
typescript
dom
Merge branch 'main' of https://github.com/joeldrapper/morphlite
+118
-2
+118
-2
test/something.test.js
+118
-2
test/something.test.js
···
586
586
morph(a, b);
587
587
588
588
expect(a.outerHTML).to.equal(b.outerHTML);
589
-
})
589
+
});
590
590
591
591
it("should replace nodes after multiple iterations", async () => {
592
592
const a = await fixture(html`<ul></ul>`);
···
601
601
morph(a, c);
602
602
603
603
expect(a.outerHTML).to.equal(c.outerHTML);
604
-
})
604
+
});
605
+
606
+
describe('use id as a key hint', () => {
607
+
it('appends an element', async () => {
608
+
const a = await fixture(html`<ul>
609
+
<li id="a"></li>
610
+
<li id="b"></li>
611
+
<li id="c"></li>
612
+
</ul>`);
613
+
const b = await fixture(html`<ul>
614
+
<li id="a"></li>
615
+
<li id="new"></li>
616
+
<li id="b"></li>
617
+
<li id="c"></li>
618
+
</ul>`);
619
+
620
+
const oldFirst = a.children[0];
621
+
const oldSecond = a.children[1];
622
+
const oldThird = a.children[2];
623
+
624
+
morph(a, b);
625
+
626
+
expect(a.outerHTML).to.equal(b.outerHTML);
627
+
expect(a.children[0]).to.equal(oldFirst);
628
+
expect(a.children[1]).to.equal(oldSecond);
629
+
expect(a.children[2]).to.equal(oldThird);
630
+
});
631
+
632
+
it('handles non-id elements', async () => {
633
+
const a = await fixture(html`<ul>
634
+
<li></li>
635
+
<li id="a"></li>
636
+
<li id="b"></li>
637
+
<li id="c"></li>
638
+
<li></li>
639
+
</ul>`);
640
+
const b = await fixture(html`<ul>
641
+
<li></li>
642
+
<li id="a"></li>
643
+
<li id="new"></li>
644
+
<li id="b"></li>
645
+
<li id="c"></li>
646
+
<li></li>
647
+
</ul>`);
648
+
649
+
const oldSecond = a.children[1];
650
+
const oldThird = a.children[2];
651
+
const oldFourth = a.children[3];
652
+
653
+
morph(a, b);
654
+
655
+
expect(a.outerHTML).to.equal(b.outerHTML);
656
+
expect(a.children[1]).to.equal(oldSecond);
657
+
expect(a.children[3]).to.equal(oldThird);
658
+
expect(a.children[4]).to.equal(oldFourth);
659
+
});
660
+
661
+
it('copies over children', async () => {
662
+
const a = await fixture(html`<section>'hello'<section>`);
663
+
const b = await fixture(html`<section><div></div><section>`);
664
+
665
+
morph(a, b);
666
+
667
+
expect(a.outerHTML).to.equal(b.outerHTML);
668
+
})
669
+
670
+
it('removes an element', async () => {
671
+
const a = await fixture(html`<ul><li id="a"></li><li id="b"></li><li id="c"></li></ul>`);
672
+
const b = await fixture(html`<ul><li id="a"></li><li id="c"></li></ul>`);
673
+
674
+
const oldFirst = a.children[0];
675
+
const oldThird = a.children[2];
676
+
677
+
morph(a, b);
678
+
679
+
expect(a.outerHTML).to.equal(b.outerHTML);
680
+
expect(a.children[0]).to.equal(oldFirst);
681
+
expect(a.children[1]).to.equal(oldThird);
682
+
})
683
+
684
+
it('id match still morphs', async () => {
685
+
const a = await fixture(html`<li id="12">FOO</li>`);
686
+
const b = await fixture(html`<li id="12">BAR</li>`);
687
+
688
+
morph(a, b);
689
+
690
+
expect(a.outerHTML).to.equal(b.outerHTML);
691
+
})
692
+
693
+
it('removes orphaned keyed nodes', async () => {
694
+
const a = await fixture(html`
695
+
<div>
696
+
<div>1</div>
697
+
<li id="a">a</li>
698
+
</div>
699
+
`);
700
+
const b = await fixture(html`
701
+
<div>
702
+
<div>2</div>
703
+
<li id="b">b</li>
704
+
</div>
705
+
`);
706
+
707
+
morph(a, b);
708
+
709
+
expect(a.outerHTML).to.equal(b.outerHTML);
710
+
})
711
+
712
+
it('whitespace', async () => {
713
+
const a = await fixture(html`<ul> </ul>`);
714
+
const b = await fixture(html`<ul><li></li><li></li> </ul>`);
715
+
716
+
morph(a, b);
717
+
718
+
expect(a.outerHTML).to.equal(b.outerHTML);
719
+
})
720
+
});
605
721
});