How to use traverseAllChildren method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

traverseAllChildren-test.js

Source: traverseAllChildren-test.js Github

copy
1/**
2 * Copyright 2013-2015, Facebook, Inc.
3 * All rights reserved.
4 *
5 * This source code is licensed under the BSD-style license found in the
6 * LICENSE file in the root directory of this source tree. An additional grant
7 * of patent rights can be found in the PATENTS file in the same directory.
8 *
9 * @emails react-core
10 */
11
12'use strict';
13
14describe('traverseAllChildren', function() {
15  var traverseAllChildren;
16  var React;
17  var ReactFragment;
18  beforeEach(function() {
19    require('mock-modules').dumpCache();
20    traverseAllChildren = require('traverseAllChildren');
21    React = require('React');
22    ReactFragment = require('ReactFragment');
23  });
24
25  function frag(obj) {
26    return ReactFragment.create(obj);
27  }
28
29  it('should support identity for simple', function() {
30    var traverseContext = [];
31    var traverseFn =
32      jasmine.createSpy().andCallFake(function(context, kid, key, index) {
33        context.push(true);
34      });
35
36    var simpleKid = <span key="simple" />;
37
38    // Jasmine doesn't provide a way to test that the fn was invoked with scope.
39    var instance = <div>{simpleKid}</div>;
40    traverseAllChildren(instance.props.children, traverseFn, traverseContext);
41    expect(traverseFn).toHaveBeenCalledWith(
42      traverseContext,
43      simpleKid,
44      '.$simple'
45    );
46    expect(traverseContext.length).toEqual(1);
47  });
48
49  it('should treat single arrayless child as being in array', function() {
50    var traverseContext = [];
51    var traverseFn =
52      jasmine.createSpy().andCallFake(function(context, kid, key, index) {
53        context.push(true);
54      });
55
56    var simpleKid = <span />;
57    var instance = <div>{simpleKid}</div>;
58    traverseAllChildren(instance.props.children, traverseFn, traverseContext);
59    expect(traverseFn).toHaveBeenCalledWith(
60      traverseContext,
61      simpleKid,
62      '.0'
63    );
64    expect(traverseContext.length).toEqual(1);
65  });
66
67  it('should treat single child in array as expected', function() {
68    spyOn(console, 'error');
69    var traverseContext = [];
70    var traverseFn =
71      jasmine.createSpy().andCallFake(function(context, kid, key, index) {
72        context.push(true);
73      });
74
75    var simpleKid = <span />;
76    var instance = <div>{[simpleKid]}</div>;
77    traverseAllChildren(instance.props.children, traverseFn, traverseContext);
78    expect(traverseFn).toHaveBeenCalledWith(
79      traverseContext,
80      simpleKid,
81      '.0'
82    );
83    expect(traverseContext.length).toEqual(1);
84    expect(console.error.calls.length).toBe(1);
85    expect(console.error.calls[0].args[0]).toContain('Warning: Each child in an array or iterator should have a unique "key" prop.');
86  });
87
88  it('should be called for each child', function() {
89    var zero = <div key="keyZero" />;
90    var one = null;
91    var two = <div key="keyTwo" />;
92    var three = null;
93    var four = <div key="keyFour" />;
94
95    var traverseContext = [];
96    var traverseFn =
97      jasmine.createSpy().andCallFake(function(context, kid, key, index) {
98        context.push(true);
99      });
100
101    var instance = (
102      <div>
103        {zero}
104        {one}
105        {two}
106        {three}
107        {four}
108      </div>
109    );
110
111    traverseAllChildren(instance.props.children, traverseFn, traverseContext);
112    expect(traverseFn).toHaveBeenCalledWith(
113      traverseContext,
114      zero,
115      '.$keyZero'
116    );
117    expect(traverseFn).toHaveBeenCalledWith(traverseContext, one, '.1');
118    expect(traverseFn).toHaveBeenCalledWith(
119      traverseContext,
120      two,
121      '.$keyTwo'
122    );
123    expect(traverseFn).toHaveBeenCalledWith(traverseContext, three, '.3');
124    expect(traverseFn).toHaveBeenCalledWith(
125      traverseContext,
126      four,
127      '.$keyFour'
128    );
129  });
130
131  it('should traverse children of different kinds', function() {
132    var div = <div key="divNode" />;
133    var span = <span key="spanNode" />;
134    var a = <a key="aNode" />;
135
136    var traverseContext = [];
137    var traverseFn =
138      jasmine.createSpy().andCallFake(function(context, kid, key, index) {
139        context.push(true);
140      });
141
142    var instance = (
143      <div>
144        {div}
145        {[frag({span})]}
146        {frag({a: a})}
147        {'string'}
148        {1234}
149        {true}
150        {false}
151        {null}
152        {undefined}
153      </div>
154    );
155
156    traverseAllChildren(instance.props.children, traverseFn, traverseContext);
157
158    expect(traverseFn.calls.length).toBe(9);
159    expect(traverseContext.length).toEqual(9);
160
161    expect(traverseFn).toHaveBeenCalledWith(
162      traverseContext, div, '.$divNode'
163    );
164    expect(traverseFn).toHaveBeenCalledWith(
165      traverseContext, <span key="span/.$spanNode" />, '.1:0:$span/=1$spanNode'
166    );
167    expect(traverseFn).toHaveBeenCalledWith(
168      traverseContext, <a key="a/.$aNode" />, '.2:$a/=1$aNode'
169    );
170    expect(traverseFn).toHaveBeenCalledWith(
171      traverseContext, 'string', '.3'
172    );
173    expect(traverseFn).toHaveBeenCalledWith(
174      traverseContext, 1234, '.4'
175    );
176    expect(traverseFn).toHaveBeenCalledWith(
177      traverseContext, null, '.5'
178    );
179    expect(traverseFn).toHaveBeenCalledWith(
180      traverseContext, null, '.6'
181    );
182    expect(traverseFn).toHaveBeenCalledWith(
183      traverseContext, null, '.7'
184    );
185    expect(traverseFn).toHaveBeenCalledWith(
186      traverseContext, null, '.8'
187    );
188  });
189
190  it('should be called for each child in nested structure', function() {
191    var zero = <div key="keyZero" />;
192    var one = null;
193    var two = <div key="keyTwo" />;
194    var three = null;
195    var four = <div key="keyFour" />;
196    var five = <div key="keyFiveInner" />;
197    // five is placed into a JS object with a key that is joined to the
198    // component key attribute.
199    // Precedence is as follows:
200    // 1. If grouped in an Object, the object key combined with `key` prop
201    // 2. If grouped in an Array, the `key` prop, falling back to array index
202
203
204    var traverseContext = [];
205    var traverseFn =
206      jasmine.createSpy().andCallFake(function(context, kid, key, index) {
207        context.push(true);
208      });
209
210    var instance = (
211      <div>{
212        [
213          frag({
214            firstHalfKey: [zero, one, two],
215            secondHalfKey: [three, four],
216            keyFive: five,
217          }),
218        ]
219      }</div>
220    );
221
222    traverseAllChildren(instance.props.children, traverseFn, traverseContext);
223    expect(traverseFn.calls.length).toBe(4);
224    expect(traverseContext.length).toEqual(4);
225    expect(traverseFn).toHaveBeenCalledWith(
226      traverseContext,
227      <div key="firstHalfKey/.$keyZero" />,
228      '.0:$firstHalfKey/=1$keyZero'
229    );
230
231    expect(traverseFn).toHaveBeenCalledWith(
232      traverseContext,
233      <div key="firstHalfKey/.$keyTwo" />,
234      '.0:$firstHalfKey/=1$keyTwo'
235    );
236
237    expect(traverseFn).toHaveBeenCalledWith(
238      traverseContext,
239      <div key="secondHalfKey/.$keyFour" />,
240      '.0:$secondHalfKey/=1$keyFour'
241    );
242
243    expect(traverseFn).toHaveBeenCalledWith(
244      traverseContext,
245      <div key="keyFive/.$keyFiveInner" />,
246      '.0:$keyFive/=1$keyFiveInner'
247    );
248  });
249
250  it('should retain key across two mappings', function() {
251    var zeroForceKey = <div key="keyZero" />;
252    var oneForceKey = <div key="keyOne" />;
253    var traverseContext = [];
254    var traverseFn =
255      jasmine.createSpy().andCallFake(function(context, kid, key, index) {
256        context.push(true);
257      });
258
259    var forcedKeys = (
260      <div>
261        {zeroForceKey}
262        {oneForceKey}
263      </div>
264    );
265
266    traverseAllChildren(forcedKeys.props.children, traverseFn, traverseContext);
267    expect(traverseContext.length).toEqual(2);
268    expect(traverseFn).toHaveBeenCalledWith(
269      traverseContext,
270      zeroForceKey,
271      '.$keyZero'
272    );
273    expect(traverseFn).toHaveBeenCalledWith(
274      traverseContext,
275      oneForceKey,
276      '.$keyOne'
277    );
278  });
279
280  it('should be called for each child in an iterable without keys', function() {
281    spyOn(console, 'error');
282    var threeDivIterable = {
283      '@@iterator': function() {
284        var i = 0;
285        return {
286          next: function() {
287            if (i++ < 3) {
288              return {value: <div />, done: false};
289            } else {
290              return {value: undefined, done: true};
291            }
292          },
293        };
294      },
295    };
296
297    var traverseContext = [];
298    var traverseFn =
299      jasmine.createSpy().andCallFake(function(context, kid, key, index) {
300        context.push(kid);
301      });
302
303    var instance = (
304      <div>
305        {threeDivIterable}
306      </div>
307    );
308
309    traverseAllChildren(instance.props.children, traverseFn, traverseContext);
310    expect(traverseFn.calls.length).toBe(3);
311
312    expect(traverseFn).toHaveBeenCalledWith(
313      traverseContext,
314      traverseContext[0],
315      '.0'
316    );
317    expect(traverseFn).toHaveBeenCalledWith(
318      traverseContext,
319      traverseContext[1],
320      '.1'
321    );
322    expect(traverseFn).toHaveBeenCalledWith(
323      traverseContext,
324      traverseContext[2],
325      '.2'
326    );
327
328    expect(console.error.calls.length).toBe(1);
329    expect(console.error.calls[0].args[0]).toContain('Warning: Each child in an array or iterator should have a unique "key" prop.');
330  });
331
332  it('should be called for each child in an iterable with keys', function() {
333    var threeDivIterable = {
334      '@@iterator': function() {
335        var i = 0;
336        return {
337          next: function() {
338            if (i++ < 3) {
339              return {value: <div key={'#' + i} />, done: false};
340            } else {
341              return {value: undefined, done: true};
342            }
343          },
344        };
345      },
346    };
347
348    var traverseContext = [];
349    var traverseFn =
350      jasmine.createSpy().andCallFake(function(context, kid, key, index) {
351        context.push(kid);
352      });
353
354    var instance = (
355      <div>
356        {threeDivIterable}
357      </div>
358    );
359
360    traverseAllChildren(instance.props.children, traverseFn, traverseContext);
361    expect(traverseFn.calls.length).toBe(3);
362
363    expect(traverseFn).toHaveBeenCalledWith(
364      traverseContext,
365      traverseContext[0],
366      '.$#1'
367    );
368    expect(traverseFn).toHaveBeenCalledWith(
369      traverseContext,
370      traverseContext[1],
371      '.$#2'
372    );
373    expect(traverseFn).toHaveBeenCalledWith(
374      traverseContext,
375      traverseContext[2],
376      '.$#3'
377    );
378  });
379
380  it('should use keys from entry iterables', function() {
381    spyOn(console, 'error');
382
383    var threeDivEntryIterable = {
384      '@@iterator': function() {
385        var i = 0;
386        return {
387          next: function() {
388            if (i++ < 3) {
389              return {value: ['#' + i, <div />], done: false};
390            } else {
391              return {value: undefined, done: true};
392            }
393          },
394        };
395      },
396    };
397    threeDivEntryIterable.entries = threeDivEntryIterable['@@iterator'];
398
399    var traverseContext = [];
400    var traverseFn =
401      jasmine.createSpy().andCallFake(function(context, kid, key, index) {
402        context.push(kid);
403      });
404
405    var instance = (
406      <div>
407        {threeDivEntryIterable}
408      </div>
409    );
410
411    traverseAllChildren(instance.props.children, traverseFn, traverseContext);
412    expect(traverseFn.calls.length).toBe(3);
413
414    expect(traverseFn).toHaveBeenCalledWith(
415      traverseContext,
416      traverseContext[0],
417      '.$#1:0'
418    );
419    expect(traverseFn).toHaveBeenCalledWith(
420      traverseContext,
421      traverseContext[1],
422      '.$#2:0'
423    );
424    expect(traverseFn).toHaveBeenCalledWith(
425      traverseContext,
426      traverseContext[2],
427      '.$#3:0'
428    );
429
430    expect(console.error.argsForCall.length).toBe(1);
431    expect(console.error.argsForCall[0][0]).toContain(
432      'Warning: Using Maps as children is not yet fully supported. It is an ' +
433      'experimental feature that might be removed. Convert it to a sequence ' +
434      '/ iterable of keyed ReactElements instead.'
435    );
436  });
437
438  it('should not enumerate enumerable numbers (#4776)', function() {
439    /*eslint-disable no-extend-native */
440    Number.prototype['@@iterator'] = function() {
441      throw new Error('number iterator called');
442    };
443    /*eslint-enable no-extend-native */
444
445    try {
446      var instance = (
447        <div>
448          {5}
449          {12}
450          {13}
451        </div>
452      );
453
454      var traverseFn = jasmine.createSpy();
455
456      traverseAllChildren(instance.props.children, traverseFn, null);
457      expect(traverseFn.calls.length).toBe(3);
458
459      expect(traverseFn).toHaveBeenCalledWith(
460        null,
461        5,
462        '.0'
463      );
464      expect(traverseFn).toHaveBeenCalledWith(
465        null,
466        12,
467        '.1'
468      );
469      expect(traverseFn).toHaveBeenCalledWith(
470        null,
471        13,
472        '.2'
473      );
474    } finally {
475      delete Number.prototype['@@iterator'];
476    }
477  });
478
479  it('should throw on object', function() {
480    expect(function() {
481      traverseAllChildren({a: 1, b: 2}, function() {}, null);
482    }).toThrow(
483      'Objects are not valid as a React child (found: object with keys ' +
484      '{a, b}). If you meant to render a collection of children, use an ' +
485      'array instead or wrap the object using createFragment(object) from ' +
486      'the React add-ons.'
487    );
488  });
489
490  it('should throw on regex', function() {
491    // Really, we care about dates (#4840) but those have nondeterministic
492    // serialization (timezones) so let's test a regex instead:
493    expect(function() {
494      traverseAllChildren(/abc/, function() {}, null);
495    }).toThrow(
496      'Objects are not valid as a React child (found: /abc/). If you meant ' +
497      'to render a collection of children, use an array instead or wrap the ' +
498      'object using createFragment(object) from the React add-ons.'
499    );
500  });
501
502});
503
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)