yippee.fun / morphlex
Precise DOM morphing
morphing typescript dom
0
fork

Configure Feed

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

Format with prettier

Joel Drapper 456c944e adb5a3da

+51 -41
+51 -41
test/something.test.js
··· 32 32 morph(a, b); 33 33 34 34 expect(a.outerHTML).to.equal(b.outerHTML); 35 - }) 35 + }); 36 36 37 37 it("changes inner tag", async () => { 38 38 const a = await fixture(html`<div><div>foo</div></div>`); ··· 41 41 morph(a, b); 42 42 43 43 expect(a.outerHTML).to.equal(b.outerHTML); 44 - }) 44 + }); 45 45 46 46 it("adds child", async () => { 47 47 const a = await fixture(html`<div>foo</div>`); 48 - const b = await fixture(html`<div>foo <h1>baz</h1></div>`); 48 + const b = await fixture( 49 + html`<div> 50 + foo 51 + <h1>baz</h1> 52 + </div>`, 53 + ); 49 54 50 55 morph(a, b); 51 56 52 57 expect(a.outerHTML).to.equal(b.outerHTML); 53 - }) 58 + }); 54 59 55 60 it("removes child", async () => { 56 - const a = await fixture(html`<div>foo <h1>baz</h1></div>`); 61 + const a = await fixture( 62 + html`<div> 63 + foo 64 + <h1>baz</h1> 65 + </div>`, 66 + ); 57 67 const b = await fixture(html`<div>foo</div>`); 58 68 59 69 morph(a, b); 60 70 61 71 expect(a.outerHTML).to.equal(b.outerHTML); 62 - }) 72 + }); 63 73 64 74 it("adds attribute", async () => { 65 75 const a = await fixture(html`<div>foo</div>`); ··· 68 78 morph(a, b); 69 79 70 80 expect(a.outerHTML).to.equal(b.outerHTML); 71 - }) 81 + }); 72 82 73 83 it("removes attribute", async () => { 74 84 const a = await fixture(html`<div foo="bar">foo</div>`); ··· 77 87 morph(a, b); 78 88 79 89 expect(a.outerHTML).to.equal(b.outerHTML); 80 - }) 90 + }); 81 91 82 92 it("changes attribute", async () => { 83 93 const a = await fixture(html`<div foo="bar">foo</div>`); ··· 86 96 morph(a, b); 87 97 88 98 expect(a.outerHTML).to.equal(b.outerHTML); 89 - }) 99 + }); 90 100 91 101 // adapted from: https://github.com/choojs/nanomorph/blob/b8088d03b1113bddabff8aa0e44bd8db88d023c7/test/diff.js 92 102 describe("root level", () => { ··· 97 107 morph(a, b); 98 108 99 109 expect(a.outerHTML).to.equal(b.outerHTML); 100 - }) 110 + }); 101 111 102 112 it("should replace a component", async () => { 103 113 const a = await fixture(html`<div data-nanomorph-component-id="a">hello world</div>`); ··· 106 116 morph(a, b); 107 117 108 118 expect(a.outerHTML).to.equal(b.outerHTML); 109 - }) 119 + }); 110 120 111 121 it("should morph a node", async () => { 112 122 const a = await fixture(html`<p>hello world</p>`); ··· 115 125 morph(a, b); 116 126 117 127 expect(a.outerHTML).to.equal(b.outerHTML); 118 - }) 128 + }); 119 129 120 130 it("should morph a node with namespaced attribute", async () => { 121 131 const a = await fixture(html`<svg><use xlink:href="#heybooboo"></use></svg>`); ··· 124 134 morph(a, b); 125 135 126 136 expect(a.outerHTML).to.equal(b.outerHTML); 127 - }) 137 + }); 128 138 129 139 it("should ignore if node is same", async () => { 130 140 const a = await fixture(html`<p>hello world</p>`); ··· 132 142 morph(a, a); 133 143 134 144 expect(a.outerHTML).to.equal(a.outerHTML); 135 - }) 136 - }) 145 + }); 146 + }); 137 147 138 148 describe("nested", () => { 139 149 it("should replace a node", async () => { ··· 143 153 morph(a, b); 144 154 145 155 expect(a.outerHTML).to.equal(b.outerHTML); 146 - }) 156 + }); 147 157 148 158 it("should replace a node", async () => { 149 159 const a = await fixture(html`<main><p>hello world</p></main>`); ··· 152 162 morph(a, b); 153 163 154 164 expect(a.outerHTML).to.equal(b.outerHTML); 155 - }) 165 + }); 156 166 157 167 it("should replace a node", async () => { 158 168 const a = await fixture(html`<main><p>hello world</p></main>`); ··· 160 170 morph(a, a); 161 171 162 172 expect(a.outerHTML).to.equal(a.outerHTML); 163 - }) 173 + }); 164 174 165 175 it("should append a node", async () => { 166 176 const a = await fixture(html`<main></main>`); ··· 169 179 morph(a, b); 170 180 171 181 expect(a.outerHTML).to.equal(b.outerHTML); 172 - }) 182 + }); 173 183 174 184 it("should remove a node", async () => { 175 185 const a = await fixture(html`<main><p>hello you</p></main>`); ··· 178 188 morph(a, b); 179 189 180 190 expect(a.outerHTML).to.equal(b.outerHTML); 181 - }) 191 + }); 182 192 183 193 it("should update child nodes", async () => { 184 194 const a = await fixture(html`<main><p>hello world</p></main>`); ··· 186 196 187 197 morph(a, b, { childrenOnly: true }); 188 198 189 - expect(a.outerHTML).to.equal('<main><p>hello you</p></main>'); 190 - }) 191 - }) 199 + expect(a.outerHTML).to.equal("<main><p>hello you</p></main>"); 200 + }); 201 + }); 192 202 193 - describe('values', () => { 203 + describe("values", () => { 194 204 it("if new tree has no value and old tree does, remove value", async () => { 195 205 const a = await fixture(html`<input type="text" value="howdy" />`); 196 206 const b = await fixture(html`<input type="text" />`); ··· 200 210 expect(a.outerHTML).to.equal(b.outerHTML); 201 211 expect(a.getAttribute("value")).to.equal(null); 202 212 expect(a.value).to.equal(""); 203 - }) 213 + }); 204 214 205 215 it("if new tree has null value and old tree does, remove value", async () => { 206 216 const a = await fixture(html`<input type="text" value="howdy" />`); ··· 211 221 expect(a.outerHTML).to.equal(b.outerHTML); 212 222 expect(a.getAttribute("value")).to.equal(null); 213 223 expect(a.value).to.equal(""); 214 - }) 224 + }); 215 225 216 226 it("if new tree has value in HTML and old tree does too, set value from new tree", async () => { 217 227 const a = await fixture(html`<input type="text" value="howdy" />`); ··· 221 231 222 232 expect(a.outerHTML).to.equal(b.outerHTML); 223 233 expect(a.value).to.equal("hi"); 224 - }) 234 + }); 225 235 226 236 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' 237 + const a = await fixture(html`<input type="text" />`); 238 + a.value = "howdy"; 239 + const b = await fixture(html`<input type="text" />`); 240 + b.value = "hi"; 231 241 232 242 morph(a, b); 233 243 234 244 expect(a.outerHTML).to.equal(b.outerHTML); 235 245 expect(a.value).to.equal("hi"); 236 - }) 246 + }); 237 247 238 248 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' 249 + const a = await fixture(html`<input type="text" value="howdy" />`); 250 + const b = await fixture(html`<input type="text" />`); 251 + b.value = "hi"; 242 252 243 253 morph(a, b); 244 254 245 255 expect(a.outerHTML).to.equal(b.outerHTML); 246 256 expect(a.value).to.equal("hi"); 247 - }) 257 + }); 248 258 249 259 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"/>`); 260 + const a = await fixture(html`<input type="text" value="howdy" />`); 261 + a.value = "howdy"; 262 + const b = await fixture(html`<input type="text" value="hi" />`); 253 263 254 264 morph(a, b); 255 265 256 266 expect(a.outerHTML).to.equal(b.outerHTML); 257 267 expect(a.value).to.equal("hi"); 258 - }) 259 - }) 268 + }); 269 + }); 260 270 });