yippee.fun
Precise DOM morphing
morphing
typescript
dom
joel.drapper.me
1import { describe, it, expect } from "vitest"
2import { morph, morphInner } from "../src/morphlex"
3
4describe("Morphlex Edge Cases & Error Handling", () => {
5 describe("parseChildNodeFromString error handling", () => {
6 it("should throw error when parsing empty string", () => {
7 const div = document.createElement("div")
8 div.innerHTML = "<span>test</span>"
9
10 // Empty string should remove the node (morphing to empty NodeList)
11 morph(div.firstChild!, "")
12 expect(div.firstChild).toBeNull()
13 })
14
15 it("should throw error when morphInner receives empty string", () => {
16 const div = document.createElement("div")
17 div.innerHTML = "<span>content</span>"
18
19 // morphInner with empty string should throw an error
20 // because parseString returns empty fragment
21 expect(() => morphInner(div, "")).toThrow("[Morphlex] The string was not a valid HTML element.")
22 })
23
24 it("should work with valid HTML strings", () => {
25 const parent = document.createElement("div")
26 const span = document.createElement("span")
27 span.textContent = "old"
28 parent.appendChild(span)
29
30 morph(span, "<div>new</div>")
31 expect(parent.firstChild?.nodeName).toBe("DIV")
32 expect(parent.firstChild?.textContent).toBe("new")
33 })
34 })
35
36 describe("parseElementFromString error handling", () => {
37 it("should throw error when parseElementFromString receives text content", () => {
38 const div = document.createElement("div")
39
40 // morphInner expects an element string, not just text
41 // Text content gets parsed as a text node, not an element
42 expect(() => morphInner(div, "just text")).toThrow("[Morphlex] The string was not a valid HTML element.")
43 })
44 })
45
46 describe("moveBefore API coverage", () => {
47 it("should use insertBefore when moveBefore is not available", () => {
48 // In happy-dom, moveBefore is not available, so this is already covered
49 // by existing tests. We're just making it explicit here.
50 const parent = document.createElement("div")
51 const child1 = document.createElement("span")
52 child1.id = "child1"
53 child1.textContent = "1"
54 const child2 = document.createElement("span")
55 child2.id = "child2"
56 child2.textContent = "2"
57 parent.appendChild(child1)
58 parent.appendChild(child2)
59
60 // Morph to swap the order
61 morph(parent, `<div><span id="child2">2</span><span id="child1">1</span></div>`)
62
63 // The reordering should work even without moveBefore
64 expect(parent.children[0].id).toBe("child2")
65 expect(parent.children[1].id).toBe("child1")
66 })
67 })
68
69 describe("Edge cases for remaining uncovered lines", () => {
70 it("should handle the case where refChild exists but child is null (line 316-317)", () => {
71 const parent = document.createElement("div")
72 // Start with empty parent
73
74 // Morph to add children
75 morph(parent, "<div><span>1</span><span>2</span></div>")
76
77 expect(parent.children.length).toBe(2)
78 expect(parent.children[0].textContent).toBe("1")
79 expect(parent.children[1].textContent).toBe("2")
80 })
81
82 it("should add new node when no match exists (lines 370-373)", () => {
83 const parent = document.createElement("div")
84 const existingChild = document.createElement("p")
85 existingChild.textContent = "existing"
86 parent.appendChild(existingChild)
87
88 // Add a completely new element before the existing one
89 morph(parent, "<div><article>new</article><p>existing</p></div>")
90
91 expect(parent.children.length).toBe(2)
92 expect(parent.children[0].nodeName).toBe("ARTICLE")
93 expect(parent.children[0].textContent).toBe("new")
94 expect(parent.children[1].nodeName).toBe("P")
95 expect(parent.children[1].textContent).toBe("existing")
96 })
97
98 it("should trigger line 402 by moving an element in browsers with moveBefore", () => {
99 // Mock moveBefore if it doesn't exist
100 const originalMoveBefore = (Element.prototype as any).moveBefore
101 if (!originalMoveBefore) {
102 // Since moveBefore doesn't exist in happy-dom, we can't test line 402
103 // This line is only reachable in real browsers that support moveBefore
104 // We'll just verify that the fallback (insertBefore) works
105 const parent = document.createElement("div")
106 const child1 = document.createElement("span")
107 child1.textContent = "1"
108 const child2 = document.createElement("span")
109 child2.textContent = "2"
110 parent.appendChild(child1)
111 parent.appendChild(child2)
112
113 // This will use insertBefore internally
114 parent.insertBefore(child2, child1)
115
116 expect(parent.children[0]).toBe(child2)
117 expect(parent.children[1]).toBe(child1)
118 } else {
119 // This would test moveBefore in a real browser
120 const parent = document.createElement("div")
121 const child1 = document.createElement("span")
122 child1.id = "a"
123 const child2 = document.createElement("span")
124 child2.id = "b"
125 parent.appendChild(child1)
126 parent.appendChild(child2)
127
128 morph(parent, '<div><span id="b"></span><span id="a"></span></div>')
129
130 expect(parent.children[0].id).toBe("b")
131 expect(parent.children[1].id).toBe("a")
132 }
133 })
134 })
135})