@samitouri / QOS-React-2 / commits / b081ffc518

Add stress test for reordering

Dan Abramov committed Apr 16, 2019 at 15:11 UTC b081ffc518240ad39703c9e128cdded368991185
2 files changed +203 -1
src/__tests__/__snapshots__/store-test.js.snap
+102
@@ -161,6 +161,108 @@ exports[`Store should handle a stress test with different tree operations: 2: ab
161 <E key="e">
162 `;
163
164 +exports[`Store should handle stress test with reordering 1`] = `
165 +[root]
166 + ▾ <Root>
167 + <A key="a">
168 +`;
169 +
170 +exports[`Store should handle stress test with reordering 2`] = `
171 +[root]
172 + ▾ <Root>
173 + <B key="b">
174 +`;
175 +
176 +exports[`Store should handle stress test with reordering 3`] = `
177 +[root]
178 + ▾ <Root>
179 + <C key="c">
180 +`;
181 +
182 +exports[`Store should handle stress test with reordering 4`] = `
183 +[root]
184 + ▾ <Root>
185 + <D key="d">
186 +`;
187 +
188 +exports[`Store should handle stress test with reordering 5`] = `
189 +[root]
190 + ▾ <Root>
191 + <E key="e">
192 +`;
193 +
194 +exports[`Store should handle stress test with reordering 6`] = `
195 +[root]
196 + ▾ <Root>
197 + <A key="a">
198 +`;
199 +
200 +exports[`Store should handle stress test with reordering 7`] = `
201 +[root]
202 + ▾ <Root>
203 + <B key="b">
204 +`;
205 +
206 +exports[`Store should handle stress test with reordering 8`] = `
207 +[root]
208 + ▾ <Root>
209 + <C key="c">
210 +`;
211 +
212 +exports[`Store should handle stress test with reordering 9`] = `
213 +[root]
214 + ▾ <Root>
215 + <D key="d">
216 +`;
217 +
218 +exports[`Store should handle stress test with reordering 10`] = `
219 +[root]
220 + ▾ <Root>
221 + <E key="e">
222 +`;
223 +
224 +exports[`Store should handle stress test with reordering 11`] = `
225 +[root]
226 + ▾ <Root>
227 + <A key="a">
228 + <B key="b">
229 +`;
230 +
231 +exports[`Store should handle stress test with reordering 12`] = `
232 +[root]
233 + ▾ <Root>
234 + <B key="b">
235 + <A key="a">
236 +`;
237 +
238 +exports[`Store should handle stress test with reordering 13`] = `
239 +[root]
240 + ▾ <Root>
241 + <B key="b">
242 + <C key="c">
243 +`;
244 +
245 +exports[`Store should handle stress test with reordering 14`] = `
246 +[root]
247 + ▾ <Root>
248 + <C key="c">
249 + <B key="b">
250 +`;
251 +
252 +exports[`Store should handle stress test with reordering 15`] = `
253 +[root]
254 + ▾ <Root>
255 + <A key="a">
256 + <C key="c">
257 +`;
258 +
259 +exports[`Store should handle stress test with reordering 16`] = `
260 +[root]
261 + ▾ <Root>
262 + <C key="c">
263 + <A key="a">
264 +`;
265 +
266 exports[`Store should support collapsing parts of the tree: 1: mount 1`] = `
267 [root]
268 ▾ <Grandparent>
src/__tests__/store-test.js
+101 -1
@@ -339,6 +339,106 @@ describe('Store', () => {
339 expect(print(store)).toBe('');
340 });
341
342 + it('should handle stress test with reordering', () => {
343 + const A = () => 'a';
344 + const B = () => 'b';
345 + const C = () => 'c';
346 + const D = () => 'd';
347 + const E = () => 'e';
348 + const a = <A key="a" />;
349 + const b = <B key="b" />;
350 + const c = <C key="c" />;
351 + const d = <D key="d" />;
352 + const e = <E key="e" />;
353 +
354 + // prettier-ignore
355 + let steps = [
356 + a,
357 + b,
358 + c,
359 + d,
360 + e,
361 + [a],
362 + [b],
363 + [c],
364 + [d],
365 + [e],
366 + [a, b],
367 + [b, a],
368 + [b, c],
369 + [c, b],
370 + [a, c],
371 + [c, a],
372 + ];
373 +
374 + const Root = ({ children }) => {
375 + return children;
376 + };
377 +
378 + // 1. Capture the expected render result.
379 + let snapshots = [];
380 + let container = document.createElement('div');
381 + for (let i = 0; i < steps.length; i++) {
382 + act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
383 + // We snapshot each step once so it doesn't regress.
384 + expect(store).toMatchSnapshot();
385 + snapshots.push(print(store));
386 + act(() => ReactDOM.unmountComponentAtNode(container));
387 + expect(print(store)).toBe('');
388 + }
389 +
390 + // 2. Verify that we can update from every step to every other step and back.
391 + for (let i = 0; i < steps.length; i++) {
392 + for (let j = 0; j < steps.length; j++) {
393 + let container = document.createElement('div');
394 + act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
395 + expect(print(store)).toMatch(snapshots[i]);
396 + act(() => ReactDOM.render(<Root>{steps[j]}</Root>, container));
397 + expect(print(store)).toMatch(snapshots[j]);
398 + act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
399 + expect(print(store)).toMatch(snapshots[i]);
400 + act(() => ReactDOM.unmountComponentAtNode(container));
401 + expect(print(store)).toBe('');
402 + }
403 + }
404 +
405 + // 3. Same test as above, but this time we wrap children in a host component.
406 + for (let i = 0; i < steps.length; i++) {
407 + for (let j = 0; j < steps.length; j++) {
408 + let container = document.createElement('div');
409 + act(() =>
410 + ReactDOM.render(
411 + <Root>
412 + <div>{steps[i]}</div>
413 + </Root>,
414 + container
415 + )
416 + );
417 + expect(print(store)).toMatch(snapshots[i]);
418 + act(() =>
419 + ReactDOM.render(
420 + <Root>
421 + <div>{steps[j]}</div>
422 + </Root>,
423 + container
424 + )
425 + );
426 + expect(print(store)).toMatch(snapshots[j]);
427 + act(() =>
428 + ReactDOM.render(
429 + <Root>
430 + <div>{steps[i]}</div>
431 + </Root>,
432 + container
433 + )
434 + );
435 + expect(print(store)).toMatch(snapshots[i]);
436 + act(() => ReactDOM.unmountComponentAtNode(container));
437 + expect(print(store)).toBe('');
438 + }
439 + }
440 + });
441 +
442 it('should handle a stress test for Suspense', async () => {
443 const A = () => 'a';
444 const B = () => 'b';
@@ -676,4 +776,4 @@ describe('Store', () => {
776 // TODO:
777 // Test Concurrent Mode
778 });
679 -});
779 +});
\ No newline at end of file