Precise DOM morphing
morphing
typescript
dom
More tests
+108
+108
test/new/partial-reorder.browser.test.ts
+108
test/new/partial-reorder.browser.test.ts
···
1
+
import { test, expect } from "vitest"
2
+
import { morph } from "../../src/morphlex"
3
+
import { dom, observeMutations } from "./utils"
4
+
5
+
test("partial reorder at the befinning", () => {
6
+
const from = dom(`
7
+
<ul>
8
+
<li>1</li>
9
+
<li>2</li>
10
+
<li>3</li>
11
+
<li>4</li>
12
+
<li>5</li>
13
+
<li>6</li>
14
+
</ul>
15
+
`)
16
+
17
+
const to = dom(`
18
+
<ul>
19
+
<li>2</li>
20
+
<li>1</li>
21
+
<li>3</li>
22
+
<li>4</li>
23
+
<li>5</li>
24
+
<li>6</li>
25
+
</ul>
26
+
`)
27
+
28
+
const expected = to.outerHTML
29
+
30
+
const mutations = observeMutations(from, () => {
31
+
morph(from, to)
32
+
})
33
+
34
+
expect(from.outerHTML).toBe(expected)
35
+
36
+
expect(mutations.elementsRemoved).toBe(1)
37
+
expect(mutations.elementsAdded).toBe(1)
38
+
})
39
+
40
+
test("partial reorder at the end", () => {
41
+
const from = dom(`
42
+
<ul>
43
+
<li>1</li>
44
+
<li>2</li>
45
+
<li>3</li>
46
+
<li>4</li>
47
+
<li>5</li>
48
+
<li>6</li>
49
+
</ul>
50
+
`)
51
+
52
+
const to = dom(`
53
+
<ul>
54
+
<li>1</li>
55
+
<li>2</li>
56
+
<li>3</li>
57
+
<li>4</li>
58
+
<li>6</li>
59
+
<li>5</li>
60
+
</ul>
61
+
`)
62
+
63
+
const expected = to.outerHTML
64
+
65
+
const mutations = observeMutations(from, () => {
66
+
morph(from, to)
67
+
})
68
+
69
+
expect(from.outerHTML).toBe(expected)
70
+
71
+
expect(mutations.elementsRemoved).toBe(1)
72
+
expect(mutations.elementsAdded).toBe(1)
73
+
})
74
+
75
+
test("partial reorder in the middle", () => {
76
+
const from = dom(`
77
+
<ul>
78
+
<li>1</li>
79
+
<li>2</li>
80
+
<li>3</li>
81
+
<li>4</li>
82
+
<li>5</li>
83
+
<li>6</li>
84
+
</ul>
85
+
`)
86
+
87
+
const to = dom(`
88
+
<ul>
89
+
<li>1</li>
90
+
<li>2</li>
91
+
<li>4</li>
92
+
<li>3</li>
93
+
<li>5</li>
94
+
<li>6</li>
95
+
</ul>
96
+
`)
97
+
98
+
const expected = to.outerHTML
99
+
100
+
const mutations = observeMutations(from, () => {
101
+
morph(from, to)
102
+
})
103
+
104
+
expect(from.outerHTML).toBe(expected)
105
+
106
+
expect(mutations.elementsRemoved).toBe(1)
107
+
expect(mutations.elementsAdded).toBe(1)
108
+
})