map-drawing-tools.js

import React, { Component } from 'react';
import DrawingManager from 'react-google-maps/lib/drawing/DrawingManager';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { mapConfig } from '../../../../constants/component-configs';
import { setShapeEventListener, getGeomFilters, getShapeArea } from '../../../../utilities/map-tools-utilities';
const { drawingManager } = mapConfig;
import { setMapFilters, setDrawingMode } from '../../../../actions/map-actions';
import debounce from 'lodash.debounce';
import ShapeTool from './shape-tool';

class MapDrawingTools extends Component {
  constructor() {
    super();
    this.state = { shape: null, active: false };
    this.calculateShape = this.calculateShape.bind(this);
    this.debounceCalculateInside = debounce(this.calculateInside.bind(this), 500);
    this.resetShape = this.resetShape.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.mode !== nextProps.mode) {
      this.setState({ active: true });
    }
  }
  /* eslint-disable camelcase */
  calculateInside() {
    const { shape } = this.state;
    const geom_in = getGeomFilters(shape);
    this.props.setMapFilters({ geom_in });
    this.setState({ active: false });
  }

  resetShape() {
    this.state.shape.setMap(null);
    this.setState({ shape: null });
    this.props.setDrawingMode('');
    this.props.setMapFilters({ geom_in: null });
  }
  /* eslint-enable */

  calculateShape(shape) {
    if (this.state.shape) {
      this.state.shape.setMap(null);
    }
    this.setState({ shape: setShapeEventListener(shape, this.debounceCalculateInside) });
    this.calculateInside();
  }

  render() {
    const options = {
      polygonOptions: drawingManager.figureOptions,
      circleOptions: drawingManager.figureOptions
    };

    const { mode, count } = this.props;
    const { shape, active } = this.state;
    return (
      <div>
        { Boolean(mode.length) && active &&
          <DrawingManager drawingMode={mode} options={options} onPolygonComplete={this.calculateShape} onCircleComplete={this.calculateShape} />
        }
        { shape &&
          <ShapeTool count={count} area={getShapeArea(shape)} closeWindow={this.resetShape} />
        }
      </div>
    );
  }
}

MapDrawingTools.propTypes = {
  count: PropTypes.number,
  loader: PropTypes.bool,
  mode: PropTypes.string,
  setDrawingMode: PropTypes.func,
  setMapFilters: PropTypes.func
};

const mapStateToProps = state => {
  const { drawing, loader } = state.map;
  const count = state.projects.list.length;
  return { ...drawing, count, loader };
};

export default connect(mapStateToProps, { setMapFilters, setDrawingMode })(MapDrawingTools);

export { MapDrawingTools as PureMapDrawingTools };

map-drawing-tools.spec.js

import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import { PureMapDrawingTools } from './index';
import sinon from 'sinon';

describe('Map Drawing Tools', () => {
  const props = {
    mode: '',
    setDrawingMode: () => {},
    setMapFilters: () => {}
  };

  const shape = {
    radius: 10,
    getCenter: () => ({ lat: () => 10, lng: () => 10 }),
    addListener: () => {},
    setMap: () => {}
  };

  describe('when calculateInside() is called', () => {
    it('should call setMapFilters() action', () => {
      const expected = true;
      const setMapFiltersSpy = sinon.spy();
      const updatedProps = { ...props, setMapFilters: setMapFiltersSpy };
      const wrapper = shallow(<PureMapDrawingTools {...updatedProps} />);
      wrapper.setState({ shape });
      wrapper.instance().calculateInside();
      const actual = setMapFiltersSpy.called;
      expect(actual).equals(expected);
    });

    it('should set `active` state to false', () => {
      const expected = false;
      const wrapper = shallow(<PureMapDrawingTools {...props} />);
      wrapper.instance().calculateShape(shape);
      const actual = wrapper.instance().state.active;
      expect(actual).deep.equals(expected);
    });
  });

  describe('when calculateShape() is called', () => {
    it('it should remove current shape from the map by calling "setMap(null)"', () => {
      const expected = true;
      const setMapSpy = sinon.spy();
      const wrapper = shallow(<PureMapDrawingTools {...props} />);
      wrapper.setState({ shape: { ...shape, setMap: setMapSpy } });
      wrapper.instance().calculateShape(shape);
      const actual = setMapSpy.calledWith(null);
      expect(actual).equals(expected);
    });

    it('it should set state to new shape instance', () => {
      const expected = shape;
      const wrapper = shallow(<PureMapDrawingTools {...props} />);
      wrapper.instance().calculateShape(shape);
      const actual = wrapper.instance().state.shape;
      expect(actual).deep.equals(expected);
    });

    it('it should call the calculateInside() component method', () => {
      const expected = true;
      const calculateInsideSpy = sinon.spy();
      const wrapper = shallow(<PureMapDrawingTools {...props} />);
      wrapper.instance().calculateInside = calculateInsideSpy;
      wrapper.instance().calculateShape(shape);
      const actual = calculateInsideSpy.called;
      expect(actual).deep.equals(expected);
    });
  });

  describe('when resetShape() is called', () => {
    it('should call setDrawingMode() action with empty string', () => {
      const expected = true;
      const setDrawingModeSpy = sinon.spy();
      const updatedProps = { ...props, setDrawingMode: setDrawingModeSpy };
      const wrapper = shallow(<PureMapDrawingTools {...updatedProps} />);
      wrapper.setState({ shape });
      wrapper.instance().resetShape();
      const actual = setDrawingModeSpy.calledWith('');
      expect(actual).equals(expected);
    });
  });
});