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.

Add iframe test

Joel Drapper e828486d ec572fcd

+52 -23
-1
src/morphlite.ts
··· 47 47 else if (childB) from.appendChild(childB.cloneNode(true)); 48 48 } 49 49 50 - console.log("Got here ", from.childNodes.length, to.childNodes.length, from.childNodes[0]); 51 50 while (from.childNodes.length > to.childNodes.length) from.lastChild?.remove(); 52 51 } 53 52
+52 -22
test/something.test.js
··· 2 2 import { morph } from "../"; 3 3 4 4 describe("my-test", () => { 5 + it("supports nodes from iframes", async () => { 6 + const iframe = await fixture(html`<iframe></iframe>`); 7 + const a = await fixture(html`<h1>Hello World</h1>`); 8 + const b = iframe.contentDocument.createElement("h1"); 9 + 10 + b.textContent = "Hello Joel"; 11 + 12 + iframe.contentDocument.body.appendChild(b); 13 + 14 + morph(a, iframe.contentDocument?.body.children[0]); 15 + 16 + expect(a.textContent).to.equal("Hello Joel"); 17 + }); 18 + 5 19 it("add text content", async () => { 6 20 const a = await fixture(html`<h1></h1>`); 7 21 const b = await fixture(html`<h1>Hello</h1>`); ··· 274 288 const a = await fixture(html`<input type="checkbox" checked=${true} />`); 275 289 const b = await fixture(html`<input type="checkbox" />`); 276 290 277 - morph(a, b); 291 + morph(a, b); 278 292 279 293 expect(a.outerHTML).to.equal(b.outerHTML); 280 294 expect(a.checked).to.equal(false); ··· 284 298 const a = await fixture(html`<input type="checkbox" />`); 285 299 const b = await fixture(html`<input type="checkbox" checked=${true} />`); 286 300 287 - morph(a, b); 301 + morph(a, b); 288 302 289 303 expect(a.outerHTML).to.equal(b.outerHTML); 290 304 expect(a.checked).to.equal(true); ··· 294 308 const a = await fixture(html`<input type="checkbox" checked=${false} />`); 295 309 const b = await fixture(html`<input type="checkbox" checked=${true} />`); 296 310 297 - morph(a, b); 311 + morph(a, b); 298 312 299 313 expect(a.outerHTML).to.equal(b.outerHTML); 300 314 expect(a.checked).to.equal(true); ··· 304 318 const a = await fixture(html`<input type="checkbox" checked=${true} />`); 305 319 const b = await fixture(html`<input type="checkbox" checked=${false} />`); 306 320 307 - morph(a, b); 321 + morph(a, b); 308 322 309 323 expect(a.outerHTML).to.equal(b.outerHTML); 310 324 expect(a.checked).to.equal(false); ··· 315 329 const b = await fixture(html`<input type="checkbox" />`); 316 330 b.checked = true; 317 331 318 - morph(a, b); 332 + morph(a, b); 319 333 320 334 expect(a.outerHTML).to.equal(b.outerHTML); 321 335 expect(a.checked).to.equal(true); ··· 326 340 const b = await fixture(html`<input type="checkbox" />`); 327 341 b.checked = true; 328 342 329 - morph(a, b); 343 + morph(a, b); 330 344 331 345 expect(a.outerHTML).to.equal(b.outerHTML); 332 346 expect(a.checked).to.equal(true); ··· 337 351 const b = await fixture(html`<input type="checkbox" />`); 338 352 b.checked = false; 339 353 340 - morph(a, b); 354 + morph(a, b); 341 355 342 356 expect(a.outerHTML).to.equal(b.outerHTML); 343 357 expect(a.checked).to.equal(false); ··· 347 361 const a = await fixture(html`<input type="checkbox" />`); 348 362 const b = await fixture(html`<input type="checkbox" checked=${true} />`); 349 363 350 - morph(a, b); 364 + morph(a, b); 351 365 352 366 expect(a.outerHTML).to.equal(b.outerHTML); 353 367 expect(a.checked).to.equal(true); ··· 359 373 const a = await fixture(html`<input type="checkbox" disabled=${true} />`); 360 374 const b = await fixture(html`<input type="checkbox" />`); 361 375 362 - morph(a, b); 376 + morph(a, b); 363 377 364 378 expect(a.outerHTML).to.equal(b.outerHTML); 365 379 expect(a.disabled).to.equal(false); ··· 369 383 const a = await fixture(html`<input type="checkbox" />`); 370 384 const b = await fixture(html`<input type="checkbox" disabled=${true} />`); 371 385 372 - morph(a, b); 386 + morph(a, b); 373 387 374 388 expect(a.outerHTML).to.equal(b.outerHTML); 375 389 expect(a.disabled).to.equal(true); ··· 379 393 const a = await fixture(html`<input type="checkbox" disabled=${false} />`); 380 394 const b = await fixture(html`<input type="checkbox" disabled=${true} />`); 381 395 382 - morph(a, b); 396 + morph(a, b); 383 397 384 398 expect(a.outerHTML).to.equal(b.outerHTML); 385 399 expect(a.disabled).to.equal(true); ··· 389 403 const a = await fixture(html`<input type="checkbox" disabled=${true} />`); 390 404 const b = await fixture(html`<input type="checkbox" disabled=${false} />`); 391 405 392 - morph(a, b); 406 + morph(a, b); 393 407 394 408 expect(a.outerHTML).to.equal(b.outerHTML); 395 409 expect(a.disabled).to.equal(false); ··· 400 414 const b = await fixture(html`<input type="checkbox" />`); 401 415 b.disabled = true; 402 416 403 - morph(a, b); 417 + morph(a, b); 404 418 405 419 expect(a.outerHTML).to.equal(b.outerHTML); 406 420 expect(a.disabled).to.equal(true); ··· 411 425 const b = await fixture(html`<input type="checkbox" />`); 412 426 b.disabled = true; 413 427 414 - morph(a, b); 428 + morph(a, b); 415 429 416 430 expect(a.outerHTML).to.equal(b.outerHTML); 417 431 expect(a.disabled).to.equal(true); ··· 422 436 const b = await fixture(html`<input type="checkbox" />`); 423 437 b.disabled = false; 424 438 425 - morph(a, b); 439 + morph(a, b); 426 440 427 441 expect(a.outerHTML).to.equal(b.outerHTML); 428 442 expect(a.disabled).to.equal(false); ··· 432 446 const a = await fixture(html`<input type="checkbox" />`); 433 447 const b = await fixture(html`<input type="checkbox" disabled=${true} />`); 434 448 435 - morph(a, b); 449 + morph(a, b); 436 450 437 451 expect(a.outerHTML).to.equal(b.outerHTML); 438 452 expect(a.disabled).to.equal(true); 439 453 }); 440 454 }); 441 455 442 - describe('indeterminate', () => { 456 + describe("indeterminate", () => { 443 457 it("if new tree has no indeterminate and old tree has indeterminate mutated to true, set value from new tree", async () => { 444 458 const a = await fixture(html`<input type="checkbox" />`); 445 459 const b = await fixture(html`<input type="checkbox" />`); 446 460 b.indeterminate = true; 447 461 448 - morph(a, b); 462 + morph(a, b); 449 463 450 464 expect(a.outerHTML).to.equal(b.outerHTML); 451 465 expect(a.indeterminate).to.equal(true); ··· 456 470 const b = await fixture(html`<input type="checkbox" />`); 457 471 b.indeterminate = false; 458 472 459 - morph(a, b); 473 + morph(a, b); 460 474 461 475 expect(a.outerHTML).to.equal(b.outerHTML); 462 476 expect(a.indeterminate).to.equal(false); 463 477 }); 464 - }) 478 + }); 465 479 }); 466 480 467 481 describe("lists", () => { 468 482 it("should append nodes", async () => { 469 483 const a = await fixture(html`<ul></ul>`); 470 - const b = await fixture(html`<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>`); 484 + const b = await fixture( 485 + html`<ul> 486 + <li>1</li> 487 + <li>2</li> 488 + <li>3</li> 489 + <li>4</li> 490 + <li>5</li> 491 + </ul>`, 492 + ); 471 493 472 494 morph(a, b); 473 495 ··· 475 497 }); 476 498 477 499 it("should remove nodes", async () => { 478 - const a = await fixture(html`<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>`); 500 + const a = await fixture( 501 + html`<ul> 502 + <li>1</li> 503 + <li>2</li> 504 + <li>3</li> 505 + <li>4</li> 506 + <li>5</li> 507 + </ul>`, 508 + ); 479 509 const b = await fixture(html`<ul></ul>`); 480 510 481 511 morph(a, b);