Update readme and some deps

README.md

@@ -160,3 +160,14 @@ const remoteProxyWms = 'https://map.geoportail.lu/httpsproxy'
 
 proxyUrlHelper.init(proxyWmsUrl, remoteProxyWms)
 ```
+
+### Use components, services, stores, composables
+
+To use components, services, stores or composables in you application, all these should explicitely exported in the lib.
+
+To create custom components in the application using the lib, adapt the following code snippet to relevant components in the target app:
+
+```js
+const LayerPanelElement = createElementInstance(LayerPanel, app)
+customElements.define('layer-panel', LayerPanelElement)
+```

cypress/e2e/language-selection.cy.ts

@@ -59,10 +59,11 @@ describe('Language selector', () => {
     expect(localStorage.getItem('lang')).to.eq('fr')
 
     cy.get('[data-cy="langSelect"] .lux-dropdown-btn').click()
-    cy.get('[data-cy="langSelect"] [data-value="lb"]')
-      .click()
-      .should(() => {
-        expect(localStorage.getItem('lang')).to.eq('lb')
-      })
+
+    const langSelect = () => cy.get('[data-cy="langSelect"] [data-value="lb"]')
+    langSelect().click()
+    langSelect().should(() => {
+      expect(localStorage.getItem('lang')).to.eq('lb')
+    })
   })
 })

cypress/e2e/layers-selection.cy.ts

@@ -21,7 +21,7 @@ describe('Catalogue', () => {
     })
 
     it('adds selected layers to the map and to the layer manager', () => {
-      cy.get('[data-cy="myLayersButton"]').click()
+      cy.get('[data-cy="myLayersButton"]').click({ force: true })
       cy.get('[data-cy="myLayers"] > ul > li').should('have.length', 2)
     })
 
@@ -38,13 +38,13 @@ describe('Catalogue', () => {
 
       cy.get('[data-cy="myLayersButton"]').click()
       cy.get('[data-cy="myLayers"]').find('button').eq(2).click()
-      cy.get('[data-cy="myLayers"]')
-        .find('button')
-        .eq(4)
-        .click()
-        .should(() => {
-          expect(localStorage.getItem('opacities')).to.eq('1-0')
-        }) // toggle button visible
+
+      const myLayersBtn = () =>
+        cy.get('[data-cy="myLayers"]').find('button').eq(4)
+      myLayersBtn().click()
+      myLayersBtn().should(() => {
+        expect(localStorage.getItem('opacities')).to.eq('1-0')
+      }) // toggle button visible
 
       cy.url().should('contains', 'opacities=1-0')
       cy.get('[data-cy="myLayers"]')

cypress/e2e/slider-comparator.cy.ts

@@ -37,9 +37,10 @@ describe('Permalink/State persistor - Layer comparator (lc & sliderRatio)', () =
         'have.class',
         'fa-circle'
       )
-      cy.get('#layer-manager-item-content-346 button:last-child')
-        .click()
-        .should('have.class', 'fa-adjust')
+      const layerItemBtn = () =>
+        cy.get('#layer-manager-item-content-346 button:last-child')
+      layerItemBtn().click()
+      layerItemBtn().should('have.class', 'fa-adjust')
     })
 
     it('displays the splitter on the map with le layer label', () => {
@@ -66,10 +67,15 @@ describe('Permalink/State persistor - Layer comparator (lc & sliderRatio)', () =
       sliderElement
         .then($el => $el.position().left)
         .then(prevLeft => {
-          cy.get('button[data-cy="sliderElement"]')
-            .trigger('mousemove', { which: 1, clientX: 800, clientY: 600 })
-            .trigger('mouseup')
-          cy.get('button[data-cy="sliderElement"]')
+          const sliderElementBtn = () =>
+            cy.get('button[data-cy="sliderElement"]')
+          sliderElementBtn().trigger('mousemove', {
+            which: 1,
+            clientX: 800,
+            clientY: 600,
+          })
+          sliderElementBtn().trigger('mouseup')
+          sliderElementBtn()
             .then($el => $el.position().left)
             .then(currentLeft => {
               expect(currentLeft).to.be.gt(prevLeft)
@@ -81,9 +87,15 @@ describe('Permalink/State persistor - Layer comparator (lc & sliderRatio)', () =
       sliderElement
         .then($el => $el.position().left)
         .then(prevLeft => {
-          cy.get('button[data-cy="sliderElement"]')
-            .trigger('mousemove', { which: 1, clientX: 100, clientY: 600 })
-            .trigger('mouseup')
+          const sliderElementBtn = () =>
+            cy.get('button[data-cy="sliderElement"]')
+          sliderElementBtn().trigger('mousemove', {
+            which: 1,
+            clientX: 100,
+            clientY: 600,
+          })
+          sliderElementBtn().trigger('mouseup')
+
           cy.get('button[data-cy="sliderElement"]')
             .then($el => $el.position().left)
             .then(currentLeft => {

cypress/e2e/theme-selection.cy.ts

@@ -27,9 +27,10 @@ describe('Theme selector', () => {
     })
 
     it('updates the colors of the language selector', () => {
-      cy.get('[data-cy="langSelect"] .lux-dropdown-btn')
-        .click()
-        .should('have.css', 'background-color', 'rgb(232, 76, 61)')
+      const langSelectBtn = () =>
+        cy.get('[data-cy="langSelect"] .lux-dropdown-btn')
+      langSelectBtn().click()
+      langSelectBtn().should('have.css', 'background-color', 'rgb(232, 76, 61)')
 
       cy.get('[data-cy="langSelect"] .lux-dropdown-list li:not(.selected)')
         .should('have.length', 3)