Refs #5437 @0.5h; Show country name instead of city in the journeys editor

When the organisation has the "long_distance_routes" features.
Mind the `StopArea#country_name` method which is pending until we merge
the branch which adds the countries support.

5 files changed, 267 insertions, 11 deletions

diff --git a/app/controllers/vehicle_journeys_controller.rb b/app/controllers/vehicle_journeys_controller.rb
index c03db0c7f..887131557 100644
--- a/app/controllers/vehicle_journeys_controller.rb
+++ b/app/controllers/vehicle_journeys_controller.rb
@@ -69,6 +69,7 @@ class VehicleJourneysController < ChouetteController
             :latitude => sp.stop_area.try(:latitude),
             :long_lat_type => sp.stop_area.try(:long_lat_type),
             :country_code => sp.stop_area.try(:country_code),
+            :country_name => sp.stop_area.try(:country_name),
             :street_name => sp.stop_area.try(:street_name)
           }
         end
diff --git a/app/javascript/vehicle_journeys/components/VehicleJourneys.js b/app/javascript/vehicle_journeys/components/VehicleJourneys.js
index 0cac0344c..0b2029dcb 100644
--- a/app/javascript/vehicle_journeys/components/VehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/components/VehicleJourneys.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import _ from 'lodash'
 import VehicleJourney from './VehicleJourney'
 
@@ -6,7 +7,7 @@ import VehicleJourney from './VehicleJourney'
 export default class VehicleJourneys extends Component {
   constructor(props){
     super(props)
-    this.previousCity = undefined
+    this.previousBreakpoint = undefined
   }
   componentDidMount() {
     this.props.onLoadFirstPage(this.props.filters)
@@ -59,16 +60,19 @@ export default class VehicleJourneys extends Component {
     }
   }
 
-  cityNameChecker(sp) {
-    let bool = false
-    if(sp.city_name != this.previousCity){
-      bool = true
-      this.previousCity = sp.city_name
+  stopPointHeader(sp) {
+    let showHeadline = false
+    let headline = ""
+    let attribute_to_check = this.hasFeature('long_distance_routes') ? "country_code" : "city_name"
+    if(sp[attribute_to_check] != this.previousBreakpoint){
+      showHeadline = true
+      headline = this.hasFeature('long_distance_routes') ? sp.country_name : sp.city_name
+      this.previousBreakpoint = sp[attribute_to_check]
     }
     return (
       <div
-        className={(bool) ? 'headlined' : ''}
-        data-headline={(bool) ? sp.city_name : ''}
+        className={(showHeadline) ? 'headlined' : ''}
+        data-headline={headline}
         title={sp.city_name + ' (' + sp.zip_code +')'}
       >
         <span><span>{sp.name}</span></span>
@@ -77,7 +81,7 @@ export default class VehicleJourneys extends Component {
   }
 
   render() {
-    this.previousCity = undefined
+    this.previousBreakpoint = undefined
 
     if(this.props.status.isFetching == true) {
       return (
@@ -124,7 +128,7 @@ export default class VehicleJourneys extends Component {
                 {this.props.stopPointsList.map((sp, i) =>{
                   return (
                     <div key={i} className='td'>
-                      {this.cityNameChecker(sp)}
+                      {this.stopPointHeader(sp)}
                     </div>
                   )
                 })}
diff --git a/app/models/chouette/stop_area.rb b/app/models/chouette/stop_area.rb
index 4f1359ff8..f510ee6e5 100644
--- a/app/models/chouette/stop_area.rb
+++ b/app/models/chouette/stop_area.rb
@@ -355,5 +355,10 @@ module Chouette
     def deactivate!
       update_attribute :deleted_at, Time.now
     end
+
+    def country_name
+      # XXX
+      country_code
+    end
   end
 end
diff --git a/spec/javascript/vehicle_journeys/components/VehicleJourneys_spec.js b/spec/javascript/vehicle_journeys/components/VehicleJourneys_spec.js
new file mode 100644
index 000000000..17e9579d2
--- /dev/null
+++ b/spec/javascript/vehicle_journeys/components/VehicleJourneys_spec.js
@@ -0,0 +1,77 @@
+import React, { Component } from 'react'
+import VehicleJourneys from '../../../../app/javascript/vehicle_journeys/components/VehicleJourneys'
+import renderer from 'react-test-renderer'
+
+describe('stopPointHeader', () => {
+  set('features', () => {
+    return {}
+  })
+  set('component', () => {
+    let props = {
+      status: {},
+      filters: {
+        permissions: {},
+        features: features
+      },
+      onLoadFirstPage: ()=>{},
+      onUpdateTime: ()=>{},
+      onSelectVehicleJourney: ()=>{},
+      stopPointsList: [stop_point, same_city_stop_point, other_country_stop_point],
+      vehicleJourneys: []
+    }
+    let list = renderer.create(
+      <VehicleJourneys
+        status={props.status}
+        filters={props.filters}
+        onLoadFirstPage={props.onLoadFirstPage}
+        onUpdateTime={props.onUpdateTime}
+        onSelectVehicleJourney={props.onSelectVehicleJourney}
+        stopPointsList={props.stopPointsList}
+        vehicleJourneys={props.vehicleJourneys}
+      />
+    ).toJSON()
+
+    return list
+  })
+
+  set('stop_point', () => {
+    return {
+      name: "Stop point",
+      city_name: "City Name",
+      zip_code: "12345",
+      country_code: "FR",
+      country_name: "france"
+    }
+  })
+
+  set('same_city_stop_point', () => {
+    return {
+      name: "Antother stop point",
+      city_name: stop_point.city_name,
+      zip_code: stop_point.zip_code,
+      country_code: stop_point.country_code,
+      country_name: stop_point.country_name
+    }
+  })
+
+  set('other_country_stop_point', () => {
+    return {
+      name: "Antother stop point",
+      city_name: "New York",
+      zip_code: "232323",
+      country_code: "US",
+      country_name: "USA"
+    }
+  })
+  it('should display the city name', () => {
+    expect(component).toMatchSnapshot()
+  })
+  context('with the "long_distance_routes" feature', () => {
+    set('features', () => {
+      return { long_distance_routes: true }
+    })
+    it('should display the country name', () => {
+      expect(component).toMatchSnapshot()
+    })
+  })
+})
diff --git a/spec/javascript/vehicle_journeys/components/__snapshots__/VehicleJourneys_spec.js.snap b/spec/javascript/vehicle_journeys/components/__snapshots__/VehicleJourneys_spec.js.snap
new file mode 100644
index 000000000..0af57e586
--- /dev/null
+++ b/spec/javascript/vehicle_journeys/components/__snapshots__/VehicleJourneys_spec.js.snap
@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`stopPointHeader should display the city name 1`] = `
+<div
+  className="row"
+>
+  <div
+    className="col-lg-12"
+  >
+    <div
+      className="table table-2entries mt-sm mb-sm no_result"
+    >
+      <div
+        className="t2e-head w20"
+      >
+        <div
+          className="th"
+        >
+          <div
+            className="strong mb-xs"
+          >
+            ID course
+          </div>
+          <div>
+            ID mission
+          </div>
+          <div>
+            Calendriers
+          </div>
+        </div>
+        <div
+          className="td"
+        >
+          <div
+            className="headlined"
+            data-headline="City Name"
+            title="City Name (12345)"
+          >
+            <span>
+              <span>
+                Stop point
+              </span>
+            </span>
+          </div>
+        </div>
+        <div
+          className="td"
+        >
+          <div
+            className=""
+            data-headline=""
+            title="City Name (12345)"
+          >
+            <span>
+              <span>
+                Antother stop point
+              </span>
+            </span>
+          </div>
+        </div>
+        <div
+          className="td"
+        >
+          <div
+            className="headlined"
+            data-headline="New York"
+            title="New York (232323)"
+          >
+            <span>
+              <span>
+                Antother stop point
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        className="t2e-item-list w80"
+      >
+        <div />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`stopPointHeader with the "long_distance_routes" feature should display the country name 1`] = `
+<div
+  className="row"
+>
+  <div
+    className="col-lg-12"
+  >
+    <div
+      className="table table-2entries mt-sm mb-sm no_result"
+    >
+      <div
+        className="t2e-head w20"
+      >
+        <div
+          className="th"
+        >
+          <div
+            className="strong mb-xs"
+          >
+            ID course
+          </div>
+          <div>
+            ID mission
+          </div>
+          <div>
+            Calendriers
+          </div>
+        </div>
+        <div
+          className="td"
+        >
+          <div
+            className="headlined"
+            data-headline="france"
+            title="City Name (12345)"
+          >
+            <span>
+              <span>
+                Stop point
+              </span>
+            </span>
+          </div>
+        </div>
+        <div
+          className="td"
+        >
+          <div
+            className=""
+            data-headline=""
+            title="City Name (12345)"
+          >
+            <span>
+              <span>
+                Antother stop point
+              </span>
+            </span>
+          </div>
+        </div>
+        <div
+          className="td"
+        >
+          <div
+            className="headlined"
+            data-headline="USA"
+            title="New York (232323)"
+          >
+            <span>
+              <span>
+                Antother stop point
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        className="t2e-item-list w80"
+      >
+        <div />
+      </div>
+    </div>
+  </div>
+</div>
+`;