google-map-react/test/components/GoogleMap.spec.js

/* eslint-disable */
import './utils/jsdomInit.js';

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import expect from 'expect';

import TestUtils from 'react-dom/test-utils';
import GoogleMap from '../../src/google_map';

describe('Components', () => {
  it('Should work', () => {
    const mapMarkerClassName = 'mapMarkerClassName';

    class MapMarker extends Component {
      render() {
        return (
          <div className={mapMarkerClassName}>Marker</div>
        );
      }
    }

    class MapHolder extends Component { // eslint-disable-line react/no-multi-comp
      static propTypes = {
        center: PropTypes.array,
        zoom: PropTypes.number,
        greatPlaceCoords: PropTypes.any,
      };

      static defaultProps = {
        center: [59.938043, 30.337157],
        zoom: 9,
      };

      render() {
        return (
           <GoogleMap
            center={this.props.center}
            zoom={this.props.zoom}
          >
            <MapMarker lat={59.955413} lng={30.337844} />
          </GoogleMap>
        );
      }
    }

    // console.log('GoogleMap', GoogleMap);

    const mapHolder = TestUtils.renderIntoDocument(
      <MapHolder />
    );

    const marker = TestUtils.findRenderedDOMComponentWithClass(mapHolder, 'mapMarkerClassName');
    expect(marker.parentNode.style.left).toEqual('0.250129066669615px');
    expect(marker.parentNode.style.top).toEqual('-12.62811732746195px');
  });

  it('Should accept center prop as lat lng object', () => {
    const mapMarkerClassName = 'mapMarkerClassName';

    class MapMarker extends Component { // eslint-disable-line react/no-multi-comp
      render() {
        return (
          <div className={mapMarkerClassName}>Marker</div>
        );
      }
    }

    class MapHolder extends Component { // eslint-disable-line react/no-multi-comp
      static propTypes = {
        center: PropTypes.any,
        zoom: PropTypes.number,
        greatPlaceCoords: PropTypes.any,
      };

      static defaultProps = {
        center: {lat: 59.938043, lng: 30.337157},
        zoom: 9,
      };

      constructor(props) {
        super(props);
      }

      render() {
        return (
           <GoogleMap
            center={this.props.center}
            zoom={this.props.zoom}
          >
            <MapMarker lat={59.955413} lng={30.337844} />
          </GoogleMap>
        );
      }
    }

    const mapHolder = TestUtils.renderIntoDocument(
      <MapHolder />
    );

    const marker = TestUtils.findRenderedDOMComponentWithClass(mapHolder, 'mapMarkerClassName');
    expect(marker.parentNode.style.left).toEqual('0.250129066669615px');
    expect(marker.parentNode.style.top).toEqual('-12.62811732746195px');
  });

  it('Should accept defaultCenter and defaultZoom props', () => {
    const mapMarkerClassName = 'mapMarkerClassName';

    class MapMarker extends Component { // eslint-disable-line react/no-multi-comp
      render() {
        return (
          <div className={mapMarkerClassName}>Marker</div>
        );
      }
    }

    class MapHolder extends Component { // eslint-disable-line react/no-multi-comp
      static propTypes = {
        center: PropTypes.any,
        zoom: PropTypes.number,
        greatPlaceCoords: PropTypes.any,
      };

      static defaultProps = {
        center: {lat: 59.938043, lng: 30.337157},
        zoom: 9,
      };

      constructor(props) {
        super(props);
      }

      render() {
        return (
           <GoogleMap
            defaultCenter={this.props.center}
            defaultZoom={this.props.zoom}
          >
            <MapMarker lat={59.955413} lng={30.337844} />
          </GoogleMap>
        );
      }
    }

    const mapHolder = TestUtils.renderIntoDocument(
      <MapHolder />
    );

    const marker = TestUtils.findRenderedDOMComponentWithClass(mapHolder, 'mapMarkerClassName');
    expect(marker.parentNode.style.left).toEqual('0.250129066669615px');
    expect(marker.parentNode.style.top).toEqual('-12.62811732746195px');
  });


  it('Should call custom loader', () => {
    const API_KEY = 'API_KEY';
    const spy = expect.createSpy(() => {});
    const asyncSpy = async (a) => spy(a);

    TestUtils.renderIntoDocument(
      <GoogleMap
        // TODO add gmap api mock
        // defaultCenter={{lat: 59.938043, lng: 30.337157}}
        // defaultZoom={9}
        bootstrapURLKeys={{
          key: API_KEY,
        }}
        googleMapLoader={asyncSpy}
      />
    );

    expect(spy.calls.length).toEqual(1);
    expect(spy.calls[0].arguments[0]).toEqual({
      key: API_KEY,
    });
  });

  it('Should add a className to the marker from $markerHolderClassName', () => {
    const markerHolderClassName = 'marker-holder-class-name';

    class MapHolder extends Component { // eslint-disable-line react/no-multi-comp
      static propTypes = {
        center: PropTypes.array,
        zoom: PropTypes.number,
        greatPlaceCoords: PropTypes.any,
      };

      static defaultProps = {
        center: [59.938043, 30.337157],
        zoom: 9,
      };

      constructor(props) {
        super(props);
      }

      render() {
        return (
           <GoogleMap
            center={this.props.center}
            zoom={this.props.zoom}
          >
            <div lat={59.955413} lng={30.337844} $markerHolderClassName={markerHolderClassName} />
          </GoogleMap>
        );
      }
    }

    const mapHolder = TestUtils.renderIntoDocument(
      <MapHolder />
    );

    const marker = TestUtils
        .findRenderedDOMComponentWithClass(mapHolder, 'marker-holder-class-name');
    expect(marker.className).toEqual('marker-holder-class-name');
    expect(marker.style.left).toEqual('0.250129066669615px');
    expect(marker.style.top).toEqual('-12.62811732746195px');
  });

  it('Should not add a className to the marker if $markerHolderClassName is not present', () => {
    class MapHolder extends Component { // eslint-disable-line react/no-multi-comp
      static propTypes = {
        center: PropTypes.array,
        zoom: PropTypes.number,
        greatPlaceCoords: PropTypes.any,
      };

      static defaultProps = {
        center: [59.938043, 30.337157],
        zoom: 9,
      };

      constructor(props) {
        super(props);
      }

      render() {
        return (
           <GoogleMap
            center={this.props.center}
            zoom={this.props.zoom}
          >
            <div className="marker-class-name" lat={59.955413} lng={30.337844}/>
          </GoogleMap>
        );
      }
    }

    const mapHolder = TestUtils.renderIntoDocument(
      <MapHolder />
    );

    const marker = TestUtils
        .findRenderedDOMComponentWithClass(mapHolder, 'marker-class-name');
    expect(marker.parentNode.className).toNotExist();
    expect(marker.parentNode.style.left).toEqual('0.250129066669615px');
    expect(marker.parentNode.style.top).toEqual('-12.62811732746195px');
  });
});