Merge pull request #157 from Geoportail-Luxembourg/GSLUX-759-Fix-meta…

…data GSLUX-759: Fix metadata and legend missing for some layers
Geoportail-Luxembourg · Oct 15, 2024 · 79a8686 · 79a8686
2 parents 53c2d77 + 8036a46
commit 79a8686
Show file tree

Hide file tree

Showing 18 changed files with 35,314 additions and 38,150 deletions.
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -2,8 +2,9 @@ import { defineConfig } from 'cypress'
 
 export default defineConfig({
   e2e: {
-    specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
     baseUrl: 'http://localhost:4173',
+    chromeWebSecurity: false,
+    specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
     screenshotOnRunFailure: false,
     video: false,
     setupNodeEvents(on, config) {

diff --git a/cypress/e2e/background-selection.cy.ts b/cypress/e2e/background-selection.cy.ts
@@ -60,7 +60,9 @@ describe('Background selector', () => {
     it('updates the attribution content', () => {
       cy.get('[data-cy="attributionControl"]')
         .should('be.visible')
-        .contains('© B&W custom attribution for test only')
+        .contains(
+          '© MapTiler © OpenStreetMap contributors for data outside of Luxembourg'
+        )
     })
   })
 

diff --git a/cypress/e2e/layers-selection.cy.ts → ...-selection/layers-selection-catalog.cy.ts b/cypress/e2e/layers-selection.cy.ts → ...-selection/layers-selection-catalog.cy.ts
@@ -1,4 +1,4 @@
-import type { AUTWindowOlMap } from '../types'
+import type { AUTWindowOlMap } from '../../types'
 
 describe('Catalogue', () => {
   beforeEach(() => {
@@ -14,27 +14,28 @@ describe('Catalogue', () => {
   describe('When user adds layers from the catalog', () => {
     beforeEach(() => {
       cy.get('[data-cy="catalogButton"]').click()
-      cy.get('[data-cy="catalog"]').find('button').first().click()
-      cy.get('[data-cy="catalog"]').find('button').eq(1).click()
-      cy.get('[data-cy="catalog"]').find('button').eq(3).click()
-      cy.get('[data-cy="catalog"]').find('button').eq(5).click()
+      cy.get('[data-cy="parentLayerLabel-242"]').find('button').first().click()
+      cy.get('[data-cy="parentLayerLabel-309"]').click()
+      cy.get('[data-cy^="layerLabel-269"]').click()
+      cy.get('[data-cy^="layerLabel-349"]').click()
+      cy.get('[data-cy^="layerLabel-329"]').click()
     })
 
     it('adds selected layers to the map and to the layer manager', () => {
       cy.get('[data-cy="myLayersButton"]').click({ force: true })
-      cy.get('[data-cy="myLayers"] > ul > li').should('have.length', 2)
+      cy.get('[data-cy="myLayers"] > ul > li').should('have.length', 3)
     })
 
     it('displays title with updated number of layers', () => {
       cy.get('[data-cy="myLayersButton"]').should(
         'have.text',
-        'Mes couches (2)'
+        'Mes couches (3)'
       )
     })
 
     it('toggles the layer visibility', () => {
       cy.url().should('contains', 'opacities=1-1')
-      expect(localStorage.getItem('opacities')).to.eq('1-1')
+      expect(localStorage.getItem('opacities')).to.eq('1-1-1')
 
       cy.get('[data-cy="myLayersButton"]').click()
       cy.get('[data-cy="myLayers"]').find('button').eq(2).click()
@@ -43,10 +44,10 @@ describe('Catalogue', () => {
         cy.get('[data-cy="myLayers"]').find('button').eq(4)
       myLayersBtn().click()
       myLayersBtn().should(() => {
-        expect(localStorage.getItem('opacities')).to.eq('1-0')
+        expect(localStorage.getItem('opacities')).to.eq('1-1-0')
       }) // toggle button visible
 
-      cy.url().should('contains', 'opacities=1-0')
+      cy.url().should('contains', 'opacities=1-1-0')
       cy.get('[data-cy="myLayers"]')
         .find('button')
         .eq(4)
@@ -60,7 +61,7 @@ describe('Catalogue', () => {
       cy.get('[data-cy="catalog"]').find('button').first().click()
       cy.get('[data-cy="catalog"]')
         .find('[data-cy="parentLayerLabel-248"]')
-        .click()
+        .click({ force: true })
       // get layer stack and filter featureLayer
       cy.window().then(window => {
         const layers = (<AUTWindowOlMap>window).olMap
@@ -69,8 +70,12 @@ describe('Catalogue', () => {
           .filter((l: any) => l.get('cyLayerType') !== 'featureLayer')
         expect(layers[0].get('id')).to.eq(556)
       })
-      cy.get('[data-cy="catalog"]').find('[data-cy="layerLabel-359"]').click()
-      cy.get('[data-cy="catalog"]').find('[data-cy="layerLabel-353"]').click()
+      cy.get('[data-cy="catalog"]')
+        .find('[data-cy="layerLabel-359"]')
+        .click({ force: true })
+      cy.get('[data-cy="catalog"]')
+        .find('[data-cy="layerLabel-353"]')
+        .click({ force: true })
       // BG deactivated due to layer exclusion
       cy.window().then(window => {
         const layers = (<AUTWindowOlMap>window).olMap
@@ -86,34 +91,3 @@ describe('Catalogue', () => {
     })
   })
 })
-
-describe('LayerManager', () => {
-  beforeEach(() => {
-    cy.visit('/')
-  })
-  it('opens catalog when clicking button "+ Add layer"', () => {
-    cy.get('[data-cy="myLayersButton"]').click()
-    cy.get('[data-cy="addLayer"]').click()
-    cy.get('[data-cy="catalog"]').should('be.visible')
-  })
-})
-
-describe('Remote layers', () => {
-  beforeEach(() => {
-    cy.visit('/')
-  })
-
-  it('adds layers from the remote layers modale', () => {
-    cy.get('[data-cy="myLayersButton"]').click()
-    cy.get('[data-cy="addRemoteLayer"]').click()
-    cy.get('[data-cy="remoteLayerModalContent"]').find('button').eq(0).click()
-    cy.get('[data-cy="remoteLayerModalContent"]').find('button').eq(1).click()
-    cy.get(
-      '[data-cy="parentLayerLabel-WMS||http://wmts1.geoportail.lu/opendata/service||Ortho"]'
-    ).click()
-    cy.get(
-      '[data-cy="layerLabel-WMS||http://wmts1.geoportail.lu/opendata/service||ortho_2001"]'
-    ).click()
-    cy.get('[data-cy="myLayers"] > ul > li').should('have.length', 1)
-  })
-})
diff --git a/cypress/e2e/layers-selection/layers-selection-layer-manager.cy.ts b/cypress/e2e/layers-selection/layers-selection-layer-manager.cy.ts
@@ -0,0 +1,10 @@
+describe('LayerManager', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+  it('opens catalog when clicking button "+ Add layer"', () => {
+    cy.get('[data-cy="myLayersButton"]').click()
+    cy.get('[data-cy="addLayer"]').click()
+    cy.get('[data-cy="catalog"]').should('be.visible')
+  })
+})
diff --git a/cypress/e2e/layers-selection/layers-selection-remote-layers.cy.ts b/cypress/e2e/layers-selection/layers-selection-remote-layers.cy.ts
@@ -0,0 +1,19 @@
+describe('Remote layers', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  it('adds layers from the remote layers modale', () => {
+    cy.get('[data-cy="myLayersButton"]').click()
+    cy.get('[data-cy="addRemoteLayer"]').click()
+    cy.get('[data-cy="remoteLayerModalContent"]').find('button').eq(0).click()
+    cy.get('[data-cy="remoteLayerModalContent"]').find('button').eq(1).click()
+    cy.get(
+      '[data-cy="parentLayerLabel-WMS||http://wmts1.geoportail.lu/opendata/service||Ortho"]'
+    ).click()
+    cy.get(
+      '[data-cy="layerLabel-WMS||http://wmts1.geoportail.lu/opendata/service||ortho_2001"]'
+    ).click()
+    cy.get('[data-cy="myLayers"] > ul > li').should('have.length', 1)
+  })
+})
diff --git a/cypress/e2e/metadata/metadata.cy.ts b/cypress/e2e/metadata/metadata.cy.ts
@@ -0,0 +1,20 @@
+describe('Metadata', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  describe('When user displays layer info', () => {
+    beforeEach(() => {
+      cy.get('[data-cy="catalogButton"]').click()
+      cy.get('[data-cy="layerMetadata-698"]').click()
+    })
+
+    it('it show the popup with the layer metadata', () => {
+      cy.get('[data-cy="metadata"]').find('span').eq(0).contains('Nom')
+      cy.get('[data-cy="metadata"] .lux-legend')
+        .find('h4')
+        .eq(0)
+        .contains('avec légende')
+    })
+  })
+})
diff --git a/cypress/e2e/permalink/layers-comparator.cy.ts b/cypress/e2e/permalink/layers-comparator.cy.ts
@@ -2,34 +2,34 @@ describe('Permalink/State persistor - Layer comparator (lc & sliderRatio)', () =
   beforeEach(() => {
     cy.visit('/')
     cy.get('[data-cy="catalogButton"]').click()
-    cy.get('[data-cy="catalog"]').find('button').first().click()
-    cy.get('[data-cy="catalog"]').find('button').eq(1).click()
-    cy.get('[data-cy="catalog"]').find('button').eq(3).click()
-    cy.get('[data-cy="catalog"]').find('button').eq(5).click()
-    cy.get('[data-cy="catalog"]').find('button').eq(7).click()
+    cy.get('[data-cy="parentLayerLabel-242"]').find('button').first().click()
+    cy.get('[data-cy="parentLayerLabel-309"]').click()
+    cy.get('[data-cy^="layerLabel-269"]').click()
+    cy.get('[data-cy^="layerLabel-349"]').click()
+    cy.get('[data-cy^="layerLabel-329"]').click()
     cy.get('[data-cy="myLayersButton"]').click()
   })
 
   describe('initial state', () => {
     it('updates the permalink parameter "lc"', () => {
-      cy.get('button[data-cy="myLayerItemLabel-346"]').click()
+      cy.get('button[data-cy="myLayerItemLabel-329"]').click()
       cy.url().should('not.contain', 'lc=true')
-      cy.get('#layer-manager-item-content-346 button:last-child').click()
+      cy.get('#layer-manager-item-content-329 button:last-child').click()
       cy.url().should('contains', 'lc=true')
     })
 
     it('updates the permalink parameter "sliderRatio" with default value 0.5', () => {
-      cy.get('button[data-cy="myLayerItemLabel-346"]').click()
+      cy.get('button[data-cy="myLayerItemLabel-329"]').click()
       cy.url().should('not.contain', 'sliderRatio')
-      cy.get('#layer-manager-item-content-346 button:last-child').click()
+      cy.get('#layer-manager-item-content-329 button:last-child').click()
       cy.url().should('contains', 'sliderRatio=0.5')
     })
   })
 
   describe('when splitter element is moved or closed', () => {
     beforeEach(() => {
-      cy.get('button[data-cy="myLayerItemLabel-346"]').click()
-      cy.get('#layer-manager-item-content-346 button:last-child').click()
+      cy.get('button[data-cy="myLayerItemLabel-329"]').click()
+      cy.get('#layer-manager-item-content-329 button:last-child').click()
       cy.get('button[data-cy="sliderElement"]').focus()
     })
 

diff --git a/cypress/e2e/permalink/layers-time.cy.ts b/cypress/e2e/permalink/layers-time.cy.ts
@@ -3,7 +3,7 @@ describe('Permalink/State persistor - Layers', () => {
     describe('When layer times param have values', () => {
       it('updates the layer items in the layer manager with the dates', () => {
         cy.visit(
-          '/?version=3&lang=fr&X=667917&Y=6394482&zoom=8&bgLayer=basemap_2015_global&serial=&layers=1861-999999-1859&opacities=1-1-1&time=2016-08-01T00%253A00%253A00Z--2014-08-31T12%253A43%253A47Z%252F2020-07-04T00%253A00%253A00Z--2016-10-04T12%253A43%253A47Z'
+          '/?version=3&lang=fr&X=667917&Y=6394482&zoom=8&bgLayer=basemap_2015_global&serial=&layers=9999991861-999999-9999991859&opacities=1-1-1&time=2016-08-01T00%253A00%253A00Z--2014-08-31T12%253A43%253A47Z%252F2020-07-04T00%253A00%253A00Z--2016-10-04T12%253A43%253A47Z'
         )
         cy.get('[data-cy="myLayersButton"]').click()
         cy.get('[data-cy="myLayers"] input.lux-time-datepicker')
@@ -27,7 +27,7 @@ describe('Permalink/State persistor - Layers', () => {
     describe('When updating layer time with datepicker widget with value mode', () => {
       it('updates the layer time (date start) in the url', () => {
         cy.visit(
-          '?version=3&lang=fr&layers=1859&opacities=1&time=2014-09-14T00%253A00%253A00Z'
+          '?version=3&lang=fr&layers=9999991859&opacities=1&time=2014-09-14T00%253A00%253A00Z'
         )
         cy.get('[data-cy="myLayersButton"]').click()
         cy.get('[data-cy="myLayers"] input.lux-time-datepicker')
@@ -41,7 +41,7 @@ describe('Permalink/State persistor - Layers', () => {
 
       it('does not have the date end datepicker', () => {
         cy.visit(
-          '?version=3&lang=fr&layers=1859&opacities=1&time=2014-09-14T00%253A00%253A00Z'
+          '?version=3&lang=fr&layers=9999991859&opacities=1&time=2014-09-14T00%253A00%253A00Z'
         )
         cy.get('[data-cy="myLayersButton"]').click()
         cy.get('[data-cy="myLayers"] input.lux-time-datepicker')
@@ -89,7 +89,7 @@ describe('Permalink/State persistor - Layers', () => {
     describe('When updating layer time with slider widget with value mode', () => {
       it('increases the layer time (date start) in the url', () => {
         cy.visit(
-          '/?version=3&lang=fr&layers=1861&time=2019-01-01T00%253A00%253A00Z%252F'
+          '/?version=3&lang=fr&layers=9999991861&time=2019-01-01T00%253A00%253A00Z%252F'
         )
         cy.get('[data-cy="myLayersButton"]').click()
         cy.get('[data-cy="myLayers"] .lux-slidebar-thumb')
@@ -100,7 +100,7 @@ describe('Permalink/State persistor - Layers', () => {
 
       it('decreases the layer time (date start) in the url', () => {
         cy.visit(
-          '/?version=3&lang=fr&layers=1861&time=2019-01-01T00%253A00%253A00Z%252F'
+          '/?version=3&lang=fr&layers=9999991861&time=2019-01-01T00%253A00%253A00Z%252F'
         )
         cy.get('[data-cy="myLayersButton"]').click()
         cy.get('[data-cy="myLayers"] .lux-slidebar-thumb')
@@ -115,7 +115,7 @@ describe('Permalink/State persistor - Layers', () => {
     describe('When updating layer time with slider widget with range mode', () => {
       it('increases the layer time (date start) in the url', () => {
         cy.visit(
-          '/?version=3&lang=fr&layers=1858&time=2015-08-31T12%253A43%253A47Z%252F2019-05-01T12%253A43%253A47Z'
+          '/?version=3&lang=fr&layers=9999991858&time=2015-08-31T12%253A43%253A47Z%252F2019-05-01T12%253A43%253A47Z'
         )
         cy.get('[data-cy="myLayersButton"]').click()
         cy.get('[data-cy="myLayers"] .lux-slidebar-thumb')
@@ -128,7 +128,7 @@ describe('Permalink/State persistor - Layers', () => {
 
       it('decreases the layer time (date start) in the url', () => {
         cy.visit(
-          '/?version=3&lang=fr&layers=1858&time=2015-08-31T12%253A43%253A47Z%252F2019-05-01T12%253A43%253A47Z'
+          '/?version=3&lang=fr&layers=9999991858&time=2015-08-31T12%253A43%253A47Z%252F2019-05-01T12%253A43%253A47Z'
         )
         cy.get('[data-cy="myLayersButton"]').click()
         cy.get('[data-cy="myLayers"] .lux-slidebar-thumb')
@@ -142,7 +142,7 @@ describe('Permalink/State persistor - Layers', () => {
 
       it('increases the layer time (date end) in the url', () => {
         cy.visit(
-          '/?version=3&lang=fr&layers=1858&time=2015-08-31T12%253A43%253A47Z%252F2019-05-01T12%253A43%253A47Z'
+          '/?version=3&lang=fr&layers=9999991858&time=2015-08-31T12%253A43%253A47Z%252F2019-05-01T12%253A43%253A47Z'
         )
         cy.get('[data-cy="myLayersButton"]').click()
         cy.get('[data-cy="myLayers"] .lux-slidebar-thumb')
@@ -155,7 +155,7 @@ describe('Permalink/State persistor - Layers', () => {
 
       it('decreases the layer time (date end) in the url', () => {
         cy.visit(
-          '/?version=3&lang=fr&layers=1858&time=2015-08-31T12%253A43%253A47Z%252F2019-05-01T12%253A43%253A47Z'
+          '/?version=3&lang=fr&layers=9999991858&time=2015-08-31T12%253A43%253A47Z%252F2019-05-01T12%253A43%253A47Z'
         )
         cy.get('[data-cy="myLayersButton"]').click()
         cy.get('[data-cy="myLayers"] .lux-slidebar-thumb')

diff --git a/package.json b/package.json
@@ -15,8 +15,8 @@
     "test:unit": "vitest --environment jsdom --root .",
     "test:unit:ci": "vitest run --environment jsdom --coverage",
     "test:e2e": "INSTRUMENT_COVERAGE=true start-server-and-test preview :4173 'cypress open --e2e'",
-    "test:e2e:ci": "INSTRUMENT_COVERAGE=true start-server-and-test 'VITE_USE_PROXYURL=false vite dev --port 4173' :4173 'cypress run --e2e'",
-    "test:e2e:dev": "INSTRUMENT_COVERAGE=true start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
+    "test:e2e:ci": "INSTRUMENT_COVERAGE=true start-server-and-test 'VITE_USE_PROXYURL=false vite dev --port 4173' :4173 'cypress run --browser chrome --e2e'",
+    "test:e2e:dev": "INSTRUMENT_COVERAGE=true start-server-and-test 'vite dev --port 4173' :4173 'cypress open --browser chrome --e2e'",
     "coverage-report": "nyc report",
     "type-check:dev": "npm run type-check -- --watch",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",