test: update UTs according to evols in layer item component

Geoportail-Luxembourg · Sep 6, 2023 · 0c338fe · 0c338fe
1 parent fc747d4
commit 0c338fe
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 29 deletions.
diff --git a/cypress/e2e/layers-selection.cy.ts b/cypress/e2e/layers-selection.cy.ts
@@ -22,7 +22,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="myLayers"] > li').should('have.length', 3)
+      cy.get('[data-cy="myLayers"] > ul > li').should('have.length', 2)
     })
 
     it('displays title with updated number of layers', () => {
@@ -40,7 +40,7 @@ describe('Catalogue', () => {
       cy.get('[data-cy="myLayers"]').find('button').eq(2).click()
       cy.get('[data-cy="myLayers"]')
         .find('button')
-        .eq(5)
+        .eq(4)
         .click()
         .should(() => {
           expect(localStorage.getItem('opacities')).to.eq('1-0')
@@ -49,7 +49,7 @@ describe('Catalogue', () => {
       cy.url().should('contains', 'opacities=1-0')
       cy.get('[data-cy="myLayers"]')
         .find('button')
-        .eq(5)
+        .eq(4)
         .should('have.class', 'fa-eye-slash')
     })
   })
@@ -72,7 +72,7 @@ describe('Catalogue', () => {
       })
 
       cy.get('[data-cy="myLayersButton"]').click()
-      cy.get('[data-cy="myLayers"] > li').should('have.length', 3)
+      cy.get('[data-cy="myLayers"] > ul > li').should('have.length', 2)
     })
   })
 })
@@ -104,6 +104,6 @@ describe('Remote layers', () => {
     cy.get(
       '[data-cy="layerLabel-WMS||http://wmts1.geoportail.lu/opendata/service||ortho_2001"]'
     ).click()
-    cy.get('[data-cy="myLayers"] > li').should('have.length', 2)
+    cy.get('[data-cy="myLayers"] > ul > li').should('have.length', 1)
   })
 })
diff --git a/cypress/e2e/permalink/layers.cy.ts b/cypress/e2e/permalink/layers.cy.ts
@@ -1,7 +1,7 @@
 describe('Permalink/State persistor - Layers', () => {
   describe('Restore layers from url', () => {
     describe('When layer opacities have values', () => {
-      it('updates the url with the right opacity', () => {
+      it('updates the input opacity with the right opacity', () => {
         cy.visit(
           '/?lang=lb&X=762744&Y=6414661&version=3&zoom=11&layers=346-354-269&opacities=0.5-1-0.7&bgLayer=orthogr_2013_global'
         )
@@ -32,5 +32,81 @@ 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&layers=1860-1858-1859&opacities=1-1-1&time=2019-08-01T00%253A00%253A00Z%252F--2014-08-31T12%253A43%253A47Z%252F2020-12-31T23%253A59%253A59Z--2014-10-14T00%253A00%253A00Z%252F2020-12-31T00%253A00%253A00Z'
+        )
+        cy.get('[data-cy="myLayersButton"]').click()
+        cy.get('[data-cy="myLayers"] input.lux-time-datepicker')
+          .eq(0)
+          .should('have.value', '2014-10-14')
+        cy.get('[data-cy="myLayers"] input.lux-time-datepicker')
+          .eq(1)
+          .should('have.value', '2020-12-31')
+        cy.get('[data-cy="myLayers"] input.lux-time-datepicker')
+          .eq(2)
+          .should('have.value', '2014-08-31')
+        cy.get('[data-cy="myLayers"] input.lux-time-slidebar')
+          .eq(0)
+          .should('have.value', '9')
+        cy.get('[data-cy="myLayers"] .lux-time-slider-start-date')
+          .eq(0)
+          .should('have.text', '8-2019')
+      })
+    })
+  })
+
+  describe('Save layers to url', () => {
+    describe('When updating layer time with datepicker widget', () => {
+      it('updates the layer time (date start) in the url', () => {
+        cy.visit(
+          '/?version=3&lang=fr&layers=1859&time=2014-10-14T00%253A00%253A00Z%252F2020-12-31T00%253A00%253A00Z'
+        )
+        cy.get('[data-cy="myLayersButton"]').click()
+        cy.get('[data-cy="myLayers"] input.lux-time-datepicker')
+          .eq(0)
+          .type('2014-09-02')
+        cy.get('[data-cy="myLayers"] input.lux-time-datepicker')
+          .eq(0)
+          .trigger('change')
+        cy.url().should(
+          'contains',
+          '&time=2014-09-02T00%253A00%253A00Z%252F2020-12-31T00%253A00%253A00Z'
+        )
+      })
+
+      it('updates the layer time (date end) in the url', () => {
+        cy.visit(
+          '/?version=3&lang=fr&layers=1859&time=2014-10-14T00%253A00%253A00Z%252F2020-12-31T00%253A00%253A00Z'
+        )
+        cy.get('[data-cy="myLayersButton"]').click()
+        cy.get('[data-cy="myLayers"] input.lux-time-datepicker')
+          .eq(1)
+          .type('2020-12-29')
+        cy.get('[data-cy="myLayers"] input.lux-time-datepicker')
+          .eq(1)
+          .trigger('change')
+        cy.url().should(
+          'contains',
+          '&time=2014-10-14T00%253A00%253A00Z%252F2020-12-29T00%253A00%253A00Z'
+        )
+      })
+    })
+
+    describe('When updating layer time with slider widget', () => {
+      it('updates the layer time (date start) in the url', () => {
+        cy.visit(
+          '/?version=3&lang=fr&layers=1860&time=2019-01-01T00%253A00%253A00Z%252F'
+        )
+        cy.get('[data-cy="myLayersButton"]').click()
+        cy.get('[data-cy="myLayers"] input.lux-time-slidebar').eq(0).type('2')
+        cy.get('[data-cy="myLayers"] input.lux-time-slidebar')
+          .eq(0)
+          .trigger('change')
+        cy.url().should('contains', '&time=2022-08-01T00%253A00%253A00Z%252F')
+      })
+    })
   })
 })
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -225,11 +225,11 @@
     @apply mr-1 min-w-[1.75rem] inline-block;
   }
 
-  .lux-time-slider-datepicker {
+  .lux-time-datepicker {
     @apply border-[#767676] border-[1px] pl-1;
   }
 
-  .lux-time-slider-slidebar {
+  .lux-time-slidebar {
     @apply mt-2 mb-2 ml-0 mr-0 w-full h-1 bg-[#d3e5d7] rounded-sm appearance-none cursor-pointer;
   }
 }

diff --git a/src/components/layer-manager/layer-item/layer-item.spec.ts b/src/components/layer-manager/layer-item/layer-item.spec.ts
@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 
 import { Layer } from '@/stores/map.store.model'
 import LayerItem from './layer-item.vue'
@@ -12,11 +12,10 @@ const layerMock = {
 } as Layer
 
 const onClickInfo = vi.fn()
-const onClickToggle = vi.fn()
 
 describe('LayerItem', () => {
   it('renders properly', () => {
-    const wrapper = shallowMount(LayerItem, {
+    const wrapper = mount(LayerItem, {
       props: {
         layer: layerMock,
         draggableClassName: 'classnamedragg',
@@ -35,7 +34,7 @@ describe('LayerItem', () => {
   })
 
   it('renders properly when is open', () => {
-    const wrapper = shallowMount(LayerItem, {
+    const wrapper = mount(LayerItem, {
       props: {
         layer: layerMock,
         draggableClassName: 'classnamedragg',
@@ -51,9 +50,9 @@ describe('LayerItem', () => {
   })
 
   describe('actions', () => {
-    const wrapper = shallowMount(LayerItem, {
+    const wrapper = mount(LayerItem, {
       global: {
-        mocks: { onClickInfo, onClickToggle },
+        mocks: { onClickInfo },
       },
       props: {
         layer: layerMock,
@@ -69,18 +68,18 @@ describe('LayerItem', () => {
       expect(onClickInfo).toBeCalled()
     })
 
-    it('triggers #onClickToggle', async () => {
+    it('triggers #clickToggle', async () => {
       await wrapper.findAll('button')[2].trigger('click')
-      expect(onClickToggle).toBeCalled()
+      expect(wrapper.emitted().clickToggle).toBeTruthy()
     })
 
-    it('emits #onClickRemove', async () => {
-      await wrapper.findAll('button')[4].trigger('click')
+    it('emits #clickRemove', async () => {
+      await wrapper.findAll('button')[3].trigger('click')
       expect(wrapper.emitted().clickRemove).toBeTruthy()
     })
 
     it('triggers #onToggleVisibility emits #changeOpacity', async () => {
-      await wrapper.findAll('button')[5].trigger('click')
+      await wrapper.findAll('button')[4].trigger('click')
       expect(wrapper.emitted().changeOpacity).toBeTruthy()
     })
 

diff --git a/src/components/layer-manager/layer-time/layer-time-datepicker.vue b/src/components/layer-manager/layer-time/layer-time-datepicker.vue
@@ -28,7 +28,7 @@ function onChange(event: Event) {
 
 <template>
   <input
-    class="lux-time-slider-datepicker"
+    class="lux-time-datepicker"
     type="date"
     :min="minValue"
     :max="maxValue"

diff --git a/src/components/layer-manager/layer-time/layer-time-slider.vue b/src/components/layer-manager/layer-time/layer-time-slider.vue
@@ -84,7 +84,7 @@ function onChange(event: Event) {
     <!-- Slider -->
     <div>
       <input
-        class="lux-time-slider-slidebar"
+        class="lux-time-slidebar"
         min="0"
         type="range"
         :max="sliderNbSteps - 1"

diff --git a/src/services/layer-metadata/layer-metadata.service.spec.ts b/src/services/layer-metadata/layer-metadata.service.spec.ts
@@ -1,3 +1,12 @@
+const useThemesMock = {
+  findById: vi.fn(id => (id === 268 ? themeNodeMock : undefined)),
+  findBgLayerById: vi.fn(id => (id === 556 ? bgNodeMock : undefined)),
+}
+
+vi.mock('@/composables/themes/themes.composable', () => ({
+  default: () => useThemesMock,
+}))
+
 import { ThemeNodeModel } from '@/composables/themes/themes.model'
 import { layerMetadataService } from './layer-metadata.service'
 import { remoteMetadataHelper } from './remote-metadata.helper'
@@ -43,14 +52,6 @@ const bgNodeMock: ThemeNodeModel = {
   opacity: 1,
 }
 
-const useThemesMock = {
-  findById: vi.fn(id => (id === 268 ? themeNodeMock : undefined)),
-  findBgLayerById: vi.fn(id => (id === 556 ? bgNodeMock : undefined)),
-}
-vi.mock('@/composables/themes/themes.composable', () => ({
-  default: () => useThemesMock,
-}))
-
 const metadataMock = {
   title: 'Title that will be ignored on internal layer',
   description: '',

diff --git a/src/services/state-persistor/state-persistor-layer.mapper.spec.ts b/src/services/state-persistor/state-persistor-layer.mapper.spec.ts
@@ -81,6 +81,8 @@ describe('StorageLayerMapper', () => {
           imageType: '',
           opacity: 1,
           previousOpacity: 1,
+          currentTimeMinValue: undefined,
+          currentTimeMaxValue: undefined,
         },
         {
           id: 360,
@@ -90,6 +92,8 @@ describe('StorageLayerMapper', () => {
           imageType: '',
           opacity: 1,
           previousOpacity: 1,
+          currentTimeMinValue: undefined,
+          currentTimeMaxValue: undefined,
         },
       ])
     })
@@ -105,6 +109,8 @@ describe('StorageLayerMapper', () => {
             imageType: '',
             opacity: 1,
             previousOpacity: 1,
+            currentTimeMinValue: undefined,
+            currentTimeMaxValue: undefined,
           },
           undefined,
           {
@@ -115,6 +121,8 @@ describe('StorageLayerMapper', () => {
             imageType: '',
             opacity: 1,
             previousOpacity: 1,
+            currentTimeMinValue: undefined,
+            currentTimeMaxValue: undefined,
           },
         ]
       )
@@ -130,6 +138,8 @@ describe('StorageLayerMapper', () => {
           imageType: '',
           opacity: 1,
           previousOpacity: 1,
+          currentTimeMinValue: undefined,
+          currentTimeMaxValue: undefined,
         },
         undefined,
       ])
@@ -150,6 +160,8 @@ describe('StorageLayerMapper', () => {
           opacity: 1,
           previousOpacity: 1,
           url: 'https://map.geoportail.lu/httpsproxy?url=www.mysuperserver.com%2Fmytiles',
+          currentTimeMinValue: undefined,
+          currentTimeMaxValue: undefined,
         },
       ])
     })