@samitouri / QOS-React-2
Code Commits Issues Pulls Sessions CI/CD
main
main
js 218 lines 5.89 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 const {printOwnersList} = require('../devtools/utils');
11 const {getVersionedRenderImplementation} = require('./utils');
12
13 describe('Store owners list', () => {
14 let React;
15 let act;
16 let store;
17
18 beforeEach(() => {
19 store = global.store;
20 store.collapseNodesByDefault = false;
21
22 React = require('react');
23
24 const utils = require('./utils');
25 act = utils.act;
26 });
27
28 const {render} = getVersionedRenderImplementation();
29
30 function getFormattedOwnersList(elementID) {
31 const ownersList = store.getOwnersListForElement(elementID);
32 return printOwnersList(ownersList);
33 }
34
35 it('should drill through intermediate components', () => {
36 const Root = () => (
37 <Intermediate>
38 <div>
39 <Leaf />
40 </div>
41 </Intermediate>
42 );
43 const Wrapper = ({children}) => children;
44 const Leaf = () => <div>Leaf</div>;
45 const Intermediate = ({children}) => <Wrapper>{children}</Wrapper>;
46
47 act(() => render(<Root />));
48 expect(store).toMatchInlineSnapshot(`
49 [root]
50 ▾ <Root>
51 ▾ <Intermediate>
52 ▾ <Wrapper>
53 <Leaf>
54 `);
55
56 const rootID = store.getElementIDAtIndex(0);
57 expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
58 " ▾ <Root>
59 ▾ <Intermediate>
60 <Leaf>"
61 `);
62
63 const intermediateID = store.getElementIDAtIndex(1);
64 expect(getFormattedOwnersList(intermediateID)).toMatchInlineSnapshot(`
65 " ▾ <Intermediate>
66 ▾ <Wrapper>"
67 `);
68 });
69
70 it('should drill through interleaved intermediate components', () => {
71 const Root = () => [
72 <Intermediate key="intermediate">
73 <Leaf />
74 </Intermediate>,
75 <Leaf key="leaf" />,
76 ];
77 const Wrapper = ({children}) => children;
78 const Leaf = () => <div>Leaf</div>;
79 const Intermediate = ({children}) => [
80 <Leaf key="leaf" />,
81 <Wrapper key="wrapper">{children}</Wrapper>,
82 ];
83
84 act(() => render(<Root />));
85 expect(store).toMatchInlineSnapshot(`
86 [root]
87 ▾ <Root>
88 ▾ <Intermediate key="intermediate">
89 <Leaf key="leaf">
90 ▾ <Wrapper key="wrapper">
91 <Leaf>
92 <Leaf key="leaf">
93 `);
94
95 const rootID = store.getElementIDAtIndex(0);
96 expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
97 " ▾ <Root>
98 ▾ <Intermediate key="intermediate">
99 <Leaf>
100 <Leaf key="leaf">"
101 `);
102
103 const intermediateID = store.getElementIDAtIndex(1);
104 expect(getFormattedOwnersList(intermediateID)).toMatchInlineSnapshot(`
105 " ▾ <Intermediate key="intermediate">
106 <Leaf key="leaf">
107 ▾ <Wrapper key="wrapper">"
108 `);
109 });
110
111 it('should show the proper owners list order and contents after insertions and deletions', () => {
112 const Root = ({includeDirect, includeIndirect}) => (
113 <div>
114 {includeDirect ? <Leaf /> : null}
115 {includeIndirect ? (
116 <Intermediate>
117 <Leaf />
118 </Intermediate>
119 ) : null}
120 </div>
121 );
122 const Wrapper = ({children}) => children;
123 const Leaf = () => <div>Leaf</div>;
124 const Intermediate = ({children}) => <Wrapper>{children}</Wrapper>;
125
126 act(() => render(<Root includeDirect={false} includeIndirect={true} />));
127
128 const rootID = store.getElementIDAtIndex(0);
129 expect(store).toMatchInlineSnapshot(`
130 [root]
131 ▾ <Root>
132 ▾ <Intermediate>
133 ▾ <Wrapper>
134 <Leaf>
135 `);
136 expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
137 " ▾ <Root>
138 ▾ <Intermediate>
139 <Leaf>"
140 `);
141
142 act(() => render(<Root includeDirect={true} includeIndirect={true} />));
143 expect(store).toMatchInlineSnapshot(`
144 [root]
145 ▾ <Root>
146 <Leaf>
147 ▾ <Intermediate>
148 ▾ <Wrapper>
149 <Leaf>
150 `);
151 expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
152 " ▾ <Root>
153 <Leaf>
154 ▾ <Intermediate>
155 <Leaf>"
156 `);
157
158 act(() => render(<Root includeDirect={true} includeIndirect={false} />));
159 expect(store).toMatchInlineSnapshot(`
160 [root]
161 ▾ <Root>
162 <Leaf>
163 `);
164 expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
165 " ▾ <Root>
166 <Leaf>"
167 `);
168
169 act(() => render(<Root includeDirect={false} includeIndirect={false} />));
170 expect(store).toMatchInlineSnapshot(`
171 [root]
172 <Root>
173 `);
174 expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(
175 `" <Root>"`,
176 );
177 });
178
179 it('should show the proper owners list ordering after reordered children', () => {
180 const Root = ({ascending}) =>
181 ascending
182 ? [<Leaf key="A" />, <Leaf key="B" />, <Leaf key="C" />]
183 : [<Leaf key="C" />, <Leaf key="B" />, <Leaf key="A" />];
184 const Leaf = () => <div>Leaf</div>;
185
186 act(() => render(<Root ascending={true} />));
187
188 const rootID = store.getElementIDAtIndex(0);
189 expect(store).toMatchInlineSnapshot(`
190 [root]
191 ▾ <Root>
192 <Leaf key="A">
193 <Leaf key="B">
194 <Leaf key="C">
195 `);
196 expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
197 " ▾ <Root>
198 <Leaf key="A">
199 <Leaf key="B">
200 <Leaf key="C">"
201 `);
202
203 act(() => render(<Root ascending={false} />));
204 expect(store).toMatchInlineSnapshot(`
205 [root]
206 ▾ <Root>
207 <Leaf key="C">
208 <Leaf key="B">
209 <Leaf key="A">
210 `);
211 expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
212 " ▾ <Root>
213 <Leaf key="C">
214 <Leaf key="B">
215 <Leaf key="A">"
216 `);
217 });
218 });