Precise DOM morphing
morphing
typescript
dom
Add some Alpine-morph test cases
+65
-1
+65
-1
test/something.test.js
+65
-1
test/something.test.js
···
2
2
import { morph } from "../";
3
3
4
4
describe("my-test", () => {
5
-
it.only("works", async () => {
5
+
it("add text content", async () => {
6
6
const a = await fixture(html`<h1></h1>`);
7
7
const b = await fixture(html`<h1>Hello</h1>`);
8
8
···
23
23
24
24
expect(a.outerHTML).to.equal(b.outerHTML);
25
25
});
26
+
27
+
// adapted from: https://github.com/alpinejs/alpine/blob/891d68503960a39826e89f2f666d9b1e7ce3f0c9/tests/jest/morph/external.spec.js
28
+
it("updates text content", async () => {
29
+
const a = await fixture(html`<div>foo</div>`);
30
+
const b = await fixture(html`<div>bar</div>`);
31
+
32
+
morph(a, b);
33
+
34
+
expect(a.outerHTML).to.equal(b.outerHTML);
35
+
})
36
+
37
+
it("changes inner tag", async () => {
38
+
const a = await fixture(html`<div><div>foo</div></div>`);
39
+
const b = await fixture(html`<div><span>foo</span></div>`);
40
+
41
+
morph(a, b);
42
+
43
+
expect(a.outerHTML).to.equal(b.outerHTML);
44
+
})
45
+
46
+
it("adds child", async () => {
47
+
const a = await fixture(html`<div>foo</div>`);
48
+
const b = await fixture(html`<div>foo <h1>baz</h1></div>`);
49
+
50
+
morph(a, b);
51
+
52
+
expect(a.outerHTML).to.equal(b.outerHTML);
53
+
})
54
+
55
+
it("removes child", async () => {
56
+
const a = await fixture(html`<div>foo <h1>baz</h1></div>`);
57
+
const b = await fixture(html`<div>foo</div>`);
58
+
59
+
morph(a, b);
60
+
61
+
expect(a.outerHTML).to.equal(b.outerHTML);
62
+
})
63
+
64
+
it("adds attribute", async () => {
65
+
const a = await fixture(html`<div>foo</div>`);
66
+
const b = await fixture(html`<div foo="bar">foo</div>`);
67
+
68
+
morph(a, b);
69
+
70
+
expect(a.outerHTML).to.equal(b.outerHTML);
71
+
})
72
+
73
+
it("removes attribute", async () => {
74
+
const a = await fixture(html`<div foo="bar">foo</div>`);
75
+
const b = await fixture(html`<div>foo</div>`);
76
+
77
+
morph(a, b);
78
+
79
+
expect(a.outerHTML).to.equal(b.outerHTML);
80
+
})
81
+
82
+
it("changes attribute", async () => {
83
+
const a = await fixture(html`<div foo="bar">foo</div>`);
84
+
const b = await fixture(html`<div foo="baz">foo</div>`);
85
+
86
+
morph(a, b);
87
+
88
+
expect(a.outerHTML).to.equal(b.outerHTML);
89
+
})
26
90
});