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 more nanomorph test cases

Stephen Margheim 306ebb75 4c6f379a

+172
+172
test/something.test.js
··· 267 267 expect(a.value).to.equal("hi"); 268 268 }); 269 269 }); 270 + 271 + describe("boolean properties", () => { 272 + describe("checked", () => { 273 + it("if new tree has no checked and old tree does, remove value", async () => { 274 + const a = await fixture(html`<input type="checkbox" checked=${true} />`); 275 + const b = await fixture(html`<input type="checkbox" />`); 276 + 277 + morph(a, b); 278 + 279 + expect(a.outerHTML).to.equal(b.outerHTML); 280 + expect(a.checked).to.equal(false); 281 + }); 282 + 283 + it("if new tree has checked and old tree does not, add value", async () => { 284 + const a = await fixture(html`<input type="checkbox" />`); 285 + const b = await fixture(html`<input type="checkbox" checked=${true} />`); 286 + 287 + morph(a, b); 288 + 289 + expect(a.outerHTML).to.equal(b.outerHTML); 290 + expect(a.checked).to.equal(true); 291 + }); 292 + 293 + it("if new tree has checked=false and old tree has checked=true, set value from new tree", async () => { 294 + const a = await fixture(html`<input type="checkbox" checked=${false} />`); 295 + const b = await fixture(html`<input type="checkbox" checked=${true} />`); 296 + 297 + morph(a, b); 298 + 299 + expect(a.outerHTML).to.equal(b.outerHTML); 300 + expect(a.checked).to.equal(true); 301 + }); 302 + 303 + it("if new tree has checked=true and old tree has checked=false, set value from new tree", async () => { 304 + const a = await fixture(html`<input type="checkbox" checked=${true} />`); 305 + const b = await fixture(html`<input type="checkbox" checked=${false} />`); 306 + 307 + morph(a, b); 308 + 309 + expect(a.outerHTML).to.equal(b.outerHTML); 310 + expect(a.checked).to.equal(false); 311 + }); 312 + 313 + it("if new tree has no checked and old tree has checked mutated to true, set value from new tree", async () => { 314 + const a = await fixture(html`<input type="checkbox" />`); 315 + const b = await fixture(html`<input type="checkbox" />`); 316 + b.checked = true; 317 + 318 + morph(a, b); 319 + 320 + expect(a.outerHTML).to.equal(b.outerHTML); 321 + expect(a.checked).to.equal(true); 322 + }); 323 + 324 + it("if new tree has checked=false and old tree has checked mutated to true, set value from new tree", async () => { 325 + const a = await fixture(html`<input type="checkbox" checked=${false} />`); 326 + const b = await fixture(html`<input type="checkbox" />`); 327 + b.checked = true; 328 + 329 + morph(a, b); 330 + 331 + expect(a.outerHTML).to.equal(b.outerHTML); 332 + expect(a.checked).to.equal(true); 333 + }); 334 + 335 + it("if new tree has checked=true and old tree has checked mutated to false, set value from new tree", async () => { 336 + const a = await fixture(html`<input type="checkbox" checked=${true} />`); 337 + const b = await fixture(html`<input type="checkbox" />`); 338 + b.checked = false; 339 + 340 + morph(a, b); 341 + 342 + expect(a.outerHTML).to.equal(b.outerHTML); 343 + expect(a.checked).to.equal(false); 344 + }); 345 + 346 + it("if new tree has no checked and old tree has checked=true, set value from new tree", async () => { 347 + const a = await fixture(html`<input type="checkbox" />`); 348 + const b = await fixture(html`<input type="checkbox" checked=${true} />`); 349 + 350 + morph(a, b); 351 + 352 + expect(a.outerHTML).to.equal(b.outerHTML); 353 + expect(a.checked).to.equal(true); 354 + }); 355 + }); 356 + 357 + describe("disabled", () => { 358 + it("if new tree has no disabled and old tree does, remove value", async () => { 359 + const a = await fixture(html`<input type="checkbox" disabled=${true} />`); 360 + const b = await fixture(html`<input type="checkbox" />`); 361 + 362 + morph(a, b); 363 + 364 + expect(a.outerHTML).to.equal(b.outerHTML); 365 + expect(a.disabled).to.equal(false); 366 + }); 367 + 368 + it("if new tree has disabled and old tree does not, add value", async () => { 369 + const a = await fixture(html`<input type="checkbox" />`); 370 + const b = await fixture(html`<input type="checkbox" disabled=${true} />`); 371 + 372 + morph(a, b); 373 + 374 + expect(a.outerHTML).to.equal(b.outerHTML); 375 + expect(a.disabled).to.equal(true); 376 + }); 377 + 378 + it("if new tree has disabled=false and old tree has disabled=true, set value from new tree", async () => { 379 + const a = await fixture(html`<input type="checkbox" disabled=${false} />`); 380 + const b = await fixture(html`<input type="checkbox" disabled=${true} />`); 381 + 382 + morph(a, b); 383 + 384 + expect(a.outerHTML).to.equal(b.outerHTML); 385 + expect(a.disabled).to.equal(true); 386 + }); 387 + 388 + it("if new tree has disabled=true and old tree has disabled=false, set value from new tree", async () => { 389 + const a = await fixture(html`<input type="checkbox" disabled=${true} />`); 390 + const b = await fixture(html`<input type="checkbox" disabled=${false} />`); 391 + 392 + morph(a, b); 393 + 394 + expect(a.outerHTML).to.equal(b.outerHTML); 395 + expect(a.disabled).to.equal(false); 396 + }); 397 + 398 + it("if new tree has no disabled and old tree has disabled mutated to true, set value from new tree", async () => { 399 + const a = await fixture(html`<input type="checkbox" />`); 400 + const b = await fixture(html`<input type="checkbox" />`); 401 + b.disabled = true; 402 + 403 + morph(a, b); 404 + 405 + expect(a.outerHTML).to.equal(b.outerHTML); 406 + expect(a.disabled).to.equal(true); 407 + }); 408 + 409 + it("if new tree has disabled=false and old tree has disabled mutated to true, set value from new tree", async () => { 410 + const a = await fixture(html`<input type="checkbox" disabled=${false} />`); 411 + const b = await fixture(html`<input type="checkbox" />`); 412 + b.disabled = true; 413 + 414 + morph(a, b); 415 + 416 + expect(a.outerHTML).to.equal(b.outerHTML); 417 + expect(a.disabled).to.equal(true); 418 + }); 419 + 420 + it("if new tree has disabled=true and old tree has disabled mutated to false, set value from new tree", async () => { 421 + const a = await fixture(html`<input type="checkbox" disabled=${true} />`); 422 + const b = await fixture(html`<input type="checkbox" />`); 423 + b.disabled = false; 424 + 425 + morph(a, b); 426 + 427 + expect(a.outerHTML).to.equal(b.outerHTML); 428 + expect(a.disabled).to.equal(false); 429 + }); 430 + 431 + it("if new tree has no disabled and old tree has disabled=true, set value from new tree", async () => { 432 + const a = await fixture(html`<input type="checkbox" />`); 433 + const b = await fixture(html`<input type="checkbox" disabled=${true} />`); 434 + 435 + morph(a, b); 436 + 437 + expect(a.outerHTML).to.equal(b.outerHTML); 438 + expect(a.disabled).to.equal(true); 439 + }); 440 + }); 441 + }); 270 442 });