From e38a7762455f8ac819eea58e63f2de7655441898 Mon Sep 17 00:00:00 2001
From: Cristen Blair Jones <cristenblair@gmail.com>
Date: Thu, 19 Dec 2019 11:37:33 -0500
Subject: [PATCH] fix commuter rail tooltip, add test set

---
 .../ts/schedule/__tests__/LineDiagramTest.tsx | 54 +++++++++++++++++++
 .../__snapshots__/LineDiagramTest.tsx.snap    | 48 ++++++++++++++++-
 .../ts/schedule/components/LineDiagram.tsx    |  4 ++
 3 files changed, 104 insertions(+), 2 deletions(-)

diff --git a/apps/site/assets/ts/schedule/__tests__/LineDiagramTest.tsx b/apps/site/assets/ts/schedule/__tests__/LineDiagramTest.tsx
index d9cef5e103..6aaee38469 100644
--- a/apps/site/assets/ts/schedule/__tests__/LineDiagramTest.tsx
+++ b/apps/site/assets/ts/schedule/__tests__/LineDiagramTest.tsx
@@ -68,6 +68,41 @@ export const lineDiagram = [
     },
     alerts: []
   },
+  {
+    stop_data: [{ type: "stop", branch: "Lowell" }],
+    route_stop: {
+      zone: "",
+      stop_features: [],
+      station_info: {},
+      route: {
+        type: 1,
+        name: "Orange Line",
+        long_name: "Orange Line",
+        id: "Orange",
+        direction_names: { "0": "Southbound", "1": "Northbound" },
+        direction_destinations: { "0": "Forest Hills", "1": "Oak Grove" },
+        description: "rapid_transit",
+        "custom_route?": false
+      },
+      name: "Tufts Medical Center",
+      "is_terminus?": false,
+      "is_beginning?": false,
+      id: "place-tufts",
+      connections: [
+        {
+          type: 3,
+          name: "SL1",
+          long_name: "Silver Line",
+          id: "741",
+          description: "rapid_transit",
+          "custom_route?": false
+        },
+      ],
+      closed_stop_info: null,
+      branch: null
+    },
+    alerts: []
+  },
   {
     stop_data: [{ type: "stop", branch: "Lowell" }],
     route_stop: {
@@ -519,4 +554,23 @@ describe("LineDiagram", () => {
       expect(Object.entries(props)).toContainEqual(["data-toggle", "tooltip"]);
     });
   });
+
+  it.each`
+    index | expectedNames
+    ${0}  | ${["Route 110"]}
+    ${1}  | ${["Silver Line SL1"]}
+    ${2}  | ${["Orange Line", "Green Line C", "Green Line E", "Commuter Rail"]}
+    ${3}  | ${["Route 62", "Route 67", "Route 76", "Route 79", "Route 84", "Route 350", "Route 351"]}
+  `(
+    "has appropriate tooltip content for stop $index",
+    ({ index, expectedNames }) => {
+      const wrapper = mount(<LineDiagram lineDiagram={lineDiagram} />);
+      const connections = wrapper
+        .find(".m-schedule-line-diagram__connections")
+        .at(index);
+
+      const names = connections.find("a").map(c => c.props().title);
+      expect(names).toEqual(expectedNames);
+    }
+  );
 });
diff --git a/apps/site/assets/ts/schedule/__tests__/__snapshots__/LineDiagramTest.tsx.snap b/apps/site/assets/ts/schedule/__tests__/__snapshots__/LineDiagramTest.tsx.snap
index 72f0e350ff..55f59b0173 100644
--- a/apps/site/assets/ts/schedule/__tests__/__snapshots__/LineDiagramTest.tsx.snap
+++ b/apps/site/assets/ts/schedule/__tests__/__snapshots__/LineDiagramTest.tsx.snap
@@ -49,6 +49,50 @@ Array [
       />
     </div>
   </div>,
+  <div
+    className="m-schedule-line-diagram__stop"
+  >
+    <div
+      className="m-schedule-line-diagram__card-left"
+    >
+      <div
+        className="m-schedule-line-diagram__stop-name"
+      >
+        <a
+          href="/stops/place-tufts"
+        >
+          <h4>
+            Tufts Medical Center
+          </h4>
+        </a>
+      </div>
+      <div
+        className="m-schedule-line-diagram__connections"
+      >
+        <a
+          data-animation="false"
+          data-original-title="Silver Line SL1"
+          data-placement="bottom"
+          data-selector="true"
+          data-toggle="tooltip"
+          data-trigger="focus"
+          href="/schedules/741/line"
+          title="Silver Line SL1"
+        >
+          <span
+            className="c-icon__bus-pill--small m-schedule-line-diagram__connection u-bg--silver-line"
+          >
+            SL1
+          </span>
+        </a>
+      </div>
+    </div>
+    <div>
+      <div
+        className="m-schedule-line-diagram__features"
+      />
+    </div>
+  </div>,
   <div
     className="m-schedule-line-diagram__stop"
   >
@@ -143,13 +187,13 @@ Array [
         </a>
         <a
           data-animation="false"
-          data-original-title="Fitchburg Line"
+          data-original-title="Commuter Rail"
           data-placement="bottom"
           data-selector="true"
           data-toggle="tooltip"
           data-trigger="focus"
           href="/schedules/CR-Fitchburg/line"
-          title="Fitchburg Line"
+          title="Commuter Rail"
         >
           <span
             className="m-schedule-line-diagram__connection"
diff --git a/apps/site/assets/ts/schedule/components/LineDiagram.tsx b/apps/site/assets/ts/schedule/components/LineDiagram.tsx
index 5dfc380052..924fdedfe5 100644
--- a/apps/site/assets/ts/schedule/components/LineDiagram.tsx
+++ b/apps/site/assets/ts/schedule/components/LineDiagram.tsx
@@ -52,6 +52,10 @@ const connectionName = (connection: Route): string => {
       : `Route ${connection.name}`;
   }
 
+  if (connection.type === 2) {
+    return "Commuter Rail";
+  }
+
   return connection.name;
 };