Precise DOM morphing
morphing typescript dom
0
fork

Configure Feed

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

Add some nanomorph test cases

+174 -4
+174 -4
test/something.test.js
··· 25 25 }); 26 26 27 27 // adapted from: https://github.com/alpinejs/alpine/blob/891d68503960a39826e89f2f666d9b1e7ce3f0c9/tests/jest/morph/external.spec.js 28 - it("updates text content", async () => { 28 + it("updates text content", async () => { 29 29 const a = await fixture(html`<div>foo</div>`); 30 30 const b = await fixture(html`<div>bar</div>`); 31 31 ··· 43 43 expect(a.outerHTML).to.equal(b.outerHTML); 44 44 }) 45 45 46 - it("adds child", async () => { 46 + it("adds child", async () => { 47 47 const a = await fixture(html`<div>foo</div>`); 48 48 const b = await fixture(html`<div>foo <h1>baz</h1></div>`); 49 49 ··· 61 61 expect(a.outerHTML).to.equal(b.outerHTML); 62 62 }) 63 63 64 - it("adds attribute", async () => { 64 + it("adds attribute", async () => { 65 65 const a = await fixture(html`<div>foo</div>`); 66 66 const b = await fixture(html`<div foo="bar">foo</div>`); 67 67 ··· 79 79 expect(a.outerHTML).to.equal(b.outerHTML); 80 80 }) 81 81 82 - it("changes attribute", async () => { 82 + it("changes attribute", async () => { 83 83 const a = await fixture(html`<div foo="bar">foo</div>`); 84 84 const b = await fixture(html`<div foo="baz">foo</div>`); 85 85 86 86 morph(a, b); 87 87 88 88 expect(a.outerHTML).to.equal(b.outerHTML); 89 + }) 90 + 91 + // adapted from: https://github.com/choojs/nanomorph/blob/b8088d03b1113bddabff8aa0e44bd8db88d023c7/test/diff.js 92 + describe("root level", () => { 93 + it("should replace a node", async () => { 94 + const a = await fixture(html`<p>hello world</p>`); 95 + const b = await fixture(html`<div>hello world</div>`); 96 + 97 + morph(a, b); 98 + 99 + expect(a.outerHTML).to.equal(b.outerHTML); 100 + }) 101 + 102 + it("should replace a component", async () => { 103 + const a = await fixture(html`<div data-nanomorph-component-id="a">hello world</div>`); 104 + const b = await fixture(html`<div data-nanomorph-component-id="b">bye moon</div>`); 105 + 106 + morph(a, b); 107 + 108 + expect(a.outerHTML).to.equal(b.outerHTML); 109 + }) 110 + 111 + it("should morph a node", async () => { 112 + const a = await fixture(html`<p>hello world</p>`); 113 + const b = await fixture(html`<p>hello you</p>`); 114 + 115 + morph(a, b); 116 + 117 + expect(a.outerHTML).to.equal(b.outerHTML); 118 + }) 119 + 120 + it("should morph a node with namespaced attribute", async () => { 121 + const a = await fixture(html`<svg><use xlink:href="#heybooboo"></use></svg>`); 122 + const b = await fixture(html`<svg><use xlink:href="#boobear"></use></svg>`); 123 + 124 + morph(a, b); 125 + 126 + expect(a.outerHTML).to.equal(b.outerHTML); 127 + }) 128 + 129 + it("should ignore if node is same", async () => { 130 + const a = await fixture(html`<p>hello world</p>`); 131 + 132 + morph(a, a); 133 + 134 + expect(a.outerHTML).to.equal(a.outerHTML); 135 + }) 136 + }) 137 + 138 + describe("nested", () => { 139 + it("should replace a node", async () => { 140 + const a = await fixture(html`<main><p>hello world</p></main>`); 141 + const b = await fixture(html`<main><div>hello world</div></main>`); 142 + 143 + morph(a, b); 144 + 145 + expect(a.outerHTML).to.equal(b.outerHTML); 146 + }) 147 + 148 + it("should replace a node", async () => { 149 + const a = await fixture(html`<main><p>hello world</p></main>`); 150 + const b = await fixture(html`<main><p>hello you</p></main>`); 151 + 152 + morph(a, b); 153 + 154 + expect(a.outerHTML).to.equal(b.outerHTML); 155 + }) 156 + 157 + it("should replace a node", async () => { 158 + const a = await fixture(html`<main><p>hello world</p></main>`); 159 + 160 + morph(a, a); 161 + 162 + expect(a.outerHTML).to.equal(a.outerHTML); 163 + }) 164 + 165 + it("should append a node", async () => { 166 + const a = await fixture(html`<main></main>`); 167 + const b = await fixture(html`<main><p>hello you</p></main>`); 168 + 169 + morph(a, b); 170 + 171 + expect(a.outerHTML).to.equal(b.outerHTML); 172 + }) 173 + 174 + it("should remove a node", async () => { 175 + const a = await fixture(html`<main><p>hello you</p></main>`); 176 + const b = await fixture(html`<main></main>`); 177 + 178 + morph(a, b); 179 + 180 + expect(a.outerHTML).to.equal(b.outerHTML); 181 + }) 182 + 183 + it("should update child nodes", async () => { 184 + const a = await fixture(html`<main><p>hello world</p></main>`); 185 + const b = await fixture(html`<section><p>hello you</p></section>`); 186 + 187 + morph(a, b, { childrenOnly: true }); 188 + 189 + expect(a.outerHTML).to.equal('<main><p>hello you</p></main>'); 190 + }) 191 + }) 192 + 193 + describe('values', () => { 194 + it("if new tree has no value and old tree does, remove value", async () => { 195 + const a = await fixture(html`<input type="text" value="howdy" />`); 196 + const b = await fixture(html`<input type="text" />`); 197 + 198 + morph(a, b); 199 + 200 + expect(a.outerHTML).to.equal(b.outerHTML); 201 + expect(a.getAttribute("value")).to.equal(null); 202 + expect(a.value).to.equal(""); 203 + }) 204 + 205 + it("if new tree has null value and old tree does, remove value", async () => { 206 + const a = await fixture(html`<input type="text" value="howdy" />`); 207 + const b = await fixture(html`<input type="text" value=${null} />`); 208 + 209 + morph(a, b); 210 + 211 + expect(a.outerHTML).to.equal(b.outerHTML); 212 + expect(a.getAttribute("value")).to.equal(null); 213 + expect(a.value).to.equal(""); 214 + }) 215 + 216 + it("if new tree has value in HTML and old tree does too, set value from new tree", async () => { 217 + const a = await fixture(html`<input type="text" value="howdy" />`); 218 + const b = await fixture(html`<input type="text" value="hi" />`); 219 + 220 + morph(a, b); 221 + 222 + expect(a.outerHTML).to.equal(b.outerHTML); 223 + expect(a.value).to.equal("hi"); 224 + }) 225 + 226 + it("if new tree has value from mutation and old tree does too, set value from new tree", async () => { 227 + const a = await fixture(html`<input type="text"/>`); 228 + a.value = 'howdy' 229 + const b = await fixture(html`<input type="text"/>`); 230 + b.value = 'hi' 231 + 232 + morph(a, b); 233 + 234 + expect(a.outerHTML).to.equal(b.outerHTML); 235 + expect(a.value).to.equal("hi"); 236 + }) 237 + 238 + it("if new tree has value in HTML and old tree does from mutation, set value from new tree", async () => { 239 + const a = await fixture(html`<input type="text" value="howdy"/>`); 240 + const b = await fixture(html`<input type="text"/>`); 241 + b.value = 'hi' 242 + 243 + morph(a, b); 244 + 245 + expect(a.outerHTML).to.equal(b.outerHTML); 246 + expect(a.value).to.equal("hi"); 247 + }) 248 + 249 + it("if new tree has value from mutation and old tree does in HTML, set value from new tree", async () => { 250 + const a = await fixture(html`<input type="text" value="howdy"/>`); 251 + a.value = 'howdy' 252 + const b = await fixture(html`<input type="text" value="hi"/>`); 253 + 254 + morph(a, b); 255 + 256 + expect(a.outerHTML).to.equal(b.outerHTML); 257 + expect(a.value).to.equal("hi"); 258 + }) 89 259 }) 90 260 });