@samitouri / QOS-React / commits / 29811cd24e

Added legacy (v15) tests

Brian Vaughn committed Apr 17, 2019 at 15:30 UTC 29811cd24ef304fb089c6d69692b2e2e21f47e1e
4 files changed +718 -3
package.json
+3 -1
@@ -26,7 +26,7 @@
26 "<rootDir>/src/__tests__/storeSerializer"
27 ],
28 "testMatch": [
29 - "**/__tests__/*-test.js"
29 + "**/__tests__/**/*-test.js"
30 ]
31 },
32 "scripts": {
@@ -131,8 +131,10 @@
131 "prettier": "^1.16.4",
132 "prop-types": "^15.6.2",
133 "react": "0.0.0-4221565e1",
134 + "react-15": "npm:react@^15",
135 "react-color": "^2.11.7",
136 "react-dom": "0.0.0-4221565e1",
137 + "react-dom-15": "npm:react-dom@^15",
138 "react-is": "0.0.0-4221565e1",
139 "react-virtualized-auto-sizer": "^1.0.2",
140 "react-window": "^1.8.0",
src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap new
+279
@@ -0,0 +1,279 @@
1 +// Jest Snapshot v1, https://goo.gl/fbAQLP
2 +
3 +exports[`Store (legacy) collapseNodesByDefault:false should filter DOM nodes from the store tree: 1: mount 1`] = `
4 +[root]
5 + ▾ <Grandparent>
6 + ▾ <Parent>
7 + <Child>
8 + ▾ <Parent>
9 + <Child>
10 +`;
11 +
12 +exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 1: mount 1`] = `
13 +[root]
14 + ▾ <Grandparent>
15 + ▾ <Parent>
16 + <Child key="0">
17 + <Child key="1">
18 + ▾ <Parent>
19 + <Child key="0">
20 + <Child key="1">
21 +`;
22 +
23 +exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 2: collapse first Parent 1`] = `
24 +[root]
25 + ▾ <Grandparent>
26 + ▸ <Parent>
27 + ▾ <Parent>
28 + <Child key="0">
29 + <Child key="1">
30 +`;
31 +
32 +exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 3: collapse second Parent 1`] = `
33 +[root]
34 + ▾ <Grandparent>
35 + ▸ <Parent>
36 + ▸ <Parent>
37 +`;
38 +
39 +exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 4: expand first Parent 1`] = `
40 +[root]
41 + ▾ <Grandparent>
42 + ▾ <Parent>
43 + <Child key="0">
44 + <Child key="1">
45 + ▸ <Parent>
46 +`;
47 +
48 +exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `
49 +[root]
50 + ▸ <Grandparent>
51 +`;
52 +
53 +exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 6: expand Grandparent 1`] = `
54 +[root]
55 + ▾ <Grandparent>
56 + ▾ <Parent>
57 + <Child key="0">
58 + <Child key="1">
59 + ▸ <Parent>
60 +`;
61 +
62 +exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 1: mount 1`] = `
63 +[root]
64 + ▾ <Parent key="A">
65 + <Child key="0">
66 + <Child key="1">
67 + <Child key="2">
68 +[root]
69 + ▾ <Parent key="B">
70 + <Child key="0">
71 + <Child key="1">
72 +`;
73 +
74 +exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 2: update 1`] = `
75 +[root]
76 + ▾ <Parent key="A">
77 + <Child key="0">
78 + <Child key="1">
79 + <Child key="2">
80 + <Child key="3">
81 +[root]
82 + ▾ <Parent key="B">
83 + <Child key="0">
84 +`;
85 +
86 +exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 3: unmount B 1`] = `
87 +[root]
88 + ▾ <Parent key="A">
89 + <Child key="0">
90 + <Child key="1">
91 + <Child key="2">
92 + <Child key="3">
93 +`;
94 +
95 +exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
96 +
97 +exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 1: mount 1`] = `
98 +[root]
99 + ▾ <Grandparent>
100 + ▾ <Parent>
101 + <Child key="0">
102 + <Child key="1">
103 + <Child key="2">
104 + <Child key="3">
105 + ▾ <Parent>
106 + <Child key="0">
107 + <Child key="1">
108 + <Child key="2">
109 + <Child key="3">
110 +`;
111 +
112 +exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 2: update 1`] = `
113 +[root]
114 + ▾ <Grandparent>
115 + ▾ <Parent>
116 + <Child key="0">
117 + <Child key="1">
118 + ▾ <Parent>
119 + <Child key="0">
120 + <Child key="1">
121 +`;
122 +
123 +exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;
124 +
125 +exports[`Store (legacy) collapseNodesByDefault:true should filter DOM nodes from the store tree: 1: mount 1`] = `
126 +[root]
127 + ▸ <Grandparent>
128 +`;
129 +
130 +exports[`Store (legacy) collapseNodesByDefault:true should filter DOM nodes from the store tree: 2: expand Grandparent 1`] = `
131 +[root]
132 + ▾ <Grandparent>
133 + ▸ <Parent>
134 + ▸ <Parent>
135 +`;
136 +
137 +exports[`Store (legacy) collapseNodesByDefault:true should filter DOM nodes from the store tree: 3: expand Parent 1`] = `
138 +[root]
139 + ▾ <Grandparent>
140 + ▾ <Parent>
141 + <Child>
142 + ▸ <Parent>
143 +`;
144 +
145 +exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = `
146 +[root]
147 + ▸ <Wrapper>
148 +`;
149 +
150 +exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 2: expand deepest node 1`] = `
151 +[root]
152 + ▾ <Wrapper>
153 + ▾ <Nested>
154 + ▾ <Nested>
155 + ▾ <Nested>
156 + <Nested>
157 +`;
158 +
159 +exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 3: collapse root 1`] = `
160 +[root]
161 + ▸ <Wrapper>
162 +`;
163 +
164 +exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 4: expand root 1`] = `
165 +[root]
166 + ▾ <Wrapper>
167 + ▾ <Nested>
168 + ▾ <Nested>
169 + ▾ <Nested>
170 + <Nested>
171 +`;
172 +
173 +exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 5: collapse middle node 1`] = `
174 +[root]
175 + ▾ <Wrapper>
176 + ▸ <Nested>
177 +`;
178 +
179 +exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 6: expand middle node 1`] = `
180 +[root]
181 + ▾ <Wrapper>
182 + ▾ <Nested>
183 + ▾ <Nested>
184 + ▾ <Nested>
185 + <Nested>
186 +`;
187 +
188 +exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 1: mount 1`] = `
189 +[root]
190 + ▸ <Grandparent>
191 +`;
192 +
193 +exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 2: expand Grandparent 1`] = `
194 +[root]
195 + ▾ <Grandparent>
196 + ▸ <Parent>
197 + ▸ <Parent>
198 +`;
199 +
200 +exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 3: expand first Parent 1`] = `
201 +[root]
202 + ▾ <Grandparent>
203 + ▾ <Parent>
204 + <Child key="0">
205 + <Child key="1">
206 + ▸ <Parent>
207 +`;
208 +
209 +exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 4: expand second Parent 1`] = `
210 +[root]
211 + ▾ <Grandparent>
212 + ▾ <Parent>
213 + <Child key="0">
214 + <Child key="1">
215 + ▾ <Parent>
216 + <Child key="0">
217 + <Child key="1">
218 +`;
219 +
220 +exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 5: collapse first Parent 1`] = `
221 +[root]
222 + ▾ <Grandparent>
223 + ▸ <Parent>
224 + ▾ <Parent>
225 + <Child key="0">
226 + <Child key="1">
227 +`;
228 +
229 +exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 6: collapse second Parent 1`] = `
230 +[root]
231 + ▾ <Grandparent>
232 + ▸ <Parent>
233 + ▸ <Parent>
234 +`;
235 +
236 +exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 7: collapse Grandparent 1`] = `
237 +[root]
238 + ▸ <Grandparent>
239 +`;
240 +
241 +exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 1: mount 1`] = `
242 +[root]
243 + ▸ <Parent key="A">
244 +[root]
245 + ▸ <Parent key="B">
246 +`;
247 +
248 +exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 2: update 1`] = `
249 +[root]
250 + ▸ <Parent key="A">
251 +[root]
252 + ▸ <Parent key="B">
253 +`;
254 +
255 +exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 3: unmount B 1`] = `
256 +[root]
257 + ▸ <Parent key="A">
258 +`;
259 +
260 +exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
261 +
262 +exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 1: mount 1`] = `
263 +[root]
264 + ▸ <Parent>
265 + ▸ <Parent>
266 +`;
267 +
268 +exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 2: update 1`] = `
269 +[root]
270 + ▸ <Parent>
271 + ▸ <Parent>
272 +`;
273 +
274 +exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;
275 +
276 +exports[`Store (legacy) should not allow a root node to be collapsed: 1: mount 1`] = `
277 +[root]
278 + <Component>
279 +`;
src/__tests__/legacy/storeLegacy-v15-test.js new
+404
@@ -0,0 +1,404 @@
1 +// @flow
2 +
3 +describe('Store (legacy)', () => {
4 + let React;
5 + let ReactDOM;
6 + let store;
7 +
8 + const act = (callback: Function) => {
9 + callback();
10 +
11 + jest.runAllTimers(); // Flush Bridge operations
12 + };
13 +
14 + beforeEach(() => {
15 + store = global.store;
16 +
17 + // Redirect all React/ReactDOM requires to the v15 UMD.
18 + // We use the UMD because Jest doesn't enable us to mock deep imports (e.g. "react/lib/Something").
19 + jest.mock('react', () => require.requireActual('react-15/dist/react.js'));
20 + jest.mock('react-dom', () => require.requireActual('react-dom-15/dist/react-dom.js'));
21 +
22 + React = require('react');
23 + ReactDOM = require('react-dom');
24 + });
25 +
26 + it('should not allow a root node to be collapsed', () => {
27 + const Component = () => <div>Hi</div>;
28 +
29 + act(() =>
30 + ReactDOM.render(<Component count={4} />, document.createElement('div'))
31 + );
32 + expect(store).toMatchSnapshot('1: mount');
33 +
34 + expect(store.roots).toHaveLength(1);
35 +
36 + const rootID = store.roots[0];
37 +
38 + expect(() => store.toggleIsCollapsed(rootID, true)).toThrow(
39 + 'Root nodes cannot be collapsed'
40 + );
41 + });
42 +
43 + describe('collapseNodesByDefault:false', () => {
44 + beforeEach(() => {
45 + store.collapseNodesByDefault = false;
46 + });
47 +
48 + it('should support mount and update operations', () => {
49 + const Grandparent = ({ count }) => (
50 + <div>
51 + <Parent count={count} />
52 + <Parent count={count} />
53 + </div>
54 + );
55 + const Parent = ({ count }) =>
56 + <div>{new Array(count).fill(true).map((_, index) => <Child key={index} />)}</div>;
57 + const Child = () => <div>Hi!</div>;
58 +
59 + const container = document.createElement('div');
60 +
61 + act(() => ReactDOM.render(<Grandparent count={4} />, container));
62 + expect(store).toMatchSnapshot('1: mount');
63 +
64 + act(() => ReactDOM.render(<Grandparent count={2} />, container));
65 + expect(store).toMatchSnapshot('2: update');
66 +
67 + act(() => ReactDOM.unmountComponentAtNode(container));
68 + expect(store).toMatchSnapshot('3: unmount');
69 + });
70 +
71 + it('should support mount and update operations for multiple roots', () => {
72 + const Parent = ({ count }) =>
73 + <div>{new Array(count).fill(true).map((_, index) => <Child key={index} />)}</div>;
74 + const Child = () => <div>Hi!</div>;
75 +
76 + const containerA = document.createElement('div');
77 + const containerB = document.createElement('div');
78 +
79 + act(() => {
80 + ReactDOM.render(<Parent key="A" count={3} />, containerA);
81 + ReactDOM.render(<Parent key="B" count={2} />, containerB);
82 + });
83 + expect(store).toMatchSnapshot('1: mount');
84 +
85 + act(() => {
86 + ReactDOM.render(<Parent key="A" count={4} />, containerA);
87 + ReactDOM.render(<Parent key="B" count={1} />, containerB);
88 + });
89 + expect(store).toMatchSnapshot('2: update');
90 +
91 + act(() => ReactDOM.unmountComponentAtNode(containerB));
92 + expect(store).toMatchSnapshot('3: unmount B');
93 +
94 + act(() => ReactDOM.unmountComponentAtNode(containerA));
95 + expect(store).toMatchSnapshot('4: unmount A');
96 + });
97 +
98 + it('should filter DOM nodes from the store tree', () => {
99 + const Grandparent = () => (
100 + <div>
101 + <div>
102 + <Parent />
103 + </div>
104 + <Parent />
105 + </div>
106 + );
107 + const Parent = () => (
108 + <div>
109 + <Child />
110 + </div>
111 + );
112 + const Child = () => <div>Hi!</div>;
113 +
114 + act(() =>
115 + ReactDOM.render(
116 + <Grandparent count={4} />,
117 + document.createElement('div')
118 + )
119 + );
120 + expect(store).toMatchSnapshot('1: mount');
121 + });
122 +
123 + it('should support collapsing parts of the tree', () => {
124 + const Grandparent = ({ count }) => (
125 + <div>
126 + <Parent count={count} />
127 + <Parent count={count} />
128 + </div>
129 + );
130 + const Parent = ({ count }) =>
131 + <div>{new Array(count).fill(true).map((_, index) => <Child key={index} />)}</div>;
132 + const Child = () => <div>Hi!</div>;
133 +
134 + act(() =>
135 + ReactDOM.render(
136 + <Grandparent count={2} />,
137 + document.createElement('div')
138 + )
139 + );
140 + expect(store).toMatchSnapshot('1: mount');
141 +
142 + const grandparentID = store.getElementIDAtIndex(0);
143 + const parentOneID = store.getElementIDAtIndex(1);
144 + const parentTwoID = store.getElementIDAtIndex(4);
145 +
146 + act(() => store.toggleIsCollapsed(parentOneID, true));
147 + expect(store).toMatchSnapshot('2: collapse first Parent');
148 +
149 + act(() => store.toggleIsCollapsed(parentTwoID, true));
150 + expect(store).toMatchSnapshot('3: collapse second Parent');
151 +
152 + act(() => store.toggleIsCollapsed(parentOneID, false));
153 + expect(store).toMatchSnapshot('4: expand first Parent');
154 +
155 + act(() => store.toggleIsCollapsed(grandparentID, true));
156 + expect(store).toMatchSnapshot('5: collapse Grandparent');
157 +
158 + act(() => store.toggleIsCollapsed(grandparentID, false));
159 + expect(store).toMatchSnapshot('6: expand Grandparent');
160 + });
161 +
162 + // TODO Re-enable this test once the renderer supports it.
163 + xit('should support reordering of children', () => {
164 + const Root = ({ children }) => <div>{children}</div>;
165 + const Component = () => null;
166 +
167 + const Foo = () => <div>{[<Component key="0" />]}</div>;
168 + const Bar = () => <div>{[<Component key="0" />, <Component key="1" />]}</div>;
169 + const foo = <Foo key="foo" />;
170 + const bar = <Bar key="bar" />;
171 +
172 + const container = document.createElement('div');
173 +
174 + act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
175 + expect(store).toMatchSnapshot('1: mount');
176 +
177 + act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
178 + expect(store).toMatchSnapshot('3: reorder children');
179 +
180 + act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
181 + expect(store).toMatchSnapshot('4: collapse root');
182 +
183 + act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
184 + expect(store).toMatchSnapshot('5: expand root');
185 + });
186 + });
187 +
188 + describe('collapseNodesByDefault:true', () => {
189 + beforeEach(() => {
190 + store.collapseNodesByDefault = true;
191 + });
192 +
193 + it('should support mount and update operations', () => {
194 + const Parent = ({ count }) =>
195 + <div>{new Array(count).fill(true).map((_, index) => <Child key={index} />)}</div>;
196 + const Child = () => <div>Hi!</div>;
197 +
198 + const container = document.createElement('div');
199 +
200 + act(() =>
201 + ReactDOM.render(
202 + <div>
203 + <Parent count={1} />
204 + <Parent count={3} />
205 + </div>,
206 + container
207 + )
208 + );
209 + expect(store).toMatchSnapshot('1: mount');
210 +
211 + act(() =>
212 + ReactDOM.render(
213 + <div>
214 + <Parent count={2} />
215 + <Parent count={1} />
216 + </div>,
217 + container
218 + )
219 + );
220 + expect(store).toMatchSnapshot('2: update');
221 +
222 + act(() => ReactDOM.unmountComponentAtNode(container));
223 + expect(store).toMatchSnapshot('3: unmount');
224 + });
225 +
226 + it('should support mount and update operations for multiple roots', () => {
227 + const Parent = ({ count }) =>
228 + <div>{new Array(count).fill(true).map((_, index) => <Child key={index} />)}</div>;
229 + const Child = () => <div>Hi!</div>;
230 +
231 + const containerA = document.createElement('div');
232 + const containerB = document.createElement('div');
233 +
234 + act(() => {
235 + ReactDOM.render(<Parent key="A" count={3} />, containerA);
236 + ReactDOM.render(<Parent key="B" count={2} />, containerB);
237 + });
238 + expect(store).toMatchSnapshot('1: mount');
239 +
240 + act(() => {
241 + ReactDOM.render(<Parent key="A" count={4} />, containerA);
242 + ReactDOM.render(<Parent key="B" count={1} />, containerB);
243 + });
244 + expect(store).toMatchSnapshot('2: update');
245 +
246 + act(() => ReactDOM.unmountComponentAtNode(containerB));
247 + expect(store).toMatchSnapshot('3: unmount B');
248 +
249 + act(() => ReactDOM.unmountComponentAtNode(containerA));
250 + expect(store).toMatchSnapshot('4: unmount A');
251 + });
252 +
253 + it('should filter DOM nodes from the store tree', () => {
254 + const Grandparent = () => (
255 + <div>
256 + <div>
257 + <Parent />
258 + </div>
259 + <Parent />
260 + </div>
261 + );
262 + const Parent = () => (
263 + <div>
264 + <Child />
265 + </div>
266 + );
267 + const Child = () => <div>Hi!</div>;
268 +
269 + act(() =>
270 + ReactDOM.render(
271 + <Grandparent count={4} />,
272 + document.createElement('div')
273 + )
274 + );
275 + expect(store).toMatchSnapshot('1: mount');
276 +
277 + act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
278 + expect(store).toMatchSnapshot('2: expand Grandparent');
279 +
280 + act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
281 + expect(store).toMatchSnapshot('3: expand Parent');
282 + });
283 +
284 + it('should support expanding parts of the tree', () => {
285 + const Grandparent = ({ count }) => (
286 + <div>
287 + <Parent count={count} />
288 + <Parent count={count} />
289 + </div>
290 + );
291 + const Parent = ({ count }) =>
292 + <div>{new Array(count).fill(true).map((_, index) => <Child key={index} />)}</div>;
293 + const Child = () => <div>Hi!</div>;
294 +
295 + act(() =>
296 + ReactDOM.render(
297 + <Grandparent count={2} />,
298 + document.createElement('div')
299 + )
300 + );
301 + expect(store).toMatchSnapshot('1: mount');
302 +
303 + const grandparentID = store.getElementIDAtIndex(0);
304 +
305 + act(() => store.toggleIsCollapsed(grandparentID, false));
306 + expect(store).toMatchSnapshot('2: expand Grandparent');
307 +
308 + const parentOneID = store.getElementIDAtIndex(1);
309 + const parentTwoID = store.getElementIDAtIndex(2);
310 +
311 + act(() => store.toggleIsCollapsed(parentOneID, false));
312 + expect(store).toMatchSnapshot('3: expand first Parent');
313 +
314 + act(() => store.toggleIsCollapsed(parentTwoID, false));
315 + expect(store).toMatchSnapshot('4: expand second Parent');
316 +
317 + act(() => store.toggleIsCollapsed(parentOneID, true));
318 + expect(store).toMatchSnapshot('5: collapse first Parent');
319 +
320 + act(() => store.toggleIsCollapsed(parentTwoID, true));
321 + expect(store).toMatchSnapshot('6: collapse second Parent');
322 +
323 + act(() => store.toggleIsCollapsed(grandparentID, true));
324 + expect(store).toMatchSnapshot('7: collapse Grandparent');
325 + });
326 +
327 + it('should support expanding deep parts of the tree', () => {
328 + const Wrapper = ({ forwardedRef }) => (
329 + <Nested depth={3} forwardedRef={forwardedRef} />
330 + );
331 + const Nested = ({ depth, forwardedRef }) =>
332 + depth > 0 ? (
333 + <Nested depth={depth - 1} forwardedRef={forwardedRef} />
334 + ) : (
335 + <div ref={forwardedRef} />
336 + );
337 +
338 + let ref = null;
339 + const refSetter = value => {
340 + ref = value;
341 + };
342 +
343 + act(() =>
344 + ReactDOM.render(
345 + <Wrapper forwardedRef={refSetter} />,
346 + document.createElement('div')
347 + )
348 + );
349 + expect(store).toMatchSnapshot('1: mount');
350 +
351 + const deepestedNodeID = global.agent.getIDForNode(ref);
352 +
353 + act(() => store.toggleIsCollapsed(deepestedNodeID, false));
354 + expect(store).toMatchSnapshot('2: expand deepest node');
355 +
356 + const rootID = store.getElementIDAtIndex(0);
357 +
358 + act(() => store.toggleIsCollapsed(rootID, true));
359 + expect(store).toMatchSnapshot('3: collapse root');
360 +
361 + act(() => store.toggleIsCollapsed(rootID, false));
362 + expect(store).toMatchSnapshot('4: expand root');
363 +
364 + const id = store.getElementIDAtIndex(1);
365 +
366 + act(() => store.toggleIsCollapsed(id, true));
367 + expect(store).toMatchSnapshot('5: collapse middle node');
368 +
369 + act(() => store.toggleIsCollapsed(id, false));
370 + expect(store).toMatchSnapshot('6: expand middle node');
371 + });
372 +
373 + // TODO Re-enable this test once the renderer supports it.
374 + xit('should support reordering of children', () => {
375 + const Root = ({ children }) => <div>{children}</div>;
376 + const Component = () => null;
377 +
378 + const Foo = () => <div>{[<Component key="0" />]}</div>;
379 + const Bar = () => <div>{[<Component key="0" />, <Component key="1" />]}</div>;
380 + const foo = <Foo key="foo" />;
381 + const bar = <Bar key="bar" />;
382 +
383 + const container = document.createElement('div');
384 +
385 + act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
386 + expect(store).toMatchSnapshot('1: mount');
387 +
388 + act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
389 + expect(store).toMatchSnapshot('3: reorder children');
390 +
391 + act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
392 + expect(store).toMatchSnapshot('4: expand root');
393 +
394 + act(() => {
395 + store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);
396 + store.toggleIsCollapsed(store.getElementIDAtIndex(1), false);
397 + });
398 + expect(store).toMatchSnapshot('5: expand leaves');
399 +
400 + act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
401 + expect(store).toMatchSnapshot('6: collapse root');
402 + });
403 + });
404 +});
yarn.lock
+32 -2
@@ -3462,6 +3462,15 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
3462 safe-buffer "^5.0.1"
3463 sha.js "^2.4.8"
3464
3465 +create-react-class@^15.6.0:
3466 + version "15.6.3"
3467 + resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
3468 + integrity sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==
3469 + dependencies:
3470 + fbjs "^0.8.9"
3471 + loose-envify "^1.3.1"
3472 + object-assign "^4.1.1"
3473 +
3474 create-react-context@^0.2.1:
3475 version "0.2.3"
3476 resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
@@ -4930,7 +4939,7 @@ fbjs@0.5.1:
4939 ua-parser-js "^0.7.9"
4940 whatwg-fetch "^0.9.0"
4941
4933 -fbjs@^0.8.0:
4942 +fbjs@^0.8.0, fbjs@^0.8.9:
4943 version "0.8.17"
4944 resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
4945 integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
@@ -7562,7 +7571,7 @@ log-update@^2.0.0, log-update@^2.3.0:
7571 cli-cursor "^2.0.0"
7572 wrap-ansi "^3.0.1"
7573
7565 -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
7574 +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
7575 version "1.4.0"
7576 resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
7577 integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -9168,6 +9177,17 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
9177 minimist "^1.2.0"
9178 strip-json-comments "~2.0.1"
9179
9180 +"react-15@npm:react@^15":
9181 + version "15.6.2"
9182 + resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
9183 + integrity sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=
9184 + dependencies:
9185 + create-react-class "^15.6.0"
9186 + fbjs "^0.8.9"
9187 + loose-envify "^1.1.0"
9188 + object-assign "^4.1.0"
9189 + prop-types "^15.5.10"
9190 +
9191 react-color@^2.11.7:
9192 version "2.17.0"
9193 resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.17.0.tgz#e14b8a11f4e89163f65a34c8b43faf93f7f02aaa"
@@ -9180,6 +9200,16 @@ react-color@^2.11.7:
9200 reactcss "^1.2.0"
9201 tinycolor2 "^1.4.1"
9202
9203 +"react-dom-15@npm:react-dom@^15":
9204 + version "15.6.2"
9205 + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730"
9206 + integrity sha1-Qc+t9pO3V/rycIRDodH9WgK+9zA=
9207 + dependencies:
9208 + fbjs "^0.8.9"
9209 + loose-envify "^1.1.0"
9210 + object-assign "^4.1.0"
9211 + prop-types "^15.5.10"
9212 +
9213 react-dom@0.0.0-4221565e1:
9214 version "0.0.0-4221565e1"
9215 resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-4221565e1.tgz#d9044312a3294a8828867624a9fea7fd9aa76570"