Unit Test Map Markers

[tomporvaz]

Is your feature request related to a problem? Please describe.
Write Cypress Unit tests to compare the number of map markers on the frontend with the number recorded in firebase.

Describe the solution you'd like
n/a

Describe alternatives you've considered
n/a

Additional context
n/a

[tomporvaz]

Having a trouble targeting markers in the DOM/on map.

[vontell]

@tomporvaz I think one issue is that the google map and markers render on a canvas by default. It looks like you can disable this by adding optimized={false} to the <Marker> components.

I tested this by going into IndieMarker.js, adding optimize={false} to the component inside of that file, and then I searched for data:image/svg+xml;utf8 in the DOM within the chrome inspector, since the markers are mostly using those SVGs for icons, and I was able to find the markers. You'd probably want to find a better selector / way to query for these markers, but hoping that helps!

Resources:
https://stackoverflow.com/questions/52022802/how-can-we-test-the-display-of-marker-markers-on-google-map-using-cypress-io

New setup for Marker in IndieMarker.js:

<Marker
            access={this.props.tap.access}
            map={this.props.map}
            google={this.props.google}
            mapCenter={this.props.mapCenter}
            key={this.props.key}
            name={this.props.tap.tapnum}
            organization={this.props.tap.organization}
            address={this.props.tap.address}
            hours={this.props.tap.hours}
            description={this.props.tap.description}
            filtration={this.props.tap.filtration}
            handicap={this.props.tap.handicap}
            service={this.props.tap.service}
            sparkling={
              'sparkling' in this.props.tap ? this.props.tap.sparkling : 'no'
            }
            tap_type={this.props.tap.tap_type}
            norms_rules={this.props.tap.norms_rules}
            vessel={this.props.tap.vessel}
            img={this.props.tap.images}
            onClick={this.onMarkerClick.bind(this)}
            position={{ lat: this.props.tap.lat, lng: this.props.tap.lon }}
            icon={this.getIcon(this.props.tap.access)}
            infoIcon={this.getIcon(this.props.tap.access, true)}
            // The lat and lon properties were added to support the object-based
            // setting for SET_SELECTED_PLACE redux action. Object structure consistency is needed in order
            // for getWalkingDurationAndTimes() in the SelectedTap component to work properly.
            lat={this.props.tap.lat}
            lon={this.props.tap.lon}
            optimized={false}
          />

Ideally, we would only want to do this when in cypress testing, because this will make the site slower since we are now managing divs for every marker rather than drawing once on a canvase. If we could set an env var before cypress runs (i.e. change the test command to IS_TESTING=true cypress run), then we can do:

optimized={!process.env.IS_TESTING}

[tomporvaz]

@vontell and @mandyshri101 to meet today to discuss implementation

[vontell]

// This should click the zoom out button
cy.get('button[title="Zoom out"]').click();

[vontell]

My recommendation (PMs feel free to chip in):

Good initial test:

1. Verify that the number of markers on the map is > 100
2. Verify that the number of markers after filtering is < the number of markers before filtering

Steps to do this:

1. Make sure your code is up to date (git pull)
2. Add the optimize={false} attribute to the Marker component in IndieMarker.js
3. Try doing cy.get('img[src^="data:image/svg"]') to find all the markers - you should see lots, over a hundred

[mandyshri101]

Thanks @vontell for helping with this. Let me try and see if I am able to make this happen. I believe this should be quick one.

[mandyshri101]

Expected count from the actual page

And total number of counted by cypress matches

[affabillyty]

@tomporvaz and @freelyPheobe , I believe you shared that Mandy is taking a break, so this ticket can be un-assigned from him and moved back to Ready.

@mandyshri101 , thank you for all of your work on this ticket. Do you have anything you can share here with the next contributor who takes this ticket?

[mandyshri101]

@affabillyty: Sorry billy I could not share as I am traveling for my business trip aboard. the work I did is in my local machine at home in US. Would appreciate if someone can assigned to someone else. Thanks @tomporvaz for doing that. Sorry for having delays in reply as I am in totally different timezone and very busy with my assignment. As soon as I am back I will go ahead and join take on whichever ticket is open.

[gcardonag]

This is being replaced by #484, #485, #493, #494, #495, #496