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("remove item from the end of a list", () => {
6 const from = dom(`
7 <ul>
8 <li>Item 1</li>
9 <li>Item 2</li>
10 <li>Item 3</li>
11 </ul>
12 `)
13
14 const to = dom(`
15 <ul>
16 <li>Item 1</li>
17 <li>Item 2</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.elementsRemoved).toBe(1)
29})
30
31test("remove item from the beginning of a list", () => {
32 const from = dom(`
33 <ul>
34 <li>Item 1</li>
35 <li>Item 2</li>
36 <li>Item 3</li>
37 </ul>
38 `)
39
40 const to = dom(`
41 <ul>
42 <li>Item 2</li>
43 <li>Item 3</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.elementsRemoved).toBe(1)
55})
56
57test("remove item from the middle of a list", () => {
58 const from = dom(`
59 <ul>
60 <li>Item 1</li>
61 <li>Item 2</li>
62 <li>Item 3</li>
63 </ul>
64 `)
65
66 const to = dom(`
67 <ul>
68 <li>Item 1</li>
69 <li>Item 3</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.elementsRemoved).toBe(1)
81})