How to use createElementTypeChecker method in Playwright Internal

1import React from 'react';
2
3const ANONYMOUS = '<<anonymous>>';
4
5const CustomPropTypes = {
6
7  isRequiredForA11y(propType){
8    return function(props, propName, componentName){
9      if (props[propName] === null) {
10        return new Error(
11          'The prop `' + propName + '` is required to make ' + componentName + ' accessible ' +
12            'for users using assistive technologies such as screen readers `'
13        );
14      }
15
16      return propType(props, propName, componentName);
17    };
18  },
19
20  /**
21   * Checks whether a prop provides a DOM element
22   *
23   * The element can be provided in two forms:
24   * - Directly passed
25   * - Or passed an object that has a `render` method
26   *
27   * @param props
28   * @param propName
29   * @param componentName
30   * @returns {Error|undefined}
31   */
32  mountable: createMountableChecker(),
33
34  /**
35   * Checks whether a prop provides a type of element.
36   *
37   * The type of element can be provided in two forms:
38   * - tag name (string)
39   * - a return value of React.createClass(...)
40   *
41   * @param props
42   * @param propName
43   * @param componentName
44   * @returns {Error|undefined}
45   */
46  elementType: createElementTypeChecker(),
47
48  /**
49   * Checks whether a prop matches a key of an associated object
50   *
51   * @param props
52   * @param propName
53   * @param componentName
54   * @returns {Error|undefined}
55   */
56  keyOf: createKeyOfChecker,
57  /**
58   * Checks if only one of the listed properties is in use. An error is given
59   * if multiple have a value
60   *
61   * @param props
62   * @param propName
63   * @param componentName
64   * @returns {Error|undefined}
65   */
66  singlePropFrom: createSinglePropFromChecker,
67
68  all
69};
70
71function errMsg(props, propName, componentName, msgContinuation) {
72  return `Invalid prop '${propName}' of value '${props[propName]}'` +
73    ` supplied to '${componentName}'${msgContinuation}`;
74}
75
76/**
77 * Create chain-able isRequired validator
78 *
79 * Largely copied directly from:
80 *  https://github.com/facebook/react/blob/0.11-stable/src/core/ReactPropTypes.js#L94
81 */
82function createChainableTypeChecker(validate) {
83  function checkType(isRequired, props, propName, componentName) {
84    componentName = componentName || ANONYMOUS;
85    if (props[propName] == null) {
86      if (isRequired) {
87        return new Error(
88          `Required prop '${propName}' was not specified in '${componentName}'.`
89        );
90      }
91    } else {
92      return validate(props, propName, componentName);
93    }
94  }
95
96  let chainedCheckType = checkType.bind(null, false);
97  chainedCheckType.isRequired = checkType.bind(null, true);
98
99  return chainedCheckType;
100}
101
102function createMountableChecker() {
103  function validate(props, propName, componentName) {
104    if (typeof props[propName] !== 'object' ||
105      typeof props[propName].render !== 'function' && props[propName].nodeType !== 1) {
106      return new Error(
107        errMsg(props, propName, componentName,
108          ', expected a DOM element or an object that has a `render` method')
109      );
110    }
111  }
112
113  return createChainableTypeChecker(validate);
114}
115
116function createKeyOfChecker(obj) {
117  function validate(props, propName, componentName) {
118    let propValue = props[propName];
119    if (!obj.hasOwnProperty(propValue)) {
120      let valuesString = JSON.stringify(Object.keys(obj));
121      return new Error(
122        errMsg(props, propName, componentName, `, expected one of ${valuesString}.`)
123      );
124    }
125  }
126  return createChainableTypeChecker(validate);
127}
128
129function createSinglePropFromChecker(arrOfProps) {
130  function validate(props, propName, componentName) {
131    const usedPropCount = arrOfProps
132      .map(listedProp => props[listedProp])
133      .reduce((acc, curr) => acc + (curr !== undefined ? 1 : 0), 0);
134
135    if (usedPropCount > 1) {
136      const [first, ...others] = arrOfProps;
137      const message = `${others.join(', ')} and ${first}`;
138      return new Error(
139        `Invalid prop '${propName}', only one of the following ` +
140        `may be provided: ${message}`
141      );
142    }
143  }
144  return validate;
145}
146
147function all(propTypes) {
148  if (propTypes === undefined) {
149    throw new Error('No validations provided');
150  }
151
152  if (!(propTypes instanceof Array)) {
153    throw new Error('Invalid argument must be an array');
154  }
155
156  if (propTypes.length === 0) {
157    throw new Error('No validations provided');
158  }
159
160  return function(props, propName, componentName) {
161    for(let i = 0; i < propTypes.length; i++) {
162      let result = propTypes[i](props, propName, componentName);
163
164      if (result !== undefined && result !== null) {
165        return result;
166      }
167    }
168  };
169}
170
171function createElementTypeChecker() {
172  function validate(props, propName, componentName) {
173    let errBeginning = errMsg(props, propName, componentName,
174      '. Expected an Element `type`');
175
176    if (typeof props[propName] !== 'function') {
177      if (React.isValidElement(props[propName])) {
178        return new Error(errBeginning + ', not an actual Element');
179      }
180
181      if (typeof props[propName] !== 'string') {
182        return new Error(errBeginning +
183          ' such as a tag name or return value of React.createClass(...)');
184      }
185    }
186  }
187
188  return createChainableTypeChecker(validate);
189}
190
191export default CustomPropTypes;
192

Source: CustomPropTypes.js

import React from 'react';

const ANONYMOUS = '<<anonymous>>';

const CustomPropTypes = {

  isRequiredForA11y(propType){
    return function(props, propName, componentName){
      if (props[propName] === null) {
        return new Error(
          'The prop `' + propName + '` is required to make ' + componentName + ' accessible ' +
            'for users using assistive technologies such as screen readers `'
        );
      }

      return propType(props, propName, componentName);
    };
  },

  /**
   * Checks whether a prop provides a DOM element
   *
   * The element can be provided in two forms:
   * - Directly passed
   * - Or passed an object that has a `render` method
   *
   * @param props
   * @param propName
   * @param componentName
   * @returns {Error|undefined}
   */
  mountable: createMountableChecker(),

  /**
   * Checks whether a prop provides a type of element.
   *
   * The type of element can be provided in two forms:
   * - tag name (string)
   * - a return value of React.createClass(...)
   *
   * @param props
   * @param propName
   * @param componentName
   * @returns {Error|undefined}
   */
  elementType: createElementTypeChecker(),

  /**
   * Checks whether a prop matches a key of an associated object
   *
   * @param props
   * @param propName
   * @param componentName
   * @returns {Error|undefined}
   */
  keyOf: createKeyOfChecker,
  /**
   * Checks if only one of the listed properties is in use. An error is given
   * if multiple have a value
   *
   * @param props
   * @param propName
   * @param componentName
   * @returns {Error|undefined}
   */
  singlePropFrom: createSinglePropFromChecker,

  all
};

function errMsg(props, propName, componentName, msgContinuation) {
  return `Invalid prop '${propName}' of value '${props[propName]}'` +
    ` supplied to '${componentName}'${msgContinuation}`;
}

/**
 * Create chain-able isRequired validator
 *
 * Largely copied directly from:
 *  https://github.com/facebook/react/blob/0.11-stable/src/core/ReactPropTypes.js#L94
 */
function createChainableTypeChecker(validate) {
  function checkType(isRequired, props, propName, componentName) {
    componentName = componentName || ANONYMOUS;
    if (props[propName] == null) {
      if (isRequired) {
        return new Error(
          `Required prop '${propName}' was not specified in '${componentName}'.`
        );
      }
    } else {
      return validate(props, propName, componentName);
    }
  }

  let chainedCheckType = checkType.bind(null, false);
  chainedCheckType.isRequired = checkType.bind(null, true);

  return chainedCheckType;
}

function createMountableChecker() {
  function validate(props, propName, componentName) {
    if (typeof props[propName] !== 'object' ||
      typeof props[propName].render !== 'function' && props[propName].nodeType !== 1) {
      return new Error(
        errMsg(props, propName, componentName,
          ', expected a DOM element or an object that has a `render` method')
      );
    }
  }

  return createChainableTypeChecker(validate);
}

function createKeyOfChecker(obj) {
  function validate(props, propName, componentName) {
    let propValue = props[propName];
    if (!obj.hasOwnProperty(propValue)) {
      let valuesString = JSON.stringify(Object.keys(obj));
      return new Error(
        errMsg(props, propName, componentName, `, expected one of ${valuesString}.`)
      );
    }
  }
  return createChainableTypeChecker(validate);
}

function createSinglePropFromChecker(arrOfProps) {
  function validate(props, propName, componentName) {
    const usedPropCount = arrOfProps
      .map(listedProp => props[listedProp])
      .reduce((acc, curr) => acc + (curr !== undefined ? 1 : 0), 0);

    if (usedPropCount > 1) {
      const [first, ...others] = arrOfProps;
      const message = `${others.join(', ')} and ${first}`;
      return new Error(
        `Invalid prop '${propName}', only one of the following ` +
        `may be provided: ${message}`
      );
    }
  }
  return validate;
}

function all(propTypes) {
  if (propTypes === undefined) {
    throw new Error('No validations provided');
  }

  if (!(propTypes instanceof Array)) {
    throw new Error('Invalid argument must be an array');
  }

  if (propTypes.length === 0) {
    throw new Error('No validations provided');
  }

  return function(props, propName, componentName) {
    for(let i = 0; i < propTypes.length; i++) {
      let result = propTypes[i](props, propName, componentName);

      if (result !== undefined && result !== null) {
        return result;
      }
    }
  };
}

function createElementTypeChecker() {
  function validate(props, propName, componentName) {
    let errBeginning = errMsg(props, propName, componentName,
      '. Expected an Element `type`');

    if (typeof props[propName] !== 'function') {
      if (React.isValidElement(props[propName])) {
        return new Error(errBeginning + ', not an actual Element');
      }

      if (typeof props[propName] !== 'string') {
        return new Error(errBeginning +
          ' such as a tag name or return value of React.createClass(...)');
      }
    }
  }

  return createChainableTypeChecker(validate);
}

export default CustomPropTypes;