Precise DOM morphing
morphing typescript dom
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add some Alpine-morph test cases

+65 -1
+65 -1
test/something.test.js
··· 2 2 import { morph } from "../"; 3 3 4 4 describe("my-test", () => { 5 - it.only("works", async () => { 5 + it("add text content", async () => { 6 6 const a = await fixture(html`<h1></h1>`); 7 7 const b = await fixture(html`<h1>Hello</h1>`); 8 8 ··· 23 23 24 24 expect(a.outerHTML).to.equal(b.outerHTML); 25 25 }); 26 + 27 + // adapted from: https://github.com/alpinejs/alpine/blob/891d68503960a39826e89f2f666d9b1e7ce3f0c9/tests/jest/morph/external.spec.js 28 + it("updates text content", async () => { 29 + const a = await fixture(html`<div>foo</div>`); 30 + const b = await fixture(html`<div>bar</div>`); 31 + 32 + morph(a, b); 33 + 34 + expect(a.outerHTML).to.equal(b.outerHTML); 35 + }) 36 + 37 + it("changes inner tag", async () => { 38 + const a = await fixture(html`<div><div>foo</div></div>`); 39 + const b = await fixture(html`<div><span>foo</span></div>`); 40 + 41 + morph(a, b); 42 + 43 + expect(a.outerHTML).to.equal(b.outerHTML); 44 + }) 45 + 46 + it("adds child", async () => { 47 + const a = await fixture(html`<div>foo</div>`); 48 + const b = await fixture(html`<div>foo <h1>baz</h1></div>`); 49 + 50 + morph(a, b); 51 + 52 + expect(a.outerHTML).to.equal(b.outerHTML); 53 + }) 54 + 55 + it("removes child", async () => { 56 + const a = await fixture(html`<div>foo <h1>baz</h1></div>`); 57 + const b = await fixture(html`<div>foo</div>`); 58 + 59 + morph(a, b); 60 + 61 + expect(a.outerHTML).to.equal(b.outerHTML); 62 + }) 63 + 64 + it("adds attribute", async () => { 65 + const a = await fixture(html`<div>foo</div>`); 66 + const b = await fixture(html`<div foo="bar">foo</div>`); 67 + 68 + morph(a, b); 69 + 70 + expect(a.outerHTML).to.equal(b.outerHTML); 71 + }) 72 + 73 + it("removes attribute", async () => { 74 + const a = await fixture(html`<div foo="bar">foo</div>`); 75 + const b = await fixture(html`<div>foo</div>`); 76 + 77 + morph(a, b); 78 + 79 + expect(a.outerHTML).to.equal(b.outerHTML); 80 + }) 81 + 82 + it("changes attribute", async () => { 83 + const a = await fixture(html`<div foo="bar">foo</div>`); 84 + const b = await fixture(html`<div foo="baz">foo</div>`); 85 + 86 + morph(a, b); 87 + 88 + expect(a.outerHTML).to.equal(b.outerHTML); 89 + }) 26 90 });