Skip to content

Commit

Permalink
Add a Cypress command to skip tests if certain conditions are met
Browse files Browse the repository at this point in the history 
So that we can skip some tests if the viewport isn't the size that is required to test this part of the app
  • Loading branch information
@pakb
pakb committed Nov 13, 2023
1 parent 4010c4c commit c29af6e
Show file tree
Hide file tree
Showing 2 changed files with 179 additions and 146 deletions.
305 changes: 159 additions & 146 deletions tests/e2e-cypress/integration/mouseposition.cy.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/// <reference types="cypress" />

import { DEFAULT_PROJECTION } from '@/config'
import { BREAKPOINT_TABLET, DEFAULT_PROJECTION } from '@/config'
import {
LV03Format,
LV95Format,
Expand Down Expand Up @@ -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')
})
})
20 changes: 20 additions & 0 deletions tests/e2e-cypress/support/commands.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
}
}
)

0 comments on commit c29af6e

Please sign in to comment.