Precise DOM morphing
morphing
typescript
dom
More tests
+46
-5
+2
-2
src/morphlex.ts
+2
-2
src/morphlex.ts
···
166
166
167
167
function flagDirtyInputs(node: ParentNode): void {
168
168
for (const input of node.querySelectorAll("input")) {
169
-
if (input.name === "") continue
169
+
if (!input.name) continue
170
170
171
171
if (input.value !== input.defaultValue) {
172
172
input.setAttribute("morphlex-dirty", "")
···
178
178
}
179
179
180
180
for (const element of node.querySelectorAll("option")) {
181
-
if (element.value === "") continue
181
+
if (!element.value) continue
182
182
183
183
if (element.selected !== element.defaultSelected) {
184
184
element.setAttribute("morphlex-dirty", "")
+3
-3
test/new/document.ts
test/new/document.test.ts
+3
-3
test/new/document.ts
test/new/document.test.ts
···
33
33
`,
34
34
)
35
35
36
-
expect(document.title).toBe("New Title")
37
-
expect(document.querySelector('meta[name="description"]')?.getAttribute("content")).toBe("new")
38
-
expect(document.querySelector("#content")?.textContent).toBe("New Content")
36
+
expect(originalDocument.querySelector("title")?.textContent).toBe("New Title")
37
+
expect(originalDocument.querySelector('meta[name="description"]')?.getAttribute("content")).toBe("new")
38
+
expect(originalDocument.querySelector("#content")?.textContent).toBe("New Content")
39
39
})
+41
test/new/inputs.browser.test.ts
+41
test/new/inputs.browser.test.ts
···
69
69
expect(a.checked).toBe(true)
70
70
})
71
71
72
+
test("morphing an unmodified checkbox checked with preserveChanges enabled", () => {
73
+
const a = dom(`<input type="checkbox" checked>`) as HTMLInputElement
74
+
const b = dom(`<input type="checkbox">`) as HTMLInputElement
75
+
76
+
morph(a, b, { preserveChanges: true })
77
+
78
+
expect(a.hasAttribute("checked")).toBe(false)
79
+
expect(a.checked).toBe(false)
80
+
})
81
+
72
82
test("morphing a modified checkbox unchecked with preserveChanges enabled", () => {
73
83
const a = dom(`<input type="checkbox" checked>`) as HTMLInputElement
74
84
const b = dom(`<input type="checkbox">`) as HTMLInputElement
···
150
160
expect(a.options[1].hasAttribute("selected")).toBe(false)
151
161
expect(a.value).toBe("a")
152
162
expect(a.options[0].selected).toBe(true)
163
+
})
164
+
165
+
test("morphing a select option with no value", () => {
166
+
const a = dom(
167
+
`
168
+
<select>
169
+
<option></option>
170
+
<option></option>
171
+
</select>
172
+
`,
173
+
)
174
+
175
+
const b = dom(
176
+
`
177
+
<select>
178
+
<option value="1">A</option>
179
+
<option value="2">B</option>
180
+
</select>
181
+
`,
182
+
)
183
+
184
+
morph(a, b)
185
+
186
+
expect(a.outerHTML).toBe(
187
+
`
188
+
<select>
189
+
<option value="1">A</option>
190
+
<option value="2">B</option>
191
+
</select>
192
+
`.trim(),
193
+
)
153
194
})
154
195
})
155
196