@samitouri / QOS-React-2
Code Commits Issues Pulls Sessions CI/CD
main
main
js 269 lines 5.91 KB
Raw
1 import {groupAndSortNodes} from 'react-devtools-shared/src/backend/views/TraceUpdates/canvas';
2
3 describe('Trace updates group and sort nodes', () => {
4 test('should group nodes by position without changing order within group', () => {
5 const nodeToData = new Map([
6 [
7 {id: 1},
8 {
9 rect: {left: 0, top: 0, width: 100, height: 100},
10 color: '#80b393',
11 displayName: 'Node1',
12 count: 3,
13 },
14 ],
15 [
16 {id: 2},
17 {
18 rect: {left: 0, top: 0, width: 100, height: 100},
19 color: '#63b19e',
20 displayName: 'Node2',
21 count: 2,
22 },
23 ],
24 ]);
25
26 const result = groupAndSortNodes(nodeToData);
27
28 expect(result).toEqual([
29 [
30 {
31 rect: {left: 0, top: 0, width: 100, height: 100},
32 color: '#80b393',
33 displayName: 'Node1',
34 count: 3,
35 },
36 {
37 rect: {left: 0, top: 0, width: 100, height: 100},
38 color: '#63b19e',
39 displayName: 'Node2',
40 count: 2,
41 },
42 ],
43 ]);
44 });
45
46 test('should sort groups by lowest count in each group', () => {
47 const nodeToData = new Map([
48 [
49 {id: 1},
50 {
51 rect: {left: 0, top: 0, width: 100, height: 100},
52 color: '#97b488',
53 displayName: 'Group1',
54 count: 4,
55 },
56 ],
57 [
58 {id: 2},
59 {
60 rect: {left: 100, top: 0, width: 100, height: 100},
61 color: '#37afa9',
62 displayName: 'Group2',
63 count: 1,
64 },
65 ],
66 [
67 {id: 3},
68 {
69 rect: {left: 200, top: 0, width: 100, height: 100},
70 color: '#63b19e',
71 displayName: 'Group3',
72 count: 2,
73 },
74 ],
75 ]);
76
77 const result = groupAndSortNodes(nodeToData);
78
79 expect(result).toEqual([
80 [
81 {
82 rect: {left: 100, top: 0, width: 100, height: 100},
83 color: '#37afa9',
84 displayName: 'Group2',
85 count: 1,
86 },
87 ],
88 [
89 {
90 rect: {left: 200, top: 0, width: 100, height: 100},
91 color: '#63b19e',
92 displayName: 'Group3',
93 count: 2,
94 },
95 ],
96 [
97 {
98 rect: {left: 0, top: 0, width: 100, height: 100},
99 color: '#97b488',
100 displayName: 'Group1',
101 count: 4,
102 },
103 ],
104 ]);
105 });
106
107 test('should maintain order within groups while sorting groups by lowest count', () => {
108 const nodeToData = new Map([
109 [
110 {id: 1},
111 {
112 rect: {left: 0, top: 0, width: 50, height: 50},
113 color: '#97b488',
114 displayName: 'Pos1Node1',
115 count: 4,
116 },
117 ],
118 [
119 {id: 2},
120 {
121 rect: {left: 0, top: 0, width: 60, height: 60},
122 color: '#63b19e',
123 displayName: 'Pos1Node2',
124 count: 2,
125 },
126 ],
127 [
128 {id: 3},
129 {
130 rect: {left: 100, top: 0, width: 70, height: 70},
131 color: '#80b393',
132 displayName: 'Pos2Node1',
133 count: 3,
134 },
135 ],
136 [
137 {id: 4},
138 {
139 rect: {left: 100, top: 0, width: 80, height: 80},
140 color: '#37afa9',
141 displayName: 'Pos2Node2',
142 count: 1,
143 },
144 ],
145 ]);
146
147 const result = groupAndSortNodes(nodeToData);
148
149 expect(result).toEqual([
150 [
151 {
152 rect: {left: 100, top: 0, width: 70, height: 70},
153 color: '#80b393',
154 displayName: 'Pos2Node1',
155 count: 3,
156 },
157 {
158 rect: {left: 100, top: 0, width: 80, height: 80},
159 color: '#37afa9',
160 displayName: 'Pos2Node2',
161 count: 1,
162 },
163 ],
164 [
165 {
166 rect: {left: 0, top: 0, width: 50, height: 50},
167 color: '#97b488',
168 displayName: 'Pos1Node1',
169 count: 4,
170 },
171 {
172 rect: {left: 0, top: 0, width: 60, height: 60},
173 color: '#63b19e',
174 displayName: 'Pos1Node2',
175 count: 2,
176 },
177 ],
178 ]);
179 });
180
181 test('should handle multiple groups with same minimum count', () => {
182 const nodeToData = new Map([
183 [
184 {id: 1},
185 {
186 rect: {left: 0, top: 0, width: 100, height: 100},
187 color: '#37afa9',
188 displayName: 'Group1Node1',
189 count: 1,
190 },
191 ],
192 [
193 {id: 2},
194 {
195 rect: {left: 100, top: 0, width: 100, height: 100},
196 color: '#37afa9',
197 displayName: 'Group2Node1',
198 count: 1,
199 },
200 ],
201 ]);
202
203 const result = groupAndSortNodes(nodeToData);
204
205 expect(result).toEqual([
206 [
207 {
208 rect: {left: 0, top: 0, width: 100, height: 100},
209 color: '#37afa9',
210 displayName: 'Group1Node1',
211 count: 1,
212 },
213 ],
214 [
215 {
216 rect: {left: 100, top: 0, width: 100, height: 100},
217 color: '#37afa9',
218 displayName: 'Group2Node1',
219 count: 1,
220 },
221 ],
222 ]);
223 });
224
225 test('should filter out nodes without rect property', () => {
226 const nodeToData = new Map([
227 [
228 {id: 1},
229 {
230 rect: null,
231 color: '#37afa9',
232 displayName: 'NoRectNode',
233 count: 1,
234 },
235 ],
236 [
237 {id: 2},
238 {
239 rect: undefined,
240 color: '#63b19e',
241 displayName: 'UndefinedRectNode',
242 count: 2,
243 },
244 ],
245 [
246 {id: 3},
247 {
248 rect: {left: 0, top: 0, width: 100, height: 100},
249 color: '#80b393',
250 displayName: 'ValidNode',
251 count: 3,
252 },
253 ],
254 ]);
255
256 const result = groupAndSortNodes(nodeToData);
257
258 expect(result).toEqual([
259 [
260 {
261 rect: {left: 0, top: 0, width: 100, height: 100},
262 color: '#80b393',
263 displayName: 'ValidNode',
264 count: 3,
265 },
266 ],
267 ]);
268 });
269 });