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.

2 files changed, 246 insertions, 0 deletions

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>
+`;