Display late CR times appropriately

In keeping with Keolis' definition of "late", commuter trains are not considered late until they are more than 5 minutes past scheduled time. When that is the case, show the scheduled time struck through next to the predicted time.
mbta · Jan 14, 2020 · 75288a9 · 75288a9
1 parent ae91bb9
commit 75288a9
Show file tree

Hide file tree

Showing 11 changed files with 1,756 additions and 36 deletions.
diff --git a/apps/site/assets/css/_schedule-page.scss b/apps/site/assets/css/_schedule-page.scss
@@ -288,6 +288,12 @@
     margin-right: $base-spacing / 2;
     text-align: right;
     text-decoration: line-through;
+
+    &-future_stop {
+      @include media-breakpoint-only(xs) {
+        margin-right: 0;
+      }
+    }
   }
 }
 

diff --git a/apps/site/assets/ts/schedule/__tests__/TripDetailsTest.tsx b/apps/site/assets/ts/schedule/__tests__/TripDetailsTest.tsx
@@ -6,10 +6,12 @@ import { TripInfo } from "../components/__trips";
 import tripData from "./tripInfo.json";
 import crTripData from "./crTripInfo.json";
 import tripDataWithPredictions from "./tripInfoWithPredictions.json";
+import crTripDataWithDelays from "./crTripInfoWithDelays.json";
 
 const tripInfo: TripInfo = tripData as TripInfo;
 const crTripInfo: TripInfo = crTripData as TripInfo;
-const tripInfoWithPredictions = tripDataWithPredictions as TripInfo;
+const tripInfoWithPredictions: TripInfo = tripDataWithPredictions as TripInfo;
+const crTripInfoWithDelays: TripInfo = crTripDataWithDelays as TripInfo;
 
 const successState = {
   data: tripInfo,
@@ -29,6 +31,12 @@ const successStateWithPredictions = {
   error: false
 } as State;
 
+const crSuccessStateWithDelays = {
+  data: crTripInfoWithDelays,
+  isLoading: false,
+  error: false
+} as State;
+
 const errorState = {
   data: null,
   isLoading: false,
@@ -67,4 +75,12 @@ describe("TripDetails", () => {
     );
     expect(tree).toMatchSnapshot();
   });
+
+  it("displays both scheduled and predicted times for CR if there is a delay of more than 5 minutes", () => {
+    createReactRoot();
+    const tree = renderer.create(
+      <TripDetails state={crSuccessStateWithDelays} showFare={false} />
+    );
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/apps/site/assets/ts/schedule/__tests__/__snapshots__/TripDetailsTest.tsx.snap b/apps/site/assets/ts/schedule/__tests__/__snapshots__/TripDetailsTest.tsx.snap
@@ -1,5 +1,225 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`TripDetails displays both scheduled and predicted times for CR if there is a delay of more than 5 minutes 1`] = `
+<table
+  className="schedule-table__subtable"
+>
+  <thead>
+    <tr>
+      <td
+        colSpan={3}
+      >
+        <div
+          className="schedule-table__subtable-trip-info"
+        >
+          <div
+            className="schedule-table__subtable-trip-info-title u-small-caps u-bold"
+          >
+            Trip length
+          </div>
+          7
+           stops, 
+          56
+           minutes total
+        </div>
+        <div
+          className="schedule-table__subtable-trip-info"
+        >
+          <div
+            className="schedule-table__subtable-trip-info-title u-small-caps u-bold"
+          >
+            Fare
+          </div>
+          $12.25
+          <a
+            className="schedule-table__subtable-trip-info-link"
+            href="/fares/commuter_rail?destination=place-NEC-1851&origin=place-bbsta"
+          >
+            View fares
+          </a>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th
+        className="schedule-table__subtable-data"
+        scope="col"
+      >
+        Stops
+      </th>
+      <th
+        className="schedule-table__subtable-data schedule-table__subtable-data--right-adjusted"
+        scope="col"
+      >
+        Arrival
+      </th>
+    </tr>
+  </thead>
+  <tbody
+    className="schedule-table__subtable-tbody"
+  >
+    <tr
+      className="schedule-table__subtable-row"
+    >
+      <td
+        className="schedule-table__subtable-data"
+      >
+        <a
+          href="/stops/place-bbsta"
+        >
+          Back Bay
+        </a>
+      </td>
+      <td
+        className="schedule-table__subtable-data schedule-table__subtable-data--right-adjusted"
+      >
+        <span
+          className="schedule-table__time--delayed schedule-table__time--delayed-future_stop"
+        >
+          04:00 PM
+        </span>
+        <br
+          className="hidden-sm-up"
+        />
+        04:01 PM
+      </td>
+    </tr>
+    <tr
+      className="schedule-table__subtable-row"
+    >
+      <td
+        className="schedule-table__subtable-data"
+      >
+        <a
+          href="/stops/place-rugg"
+        >
+          Ruggles
+        </a>
+      </td>
+      <td
+        className="schedule-table__subtable-data schedule-table__subtable-data--right-adjusted"
+      >
+        04:04 PM
+      </td>
+    </tr>
+    <tr
+      className="schedule-table__subtable-row"
+    >
+      <td
+        className="schedule-table__subtable-data"
+      >
+        <a
+          href="/stops/place-NEC-2108"
+        >
+          Sharon
+        </a>
+      </td>
+      <td
+        className="schedule-table__subtable-data schedule-table__subtable-data--right-adjusted"
+      >
+        <span
+          className="schedule-table__time--delayed schedule-table__time--delayed-future_stop"
+        >
+          04:22 PM
+        </span>
+        <br
+          className="hidden-sm-up"
+        />
+        04:22 PM
+      </td>
+    </tr>
+    <tr
+      className="schedule-table__subtable-row"
+    >
+      <td
+        className="schedule-table__subtable-data"
+      >
+        <a
+          href="/stops/place-NEC-2040"
+        >
+          Mansfield
+        </a>
+      </td>
+      <td
+        className="schedule-table__subtable-data schedule-table__subtable-data--right-adjusted"
+      >
+        04:30 PM
+      </td>
+    </tr>
+    <tr
+      className="schedule-table__subtable-row"
+    >
+      <td
+        className="schedule-table__subtable-data"
+      >
+        <a
+          href="/stops/place-NEC-1969"
+        >
+          Attleboro
+        </a>
+      </td>
+      <td
+        className="schedule-table__subtable-data schedule-table__subtable-data--right-adjusted"
+      >
+        <span
+          className="schedule-table__time--delayed schedule-table__time--delayed-future_stop"
+        >
+          04:38 PM
+        </span>
+        <br
+          className="hidden-sm-up"
+        />
+        04:39 PM
+      </td>
+    </tr>
+    <tr
+      className="schedule-table__subtable-row"
+    >
+      <td
+        className="schedule-table__subtable-data"
+      >
+        <a
+          href="/stops/place-NEC-1919"
+        >
+          South Attleboro
+        </a>
+      </td>
+      <td
+        className="schedule-table__subtable-data schedule-table__subtable-data--right-adjusted"
+      >
+        04:48 PM
+      </td>
+    </tr>
+    <tr
+      className="schedule-table__subtable-row"
+    >
+      <td
+        className="schedule-table__subtable-data"
+      >
+        <a
+          href="/stops/place-NEC-1851"
+        >
+          Providence
+        </a>
+      </td>
+      <td
+        className="schedule-table__subtable-data schedule-table__subtable-data--right-adjusted"
+      >
+        <span
+          className="schedule-table__time--delayed schedule-table__time--delayed-future_stop"
+        >
+          04:58 PM
+        </span>
+        <br
+          className="hidden-sm-up"
+        />
+        04:57 PM
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
 exports[`TripDetails it renders an error if fetch failed 1`] = `
 <p>
   <em>

diff --git a/apps/site/assets/ts/schedule/__tests__/crTripInfo.json b/apps/site/assets/ts/schedule/__tests__/crTripInfo.json
@@ -1,8 +1,10 @@
 {
+  "route_type": 2,
   "vehicle_stop_name": "",
   "vehicle": null,
   "times": [
     {
+      "delay": null,
       "schedule": {
         "time": "02:30 PM",
         "stop_sequence": 1,
@@ -190,6 +192,7 @@
       "prediction": null
     },
     {
+      "delay": null,
       "schedule": {
         "time": "02:35 PM",
         "stop_sequence": 2,
@@ -308,6 +311,7 @@
       "prediction": null
     },
     {
+      "delay": null,
       "schedule": {
         "time": "02:38 PM",
         "stop_sequence": 3,
@@ -400,6 +404,7 @@
       "prediction": null
     },
     {
+      "delay": null,
       "schedule": {
         "time": "02:51 PM",
         "stop_sequence": 4,
@@ -470,6 +475,7 @@
       "prediction": null
     },
     {
+      "delay": null,
       "schedule": {
         "time": "02:57 PM",
         "stop_sequence": 5,
@@ -542,6 +548,7 @@
       "prediction": null
     },
     {
+      "delay": null,
       "schedule": {
         "time": "03:03 PM",
         "stop_sequence": 6,
@@ -611,6 +618,7 @@
       "prediction": null
     },
     {
+      "delay": null,
       "schedule": {
         "time": "03:11 PM",
         "stop_sequence": 7,
@@ -680,6 +688,7 @@
       "prediction": null
     },
     {
+      "delay": null,
       "schedule": {
         "time": "03:19 PM",
         "stop_sequence": 8,
@@ -749,6 +758,7 @@
       "prediction": null
     },
     {
+      "delay": null,
       "schedule": {
         "time": "03:29 PM",
         "stop_sequence": 9,
@@ -821,6 +831,7 @@
       "prediction": null
     },
     {
+      "delay": null,
       "schedule": {
         "time": "03:39 PM",
         "stop_sequence": 10,