Manually add class that leaflet may not be adding due to ??? on CI

Maps4HTML · Oct 28, 2024 · 0d59631 · 0d59631
1 parent a424ff6
commit 0d59631
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 14 deletions.
diff --git a/src/mapml/elementSupport/layers/createLayerControlForLayer.js b/src/mapml/elementSupport/layers/createLayerControlForLayer.js
@@ -114,6 +114,7 @@ export var createLayerControlHTML = async function () {
     (e) => {
       let layerControl = this._layer._layerEl._layerControl._container;
       if (!layerControl._isExpanded && e.pointerType === 'touch') {
+        layerControl.classList.add('leaflet-control-layers-expanded');
         layerControl._isExpanded = true;
         return;
       }

diff --git a/test/e2e/core/touchDevice.test.js b/test/e2e/core/touchDevice.test.js
@@ -22,33 +22,55 @@ test.describe('Playwright touch device tests', () => {
     const layerControl = await page.locator('.leaflet-control-layers');
 
     // Initial state logging
-    console.log("Initial class list:", await layerControl.evaluate(el => el.className));
-    console.log("Initial _isExpanded:", await layerControl.evaluate(el => el._isExpanded));
+    console.log(
+      'Initial class list:',
+      await layerControl.evaluate((el) => el.className)
+    );
+    console.log(
+      'Initial _isExpanded:',
+      await layerControl.evaluate((el) => el._isExpanded)
+    );
 
     // Initial tap
     await layerControl.tap();
     await page.waitForTimeout(1000);
 
     // Log after tap
-    console.log("Class list after tap:", await layerControl.evaluate(el => el.className));
-    console.log("Is expanded after tap:", await layerControl.evaluate(el => el._isExpanded));
+    console.log(
+      'Class list after tap:',
+      await layerControl.evaluate((el) => el.className)
+    );
+    console.log(
+      'Is expanded after tap:',
+      await layerControl.evaluate((el) => el._isExpanded)
+    );
 
     // Long press simulation using touchstart/touchend
-    await layerControl.evaluate((el) => el.dispatchEvent(new TouchEvent('touchstart')));
+    await layerControl.evaluate((el) =>
+      el.dispatchEvent(new TouchEvent('touchstart'))
+    );
     await page.waitForTimeout(1000); // Extended delay for long press
-    await layerControl.evaluate((el) => el.dispatchEvent(new TouchEvent('touchend')));
+    await layerControl.evaluate((el) =>
+      el.dispatchEvent(new TouchEvent('touchend'))
+    );
 
     // Log after long press
-    console.log("Class list after long press:", await layerControl.evaluate(el => el.className));
-    console.log("Is expanded after long press:", await layerControl.evaluate(el => el._isExpanded));
+    console.log(
+      'Class list after long press:',
+      await layerControl.evaluate((el) => el.className)
+    );
+    console.log(
+      'Is expanded after long press:',
+      await layerControl.evaluate((el) => el._isExpanded)
+    );
 
+    const layerControlExpanded = page.locator(
+      '.leaflet-control-layers-expanded'
+    );
+    await layerControlExpanded.waitFor({ timeout: 10000 });
 
-    const layerControlExpanded = page.locator('.leaflet-control-layers-expanded');
-    await layerControlExpanded.waitFor({ timeout: 10000 }); 
-
-
-    const finalClassList = await layerControl.evaluate(el => el.className);
-    console.log("Final class list:", finalClassList);
+    const finalClassList = await layerControl.evaluate((el) => el.className);
+    console.log('Final class list:', finalClassList);
     expect(finalClassList).toMatch(/leaflet-control-layers-expanded/);
   });
 });