How to use hasPropsChanged method in Playwright Internal

1import React, { Component } from 'react';
2import WordCloud from 'wordcloud';
3
4class TermCloud extends Component {
5    WIDTH = 640;
6    HEIGHT = 480;
7
8    state = {
9        data: [],
10        hasPropsChanged: false,
11        width: this.WIDTH,
12        height: this.HEIGHT
13    };
14
15    wordCloudRef = React.createRef();
16
17    static getDerivedStateFromProps(props, state) {
18        let hasPropsChanged = false;
19        if (props.data !== state.data) {
20            hasPropsChanged = true;
21        }
22        return { data: props.data, hasPropsChanged };
23    }
24
25    componentDidMount() {
26        this.setCanvasDimensions();
27        window.addEventListener("resize", this.setCanvasDimensions);
28    }
29
30    setCanvasDimensions = () => {
31        const innerWidth = window.innerWidth;
32        const isBigScreen = innerWidth > this.WIDTH;
33
34        this.setState({
35            width: isBigScreen ? this.WIDTH : innerWidth / 1.25,
36            height: isBigScreen ? this.HEIGHT : innerWidth / 2
37        }, this.renderWordCloud);
38    }
39
40    renderWordCloud() {
41        const { data } = this.state;
42        if (data.length <= 0) return;
43        const min = data[data.length - 1].count;
44        const max = data[0].count;
45        const list = data.map(item => [item.term, item.count]);
46        WordCloud(this.wordCloudRef.current, {
47            list,
48            weightFactor: (count) => this.getWeight(min, max, count),
49        });
50    }
51
52    getWeight(min, max, count) {
53        const { width } = this.state;
54        const minWeight = width / 30;
55        const maxWeight = width / 8;
56        const diff = max - min;
57        const newDiff = maxWeight - minWeight;
58        return (count * newDiff - min * newDiff + minWeight * diff) / diff;
59    }
60
61    render() {
62        const { width, height } = this.state;
63
64        if (this.state.hasPropsChanged) {
65            this.renderWordCloud();
66        }
67
68        return (
69            <canvas id="wordCloud" width={width} height={height} ref={this.wordCloudRef}>
70            </canvas>
71        )
72    }
73}
74
75export default TermCloud;

Source: TermCloud.js

import React, { Component } from 'react';
import WordCloud from 'wordcloud';

class TermCloud extends Component {
    WIDTH = 640;
    HEIGHT = 480;

    state = {
        data: [],
        hasPropsChanged: false,
        width: this.WIDTH,
        height: this.HEIGHT
    };

    wordCloudRef = React.createRef();

    static getDerivedStateFromProps(props, state) {
        let hasPropsChanged = false;
        if (props.data !== state.data) {
            hasPropsChanged = true;
        }
        return { data: props.data, hasPropsChanged };
    }

    componentDidMount() {
        this.setCanvasDimensions();
        window.addEventListener("resize", this.setCanvasDimensions);
    }

    setCanvasDimensions = () => {
        const innerWidth = window.innerWidth;
        const isBigScreen = innerWidth > this.WIDTH;

        this.setState({
            width: isBigScreen ? this.WIDTH : innerWidth / 1.25,
            height: isBigScreen ? this.HEIGHT : innerWidth / 2
        }, this.renderWordCloud);
    }

    renderWordCloud() {
        const { data } = this.state;
        if (data.length <= 0) return;
        const min = data[data.length - 1].count;
        const max = data[0].count;
        const list = data.map(item => [item.term, item.count]);
        WordCloud(this.wordCloudRef.current, {
            list,
            weightFactor: (count) => this.getWeight(min, max, count),
        });
    }

    getWeight(min, max, count) {
        const { width } = this.state;
        const minWeight = width / 30;
        const maxWeight = width / 8;
        const diff = max - min;
        const newDiff = maxWeight - minWeight;
        return (count * newDiff - min * newDiff + minWeight * diff) / diff;
    }

    render() {
        const { width, height } = this.state;

        if (this.state.hasPropsChanged) {
            this.renderWordCloud();
        }

        return (
            <canvas id="wordCloud" width={width} height={height} ref={this.wordCloudRef}>
            </canvas>
        )
    }
}

export default TermCloud;

1import React from 'react'
2import PropTypes from 'prop-types'
3import { DirectionsRenderer } from 'react-google-maps'
4
5import { Location } from './PropTypes'
6
7import getRoute from './utils/getRoute'
8import hasPropsChanged from './utils/hasPropsChanged'
9
10const propTypes = {
11  /** Start point */
12  startPoint: Location,
13
14  /** End point */
15  endPoint: Location,
16
17  /** Function fired when direction routing is loaded */
18  onLoad: PropTypes.func,
19
20  /** Function fired when direction routing caused error */
21  onError: PropTypes.func,
22
23  /** Waypoints */
24  via: PropTypes.oneOfType([
25    PropTypes.arrayOf(Location),
26    Location
27  ])
28}
29
30/**
31 * Component which represents Directions.
32 *
33 * @property {object} props
34 * @property {object|{ lat: number, lng: number }} props.startPoint
35 * @property {object|{ lat: number, lng: number }} props.endPoint
36 * @property {object[]|Array<{ lat: number, lng: number }>} [props.via]
37 *
38 * @property {object} state
39 * @property {object|null} state.directions
40 *
41 * @class
42 */
43class Directions extends React.PureComponent {
44  state = {
45    directions: null
46  }
47
48  /**
49   * Load directions when component is mounted
50   */
51  componentDidMount () {
52    this.loadDirections(this.props)
53  }
54
55  /**
56   * Update route when points has changed
57   *
58   * @param {object} nextProps
59   * @param {object|{ lat: number, lng: number }} nextProps.startPoint
60   * @param {object|{ lat: number, lng: number }} nextProps.endPoint
61   * @param {object[]|Array<{ lat: number, lng: number }>} nextProps.via
62   */
63  componentWillReceiveProps (nextProps) {
64    // When any point has changed, load directions again
65    if (hasPropsChanged(this.props, nextProps)) {
66      this.loadDirections(nextProps)
67    }
68  }
69
70  /**
71   * Load directions from Google
72   *
73   * @param {object} nextProps
74   * @param {object|{ lat: number, lng: number }} nextProps.startPoint
75   * @param {object|{ lat: number, lng: number }} nextProps.endPoint
76   */
77  loadDirections (nextProps) {
78    if (nextProps.startPoint == null || nextProps.endPoint == null) {
79      return
80    }
81
82    return getRoute(nextProps.startPoint, nextProps.endPoint, nextProps.via).then(
83      this.handleRoute.bind(this, nextProps.startPoint, nextProps.endPoint, nextProps.via),
84      this.handleError
85    )
86  }
87
88  /**
89   * Handle found route
90   *
91   * @param {object|{ lat: number, lng: number }} startPoint
92   * @param {object|{ lat: number, lng: number }} endPoint
93   * @param {object[]|Array<{ lat: number, lng: number }>} via
94   * @param {*} directions
95   */
96  handleRoute (startPoint, endPoint, via, directions) {
97    const { onLoad } = this.props
98
99    // Ignore route for old directions, otherwise we've got race condition
100    if (hasPropsChanged({ startPoint, endPoint, via }, this.props)) {
101      return
102    }
103
104    if (onLoad) {
105      onLoad()
106    }
107
108    // Update current directions
109    this.setState({ directions })
110  }
111
112  /**
113   * Handle error while searching for route
114   *
115   * @param {*} error
116   */
117  handleError = (error) => {
118    const { onError } = this.props
119
120    if (onError) {
121      onError(error)
122    }
123  }
124
125  /**
126   * Build Google DirectionsRenderer
127   *
128   * @returns {React.Element|null}
129   */
130  render () {
131    const { startPoint, endPoint, via, onError, onLoad, ...passedProps } = this.props
132    const { directions } = this.state
133
134    if (!directions) {
135      return null
136    }
137
138    return (
139      <DirectionsRenderer
140        directions={directions}
141        {...passedProps}
142      />
143    )
144  }
145}
146
147Directions.displayName = 'Directions'
148
149Directions.propTypes = propTypes
150
151export default Directions
152

Source: Directions.js

import React from 'react'
import PropTypes from 'prop-types'
import { DirectionsRenderer } from 'react-google-maps'

import { Location } from './PropTypes'

import getRoute from './utils/getRoute'
import hasPropsChanged from './utils/hasPropsChanged'

const propTypes = {
  /** Start point */
  startPoint: Location,

  /** End point */
  endPoint: Location,

  /** Function fired when direction routing is loaded */
  onLoad: PropTypes.func,

  /** Function fired when direction routing caused error */
  onError: PropTypes.func,

  /** Waypoints */
  via: PropTypes.oneOfType([
    PropTypes.arrayOf(Location),
    Location
  ])
}

/**
 * Component which represents Directions.
 *
 * @property {object} props
 * @property {object|{ lat: number, lng: number }} props.startPoint
 * @property {object|{ lat: number, lng: number }} props.endPoint
 * @property {object[]|Array<{ lat: number, lng: number }>} [props.via]
 *
 * @property {object} state
 * @property {object|null} state.directions
 *
 * @class
 */
class Directions extends React.PureComponent {
  state = {
    directions: null
  }

  /**
   * Load directions when component is mounted
   */
  componentDidMount () {
    this.loadDirections(this.props)
  }

  /**
   * Update route when points has changed
   *
   * @param {object} nextProps
   * @param {object|{ lat: number, lng: number }} nextProps.startPoint
   * @param {object|{ lat: number, lng: number }} nextProps.endPoint
   * @param {object[]|Array<{ lat: number, lng: number }>} nextProps.via
   */
  componentWillReceiveProps (nextProps) {
    // When any point has changed, load directions again
    if (hasPropsChanged(this.props, nextProps)) {
      this.loadDirections(nextProps)
    }
  }

  /**
   * Load directions from Google
   *
   * @param {object} nextProps
   * @param {object|{ lat: number, lng: number }} nextProps.startPoint
   * @param {object|{ lat: number, lng: number }} nextProps.endPoint
   */
  loadDirections (nextProps) {
    if (nextProps.startPoint == null || nextProps.endPoint == null) {
      return
    }

    return getRoute(nextProps.startPoint, nextProps.endPoint, nextProps.via).then(
      this.handleRoute.bind(this, nextProps.startPoint, nextProps.endPoint, nextProps.via),
      this.handleError
    )
  }

  /**
   * Handle found route
   *
   * @param {object|{ lat: number, lng: number }} startPoint
   * @param {object|{ lat: number, lng: number }} endPoint
   * @param {object[]|Array<{ lat: number, lng: number }>} via
   * @param {*} directions
   */
  handleRoute (startPoint, endPoint, via, directions) {
    const { onLoad } = this.props

    // Ignore route for old directions, otherwise we've got race condition
    if (hasPropsChanged({ startPoint, endPoint, via }, this.props)) {
      return
    }

    if (onLoad) {
      onLoad()
    }

    // Update current directions
    this.setState({ directions })
  }

  /**
   * Handle error while searching for route
   *
   * @param {*} error
   */
  handleError = (error) => {
    const { onError } = this.props

    if (onError) {
      onError(error)
    }
  }

  /**
   * Build Google DirectionsRenderer
   *
   * @returns {React.Element|null}
   */
  render () {
    const { startPoint, endPoint, via, onError, onLoad, ...passedProps } = this.props
    const { directions } = this.state

    if (!directions) {
      return null
    }

    return (
      <DirectionsRenderer
        directions={directions}
        {...passedProps}
      />
    )
  }
}

Directions.displayName = 'Directions'

Directions.propTypes = propTypes

export default Directions

1jest.dontMock('../StoreDependencyMixin.js');
2
3describe('StoreDependencyMixin', () => {
4
5  var StoreDependencyMixin;
6
7  var mockComponent;
8  var mockMixin;
9
10  beforeEach(() => {
11    StoreDependencyMixin = require('../StoreDependencyMixin.js');
12
13    mockComponent = {
14      props: {},
15      state: {},
16      setState: jest.genMockFn()
17    };
18    mockMixin = StoreDependencyMixin({});
19    mockMixin.getInitialState.call(mockComponent);
20  });
21
22  it('applies dependencies in getInitialState', () => {
23    var {applyDependencies} = require('../StoreDependencyMixinInitialize.js');
24    var {getDependencyState} = require('../StoreDependencyMixinState.js');
25    expect(applyDependencies.mock.calls.length).toBe(1);
26    expect(getDependencyState.mock.calls.length).toBe(1);
27  });
28
29  it('sets handlers in componentWillMount', () => {
30    var {setupHandlers} = require('../StoreDependencyMixinHandlers.js');
31    mockMixin.componentWillMount.call(mockComponent);
32    expect(setupHandlers.mock.calls.length).toBe(1);
33  });
34
35  it('cleans up handlers in componentWillUnmount', () => {
36    var {cleanupHandlers} = require('../StoreDependencyMixinHandlers.js');
37    mockMixin.componentWillUnmount.call(mockComponent);
38    expect(cleanupHandlers.mock.calls.length).toBe(1);
39  });
40
41  it('sets state if appropriate in componentWillReceiveProps', () => {
42    var {hasPropsChanged} = require('../StoreDependencyMixinTransitions.js');
43    hasPropsChanged.mockReturnValueOnce(false);
44    mockMixin.componentWillReceiveProps.call(mockComponent);
45    expect(mockComponent.setState.mock.calls.length).toBe(0);
46    hasPropsChanged.mockReturnValueOnce(true);
47    mockMixin.componentWillReceiveProps.call(mockComponent);
48    expect(mockComponent.setState.mock.calls.length).toBe(1);
49  });
50
51  it('sets state if appropriate in componentDidUpdate', () => {
52    var {hasStateChanged} = require('../StoreDependencyMixinTransitions.js');
53    hasStateChanged.mockReturnValueOnce(false);
54    mockMixin.componentDidUpdate.call(mockComponent);
55    expect(mockComponent.setState.mock.calls.length).toBe(0);
56    hasStateChanged.mockReturnValueOnce(true);
57    mockMixin.componentDidUpdate.call(mockComponent);
58    expect(mockComponent.setState.mock.calls.length).toBe(1);
59  });
60
61});
62
63

Source: StoreDependencyMixin-test.js

jest.dontMock('../StoreDependencyMixin.js');

describe('StoreDependencyMixin', () => {

  var StoreDependencyMixin;

  var mockComponent;
  var mockMixin;

  beforeEach(() => {
    StoreDependencyMixin = require('../StoreDependencyMixin.js');

    mockComponent = {
      props: {},
      state: {},
      setState: jest.genMockFn()
    };
    mockMixin = StoreDependencyMixin({});
    mockMixin.getInitialState.call(mockComponent);
  });

  it('applies dependencies in getInitialState', () => {
    var {applyDependencies} = require('../StoreDependencyMixinInitialize.js');
    var {getDependencyState} = require('../StoreDependencyMixinState.js');
    expect(applyDependencies.mock.calls.length).toBe(1);
    expect(getDependencyState.mock.calls.length).toBe(1);
  });

  it('sets handlers in componentWillMount', () => {
    var {setupHandlers} = require('../StoreDependencyMixinHandlers.js');
    mockMixin.componentWillMount.call(mockComponent);
    expect(setupHandlers.mock.calls.length).toBe(1);
  });

  it('cleans up handlers in componentWillUnmount', () => {
    var {cleanupHandlers} = require('../StoreDependencyMixinHandlers.js');
    mockMixin.componentWillUnmount.call(mockComponent);
    expect(cleanupHandlers.mock.calls.length).toBe(1);
  });

  it('sets state if appropriate in componentWillReceiveProps', () => {
    var {hasPropsChanged} = require('../StoreDependencyMixinTransitions.js');
    hasPropsChanged.mockReturnValueOnce(false);
    mockMixin.componentWillReceiveProps.call(mockComponent);
    expect(mockComponent.setState.mock.calls.length).toBe(0);
    hasPropsChanged.mockReturnValueOnce(true);
    mockMixin.componentWillReceiveProps.call(mockComponent);
    expect(mockComponent.setState.mock.calls.length).toBe(1);
  });

  it('sets state if appropriate in componentDidUpdate', () => {
    var {hasStateChanged} = require('../StoreDependencyMixinTransitions.js');
    hasStateChanged.mockReturnValueOnce(false);
    mockMixin.componentDidUpdate.call(mockComponent);
    expect(mockComponent.setState.mock.calls.length).toBe(0);
    hasStateChanged.mockReturnValueOnce(true);
    mockMixin.componentDidUpdate.call(mockComponent);
    expect(mockComponent.setState.mock.calls.length).toBe(1);
  });

});