From c29af6e809ee5b9d18123e15fd350e8330087329 Mon Sep 17 00:00:00 2001 From: Pascal Barth Date: Mon, 13 Nov 2023 14:13:43 +0100 Subject: [PATCH] Add a Cypress command to skip tests if certain conditions are met So that we can skip some tests if the viewport isn't the size that is required to test this part of the app --- .../integration/mouseposition.cy.js | 305 +++++++++--------- tests/e2e-cypress/support/commands.js | 20 ++ 2 files changed, 179 insertions(+), 146 deletions(-) diff --git a/tests/e2e-cypress/integration/mouseposition.cy.js b/tests/e2e-cypress/integration/mouseposition.cy.js index 7d6f9ebe63..abfa97c6db 100644 --- a/tests/e2e-cypress/integration/mouseposition.cy.js +++ b/tests/e2e-cypress/integration/mouseposition.cy.js @@ -1,6 +1,6 @@ /// -import { DEFAULT_PROJECTION } from '@/config' +import { BREAKPOINT_TABLET, DEFAULT_PROJECTION } from '@/config' import { LV03Format, LV95Format, @@ -73,159 +73,172 @@ describe('Test mouse position and interactions', () => { const centerMGRS = MGRSFormat.format(center, DEFAULT_PROJECTION) const centerUTM = UTMFormat.format(center, DEFAULT_PROJECTION) - beforeEach(() => { - cy.goToMapView({ - center: center.join(','), - z: DEFAULT_PROJECTION.getDefaultZoom() + 3, + context('Tablet/desktop tests', () => { + beforeEach(() => { + cy.skipTestsIf( + Cypress.config('viewportWidth') < BREAKPOINT_TABLET, + 'This test will only be run on tablet and bigger viewports' + ) + cy.goToMapView({ + center: center.join(','), + z: DEFAULT_PROJECTION.getDefaultZoom() + 3, + }) }) - }) - it('shows coordinate under the mouse cursor in the footer, according to the selected projection format', () => { - // the viewport needs to be at least tablet sized in order for the mouse cursor tracker to be visible - cy.viewport('ipad-2') - - checkMousePositionNumberValue(centerLV95[0], centerLV95[1], parseLV) + it('shows coordinate under the mouse cursor in the footer, according to the selected projection format', () => { + checkMousePositionNumberValue(centerLV95[0], centerLV95[1], parseLV) - getMousePositionAndSelect(LV03Format) - checkMousePositionNumberValue(centerLV03[0], centerLV03[1], parseLV) + getMousePositionAndSelect(LV03Format) + checkMousePositionNumberValue(centerLV03[0], centerLV03[1], parseLV) - getMousePositionAndSelect(MGRSFormat) - checkMousePositionStringValue(centerMGRS) + getMousePositionAndSelect(MGRSFormat) + checkMousePositionStringValue(centerMGRS) - getMousePositionAndSelect(WGS84Format) - checkMousePositionStringValue(WGS84Format.format(center, DEFAULT_PROJECTION, true)) + getMousePositionAndSelect(WGS84Format) + checkMousePositionStringValue(WGS84Format.format(center, DEFAULT_PROJECTION, true)) - // Change display projection without moving the mouse - getMousePositionAndSelect(MGRSFormat) - getMousePositionAndSelect(LV95Format) - checkMousePositionNumberValue(centerLV95[0], centerLV95[1], parseLV) - }) - it('activates fullscreen on mobile when nothing is under the cursor and a click/touch occurs', () => { - // works only on mobile - cy.viewport('iphone-4') - cy.get('[data-cy="ol-map"]').click() - cy.readStoreValue('state.ui.fullscreenMode').should('be.true') - cy.readStoreValue('state.features.selectedFeatures').should('be.empty') - }) - it('shows the LocationPopUp when rightclick occurs on the map', () => { - const shortUrl = 'https://s.geo.admin.ch/0000000' - cy.intercept(/^http[s]?:\/\/(sys-s\.\w+\.bgdi\.ch|s\.geo\.admin\.ch)\//, { - body: { shorturl: shortUrl, success: true }, - }).as('shortlink') - cy.intercept(`**/api/qrcode/generate**`, { - fixture: 'service-qrcode/position-popup.png', - }).as('qrcode') - - // location popup need a bit of room on the Y axis, otherwise it is half hidden (and Cypress complains) - cy.viewport(320, 1000) - cy.get('[data-cy="map"]').rightclick() - - cy.get('[data-cy="location-popup"]').should('be.visible') - cy.log('the LocationPopUp is visible') - - cy.openDrawingMode() - cy.readStoreValue('state.ui.showDrawingOverlay').should('be.true') - cy.get('[data-cy="location-popup"]').should('not.exist') - cy.log('the location popup has been hidden when entering drawing mode') - - cy.get('[data-cy="drawing-toolbox-close-button"]').click() - // closing the menu if mobile - cy.clickOnMenuButtonIfMobile() - cy.get('[data-cy="map"]').rightclick() - - cy.wait('@convert-to-w3w') - cy.fixture('what3word.fixture').then((fakeW3w) => { - cy.get('[data-cy="location-popup-w3w"]').contains(fakeW3w.words) + // Change display projection without moving the mouse + getMousePositionAndSelect(MGRSFormat) + getMousePositionAndSelect(LV95Format) + checkMousePositionNumberValue(centerLV95[0], centerLV95[1], parseLV) }) - cy.log('it uses the what3words API in the location popup') - - cy.wait('@coordinates-for-height') - cy.fixture('service-alti/height.fixture').then((fakeheight) => { - cy.get('[data-cy="location-popup-height"]').contains(fakeheight.height) - }) - cy.log('it uses the elevation API in the location popup') - - const [lon, lat] = centerWGS84 - cy.get('[data-cy="location-popup-coordinates-lv95"]') - .invoke('text') - .then(parseLV) - .then(checkXY(...centerLV95)) - cy.log('it shows coordinates, correctly re-projected into LV95, in the popup') - - cy.get('[data-cy="location-popup-coordinates-lv03"]') - .invoke('text') - .then(parseLV) - .then(checkXY(...centerLV03)) - cy.log('it shows coordinates, correctly re-projected into LV03, in the popup') - - cy.get('[data-cy="location-popup-coordinates-plain-wgs84"]').contains( - `${lat.toFixed(6)}, ${lon.toFixed(6)}` - ) - cy.log('it shows correct plain WGS coordinates in the popup') - - cy.get('[data-cy="location-popup-coordinates-wgs84"]').contains( - WGS84Format.format(center, DEFAULT_PROJECTION) - ) - cy.log( - 'it uses the correct format to show a second line with WGS84 coordinates in the popup' - ) - - cy.get('[data-cy="location-popup-coordinates-utm"]').contains( - UTMFormat.format(center, DEFAULT_PROJECTION) - ) - cy.log('it shows correct UTM coordinates in the popup') - - cy.get('[data-cy="location-popup-coordinates-mgrs"]').contains( - MGRSFormat.format(center, DEFAULT_PROJECTION) - ) - cy.log('it shows correct MGRS coordinates in the popup') - - cy.get('[data-cy="map"]').rightclick() - cy.wait('@shortlink').then((interception) => { - expect(interception.request.body.url).be.a('string') - const query = interception.request.body.url.split('?')[1] - const params = new URLSearchParams(query) - const position = params.get('center').split(',').map(parseFloat) - checkXY(...position) - expect(params.get('crosshair')).not.to.be.empty - }) - cy.log('a link with crosshair and correct position is sent to shortlink') - - cy.wait('@qrcode').then((interception) => { - expect(interception.request.url).not.to.be.empty - expect(interception.request.url).to.include('?') - const query = interception.request.url.split('?')[1] - const params = new URLSearchParams(query) - expect(params.get('url')).to.be.equal(shortUrl) - }) - cy.log('a shortlink is passed to create the qrcode') - - const shortUrl2 = 'https://s.geo.admin.ch/1111111' - cy.intercept(/^http[s]?:\/\/(sys-s\.\w+\.bgdi\.ch|s\.geo\.admin\.ch)\//, { - body: { shorturl: shortUrl2, success: true }, - }).as('shortlink-bg-void') - cy.intercept(`**/api/qrcode/generate**`, { - fixture: 'service-qrcode/position-popup.png', - }).as('qrcode-bg-void') - cy.writeStoreValue('setBackground', null) - cy.wait('@shortlink-bg-void').then((interception) => { - expect(interception.request.body.url).be.a('string') - const query = interception.request.body.url.split('?')[1] - const params = new URLSearchParams(query) - expect(params.get('bgLayer')).to.be.equal('void') + }) + context('Mobile only tests', () => { + beforeEach(() => { + cy.skipTestsIf( + Cypress.config('viewportWidth') >= BREAKPOINT_TABLET, + 'This test will only be run on mobile' + ) + cy.goToMapView({ + center: center.join(','), + z: DEFAULT_PROJECTION.getDefaultZoom() + 3, + }) }) - cy.get('[data-cy="location-popup-link-input"]').should('have.value', shortUrl2) - cy.log('the shortlink was updated when the app changed') - - cy.wait('@qrcode-bg-void').then((interception) => { - expect(interception.request.url).not.to.be.empty - expect(interception.request.url).to.include('?') - const query = interception.request.url.split('?')[1] - const params = new URLSearchParams(query) - expect(params.get('url')).to.be.equal(shortUrl2) + it('activates fullscreen on mobile when nothing is under the cursor and a click/touch occurs', () => { + cy.get('[data-cy="ol-map"]').click() + cy.readStoreValue('state.ui.fullscreenMode').should('be.true') + cy.readStoreValue('state.features.selectedFeatures').should('be.empty') }) - cy.get('[data-cy="location-popup-qr-code"').then(($element) => { - expect($element.attr('src')).not.to.be.empty + it('shows the LocationPopUp when rightclick occurs on the map', () => { + const shortUrl = 'https://s.geo.admin.ch/0000000' + cy.intercept(/^http[s]?:\/\/(sys-s\.\w+\.bgdi\.ch|s\.geo\.admin\.ch)\//, { + body: { shorturl: shortUrl, success: true }, + }).as('shortlink') + cy.intercept(`**/api/qrcode/generate**`, { + fixture: 'service-qrcode/position-popup.png', + }).as('qrcode') + + // location popup need a bit of room on the Y axis, otherwise it is half hidden (and Cypress complains) + cy.viewport(320, 1000) + cy.get('[data-cy="map"]').rightclick() + + cy.get('[data-cy="location-popup"]').should('be.visible') + cy.log('the LocationPopUp is visible') + + cy.openDrawingMode() + cy.readStoreValue('state.ui.showDrawingOverlay').should('be.true') + cy.get('[data-cy="location-popup"]').should('not.exist') + cy.log('the location popup has been hidden when entering drawing mode') + + cy.get('[data-cy="drawing-toolbox-close-button"]').click() + // closing the menu if mobile + cy.clickOnMenuButtonIfMobile() + cy.get('[data-cy="map"]').rightclick() + + cy.wait('@convert-to-w3w') + cy.fixture('what3word.fixture').then((fakeW3w) => { + cy.get('[data-cy="location-popup-w3w"]').contains(fakeW3w.words) + }) + cy.log('it uses the what3words API in the location popup') + + cy.wait('@coordinates-for-height') + cy.fixture('service-alti/height.fixture').then((fakeheight) => { + cy.get('[data-cy="location-popup-height"]').contains(fakeheight.height) + }) + cy.log('it uses the elevation API in the location popup') + + const [lon, lat] = centerWGS84 + cy.get('[data-cy="location-popup-coordinates-lv95"]') + .invoke('text') + .then(parseLV) + .then(checkXY(...centerLV95)) + cy.log('it shows coordinates, correctly re-projected into LV95, in the popup') + + cy.get('[data-cy="location-popup-coordinates-lv03"]') + .invoke('text') + .then(parseLV) + .then(checkXY(...centerLV03)) + cy.log('it shows coordinates, correctly re-projected into LV03, in the popup') + + cy.get('[data-cy="location-popup-coordinates-plain-wgs84"]').contains( + `${lat.toFixed(6)}, ${lon.toFixed(6)}` + ) + cy.log('it shows correct plain WGS coordinates in the popup') + + cy.get('[data-cy="location-popup-coordinates-wgs84"]').contains( + WGS84Format.format(center, DEFAULT_PROJECTION) + ) + cy.log( + 'it uses the correct format to show a second line with WGS84 coordinates in the popup' + ) + + cy.get('[data-cy="location-popup-coordinates-utm"]').contains( + UTMFormat.format(center, DEFAULT_PROJECTION) + ) + cy.log('it shows correct UTM coordinates in the popup') + + cy.get('[data-cy="location-popup-coordinates-mgrs"]').contains( + MGRSFormat.format(center, DEFAULT_PROJECTION) + ) + cy.log('it shows correct MGRS coordinates in the popup') + + cy.get('[data-cy="map"]').rightclick() + cy.wait('@shortlink').then((interception) => { + expect(interception.request.body.url).be.a('string') + const query = interception.request.body.url.split('?')[1] + const params = new URLSearchParams(query) + const position = params.get('center').split(',').map(parseFloat) + checkXY(...position) + expect(params.get('crosshair')).not.to.be.empty + }) + cy.log('a link with crosshair and correct position is sent to shortlink') + + cy.wait('@qrcode').then((interception) => { + expect(interception.request.url).not.to.be.empty + expect(interception.request.url).to.include('?') + const query = interception.request.url.split('?')[1] + const params = new URLSearchParams(query) + expect(params.get('url')).to.be.equal(shortUrl) + }) + cy.log('a shortlink is passed to create the qrcode') + + const shortUrl2 = 'https://s.geo.admin.ch/1111111' + cy.intercept(/^http[s]?:\/\/(sys-s\.\w+\.bgdi\.ch|s\.geo\.admin\.ch)\//, { + body: { shorturl: shortUrl2, success: true }, + }).as('shortlink-bg-void') + cy.intercept(`**/api/qrcode/generate**`, { + fixture: 'service-qrcode/position-popup.png', + }).as('qrcode-bg-void') + cy.writeStoreValue('setBackground', null) + cy.wait('@shortlink-bg-void').then((interception) => { + expect(interception.request.body.url).be.a('string') + const query = interception.request.body.url.split('?')[1] + const params = new URLSearchParams(query) + expect(params.get('bgLayer')).to.be.equal('void') + }) + cy.get('[data-cy="location-popup-link-input"]').should('have.value', shortUrl2) + cy.log('the shortlink was updated when the app changed') + + cy.wait('@qrcode-bg-void').then((interception) => { + expect(interception.request.url).not.to.be.empty + expect(interception.request.url).to.include('?') + const query = interception.request.url.split('?')[1] + const params = new URLSearchParams(query) + expect(params.get('url')).to.be.equal(shortUrl2) + }) + cy.get('[data-cy="location-popup-qr-code"').then(($element) => { + expect($element.attr('src')).not.to.be.empty + }) + cy.log('the QR code was updated when the app changed') }) - cy.log('the QR code was updated when the app changed') }) }) diff --git a/tests/e2e-cypress/support/commands.js b/tests/e2e-cypress/support/commands.js index eaf803507f..ca1fb8a592 100644 --- a/tests/e2e-cypress/support/commands.js +++ b/tests/e2e-cypress/support/commands.js @@ -488,3 +488,23 @@ Cypress.Commands.add('openLayerSettings', (layerId) => { cy.get(`[data-cy="button-open-visible-layer-settings-${layerId}"]`).should('be.visible').click() cy.get(`[data-cy="div-layer-settings-${layerId}"]`).should('be.visible') }) + +Cypress.Commands.add( + 'skipTestsIf', + /** + * Will skip this test (or all tests if this is run inside a context/describe) when the + * condition is true. + * + * @param {Boolean} condition + * @param {String} message A message to cy.log in case tests are skipped + */ + (condition, message) => { + if (condition) { + const mochaContext = cy.state('runnable').ctx + mochaContext?.skip() + if (message) { + cy.log(message) + } + } + } +)