/
sync_components_root.spec.ts
119 lines (108 loc) · 2.96 KB
/
sync_components_root.spec.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import { Component, VNode, statefulComponent, getComponent } from "ivi";
import { startRender, checkDOMOps, domOps } from "./utils";
import * as h from "ivi-html";
/**
* When component is an entry point for update and it completely changes a root node, refs to DOM Nodes on
* parent vnodes should be updated, or parent vnodes shouldn't rely on this refs and use another way to find
* DOM Nodes.
*/
class A extends Component<number> {
state = this.props;
isPropsChanged() {
return false;
}
render() {
if (this.state === 1) {
return h.span().c(1);
}
return h.div().c(0);
}
updateState(state: number) {
this.state = state;
this.invalidate();
}
}
class B extends Component<VNode> {
render() {
return this.props;
}
}
const ca = statefulComponent(A);
const cb = statefulComponent(B);
test(`<h1><A.0> => <h1><A.1> => <A.1><h1>`, () => {
startRender(r => {
checkDOMOps(c => {
const a = ca(0).k(1);
r(h.div().c(
h.h1().k(0),
a,
));
getComponent<A>(a)!.updateState(1);
const n = r(h.div().c(
ca(1).k(1),
h.h1().k(0),
)) as HTMLDivElement;
expect(n.children[0].tagName.toLowerCase()).toBe("span");
expect(n.children[0].firstChild!.nodeValue).toBe("1");
expect(c).toEqual(domOps(4, 0, 2, 0, 6, 1, 0));
});
});
});
test(`<h1><B><A.0></B> => <h1><B><A.1></B> => <B><A.1></B><h1>`, () => {
startRender(r => {
checkDOMOps(c => {
const a = ca(0);
r(h.div().c(
h.h1().k(0),
cb(a).k(1),
));
getComponent<A>(a)!.updateState(1);
const n = r(h.div().c(
cb(ca(1)).k(1),
h.h1().k(0),
)) as HTMLDivElement;
expect(n.children[0].tagName.toLowerCase()).toBe("span");
expect(n.children[0].firstChild!.nodeValue).toBe("1");
expect(c).toEqual(domOps(4, 0, 2, 0, 6, 1, 0));
});
});
});
// same tests in the opposite direction
test(`<A.0><h1> => <A.1><h1> => <h1><A.1>`, () => {
startRender(r => {
checkDOMOps(c => {
const a = ca(0).k(1);
r(h.div().c(
a,
h.h1().k(0),
));
getComponent<A>(a)!.updateState(1);
const n = r(h.div().c(
h.h1().k(0),
ca(1).k(1),
)) as HTMLDivElement;
expect(n.children[1].tagName.toLowerCase()).toBe("span");
expect(n.children[1].firstChild!.nodeValue).toBe("1");
expect(c).toEqual(domOps(4, 0, 2, 0, 6, 1, 0));
});
});
});
test(`<B><A.0></B><h1> => <B><A.1></B><h1> => <h1><B><A.1></B>`, () => {
startRender(r => {
checkDOMOps(c => {
const a = ca(0);
r(h.div().c(
cb(a).k(1),
h.h1().k(0),
));
getComponent<A>(a)!.updateState(1);
const n = r(h.div().c(
h.h1().k(0),
cb(ca(1)).k(1),
)) as HTMLDivElement;
expect(n.children[1].tagName.toLowerCase()).toBe("span");
expect(n.children[1].firstChild!.nodeValue).toBe("1");
expect(c).toEqual(domOps(4, 0, 2, 0, 6, 1, 0));
});
});
});