Mock leaflet resources in Cypress

Question

I need to test a leaflet map (which download tiles, css, etc) but I can't simulate tile download with Cypress.

When my Cypress test open the map, it tries to download urls like https://tile.openstreetmap.se/hydda/base/6/31/22.png, https://basemaps.cartocdn.com/light_nolabels/6/31/22.png or https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/6/31/22.png If I do nothing, my test is locked on cy.visit because there is still some resources that wait to be downloaded I tried to intercept these urls but I end up with a leaflet error.

Uncaught Error: Uncaught (in promise): TypeError: Cannot read property 'replace' of undefined
TypeError: Cannot read property 'replace' of undefined
    at LeafletTilesFallbackDirective.getSampleImgURLFromTileTemplate (leaflet-tiles-fallback.directive.ts:95)

When I use

 cy.fixture('images/tile.png').then( image => {
      cy.intercept("https://tile.openstreetmap.se/hydda/base/6/31/22.png", image)
      cy.intercept("https://basemaps.cartocdn.com/light_nolabels/6/31/22.png", image)
      cy.intercept("https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/6/31/22.png", image)
    })

My CI slave don't have acces to internet so I can't afford to wait for the "real" tiles to be downloaded so I need to mock the mecanism but don't know how to do it....

Thanks in advance

score 1 · Answer 1 · answered Jun 25 '21 at 12:31

1

Ok, it was simply my fault. I used the new intercept and didn't use it correctly.

The good way is to do the following line for me

cy.intercept("https://*.openstreetmap.se/**/*.png", {fixture: "images/tile.png"})

answered Jun 25 '21 at 12:31

Bluepioupiou

31
6

score 0 · Answer 2 · answered Jun 24 '21 at 16:40

One issue I see is that your statement:

cy.fixture('images/tile.png').then( image => {
      cy.intercept("https://tile.openstreetmap.se/hydda/base/6/31/22.png", image)
      cy.intercept("https://basemaps.cartocdn.com/light_nolabels/6/31/22.png", image)
      cy.intercept("https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/6/31/22.png", image)
    })

only intercepts tiles for one specific tile per intercept. You'll want to use a more general route matcher that would intercept all the tiles:

cy.fixture('images/tile.png').then( image => {
      cy.intercept("https://tile.openstreetmap.se/hydda/base/*", image)
      cy.intercept("https://basemaps.cartocdn.com/light_nolabels/*", image)
      cy.intercept("https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/*", image)
    })

So now when leaflet loads, and it makes requests for say, the 16 or 20 tiles that are usually required to fill a map bounds, every tile request will be caught and returned with that image. The map will look like garbarge, but that probably doesn't matter for your cypress tests. There may be other issues here, but that's the first issue I see.

Indeed I intended to do that after with someting like cy.intercept("https://tile.openstreetmap.se/hydda/base/**/*.png", image) but it got the same result. Anyway with only the requested tile I had the leaflet error and no other tile where requested — Bluepioupiou, Jun 25 '21 at 06:56

Mock leaflet resources in Cypress

2 Answers2

Linked