diff --git a/cypress/integration/circlemarker.spec.js b/cypress/integration/circlemarker.spec.js index 7224ea32..cd681901 100644 --- a/cypress/integration/circlemarker.spec.js +++ b/cypress/integration/circlemarker.spec.js @@ -44,55 +44,53 @@ describe('Draw Circle Marker', () => { createMarkers(); }); - it('handles 6k circle markers in under 1 sec', () => { + cy.toolbarButton('circle-marker').click(); - cy.toolbarButton('circle-marker') - .click() - - cy.get(mapSelector) - .click(150, 250) + cy.get(mapSelector).click(150, 250); cy.testLayerAdditionPerformance(); }); - - it('correctly disables drag', () => { - createMarkers(); cy.window().then(({ map, L }) => { - map.eachLayer((layer) => { + map.eachLayer(layer => { if (layer instanceof L.CircleMarker) { - assert.isFalse(L.DomUtil.hasClass(layer._path, 'leaflet-pm-draggable'), 'not draggable') + assert.isFalse( + L.DomUtil.hasClass(layer._path, 'leaflet-pm-draggable'), + 'not draggable' + ); } - }) + }); }); - cy.toolbarButton('edit') - .click() + cy.toolbarButton('edit').click(); cy.window().then(({ map, L }) => { - map.eachLayer((layer) => { + map.eachLayer(layer => { if (layer instanceof L.CircleMarker) { - assert.isTrue(L.DomUtil.hasClass(layer._path, 'leaflet-pm-draggable'), 'draggable') + assert.isTrue( + L.DomUtil.hasClass(layer._path, 'leaflet-pm-draggable'), + 'draggable' + ); } - }) + }); }); - cy.toolbarButton('edit') - .click() + cy.toolbarButton('edit').click(); cy.window().then(({ map, L }) => { - map.eachLayer((layer) => { + map.eachLayer(layer => { if (layer instanceof L.CircleMarker) { - assert.isFalse(L.DomUtil.hasClass(layer._path, 'leaflet-pm-draggable'), 'not draggable') + assert.isFalse( + L.DomUtil.hasClass(layer._path, 'leaflet-pm-draggable'), + 'not draggable' + ); } - }) + }); }); - - }); it('deletes all circle markers', () => { @@ -116,10 +114,9 @@ describe('Draw Circle Marker', () => { cy.hasCircleLayers(0); }); - it('draw a CircleMarker like a Circle', () => { - cy.window().then(({ map}) => { - map.pm.setGlobalOptions({editable: true, continueDrawing: false}); + cy.window().then(({ map }) => { + map.pm.setGlobalOptions({ editable: true, continueDrawing: false }); }); cy.toolbarButton('circle-marker') @@ -133,7 +130,6 @@ describe('Draw Circle Marker', () => { cy.hasCircleLayers(1); - cy.toolbarButton('edit') .click() .closest('.button-container') @@ -142,8 +138,8 @@ describe('Draw Circle Marker', () => { cy.hasVertexMarkers(2); }); it('snapping to CircleMarker with pmIgnore:true', () => { - cy.window().then(({ map, L}) => { - L.circleMarker(map.getCenter(),{pmIgnore: true}).addTo(map); + cy.window().then(({ map, L }) => { + L.circleMarker(map.getCenter(), { pmIgnore: true }).addTo(map); }); cy.toolbarButton('rectangle') @@ -165,15 +161,13 @@ describe('Draw Circle Marker', () => { it('disable continueDrawing', () => { cy.window().then(({ map }) => { - map.pm.setGlobalOptions({continueDrawing: false}); + map.pm.setGlobalOptions({ continueDrawing: false }); }); cy.toolbarButton('circle-marker').click(); - cy.get(mapSelector) - .click(191,216); + cy.get(mapSelector).click(191, 216); - cy.get(mapSelector) - .click(350, 350); + cy.get(mapSelector).click(350, 350); cy.toolbarButton('circle-marker') .closest('.button-container') @@ -185,12 +179,11 @@ describe('Draw Circle Marker', () => { it('disable markerEditable', () => { cy.window().then(({ map }) => { - map.pm.setGlobalOptions({markerEditable: false}); + map.pm.setGlobalOptions({ markerEditable: false }); }); cy.toolbarButton('circle-marker').click(); - cy.get(mapSelector) - .click(191,216); + cy.get(mapSelector).click(191, 216); cy.window().then(({ map }) => { const marker = map.pm.getGeomanDrawLayers()[0]; @@ -201,12 +194,14 @@ describe('Draw Circle Marker', () => { it('enable markerEditable but disable MarkerRemoval', () => { cy.window().then(({ map }) => { - map.pm.setGlobalOptions({markerEditable: true, preventMarkerRemoval: true}); + map.pm.setGlobalOptions({ + markerEditable: true, + preventMarkerRemoval: true, + }); }); cy.toolbarButton('circle-marker').click(); - cy.get(mapSelector) - .click(191,216); + cy.get(mapSelector).click(191, 216); cy.window().then(({ map }) => { const marker = map.pm.getGeomanDrawLayers()[0]; @@ -214,15 +209,12 @@ describe('Draw Circle Marker', () => { expect(enabled).to.equal(true); }); - cy.get(mapSelector) - .rightclick(191,214); + cy.get(mapSelector).rightclick(191, 214); cy.hasLayers(5); }); it('set max radius of circleMarker', () => { - let handFinish = false; - cy.toolbarButton('circle-marker') .click() .closest('.button-container') @@ -233,11 +225,11 @@ describe('Draw Circle Marker', () => { map.pm.setGlobalOptions({ minRadiusCircleMarker: 50, maxRadiusCircleMarker: 150, - editable: true + editable: true, }); cy.get(mapSelector) - .click(250,200) - .click(400,190) + .click(250, 200) + .click(400, 190) .then(() => { const layers = map.pm.getGeomanDrawLayers(); layers.forEach(layer => { @@ -247,45 +239,6 @@ describe('Draw Circle Marker', () => { }); }); }); - - cy.toolbarButton('edit') - .click() - .closest('.button-container') - .should('have.class', 'active'); - - cy.window().then(({ Hand, map, L }) => { - const handMarker = new Hand({ - timing: 'frame', - onStop: ()=>{ - map.eachLayer(layer => { - if (layer instanceof L.CircleMarker) { - expect(true).to.equal(layer.getRadius() < 150); - } - }); - const handMarker2 = new Hand({ - timing: 'frame', - onStop: () => { - handFinish = true; - map.eachLayer(layer => { - if (layer instanceof L.CircleMarker) { - expect(true).to.equal(layer.getRadius() >= 145 && layer.getRadius() < 155); - } - }); - } - }); - const toucherMarker2 = handMarker2.growFinger('mouse'); - toucherMarker2.wait(100).moveTo(317,198, 100).down().wait(500).moveTo(500,198, 600).up().wait(100) - } - }); - const toucherMarker = handMarker.growFinger('mouse'); - toucherMarker.wait(100).moveTo(400,198, 100).down().wait(500).moveTo(317,198, 400).up().wait(100); - - // wait until hand is finished - cy.waitUntil(() => cy.window().then(() => handFinish)).then( ()=> { - expect(handFinish).to.equal(true); - }); - }); - }); it('set min radius of circleMarker', () => { let handFinish = false; @@ -300,11 +253,11 @@ describe('Draw Circle Marker', () => { map.pm.setGlobalOptions({ minRadiusCircleMarker: 150, maxRadiusCircleMarker: 300, - editable: true + editable: true, }); cy.get(mapSelector) - .click(250,200) - .click(300,200) + .click(250, 200) + .click(300, 200) .then(() => { const layers = map.pm.getGeomanDrawLayers(); layers.forEach(layer => { @@ -319,34 +272,50 @@ describe('Draw Circle Marker', () => { .closest('.button-container') .should('have.class', 'active'); - cy.window().then(({ Hand, map, L }) => { + cy.window().then(({ Hand, map, L }) => { const handMarker = new Hand({ timing: 'frame', - onStop: ()=>{ + onStop: () => { map.eachLayer(layer => { if (layer instanceof L.CircleMarker) { - expect(true).to.equal(layer.getRadius() > 150) + expect(true).to.equal(layer.getRadius() > 150); } }); const handMarker2 = new Hand({ timing: 'frame', - onStop: () =>{ + onStop: () => { handFinish = true; map.eachLayer(layer => { if (layer instanceof L.CircleMarker) { - expect(true).to.equal(layer.getRadius() >= 145 && layer.getRadius() < 155); + expect(true).to.equal( + layer.getRadius() >= 145 && layer.getRadius() < 155 + ); } }); - } + }, }); const toucherMarker2 = handMarker2.growFinger('mouse'); - toucherMarker2.wait(200).moveTo(490,198, 100).down().wait(500).moveTo(317,198, 600).up().wait(100) - } + toucherMarker2 + .wait(200) + .moveTo(490, 198, 100) + .down() + .wait(500) + .moveTo(317, 198, 600) + .up() + .wait(100); + }, }); const toucherMarker = handMarker.growFinger('mouse'); - toucherMarker.wait(100).moveTo(400,198, 100).down().wait(500).moveTo(500,198, 400).up().wait(100) + toucherMarker + .wait(100) + .moveTo(400, 198, 100) + .down() + .wait(500) + .moveTo(500, 198, 400) + .up() + .wait(100); // wait until hand is finished - cy.waitUntil(() => cy.window().then(() => handFinish)).then( ()=> { + cy.waitUntil(() => cy.window().then(() => handFinish)).then(() => { expect(handFinish).to.equal(true); }); });