How to use cloneAndReplaceKey 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.

Sign up Free
›
_
... View Documentation... View sample repo

BlockList.js

Source: BlockList.js Github

copy
1'use strict';
2
3import React, { PropTypes } from 'react';
4import ReactNative, { StyleSheet, View, Platform } from 'react-native';
5import ReactElement from 'react/lib/ReactElement';
6import LAB from 'lab4';
7
8export default class BlockList extends LAB.Component {
9  static propTypes = {
10    separateTop: PropTypes.bool,
11    separateBottom: PropTypes.bool,
12    line: PropTypes.object,
13    blank: PropTypes.object,
14  };
15
16  // static defaultProps = {};
17
18  constructor(props, context) {
19    super(props, context);
20  }
21
22  render() {
23    const rendered = (
24      <View
25        {...this.props}
26        style={[this.getStyle('container'), this.props.style]}
27      >
28        {this._renderChildrenWithSeparate()}
29      </View>
30    );
31    this._separate = undefined;
32    return rendered;
33  }
34
35  _renderChildrenWithSeparate() {
36    const arr = [];
37    if (this.props.separateTop) {
38      this._renderSeparate(arr, 'top-sp');
39    }
40
41    React.Children.forEach(this.props.children, (element, index) => {
42      if (element) {
43        if (element.key == null) {
44          arr.push(ReactElement.cloneAndReplaceKey(element, 'c-' + index));
45        } else {
46          arr.push(element);
47        }
48        this._renderSeparate(arr, 'sp-' + index);
49      }
50    });
51
52    if (!this.props.separateBottom && this._separate) {
53      arr.pop();
54    }
55
56    return arr;
57  }
58
59  _renderSeparate(arr, key) {
60    if (this._separate === undefined) {
61      if (this.props.line) {
62        this._separate = LAB.render(this.props.line, { key });
63        arr.push(this._separate);
64      } else if (this.props.blank) {
65        this._separate = LAB.render(this.props.blank, { key });
66        arr.push(this._separate);
67      } else {
68        this._separate = null;
69      }
70    } else if (this._separate) {
71      arr.push(ReactElement.cloneAndReplaceKey(this._separate, key));
72    }
73  }
74}
75
76const styles = StyleSheet.create({
77  container: {
78    flexGrow: 1,
79    flexShrink: 1,
80  },
81});
82BlockList.defaultStyles = styles;
83
Full Screen
...

Source: BlockList.js Github

'use strict';

import React, { PropTypes } from 'react';
import ReactNative, { StyleSheet, View, Platform } from 'react-native';
import ReactElement from 'react/lib/ReactElement';
import LAB from 'lab4';

export default class BlockList extends LAB.Component {
  static propTypes = {
    separateTop: PropTypes.bool,
    separateBottom: PropTypes.bool,
    line: PropTypes.object,
    blank: PropTypes.object,
  };

  // static defaultProps = {};

  constructor(props, context) {
    super(props, context);
  }

  render() {
    const rendered = (
      <View
        {...this.props}
        style={[this.getStyle('container'), this.props.style]}
      >
        {this._renderChildrenWithSeparate()}
      </View>
    );
    this._separate = undefined;
    return rendered;
  }

  _renderChildrenWithSeparate() {
    const arr = [];
    if (this.props.separateTop) {
      this._renderSeparate(arr, 'top-sp');
    }

    React.Children.forEach(this.props.children, (element, index) => {
      if (element) {
        if (element.key == null) {
          arr.push(ReactElement.cloneAndReplaceKey(element, 'c-' + index));
        } else {
          arr.push(element);
        }
        this._renderSeparate(arr, 'sp-' + index);
      }
    });

    if (!this.props.separateBottom && this._separate) {
      arr.pop();
    }

    return arr;
  }

  _renderSeparate(arr, key) {
    if (this._separate === undefined) {
      if (this.props.line) {
        this._separate = LAB.render(this.props.line, { key });
        arr.push(this._separate);
      } else if (this.props.blank) {
        this._separate = LAB.render(this.props.blank, { key });
        arr.push(this._separate);
      } else {
        this._separate = null;
      }
    } else if (this._separate) {
      arr.push(ReactElement.cloneAndReplaceKey(this._separate, key));
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    flexShrink: 1,
  },
});
BlockList.defaultStyles = styles;

ReactElement.js

Source: ReactElement.js Github

copy
1import REACT_ELEMENT_TYPE from './ReactElementSymbol'
2//过滤属性
3const RESERVED_PROPS = {
4    key: true,
5    ref: true,
6    __self: true,
7    __source: true
8};
9
10//当前调用组件指针
11const ReactCurrentOwner = {
12    current: null
13  };
14
15//self和owner，ref用生产不用 self, source
16const ReactElement = function (type, key, ref, self, source, owner, props) {
17
18  const element = {
19    $$typeof: REACT_ELEMENT_TYPE, //检测react对象，防XSS
20    //元素的内置属性
21    type: type,
22    key: key,
23    ref: ref,
24    props: props,
25
26    // 记录创建此元素的组件。
27    _owner: owner
28  };
29
30  return element;
31};
32
33//top-level-api createElement 格式化JSX对象
34ReactElement.createElement = function (type, config, children) {
35
36    //初始化属性
37    const props = {};
38    let propName;
39    let key = null; 
40    let ref = null;
41    let self = null;
42    let source = null;
43  
44    if (config != null) {
45        ref = config.ref === undefined ? null : config.ref;
46        key = config.key === undefined ? '' + null : config.key;
47        self = config.__self === undefined ? null : config.__self;
48        source = config.__source === undefined ? null : config.__source;
49
50      // 处理其它属性
51      for (propName in config) {
52        if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
53          props[propName] = config[propName];
54        }
55      }
56    }
57  
58    // 处理children,大于1个child，转换为数组
59    const childrenLength = arguments.length - 2;
60    if (childrenLength === 1) {
61      props.children = children;
62    } else if (childrenLength > 1) {
63      const childArray = Array(childrenLength);
64      for (let i = 0; i < childrenLength; i++) {
65        childArray[i] = arguments[i + 2];
66      }
67      props.children = childArray;
68    }
69  
70    // 默认属性
71    if (type && type.defaultProps) {
72      const defaultProps = type.defaultProps;
73      for (propName in defaultProps) {
74        if (props[propName] === undefined) {
75          props[propName] = defaultProps[propName];
76        }
77      }
78    }
79
80    return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
81  };
82
83//top-level-api createFactory 暴露type属性
84ReactElement.createFactory = function (type) {
85  const factory = ReactElement.createElement.bind(null, type);
86  factory.type = type;
87  return factory;
88};
89
90//cloneAndReplaceKey 克隆换key
91ReactElement.cloneAndReplaceKey = function (oldElement, newKey) {
92  const newElement = ReactElement(oldElement.type, newKey, oldElement.ref, oldElement._self, oldElement._source, oldElement._owner, oldElement.props);
93  return newElement;
94};
95
96//top-level-api 克隆元素
97ReactElement.cloneElement = function (element, config, children) {
98  // 原props
99  const props = Object.assign({}, element.props);
100
101  let propName;
102
103  let key = element.key;
104  let ref = element.ref;
105
106  let self = element._self;
107  let source = element._source;
108
109  let owner = element._owner;
110
111  if (config != null) {
112    ref = config.ref === undefined ? null : config.ref;
113
114    key = config.key === undefined ? '' + null : config.key;
115
116    // 默认属性
117    let defaultProps;
118    if (element.type && element.type.defaultProps) {
119      defaultProps = element.type.defaultProps;
120    }
121    for (propName in config) {
122      if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
123        if (config[propName] === undefined && defaultProps !== undefined) {
124          props[propName] = defaultProps[propName];
125        } else {
126          props[propName] = config[propName];
127        }
128      }
129    }
130  }
131
132  const childrenLength = arguments.length - 2;
133  if (childrenLength === 1) {
134    props.children = children;
135  } else if (childrenLength > 1) {
136    const childArray = Array(childrenLength);
137    for (let i = 0; i < childrenLength; i++) {
138      childArray[i] = arguments[i + 2];
139    }
140    props.children = childArray;
141  }
142
143  return ReactElement(element.type, key, ref, self, source, owner, props);
144};
145
146//top-level-api 检测元素是否是react元素
147ReactElement.isValidElement = function (object) {
148  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
149};
150
151export default ReactElement;
Full Screen
...

Source: ReactElement.js Github

import REACT_ELEMENT_TYPE from './ReactElementSymbol'
//过滤属性
const RESERVED_PROPS = {
    key: true,
    ref: true,
    __self: true,
    __source: true
};

//当前调用组件指针
const ReactCurrentOwner = {
    current: null
  };

//self和owner，ref用生产不用 self, source
const ReactElement = function (type, key, ref, self, source, owner, props) {

  const element = {
    $$typeof: REACT_ELEMENT_TYPE, //检测react对象，防XSS
    //元素的内置属性
    type: type,
    key: key,
    ref: ref,
    props: props,

    // 记录创建此元素的组件。
    _owner: owner
  };

  return element;
};

//top-level-api createElement 格式化JSX对象
ReactElement.createElement = function (type, config, children) {

    //初始化属性
    const props = {};
    let propName;
    let key = null; 
    let ref = null;
    let self = null;
    let source = null;
  
    if (config != null) {
        ref = config.ref === undefined ? null : config.ref;
        key = config.key === undefined ? '' + null : config.key;
        self = config.__self === undefined ? null : config.__self;
        source = config.__source === undefined ? null : config.__source;

      // 处理其它属性
      for (propName in config) {
        if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
          props[propName] = config[propName];
        }
      }
    }
  
    // 处理children,大于1个child，转换为数组
    const childrenLength = arguments.length - 2;
    if (childrenLength === 1) {
      props.children = children;
    } else if (childrenLength > 1) {
      const childArray = Array(childrenLength);
      for (let i = 0; i < childrenLength; i++) {
        childArray[i] = arguments[i + 2];
      }
      props.children = childArray;
    }
  
    // 默认属性
    if (type && type.defaultProps) {
      const defaultProps = type.defaultProps;
      for (propName in defaultProps) {
        if (props[propName] === undefined) {
          props[propName] = defaultProps[propName];
        }
      }
    }

    return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
  };

//top-level-api createFactory 暴露type属性
ReactElement.createFactory = function (type) {
  const factory = ReactElement.createElement.bind(null, type);
  factory.type = type;
  return factory;
};

//cloneAndReplaceKey 克隆换key
ReactElement.cloneAndReplaceKey = function (oldElement, newKey) {
  const newElement = ReactElement(oldElement.type, newKey, oldElement.ref, oldElement._self, oldElement._source, oldElement._owner, oldElement.props);
  return newElement;
};

//top-level-api 克隆元素
ReactElement.cloneElement = function (element, config, children) {
  // 原props
  const props = Object.assign({}, element.props);

  let propName;

  let key = element.key;
  let ref = element.ref;

  let self = element._self;
  let source = element._source;

  let owner = element._owner;

  if (config != null) {
    ref = config.ref === undefined ? null : config.ref;

    key = config.key === undefined ? '' + null : config.key;

    // 默认属性
    let defaultProps;
    if (element.type && element.type.defaultProps) {
      defaultProps = element.type.defaultProps;
    }
    for (propName in config) {
      if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
        if (config[propName] === undefined && defaultProps !== undefined) {
          props[propName] = defaultProps[propName];
        } else {
          props[propName] = config[propName];
        }
      }
    }
  }

  const childrenLength = arguments.length - 2;
  if (childrenLength === 1) {
    props.children = children;
  } else if (childrenLength > 1) {
    const childArray = Array(childrenLength);
    for (let i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2];
    }
    props.children = childArray;
  }

  return ReactElement(element.type, key, ref, self, source, owner, props);
};

//top-level-api 检测元素是否是react元素
ReactElement.isValidElement = function (object) {
  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
};

export default ReactElement;

ReactChildren.js

Source: ReactChildren.js Github

copy
1import { isValidElement, cloneAndReplaceKey } from './ReactElement';
2import {
3  getIteratorFn,
4  REACT_ELEMENT_TYPE,
5  REACT_PORTAL_TYPE,
6} from '../../ReactSymbols';
7
8const SEPARATOR = '.';
9const SUBSEPARATOR = ':';
10
11const escape = (key) => {
12  const escapeRegex = /[=:]/g;
13  const escaperLookup = {
14    '=': '=0',
15    ':': '=2',
16  };
17
18  const escapedString = key.replace(
19    escapeRegex,
20    (match) => escaperLookup[match]
21  );
22
23  return '$' + escapedString;
24};
25
26const escapeUserProvidedKey = (text) => text.replace(/\/+/g, '$&/');
27
28const getElementKey = (element, index) => {
29  if (typeof element === 'object' && element !== null && element.key != null)
30    return escape('' + element.key);
31
32  return index.toString(36);
33};
34
35const mapIntoArray = (children, array, escapedPrefix, nameSoFar, callback) => {
36  const type = typeof children;
37
38  if (type === 'undefined' || type === 'boolean') children = null;
39
40  let invokeCallback = false;
41  if (children === null) {
42    invokeCallback = true;
43  } else {
44    switch (type) {
45      case 'string':
46      case 'number':
47        invokeCallback = true;
48        break;
49      case 'object':
50        switch (children.$$typeof) {
51          case REACT_ELEMENT_TYPE:
52          case REACT_PORTAL_TYPE:
53            invokeCallback = true;
54        }
55    }
56  }
57
58  if (invokeCallback) {
59    const child = children;
60    let mappedChild = callback(child);
61
62    const childKey =
63      nameSoFar === '' ? SEPARATOR + getElementKey(child, 0) : nameSoFar;
64
65    if (Array.isArray(mappedChild)) {
66      let escapedChildKey = '';
67
68      if (childKey != null)
69        escapedChildKey = escapeUserProvidedKey(childKey) + '/';
70
71      mapIntoArray(mappedChild, array, escapedChildKey, '', (c) => c);
72    } else if (mappedChild !== null) {
73      if (isValidElement(mappedChild)) {
74        mappedChild = cloneAndReplaceKey(
75          mappedChild,
76          escapedPrefix +
77            (mappedChild.key && (!child || child.key !== mappedChild.key)
78              ? escapeUserProvidedKey('' + mappedChild.key) + '/'
79              : '') +
80            childKey
81        );
82      }
83      array.push(mappedChild);
84    }
85    return 1;
86  }
87
88  let child;
89  let nextName;
90  let subtreeCount = 0;
91  const nextNamePrefix =
92    nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR;
93
94  if (Array.isArray(children))
95    children.forEach((child, i) => {
96      nextName = nextNamePrefix + getElementKey(child, i);
97      subtreeCount += mapIntoArray(
98        child,
99        array,
100        escapedPrefix,
101        nextName,
102        callback
103      );
104    });
105  else {
106    const iteratorFn = getIteratorFn(children);
107    if (typeof iteratorFn === 'function') {
108      const iterableChildren = children;
109      const iterator = iteratorFn.call(iterableChildren);
110
111      let step;
112      let ii = 0;
113      while (!(step = iterator.next()).done) {
114        child = step.value;
115        nextName = nextNamePrefix + getElementKey(child, ii++);
116        subtreeCount += mapIntoArray(
117          child,
118          array,
119          escapedPrefix,
120          nextName,
121          callback
122        );
123      }
124    } else if (type === 'object') {
125      const childrenString = String(children);
126
127      throw new Error(
128        `Objects are not valid as a React child ${childrenString}`
129      );
130    }
131  }
132  return subtreeCount;
133};
134
135function mapChildren(children, func, context) {
136  if (children === null) return children;
137
138  const result = [];
139  let count = 0;
140  mapIntoArray(children, result, '', '', function (child) {
141    return func.call(context, child, count++);
142  });
143  return result;
144}
145
146function forEachChildren(children, forEachFunc, forEachContext) {
147  mapChildren(
148    children,
149    function (...args) {
150      forEachFunc.apply(this, args);
151    },
152    forEachContext
153  );
154}
155
156const countChildren = (children) => {
157  let n = 0;
158  mapChildren(children, () => n++);
159
160  return n;
161};
162
163const toArray = (children) => mapChildren(children, (child) => child) || [];
164
165const onlyChild = (children) => {
166  if (!isValidElement(children)) {
167    throw new Error(
168      'React.Children.only expected to receive a single React element child.'
169    );
170  }
171
172  return children;
173};
174
175export {
176  forEachChildren as forEach,
177  mapChildren as map,
178  countChildren as count,
179  onlyChild as only,
180  toArray,
181};
182
Full Screen
...

Source: ReactChildren.js Github

import { isValidElement, cloneAndReplaceKey } from './ReactElement';
import {
  getIteratorFn,
  REACT_ELEMENT_TYPE,
  REACT_PORTAL_TYPE,
} from '../../ReactSymbols';

const SEPARATOR = '.';
const SUBSEPARATOR = ':';

const escape = (key) => {
  const escapeRegex = /[=:]/g;
  const escaperLookup = {
    '=': '=0',
    ':': '=2',
  };

  const escapedString = key.replace(
    escapeRegex,
    (match) => escaperLookup[match]
  );

  return '$' + escapedString;
};

const escapeUserProvidedKey = (text) => text.replace(/\/+/g, '$&/');

const getElementKey = (element, index) => {
  if (typeof element === 'object' && element !== null && element.key != null)
    return escape('' + element.key);

  return index.toString(36);
};

const mapIntoArray = (children, array, escapedPrefix, nameSoFar, callback) => {
  const type = typeof children;

  if (type === 'undefined' || type === 'boolean') children = null;

  let invokeCallback = false;
  if (children === null) {
    invokeCallback = true;
  } else {
    switch (type) {
      case 'string':
      case 'number':
        invokeCallback = true;
        break;
      case 'object':
        switch (children.$$typeof) {
          case REACT_ELEMENT_TYPE:
          case REACT_PORTAL_TYPE:
            invokeCallback = true;
        }
    }
  }

  if (invokeCallback) {
    const child = children;
    let mappedChild = callback(child);

    const childKey =
      nameSoFar === '' ? SEPARATOR + getElementKey(child, 0) : nameSoFar;

    if (Array.isArray(mappedChild)) {
      let escapedChildKey = '';

      if (childKey != null)
        escapedChildKey = escapeUserProvidedKey(childKey) + '/';

      mapIntoArray(mappedChild, array, escapedChildKey, '', (c) => c);
    } else if (mappedChild !== null) {
      if (isValidElement(mappedChild)) {
        mappedChild = cloneAndReplaceKey(
          mappedChild,
          escapedPrefix +
            (mappedChild.key && (!child || child.key !== mappedChild.key)
              ? escapeUserProvidedKey('' + mappedChild.key) + '/'
              : '') +
            childKey
        );
      }
      array.push(mappedChild);
    }
    return 1;
  }

  let child;
  let nextName;
  let subtreeCount = 0;
  const nextNamePrefix =
    nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR;

  if (Array.isArray(children))
    children.forEach((child, i) => {
      nextName = nextNamePrefix + getElementKey(child, i);
      subtreeCount += mapIntoArray(
        child,
        array,
        escapedPrefix,
        nextName,
        callback
      );
    });
  else {
    const iteratorFn = getIteratorFn(children);
    if (typeof iteratorFn === 'function') {
      const iterableChildren = children;
      const iterator = iteratorFn.call(iterableChildren);

      let step;
      let ii = 0;
      while (!(step = iterator.next()).done) {
        child = step.value;
        nextName = nextNamePrefix + getElementKey(child, ii++);
        subtreeCount += mapIntoArray(
          child,
          array,
          escapedPrefix,
          nextName,
          callback
        );
      }
    } else if (type === 'object') {
      const childrenString = String(children);

      throw new Error(
        `Objects are not valid as a React child ${childrenString}`
      );
    }
  }
  return subtreeCount;
};

function mapChildren(children, func, context) {
  if (children === null) return children;

  const result = [];
  let count = 0;
  mapIntoArray(children, result, '', '', function (child) {
    return func.call(context, child, count++);
  });
  return result;
}

function forEachChildren(children, forEachFunc, forEachContext) {
  mapChildren(
    children,
    function (...args) {
      forEachFunc.apply(this, args);
    },
    forEachContext
  );
}

const countChildren = (children) => {
  let n = 0;
  mapChildren(children, () => n++);

  return n;
};

const toArray = (children) => mapChildren(children, (child) => child) || [];

const onlyChild = (children) => {
  if (!isValidElement(children)) {
    throw new Error(
      'React.Children.only expected to receive a single React element child.'
    );
  }

  return children;
};

export {
  forEachChildren as forEach,
  mapChildren as map,
  countChildren as count,
  onlyChild as only,
  toArray,
};

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.

Claim Now
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)

Sign up nowX