Skip to content

Commit

Permalink
Fix bugs caused by layer id conflict (#443)
Browse files Browse the repository at this point in the history 
* Add map container's id to all id names to prevent conflict

* Fix dropdown and layererror icon bugs in multipleMaps page from OIM layers

* Change cypress selectors to match the id changes

* Fix errors in Jasmine tests

* Fix bug causing tests to fail

* Fix bug in highlight feature

* Update layerFilter and layersMenu spec file
  • Loading branch information
@crisner
crisner authored Mar 9, 2020
1 parent f56b6d1 commit cd4d82f
Show file tree
Hide file tree
Showing 23 changed files with 190 additions and 182 deletions.
4 changes: 2 additions & 2 deletions cypress/integration/aqicn.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ describe('Aqicn layer', function() {
})
})

cy.get('#menu-aqicnLayer label').click({ force: true })
cy.get('#map-menu-aqicnLayer label').click({ force: true })
cy.get('.leaflet-marker-pane').children().should('have.length', 2)
})
})
Expand Down Expand Up @@ -43,7 +43,7 @@ describe('Aqicn layer', function() {
})

it('removes markers from the map and the layer name from the hash when clicked again', function() {
cy.get('#menu-aqicnLayer label').click({ force: true })
cy.get('#map-menu-aqicnLayer label').click({ force: true })
cy.hash().should('eq', '#lat=51.15&lon=13.45&zoom=4&layers=Standard')
cy.get('.leaflet-marker-pane').children().should('have.length', 0)
cy.get('.leaflet-overlay-pane svg g').children().should('have.length', 0)
Expand Down
4 changes: 2 additions & 2 deletions cypress/integration/eonetFiresLayer.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ describe('Eonet fires layer', function() {
})
})

cy.get('#menu-eonetFiresLayer label').click({ force: true })
cy.get('#map-menu-eonetFiresLayer label').click({ force: true })
cy.get('.leaflet-marker-pane').children().should('have.length', 4)
})
})
Expand Down Expand Up @@ -38,7 +38,7 @@ describe('Eonet fires layer', function() {
})

it('removes markers from the map and the layer name from the hash when clicked again', function() {
cy.get('#menu-eonetFiresLayer label').click({ force: true })
cy.get('#map-menu-eonetFiresLayer label').click({ force: true })
cy.hash().should('eq', '#lat=43.00&lon=-80.00&zoom=4&layers=Standard')
cy.get('.leaflet-marker-pane').children().should('have.length', 0)
cy.get('.leaflet-overlay-pane svg g').children().should('have.length', 0)
Expand Down
4 changes: 2 additions & 2 deletions cypress/integration/fractracker.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ describe('Fractracker layer', function() {
})
})

cy.get('#menu-fractracker label').click({ force: true })
cy.get('#map-menu-fractracker label').click({ force: true })
cy.get('.leaflet-marker-pane').children().should('have.length', 2)
})
})
Expand Down Expand Up @@ -45,7 +45,7 @@ describe('Fractracker layer', function() {
})

it('removes markers from the map and the layer name from the hash when clicked again', function() {
cy.get('#menu-fractracker label').click({ force: true })
cy.get('#map-menu-fractracker label').click({ force: true })
cy.hash().should('eq', '#lat=41.624&lon=-89.517&zoom=5&layers=Standard')
cy.get('.leaflet-marker-pane').children().should('have.length', 0)
cy.get('.leaflet-overlay-pane svg g').children().should('have.length', 0)
Expand Down
4 changes: 2 additions & 2 deletions cypress/integration/fractrackerMobile.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ describe('FractrackerMobile layer', function() {
})
})

cy.get('#menu-fracTrackerMobile label').click({ force: true })
cy.get('#map-menu-fracTrackerMobile label').click({ force: true })
cy.get('.leaflet-overlay-pane svg g').children().should('have.length', 2)
})
})
Expand Down Expand Up @@ -50,7 +50,7 @@ describe('FractrackerMobile layer', function() {
})

it('removes markers from the map and the layer name from the hash when clicked again', function() {
cy.get('#menu-fracTrackerMobile label').click({ force: true })
cy.get('#map-menu-fracTrackerMobile label').click({ force: true })
cy.hash().should('eq', '#lat=41.624&lon=-91.626&zoom=5&layers=Standard')
cy.get('.leaflet-marker-pane').children().should('have.length', 0)
cy.get('.leaflet-overlay-pane svg g').children().should('have.length', 0)
Expand Down
40 changes: 20 additions & 20 deletions cypress/integration/layerErrorIcon.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,56 +4,56 @@ describe('Broken icon for layer errors', function() {
cy.wait(300)
cy.window().then((win) => {
cy.stub(win.FracTracker_mobile, 'requestData')
cy.get('#menu-fracTrackerMobile label').click({ force: true }).then(() => {
cy.get('#map-menu-fracTrackerMobile label').click({ force: true }).then(() => {
win.FracTracker_mobile.onError('fracTrackerMobile')
})
cy.get('#menu-fracTrackerMobile .layer-name').should('contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
cy.get('#map-menu-fracTrackerMobile .layer-name').should('contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
})
})

it('removes broken icon when layer is removed from the map', function() {
cy.get('#menu-fracTrackerMobile label').click({ force: true })
cy.get('#menu-fracTrackerMobile .layer-name').should('not.contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
cy.get('#map-menu-fracTrackerMobile label').click({ force: true })
cy.get('#map-menu-fracTrackerMobile .layer-name').should('not.contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
})

it('shows broken icon on a layer error when layer within a group is added to map', function() {
cy.window().then((win) => {
cy.stub(win.PurpleAirMarkerLayer, 'requestData')
cy.get('#purpleairmarker label').click({ force: true }).then(() => {
cy.get('#map-purpleairmarker label').click({ force: true }).then(() => {
win.PurpleAirMarkerLayer.onError('purpleairmarker', true)
})
cy.get('#purpleairmarker .layer-list-name').should('contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
cy.get('#map-purpleairmarker .layer-list-name').should('contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
})
})

it('removes broken icon when layer within a group is removed from the map', function() {
cy.get('#purpleairmarker label').click({ force: true })
cy.get('#purpleairmarker .layer-list-name').should('not.contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
cy.get('#map-purpleairmarker label').click({ force: true })
cy.get('#map-purpleairmarker .layer-list-name').should('not.contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
})

it('shows broken icon for each layer when there are more than one layer with errors', function() {
cy.window().then((win) => {
cy.stub(win.FracTracker_mobile, 'requestData')
cy.stub(win.PurpleAirMarkerLayer, 'requestData')
cy.get('#menu-fracTrackerMobile label').click({ force: true }).then(() => {
cy.get('#map-menu-fracTrackerMobile label').click({ force: true }).then(() => {
win.FracTracker_mobile.onError('fracTrackerMobile')
})
cy.get('#menu-fracTrackerMobile .layer-name').should('contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
cy.get('#purpleairmarker .layer-list-name').should('not.contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
cy.get('#purpleairmarker label').click({ force: true }).then(() => {
cy.get('#map-menu-fracTrackerMobile .layer-name').should('contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
cy.get('#map-purpleairmarker .layer-list-name').should('not.contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
cy.get('#map-purpleairmarker label').click({ force: true }).then(() => {
win.PurpleAirMarkerLayer.onError('purpleairmarker', true)
})
cy.get('#menu-fracTrackerMobile .layer-name').should('contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
cy.get('#purpleairmarker .layer-list-name').should('contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
cy.get('#map-menu-fracTrackerMobile .layer-name').should('contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
cy.get('#map-purpleairmarker .layer-list-name').should('contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
})
})

it('removes broken icon from each layer when there are more than one layer with errors', function() {
cy.get('#menu-fracTrackerMobile label').click({ force: true })
cy.get('#menu-fracTrackerMobile .layer-name').should('not.contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
cy.get('#purpleairmarker .layer-list-name').should('contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
cy.get('#purpleairmarker label').click({ force: true })
cy.get('#menu-fracTrackerMobile .layer-name').should('not.contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
cy.get('#purpleairmarker .layer-list-name').should('not.contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
cy.get('#map-menu-fracTrackerMobile label').click({ force: true })
cy.get('#map-menu-fracTrackerMobile .layer-name').should('not.contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
cy.get('#map-purpleairmarker .layer-list-name').should('contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
cy.get('#map-purpleairmarker label').click({ force: true })
cy.get('#map-menu-fracTrackerMobile .layer-name').should('not.contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
cy.get('#map-purpleairmarker .layer-list-name').should('not.contain.html', '<i style="color: #d47d12;" class="fas fa-exclamation-triangle .text-warning"></i>')
})
})
54 changes: 27 additions & 27 deletions cypress/integration/layerFilter.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,77 +3,77 @@ describe('Layer filtering in LEL layers menu', function() {
cy.openWindow('/example/index.html#lat=43.00&lon=-4.07&zoom=3&layers=Standard')
cy.wait(300)
cy.get('.leaflet-control-layers').trigger('mouseover')
cy.get('.layer-info-container').should('have.css', 'display', 'block').then((layers) => {
cy.get('[data-cy=layer]').should('have.css', 'display', 'block').then((layers) => {
const layersArray = Array.prototype.slice.call(layers)
console.log(layersArray.filter(layer => layer.style.display === 'block'))
expect(layersArray.filter(layer => layer.style.display === 'block').length).to.equal(9)
})
cy.get('#menu-aqicnLayer').should('have.css', 'display', 'block')
cy.get('#menu-eonetFiresLayer').should('have.css', 'display', 'block')
cy.get('#menu-luftdaten').should('have.css', 'display', 'block')
cy.get('#menu-openaq').should('have.css', 'display', 'block')
cy.get('#groupName-openInfraMap').should('have.css', 'display', 'block')
cy.get('#openInfraMap.layers-sub-list.collapse').children().then((layers) => {
cy.get('#map-menu-aqicnLayer').parent().should('have.css', 'display', 'block')
cy.get('#map-menu-eonetFiresLayer').parent().should('have.css', 'display', 'block')
cy.get('#map-menu-luftdaten').parent().should('have.css', 'display', 'block')
cy.get('#map-menu-openaq').parent().should('have.css', 'display', 'block')
cy.get('#map-menu-openInfraMap').should('have.css', 'display', 'block')
cy.get('#map-openInfraMap.layers-sub-list.collapse').children().then((layers) => {
const layersArray = Array.prototype.slice.call(layers)
expect(layersArray.map(layer => layer.style.display === 'block').length).to.equal(4)
})
cy.get('#menu-opensense').should('have.css', 'display', 'block')
cy.get('#groupName-openWeatherMap').should('have.css', 'display', 'block')
cy.get('#openWeatherMap.layers-sub-list.collapse').children().then((layers) => {
cy.get('#map-menu-opensense').parent().should('have.css', 'display', 'block')
cy.get('#map-menu-openWeatherMap').should('have.css', 'display', 'block')
cy.get('#map-openWeatherMap.layers-sub-list.collapse').children().then((layers) => {
const layersArray = Array.prototype.slice.call(layers)
expect(layersArray.map(layer => layer.style.display === 'block').length).to.equal(13)
})
cy.get('#groupName-purpleair').should('have.css', 'display', 'block')
cy.get('#purpleair.layers-sub-list.collapse').children().then((layers) => {
cy.get('#map-menu-purpleair').should('have.css', 'display', 'block')
cy.get('#map-purpleair.layers-sub-list.collapse').children().then((layers) => {
const layersArray = Array.prototype.slice.call(layers)
expect(layersArray.map(layer => layer.style.display === 'block').length).to.equal(2)
})
cy.get('#menu-PLpeople').should('have.css', 'display', 'block')
cy.get('#map-menu-PLpeople').parent().should('have.css', 'display', 'block')
})

it('has new layers at map view [38.565, -100.767] at zoom 5', function() {
cy.window().its('map').invoke('setView',[38.565, -100.767], 5)
cy.wait(300)
cy.get('.layer-info-container').should('have.css', 'display', 'block').then((layers) => {
cy.get('[data-cy=layer]').should('have.css', 'display', 'block').then((layers) => {
const layersArray = Array.prototype.slice.call(layers)
expect(layersArray.filter(layer => layer.style.display === 'block').length).to.equal(14)
})
cy.get('#menu-fractracker').should('have.css', 'display', 'block')
cy.get('#menu-fracTrackerMobile').should('have.css', 'display', 'block')
cy.get('#groupName-justiceMap').should('have.css', 'display', 'block')
cy.get('#justiceMap.layers-sub-list.collapse').children().then((layers) => {
cy.get('#map-menu-fractracker').parent().should('have.css', 'display', 'block')
cy.get('#map-menu-fracTrackerMobile').parent().should('have.css', 'display', 'block')
cy.get('#map-menu-justiceMap').should('have.css', 'display', 'block')
cy.get('#map-justiceMap.layers-sub-list.collapse').children().then((layers) => {
const layersArray = Array.prototype.slice.call(layers)
expect(layersArray.map(layer => layer.style.display === 'block').length).to.equal(9)
})
cy.get('#menu-pfasLayer').should('have.css', 'display', 'block')
cy.get('#menu-toxicReleaseLayer').should('have.css', 'display', 'block')
cy.get('#map-menu-pfasLayer').parent().should('have.css', 'display', 'block')
cy.get('#map-menu-toxicReleaseLayer').parent().should('have.css', 'display', 'block')
})

it('has new layers at map view [40.872, -81.749] at zoom 6', function() {
cy.window().its('map').invoke('setView',[40.872, -81.749], 6)
cy.wait(300)
cy.get('.layer-info-container').should('have.css', 'display', 'block').then((layers) => {
cy.get('[data-cy=layer]').should('have.css', 'display', 'block').then((layers) => {
const layersArray = Array.prototype.slice.call(layers)
expect(layersArray.filter(layer => layer.style.display === 'block').length).to.equal(16)
})
cy.get('#groupName-indigenousLands').should('have.css', 'display', 'block')
cy.get('#indigenousLands.layers-sub-list.collapse').children().then((layers) => {
cy.get('#map-menu-indigenousLands').should('have.css', 'display', 'block')
cy.get('#map-indigenousLands.layers-sub-list.collapse').children().then((layers) => {
const layersArray = Array.prototype.slice.call(layers)
expect(layersArray.map(layer => layer.style.display === 'block').length).to.equal(3)
})
cy.get('#menu-Unearthing').should('have.css', 'display', 'block')
cy.get('#map-menu-Unearthing').parent().should('have.css', 'display', 'block')
})

it('has new layers at mapzoom 8', function() {
cy.window().its('map').invoke('setView',[40.872, -81.749], 8)
cy.wait(300)
cy.get('.layer-info-container').should('have.css', 'display', 'block').then((layers) => {
cy.get('[data-cy=layer]').should('have.css', 'display', 'block').then((layers) => {
const layersArray = Array.prototype.slice.call(layers)
console.log(layersArray.filter(layer => layer.style.display === 'block'))
expect(layersArray.filter(layer => layer.style.display === 'block').length).to.equal(16)
})
cy.get('#menu-odorreport').should('have.css', 'display', 'block')
cy.get('#menu-Unearthing').should('have.css', 'display', 'none')
cy.get('#map-menu-odorreport').parent().should('have.css', 'display', 'block')
cy.get('#map-menu-Unearthing').parent().should('have.css', 'display', 'none')
})

})
22 changes: 11 additions & 11 deletions cypress/integration/layersMenu.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,27 +47,27 @@ describe('Layers menu filters and displays layers on map', function() {
cy.window().its('map').invoke('setView',[38.565, -100.767], 5)
cy.wait(300)
cy.get('.leaflet-control-layers').trigger('mouseover')
cy.get('#menu-justiceMap a[data-toggle="collapse"]').click()
cy.get('div#justiceMap.layers-sub-list.collapse.show').children('div')
cy.get('#map-menu-justiceMap a[data-toggle="collapse"]').click()
cy.get('div#map-justiceMap.layers-sub-list.collapse.show').children('div')
.last('label').click()
.find('input[type="checkbox"]').should('be.checked')
cy.window().its('map').invoke('setView',[43.00, -83.00], 3)
cy.wait(300)
cy.get('#menu-justiceMap').should('have.css', 'display', 'block')
cy.get('div#justiceMap.layers-sub-list.collapse.show').children('div')
.last('label').should('have.css', 'display', 'block')
cy.get('div#justiceMap.layers-sub-list.collapse.show').children('div')
.first('label').should('have.css', 'display', 'none')
cy.get('#map-menu-justiceMap').should('have.css', 'display', 'block')
cy.get('div#map-justiceMap.layers-sub-list.collapse.show').children('div')
.last().should('have.css', 'display', 'block')
cy.get('div#map-justiceMap.layers-sub-list.collapse.show').children('div')
.first().should('have.css', 'display', 'none')
})

it('filters out the layer on map move after it is unchecked', function() {
cy.get('div#justiceMap.layers-sub-list.collapse.show').children('div')
cy.get('div#map-justiceMap.layers-sub-list.collapse.show').children('div')
.last('label').click()
.find('input[type="checkbox"]').should('not.be.checked')
cy.window().its('map').invoke('setView',[43.00, -85.00], 3)
cy.wait(300)
cy.get('#menu-justiceMap').should('have.css', 'display', 'none')
cy.get('div#justiceMap.layers-sub-list.collapse.show').children('div')
.last('label').should('have.css', 'display', 'none')
cy.get('#map-menu-justiceMap').should('have.css', 'display', 'none')
cy.get('div#map-justiceMap.layers-sub-list.collapse.show').children('div')
.last().should('have.css', 'display', 'none')
})
})
4 changes: 2 additions & 2 deletions cypress/integration/luftdaten.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ describe('Luftdaten layer', function() {
})
})

cy.get('#menu-luftdaten label').click({ force: true })
cy.get('#map-menu-luftdaten label').click({ force: true })
cy.get('.leaflet-marker-pane').children().should('have.length', 2)
})
})
Expand Down Expand Up @@ -45,7 +45,7 @@ describe('Luftdaten layer', function() {
})

it('removes markers from the map and the layer name from the hash when clicked again', function() {
cy.get('#menu-luftdaten label').click({ force: true })
cy.get('#map-menu-luftdaten label').click({ force: true })
cy.hash().should('eq', '#lat=51.15&lon=13.45&zoom=4&layers=Standard')
cy.get('.leaflet-marker-pane').children().should('have.length', 0)
cy.get('.leaflet-overlay-pane svg g').children().should('have.length', 0)
Expand Down
Loading

0 comments on commit cd4d82f

Please sign in to comment.