From 1018ed1062698f62dd9a8dc1360fe4aad3ef101b Mon Sep 17 00:00:00 2001 From: rldhont Date: Tue, 20 Feb 2024 11:44:51 +0100 Subject: [PATCH 1/2] [Bugfix] CSS: display docks with pointer: coarse The display of docks was not configured with pointer: coarse. Funded by VSB --- lizmap/www/assets/css/media.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/lizmap/www/assets/css/media.css b/lizmap/www/assets/css/media.css index 7940716347..e153693a9e 100644 --- a/lizmap/www/assets/css/media.css +++ b/lizmap/www/assets/css/media.css @@ -287,8 +287,7 @@ only screen and ( max-device-height : 640px) { #docks-wrapper{ left: -1px; - width: 80%; - padding-top: 45px; + width: 100%; box-sizing: border-box; } @@ -412,8 +411,8 @@ only screen and ( max-device-height : 640px) { background-image: url(images/glyphicons-halflings-white.png); } - #right-dock{ - margin: 0; + #dock{ + margin-top: 45px; } .digitizing .btn { From 759700dbf66a4b25dadadce0658ffd9bb91bda03 Mon Sep 17 00:00:00 2001 From: rldhont Date: Tue, 20 Feb 2024 12:55:07 +0100 Subject: [PATCH 2/2] Test e2e --- tests/end2end/playwright/viewport.spec.js | 64 ++++++++++++++++++++--- 1 file changed, 58 insertions(+), 6 deletions(-) diff --git a/tests/end2end/playwright/viewport.spec.js b/tests/end2end/playwright/viewport.spec.js index 367f585355..c32e77982f 100644 --- a/tests/end2end/playwright/viewport.spec.js +++ b/tests/end2end/playwright/viewport.spec.js @@ -36,7 +36,7 @@ test.describe('Viewport devicePixelRatio 1', () => { // Check that the WMS Max Size has been well overwrite expect(await page.evaluate(() => lizMap.mainLizmap.initialConfig.options.wmsMaxHeight)).toBe(950); expect(await page.evaluate(() => window.devicePixelRatio)).toBe(1); - expect(await page.evaluate(() => lizMap.mainLizmap.map.getSize())).toStrictEqual([870,575]); + expect(await page.evaluate(() => lizMap.mainLizmap.map.getSize())).toStrictEqual([870, 575]); await page.unroute('**/service/getProjectConfig*') // Catch GetMaps request; @@ -46,7 +46,7 @@ test.describe('Viewport devicePixelRatio 1', () => { if (request.url().includes('GetMap')) { GetMaps.push(request.url()); } - }, {times: 4}); + }, { times: 4 }); // Activate world layer await page.getByLabel('world').check(); @@ -56,7 +56,7 @@ test.describe('Viewport devicePixelRatio 1', () => { // Check GetMap requests expect(GetMaps).toHaveLength(4); - for(const GetMap of GetMaps) { + for (const GetMap of GetMaps) { expect(GetMap).toContain('&WIDTH=790&') expect(GetMap).toContain('&HEIGHT=575&') expect(GetMap).toContain('&DPI=96&') @@ -105,7 +105,7 @@ test.describe('Viewport devicePixelRatio 2', () => { // Check that the WMS Max Size has been well overwrite expect(await page.evaluate(() => lizMap.mainLizmap.initialConfig.options.wmsMaxHeight)).toBe(1900); expect(await page.evaluate(() => window.devicePixelRatio)).toBe(2); - expect(await page.evaluate(() => lizMap.mainLizmap.map.getSize())).toStrictEqual([870,620]); + expect(await page.evaluate(() => lizMap.mainLizmap.map.getSize())).toStrictEqual([870, 620]); await page.unroute('**/service/getProjectConfig*') // Catch GetMaps request; @@ -115,7 +115,7 @@ test.describe('Viewport devicePixelRatio 2', () => { if (request.url().includes('GetMap')) { GetMaps.push(request.url()); } - }, {times: 4}); + }, { times: 4 }); // Activate world layer await page.getByLabel('world').check(); @@ -125,7 +125,7 @@ test.describe('Viewport devicePixelRatio 2', () => { // Check GetMap requests expect(GetMaps).toHaveLength(4); - for(const GetMap of GetMaps) { + for (const GetMap of GetMaps) { expect(GetMap).toContain('&WIDTH=870&') expect(GetMap).toContain('&HEIGHT=620&') expect(GetMap).toContain('&DPI=180&') @@ -133,3 +133,55 @@ test.describe('Viewport devicePixelRatio 2', () => { await page.unroute('**/service*') }) }) + +test.describe('Viewport mobile', () => { + test.use({ + hasTouch: true, + isMobile: true, + }); + test('Display docks', async ({ page }) => { + // atlas project + const url = '/index.php/view/map/?repository=testsrepository&project=atlas' + // Go to the map + await page.goto(url, { waitUntil: 'networkidle' }); + + // Check menu and menu toggle button + await expect(await page.locator('#mapmenu')).not.toBeInViewport(); + await expect(await page.locator('#menuToggle')).toBeVisible(); + await expect(await page.locator('#menuToggle')).not.toHaveClass('opened'); + await page.locator('#menuToggle').click(); + + // Open menu + await expect(await page.locator('#menuToggle')).toHaveClass('opened'); + await expect(await page.locator('#mapmenu')).toBeInViewport(); + await expect(await page.getByRole('link', { name: 'atlas' })).toBeVisible(); + + // Open atlas + await page.getByRole('link', { name: 'atlas', exact: true }).click(); + await expect(await page.locator('#menuToggle')).not.toHaveClass('opened'); + await expect(await page.locator('#mapmenu')).not.toBeInViewport(); + await expect(await page.locator('#right-dock')).toBeVisible(); + await expect(await page.locator('#right-dock')).toBeInViewport(); + + // Choose a feature and check getFeatureInfo + let getFeatureInfoRequestPromise = page.waitForRequest(request => request.method() === 'POST' && request?.postData().includes('GetFeatureInfo')); + await page.locator('#liz-atlas-select').selectOption('2'); + let getFeatureInfoRequest = await getFeatureInfoRequestPromise; + let getFeatureInfoResponse = await getFeatureInfoRequest.response(); + await expect(await getFeatureInfoResponse.headerValue('content-type')).toContain('text/html'); + await expect(await page.locator('#liz-atlas-item-detail .lizmapPopupContent')).toBeInViewport(); + await expect(await page.locator('#liz-atlas-item-detail .lizmapPopupContent')).toContainText('MOSSON'); + // Close atlas + await page.locator('#right-dock-close').click(); + await expect(await page.locator('#right-dock')).not.toBeInViewport(); + await expect(await page.locator('#right-dock')).not.toBeVisible(); + + // Test permalink (mini-dock) + await expect(await page.locator('#permalink')).not.toBeVisible(); + await page.locator('#menuToggle').click(); + await page.getByRole('link', { name: 'Permalink' }).click(); + await expect(await page.locator('#permalink')).toBeVisible(); + await expect(await page.locator('#permalink')).toBeInViewport(); + await expect(await page.locator('#tab-share-permalink')).toBeVisible(); + }) +})