test: show optimization page correctly

cypress/e2e/optimization.cy.js

@@ -11,7 +11,7 @@ describe('Optimization component', () => {
         '"jobProps":[{"id":1,"skills":[1],"service":3600,"delivery":[1],"pickup":[1]}]}}')
 
       // shows the map view correctly
-      cy.get('.simple-place-search').should('not.exist')
+      cy.get('[data-cy="place-search"]').should('not.exist')
       cy.get('.view-on-ors').should('not.exist')
       cy.get('.v-snack__content')
       cy.get('.ors-toolbar').should('not.be.visible')
@@ -22,8 +22,13 @@ describe('Optimization component', () => {
       cy.get('.my-location-btn').should('be.visible')
 
       // shows the sidebar correctly
-      cy.get('.sidebar-header')
-      cy.get('.sidebar-content')
+      cy.get('[data-cy="sidebar-header"]')
+      cy.get('[data-cy="sidebar-content"]').should('be.visible')
+      cy.get('[data-cy="route-details"]').should('be.visible')
+      cy.get('[data-cy="job-heading"]').should('be.visible')
+      cy.get('[data-cy="job-inputs"]').should('be.visible')
+      cy.get('[data-cy="vehicle-heading"]').should('be.visible')
+      cy.get('[data-cy="vehicle-inputs"]').should('be.visible')
 
       // shows routes correctly
       cy.get('[data-cy=optimization-routes]').as('routes')
@@ -38,6 +43,9 @@ describe('Optimization component', () => {
 
       // shows buttons
       cy.get('[data-cy="manage-skills"]').should('be.visible')
+      cy.get('[data-cy="add-place-input"]').should('be.not.visible')
+      cy.get('[data-cy="round-trip"]').should('be.not.visible')
+      cy.get('[data-cy="route-importer"]').should('be.not.visible')
     })
 
     it('shows job correctly', () => {
@@ -175,6 +183,6 @@ describe('Optimization component', () => {
     cy.get('#app')
     cy.get('.app-content')
     cy.get('#map-view')
-    cy.get('.sidebar')
+    cy.get('[data-cy="sidebar"]')
   }
 })

src/fragments/forms/map-form/components/form-actions/FormActions.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="form-actions">
+  <div data-cy="form-actions" class="form-actions">
     <v-layout class="action-options-wrapper">
       <v-flex :class="{'high-resolution': $highResolution}" v-if="canAddPlaceInput && isEnabled('addPlaceInput')">
-        <map-form-btn @clicked="addPlaceInput" :icon="'add_location'" class="add-place-btn" :title="$t('formActions.addPlaceInput')">
+        <map-form-btn data-cy="add-place-input" @clicked="addPlaceInput" :icon="'add_location'" class="add-place-btn" :title="$t('formActions.addPlaceInput')">
         </map-form-btn>
       </v-flex>
       <v-flex :class="{'high-resolution': $highResolution}" v-if="$store.getters.mode === constants.modes.directions && isEnabled('clearPlaces')">
@@ -12,12 +12,12 @@
         <map-form-btn @clicked="reverseRoute" :icon="'repeat'" class="reverse-route-btn" :title="$t('formActions.reverseRoute')"></map-form-btn>
       </v-flex>
       <v-flex :class="{'high-resolution': $highResolution}" v-if="isEnabled('roundtrip')">
-        <map-form-btn :text="$t('formActions.roundTrip')" class="round-trip-btn" :title="$t('formActions.toggleRoundTrip')"
+        <map-form-btn data-cy="round-trip" :text="$t('formActions.roundTrip')" class="round-trip-btn" :title="$t('formActions.toggleRoundTrip')"
           @clicked="toggleRoundTrip" :icon="'settings_backup_restore'"
           :color="roundTripActive ? 'primary' : 'default'"></map-form-btn>
       </v-flex>
       <v-flex :class="{'high-resolution': $highResolution}" v-if="isEnabled('routeImporter')">
-        <route-importer class="route-importer" @contentUploaded="contentUploaded"></route-importer>
+        <route-importer data-cy="route-importer" class="route-importer" @contentUploaded="contentUploaded"></route-importer>
       </v-flex>
       <v-spacer></v-spacer>
     </v-layout>

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

@@ -3,9 +3,9 @@
     <v-form @submit.prevent style="background:white">
       <template>
         <template v-if="mapViewData">
-          <optimization-details v-if="mapViewData.hasRoutes()" :map-view-data="mapViewData"></optimization-details>
+          <optimization-details data-cy="route-details" v-if="mapViewData.hasRoutes()" :map-view-data="mapViewData"></optimization-details>
         </template>
-        <div class="optimization-heading" v-top-border:color="borderColor">
+        <div data-cy="job-heading" class="optimization-heading" v-top-border:color="borderColor">
           {{ $t('optimization.jobs') }} (Max: 50)
           <v-tooltip bottom style="float: right">
             <template v-slot:activator="{ on }">
@@ -37,7 +37,7 @@
         </v-card-title>
       </v-card>
 
-      <div class="optimization-heading">
+      <div data-cy="vehicle-heading" class="optimization-heading">
         {{ $t('optimization.vehicles') }} (Max: 3)
         <v-tooltip bottom style="float: right">
           <template v-slot:activator="{ on }">

src/fragments/forms/simple-place-search/SimplePlaceSearch.vue

@@ -1,5 +1,5 @@
 <template>
-  <box background="white" class="simple-place-search" :class="{'extra-low-resolution': $xlResolution}" :style="{height: height+ 'px'}">
+  <box data-cy="place-search" background="white" class="simple-place-search" :class="{'extra-low-resolution': $xlResolution}" :style="{height: height+ 'px'}">
     <v-layout row wrap>
       <v-flex xs2 sm2 md1>
         <v-badge overlap left v-model="showNewInfo" color="info">

src/fragments/sidebar/Sidebar.vue

@@ -11,9 +11,10 @@
       disable-resize-watcher
       :width="$mdAndUpResolution ? $store.getters.sidebarFullWidth : $store.getters.sidebarShrunkWidth"
       :permanent="$store.getters.leftSideBarPinned"
-      :class="{'auto-height': $lowResolution && !$store.getters.leftSideBarPinned, 'full-height': $store.getters.leftSideBarPinned}">
+      :class="{'auto-height': $lowResolution && !$store.getters.leftSideBarPinned, 'full-height': $store.getters.leftSideBarPinned}"
+      data-cy="sidebar">
 
-      <div class="sidebar-header" :style="{height: headerHeight}">
+      <div data-cy="sidebar-header" class="sidebar-header" :style="{height: headerHeight}">
         <v-layout row class="sidebar-header-top" >
           <v-flex xs6 md9>
             <div class="logo-container">
@@ -29,7 +30,7 @@
       </div>
 
       <!-- sidebar-content padding-bottom must be the same that is calculated in footer component height -->
-      <div class="sidebar-content" :style="{height: sidebarContentHeightFormula}">
+      <div data-cy="sidebar-content" class="sidebar-content" :style="{height: sidebarContentHeightFormula}">
         <div class="sidebar-content-form" :style="{'padding-bottom': $store.getters.footerHeight + 'px'}">
           <map-form v-if="$store.getters.mapReady" class="map-search"></map-form>
           <v-expansion-panel :value="null" v-if="!$highResolution">