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

TermCloud.js

Source: TermCloud.js Github

copy
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;
Full Screen

Directions.js

Source: Directions.js Github

copy
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
Full Screen

StoreDependencyMixin-test.js

Source: StoreDependencyMixin-test.js Github

copy
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
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)