Added the required tests, except for tab rendering

[eitan-lich]

Hi, i havent added tests for the tabs rendering as i didn't completely understand what it meant.

[oliviasculley]

Hello, this looks fantastic!! However could you modify this PR to merge into codeforgreenville:develop? I want to get github actions set up to automatically run these tests before they're merged into stable (which will automatically deploy it to the website). Thank you so much!!!

[oliviasculley]

nevermind I was able to change the merge target :sweat_smile: Thank you so much!

[oliviasculley]

So, after playing around with the tests, it turns out that cypress is a lot more complicated than I thought... I made the tests a bit more assertive and tried to remove the hardcoded wait times as recommended by the linter, which in turn broke the tests for various reasons, so here are some of the things that I learned:

• When loading the map, we needed to intercept the initial API call to make sure that it will not try interacting with the map layers before any of them have loaded in
• Cypress actually makes it really easy to mock third party API calls!
• When asserting on the url, we needed to use cy.url().should to allow cypress to wait for the url to change, instead of doing .then() on whatever the current url is at the time (which cypress will just run instantly)
• We're taking advantage of the fact that the app will set the lat, lng and zoom query parameters on first load, so we can wait for all of them to be present for the map to finish loading
• Leaflet interaction doesn't work with just .trigger() calls, so we needed to create custom cypress commands in order to interact with the leaflet component

all of this to say:

• Testing leaflet in cypress is really hard and annoying

These changes are in https://github.com/codeforgreenville/open-map-data-multi-layers-demo/commit/d79a6d36966239790a1e38172a63b9bea15901d4 if you'd like to look at them!

[eitan-lich]

Ok thank you very much.