@samitouri / QOS-React
Code Commits Issues Pulls Sessions CI/CD
main
main
js 952 lines 26.4 KB
Raw
1 /**
2 * Copyright (c) Meta Platforms, Inc. and affiliates.
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 *
7 * @flow
8 */
9
10 describe('Store (legacy)', () => {
11 let React;
12 let ReactDOM;
13 let store;
14 const act = (callback: Function) => {
15 callback();
16 jest.runAllTimers(); // Flush Bridge operations
17 };
18 beforeEach(() => {
19 store = global.store;
20
21 // Redirect all React/ReactDOM requires to the v15 UMD.
22 // We use the UMD because Jest doesn't enable us to mock deep imports (e.g. "react/lib/Something").
23 jest.mock('react', () => jest.requireActual('react-15/dist/react.js'));
24 jest.mock('react-dom', () =>
25 jest.requireActual('react-dom-15/dist/react-dom.js'),
26 );
27 React = require('react');
28 ReactDOM = require('react-dom');
29 });
30 it('should not allow a root node to be collapsed', () => {
31 const Component = () => React.createElement('div', null, 'Hi');
32 act(() =>
33 ReactDOM.render(
34 React.createElement(Component, {
35 count: 4,
36 }),
37 document.createElement('div'),
38 ),
39 );
40 expect(store).toMatchInlineSnapshot(`
41 [root]
42 ▾ <Component>
43 <div>
44 `);
45 expect(store.roots).toHaveLength(1);
46 const rootID = store.roots[0];
47 expect(() => store.toggleIsCollapsed(rootID, true)).toThrow(
48 'Root nodes cannot be collapsed',
49 );
50 });
51 describe('collapseNodesByDefault:false', () => {
52 beforeEach(() => {
53 store.collapseNodesByDefault = false;
54 });
55 it('should support mount and update operations', () => {
56 const Grandparent = ({count}) =>
57 React.createElement(
58 'div',
59 null,
60 React.createElement(Parent, {
61 count: count,
62 }),
63 React.createElement(Parent, {
64 count: count,
65 }),
66 );
67 const Parent = ({count}) =>
68 React.createElement(
69 'div',
70 null,
71 new Array(count).fill(true).map((_, index) =>
72 React.createElement(Child, {
73 key: index,
74 }),
75 ),
76 );
77 const Child = () => React.createElement('div', null, 'Hi!');
78 const container = document.createElement('div');
79 act(() =>
80 ReactDOM.render(
81 React.createElement(Grandparent, {
82 count: 4,
83 }),
84 container,
85 ),
86 );
87 expect(store).toMatchInlineSnapshot(`
88 [root]
89 ▾ <Grandparent>
90 ▾ <div>
91 ▾ <Parent>
92 ▾ <div>
93 ▾ <Child key="0">
94 <div>
95 ▾ <Child key="1">
96 <div>
97 ▾ <Child key="2">
98 <div>
99 ▾ <Child key="3">
100 <div>
101 ▾ <Parent>
102 ▾ <div>
103 ▾ <Child key="0">
104 <div>
105 ▾ <Child key="1">
106 <div>
107 ▾ <Child key="2">
108 <div>
109 ▾ <Child key="3">
110 <div>
111 `);
112 act(() =>
113 ReactDOM.render(
114 React.createElement(Grandparent, {
115 count: 2,
116 }),
117 container,
118 ),
119 );
120 expect(store).toMatchInlineSnapshot(`
121 [root]
122 ▾ <Grandparent>
123 ▾ <div>
124 ▾ <Parent>
125 ▾ <div>
126 ▾ <Child key="0">
127 <div>
128 ▾ <Child key="1">
129 <div>
130 ▾ <Parent>
131 ▾ <div>
132 ▾ <Child key="0">
133 <div>
134 ▾ <Child key="1">
135 <div>
136 `);
137 act(() => ReactDOM.unmountComponentAtNode(container));
138 expect(store).toMatchInlineSnapshot(``);
139 });
140 it('should support mount and update operations for multiple roots', () => {
141 const Parent = ({count}) =>
142 React.createElement(
143 'div',
144 null,
145 new Array(count).fill(true).map((_, index) =>
146 React.createElement(Child, {
147 key: index,
148 }),
149 ),
150 );
151 const Child = () => React.createElement('div', null, 'Hi!');
152 const containerA = document.createElement('div');
153 const containerB = document.createElement('div');
154 act(() => {
155 ReactDOM.render(
156 React.createElement(Parent, {
157 key: 'A',
158 count: 3,
159 }),
160 containerA,
161 );
162 ReactDOM.render(
163 React.createElement(Parent, {
164 key: 'B',
165 count: 2,
166 }),
167 containerB,
168 );
169 });
170 expect(store).toMatchInlineSnapshot(`
171 [root]
172 ▾ <Parent key="A">
173 ▾ <div>
174 ▾ <Child key="0">
175 <div>
176 ▾ <Child key="1">
177 <div>
178 ▾ <Child key="2">
179 <div>
180 [root]
181 ▾ <Parent key="B">
182 ▾ <div>
183 ▾ <Child key="0">
184 <div>
185 ▾ <Child key="1">
186 <div>
187 `);
188 act(() => {
189 ReactDOM.render(
190 React.createElement(Parent, {
191 key: 'A',
192 count: 4,
193 }),
194 containerA,
195 );
196 ReactDOM.render(
197 React.createElement(Parent, {
198 key: 'B',
199 count: 1,
200 }),
201 containerB,
202 );
203 });
204 expect(store).toMatchInlineSnapshot(`
205 [root]
206 ▾ <Parent key="A">
207 ▾ <div>
208 ▾ <Child key="0">
209 <div>
210 ▾ <Child key="1">
211 <div>
212 ▾ <Child key="2">
213 <div>
214 ▾ <Child key="3">
215 <div>
216 [root]
217 ▾ <Parent key="B">
218 ▾ <div>
219 ▾ <Child key="0">
220 <div>
221 `);
222 act(() => ReactDOM.unmountComponentAtNode(containerB));
223 expect(store).toMatchInlineSnapshot(`
224 [root]
225 ▾ <Parent key="A">
226 ▾ <div>
227 ▾ <Child key="0">
228 <div>
229 ▾ <Child key="1">
230 <div>
231 ▾ <Child key="2">
232 <div>
233 ▾ <Child key="3">
234 <div>
235 `);
236 act(() => ReactDOM.unmountComponentAtNode(containerA));
237 expect(store).toMatchInlineSnapshot(``);
238 });
239 it('should not filter DOM nodes from the store tree', () => {
240 const Grandparent = ({flip}) =>
241 React.createElement(
242 'div',
243 null,
244 React.createElement(
245 'div',
246 null,
247 React.createElement(Parent, {
248 flip: flip,
249 }),
250 ),
251 React.createElement(Parent, {
252 flip: flip,
253 }),
254 React.createElement(Nothing, null),
255 );
256 const Parent = ({flip}) =>
257 React.createElement(
258 'div',
259 null,
260 flip ? 'foo' : null,
261 React.createElement(Child, null),
262 flip && [null, 'hello', 42],
263 flip ? 'bar' : 'baz',
264 );
265 const Child = () => React.createElement('div', null, 'Hi!');
266 const Nothing = () => null;
267 const container = document.createElement('div');
268 act(() =>
269 ReactDOM.render(
270 React.createElement(Grandparent, {
271 count: 4,
272 flip: false,
273 }),
274 container,
275 ),
276 );
277 expect(store).toMatchInlineSnapshot(`
278 [root]
279 ▾ <Grandparent>
280 ▾ <div>
281 ▾ <div>
282 ▾ <Parent>
283 ▾ <div>
284 ▾ <Child>
285 <div>
286 ▾ <Parent>
287 ▾ <div>
288 ▾ <Child>
289 <div>
290 <Nothing>
291 `);
292 act(() =>
293 ReactDOM.render(
294 React.createElement(Grandparent, {
295 count: 4,
296 flip: true,
297 }),
298 container,
299 ),
300 );
301 expect(store).toMatchInlineSnapshot(`
302 [root]
303 ▾ <Grandparent>
304 ▾ <div>
305 ▾ <div>
306 ▾ <Parent>
307 ▾ <div>
308 ▾ <Child>
309 <div>
310 ▾ <Parent>
311 ▾ <div>
312 ▾ <Child>
313 <div>
314 <Nothing>
315 `);
316 act(() => ReactDOM.unmountComponentAtNode(container));
317 expect(store).toMatchInlineSnapshot(``);
318 });
319 it('should support collapsing parts of the tree', () => {
320 const Grandparent = ({count}) =>
321 React.createElement(
322 'div',
323 null,
324 React.createElement(Parent, {
325 count: count,
326 }),
327 React.createElement(Parent, {
328 count: count,
329 }),
330 );
331 const Parent = ({count}) =>
332 React.createElement(
333 'div',
334 null,
335 new Array(count).fill(true).map((_, index) =>
336 React.createElement(Child, {
337 key: index,
338 }),
339 ),
340 );
341 const Child = () => React.createElement('div', null, 'Hi!');
342 act(() =>
343 ReactDOM.render(
344 React.createElement(Grandparent, {
345 count: 2,
346 }),
347 document.createElement('div'),
348 ),
349 );
350 expect(store).toMatchInlineSnapshot(`
351 [root]
352 ▾ <Grandparent>
353 ▾ <div>
354 ▾ <Parent>
355 ▾ <div>
356 ▾ <Child key="0">
357 <div>
358 ▾ <Child key="1">
359 <div>
360 ▾ <Parent>
361 ▾ <div>
362 ▾ <Child key="0">
363 <div>
364 ▾ <Child key="1">
365 <div>
366 `);
367 const grandparentID = store.getElementIDAtIndex(0);
368 const parentOneID = store.getElementIDAtIndex(2);
369 const parentTwoID = store.getElementIDAtIndex(8);
370 act(() => store.toggleIsCollapsed(parentOneID, true));
371 expect(store).toMatchInlineSnapshot(`
372 [root]
373 ▾ <Grandparent>
374 ▾ <div>
375 ▸ <Parent>
376 ▾ <Parent>
377 ▾ <div>
378 ▾ <Child key="0">
379 <div>
380 ▾ <Child key="1">
381 <div>
382 `);
383 act(() => store.toggleIsCollapsed(parentTwoID, true));
384 expect(store).toMatchInlineSnapshot(`
385 [root]
386 ▾ <Grandparent>
387 ▾ <div>
388 ▸ <Parent>
389 ▸ <Parent>
390 `);
391 act(() => store.toggleIsCollapsed(parentOneID, false));
392 expect(store).toMatchInlineSnapshot(`
393 [root]
394 ▾ <Grandparent>
395 ▾ <div>
396 ▾ <Parent>
397 ▾ <div>
398 ▾ <Child key="0">
399 <div>
400 ▾ <Child key="1">
401 <div>
402 ▸ <Parent>
403 `);
404 act(() => store.toggleIsCollapsed(grandparentID, true));
405 expect(store).toMatchInlineSnapshot(`
406 [root]
407 ▸ <Grandparent>
408 `);
409 act(() => store.toggleIsCollapsed(grandparentID, false));
410 expect(store).toMatchInlineSnapshot(`
411 [root]
412 ▾ <Grandparent>
413 ▾ <div>
414 ▾ <Parent>
415 ▾ <div>
416 ▾ <Child key="0">
417 <div>
418 ▾ <Child key="1">
419 <div>
420 ▸ <Parent>
421 `);
422 });
423 it('should support adding and removing children', () => {
424 const Root = ({children}) => React.createElement('div', null, children);
425 const Component = () => React.createElement('div', null);
426 const container = document.createElement('div');
427 act(() =>
428 ReactDOM.render(
429 React.createElement(
430 Root,
431 null,
432 React.createElement(Component, {
433 key: 'a',
434 }),
435 ),
436 container,
437 ),
438 );
439 expect(store).toMatchInlineSnapshot(`
440 [root]
441 ▾ <Root>
442 ▾ <div>
443 ▾ <Component key="a">
444 <div>
445 `);
446 act(() =>
447 ReactDOM.render(
448 React.createElement(
449 Root,
450 null,
451 React.createElement(Component, {
452 key: 'a',
453 }),
454 React.createElement(Component, {
455 key: 'b',
456 }),
457 ),
458 container,
459 ),
460 );
461 expect(store).toMatchInlineSnapshot(`
462 [root]
463 ▾ <Root>
464 ▾ <div>
465 ▾ <Component key="a">
466 <div>
467 ▾ <Component key="b">
468 <div>
469 `);
470 act(() =>
471 ReactDOM.render(
472 React.createElement(
473 Root,
474 null,
475 React.createElement(Component, {
476 key: 'b',
477 }),
478 ),
479 container,
480 ),
481 );
482 expect(store).toMatchInlineSnapshot(`
483 [root]
484 ▾ <Root>
485 ▾ <div>
486 ▾ <Component key="b">
487 <div>
488 `);
489 });
490 it('should support reordering of children', () => {
491 const Root = ({children}) => React.createElement('div', null, children);
492 const Component = () => React.createElement('div', null);
493 const Foo = () =>
494 React.createElement('div', null, [
495 React.createElement(Component, {
496 key: '0',
497 }),
498 ]);
499 const Bar = () =>
500 React.createElement('div', null, [
501 React.createElement(Component, {
502 key: '0',
503 }),
504 React.createElement(Component, {
505 key: '1',
506 }),
507 ]);
508 const foo = React.createElement(Foo, {
509 key: 'foo',
510 });
511 const bar = React.createElement(Bar, {
512 key: 'bar',
513 });
514 const container = document.createElement('div');
515 act(() =>
516 ReactDOM.render(React.createElement(Root, null, [foo, bar]), container),
517 );
518 expect(store).toMatchInlineSnapshot(`
519 [root]
520 ▾ <Root>
521 ▾ <div>
522 ▾ <Foo key="foo">
523 ▾ <div>
524 ▾ <Component key="0">
525 <div>
526 ▾ <Bar key="bar">
527 ▾ <div>
528 ▾ <Component key="0">
529 <div>
530 ▾ <Component key="1">
531 <div>
532 `);
533 act(() =>
534 ReactDOM.render(React.createElement(Root, null, [bar, foo]), container),
535 );
536 expect(store).toMatchInlineSnapshot(`
537 [root]
538 ▾ <Root>
539 ▾ <div>
540 ▾ <Bar key="bar">
541 ▾ <div>
542 ▾ <Component key="0">
543 <div>
544 ▾ <Component key="1">
545 <div>
546 ▾ <Foo key="foo">
547 ▾ <div>
548 ▾ <Component key="0">
549 <div>
550 `);
551 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
552 expect(store).toMatchInlineSnapshot(`
553 [root]
554 ▸ <Root>
555 `);
556 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
557 expect(store).toMatchInlineSnapshot(`
558 [root]
559 ▾ <Root>
560 ▾ <div>
561 ▾ <Bar key="bar">
562 ▾ <div>
563 ▾ <Component key="0">
564 <div>
565 ▾ <Component key="1">
566 <div>
567 ▾ <Foo key="foo">
568 ▾ <div>
569 ▾ <Component key="0">
570 <div>
571 `);
572 });
573 });
574 describe('collapseNodesByDefault:true', () => {
575 beforeEach(() => {
576 store.collapseNodesByDefault = true;
577 });
578 it('should support mount and update operations', () => {
579 const Parent = ({count}) =>
580 React.createElement(
581 'div',
582 null,
583 new Array(count).fill(true).map((_, index) =>
584 React.createElement(Child, {
585 key: index,
586 }),
587 ),
588 );
589 const Child = () => React.createElement('div', null, 'Hi!');
590 const container = document.createElement('div');
591 act(() =>
592 ReactDOM.render(
593 React.createElement(
594 'div',
595 null,
596 React.createElement(Parent, {
597 count: 1,
598 }),
599 React.createElement(Parent, {
600 count: 3,
601 }),
602 ),
603 container,
604 ),
605 );
606 expect(store).toMatchInlineSnapshot(`
607 [root]
608 ▸ <div>
609 `);
610 act(() =>
611 ReactDOM.render(
612 React.createElement(
613 'div',
614 null,
615 React.createElement(Parent, {
616 count: 2,
617 }),
618 React.createElement(Parent, {
619 count: 1,
620 }),
621 ),
622 container,
623 ),
624 );
625 expect(store).toMatchInlineSnapshot(`
626 [root]
627 ▸ <div>
628 `);
629 act(() => ReactDOM.unmountComponentAtNode(container));
630 expect(store).toMatchInlineSnapshot(``);
631 });
632 it('should support mount and update operations for multiple roots', () => {
633 const Parent = ({count}) =>
634 React.createElement(
635 'div',
636 null,
637 new Array(count).fill(true).map((_, index) =>
638 React.createElement(Child, {
639 key: index,
640 }),
641 ),
642 );
643 const Child = () => React.createElement('div', null, 'Hi!');
644 const containerA = document.createElement('div');
645 const containerB = document.createElement('div');
646 act(() => {
647 ReactDOM.render(
648 React.createElement(Parent, {
649 key: 'A',
650 count: 3,
651 }),
652 containerA,
653 );
654 ReactDOM.render(
655 React.createElement(Parent, {
656 key: 'B',
657 count: 2,
658 }),
659 containerB,
660 );
661 });
662 expect(store).toMatchInlineSnapshot(`
663 [root]
664 ▸ <Parent key="A">
665 [root]
666 ▸ <Parent key="B">
667 `);
668 act(() => {
669 ReactDOM.render(
670 React.createElement(Parent, {
671 key: 'A',
672 count: 4,
673 }),
674 containerA,
675 );
676 ReactDOM.render(
677 React.createElement(Parent, {
678 key: 'B',
679 count: 1,
680 }),
681 containerB,
682 );
683 });
684 expect(store).toMatchInlineSnapshot(`
685 [root]
686 ▸ <Parent key="A">
687 [root]
688 ▸ <Parent key="B">
689 `);
690 act(() => ReactDOM.unmountComponentAtNode(containerB));
691 expect(store).toMatchInlineSnapshot(`
692 [root]
693 ▸ <Parent key="A">
694 `);
695 act(() => ReactDOM.unmountComponentAtNode(containerA));
696 expect(store).toMatchInlineSnapshot(``);
697 });
698 it('should not filter DOM nodes from the store tree', () => {
699 const Grandparent = ({flip}) =>
700 React.createElement(
701 'div',
702 null,
703 React.createElement(
704 'div',
705 null,
706 React.createElement(Parent, {
707 flip: flip,
708 }),
709 ),
710 React.createElement(Parent, {
711 flip: flip,
712 }),
713 React.createElement(Nothing, null),
714 );
715 const Parent = ({flip}) =>
716 React.createElement(
717 'div',
718 null,
719 flip ? 'foo' : null,
720 React.createElement(Child, null),
721 flip && [null, 'hello', 42],
722 flip ? 'bar' : 'baz',
723 );
724 const Child = () => React.createElement('div', null, 'Hi!');
725 const Nothing = () => null;
726 const container = document.createElement('div');
727 act(() =>
728 ReactDOM.render(
729 React.createElement(Grandparent, {
730 count: 4,
731 flip: false,
732 }),
733 container,
734 ),
735 );
736 expect(store).toMatchInlineSnapshot(`
737 [root]
738 ▸ <Grandparent>
739 `);
740 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
741 expect(store).toMatchInlineSnapshot(`
742 [root]
743 ▾ <Grandparent>
744 ▸ <div>
745 `);
746 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
747 expect(store).toMatchInlineSnapshot(`
748 [root]
749 ▾ <Grandparent>
750 ▾ <div>
751 ▸ <div>
752 ▸ <Parent>
753 <Nothing>
754 `);
755 act(() =>
756 ReactDOM.render(
757 React.createElement(Grandparent, {
758 count: 4,
759 flip: true,
760 }),
761 container,
762 ),
763 );
764 expect(store).toMatchInlineSnapshot(`
765 [root]
766 ▾ <Grandparent>
767 ▾ <div>
768 ▸ <div>
769 ▸ <Parent>
770 <Nothing>
771 `);
772 act(() => ReactDOM.unmountComponentAtNode(container));
773 expect(store).toMatchInlineSnapshot(``);
774 });
775 it('should support expanding parts of the tree', () => {
776 const Grandparent = ({count}) =>
777 React.createElement(
778 'div',
779 null,
780 React.createElement(Parent, {
781 count: count,
782 }),
783 React.createElement(Parent, {
784 count: count,
785 }),
786 );
787 const Parent = ({count}) =>
788 React.createElement(
789 'div',
790 null,
791 new Array(count).fill(true).map((_, index) =>
792 React.createElement(Child, {
793 key: index,
794 }),
795 ),
796 );
797 const Child = () => React.createElement('div', null, 'Hi!');
798 act(() =>
799 ReactDOM.render(
800 React.createElement(Grandparent, {
801 count: 2,
802 }),
803 document.createElement('div'),
804 ),
805 );
806 expect(store).toMatchInlineSnapshot(`
807 [root]
808 ▸ <Grandparent>
809 `);
810 const grandparentID = store.getElementIDAtIndex(0);
811 act(() => store.toggleIsCollapsed(grandparentID, false));
812 expect(store).toMatchInlineSnapshot(`
813 [root]
814 ▾ <Grandparent>
815 ▸ <div>
816 `);
817 const parentDivID = store.getElementIDAtIndex(1);
818 act(() => store.toggleIsCollapsed(parentDivID, false));
819 expect(store).toMatchInlineSnapshot(`
820 [root]
821 ▾ <Grandparent>
822 ▾ <div>
823 ▸ <Parent>
824 ▸ <Parent>
825 `);
826 const parentOneID = store.getElementIDAtIndex(2);
827 const parentTwoID = store.getElementIDAtIndex(3);
828 act(() => store.toggleIsCollapsed(parentOneID, false));
829 expect(store).toMatchInlineSnapshot(`
830 [root]
831 ▾ <Grandparent>
832 ▾ <div>
833 ▾ <Parent>
834 ▸ <div>
835 ▸ <Parent>
836 `);
837 act(() => store.toggleIsCollapsed(parentTwoID, false));
838 expect(store).toMatchInlineSnapshot(`
839 [root]
840 ▾ <Grandparent>
841 ▾ <div>
842 ▾ <Parent>
843 ▸ <div>
844 ▾ <Parent>
845 ▸ <div>
846 `);
847 act(() => store.toggleIsCollapsed(parentOneID, true));
848 expect(store).toMatchInlineSnapshot(`
849 [root]
850 ▾ <Grandparent>
851 ▾ <div>
852 ▸ <Parent>
853 ▾ <Parent>
854 ▸ <div>
855 `);
856 act(() => store.toggleIsCollapsed(parentTwoID, true));
857 expect(store).toMatchInlineSnapshot(`
858 [root]
859 ▾ <Grandparent>
860 ▾ <div>
861 ▸ <Parent>
862 ▸ <Parent>
863 `);
864 act(() => store.toggleIsCollapsed(grandparentID, true));
865 expect(store).toMatchInlineSnapshot(`
866 [root]
867 ▸ <Grandparent>
868 `);
869 });
870
871 it('should support reordering of children', () => {
872 const Root = ({children}) => React.createElement('div', null, children);
873 const Component = () => React.createElement('div', null);
874 const Foo = () =>
875 React.createElement('div', null, [
876 React.createElement(Component, {
877 key: '0',
878 }),
879 ]);
880 const Bar = () =>
881 React.createElement('div', null, [
882 React.createElement(Component, {
883 key: '0',
884 }),
885 React.createElement(Component, {
886 key: '1',
887 }),
888 ]);
889 const foo = React.createElement(Foo, {
890 key: 'foo',
891 });
892 const bar = React.createElement(Bar, {
893 key: 'bar',
894 });
895 const container = document.createElement('div');
896 act(() =>
897 ReactDOM.render(React.createElement(Root, null, [foo, bar]), container),
898 );
899 expect(store).toMatchInlineSnapshot(`
900 [root]
901 ▸ <Root>
902 `);
903 act(() =>
904 ReactDOM.render(React.createElement(Root, null, [bar, foo]), container),
905 );
906 expect(store).toMatchInlineSnapshot(`
907 [root]
908 ▸ <Root>
909 `);
910 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
911 expect(store).toMatchInlineSnapshot(`
912 [root]
913 ▾ <Root>
914 ▸ <div>
915 `);
916 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
917 expect(store).toMatchInlineSnapshot(`
918 [root]
919 ▾ <Root>
920 ▾ <div>
921 ▸ <Bar key="bar">
922 ▸ <Foo key="foo">
923 `);
924 act(() => {
925 store.toggleIsCollapsed(store.getElementIDAtIndex(3), false);
926 store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);
927 });
928 expect(store).toMatchInlineSnapshot(`
929 [root]
930 ▾ <Root>
931 ▾ <div>
932 ▾ <Bar key="bar">
933 ▸ <div>
934 ▾ <Foo key="foo">
935 ▸ <div>
936 `);
937 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
938 expect(store).toMatchInlineSnapshot(`
939 [root]
940 ▸ <Root>
941 `);
942 });
943 });
944 describe('StrictMode compliance', () => {
945 it('should mark all elements as strict mode compliant', () => {
946 const App = () => null;
947 const container = document.createElement('div');
948 act(() => ReactDOM.render(React.createElement(App, null), container));
949 expect(store.getElementAtIndex(0).isStrictModeNonCompliant).toBe(false);
950 });
951 });
952 });