PB-424: Add cypress test to check functionality of time slider text i…

…nput
geoadmin · Apr 12, 2024 · dbf8d93 · dbf8d93
1 parent 5dd707c
commit dbf8d93
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 10 deletions.
diff --git a/src/modules/map/components/toolbox/TimeSlider.vue b/src/modules/map/components/toolbox/TimeSlider.vue
@@ -164,7 +164,7 @@ onUnmounted(() => {
 })
 
 function setCurrentYearAndDispatchToStore(year) {
-    currentYear.value = parseInt(year)
+    currentYear.value = year
     store.dispatch('setPreviewYear', { year: currentYear.value, ...dispatcher })
 }
 
@@ -277,8 +277,8 @@ function setYearToInputIfValid() {
         currentYear.value != displayedYear.value &&
         allYears.value.includes(parseInt(displayedYear.value))
     ) {
-        currentYear.value = displayedYear.value
-        setCurrentYearAndDispatchToStore(displayedYear.value)
+        currentYear.value = parseInt(displayedYear.value)
+        setCurrentYearAndDispatchToStore(currentYear.value)
     }
 }
 </script>
@@ -306,7 +306,7 @@ function setYearToInputIfValid() {
                     </div>
                     <input
                         v-model="displayedYear"
-                        data-cy="time-slider-current-year"
+                        data-cy="time-slider-bar-cursor-year"
                         maxlength="4"
                         class="time-slider-bar-cursor-year"
                         type="text"
@@ -318,6 +318,7 @@ function setYearToInputIfValid() {
                 </div>
                 <div
                     ref="yearCursorArrow"
+                    data-cy="time-slider-bar-cursor-arrow"
                     class="time-slider-bar-cursor-arrow"
                     :style="cursorArrowPosition"
                 />

diff --git a/tests/cypress/tests-e2e/timeSlider.cy.js b/tests/cypress/tests-e2e/timeSlider.cy.js
@@ -29,6 +29,9 @@ describe('Testing the time slider', () => {
             })
             cy.get('[data-cy="times-slider-cursor"]').trigger('mouseup', { force: true })
         }
+        function extractDecimal(string) {
+            return parseInt(string.match(/[\d.]+/g)[0])
+        }
         const preSelectedYear = 2019
         beforeEach(() => {
             cy.goToMapView({
@@ -37,15 +40,58 @@ describe('Testing the time slider', () => {
             cy.get('[data-cy="time-slider-button"]').click()
         })
         it('should have the preselected year correctly set', () => {
-            cy.get('[data-cy="time-slider-current-year"]').should('have.value', preSelectedYear)
+            cy.get('[data-cy="time-slider-bar-cursor-year"]').should('have.value', preSelectedYear)
         })
-        it('should change the year if the user drags the tooltip on the right with the mouse', () => {
+        it('should move the timeslider with mouse drag and text input', () => {
+            cy.log('the year changes if the user drags the tooltip on the left with the mouse')
             moveSlider(0)
-            cy.get('[data-cy="time-slider-current-year"]').should('not.have.value', preSelectedYear)
+            cy.get('[data-cy="time-slider-bar-cursor-year"]').should(
+                'not.have.value',
+                preSelectedYear
+            )
+
+            cy.log('Check time slider year cursor text input')
+            cy.get('[data-cy="time-slider-bar-cursor-arrow"]')
+                .invoke('attr', 'style')
+                .then(($barCursorPosition) => {
+                    cy.log($barCursorPosition)
+
+                    cy.log('Time slider does not move with non number string')
+                    cy.get('[data-cy="time-slider-bar-cursor-year"]').clear()
+                    cy.get('[data-cy="time-slider-bar-cursor-year"]').type('asdfghjkl')
+                    cy.get('[data-cy="time-slider-bar-cursor-arrow"]')
+                        .invoke('attr', 'style')
+                        .should('eq', $barCursorPosition)
+
+                    cy.log('Time slider allows only four characters')
+                    cy.get('[data-cy="time-slider-bar-cursor-year"]').should('have.value', 'asdf')
+
+                    cy.log('Time slider does not move with out of bound year')
+                    cy.get('[data-cy="time-slider-bar-cursor-year"]').clear()
+                    cy.get('[data-cy="time-slider-bar-cursor-year"]').type('1191')
+                    cy.get('[data-cy="time-slider-bar-cursor-arrow"]')
+                        .invoke('attr', 'style')
+                        .should('eq', $barCursorPosition)
+                    cy.get('[data-cy="time-slider-bar-cursor-year"]').type('2525')
+                    cy.get('[data-cy="time-slider-bar-cursor-arrow"]')
+                        .invoke('attr', 'style')
+                        .should('eq', $barCursorPosition)
+
+                    cy.log('Time slider does not move with incomplete year')
+                    cy.get('[data-cy="time-slider-bar-cursor-year"]').clear()
+                    cy.get('[data-cy="time-slider-bar-cursor-year"]').type('200')
+                    cy.get('[data-cy="time-slider-bar-cursor-arrow"]')
+                        .invoke('attr', 'style')
+                        .should('eq', $barCursorPosition)
 
-            cy.log('type slider should be able to be moved by typing in valid year')
-            cy.get('[data-cy="time-slider-current-year"]').clear()
-            cy.get('[data-cy="time-slider-current-year"]').type('2021')
+                    cy.log('Time slider Bar moves when valid year entered')
+                    cy.get('[data-cy="time-slider-bar-cursor-year"]').clear()
+                    cy.get('[data-cy="time-slider-bar-cursor-year"]').type('2000')
+                    cy.get('[data-cy="time-slider-bar-cursor-arrow"]')
+                        .invoke('attr', 'style')
+                        .then(extractDecimal)
+                        .should('gt', extractDecimal($barCursorPosition))
+                })
         })
     })
 })