Skip to content

Commit

Permalink
Merge pull request #1229 from geoadmin/feat-PB-1384-profile-npm-modul…
Browse files Browse the repository at this point in the history 
…es-lthee

PB-1384 Contributing to the modularization
  • Loading branch information
@schtibe
schtibe authored Feb 7, 2025
2 parents d2501e6 + eefcf2f commit 9084c8b
Show file tree
Hide file tree
Showing 7 changed files with 94 additions and 187 deletions.
159 changes: 1 addition & 158 deletions package-lock.json
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
},
"dependencies": {
"@turf/turf": "^7.2.0",
"cypress": "^14.0.1",
"vue": "^3.5.13",
"vue-i18n": "^11.1.0"
},
Expand Down
25 changes: 15 additions & 10 deletions packages/mapviewer/src/modules/menu/components/activeLayers/MenuActiveLayersListItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import log from 'geoadmin/log'
import { computed, onMounted, ref, toRefs } from 'vue'
import { computed, onMounted, ref, toRefs, useTemplateRef } from 'vue'
import { useI18n } from 'vue-i18n'
import { useStore } from 'vuex'
Expand Down Expand Up @@ -62,7 +62,7 @@ const emit = defineEmits(['showLayerDescriptionPopup', 'toggleLayerDetail', 'mov
const store = useStore()
const { t } = useI18n()
useTippyTooltip('.menu-layer-item [data-tippy-content]')
const menuLayerItem = useTemplateRef('menuLayerItem')
const layerUpButton = ref(null)
const layerDownButton = ref(null)
Expand Down Expand Up @@ -107,6 +107,11 @@ const showSpinner = computed(
() => layer.value.isLoading && layer.value.isExternal && !layer.value.hasError
)
const elements = () => menuLayerItem.value.querySelectorAll('[data-tippy-content]')
useTippyTooltip(elements, {
source: 'MenuActiveLayersListItem',
})
onMounted(() => {
if (showLayerDetail.value) {
if (focusMoveButton.value === 'up') {
Expand Down Expand Up @@ -201,9 +206,9 @@ function changeStyle(newStyle) {
>
{{ layer.name }}
</TextTruncate>
<ZoomToExtentButton
v-if="layer.extent"
:extent="layer.extent"
<ZoomToExtentButton
v-if="layer.extent"
:extent="layer.extent"
/>
<button
v-if="showSpinner"
Expand All @@ -214,9 +219,9 @@ function changeStyle(newStyle) {
data-tippy-content="loading_external_layer"
:data-cy="`button-loading-metadata-spinner-${id}-${index}`"
>
<FontAwesomeIcon
icon="spinner"
pulse
<FontAwesomeIcon
icon="spinner"
pulse
/>
</button>
<ErrorButton
Expand Down Expand Up @@ -263,8 +268,8 @@ function changeStyle(newStyle) {
<FontAwesomeIcon icon="cog" />
</button>
</div>
<div
v-show="showLayerDetail"
<div
v-show="showLayerDetail"
:data-cy="`div-layer-settings-${id}-${index}`"
>
<div class="d-flex mx-1 align-items-center">
Expand Down
34 changes: 23 additions & 11 deletions packages/mapviewer/src/utils/composables/useTippyTooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,13 @@ import { useI18n } from 'vue-i18n'
* cy.get('[data-cy="my-div-1"]').realHover()
* cy.get('[data-cy="tippy-my-div-1"]').should('be.visible')
*
* @example
* const element = () => myRefToElement.value.querySelector('[data-tippy-content'])
* useTippyTooltip(element)
*
* // this is a good idea if the tooltip initiator is occuring more than once, i.e.
* // in a for loop
*
* @param {string | Component} selector Selector for element(s) to add a tooltip. You can also use
* an element reference or list of elements reference to attach the tooltip
* @param {{ theme: string; placement: string; delay: [number, number] }} options Options for the
Expand All @@ -69,7 +76,9 @@ export function useTippyTooltip(
offset = [0, 10], // the default value from tippy
} = {}
) {
// variable holding the tooltip instances
let tooltips = null

const options = { delay }
if (theme) {
options.theme = theme
Expand All @@ -94,14 +103,14 @@ export function useTippyTooltip(
removeTippy()
})

function setContent() {
tooltips?.forEach((tp) =>
function _translateContent() {
tooltips?.forEach((tp) => {
tp.setContent(
translate
? i18n.t(tp.reference.attributes['data-tippy-content'].value)
: tp.reference.attributes['data-tippy-content'].value
)
)
})
}

function removeTippy() {
Expand All @@ -110,15 +119,21 @@ export function useTippyTooltip(
}

function refreshTippyAttachment() {
// if the selector is a function, call it.
// this allows for lazy loading/referencing of DOM elements
if (typeof selector === 'function') {
selector = selector()
}
removeTippy()

tooltips = tippy(selector, {
...options,
arrow: true,
// Show tippy on long touch for mobile device
touch: ['hold', 500], // 500ms delay,
// we need to set the content dynamically onTrigger otherwise the tippy would
// not be reactive when the data-tippy-content changes
onTrigger: () => setContent(),
onTrigger: () => _translateContent(),
onCreate: (instance) => {
// Set a data-cy attribute that can be used for e2e tests
const dataCy = instance.reference.getAttribute('data-cy')
Expand All @@ -127,13 +142,10 @@ export function useTippyTooltip(
}
},
})
if (
!(
selector instanceof String ||
typeof selector === 'string' ||
selector instanceof Array
)
) {

if (!Array.isArray(tooltips)) {
// if we only have one tooltip returned, wrapping it here so that
// the following operations behave exactly the same
tooltips = [tooltips]
}
}
Expand Down
25 changes: 25 additions & 0 deletions packages/mapviewer/tests/cypress/support/commands.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,8 @@ Cypress.Commands.add(
} else {
cy.get('[data-cy="ol-map"]', { timeout: 10000 }).should('be.visible')
}

cy.log('cmd: goToMapView successful')
}
)

Expand Down Expand Up @@ -202,6 +204,8 @@ Cypress.Commands.add(
cy.waitAllLayersLoaded({ queryParams, legacy })

cy.get('[data-cy="ol-map"]', { timeout: 10000 }).should('be.visible')

cy.log('cmd: goToEmbedView successful')
}
)

Expand All @@ -216,6 +220,7 @@ Cypress.Commands.add('waitMapIsReady', ({ timeout = 20000, olMap = true } = {})
if (olMap) {
cy.window().its('mapPointerEventReady', { timeout: timeout }).should('be.true')
}
cy.log('cmd: waitMapIsReady successful')
})

/**
Expand All @@ -232,6 +237,8 @@ Cypress.Commands.add('dragMouse', (selector, x, y, button = 0) => {
cy.get(selector).trigger('mousemove', { button, clientX: 0, clientY: 0 }) // this is needed to make the drag work
cy.get(selector).trigger('mousemove', { button, clientX: x, clientY: y })
cy.get(selector).trigger('mouseup', { button })

cy.log('cmd: dragMouse successful')
})

/**
Expand Down Expand Up @@ -268,6 +275,8 @@ Cypress.Commands.add(
...(endPosition ? { position: endPosition } : { x: endXY.x, y: endXY.y }),
})
cy.get(selector).realMouseUp({ button })

cy.log('cmd: resizeElement successful')
}
)

Expand Down Expand Up @@ -305,6 +314,7 @@ Cypress.Commands.add('waitAllLayersLoaded', ({ queryParams = {}, legacy = false
errorMsg: 'Timeout waiting for all layers to be loaded',
}
)
// no explicit log as the waitUntilState will print a log message
})

/**
Expand Down Expand Up @@ -364,6 +374,7 @@ Cypress.Commands.add(
}
})
})
cy.log('cmd: changeUrlParam successful')
}
)

Expand All @@ -387,6 +398,7 @@ Cypress.Commands.add('clickOnLanguage', (lang) => {
// desktop
cy.get(`[data-cy="menu-lang-${lang}"]`).click()
}
cy.log('cmd: clickOnLanguage successful')
})

// cypress-wait-until wrapper to wait for a specific store state.
Expand All @@ -405,6 +417,8 @@ Cypress.Commands.add('waitUntilState', (predicate, options = {}) => {
options
)
)

// no cy.log command as the waitUntil will already print a message
})

// Reads a value from the Vuex store
Expand Down Expand Up @@ -451,6 +465,8 @@ Cypress.Commands.add(
$element.val(subString)
cy.get($element).type(lastChar)
})

cy.log('cmd: paste successful')
}
)

Expand Down Expand Up @@ -529,6 +545,7 @@ Cypress.Commands.add(

const simulatedEvent = new MapBrowserEvent(type, map, event)
map.handleMapBrowserEvent(simulatedEvent)
cy.log('cmd: simulateEvent successful')
}
)

Expand Down Expand Up @@ -557,6 +574,8 @@ Cypress.Commands.add('waitUntilCesiumTilesLoaded', () => {
// which cesium is much slower
{ timeout: 20000 }
)

cy.log('cmd: waitUntilCesiumTilesLoaded successful')
})

Cypress.Commands.add('openMenuIfMobile', () => {
Expand All @@ -569,6 +588,7 @@ Cypress.Commands.add('openMenuIfMobile', () => {
cy.get('[data-cy="menu-tray-inner"]').should('be.visible')
})
}
cy.log('cmd: openMenuIfMobile successful')
})

Cypress.Commands.add('closeMenuIfMobile', () => {
Expand All @@ -581,6 +601,8 @@ Cypress.Commands.add('closeMenuIfMobile', () => {
cy.get('[data-cy="menu-tray"]').should('not.be.visible')
})
}

cy.log('cmd: closeMenuIfMobile successful')
})

/**
Expand Down Expand Up @@ -611,6 +633,8 @@ Cypress.Commands.add('openLayerSettings', (layerId) => {
.should('be.visible')
.click()
cy.get(`[data-cy^="div-layer-settings-${layerId}-"]`).should('be.visible')

cy.log('cmd: openLayerSettings successful')
})

Cypress.Commands.add(
Expand Down Expand Up @@ -736,4 +760,5 @@ Cypress.Commands.add('checkOlLayer', (args = null) => {
})
})
})
cy.log('cmd: checkOlLayer successful')
})
25 changes: 19 additions & 6 deletions packages/mapviewer/tests/cypress/tests-e2e/layers.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -290,9 +290,12 @@ describe('Test of layer handling', () => {
})
it('reads and adds an external WMTS correctly', () => {
cy.getExternalWmtsMockConfig().then((layerObjects) => {
const [mockExternalWmts1, mockExternalWmts2, mockExternalWmts3] = layerObjects
const [mockExternalWmts1, _, mockExternalWmts3] = layerObjects

cy.goToMapView({
layers: layerObjects.map(transformLayerIntoUrlString).join(';'),
layers: layerObjects
.map((object) => transformLayerIntoUrlString(object))
.join(';'),
})

cy.wait([
Expand Down Expand Up @@ -339,6 +342,11 @@ describe('Test of layer handling', () => {
.get('[data-cy="menu-external-disclaimer-icon-cloud"]')
.should('be.visible')
})
})
})
it("reads and adds an external WMTS correctly but doesn't show the invisible layer", () => {
cy.getExternalWmtsMockConfig().then((layerObjects) => {
const [mockExternalWmts1, mockExternalWmts2, mockExternalWmts3] = layerObjects

mockExternalWmts1.visible = false
mockExternalWmts1.opacity = 0.5
Expand All @@ -351,10 +359,11 @@ describe('Test of layer handling', () => {
mockExternalWmts2.clone(),
mockExternalWmts3.clone(),
]

// reads and sets non default layer config; visible and opacity
cy.goToMapView({
layers: layerObjects2.map(transformLayerIntoUrlString).join(';'),
layers: layerObjects2
.map((object) => transformLayerIntoUrlString(object))
.join(';'),
})
cy.readStoreValue('getters.visibleLayers').should('have.length', 1)
cy.readStoreValue('state.layers.activeLayers').should((layers) => {
Expand All @@ -365,7 +374,6 @@ describe('Test of layer handling', () => {
expect(layers[index].opacity).to.eq(layer.opacity)
})
})

// shows a red icon to signify a layer is from an external source
cy.openMenuIfMobile()
cy.get('[data-cy^="menu-active-layer-"]').should(
Expand All @@ -392,7 +400,6 @@ describe('Test of layer handling', () => {
}
}),
])

cy.log(`Make sure that the external backend have not been called twice`)
cy.get(`@externalWMTS-GetCap-${mockExternalWmts1.baseUrl}.all`).should(
'have.length',
Expand Down Expand Up @@ -921,6 +928,12 @@ describe('Test of layer handling', () => {
expect(activeLayers[3].opacity).to.eq(0)
})

// we need to wait for a moment in order for the tippies to be removed from the
// dom. This is a problem only on cypress.io. Probably this wait will trigger a
// rendering cycle that removes the tooltips as it's supposed to when they're hidden
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(500)

//---------------------------------------------------------------------------------
cy.log(`Change duplicate layer should not change original layer`)
cy.get(`[data-cy="button-open-visible-layer-settings-${timedLayerId}-3"]`)
Expand Down
12 changes: 10 additions & 2 deletions packages/mapviewer/tests/cypress/tests-e2e/print.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -573,7 +573,11 @@ describe('Testing print', () => {
layer.visible = true
})
cy.goToMapView(
{ layers: layerObjects.map(transformLayerIntoUrlString).join(';') },
{
layers: layerObjects
.map((object) => transformLayerIntoUrlString(object))
.join(';'),
},
true
)

Expand Down Expand Up @@ -656,7 +660,11 @@ describe('Testing print', () => {
layer.visible = true
})
cy.goToMapView(
{ layers: layerObjects.map(transformLayerIntoUrlString).join(';') },
{
layers: layerObjects
.map((object) => transformLayerIntoUrlString(object))
.join(';'),
},
true
)

Expand Down

0 comments on commit 9084c8b

Please sign in to comment.