Precise DOM morphing
morphing
typescript
dom
Add some nanomorph test cases
+174
-4
+174
-4
test/something.test.js
+174
-4
test/something.test.js
···
25
25
});
26
26
27
27
// adapted from: https://github.com/alpinejs/alpine/blob/891d68503960a39826e89f2f666d9b1e7ce3f0c9/tests/jest/morph/external.spec.js
28
-
it("updates text content", async () => {
28
+
it("updates text content", async () => {
29
29
const a = await fixture(html`<div>foo</div>`);
30
30
const b = await fixture(html`<div>bar</div>`);
31
31
···
43
43
expect(a.outerHTML).to.equal(b.outerHTML);
44
44
})
45
45
46
-
it("adds child", async () => {
46
+
it("adds child", async () => {
47
47
const a = await fixture(html`<div>foo</div>`);
48
48
const b = await fixture(html`<div>foo <h1>baz</h1></div>`);
49
49
···
61
61
expect(a.outerHTML).to.equal(b.outerHTML);
62
62
})
63
63
64
-
it("adds attribute", async () => {
64
+
it("adds attribute", async () => {
65
65
const a = await fixture(html`<div>foo</div>`);
66
66
const b = await fixture(html`<div foo="bar">foo</div>`);
67
67
···
79
79
expect(a.outerHTML).to.equal(b.outerHTML);
80
80
})
81
81
82
-
it("changes attribute", async () => {
82
+
it("changes attribute", async () => {
83
83
const a = await fixture(html`<div foo="bar">foo</div>`);
84
84
const b = await fixture(html`<div foo="baz">foo</div>`);
85
85
86
86
morph(a, b);
87
87
88
88
expect(a.outerHTML).to.equal(b.outerHTML);
89
+
})
90
+
91
+
// adapted from: https://github.com/choojs/nanomorph/blob/b8088d03b1113bddabff8aa0e44bd8db88d023c7/test/diff.js
92
+
describe("root level", () => {
93
+
it("should replace a node", async () => {
94
+
const a = await fixture(html`<p>hello world</p>`);
95
+
const b = await fixture(html`<div>hello world</div>`);
96
+
97
+
morph(a, b);
98
+
99
+
expect(a.outerHTML).to.equal(b.outerHTML);
100
+
})
101
+
102
+
it("should replace a component", async () => {
103
+
const a = await fixture(html`<div data-nanomorph-component-id="a">hello world</div>`);
104
+
const b = await fixture(html`<div data-nanomorph-component-id="b">bye moon</div>`);
105
+
106
+
morph(a, b);
107
+
108
+
expect(a.outerHTML).to.equal(b.outerHTML);
109
+
})
110
+
111
+
it("should morph a node", async () => {
112
+
const a = await fixture(html`<p>hello world</p>`);
113
+
const b = await fixture(html`<p>hello you</p>`);
114
+
115
+
morph(a, b);
116
+
117
+
expect(a.outerHTML).to.equal(b.outerHTML);
118
+
})
119
+
120
+
it("should morph a node with namespaced attribute", async () => {
121
+
const a = await fixture(html`<svg><use xlink:href="#heybooboo"></use></svg>`);
122
+
const b = await fixture(html`<svg><use xlink:href="#boobear"></use></svg>`);
123
+
124
+
morph(a, b);
125
+
126
+
expect(a.outerHTML).to.equal(b.outerHTML);
127
+
})
128
+
129
+
it("should ignore if node is same", async () => {
130
+
const a = await fixture(html`<p>hello world</p>`);
131
+
132
+
morph(a, a);
133
+
134
+
expect(a.outerHTML).to.equal(a.outerHTML);
135
+
})
136
+
})
137
+
138
+
describe("nested", () => {
139
+
it("should replace a node", async () => {
140
+
const a = await fixture(html`<main><p>hello world</p></main>`);
141
+
const b = await fixture(html`<main><div>hello world</div></main>`);
142
+
143
+
morph(a, b);
144
+
145
+
expect(a.outerHTML).to.equal(b.outerHTML);
146
+
})
147
+
148
+
it("should replace a node", async () => {
149
+
const a = await fixture(html`<main><p>hello world</p></main>`);
150
+
const b = await fixture(html`<main><p>hello you</p></main>`);
151
+
152
+
morph(a, b);
153
+
154
+
expect(a.outerHTML).to.equal(b.outerHTML);
155
+
})
156
+
157
+
it("should replace a node", async () => {
158
+
const a = await fixture(html`<main><p>hello world</p></main>`);
159
+
160
+
morph(a, a);
161
+
162
+
expect(a.outerHTML).to.equal(a.outerHTML);
163
+
})
164
+
165
+
it("should append a node", async () => {
166
+
const a = await fixture(html`<main></main>`);
167
+
const b = await fixture(html`<main><p>hello you</p></main>`);
168
+
169
+
morph(a, b);
170
+
171
+
expect(a.outerHTML).to.equal(b.outerHTML);
172
+
})
173
+
174
+
it("should remove a node", async () => {
175
+
const a = await fixture(html`<main><p>hello you</p></main>`);
176
+
const b = await fixture(html`<main></main>`);
177
+
178
+
morph(a, b);
179
+
180
+
expect(a.outerHTML).to.equal(b.outerHTML);
181
+
})
182
+
183
+
it("should update child nodes", async () => {
184
+
const a = await fixture(html`<main><p>hello world</p></main>`);
185
+
const b = await fixture(html`<section><p>hello you</p></section>`);
186
+
187
+
morph(a, b, { childrenOnly: true });
188
+
189
+
expect(a.outerHTML).to.equal('<main><p>hello you</p></main>');
190
+
})
191
+
})
192
+
193
+
describe('values', () => {
194
+
it("if new tree has no value and old tree does, remove value", async () => {
195
+
const a = await fixture(html`<input type="text" value="howdy" />`);
196
+
const b = await fixture(html`<input type="text" />`);
197
+
198
+
morph(a, b);
199
+
200
+
expect(a.outerHTML).to.equal(b.outerHTML);
201
+
expect(a.getAttribute("value")).to.equal(null);
202
+
expect(a.value).to.equal("");
203
+
})
204
+
205
+
it("if new tree has null value and old tree does, remove value", async () => {
206
+
const a = await fixture(html`<input type="text" value="howdy" />`);
207
+
const b = await fixture(html`<input type="text" value=${null} />`);
208
+
209
+
morph(a, b);
210
+
211
+
expect(a.outerHTML).to.equal(b.outerHTML);
212
+
expect(a.getAttribute("value")).to.equal(null);
213
+
expect(a.value).to.equal("");
214
+
})
215
+
216
+
it("if new tree has value in HTML and old tree does too, set value from new tree", async () => {
217
+
const a = await fixture(html`<input type="text" value="howdy" />`);
218
+
const b = await fixture(html`<input type="text" value="hi" />`);
219
+
220
+
morph(a, b);
221
+
222
+
expect(a.outerHTML).to.equal(b.outerHTML);
223
+
expect(a.value).to.equal("hi");
224
+
})
225
+
226
+
it("if new tree has value from mutation and old tree does too, set value from new tree", async () => {
227
+
const a = await fixture(html`<input type="text"/>`);
228
+
a.value = 'howdy'
229
+
const b = await fixture(html`<input type="text"/>`);
230
+
b.value = 'hi'
231
+
232
+
morph(a, b);
233
+
234
+
expect(a.outerHTML).to.equal(b.outerHTML);
235
+
expect(a.value).to.equal("hi");
236
+
})
237
+
238
+
it("if new tree has value in HTML and old tree does from mutation, set value from new tree", async () => {
239
+
const a = await fixture(html`<input type="text" value="howdy"/>`);
240
+
const b = await fixture(html`<input type="text"/>`);
241
+
b.value = 'hi'
242
+
243
+
morph(a, b);
244
+
245
+
expect(a.outerHTML).to.equal(b.outerHTML);
246
+
expect(a.value).to.equal("hi");
247
+
})
248
+
249
+
it("if new tree has value from mutation and old tree does in HTML, set value from new tree", async () => {
250
+
const a = await fixture(html`<input type="text" value="howdy"/>`);
251
+
a.value = 'howdy'
252
+
const b = await fixture(html`<input type="text" value="hi"/>`);
253
+
254
+
morph(a, b);
255
+
256
+
expect(a.outerHTML).to.equal(b.outerHTML);
257
+
expect(a.value).to.equal("hi");
258
+
})
89
259
})
90
260
});