test: show jobs and vehicles correct

also test if job is hidden correctly

cypress/e2e/optimization.cy.js

@@ -49,16 +49,21 @@ describe('Optimization component', () => {
         '"skills":[1]}],' +
         '"jobProps":[{"id":1,"skills":[1],"service":3600,"delivery":[1],"pickup":[1]}]}}')
 
-      cy.get('.manage-jobs').should('be.visible')
-      cy.get('.hide-button').should('be.visible')
-      cy.get('.job-inputs').should('have.length', 1)
-
-      cy.get('.no-shadow').contains('Job 1')
-      cy.get('.no-shadow').contains('8.6884260, 49.419614')
-      cy.get('.no-shadow').contains('Deliveries')
-      cy.get('.no-shadow').contains('Pickups')
-      cy.get('.no-shadow').contains('Skills')
-      cy.get('.no-shadow').contains('Service time')
+      cy.get('[data-cy="manage-jobs"]').should('be.visible')
+      cy.get('[data-cy="hide-jobs"]').as('hide').should('be.visible')
+      cy.get('[data-cy="job-inputs"]').should('have.length', 1)
+
+      cy.get('[data-cy="job-list"]').as('jobs').should('be.visible')
+      cy.get('@jobs').contains('Job 1')
+      cy.get('@jobs').contains('8.6884260, 49.419614')
+      cy.get('@jobs').contains('Deliveries')
+      cy.get('@jobs').contains('Pickups')
+      cy.get('@jobs').contains('Skills')
+      cy.get('@jobs').contains('Service time')
+
+      //hide job correctly
+      cy.get('@hide').click()
+      cy.get('[data-cy="hidden-jobs"]').contains('Saved Jobs: 1')
     })
 
     it('shows vehicle correctly', () => {
@@ -70,14 +75,15 @@ describe('Optimization component', () => {
         '"skills":[1]}],' +
         '"jobProps":[{"id":1,"skills":[1],"service":3600,"delivery":[1],"pickup":[1]}]}}')
 
-      cy.get('.manage-jobs').should('be.visible')
-      cy.get('.vehicle-inputs').should('have.length', 1)
+      cy.get('[data-cy="manage-vehicles"]').should('be.visible')
+      cy.get('[data-cy="vehicle-inputs"]').should('have.length', 1)
 
-      cy.get('.no-shadow').contains('Vehicle 1')
-      cy.get('.no-shadow').contains('driving-car')
-      cy.get('.no-shadow').contains('Capacity')
-      cy.get('.no-shadow').contains('Skills')
-      cy.get('.no-shadow').contains('Time window')
+      cy.get('[data-cy="vehicle-list"]').as('vehicles').should('be.visible')
+      cy.get('@vehicles').contains('Vehicle 1')
+      cy.get('@vehicles').contains('driving-car')
+      cy.get('@vehicles').contains('Capacity')
+      cy.get('@vehicles').contains('Skills')
+      cy.get('@vehicles').contains('Time window')
     })
   })
 

src/fragments/forms/map-form/components/optimization/Optimization.vue

@@ -9,14 +9,14 @@
           {{ $t('optimization.jobs') }} (Max: 50)
           <v-tooltip bottom style="float: right">
             <template v-slot:activator="{ on }">
-              <v-btn class="manage-jobs"
+              <v-btn data-cy="manage-jobs" class="manage-jobs"
                      icon small @click="manageJobs">
                 <v-icon size="1.5rem" :title="$t('optimization.manage') + $t('optimization.jobs')" color="dark" :medium="$lowResolution">edit</v-icon>
               </v-btn>
             </template>
             {{ $t('optimization.manage') + $t('optimization.jobs') }}
           </v-tooltip>
-          <v-btn class="hide-button" icon small @click="jobsExpanded=!jobsExpanded">
+          <v-btn data-cy="hide-jobs" class="hide-button" icon small @click="jobsExpanded=!jobsExpanded">
             <v-icon v-if="jobsExpanded" color="info" :medium="$lowResolution">visibility_off</v-icon>
             <v-icon v-else color="info" :medium="$lowResolution">visibility</v-icon>
           </v-btn>
@@ -30,7 +30,7 @@
       <job-list class="content-list" v-if="mapViewData.hasRoutes()" :jobs="jobs" :map-view-data="mapViewData"
                 v-show="jobsExpanded"></job-list>
       <job-list class="content-list" v-else :jobs="jobs" v-show="jobsExpanded"></job-list>
-      <v-card class="content-list" v-if="!jobsExpanded" @click="jobsExpanded=!jobsExpanded">
+      <v-card data-cy="hidden-jobs" class="content-list" v-if="!jobsExpanded" @click="jobsExpanded=!jobsExpanded">
         <v-card-title>
           <v-icon style="padding: 0 5px 0 7px">work</v-icon>
           <b>{{ $t('optimization.savedJobs') + jobs.length }}</b>
@@ -41,7 +41,7 @@
         {{ $t('optimization.vehicles') }} (Max: 3)
         <v-tooltip bottom style="float: right">
           <template v-slot:activator="{ on }">
-            <v-btn class="manage-vehicles"
+            <v-btn data-cy="manage-vehicles" class="manage-vehicles"
                    icon small @click="manageVehicles">
               <v-icon size="1.5rem" :title="$t('optimization.manage') + $t('optimization.vehicles')" color="dark" :medium="$lowResolution">edit</v-icon>
             </v-btn>

src/fragments/forms/map-form/components/optimization/components/item-list/JobList.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="job-inputs">
-    <v-expansion-panel  class="no-shadow" :expand="true">
+  <div data-cy="job-inputs" class="job-inputs">
+    <v-expansion-panel  data-cy="job-list" class="no-shadow" :expand="true">
       <v-expansion-panel-content style="background: transparent;" v-for="(j, i) in jobs" :key="i">
         <div v-if="localMapViewData === null || !unassignedIds.includes(j.id)" slot="header" style="padding-bottom: 0;"><v-icon style="padding: 0 5px 0 0">work</v-icon><b>Job {{j.id}} - {{ j.location[0].toPrecision(8) }}, {{ j.location[1].toPrecision(8)}}</b></div>
         <div v-else slot="header" style="padding-bottom: 0"><v-icon style="padding: 0 5px 0 0">work</v-icon><b>Job {{j.id}} - {{ j.location[0].toPrecision(8) }}, {{ j.location[1].toPrecision(8)}}

src/fragments/forms/map-form/components/optimization/components/item-list/VehicleList.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="vehicle-inputs">
-    <v-expansion-panel  class="no-shadow" :value="vehicleExtended" :expand="true">
+  <div data-cy="vehicle-inputs" class="vehicle-inputs">
+    <v-expansion-panel data-cy="vehicle-list" class="no-shadow" :value="vehicleExtended" :expand="true">
       <v-expansion-panel-content style="background: transparent;" v-for="(v, i) in vehicles" :key="i">
         <div slot="header" style="padding-bottom: 0;"><v-icon :color="vehicleColors(v.id)" style="padding: 0 5px 0 0">{{vehicleIcon(v.profile)}}</v-icon><b>Vehicle {{v.id}} ({{v.profile}})</b></div>
       <v-card-text>