Skip to content

fix for issue-319 #993

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
prushforth merged 6 commits into from
Oct 11, 2024
Merged

fix for issue-319 #993

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3da82e9
Yushan commit fix line endings.
prushforth Oct 3, 2024
fea5707
Added test cases for unnamed layers (flaky atm)
yushan-mu Oct 7, 2024
b31f77b
Added timeout
yushan-mu Oct 7, 2024
4be0be4
Added 500ms timeout
yushan-mu Oct 7, 2024
e72b14b
Cleaned up some parts
Oct 8, 2024
be36044
Edited formatting
Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/mapml/layers/MapMLLayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,6 +345,8 @@ export var MapMLLayer = L.LayerGroup.extend({
layer._titleIsReadOnly = true;
} else if (layer._layerEl && layer._layerEl.hasAttribute('label')) {
layer._title = layer._layerEl.getAttribute('label').trim();
} else {
layer._title = M.options.locale.dfLayer;
}
}
function parseLicenseAndLegend() {
Expand Down
79 changes: 79 additions & 0 deletions test/e2e/layers/layerLabel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Layer Control Tests</title>
<script type="module" src="mapml.js"></script>
<style>
html,
body {
height: 100%;
}

* {
margin: 0;
padding: 0;
}

/* Specifying the `:defined` selector is recommended to style the map
element, such that styles don't apply when fallback content is in use
(e.g. when scripting is disabled or when custom/built-in elements isn't
supported in the browser). */
mapml-viewer:defined {
/* Responsive map. */
max-width: 100%;

/* Full viewport. */
width: 100%;
height: 100%;

/* Remove default (native-like) border. */
/* border: none; */
}

/* Pre-style to avoid FOUC of inline layer- and fallback content. */
mapml-viewer:not(:defined)>* {
display: none;
}

/* Ensure inline layer content is hidden if custom/built-in elements isn't
supported, or if javascript is disabled. This needs to be defined separately
from the above, because the `:not(:defined)` selector invalidates the entire
declaration in browsers that do not support it. */
layer- {
display: none;
}
</style>
<noscript>
<style>
/* Ensure fallback content (children of the map element) is displayed if
custom/built-in elements is supported but javascript is disabled. */
mapml-viewer:not(:defined)> :not(layer-) {
display: initial;
}
</style>
</noscript>
</head>

<body>
<mapml-viewer projection="CBMTILE" zoom="3" lat="37.176710163979834" lon="-62.070013924549045" controls>

<!-- Layer without a label -->
<layer- checked>
<map-meta name="projection" content="CBMTILE"></map-meta>
<map-feature zoom="10">
<map-properties>Layer with no label</map-properties>
<map-geometry cs="gcrs">
<map-point>
<map-coordinates>-75.866089 45.463020</map-coordinates>
</map-point>
</map-geometry>
</map-feature>
</layer->

</mapml-viewer>
</body>

</html>
34 changes: 34 additions & 0 deletions test/e2e/layers/layerLabel.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { test, expect, chromium } from '@playwright/test';

test.describe('Layer Label Tests', () => {
let page;
let context;
test.beforeAll(async function () {
context = await chromium.launchPersistentContext('');
page =
context.pages().find((page) => page.url() === 'about:blank') ||
(await context.newPage());
await page.goto('layerLabel.html');
});

test.afterAll(async function () {
await context.close();
});

test('Name of unnamed layer is Layer', async () => {
const label = await page.locator('body > mapml-viewer > layer-');
Copy link
Member

@prushforth prushforth Oct 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In terms of meaningful variables, label is actually the layer. I think you could do page.locator(...).evaluate() to return the actual label string. Of course you would have to do that after the waitForTimeout, because locators work fast but evaluates actually access the attribute in the page. Since you had already done the await, you could do the expect without the await inside.


await page.waitForTimeout(500);
expect(await label.evaluate((elem) => elem.label)).toEqual('Layer');
});

test('Unnamed layer shows up as Layer in layer control', async () => {
const text = await page.locator(
'body > mapml-viewer >> css=div > label.mapml-layer-item-toggle'
);
expect(await text.evaluate((text) => text.textContent)).toEqual('Layer');
});
});

// to do: check that the thing's name is 'Layer'
// check that the thing on the layer control panel shows 'Layer'