chore: move Feature.js integration tests to PW

This commit is contained in:
Yohan Boniface 2024-03-28 18:57:11 +01:00 committed by Alexis Métaireau
parent 5d88e0e270
commit a28db94f72
10 changed files with 411 additions and 231 deletions

View file

@ -18,134 +18,6 @@ describe('U.FeatureMixin', function () {
resetMap() resetMap()
}) })
describe('#edit()', function () {
let link
it('should have datalayer features created', function () {
assert.equal(
document.querySelectorAll(
'#map > .leaflet-map-pane > .leaflet-overlay-pane path.leaflet-interactive'
).length,
2
)
assert.ok(qs('path[fill="none"]')) // Polyline
assert.ok(qs('path[fill="DarkBlue"]')) // Polygon
})
it('should toggle edit panel on shift-clic', function () {
enableEdit()
happen.click(qs('path[fill="DarkBlue"]'), { shiftKey: true })
assert.ok(qs('form#umap-feature-properties'))
assert.ok(qs('#map.umap-ui'))
happen.click(qs('path[fill="DarkBlue"]'), { shiftKey: true })
assert.notOk(qs('#map.umap-ui'))
})
it('should open datalayer edit panel on ctrl-shift-clic', function () {
enableEdit()
happen.click(qs('path[fill="DarkBlue"]'), { shiftKey: true, ctrlKey: true })
assert.ok(qs('div.umap-layer-properties-container'))
})
it('should take into account styles changes made in the datalayer', function () {
happen.click(
qs('#browse_data_toggle_' + L.stamp(datalayer) + ' .layer-edit')
)
var colorInput = qs('form#datalayer-advanced-properties input[name=color]')
changeInputValue(colorInput, 'DarkRed')
assert.ok(qs('path[fill="none"]')) // Polyline fill is unchanged
assert.notOk(qs('path[fill="DarkBlue"]'))
assert.ok(qs('path[fill="DarkRed"]'))
})
it('should open a popup toolbar on feature click', function () {
enableEdit()
happen.click(qs('path[fill="DarkRed"]'))
var toolbar = qs('ul.leaflet-inplace-toolbar')
assert.ok(toolbar)
link = qs('a.umap-toggle-edit', toolbar)
assert.ok(link)
})
it('should open a form on popup toolbar toggle edit click', function () {
happen.click(link)
var form = qs('form#umap-feature-properties')
var input = qs('form#umap-feature-properties input[name="name"]')
assert.ok(form)
assert.ok(input)
})
it('should not handle _umap_options has normal property', function () {
assert.notOk(qs('form#umap-feature-properties input[name="_umap_options"]'))
})
it('should give precedence to feature style over datalayer styles', function () {
var input = qs('#umap-ui-container form input[name="color"]')
assert.ok(input)
changeInputValue(input, 'DarkGreen')
assert.notOk(qs('path[fill="DarkRed"]'))
assert.notOk(qs('path[fill="DarkBlue"]'))
assert.ok(qs('path[fill="DarkGreen"]'))
assert.ok(qs('path[fill="none"]')) // Polyline fill is unchanged
})
it('should remove stroke if set to no', function () {
assert.notOk(qs('path[stroke="none"]'))
var defineButton = qs(
'#umap-feature-shape-properties .formbox:nth-child(4) .define'
)
happen.click(defineButton)
var input = qs('#umap-feature-shape-properties input[name="stroke"]')
assert.ok(input)
input.checked = false
happen.once(input, { type: 'change' })
assert.ok(qs('path[stroke="none"]'))
assert.ok(qs('path[fill="none"]')) // Polyline fill is unchanged
})
it('should not override already set style on features', function () {
happen.click(
qs('#browse_data_toggle_' + L.stamp(datalayer) + ' .layer-edit')
)
changeInputValue(qs('#umap-ui-container form input[name=color]'), 'Chocolate')
assert.notOk(qs('path[fill="DarkBlue"]'))
assert.notOk(qs('path[fill="DarkRed"]'))
assert.notOk(qs('path[fill="Chocolate"]'))
assert.ok(qs('path[fill="DarkGreen"]'))
assert.ok(qs('path[fill="none"]')) // Polyline fill is unchanged
})
it('should reset style on cancel click', function () {
clickCancel()
assert.ok(qs('path[fill="none"]')) // Polyline fill is unchanged
assert.ok(qs('path[fill="DarkBlue"]'))
assert.notOk(qs('path[fill="DarkRed"]'))
})
it('should set map.editedFeature on edit', function () {
enableEdit()
assert.notOk(map.editedFeature)
happen.click(qs('path[fill="DarkBlue"]'))
happen.click(qs('ul.leaflet-inplace-toolbar a.umap-toggle-edit'))
assert.ok(map.editedFeature)
disableEdit()
})
it('should reset map.editedFeature on panel open', function (done) {
enableEdit()
assert.notOk(map.editedFeature)
happen.click(qs('path[fill="DarkBlue"]'))
happen.click(qs('ul.leaflet-inplace-toolbar a.umap-toggle-edit'))
assert.ok(map.editedFeature)
map.displayCaption()
window.setTimeout(function () {
assert.notOk(map.editedFeature)
disableEdit()
done()
}, 1001) // CSS transition time.
})
})
describe('#utils()', function () { describe('#utils()', function () {
var poly, marker var poly, marker
function setFeatures(datalayer) { function setFeatures(datalayer) {
@ -191,83 +63,6 @@ describe('U.FeatureMixin', function () {
}) })
}) })
describe('#openPopup()', function () {
let poly
before(function () {
datalayer.eachLayer(function (layer) {
if (!poly && layer instanceof L.Polygon) {
poly = layer
}
})
})
it('should open a popup on click', function () {
assert.notOk(qs('.leaflet-popup-content'))
happen.click(qs('path[fill="DarkBlue"]'))
var title = qs('.leaflet-popup-content')
assert.ok(title)
assert.include(title.innerHTML, 'name poly')
happen.click(qs('#map')) // Close popup
})
it('should handle locale parameter inside description', function (done) {
poly.properties.description =
'This is a link to [[https://domain.org/?locale={locale}|Wikipedia]]'
happen.click(qs('path[fill="DarkBlue"]'))
window.setTimeout(function () {
let content = qs('.umap-popup-container')
assert.ok(content)
assert.include(
content.innerHTML,
'<a href="https://domain.org/?locale=en" target="_blank">Wikipedia</a>'
)
happen.click(qs('#map')) // Close popup
done()
}, 500) // No idea why needed…
})
})
describe('#highlight()', function () {
it('should highlight marker on click', function () {
assert.notOk(qs('.umap-icon-active'))
happen.click(qs('div.leaflet-marker-icon'))
assert.ok(qs('.umap-icon-active'))
happen.click(qs('#map')) // Close popup
assert.notOk(qs('.umap-icon-active'))
})
it('should still highlight marker after hide() and show()', function () {
datalayer.hide()
datalayer.show()
happen.click(qs('div.leaflet-marker-icon'))
assert.ok(qs('.umap-icon-active'))
})
it('should highlight path', function () {
happen.click(qs('path[stroke-opacity="0.6"]'))
var path = qs('path[stroke-opacity="1"]')
assert.ok(path)
})
it('should highlight polygon', function () {
var path = qs('path[fill="DarkBlue"]')
happen.click(path)
assert.isAbove(path.attributes['fill-opacity'].value, 0.5)
})
})
describe('#tooltip', function () {
it('should have a tooltip when active and allow variables', function () {
map.options.showLabel = true
map.options.labelKey = 'Foo {name}'
datalayer.redraw()
assert.equal(
qs('.leaflet-tooltip-pane .leaflet-tooltip').textContent,
'Foo name poly'
)
})
})
describe('#properties()', function () { describe('#properties()', function () {
it('should rename property', function () { it('should rename property', function () {
var poly = datalayer._lineToLayer({}, [ var poly = datalayer._lineToLayer({}, [
@ -333,25 +128,4 @@ describe('U.FeatureMixin', function () {
}) })
}) })
describe('#changeDataLayer()', function () {
it('should change style on datalayer select change', function () {
enableEdit()
happen.click(qs('.manage-datalayers'))
happen.click(qs('#umap-ui-container .add-datalayer'))
changeInputValue(qs('form.umap-form input[name="name"]'), 'New layer')
changeInputValue(
qs('form#datalayer-advanced-properties input[name=color]'),
'MediumAquaMarine'
)
happen.click(qs('path[fill="DarkBlue"]'))
happen.click(qs('ul.leaflet-inplace-toolbar a.umap-toggle-edit'))
var select = qs('select[name=datalayer]')
select.selectedIndex = 0
happen.once(select, { type: 'change' })
assert.ok(qs('path[fill="none"]')) // Polyline fill is unchanged
assert.notOk(qs('path[fill="DarkBlue"]'))
assert.ok(qs('path[fill="MediumAquaMarine"]'))
clickCancel()
})
})
}) })

View file

@ -1,3 +1,4 @@
import platform
import re import re
from playwright.sync_api import expect from playwright.sync_api import expect
@ -178,3 +179,10 @@ def test_can_restore_version(live_server, openmap, page, datalayer):
page.once("dialog", lambda dialog: dialog.accept()) page.once("dialog", lambda dialog: dialog.accept())
page.get_by_role("button", name="Restore this version").last.click() page.get_by_role("button", name="Restore this version").last.click()
expect(marker).to_have_class(re.compile(".*umap-ball-icon.*")) expect(marker).to_have_class(re.compile(".*umap-ball-icon.*"))
def test_can_edit_layer_on_ctrl_shift_click(live_server, openmap, page, datalayer):
modifier = "Meta" if platform.system() == "Darwin" else "Control"
page.goto(f"{live_server.url}{openmap.get_absolute_url()}?edit")
page.locator(".leaflet-marker-icon").click(modifiers=[modifier, "Shift"])
expect(page.get_by_role("heading", name="Layer properties")).to_be_visible()

View file

@ -0,0 +1,107 @@
import platform
from copy import deepcopy
import pytest
from playwright.sync_api import expect
from ..base import DataLayerFactory
pytestmark = pytest.mark.django_db
DATALAYER_DATA = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "test marker",
"description": "Some description",
},
"id": "QwNjg",
"geometry": {
"type": "Point",
"coordinates": [14.6889, 48.5529],
},
},
],
}
@pytest.fixture
def bootstrap(map, live_server):
DataLayerFactory(map=map, data=DATALAYER_DATA)
def test_can_edit_on_shift_click(live_server, openmap, page, datalayer):
modifier = "Meta" if platform.system() == "Darwin" else "Control"
page.goto(f"{live_server.url}{openmap.get_absolute_url()}?edit")
page.locator(".leaflet-marker-icon").click(modifiers=[modifier, "Shift"])
expect(page.get_by_role("heading", name="Layer properties")).to_be_visible()
def test_marker_style_should_have_precedence(live_server, openmap, page, bootstrap):
page.goto(f"{live_server.url}{openmap.get_absolute_url()}?edit")
# Change colour at layer level
page.get_by_role("link", name="Manage layers").click()
page.locator("#umap-ui-container").get_by_title("Edit", exact=True).click()
page.get_by_role("heading", name="Shape properties").click()
page.locator(".umap-field-color .define").click()
expect(page.locator(".leaflet-marker-icon .icon_container")).to_have_css(
"background-color", "rgb(0, 0, 139)"
)
page.get_by_title("DarkRed").first.click()
expect(page.locator(".leaflet-marker-icon .icon_container")).to_have_css(
"background-color", "rgb(139, 0, 0)"
)
# Now change at marker level, it should take precedence
page.locator(".leaflet-marker-icon").click(modifiers=["Shift"])
page.get_by_role("heading", name="Shape properties").click()
page.locator("#umap-feature-shape-properties").get_by_text("define").first.click()
page.get_by_title("GoldenRod", exact=True).click()
expect(page.locator(".leaflet-marker-icon .icon_container")).to_have_css(
"background-color", "rgb(218, 165, 32)"
)
# Now change again at layer level again, it should not change the marker color
page.get_by_role("link", name="Manage layers").click()
page.locator("#umap-ui-container").get_by_title("Edit", exact=True).click()
page.get_by_role("heading", name="Shape properties").click()
page.locator(".umap-field-color input").click()
page.get_by_title("DarkViolet").first.click()
expect(page.locator(".leaflet-marker-icon .icon_container")).to_have_css(
"background-color", "rgb(218, 165, 32)"
)
def test_should_open_an_edit_toolbar_on_click(live_server, openmap, page, bootstrap):
page.goto(f"{live_server.url}{openmap.get_absolute_url()}?edit")
page.locator(".leaflet-marker-icon").click()
expect(page.get_by_role("link", name="Toggle edit mode")).to_be_visible()
expect(page.get_by_role("link", name="Delete this feature")).to_be_visible()
def test_should_follow_datalayer_style_when_changing_datalayer(
live_server, openmap, page
):
data = deepcopy(DATALAYER_DATA)
data["_umap_options"] = {"color": "DarkCyan"}
DataLayerFactory(map=openmap, data=data)
DataLayerFactory(
map=openmap,
name="other datalayer",
data={
"type": "FeatureCollection",
"features": [],
"_umap_options": {"color": "DarkViolet"},
},
)
page.goto(f"{live_server.url}{openmap.get_absolute_url()}?edit")
marker = page.locator(".leaflet-marker-icon .icon_container")
expect(marker).to_have_css("background-color", "rgb(0, 139, 139)")
# Change datalayer
marker.click()
page.get_by_role("link", name="Toggle edit mode (⇧+Click)").click()
page.locator(".umap-field-datalayer select").select_option(label="other datalayer")
expect(marker).to_have_css("background-color", "rgb(148, 0, 211)")

View file

@ -0,0 +1,122 @@
import platform
import pytest
from playwright.sync_api import expect
from ..base import DataLayerFactory
pytestmark = pytest.mark.django_db
DATALAYER_DATA = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "name poly",
},
"id": "gyNzM",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[11.25, 53.585984],
[10.151367, 52.975108],
[12.689209, 52.167194],
[14.084473, 53.199452],
[12.634277, 53.618579],
[11.25, 53.585984],
[11.25, 53.585984],
],
],
},
},
],
}
@pytest.fixture
def bootstrap(map, live_server):
map.settings["properties"]["zoom"] = 6
map.settings["geometry"] = {
"type": "Point",
"coordinates": [8.429, 53.239],
}
map.save()
DataLayerFactory(map=map, data=DATALAYER_DATA)
def test_can_edit_on_shift_click(live_server, openmap, page, datalayer):
modifier = "Meta" if platform.system() == "Darwin" else "Control"
page.goto(f"{live_server.url}{openmap.get_absolute_url()}?edit")
page.locator(".leaflet-marker-icon").click(modifiers=[modifier, "Shift"])
expect(page.get_by_role("heading", name="Layer properties")).to_be_visible()
def test_marker_style_should_have_precedence(live_server, openmap, page, bootstrap):
page.goto(f"{live_server.url}{openmap.get_absolute_url()}?edit")
# Change colour at layer level
page.get_by_role("link", name="Manage layers").click()
page.locator("#umap-ui-container").get_by_title("Edit", exact=True).click()
page.get_by_role("heading", name="Shape properties").click()
page.locator(".umap-field-color .define").click()
expect(page.locator(".leaflet-overlay-pane path[fill='DarkBlue']")).to_have_count(1)
page.get_by_title("DarkRed").first.click()
expect(page.locator(".leaflet-overlay-pane path[fill='DarkRed']")).to_have_count(1)
# Now change at polygon level, it should take precedence
page.locator("path").click(modifiers=["Shift"])
page.get_by_role("heading", name="Shape properties").click()
page.locator("#umap-feature-shape-properties").get_by_text("define").first.click()
page.get_by_title("GoldenRod", exact=True).first.click()
expect(page.locator(".leaflet-overlay-pane path[fill='GoldenRod']")).to_have_count(
1
)
# Now change again at layer level again, it should not change the marker color
page.get_by_role("link", name="Manage layers").click()
page.locator("#umap-ui-container").get_by_title("Edit", exact=True).click()
page.get_by_role("heading", name="Shape properties").click()
page.locator(".umap-field-color input").click()
page.get_by_title("DarkViolet").first.click()
expect(page.locator(".leaflet-overlay-pane path[fill='GoldenRod']")).to_have_count(
1
)
def test_should_open_an_edit_toolbar_on_click(live_server, openmap, page, bootstrap):
page.goto(f"{live_server.url}{openmap.get_absolute_url()}?edit")
page.locator("path").click()
expect(page.get_by_role("link", name="Toggle edit mode")).to_be_visible()
expect(page.get_by_role("link", name="Delete this feature")).to_be_visible()
def test_can_remove_stroke(live_server, openmap, page, bootstrap):
page.goto(f"{live_server.url}{openmap.get_absolute_url()}?edit")
expect(page.locator(".leaflet-overlay-pane path[stroke='DarkBlue']")).to_have_count(
1
)
page.locator("path").click()
page.get_by_role("link", name="Toggle edit mode").click()
page.get_by_role("heading", name="Shape properties").click()
page.locator(".umap-field-stroke .define").first.click()
page.locator(".umap-field-stroke label").first.click()
expect(page.locator(".leaflet-overlay-pane path[stroke='DarkBlue']")).to_have_count(
0
)
expect(page.locator(".leaflet-overlay-pane path[stroke='none']")).to_have_count(1)
def test_should_reset_style_on_cancel(live_server, openmap, page, bootstrap):
page.goto(f"{live_server.url}{openmap.get_absolute_url()}?edit")
page.locator("path").click(modifiers=["Shift"])
page.get_by_role("heading", name="Shape properties").click()
page.locator("#umap-feature-shape-properties").get_by_text("define").first.click()
page.get_by_title("GoldenRod", exact=True).first.click()
expect(page.locator(".leaflet-overlay-pane path[fill='GoldenRod']")).to_have_count(
1
)
page.once("dialog", lambda dialog: dialog.accept())
page.get_by_role("button", name="Cancel edits").click()
expect(page.locator(".leaflet-overlay-pane path[fill='DarkBlue']")).to_have_count(1)

View file

@ -1,11 +1,6 @@
from pathlib import Path
import pytest import pytest
from django.core.files.base import ContentFile
from playwright.sync_api import expect from playwright.sync_api import expect
from umap.models import Map, Pictogram
from ..base import DataLayerFactory from ..base import DataLayerFactory
pytestmark = pytest.mark.django_db pytestmark = pytest.mark.django_db

View file

@ -0,0 +1,64 @@
from copy import deepcopy
import pytest
from playwright.sync_api import expect
from ..base import DataLayerFactory
pytestmark = pytest.mark.django_db
DATALAYER_DATA = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "test marker",
"description": "Some description",
},
"geometry": {
"type": "Point",
"coordinates": [14.6889, 48.5529],
},
},
],
}
@pytest.fixture
def bootstrap(map, live_server):
DataLayerFactory(map=map, data=DATALAYER_DATA)
def test_should_open_popup_on_click(live_server, map, page, bootstrap):
page.goto(f"{live_server.url}{map.get_absolute_url()}")
expect(page.locator(".umap-icon-active")).to_be_hidden()
page.locator(".leaflet-marker-icon").click()
expect(page.locator(".umap-icon-active")).to_be_visible()
expect(page.locator(".leaflet-popup-content-wrapper")).to_be_visible()
expect(page.get_by_role("heading", name="test marker")).to_be_visible()
expect(page.get_by_text("Some description")).to_be_visible()
# Close popup
page.locator("#map").click()
expect(page.locator(".umap-icon-active")).to_be_hidden()
def test_should_handle_locale_var_in_description(live_server, map, page):
data = deepcopy(DATALAYER_DATA)
data["features"][0]["properties"]["description"] = (
"this is a link to [[https://domain.org/?locale={locale}|Wikipedia]]"
)
DataLayerFactory(map=map, data=data)
page.goto(f"{live_server.url}{map.get_absolute_url()}")
page.locator(".leaflet-marker-icon").click()
link = page.get_by_role("link", name="Wikipedia")
expect(link).to_be_visible()
expect(link).to_have_attribute("href", "https://domain.org/?locale=en")
def test_should_display_tooltip_with_variable(live_server, map, page, bootstrap):
map.settings["properties"]["showLabel"] = True
map.settings["properties"]["labelKey"] = "Foo {name}"
map.save()
page.goto(f"{live_server.url}{map.get_absolute_url()}")
expect(page.get_by_text("Foo test marker")).to_be_visible()

View file

@ -0,0 +1,59 @@
import re
import pytest
from playwright.sync_api import expect
from ..base import DataLayerFactory
pytestmark = pytest.mark.django_db
DATALAYER_DATA = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {"name": "name poly", "description": "poly description"},
"id": "gyNzM",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[11.25, 53.585984],
[10.151367, 52.975108],
[12.689209, 52.167194],
[14.084473, 53.199452],
[12.634277, 53.618579],
[11.25, 53.585984],
[11.25, 53.585984],
],
],
},
},
],
}
@pytest.fixture
def bootstrap(map, live_server):
map.settings["properties"]["zoom"] = 6
map.settings["geometry"] = {
"type": "Point",
"coordinates": [8.429, 53.239],
}
map.save()
DataLayerFactory(map=map, data=DATALAYER_DATA)
def test_should_open_popup_on_click(live_server, map, page, bootstrap):
page.goto(f"{live_server.url}{map.get_absolute_url()}")
polygon = page.locator("path").first
expect(polygon).to_have_attribute("fill-opacity", "0.3")
polygon.click()
expect(page.locator(".leaflet-popup-content-wrapper")).to_be_visible()
expect(page.get_by_role("heading", name="name poly")).to_be_visible()
expect(page.get_by_text("poly description")).to_be_visible()
# It's not a round value
expect(polygon).to_have_attribute("fill-opacity", re.compile(r"0.5\d+"))
# Close popup
page.locator("#map").click()
expect(polygon).to_have_attribute("fill-opacity", "0.3")

View file

@ -0,0 +1,51 @@
import pytest
from playwright.sync_api import expect
from ..base import DataLayerFactory
pytestmark = pytest.mark.django_db
DATALAYER_DATA = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {"name": "name line", "description": "line description"},
"geometry": {
"type": "LineString",
"coordinates": [
# Flat line so PW will click on it
# (it compute the center of the element)
[11.25, 53.585984],
[10.151367, 52.975108],
],
},
},
],
}
@pytest.fixture
def bootstrap(map, live_server):
map.settings["properties"]["zoom"] = 6
map.settings["geometry"] = {
"type": "Point",
"coordinates": [8.429, 53.239],
}
map.save()
DataLayerFactory(map=map, data=DATALAYER_DATA)
def test_should_open_popup_on_click(live_server, map, page, bootstrap):
page.goto(f"{live_server.url}{map.get_absolute_url()}")
line = page.locator("path").first
expect(line).to_have_attribute("stroke-opacity", "0.5")
line.click()
expect(page.locator(".leaflet-popup-content-wrapper")).to_be_visible()
expect(page.get_by_role("heading", name="name line")).to_be_visible()
expect(page.get_by_text("line description")).to_be_visible()
# It's not a round value
expect(line).to_have_attribute("stroke-opacity", "1")
# Close popup
page.locator("#map").click()
expect(line).to_have_attribute("stroke-opacity", "0.5")