+78

test/alpine-morph.test.js

reviewed

··· 1 1 + import { fixture, html, expect } from "@open-wc/testing"; 2 2 + import { morph } from "../"; 3 3 + 4 4 + // adapted from: https://github.com/alpinejs/alpine/blob/891d68503960a39826e89f2f666d9b1e7ce3f0c9/tests/jest/morph/external.spec.js 5 5 + describe("alpine-morph", () => { 6 6 + it("updates text content", async () => { 7 7 + const a = await fixture(html`<div>foo</div>`); 8 8 + const b = await fixture(html`<div>bar</div>`); 9 9 + 10 10 + morph(a, b); 11 11 + 12 12 + expect(a.outerHTML).to.equal(b.outerHTML); 13 13 + }); 14 14 + 15 15 + it("changes inner tag", async () => { 16 16 + const a = await fixture(html`<div><div>foo</div></div>`); 17 17 + const b = await fixture(html`<div><span>foo</span></div>`); 18 18 + 19 19 + morph(a, b); 20 20 + 21 21 + expect(a.outerHTML).to.equal(b.outerHTML); 22 22 + }); 23 23 + 24 24 + it("adds child", async () => { 25 25 + const a = await fixture(html`<div>foo</div>`); 26 26 + const b = await fixture( 27 27 + html`<div> 28 28 + foo 29 29 + <h1>baz</h1> 30 30 + </div>`, 31 31 + ); 32 32 + 33 33 + morph(a, b); 34 34 + 35 35 + expect(a.outerHTML).to.equal(b.outerHTML); 36 36 + }); 37 37 + 38 38 + it("removes child", async () => { 39 39 + const a = await fixture( 40 40 + html`<div> 41 41 + foo 42 42 + <h1>baz</h1> 43 43 + </div>`, 44 44 + ); 45 45 + const b = await fixture(html`<div>foo</div>`); 46 46 + 47 47 + morph(a, b); 48 48 + 49 49 + expect(a.outerHTML).to.equal(b.outerHTML); 50 50 + }); 51 51 + 52 52 + it("adds attribute", async () => { 53 53 + const a = await fixture(html`<div>foo</div>`); 54 54 + const b = await fixture(html`<div foo="bar">foo</div>`); 55 55 + 56 56 + morph(a, b); 57 57 + 58 58 + expect(a.outerHTML).to.equal(b.outerHTML); 59 59 + }); 60 60 + 61 61 + it("removes attribute", async () => { 62 62 + const a = await fixture(html`<div foo="bar">foo</div>`); 63 63 + const b = await fixture(html`<div>foo</div>`); 64 64 + 65 65 + morph(a, b); 66 66 + 67 67 + expect(a.outerHTML).to.equal(b.outerHTML); 68 68 + }); 69 69 + 70 70 + it("changes attribute", async () => { 71 71 + const a = await fixture(html`<div foo="bar">foo</div>`); 72 72 + const b = await fixture(html`<div foo="baz">foo</div>`); 73 73 + 74 74 + morph(a, b); 75 75 + 76 76 + expect(a.outerHTML).to.equal(b.outerHTML); 77 77 + }); 78 78 + });

+647

test/nanomorph.test.js

reviewed

··· 1 1 + import { fixture, html, expect } from "@open-wc/testing"; 2 2 + import { morph } from "../"; 3 3 + 4 4 + // adapted from: https://github.com/choojs/nanomorph/blob/b8088d03b1113bddabff8aa0e44bd8db88d023c7/test/diff.js 5 5 + describe("nanomorph", () => { 6 6 + describe("root level", () => { 7 7 + it("should replace a node", async () => { 8 8 + const a = await fixture(html`<p>hello world</p>`); 9 9 + const b = await fixture(html`<div>hello world</div>`); 10 10 + 11 11 + morph(a, b); 12 12 + 13 13 + expect(a.outerHTML).to.equal(b.outerHTML); 14 14 + }); 15 15 + 16 16 + it("should replace a component", async () => { 17 17 + const a = await fixture(html`<div data-nanomorph-component-id="a">hello world</div>`); 18 18 + const b = await fixture(html`<div data-nanomorph-component-id="b">bye moon</div>`); 19 19 + 20 20 + morph(a, b); 21 21 + 22 22 + expect(a.outerHTML).to.equal(b.outerHTML); 23 23 + }); 24 24 + 25 25 + it("should morph a node", async () => { 26 26 + const a = await fixture(html`<p>hello world</p>`); 27 27 + const b = await fixture(html`<p>hello you</p>`); 28 28 + 29 29 + morph(a, b); 30 30 + 31 31 + expect(a.outerHTML).to.equal(b.outerHTML); 32 32 + }); 33 33 + 34 34 + it("should morph a node with namespaced attribute", async () => { 35 35 + const a = await fixture(html`<svg><use xlink:href="#heybooboo"></use></svg>`); 36 36 + const b = await fixture(html`<svg><use xlink:href="#boobear"></use></svg>`); 37 37 + 38 38 + morph(a, b); 39 39 + 40 40 + expect(a.outerHTML).to.equal(b.outerHTML); 41 41 + }); 42 42 + 43 43 + it("should ignore if node is same", async () => { 44 44 + const a = await fixture(html`<p>hello world</p>`); 45 45 + 46 46 + morph(a, a); 47 47 + 48 48 + expect(a.outerHTML).to.equal(a.outerHTML); 49 49 + }); 50 50 + }); 51 51 + 52 52 + describe("nested", () => { 53 53 + it("should replace a node", async () => { 54 54 + const a = await fixture(html`<main><p>hello world</p></main>`); 55 55 + const b = await fixture(html`<main><div>hello world</div></main>`); 56 56 + 57 57 + morph(a, b); 58 58 + 59 59 + expect(a.outerHTML).to.equal(b.outerHTML); 60 60 + }); 61 61 + 62 62 + it("should replace a node", async () => { 63 63 + const a = await fixture(html`<main><p>hello world</p></main>`); 64 64 + const b = await fixture(html`<main><p>hello you</p></main>`); 65 65 + 66 66 + morph(a, b); 67 67 + 68 68 + expect(a.outerHTML).to.equal(b.outerHTML); 69 69 + }); 70 70 + 71 71 + it("should replace a node", async () => { 72 72 + const a = await fixture(html`<main><p>hello world</p></main>`); 73 73 + 74 74 + morph(a, a); 75 75 + 76 76 + expect(a.outerHTML).to.equal(a.outerHTML); 77 77 + }); 78 78 + 79 79 + it("should append a node", async () => { 80 80 + const a = await fixture(html`<main></main>`); 81 81 + const b = await fixture(html`<main><p>hello you</p></main>`); 82 82 + 83 83 + morph(a, b); 84 84 + 85 85 + expect(a.outerHTML).to.equal(b.outerHTML); 86 86 + }); 87 87 + 88 88 + it("should remove a node", async () => { 89 89 + const a = await fixture(html`<main><p>hello you</p></main>`); 90 90 + const b = await fixture(html`<main></main>`); 91 91 + 92 92 + morph(a, b); 93 93 + 94 94 + expect(a.outerHTML).to.equal(b.outerHTML); 95 95 + }); 96 96 + 97 97 + it.skip("should update child nodes", async () => { 98 98 + const a = await fixture(html`<main><p>hello world</p></main>`); 99 99 + const b = await fixture(html`<section><p>hello you</p></section>`); 100 100 + 101 101 + morph(a, b, { childrenOnly: true }); 102 102 + 103 103 + expect(a.outerHTML).to.equal("<main><p>hello you</p></main>"); 104 104 + }); 105 105 + }); 106 106 + 107 107 + describe("values", () => { 108 108 + it("if new tree has no value and old tree does, remove value", async () => { 109 109 + const a = await fixture(html`<input type="text" value="howdy" />`); 110 110 + const b = await fixture(html`<input type="text" />`); 111 111 + 112 112 + morph(a, b); 113 113 + 114 114 + expect(a.outerHTML).to.equal(b.outerHTML); 115 115 + expect(a.getAttribute("value")).to.equal(null); 116 116 + expect(a.value).to.equal(""); 117 117 + }); 118 118 + 119 119 + it("if new tree has null value and old tree does, remove value", async () => { 120 120 + const a = await fixture(html`<input type="text" value="howdy" />`); 121 121 + const b = await fixture(html`<input type="text" value=${null} />`); 122 122 + 123 123 + morph(a, b); 124 124 + 125 125 + expect(a.outerHTML).to.equal(b.outerHTML); 126 126 + expect(a.getAttribute("value")).to.equal(null); 127 127 + expect(a.value).to.equal(""); 128 128 + }); 129 129 + 130 130 + it("if new tree has value in HTML and old tree does too, set value from new tree", async () => { 131 131 + const a = await fixture(html`<input type="text" value="howdy" />`); 132 132 + const b = await fixture(html`<input type="text" value="hi" />`); 133 133 + 134 134 + morph(a, b); 135 135 + 136 136 + expect(a.outerHTML).to.equal(b.outerHTML); 137 137 + expect(a.value).to.equal("hi"); 138 138 + }); 139 139 + 140 140 + it("if new tree has value from mutation and old tree does too, set value from new tree", async () => { 141 141 + const a = await fixture(html`<input type="text" />`); 142 142 + a.value = "howdy"; 143 143 + const b = await fixture(html`<input type="text" />`); 144 144 + b.value = "hi"; 145 145 + 146 146 + morph(a, b); 147 147 + 148 148 + expect(a.outerHTML).to.equal(b.outerHTML); 149 149 + expect(a.value).to.equal("hi"); 150 150 + }); 151 151 + 152 152 + it("if new tree has value in HTML and old tree does from mutation, set value from new tree", async () => { 153 153 + const a = await fixture(html`<input type="text" value="howdy" />`); 154 154 + const b = await fixture(html`<input type="text" />`); 155 155 + b.value = "hi"; 156 156 + 157 157 + morph(a, b); 158 158 + 159 159 + expect(a.outerHTML).to.equal(b.outerHTML); 160 160 + expect(a.value).to.equal("hi"); 161 161 + }); 162 162 + 163 163 + it("if new tree has value from mutation and old tree does in HTML, set value from new tree", async () => { 164 164 + const a = await fixture(html`<input type="text" value="howdy" />`); 165 165 + a.value = "howdy"; 166 166 + const b = await fixture(html`<input type="text" value="hi" />`); 167 167 + 168 168 + morph(a, b); 169 169 + 170 170 + expect(a.outerHTML).to.equal(b.outerHTML); 171 171 + expect(a.value).to.equal("hi"); 172 172 + }); 173 173 + }); 174 174 + 175 175 + describe("boolean properties", () => { 176 176 + describe("checked", () => { 177 177 + it("if new tree has no checked and old tree does, remove value", async () => { 178 178 + const a = await fixture(html`<input type="checkbox" checked=${true} />`); 179 179 + const b = await fixture(html`<input type="checkbox" />`); 180 180 + 181 181 + morph(a, b); 182 182 + 183 183 + expect(a.outerHTML).to.equal(b.outerHTML); 184 184 + expect(a.checked).to.equal(false); 185 185 + }); 186 186 + 187 187 + it("if new tree has checked and old tree does not, add value", async () => { 188 188 + const a = await fixture(html`<input type="checkbox" />`); 189 189 + const b = await fixture(html`<input type="checkbox" checked=${true} />`); 190 190 + 191 191 + morph(a, b); 192 192 + 193 193 + expect(a.outerHTML).to.equal(b.outerHTML); 194 194 + expect(a.checked).to.equal(true); 195 195 + }); 196 196 + 197 197 + it("if new tree has checked=false and old tree has checked=true, set value from new tree", async () => { 198 198 + const a = await fixture(html`<input type="checkbox" checked=${false} />`); 199 199 + const b = await fixture(html`<input type="checkbox" checked=${true} />`); 200 200 + 201 201 + morph(a, b); 202 202 + 203 203 + expect(a.outerHTML).to.equal(b.outerHTML); 204 204 + expect(a.checked).to.equal(true); 205 205 + }); 206 206 + 207 207 + it("if new tree has checked=true and old tree has checked=false, set value from new tree", async () => { 208 208 + const a = await fixture(html`<input type="checkbox" checked=${true} />`); 209 209 + const b = await fixture(html`<input type="checkbox" checked=${false} />`); 210 210 + 211 211 + morph(a, b); 212 212 + 213 213 + expect(a.outerHTML).to.equal(b.outerHTML); 214 214 + expect(a.checked).to.equal(false); 215 215 + }); 216 216 + 217 217 + it("if new tree has no checked and old tree has checked mutated to true, set value from new tree", async () => { 218 218 + const a = await fixture(html`<input type="checkbox" />`); 219 219 + const b = await fixture(html`<input type="checkbox" />`); 220 220 + b.checked = true; 221 221 + 222 222 + morph(a, b); 223 223 + 224 224 + expect(a.outerHTML).to.equal(b.outerHTML); 225 225 + expect(a.checked).to.equal(true); 226 226 + }); 227 227 + 228 228 + it("if new tree has checked=false and old tree has checked mutated to true, set value from new tree", async () => { 229 229 + const a = await fixture(html`<input type="checkbox" checked=${false} />`); 230 230 + const b = await fixture(html`<input type="checkbox" />`); 231 231 + b.checked = true; 232 232 + 233 233 + morph(a, b); 234 234 + 235 235 + expect(a.outerHTML).to.equal(b.outerHTML); 236 236 + expect(a.checked).to.equal(true); 237 237 + }); 238 238 + 239 239 + it("if new tree has checked=true and old tree has checked mutated to false, set value from new tree", async () => { 240 240 + const a = await fixture(html`<input type="checkbox" checked=${true} />`); 241 241 + const b = await fixture(html`<input type="checkbox" />`); 242 242 + b.checked = false; 243 243 + 244 244 + morph(a, b); 245 245 + 246 246 + expect(a.outerHTML).to.equal(b.outerHTML); 247 247 + expect(a.checked).to.equal(false); 248 248 + }); 249 249 + 250 250 + it("if new tree has no checked and old tree has checked=true, set value from new tree", async () => { 251 251 + const a = await fixture(html`<input type="checkbox" />`); 252 252 + const b = await fixture(html`<input type="checkbox" checked=${true} />`); 253 253 + 254 254 + morph(a, b); 255 255 + 256 256 + expect(a.outerHTML).to.equal(b.outerHTML); 257 257 + expect(a.checked).to.equal(true); 258 258 + }); 259 259 + }); 260 260 + 261 261 + describe("disabled", () => { 262 262 + it("if new tree has no disabled and old tree does, remove value", async () => { 263 263 + const a = await fixture(html`<input type="checkbox" disabled=${true} />`); 264 264 + const b = await fixture(html`<input type="checkbox" />`); 265 265 + 266 266 + morph(a, b); 267 267 + 268 268 + expect(a.outerHTML).to.equal(b.outerHTML); 269 269 + expect(a.disabled).to.equal(false); 270 270 + }); 271 271 + 272 272 + it("if new tree has disabled and old tree does not, add value", async () => { 273 273 + const a = await fixture(html`<input type="checkbox" />`); 274 274 + const b = await fixture(html`<input type="checkbox" disabled=${true} />`); 275 275 + 276 276 + morph(a, b); 277 277 + 278 278 + expect(a.outerHTML).to.equal(b.outerHTML); 279 279 + expect(a.disabled).to.equal(true); 280 280 + }); 281 281 + 282 282 + it("if new tree has disabled=false and old tree has disabled=true, set value from new tree", async () => { 283 283 + const a = await fixture(html`<input type="checkbox" disabled=${false} />`); 284 284 + const b = await fixture(html`<input type="checkbox" disabled=${true} />`); 285 285 + 286 286 + morph(a, b); 287 287 + 288 288 + expect(a.outerHTML).to.equal(b.outerHTML); 289 289 + expect(a.disabled).to.equal(true); 290 290 + }); 291 291 + 292 292 + it("if new tree has disabled=true and old tree has disabled=false, set value from new tree", async () => { 293 293 + const a = await fixture(html`<input type="checkbox" disabled=${true} />`); 294 294 + const b = await fixture(html`<input type="checkbox" disabled=${false} />`); 295 295 + 296 296 + morph(a, b); 297 297 + 298 298 + expect(a.outerHTML).to.equal(b.outerHTML); 299 299 + expect(a.disabled).to.equal(false); 300 300 + }); 301 301 + 302 302 + it("if new tree has no disabled and old tree has disabled mutated to true, set value from new tree", async () => { 303 303 + const a = await fixture(html`<input type="checkbox" />`); 304 304 + const b = await fixture(html`<input type="checkbox" />`); 305 305 + b.disabled = true; 306 306 + 307 307 + morph(a, b); 308 308 + 309 309 + expect(a.outerHTML).to.equal(b.outerHTML); 310 310 + expect(a.disabled).to.equal(true); 311 311 + }); 312 312 + 313 313 + it("if new tree has disabled=false and old tree has disabled mutated to true, set value from new tree", async () => { 314 314 + const a = await fixture(html`<input type="checkbox" disabled=${false} />`); 315 315 + const b = await fixture(html`<input type="checkbox" />`); 316 316 + b.disabled = true; 317 317 + 318 318 + morph(a, b); 319 319 + 320 320 + expect(a.outerHTML).to.equal(b.outerHTML); 321 321 + expect(a.disabled).to.equal(true); 322 322 + }); 323 323 + 324 324 + it("if new tree has disabled=true and old tree has disabled mutated to false, set value from new tree", async () => { 325 325 + const a = await fixture(html`<input type="checkbox" disabled=${true} />`); 326 326 + const b = await fixture(html`<input type="checkbox" />`); 327 327 + b.disabled = false; 328 328 + 329 329 + morph(a, b); 330 330 + 331 331 + expect(a.outerHTML).to.equal(b.outerHTML); 332 332 + expect(a.disabled).to.equal(false); 333 333 + }); 334 334 + 335 335 + it("if new tree has no disabled and old tree has disabled=true, set value from new tree", async () => { 336 336 + const a = await fixture(html`<input type="checkbox" />`); 337 337 + const b = await fixture(html`<input type="checkbox" disabled=${true} />`); 338 338 + 339 339 + morph(a, b); 340 340 + 341 341 + expect(a.outerHTML).to.equal(b.outerHTML); 342 342 + expect(a.disabled).to.equal(true); 343 343 + }); 344 344 + }); 345 345 + 346 346 + describe("indeterminate", () => { 347 347 + it("if new tree has no indeterminate and old tree has indeterminate mutated to true, set value from new tree", async () => { 348 348 + const a = await fixture(html`<input type="checkbox" />`); 349 349 + const b = await fixture(html`<input type="checkbox" />`); 350 350 + b.indeterminate = true; 351 351 + 352 352 + morph(a, b); 353 353 + 354 354 + expect(a.outerHTML).to.equal(b.outerHTML); 355 355 + expect(a.indeterminate).to.equal(true); 356 356 + }); 357 357 + 358 358 + it("if new tree has no indeterminate and old tree has indeterminate mutated to false, set value from new tree", async () => { 359 359 + const a = await fixture(html`<input type="checkbox" />`); 360 360 + const b = await fixture(html`<input type="checkbox" />`); 361 361 + b.indeterminate = false; 362 362 + 363 363 + morph(a, b); 364 364 + 365 365 + expect(a.outerHTML).to.equal(b.outerHTML); 366 366 + expect(a.indeterminate).to.equal(false); 367 367 + }); 368 368 + }); 369 369 + }); 370 370 + 371 371 + describe("lists", () => { 372 372 + it("should append nodes", async () => { 373 373 + const a = await fixture(html`<ul></ul>`); 374 374 + const b = await fixture( 375 375 + html`<ul> 376 376 + <li>1</li> 377 377 + <li>2</li> 378 378 + <li>3</li> 379 379 + <li>4</li> 380 380 + <li>5</li> 381 381 + </ul>`, 382 382 + ); 383 383 + 384 384 + morph(a, b); 385 385 + 386 386 + expect(a.outerHTML).to.equal(b.outerHTML); 387 387 + }); 388 388 + 389 389 + it("should remove nodes", async () => { 390 390 + const a = await fixture( 391 391 + html`<ul> 392 392 + <li>1</li> 393 393 + <li>2</li> 394 394 + <li>3</li> 395 395 + <li>4</li> 396 396 + <li>5</li> 397 397 + </ul>`, 398 398 + ); 399 399 + const b = await fixture(html`<ul></ul>`); 400 400 + 401 401 + morph(a, b); 402 402 + 403 403 + expect(a.outerHTML).to.equal(b.outerHTML); 404 404 + }); 405 405 + }); 406 406 + 407 407 + describe("selectables", () => { 408 408 + it('should append nodes', async () => { 409 409 + const a = await fixture(html`<select></select>`); 410 410 + const b = await fixture(html`<select><option>1</option><option>2</option><option>3</option><option>4</option></select>`); 411 411 + 412 412 + morph(a, b); 413 413 + 414 414 + expect(a.outerHTML).to.equal(b.outerHTML); 415 415 + }); 416 416 + 417 417 + it('should append nodes (including optgroups)', async () => { 418 418 + const a = await fixture(html`<select></select>`); 419 419 + const b = await fixture(html`<select><optgroup><option>1</option><option>2</option></optgroup><option>3</option><option>4</option></select>`); 420 420 + 421 421 + morph(a, b); 422 422 + 423 423 + expect(a.outerHTML).to.equal(b.outerHTML); 424 424 + }); 425 425 + 426 426 + it('should remove nodes', async () => { 427 427 + const a = await fixture(html`<select><option>1</option><option>2</option><option>3</option><option>4</option></select>`); 428 428 + const b = await fixture(html`<select></select>`); 429 429 + 430 430 + morph(a, b); 431 431 + 432 432 + expect(a.outerHTML).to.equal(b.outerHTML); 433 433 + }); 434 434 + 435 435 + it('should remove nodes (including optgroups)', async () => { 436 436 + const a = await fixture(html`<select><optgroup><option>1</option><option>2</option></optgroup><option>3</option><option>4</option></select>`); 437 437 + const b = await fixture(html`<select></select>`); 438 438 + 439 439 + morph(a, b); 440 440 + 441 441 + expect(a.outerHTML).to.equal(b.outerHTML); 442 442 + }); 443 443 + 444 444 + it('should add selected', async () => { 445 445 + const a = await fixture(html`<select><option>1</option><option>2</option></select>`); 446 446 + const b = await fixture(html`<select><option>1</option><option selected>2</option></select>`); 447 447 + 448 448 + morph(a, b); 449 449 + 450 450 + expect(a.outerHTML).to.equal(b.outerHTML); 451 451 + }); 452 452 + 453 453 + it('should add selected (xhtml)', async () => { 454 454 + const a = await fixture(html`<select><option>1</option><option>2</option></select>`); 455 455 + const b = await fixture(html`<select><option>1</option><option selected="selected">2</option></select>`); 456 456 + 457 457 + morph(a, b); 458 458 + 459 459 + expect(a.outerHTML).to.equal(b.outerHTML); 460 460 + }); 461 461 + 462 462 + it('should switch selected', async () => { 463 463 + const a = await fixture(html`<select><option selected="selected">1</option><option>2</option></select>`); 464 464 + const b = await fixture(html`<select><option>1</option><option selected="selected">2</option></select>`); 465 465 + 466 466 + morph(a, b); 467 467 + 468 468 + expect(a.outerHTML).to.equal(b.outerHTML); 469 469 + }); 470 470 + }); 471 471 + 472 472 + it("should replace nodes", async () => { 473 473 + const a = await fixture(html`<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>`); 474 474 + const b = await fixture(html`<ul><div>1</div><li>2</li><p>3</p><li>4</li><li>5</li></ul>`); 475 475 + 476 476 + morph(a, b); 477 477 + 478 478 + expect(a.outerHTML).to.equal(b.outerHTML); 479 479 + }); 480 480 + 481 481 + it("should replace nodes after multiple iterations", async () => { 482 482 + const a = await fixture(html`<ul></ul>`); 483 483 + const b = await fixture(html`<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>`); 484 484 + 485 485 + morph(a, b); 486 486 + 487 487 + expect(a.outerHTML).to.equal(b.outerHTML); 488 488 + 489 489 + const c = await fixture(html`<ul><div>1</div><li>2</li><p>3</p><li>4</li><li>5</li></ul>`); 490 490 + 491 491 + morph(a, c); 492 492 + 493 493 + expect(a.outerHTML).to.equal(c.outerHTML); 494 494 + }); 495 495 + 496 496 + describe('use id as a key hint', () => { 497 497 + it('appends an element', async () => { 498 498 + const a = await fixture(html`<ul> 499 499 + <li id="a"></li> 500 500 + <li id="b"></li> 501 501 + <li id="c"></li> 502 502 + </ul>`); 503 503 + const b = await fixture(html`<ul> 504 504 + <li id="a"></li> 505 505 + <li id="new"></li> 506 506 + <li id="b"></li> 507 507 + <li id="c"></li> 508 508 + </ul>`); 509 509 + 510 510 + const oldFirst = a.children[0]; 511 511 + const oldSecond = a.children[1]; 512 512 + const oldThird = a.children[2]; 513 513 + 514 514 + morph(a, b); 515 515 + 516 516 + expect(a.outerHTML).to.equal(b.outerHTML); 517 517 + expect(a.children[0]).to.equal(oldFirst); 518 518 + expect(a.children[1]).to.equal(oldSecond); 519 519 + expect(a.children[2]).to.equal(oldThird); 520 520 + }); 521 521 + 522 522 + it('handles non-id elements', async () => { 523 523 + const a = await fixture(html`<ul> 524 524 + <li></li> 525 525 + <li id="a"></li> 526 526 + <li id="b"></li> 527 527 + <li id="c"></li> 528 528 + <li></li> 529 529 + </ul>`); 530 530 + const b = await fixture(html`<ul> 531 531 + <li></li> 532 532 + <li id="a"></li> 533 533 + <li id="new"></li> 534 534 + <li id="b"></li> 535 535 + <li id="c"></li> 536 536 + <li></li> 537 537 + </ul>`); 538 538 + 539 539 + const oldSecond = a.children[1]; 540 540 + const oldThird = a.children[2]; 541 541 + const oldFourth = a.children[3]; 542 542 + 543 543 + morph(a, b); 544 544 + 545 545 + expect(a.outerHTML).to.equal(b.outerHTML); 546 546 + expect(a.children[1]).to.equal(oldSecond); 547 547 + expect(a.children[3]).to.equal(oldThird); 548 548 + expect(a.children[4]).to.equal(oldFourth); 549 549 + }); 550 550 + 551 551 + it('copies over children', async () => { 552 552 + const a = await fixture(html`<section>'hello'<section>`); 553 553 + const b = await fixture(html`<section><div></div><section>`); 554 554 + 555 555 + morph(a, b); 556 556 + 557 557 + expect(a.outerHTML).to.equal(b.outerHTML); 558 558 + }) 559 559 + 560 560 + it('removes an element', async () => { 561 561 + const a = await fixture(html`<ul><li id="a"></li><li id="b"></li><li id="c"></li></ul>`); 562 562 + const b = await fixture(html`<ul><li id="a"></li><li id="c"></li></ul>`); 563 563 + 564 564 + const oldFirst = a.children[0]; 565 565 + const oldThird = a.children[2]; 566 566 + 567 567 + morph(a, b); 568 568 + 569 569 + expect(a.outerHTML).to.equal(b.outerHTML); 570 570 + expect(a.children[0]).to.equal(oldFirst); 571 571 + expect(a.children[1]).to.equal(oldThird); 572 572 + }) 573 573 + 574 574 + it('id match still morphs', async () => { 575 575 + const a = await fixture(html`<li id="12">FOO</li>`); 576 576 + const b = await fixture(html`<li id="12">BAR</li>`); 577 577 + 578 578 + morph(a, b); 579 579 + 580 580 + expect(a.outerHTML).to.equal(b.outerHTML); 581 581 + }) 582 582 + 583 583 + it('removes orphaned keyed nodes', async () => { 584 584 + const a = await fixture(html` 585 585 + <div> 586 586 + <div>1</div> 587 587 + <li id="a">a</li> 588 588 + </div> 589 589 + `); 590 590 + const b = await fixture(html` 591 591 + <div> 592 592 + <div>2</div> 593 593 + <li id="b">b</li> 594 594 + </div> 595 595 + `); 596 596 + 597 597 + morph(a, b); 598 598 + 599 599 + expect(a.outerHTML).to.equal(b.outerHTML); 600 600 + }) 601 601 + 602 602 + it('whitespace', async () => { 603 603 + const a = await fixture(html`<ul> </ul>`); 604 604 + const b = await fixture(html`<ul><li></li><li></li> </ul>`); 605 605 + 606 606 + morph(a, b); 607 607 + 608 608 + expect(a.outerHTML).to.equal(b.outerHTML); 609 609 + }) 610 610 + }); 611 611 + 612 612 + it('allows morphing from Node to NodeList', async () => { 613 613 + const a = await fixture(html`<div><div>a</div></div>`); 614 614 + const b = await fixture(html`<div>a</div><div>b</div>`); 615 615 + 616 616 + morph(a, b); 617 617 + 618 618 + expect(a.outerHTML).to.equal(b.outerHTML); 619 619 + }) 620 620 + 621 621 + it('allows morphing from NodeList to Node', async () => { 622 622 + const a = await fixture(html`<div>a</div><div>b</div>`); 623 623 + const b = await fixture(html`<div><div>a</div></div>`); 624 624 + 625 625 + morph(a, b); 626 626 + 627 627 + expect(a.outerHTML).to.equal(b.outerHTML); 628 628 + }) 629 629 + 630 630 + it('allows morphing from NodeList to NodeList', async () => { 631 631 + const a = await fixture(html`<div>a</div><div>b</div>`); 632 632 + const b = await fixture(html`<div>z</div><div>y</div>`); 633 633 + 634 634 + morph(a, b); 635 635 + 636 636 + expect(a.outerHTML).to.equal(b.outerHTML); 637 637 + }) 638 638 + 639 639 + it('allows morphing from Node to Node', async () => { 640 640 + const a = await fixture(html`<div><div>a</div></div>`); 641 641 + const b = await fixture(html`<div><div>b</div></div>`); 642 642 + 643 643 + morph(a, b); 644 644 + 645 645 + expect(a.outerHTML).to.equal(b.outerHTML); 646 646 + }) 647 647 + });

-717

test/something.test.js

reviewed

··· 37 37 38 38 expect(a.outerHTML).to.equal(b.outerHTML); 39 39 }); 40 40 - 41 41 - // adapted from: https://github.com/alpinejs/alpine/blob/891d68503960a39826e89f2f666d9b1e7ce3f0c9/tests/jest/morph/external.spec.js 42 42 - it("updates text content", async () => { 43 43 - const a = await fixture(html`<div>foo</div>`); 44 44 - const b = await fixture(html`<div>bar</div>`); 45 45 - 46 46 - morph(a, b); 47 47 - 48 48 - expect(a.outerHTML).to.equal(b.outerHTML); 49 49 - }); 50 50 - 51 51 - it("changes inner tag", async () => { 52 52 - const a = await fixture(html`<div><div>foo</div></div>`); 53 53 - const b = await fixture(html`<div><span>foo</span></div>`); 54 54 - 55 55 - morph(a, b); 56 56 - 57 57 - expect(a.outerHTML).to.equal(b.outerHTML); 58 58 - }); 59 59 - 60 60 - it("adds child", async () => { 61 61 - const a = await fixture(html`<div>foo</div>`); 62 62 - const b = await fixture( 63 63 - html`<div> 64 64 - foo 65 65 - <h1>baz</h1> 66 66 - </div>`, 67 67 - ); 68 68 - 69 69 - morph(a, b); 70 70 - 71 71 - expect(a.outerHTML).to.equal(b.outerHTML); 72 72 - }); 73 73 - 74 74 - it("removes child", async () => { 75 75 - const a = await fixture( 76 76 - html`<div> 77 77 - foo 78 78 - <h1>baz</h1> 79 79 - </div>`, 80 80 - ); 81 81 - const b = await fixture(html`<div>foo</div>`); 82 82 - 83 83 - morph(a, b); 84 84 - 85 85 - expect(a.outerHTML).to.equal(b.outerHTML); 86 86 - }); 87 87 - 88 88 - it("adds attribute", async () => { 89 89 - const a = await fixture(html`<div>foo</div>`); 90 90 - const b = await fixture(html`<div foo="bar">foo</div>`); 91 91 - 92 92 - morph(a, b); 93 93 - 94 94 - expect(a.outerHTML).to.equal(b.outerHTML); 95 95 - }); 96 96 - 97 97 - it("removes attribute", async () => { 98 98 - const a = await fixture(html`<div foo="bar">foo</div>`); 99 99 - const b = await fixture(html`<div>foo</div>`); 100 100 - 101 101 - morph(a, b); 102 102 - 103 103 - expect(a.outerHTML).to.equal(b.outerHTML); 104 104 - }); 105 105 - 106 106 - it("changes attribute", async () => { 107 107 - const a = await fixture(html`<div foo="bar">foo</div>`); 108 108 - const b = await fixture(html`<div foo="baz">foo</div>`); 109 109 - 110 110 - morph(a, b); 111 111 - 112 112 - expect(a.outerHTML).to.equal(b.outerHTML); 113 113 - }); 114 114 - 115 115 - // adapted from: https://github.com/choojs/nanomorph/blob/b8088d03b1113bddabff8aa0e44bd8db88d023c7/test/diff.js 116 116 - describe("root level", () => { 117 117 - it("should replace a node", async () => { 118 118 - const a = await fixture(html`<p>hello world</p>`); 119 119 - const b = await fixture(html`<div>hello world</div>`); 120 120 - 121 121 - morph(a, b); 122 122 - 123 123 - expect(a.outerHTML).to.equal(b.outerHTML); 124 124 - }); 125 125 - 126 126 - it("should replace a component", async () => { 127 127 - const a = await fixture(html`<div data-nanomorph-component-id="a">hello world</div>`); 128 128 - const b = await fixture(html`<div data-nanomorph-component-id="b">bye moon</div>`); 129 129 - 130 130 - morph(a, b); 131 131 - 132 132 - expect(a.outerHTML).to.equal(b.outerHTML); 133 133 - }); 134 134 - 135 135 - it("should morph a node", async () => { 136 136 - const a = await fixture(html`<p>hello world</p>`); 137 137 - const b = await fixture(html`<p>hello you</p>`); 138 138 - 139 139 - morph(a, b); 140 140 - 141 141 - expect(a.outerHTML).to.equal(b.outerHTML); 142 142 - }); 143 143 - 144 144 - it("should morph a node with namespaced attribute", async () => { 145 145 - const a = await fixture(html`<svg><use xlink:href="#heybooboo"></use></svg>`); 146 146 - const b = await fixture(html`<svg><use xlink:href="#boobear"></use></svg>`); 147 147 - 148 148 - morph(a, b); 149 149 - 150 150 - expect(a.outerHTML).to.equal(b.outerHTML); 151 151 - }); 152 152 - 153 153 - it("should ignore if node is same", async () => { 154 154 - const a = await fixture(html`<p>hello world</p>`); 155 155 - 156 156 - morph(a, a); 157 157 - 158 158 - expect(a.outerHTML).to.equal(a.outerHTML); 159 159 - }); 160 160 - }); 161 161 - 162 162 - describe("nested", () => { 163 163 - it("should replace a node", async () => { 164 164 - const a = await fixture(html`<main><p>hello world</p></main>`); 165 165 - const b = await fixture(html`<main><div>hello world</div></main>`); 166 166 - 167 167 - morph(a, b); 168 168 - 169 169 - expect(a.outerHTML).to.equal(b.outerHTML); 170 170 - }); 171 171 - 172 172 - it("should replace a node", async () => { 173 173 - const a = await fixture(html`<main><p>hello world</p></main>`); 174 174 - const b = await fixture(html`<main><p>hello you</p></main>`); 175 175 - 176 176 - morph(a, b); 177 177 - 178 178 - expect(a.outerHTML).to.equal(b.outerHTML); 179 179 - }); 180 180 - 181 181 - it("should replace a node", async () => { 182 182 - const a = await fixture(html`<main><p>hello world</p></main>`); 183 183 - 184 184 - morph(a, a); 185 185 - 186 186 - expect(a.outerHTML).to.equal(a.outerHTML); 187 187 - }); 188 188 - 189 189 - it("should append a node", async () => { 190 190 - const a = await fixture(html`<main></main>`); 191 191 - const b = await fixture(html`<main><p>hello you</p></main>`); 192 192 - 193 193 - morph(a, b); 194 194 - 195 195 - expect(a.outerHTML).to.equal(b.outerHTML); 196 196 - }); 197 197 - 198 198 - it("should remove a node", async () => { 199 199 - const a = await fixture(html`<main><p>hello you</p></main>`); 200 200 - const b = await fixture(html`<main></main>`); 201 201 - 202 202 - morph(a, b); 203 203 - 204 204 - expect(a.outerHTML).to.equal(b.outerHTML); 205 205 - }); 206 206 - 207 207 - it.skip("should update child nodes", async () => { 208 208 - const a = await fixture(html`<main><p>hello world</p></main>`); 209 209 - const b = await fixture(html`<section><p>hello you</p></section>`); 210 210 - 211 211 - morph(a, b, { childrenOnly: true }); 212 212 - 213 213 - expect(a.outerHTML).to.equal("<main><p>hello you</p></main>"); 214 214 - }); 215 215 - }); 216 216 - 217 217 - describe("values", () => { 218 218 - it("if new tree has no value and old tree does, remove value", async () => { 219 219 - const a = await fixture(html`<input type="text" value="howdy" />`); 220 220 - const b = await fixture(html`<input type="text" />`); 221 221 - 222 222 - morph(a, b); 223 223 - 224 224 - expect(a.outerHTML).to.equal(b.outerHTML); 225 225 - expect(a.getAttribute("value")).to.equal(null); 226 226 - expect(a.value).to.equal(""); 227 227 - }); 228 228 - 229 229 - it("if new tree has null value and old tree does, remove value", async () => { 230 230 - const a = await fixture(html`<input type="text" value="howdy" />`); 231 231 - const b = await fixture(html`<input type="text" value=${null} />`); 232 232 - 233 233 - morph(a, b); 234 234 - 235 235 - expect(a.outerHTML).to.equal(b.outerHTML); 236 236 - expect(a.getAttribute("value")).to.equal(null); 237 237 - expect(a.value).to.equal(""); 238 238 - }); 239 239 - 240 240 - it("if new tree has value in HTML and old tree does too, set value from new tree", async () => { 241 241 - const a = await fixture(html`<input type="text" value="howdy" />`); 242 242 - const b = await fixture(html`<input type="text" value="hi" />`); 243 243 - 244 244 - morph(a, b); 245 245 - 246 246 - expect(a.outerHTML).to.equal(b.outerHTML); 247 247 - expect(a.value).to.equal("hi"); 248 248 - }); 249 249 - 250 250 - it("if new tree has value from mutation and old tree does too, set value from new tree", async () => { 251 251 - const a = await fixture(html`<input type="text" />`); 252 252 - a.value = "howdy"; 253 253 - const b = await fixture(html`<input type="text" />`); 254 254 - b.value = "hi"; 255 255 - 256 256 - morph(a, b); 257 257 - 258 258 - expect(a.outerHTML).to.equal(b.outerHTML); 259 259 - expect(a.value).to.equal("hi"); 260 260 - }); 261 261 - 262 262 - it("if new tree has value in HTML and old tree does from mutation, set value from new tree", async () => { 263 263 - const a = await fixture(html`<input type="text" value="howdy" />`); 264 264 - const b = await fixture(html`<input type="text" />`); 265 265 - b.value = "hi"; 266 266 - 267 267 - morph(a, b); 268 268 - 269 269 - expect(a.outerHTML).to.equal(b.outerHTML); 270 270 - expect(a.value).to.equal("hi"); 271 271 - }); 272 272 - 273 273 - it("if new tree has value from mutation and old tree does in HTML, set value from new tree", async () => { 274 274 - const a = await fixture(html`<input type="text" value="howdy" />`); 275 275 - a.value = "howdy"; 276 276 - const b = await fixture(html`<input type="text" value="hi" />`); 277 277 - 278 278 - morph(a, b); 279 279 - 280 280 - expect(a.outerHTML).to.equal(b.outerHTML); 281 281 - expect(a.value).to.equal("hi"); 282 282 - }); 283 283 - }); 284 284 - 285 285 - describe("boolean properties", () => { 286 286 - describe("checked", () => { 287 287 - it("if new tree has no checked and old tree does, remove value", async () => { 288 288 - const a = await fixture(html`<input type="checkbox" checked=${true} />`); 289 289 - const b = await fixture(html`<input type="checkbox" />`); 290 290 - 291 291 - morph(a, b); 292 292 - 293 293 - expect(a.outerHTML).to.equal(b.outerHTML); 294 294 - expect(a.checked).to.equal(false); 295 295 - }); 296 296 - 297 297 - it("if new tree has checked and old tree does not, add value", async () => { 298 298 - const a = await fixture(html`<input type="checkbox" />`); 299 299 - const b = await fixture(html`<input type="checkbox" checked=${true} />`); 300 300 - 301 301 - morph(a, b); 302 302 - 303 303 - expect(a.outerHTML).to.equal(b.outerHTML); 304 304 - expect(a.checked).to.equal(true); 305 305 - }); 306 306 - 307 307 - it("if new tree has checked=false and old tree has checked=true, set value from new tree", async () => { 308 308 - const a = await fixture(html`<input type="checkbox" checked=${false} />`); 309 309 - const b = await fixture(html`<input type="checkbox" checked=${true} />`); 310 310 - 311 311 - morph(a, b); 312 312 - 313 313 - expect(a.outerHTML).to.equal(b.outerHTML); 314 314 - expect(a.checked).to.equal(true); 315 315 - }); 316 316 - 317 317 - it("if new tree has checked=true and old tree has checked=false, set value from new tree", async () => { 318 318 - const a = await fixture(html`<input type="checkbox" checked=${true} />`); 319 319 - const b = await fixture(html`<input type="checkbox" checked=${false} />`); 320 320 - 321 321 - morph(a, b); 322 322 - 323 323 - expect(a.outerHTML).to.equal(b.outerHTML); 324 324 - expect(a.checked).to.equal(false); 325 325 - }); 326 326 - 327 327 - it("if new tree has no checked and old tree has checked mutated to true, set value from new tree", async () => { 328 328 - const a = await fixture(html`<input type="checkbox" />`); 329 329 - const b = await fixture(html`<input type="checkbox" />`); 330 330 - b.checked = true; 331 331 - 332 332 - morph(a, b); 333 333 - 334 334 - expect(a.outerHTML).to.equal(b.outerHTML); 335 335 - expect(a.checked).to.equal(true); 336 336 - }); 337 337 - 338 338 - it("if new tree has checked=false and old tree has checked mutated to true, set value from new tree", async () => { 339 339 - const a = await fixture(html`<input type="checkbox" checked=${false} />`); 340 340 - const b = await fixture(html`<input type="checkbox" />`); 341 341 - b.checked = true; 342 342 - 343 343 - morph(a, b); 344 344 - 345 345 - expect(a.outerHTML).to.equal(b.outerHTML); 346 346 - expect(a.checked).to.equal(true); 347 347 - }); 348 348 - 349 349 - it("if new tree has checked=true and old tree has checked mutated to false, set value from new tree", async () => { 350 350 - const a = await fixture(html`<input type="checkbox" checked=${true} />`); 351 351 - const b = await fixture(html`<input type="checkbox" />`); 352 352 - b.checked = false; 353 353 - 354 354 - morph(a, b); 355 355 - 356 356 - expect(a.outerHTML).to.equal(b.outerHTML); 357 357 - expect(a.checked).to.equal(false); 358 358 - }); 359 359 - 360 360 - it("if new tree has no checked and old tree has checked=true, set value from new tree", async () => { 361 361 - const a = await fixture(html`<input type="checkbox" />`); 362 362 - const b = await fixture(html`<input type="checkbox" checked=${true} />`); 363 363 - 364 364 - morph(a, b); 365 365 - 366 366 - expect(a.outerHTML).to.equal(b.outerHTML); 367 367 - expect(a.checked).to.equal(true); 368 368 - }); 369 369 - }); 370 370 - 371 371 - describe("disabled", () => { 372 372 - it("if new tree has no disabled and old tree does, remove value", async () => { 373 373 - const a = await fixture(html`<input type="checkbox" disabled=${true} />`); 374 374 - const b = await fixture(html`<input type="checkbox" />`); 375 375 - 376 376 - morph(a, b); 377 377 - 378 378 - expect(a.outerHTML).to.equal(b.outerHTML); 379 379 - expect(a.disabled).to.equal(false); 380 380 - }); 381 381 - 382 382 - it("if new tree has disabled and old tree does not, add value", async () => { 383 383 - const a = await fixture(html`<input type="checkbox" />`); 384 384 - const b = await fixture(html`<input type="checkbox" disabled=${true} />`); 385 385 - 386 386 - morph(a, b); 387 387 - 388 388 - expect(a.outerHTML).to.equal(b.outerHTML); 389 389 - expect(a.disabled).to.equal(true); 390 390 - }); 391 391 - 392 392 - it("if new tree has disabled=false and old tree has disabled=true, set value from new tree", async () => { 393 393 - const a = await fixture(html`<input type="checkbox" disabled=${false} />`); 394 394 - const b = await fixture(html`<input type="checkbox" disabled=${true} />`); 395 395 - 396 396 - morph(a, b); 397 397 - 398 398 - expect(a.outerHTML).to.equal(b.outerHTML); 399 399 - expect(a.disabled).to.equal(true); 400 400 - }); 401 401 - 402 402 - it("if new tree has disabled=true and old tree has disabled=false, set value from new tree", async () => { 403 403 - const a = await fixture(html`<input type="checkbox" disabled=${true} />`); 404 404 - const b = await fixture(html`<input type="checkbox" disabled=${false} />`); 405 405 - 406 406 - morph(a, b); 407 407 - 408 408 - expect(a.outerHTML).to.equal(b.outerHTML); 409 409 - expect(a.disabled).to.equal(false); 410 410 - }); 411 411 - 412 412 - it("if new tree has no disabled and old tree has disabled mutated to true, set value from new tree", async () => { 413 413 - const a = await fixture(html`<input type="checkbox" />`); 414 414 - const b = await fixture(html`<input type="checkbox" />`); 415 415 - b.disabled = true; 416 416 - 417 417 - morph(a, b); 418 418 - 419 419 - expect(a.outerHTML).to.equal(b.outerHTML); 420 420 - expect(a.disabled).to.equal(true); 421 421 - }); 422 422 - 423 423 - it("if new tree has disabled=false and old tree has disabled mutated to true, set value from new tree", async () => { 424 424 - const a = await fixture(html`<input type="checkbox" disabled=${false} />`); 425 425 - const b = await fixture(html`<input type="checkbox" />`); 426 426 - b.disabled = true; 427 427 - 428 428 - morph(a, b); 429 429 - 430 430 - expect(a.outerHTML).to.equal(b.outerHTML); 431 431 - expect(a.disabled).to.equal(true); 432 432 - }); 433 433 - 434 434 - it("if new tree has disabled=true and old tree has disabled mutated to false, set value from new tree", async () => { 435 435 - const a = await fixture(html`<input type="checkbox" disabled=${true} />`); 436 436 - const b = await fixture(html`<input type="checkbox" />`); 437 437 - b.disabled = false; 438 438 - 439 439 - morph(a, b); 440 440 - 441 441 - expect(a.outerHTML).to.equal(b.outerHTML); 442 442 - expect(a.disabled).to.equal(false); 443 443 - }); 444 444 - 445 445 - it("if new tree has no disabled and old tree has disabled=true, set value from new tree", async () => { 446 446 - const a = await fixture(html`<input type="checkbox" />`); 447 447 - const b = await fixture(html`<input type="checkbox" disabled=${true} />`); 448 448 - 449 449 - morph(a, b); 450 450 - 451 451 - expect(a.outerHTML).to.equal(b.outerHTML); 452 452 - expect(a.disabled).to.equal(true); 453 453 - }); 454 454 - }); 455 455 - 456 456 - describe("indeterminate", () => { 457 457 - it("if new tree has no indeterminate and old tree has indeterminate mutated to true, set value from new tree", async () => { 458 458 - const a = await fixture(html`<input type="checkbox" />`); 459 459 - const b = await fixture(html`<input type="checkbox" />`); 460 460 - b.indeterminate = true; 461 461 - 462 462 - morph(a, b); 463 463 - 464 464 - expect(a.outerHTML).to.equal(b.outerHTML); 465 465 - expect(a.indeterminate).to.equal(true); 466 466 - }); 467 467 - 468 468 - it("if new tree has no indeterminate and old tree has indeterminate mutated to false, set value from new tree", async () => { 469 469 - const a = await fixture(html`<input type="checkbox" />`); 470 470 - const b = await fixture(html`<input type="checkbox" />`); 471 471 - b.indeterminate = false; 472 472 - 473 473 - morph(a, b); 474 474 - 475 475 - expect(a.outerHTML).to.equal(b.outerHTML); 476 476 - expect(a.indeterminate).to.equal(false); 477 477 - }); 478 478 - }); 479 479 - }); 480 480 - 481 481 - describe("lists", () => { 482 482 - it("should append nodes", async () => { 483 483 - const a = await fixture(html`<ul></ul>`); 484 484 - const b = await fixture( 485 485 - html`<ul> 486 486 - <li>1</li> 487 487 - <li>2</li> 488 488 - <li>3</li> 489 489 - <li>4</li> 490 490 - <li>5</li> 491 491 - </ul>`, 492 492 - ); 493 493 - 494 494 - morph(a, b); 495 495 - 496 496 - expect(a.outerHTML).to.equal(b.outerHTML); 497 497 - }); 498 498 - 499 499 - it("should remove nodes", async () => { 500 500 - const a = await fixture( 501 501 - html`<ul> 502 502 - <li>1</li> 503 503 - <li>2</li> 504 504 - <li>3</li> 505 505 - <li>4</li> 506 506 - <li>5</li> 507 507 - </ul>`, 508 508 - ); 509 509 - const b = await fixture(html`<ul></ul>`); 510 510 - 511 511 - morph(a, b); 512 512 - 513 513 - expect(a.outerHTML).to.equal(b.outerHTML); 514 514 - }); 515 515 - }); 516 516 - 517 517 - describe("selectables", () => { 518 518 - it('should append nodes', async () => { 519 519 - const a = await fixture(html`<select></select>`); 520 520 - const b = await fixture(html`<select><option>1</option><option>2</option><option>3</option><option>4</option></select>`); 521 521 - 522 522 - morph(a, b); 523 523 - 524 524 - expect(a.outerHTML).to.equal(b.outerHTML); 525 525 - }); 526 526 - 527 527 - it('should append nodes (including optgroups)', async () => { 528 528 - const a = await fixture(html`<select></select>`); 529 529 - const b = await fixture(html`<select><optgroup><option>1</option><option>2</option></optgroup><option>3</option><option>4</option></select>`); 530 530 - 531 531 - morph(a, b); 532 532 - 533 533 - expect(a.outerHTML).to.equal(b.outerHTML); 534 534 - }); 535 535 - 536 536 - it('should remove nodes', async () => { 537 537 - const a = await fixture(html`<select><option>1</option><option>2</option><option>3</option><option>4</option></select>`); 538 538 - const b = await fixture(html`<select></select>`); 539 539 - 540 540 - morph(a, b); 541 541 - 542 542 - expect(a.outerHTML).to.equal(b.outerHTML); 543 543 - }); 544 544 - 545 545 - it('should remove nodes (including optgroups)', async () => { 546 546 - const a = await fixture(html`<select><optgroup><option>1</option><option>2</option></optgroup><option>3</option><option>4</option></select>`); 547 547 - const b = await fixture(html`<select></select>`); 548 548 - 549 549 - morph(a, b); 550 550 - 551 551 - expect(a.outerHTML).to.equal(b.outerHTML); 552 552 - }); 553 553 - 554 554 - it('should add selected', async () => { 555 555 - const a = await fixture(html`<select><option>1</option><option>2</option></select>`); 556 556 - const b = await fixture(html`<select><option>1</option><option selected>2</option></select>`); 557 557 - 558 558 - morph(a, b); 559 559 - 560 560 - expect(a.outerHTML).to.equal(b.outerHTML); 561 561 - }); 562 562 - 563 563 - it('should add selected (xhtml)', async () => { 564 564 - const a = await fixture(html`<select><option>1</option><option>2</option></select>`); 565 565 - const b = await fixture(html`<select><option>1</option><option selected="selected">2</option></select>`); 566 566 - 567 567 - morph(a, b); 568 568 - 569 569 - expect(a.outerHTML).to.equal(b.outerHTML); 570 570 - }); 571 571 - 572 572 - it('should switch selected', async () => { 573 573 - const a = await fixture(html`<select><option selected="selected">1</option><option>2</option></select>`); 574 574 - const b = await fixture(html`<select><option>1</option><option selected="selected">2</option></select>`); 575 575 - 576 576 - morph(a, b); 577 577 - 578 578 - expect(a.outerHTML).to.equal(b.outerHTML); 579 579 - }); 580 580 - }); 581 581 - 582 582 - it("should replace nodes", async () => { 583 583 - const a = await fixture(html`<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>`); 584 584 - const b = await fixture(html`<ul><div>1</div><li>2</li><p>3</p><li>4</li><li>5</li></ul>`); 585 585 - 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>`); 593 593 - const b = await fixture(html`<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>`); 594 594 - 595 595 - morph(a, b); 596 596 - 597 597 - expect(a.outerHTML).to.equal(b.outerHTML); 598 598 - 599 599 - const c = await fixture(html`<ul><div>1</div><li>2</li><p>3</p><li>4</li><li>5</li></ul>`); 600 600 - 601 601 - morph(a, c); 602 602 - 603 603 - expect(a.outerHTML).to.equal(c.outerHTML); 604 604 - }); 605 605 - 606 606 - describe('use id as a key hint', () => { 607 607 - it('appends an element', async () => { 608 608 - const a = await fixture(html`<ul> 609 609 - <li id="a"></li> 610 610 - <li id="b"></li> 611 611 - <li id="c"></li> 612 612 - </ul>`); 613 613 - const b = await fixture(html`<ul> 614 614 - <li id="a"></li> 615 615 - <li id="new"></li> 616 616 - <li id="b"></li> 617 617 - <li id="c"></li> 618 618 - </ul>`); 619 619 - 620 620 - const oldFirst = a.children[0]; 621 621 - const oldSecond = a.children[1]; 622 622 - const oldThird = a.children[2]; 623 623 - 624 624 - morph(a, b); 625 625 - 626 626 - expect(a.outerHTML).to.equal(b.outerHTML); 627 627 - expect(a.children[0]).to.equal(oldFirst); 628 628 - expect(a.children[1]).to.equal(oldSecond); 629 629 - expect(a.children[2]).to.equal(oldThird); 630 630 - }); 631 631 - 632 632 - it('handles non-id elements', async () => { 633 633 - const a = await fixture(html`<ul> 634 634 - <li></li> 635 635 - <li id="a"></li> 636 636 - <li id="b"></li> 637 637 - <li id="c"></li> 638 638 - <li></li> 639 639 - </ul>`); 640 640 - const b = await fixture(html`<ul> 641 641 - <li></li> 642 642 - <li id="a"></li> 643 643 - <li id="new"></li> 644 644 - <li id="b"></li> 645 645 - <li id="c"></li> 646 646 - <li></li> 647 647 - </ul>`); 648 648 - 649 649 - const oldSecond = a.children[1]; 650 650 - const oldThird = a.children[2]; 651 651 - const oldFourth = a.children[3]; 652 652 - 653 653 - morph(a, b); 654 654 - 655 655 - expect(a.outerHTML).to.equal(b.outerHTML); 656 656 - expect(a.children[1]).to.equal(oldSecond); 657 657 - expect(a.children[3]).to.equal(oldThird); 658 658 - expect(a.children[4]).to.equal(oldFourth); 659 659 - }); 660 660 - 661 661 - it('copies over children', async () => { 662 662 - const a = await fixture(html`<section>'hello'<section>`); 663 663 - const b = await fixture(html`<section><div></div><section>`); 664 664 - 665 665 - morph(a, b); 666 666 - 667 667 - expect(a.outerHTML).to.equal(b.outerHTML); 668 668 - }) 669 669 - 670 670 - it('removes an element', async () => { 671 671 - const a = await fixture(html`<ul><li id="a"></li><li id="b"></li><li id="c"></li></ul>`); 672 672 - const b = await fixture(html`<ul><li id="a"></li><li id="c"></li></ul>`); 673 673 - 674 674 - const oldFirst = a.children[0]; 675 675 - const oldThird = a.children[2]; 676 676 - 677 677 - morph(a, b); 678 678 - 679 679 - expect(a.outerHTML).to.equal(b.outerHTML); 680 680 - expect(a.children[0]).to.equal(oldFirst); 681 681 - expect(a.children[1]).to.equal(oldThird); 682 682 - }) 683 683 - 684 684 - it('id match still morphs', async () => { 685 685 - const a = await fixture(html`<li id="12">FOO</li>`); 686 686 - const b = await fixture(html`<li id="12">BAR</li>`); 687 687 - 688 688 - morph(a, b); 689 689 - 690 690 - expect(a.outerHTML).to.equal(b.outerHTML); 691 691 - }) 692 692 - 693 693 - it('removes orphaned keyed nodes', async () => { 694 694 - const a = await fixture(html` 695 695 - <div> 696 696 - <div>1</div> 697 697 - <li id="a">a</li> 698 698 - </div> 699 699 - `); 700 700 - const b = await fixture(html` 701 701 - <div> 702 702 - <div>2</div> 703 703 - <li id="b">b</li> 704 704 - </div> 705 705 - `); 706 706 - 707 707 - morph(a, b); 708 708 - 709 709 - expect(a.outerHTML).to.equal(b.outerHTML); 710 710 - }) 711 711 - 712 712 - it('whitespace', async () => { 713 713 - const a = await fixture(html`<ul> </ul>`); 714 714 - const b = await fixture(html`<ul><li></li><li></li> </ul>`); 715 715 - 716 716 - morph(a, b); 717 717 - 718 718 - expect(a.outerHTML).to.equal(b.outerHTML); 719 719 - }) 720 720 - }); 721 721 - 722 722 - it('allows morphing from Node to NodeList', async () => { 723 723 - const a = await fixture(html`<div><div>a</div></div>`); 724 724 - const b = await fixture(html`<div>a</div><div>b</div>`); 725 725 - 726 726 - morph(a, b); 727 727 - 728 728 - expect(a.outerHTML).to.equal(b.outerHTML); 729 729 - }) 730 730 - 731 731 - it('allows morphing from NodeList to Node', async () => { 732 732 - const a = await fixture(html`<div>a</div><div>b</div>`); 733 733 - const b = await fixture(html`<div><div>a</div></div>`); 734 734 - 735 735 - morph(a, b); 736 736 - 737 737 - expect(a.outerHTML).to.equal(b.outerHTML); 738 738 - }) 739 739 - 740 740 - it('allows morphing from NodeList to NodeList', async () => { 741 741 - const a = await fixture(html`<div>a</div><div>b</div>`); 742 742 - const b = await fixture(html`<div>z</div><div>y</div>`); 743 743 - 744 744 - morph(a, b); 745 745 - 746 746 - expect(a.outerHTML).to.equal(b.outerHTML); 747 747 - }) 748 748 - 749 749 - it('allows morphing from Node to Node', async () => { 750 750 - const a = await fixture(html`<div><div>a</div></div>`); 751 751 - const b = await fixture(html`<div><div>b</div></div>`); 752 752 - 753 753 - morph(a, b); 754 754 - 755 755 - expect(a.outerHTML).to.equal(b.outerHTML); 756 756 - }) 757 40 });