Schedules | Finder Tool - Trip Details (#99)

mbta · Jul 19, 2019 · cdb5505 · cdb5505
1 parent 584b732
commit cdb5505
Show file tree

Hide file tree

Showing 17 changed files with 12,344 additions and 6,254 deletions.
diff --git a/apps/site/assets/css/_accordion-ui.scss b/apps/site/assets/css/_accordion-ui.scss
@@ -108,6 +108,12 @@
   font-family: FontAwesome;
 }
 
+.c-expandable-block__header-caret--white {
+  color: $white;
+  float: right;
+  font-family: FontAwesome;
+}
+
 .c-expandable-block__panel {
   border: 1px solid $gray-lightest;
   padding: $base-spacing $base-spacing / 2;

diff --git a/apps/site/assets/css/_modal-component.scss b/apps/site/assets/css/_modal-component.scss
@@ -36,6 +36,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
     width: 75%;
+    min-height: 50%;
   }
 
   @include media-breakpoint-up(lg) {
@@ -51,6 +52,7 @@
 
 .c-modal__close {
   margin: $base-spacing;
+  padding: $base-spacing / 4;
   position: absolute;
   right: 0;
   top: 0;

diff --git a/apps/site/assets/css/_schedule-page.scss b/apps/site/assets/css/_schedule-page.scss
@@ -288,6 +288,15 @@
   justify-content: space-between;
 }
 
+// Separate class instead of modifier to avoid complicated nth-child selector
+.schedule-table__row-selected {
+  background: $brand-primary;
+  border: 1px solid $brand-primary;
+  color: $white;
+  display: flex;
+  padding: $base-spacing / 2;
+}
+
 .schedule-table__row:nth-child(even) {
   background: $gray-bordered-background;
 }
@@ -305,6 +314,7 @@
 .schedule-table__time {
   font-variant-numeric: tabular-nums;
   text-align: right;
+  white-space: nowrap;
 
   &--delayed {
     font-weight: normal;
@@ -319,6 +329,7 @@
   display: flex;
   font-weight: bold;
   justify-content: space-between;
+  overflow: hidden;
 }
 
 .schedule-table__row-header-label {
@@ -371,6 +382,10 @@
   padding: $base-spacing / 2;
 }
 
+.schedule-finder__spinner-container {
+  height: 20 * $base-spacing;
+}
+
 .schedule-finder__spinner,
 .schedule-finder__spinner::before,
 .schedule-finder__spinner::after {
@@ -418,3 +433,58 @@
     box-shadow: 0 2.5em 0 0;
   }
 }
+
+.schedule-table__subtable {
+  width: 100%;
+}
+
+.schedule-table__subtable-trip-info {
+  display: flex;
+}
+
+.schedule-table__subtable-trip-info-title {
+  margin-right: $base-spacing;
+}
+
+.schedule-table__subtable-trip-info-link {
+  margin-left: $base-spacing;
+}
+
+.schedule-table__subtable-tr {
+  display: flex;
+  padding: $base-spacing / 2;
+}
+
+.schedule-table__subtable-container {
+  display: flex;
+}
+
+.schedule-table__subtable-data {
+  padding: $base-spacing / 4 0;
+
+  &--right-adjusted {
+    text-align: right;
+  }
+}
+
+.schedule-table__subtable-row {
+  border-top: 1px solid $gray-lightest;
+}
+
+.schedule-table__subtable-td {
+  border: 2px solid $brand-primary;
+  border-top: 0;
+  padding: $base-spacing / 2;
+  width: 100%;
+}
+
+.schedule-table__td--flex-end {
+  flex-grow: 1;
+  margin-right: $base-spacing / 2;
+}
+
+.schedule-table--empty {
+  font-weight: bold;
+  text-align: center;
+}
+
diff --git a/apps/site/assets/ts/schedule/__tests__/ScheduleFinderTest.tsx b/apps/site/assets/ts/schedule/__tests__/ScheduleFinderTest.tsx
@@ -3,6 +3,7 @@ import renderer from "react-test-renderer";
 import { mount } from "enzyme";
 import { createReactRoot } from "../../app/helpers/testUtils";
 import ScheduleFinder from "../components/ScheduleFinder";
+import ScheduleFinderAccordion from "../components/ScheduleFinderAccordion";
 import { EnhancedRoute, ServiceWithServiceDate } from "../../__v3api";
 import serviceData from "./serviceData.json";
 import { ServiceSchedule } from "../components/__schedule";
@@ -12,12 +13,12 @@ const services: ServiceWithServiceDate[] = [
     valid_days: [1, 2, 3, 4, 5],
     typicality: "typical_service",
     type: "weekday",
-    start_date: "2019-07-02",
-    service_date: "2019-07-09",
-    removed_dates_notes: { "2019-07-04": "Independence Day" },
-    removed_dates: ["2019-07-04"],
+    start_date: "2019-07-08",
+    service_date: "2019-07-16",
+    removed_dates_notes: {},
+    removed_dates: [],
     name: "Weekday",
-    id: "BUS319-O-Wdy-02",
+    id: "BUS319-J-Wdy-02",
     end_date: "2019-08-30",
     description: "Weekday schedule",
     added_dates_notes: {},
@@ -27,12 +28,12 @@ const services: ServiceWithServiceDate[] = [
     valid_days: [6],
     typicality: "typical_service",
     type: "saturday",
-    start_date: "2019-07-06",
-    service_date: "2019-07-09",
+    start_date: "2019-07-13",
+    service_date: "2019-07-16",
     removed_dates_notes: {},
     removed_dates: [],
     name: "Saturday",
-    id: "BUS319-P-Sa-02",
+    id: "BUS319-K-Sa-02",
     end_date: "2019-08-31",
     description: "Saturday schedule",
     added_dates_notes: {},
@@ -42,19 +43,19 @@ const services: ServiceWithServiceDate[] = [
     valid_days: [7],
     typicality: "typical_service",
     type: "sunday",
-    start_date: "2019-07-07",
-    service_date: "2019-07-09",
+    start_date: "2019-07-14",
+    service_date: "2019-07-16",
     removed_dates_notes: {},
     removed_dates: [],
     name: "Sunday",
-    id: "BUS319-Q-Su-02",
+    id: "BUS319-L-Su-02",
     end_date: "2019-08-25",
     description: "Sunday schedule",
     added_dates_notes: {},
     added_dates: []
   }
-] as ServiceWithServiceDate[];
-const serviceSchedules: ServiceSchedule = (serviceData as unknown) as ServiceSchedule;
+];
+const serviceSchedules: ServiceSchedule = serviceData as ServiceSchedule;
 // the enzyme test was done as one test because there was
 // an issue mounting it more than once due to the focus-trap
 // dependency that the Modal component depends on
@@ -314,3 +315,149 @@ it("modal renders route pill for silver line", () => {
   expect(busWrapper.exists(".schedule-finder__modal-route-pill")).toBeTruthy();
   expect(busWrapper.exists(".u-bg--silver-line")).toBeTruthy();
 });
+
+it("modal renders within ScheduleFinderAccordion", () => {
+  const subwayWrapper = mount(
+    <ScheduleFinderAccordion
+      stops={stops}
+      route={route}
+      directionId={0}
+      services={services}
+      serviceSchedules={serviceSchedules}
+    />
+  );
+
+  subwayWrapper.find("#header-schedule-finder-mobile").simulate("click");
+
+  subwayWrapper
+    .find("#sf_direction_select")
+    .simulate("change", { target: { value: "1" } });
+
+  subwayWrapper
+    .find("#sf_origin_select")
+    .simulate("change", { target: { value: "place-welln" } });
+
+  subwayWrapper.find("input").simulate("click");
+
+  expect(
+    subwayWrapper.exists(".schedule-finder__modal-route-pill")
+  ).toBeFalsy();
+
+  const busRoute: EnhancedRoute = { ...route, id: "741", name: "SL", type: 3 };
+  const busWrapper = mount(
+    <ScheduleFinder
+      stops={stops}
+      route={busRoute}
+      directionId={0}
+      services={services}
+      serviceSchedules={serviceSchedules}
+    />
+  );
+  busWrapper
+    .find("#sf_direction_select")
+    .simulate("change", { target: { value: "0" } });
+
+  busWrapper
+    .find("#sf_origin_select")
+    .simulate("change", { target: { value: "place-welln" } });
+
+  busWrapper.find("input").simulate("click");
+
+  expect(busWrapper.exists(".schedule-finder__modal-route-pill")).toBeTruthy();
+  expect(busWrapper.exists(".u-bg--silver-line")).toBeTruthy();
+});
+
+it("modal renders route pill for silver line", () => {
+  const subwayWrapper = mount(
+    <ScheduleFinder
+      stops={stops}
+      route={route}
+      directionId={0}
+      services={services}
+      serviceSchedules={serviceSchedules}
+    />
+  );
+  subwayWrapper
+    .find("#sf_direction_select")
+    .simulate("change", { target: { value: "1" } });
+
+  subwayWrapper
+    .find("#sf_origin_select")
+    .simulate("change", { target: { value: "place-welln" } });
+
+  subwayWrapper.find("input").simulate("click");
+
+  expect(
+    subwayWrapper.exists(".schedule-finder__modal-route-pill")
+  ).toBeFalsy();
+
+  const busRoute: EnhancedRoute = { ...route, id: "741", name: "SL", type: 3 };
+  const busWrapper = mount(
+    <ScheduleFinder
+      stops={stops}
+      route={busRoute}
+      directionId={0}
+      services={services}
+      serviceSchedules={serviceSchedules}
+    />
+  );
+  busWrapper
+    .find("#sf_direction_select")
+    .simulate("change", { target: { value: "0" } });
+
+  busWrapper
+    .find("#sf_origin_select")
+    .simulate("change", { target: { value: "place-welln" } });
+
+  busWrapper.find("input").simulate("click");
+
+  expect(busWrapper.exists(".schedule-finder__modal-route-pill")).toBeTruthy();
+  expect(busWrapper.exists(".u-bg--silver-line")).toBeTruthy();
+});
+it("modal renders route pill for silver line", () => {
+  const subwayWrapper = mount(
+    <ScheduleFinder
+      stops={stops}
+      route={route}
+      directionId={0}
+      services={services}
+      serviceSchedules={serviceSchedules}
+    />
+  );
+  subwayWrapper
+    .find("#sf_direction_select")
+    .simulate("change", { target: { value: "1" } });
+
+  subwayWrapper
+    .find("#sf_origin_select")
+    .simulate("change", { target: { value: "place-welln" } });
+
+  subwayWrapper.find("input").simulate("click");
+
+  expect(
+    subwayWrapper.exists(".schedule-finder__modal-route-pill")
+  ).toBeFalsy();
+
+  const busRoute: EnhancedRoute = { ...route, id: "741", name: "SL", type: 3 };
+  const busWrapper = mount(
+    <ScheduleFinder
+      stops={stops}
+      route={busRoute}
+      directionId={0}
+      services={services}
+      serviceSchedules={serviceSchedules}
+    />
+  );
+  busWrapper
+    .find("#sf_direction_select")
+    .simulate("change", { target: { value: "0" } });
+
+  busWrapper
+    .find("#sf_origin_select")
+    .simulate("change", { target: { value: "place-welln" } });
+
+  busWrapper.find("input").simulate("click");
+
+  expect(busWrapper.exists(".schedule-finder__modal-route-pill")).toBeTruthy();
+  expect(busWrapper.exists(".u-bg--silver-line")).toBeTruthy();
+});