yippee.fun
Precise DOM morphing
morphing
typescript
dom
joel.drapper.me
1import { test, expect } from "vitest"
2import { morph } from "../../src/morphlex"
3import { dom, observeMutations } from "./utils"
4
5test("insert item at the end of a list", () => {
6 const from = dom(`
7 <ul>
8 <li>Item 1</li>
9 <li>Item 2</li>
10 </ul>
11 `)
12
13 const to = dom(`
14 <ul>
15 <li>Item 1</li>
16 <li>Item 2</li>
17 <li>New Item</li>
18 </ul>
19 `)
20
21 const expected = to.outerHTML
22
23 const mutations = observeMutations(from, () => {
24 morph(from, to)
25 })
26
27 expect(from.outerHTML).toBe(expected)
28 expect(mutations.elementsAdded).toBe(1)
29})
30
31test("insert item at the beginning of a list", () => {
32 const from = dom(`
33 <ul>
34 <li>Item 1</li>
35 <li>Item 2</li>
36 </ul>
37 `)
38
39 const to = dom(`
40 <ul>
41 <li>New Item</li>
42 <li>Item 1</li>
43 <li>Item 2</li>
44 </ul>
45 `)
46
47 const expected = to.outerHTML
48
49 const mutations = observeMutations(from, () => {
50 morph(from, to)
51 })
52
53 expect(from.outerHTML).toBe(expected)
54 expect(mutations.elementsAdded).toBe(1)
55})
56
57test("insert item in the middle of a list", () => {
58 const from = dom(`
59 <ul>
60 <li>Item 1</li>
61 <li>Item 2</li>
62 </ul>
63 `)
64
65 const to = dom(`
66 <ul>
67 <li>Item 1</li>
68 <li>New Item</li>
69 <li>Item 2</li>
70 </ul>
71 `)
72
73 const expected = to.outerHTML
74
75 const mutations = observeMutations(from, () => {
76 morph(from, to)
77 })
78
79 expect(from.outerHTML).toBe(expected)
80 expect(mutations.elementsAdded).toBe(1)
81})