PB-424: Update cypress tests to account for changed element

geoadmin · Apr 12, 2024 · 5dd707c · 5dd707c
1 parent a8e988c
commit 5dd707c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/src/modules/map/components/toolbox/TimeSlider.vue b/src/modules/map/components/toolbox/TimeSlider.vue
@@ -304,10 +304,14 @@ function setYearToInputIfValid() {
                     <div class="px-2 border-end d-flex align-items-center">
                         <FontAwesomeIcon icon="grip-lines-vertical" />
                     </div>
-                    <div data-cy="time-slider-current-year" class="p-0 time-slider-bar-cursor-year">
-                        <input v-model="displayedYear" maxlength="4" class="time-slider-year-input" type="text" @input="setYearToInputIfValid">
-                        </input>
-                    </div>
+                    <input
+                        v-model="displayedYear"
+                        data-cy="time-slider-current-year"
+                        maxlength="4"
+                        class="time-slider-bar-cursor-year"
+                        type="text"
+                        @input="setYearToInputIfValid"
+                    />
                     <div class="px-2 border-start d-flex align-items-center">
                         <FontAwesomeIcon icon="grip-lines-vertical" />
                     </div>
@@ -466,7 +470,7 @@ $time-slider-color-has-data: color.adjust($primary, $lightness: 30%);
         text-align: center;
     }
 }
-.time-slider-year-input {
+.time-slider-bar-cursor-year {
     width: 100%;
     height: 100%;
     padding-left: 0;

diff --git a/tests/cypress/tests-e2e/timeSlider.cy.js b/tests/cypress/tests-e2e/timeSlider.cy.js
@@ -37,11 +37,15 @@ 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('contain', preSelectedYear)
+            cy.get('[data-cy="time-slider-current-year"]').should('have.value', preSelectedYear)
         })
         it('should change the year if the user drags the tooltip on the right with the mouse', () => {
-            moveSlider(200)
-            cy.get('[data-cy="time-slider-current-year"]').should('not.contain', preSelectedYear)
+            moveSlider(0)
+            cy.get('[data-cy="time-slider-current-year"]').should('not.have.value', preSelectedYear)
+
+            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')
         })
     })
 })