React-google-maps: Add tests to increase coverage

Created on 8 Oct 2016 · 9Comments · Source: tomchentw/react-google-maps

PRs welcomed

Source

rowlandekemezie

Most helpful comment

Alright so after playing around with this for a bit. I wanted to try and understand more about what exactly we should be using and doing for writing these tests.

I initially tried using React's test renderer and Jest's snapshots to test the GoogleMap component but ran into this issue https://github.com/facebook/jest/issues/1353. The recommended solve there was trying a number of different things but ultimately I had to install enzyme, enzyme-to-json, and react-addons-test-utils.

I was successfully then able to go ahead and create the snapshots and do a basic render test with the GoogleMap.

import React from "react";
import { withGoogleMap, GoogleMap } from "../index";
import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';
import _ from "lodash";

const SimpleGoogleMap = withGoogleMap(props => (
  <GoogleMap
    ref={props.onMapLoad}
    defaultZoom={3}
    defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
    onClick={props.onMapClick}
  />
));

describe(`GoogleMap`, () => {
  it(`should render`, () => {
    const googleMap = shallow(
      <SimpleGoogleMap
        containerElement={
          <div style={{ height: `100%` }} />
        }
        mapElement={
          <div style={{ height: `100%` }} />
        }
        onMapLoad={_.noop}
        onMapClick={_.noop}
      />
    );
    let tree = shallowToJson(googleMap);
    expect(tree).toMatchSnapshot();
  });
});

I'm hoping some of the other contributors can chime in here and let me know if this is the direction I should be moving or if this is not really the test setup you are looking for.

johnstew on 29 Oct 2016

👍2

All 9 comments

I'd appreciate some help from contributors!

tomchentw on 11 Oct 2016

I'd be interested in helping write some tests. I'm going to go ahead and take a stab at writing some and will submit PR for review once I feel I have some good progress.

johnstew on 29 Oct 2016

Alright so after playing around with this for a bit. I wanted to try and understand more about what exactly we should be using and doing for writing these tests.

I was successfully then able to go ahead and create the snapshots and do a basic render test with the GoogleMap.

import React from "react";
import { withGoogleMap, GoogleMap } from "../index";
import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';
import _ from "lodash";

const SimpleGoogleMap = withGoogleMap(props => (
  <GoogleMap
    ref={props.onMapLoad}
    defaultZoom={3}
    defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
    onClick={props.onMapClick}
  />
));

describe(`GoogleMap`, () => {
  it(`should render`, () => {
    const googleMap = shallow(
      <SimpleGoogleMap
        containerElement={
          <div style={{ height: `100%` }} />
        }
        mapElement={
          <div style={{ height: `100%` }} />
        }
        onMapLoad={_.noop}
        onMapClick={_.noop}
      />
    );
    let tree = shallowToJson(googleMap);
    expect(tree).toMatchSnapshot();
  });
});

I'm hoping some of the other contributors can chime in here and let me know if this is the direction I should be moving or if this is not really the test setup you are looking for.

johnstew on 29 Oct 2016

👍2

When you were running tests, what command did you use? It took me forever to find the correct one (you can see it in the .travis.yml file), but the command you should be using is npm test -- --coverage. This will not only run your tests but also give you a coverage report.

Also on a side note, I like how you went about the tests. I looked at testing a little bit ago, and as I was writing them I had to do a whole lot of import statements as well, which was weird because the test files currently have no import statements in them (that reference node_modules). Because of that it's hard to know what the eventual vision is of Tom & Co is, but you have a very nice start.

danehrlich1 on 29 Oct 2016

Yea so I've been running npm test for now without the code coverage because I was just interested in getting the tests up and running. I feel like once I get some good direction from Tom & Co about what I have above and if I am going down the right path for how they want the project tests structured then I will begin to generate the test coverage report. Also, @danielehrlich thank you! I'm glad I'm going about it the right away (or so we think). 😄

johnstew on 30 Oct 2016

Anyone interested?

tomchentw on 20 Apr 2017

👍1

I'll be picking this one up @tomchentw I'll start a feature branch and progressively start increasing coverage.