Added expand/collapse tests; chronologically ordered snapshots
Brian Vaughn committed
Apr 11, 2019 at 11:34 UTC
158b0b55674c83d30b52ae6290e6562507654a07
2 files changed
+111
-25
src/__tests__/__snapshots__/store-test.js.snap
+65
-15
@@ -1,6 +1,6 @@
1
// Jest Snapshot v1, https://goo.gl/fbAQLP
2
3
-exports[`Store should display Suspense nodes properly in various states: loading 1`] = `
3
+exports[`Store should display Suspense nodes properly in various states: 1: loading 1`] = `
4
[root]
5
▾ <Wrapper>
6
<Component key="Outside">
@@ -8,7 +8,7 @@ exports[`Store should display Suspense nodes properly in various states: loading
8
<Loading>
9
`;
10
11
-exports[`Store should display Suspense nodes properly in various states: resolved 1`] = `
11
+exports[`Store should display Suspense nodes properly in various states: 2: resolved 1`] = `
12
[root]
13
▾ <Wrapper>
14
<Component key="Outside">
@@ -16,7 +16,7 @@ exports[`Store should display Suspense nodes properly in various states: resolve
16
<Component key="Inside">
17
`;
18
19
-exports[`Store should filter DOM nodes from the store tree: mount 1`] = `
19
+exports[`Store should filter DOM nodes from the store tree: 1: mount 1`] = `
20
[root]
21
▾ <Grandparent>
22
▾ <Parent>
@@ -25,7 +25,57 @@ exports[`Store should filter DOM nodes from the store tree: mount 1`] = `
25
<Child>
26
`;
27
28
-exports[`Store should support mount and update operations for multiple roots: mount 1`] = `
28
+exports[`Store should support collapsing parts of the tree: 1: mount 1`] = `
29
+[root]
30
+ ▾ <Grandparent>
31
+ ▾ <Parent>
32
+ <Child key="0">
33
+ <Child key="1">
34
+ ▾ <Parent>
35
+ <Child key="0">
36
+ <Child key="1">
37
+`;
38
+
39
+exports[`Store should support collapsing parts of the tree: 2: collapse first Parent 1`] = `
40
+[root]
41
+ ▾ <Grandparent>
42
+ ▸ <Parent>
43
+ ▾ <Parent>
44
+ <Child key="0">
45
+ <Child key="1">
46
+`;
47
+
48
+exports[`Store should support collapsing parts of the tree: 3: collapse second Parent 1`] = `
49
+[root]
50
+ ▾ <Grandparent>
51
+ ▸ <Parent>
52
+ ▸ <Parent>
53
+`;
54
+
55
+exports[`Store should support collapsing parts of the tree: 4: expand first Parent 1`] = `
56
+[root]
57
+ ▾ <Grandparent>
58
+ ▾ <Parent>
59
+ <Child key="0">
60
+ <Child key="1">
61
+ ▸ <Parent>
62
+`;
63
+
64
+exports[`Store should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `
65
+[root]
66
+ ▸ <Grandparent>
67
+`;
68
+
69
+exports[`Store should support collapsing parts of the tree: 6: expand Grandparent 1`] = `
70
+[root]
71
+ ▾ <Grandparent>
72
+ ▾ <Parent>
73
+ <Child key="0">
74
+ <Child key="1">
75
+ ▸ <Parent>
76
+`;
77
+
78
+exports[`Store should support mount and update operations for multiple roots: 1: mount 1`] = `
79
[root]
80
▾ <Parent key="A">
81
<Child key="0">
@@ -37,30 +87,30 @@ exports[`Store should support mount and update operations for multiple roots: mo
87
<Child key="1">
88
`;
89
40
-exports[`Store should support mount and update operations for multiple roots: unmount A 1`] = ``;
41
-
42
-exports[`Store should support mount and update operations for multiple roots: unmount B 1`] = `
90
+exports[`Store should support mount and update operations for multiple roots: 2: update 1`] = `
91
[root]
92
▾ <Parent key="A">
93
<Child key="0">
94
<Child key="1">
95
<Child key="2">
96
<Child key="3">
97
+[root]
98
+ ▾ <Parent key="B">
99
+ <Child key="0">
100
`;
101
51
-exports[`Store should support mount and update operations for multiple roots: update 1`] = `
102
+exports[`Store should support mount and update operations for multiple roots: 3: unmount B 1`] = `
103
[root]
104
▾ <Parent key="A">
105
<Child key="0">
106
<Child key="1">
107
<Child key="2">
108
<Child key="3">
58
-[root]
59
- ▾ <Parent key="B">
60
- <Child key="0">
109
`;
110
63
-exports[`Store should support mount and update operations: mount 1`] = `
111
+exports[`Store should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
112
+
113
+exports[`Store should support mount and update operations: 1: mount 1`] = `
114
[root]
115
▾ <Grandparent>
116
▾ <Parent>
@@ -75,9 +125,7 @@ exports[`Store should support mount and update operations: mount 1`] = `
125
<Child key="3">
126
`;
127
78
-exports[`Store should support mount and update operations: unmount 1`] = ``;
79
-
80
-exports[`Store should support mount and update operations: update 1`] = `
128
+exports[`Store should support mount and update operations: 2: update 1`] = `
129
[root]
130
▾ <Grandparent>
131
▾ <Parent>
@@ -87,3 +135,5 @@ exports[`Store should support mount and update operations: update 1`] = `
135
<Child key="0">
136
<Child key="1">
137
`;
138
+
139
+exports[`Store should support mount and update operations: 3: unmount 1`] = ``;
src/__tests__/store-test.js
+46
-10
@@ -36,13 +36,13 @@ describe('Store', () => {
36
const container = document.createElement('div');
37
38
act(() => ReactDOM.render(<Grandparent count={4} />, container));
39
- expect(store).toMatchSnapshot('mount');
39
+ expect(store).toMatchSnapshot('1: mount');
40
41
act(() => ReactDOM.render(<Grandparent count={2} />, container));
42
- expect(store).toMatchSnapshot('update');
42
+ expect(store).toMatchSnapshot('2: update');
43
44
act(() => ReactDOM.unmountComponentAtNode(container));
45
- expect(store).toMatchSnapshot('unmount');
45
+ expect(store).toMatchSnapshot('3: unmount');
46
});
47
48
it('should support mount and update operations for multiple roots', () => {
@@ -57,19 +57,19 @@ describe('Store', () => {
57
ReactDOM.render(<Parent key="A" count={3} />, containerA);
58
ReactDOM.render(<Parent key="B" count={2} />, containerB);
59
});
60
- expect(store).toMatchSnapshot('mount');
60
+ expect(store).toMatchSnapshot('1: mount');
61
62
act(() => {
63
ReactDOM.render(<Parent key="A" count={4} />, containerA);
64
ReactDOM.render(<Parent key="B" count={1} />, containerB);
65
});
66
- expect(store).toMatchSnapshot('update');
66
+ expect(store).toMatchSnapshot('2: update');
67
68
act(() => ReactDOM.unmountComponentAtNode(containerB));
69
- expect(store).toMatchSnapshot('unmount B');
69
+ expect(store).toMatchSnapshot('3: unmount B');
70
71
act(() => ReactDOM.unmountComponentAtNode(containerA));
72
- expect(store).toMatchSnapshot('unmount A');
72
+ expect(store).toMatchSnapshot('4: unmount A');
73
});
74
75
it('should filter DOM nodes from the store tree', () => {
@@ -91,7 +91,7 @@ describe('Store', () => {
91
act(() =>
92
ReactDOM.render(<Grandparent count={4} />, document.createElement('div'))
93
);
94
- expect(store).toMatchSnapshot('mount');
94
+ expect(store).toMatchSnapshot('1: mount');
95
});
96
97
// TODO We should write more complex Suspense tests than just this
@@ -118,13 +118,49 @@ describe('Store', () => {
118
119
const container = document.createElement('div');
120
act(() => ReactDOM.render(<Wrapper shouldSuspense={true} />, container));
121
- expect(store).toMatchSnapshot('loading');
121
+ expect(store).toMatchSnapshot('1: loading');
122
123
act(async () => {
124
ReactDOM.render(<Wrapper shouldSuspense={false} />, container);
125
});
126
- expect(store).toMatchSnapshot('resolved');
126
+ expect(store).toMatchSnapshot('2: resolved');
127
128
done();
129
});
130
+
131
+ it('should support collapsing parts of the tree', () => {
132
+ const Grandparent = ({ count }) => (
133
+ <React.Fragment>
134
+ <Parent count={count} />
135
+ <Parent count={count} />
136
+ </React.Fragment>
137
+ );
138
+ const Parent = ({ count }) =>
139
+ new Array(count).fill(true).map((_, index) => <Child key={index} />);
140
+ const Child = () => <div>Hi!</div>;
141
+
142
+ act(() =>
143
+ ReactDOM.render(<Grandparent count={2} />, document.createElement('div'))
144
+ );
145
+ expect(store).toMatchSnapshot('1: mount');
146
+
147
+ const grandparentID = store.getElementIDAtIndex(0);
148
+ const parentOneID = store.getElementIDAtIndex(1);
149
+ const parentTwoID = store.getElementIDAtIndex(4);
150
+
151
+ act(() => store.toggleIsCollapsed(parentOneID, true));
152
+ expect(store).toMatchSnapshot('2: collapse first Parent');
153
+
154
+ act(() => store.toggleIsCollapsed(parentTwoID, true));
155
+ expect(store).toMatchSnapshot('3: collapse second Parent');
156
+
157
+ act(() => store.toggleIsCollapsed(parentOneID, false));
158
+ expect(store).toMatchSnapshot('4: expand first Parent');
159
+
160
+ act(() => store.toggleIsCollapsed(grandparentID, true));
161
+ expect(store).toMatchSnapshot('5: collapse Grandparent');
162
+
163
+ act(() => store.toggleIsCollapsed(grandparentID, false));
164
+ expect(store).toMatchSnapshot('6: expand Grandparent');
165
+ });
166
});