Gql mock server

.github/workflows/codespell.yml

@@ -15,4 +15,4 @@ jobs:
           # skip git, yarn, pixel test script and HAR file, and all i18n resources.
           # Also, the a11y test file has a false positive and the ignore list does not work
           # see https://github.com/opentripplanner/otp-react-redux/pull/436/checks?check_run_id=3369380014
-          skip: ./.git,yarn.lock,./a11y/a11y.test.js,./a11y/mocks,./percy/percy.test.js,./percy/mock.har,./i18n,./__tests__/mocks
+          skip: ./.git,yarn.lock,./a11y/a11y.test.js,./a11y/mocks,./percy/percy.test.js,./percy/mock.har,./i18n,./__tests__/mocks,otpSchema.json,./percy/mocks/*.json

lib/actions/api.js

@@ -494,7 +494,7 @@ export function findStopTimesForStop(params) {
     const { date, stopId, ...otherParams } = params
     let datePath = ''
     if (date) {
-      const dateWithoutDashes = date.replace('-', '')
+      const dateWithoutDashes = date.replace(/-/g, '')
       datePath = `/${dateWithoutDashes}`
     }
 

package.json

@@ -18,7 +18,8 @@
     "semantic-release": "semantic-release",
     "start": "craco start",
     "percy-serve": "serve",
-    "percy-har-express": "har-express"
+    "percy-har-express": "har-express",
+    "percy-combined-mock-server": "node ./percy/mock-server.js"
   },
   "standard": {
     "parser": "babel-eslint"
@@ -50,8 +51,8 @@
     "@opentripplanner/location-icon": "^1.4.1",
     "@opentripplanner/map-popup": "2.0.7-alpha.1",
     "@opentripplanner/otp2-tile-overlay": "1.0.7-alpha.2",
-    "@opentripplanner/printable-itinerary": "2.0.10-alpha.4",
     "@opentripplanner/park-and-ride-overlay": "^2.0.6",
+    "@opentripplanner/printable-itinerary": "2.0.10-alpha.4",
     "@opentripplanner/route-viewer-overlay": "^2.0.14",
     "@opentripplanner/stop-viewer-overlay": "^2.0.7",
     "@opentripplanner/stops-overlay": "^5.1.2",
@@ -131,6 +132,7 @@
     "@babel/plugin-transform-runtime": "^7.15.0",
     "@babel/preset-typescript": "^7.15.0",
     "@craco/craco": "^6.3.0",
+    "@graphql-tools/schema": "^10.0.0",
     "@jackwilsdon/craco-use-babelrc": "^1.0.0",
     "@opentripplanner/scripts": "^1.2.0",
     "@opentripplanner/types": "^6.1.1",

percy/README.md

@@ -12,10 +12,11 @@ PERCY_OTP_CONFIG_OVERRIDE=<path-to-yml> npx percy exec -- npx jest percy/percy.t
 ## Mock OTP Server and HAR file
 
 Percy tests are rely on a mock OTP server that returns preset responses to given URLs.
-The mock server is powered by [har-express](https://github.com/toutpt/har-express).
+The mock server is powered by an express.js server, which forwards REST requests to a HAR server and handles GraphQL requests with a GraphQL server.
 
-The mock server uses a [HAR (HTTP Archive) file](https://en.wikipedia.org/wiki/HAR_(file_format)),
-`mock.har`, as input.
+The HAR server uses a [HAR (HTTP Archive) file](https://en.wikipedia.org/wiki/HAR_(file_format)),
+`mock.har`, as input. The GraphQL server uses high level resolvers for each request type, processes some important arguments, and then returns 
+objects from static JSON files sourced from real OTP queries. 
 
 The HAR file is checked in this repo and contains a predefined lists of web queries and their corresponding responses.
 We use these predefined responses, which are snapshots of responses from a live OTP server,
@@ -24,22 +25,29 @@ This avoids failed screenshot comparisons caused by external factors such as tra
 
 At this time, only the OTP server is mocked. The same `mock.har` file is (re)used for all the UI tests.
 
-## Duplication of responses in `mock.har`
+In all cases, `mock.har` needs to contain the mock responses for all REST queries the UI is expected to make,
+or the screenshot comparison will fail
 
-You will notice that `mock.har` contains a number of repeated or duplicate query/response sets.
-The position of these queries are also noted in the test script.
-This is because har-express only compares the URL of the request (including query parameters),
-but ignores the request body and headers completely. For GraphQL queries especially, the URL is always `http://localhost:9999/otp2/routers/default/graphql`, but the GraphQL content sent by the UI is ignored.
+The GraphQL requests are handled by the GraphQL.js library, which uses a schema from OTP in `otpSchema.json`. 
+This file comes from the introspection query against an OTP GraphQL server. 
+GraphQL queries are handled by resolvers in `graphql-mocks.js`, which contains a standard GraphQL handler provided by the GraphQL library. 
+Objects for the various queries are provided in the `mocks` folder. 
 
-When a given URL is sent to har-express again, har-express will work in a **cycle**
-and return the response for that URL that follows the response previously given for that URL.
-When all the responses to a URL in the HAR file have been exhausted, the first one is sent again.
+Some gotchas experienced while setting up these mocks:
+- The frontend expects the server to return the correct stop ID when it sends a request for stop information. That means that if you send a request for stop ID X, and the server returns data for stop ID Y, the frontend will not work correctly. For the purposes of a screenshot test it may not matter, but for OTP-RR, the ID needs to match. I solved this by adding a handler that checks the `id` argument passed with the request, and returns one of two mocks depending on the ID.
+- When getting data from the mocks, the easiest way is to look at the request OTP-RR makes against a real server and copy the response into the mock JSON file. However, when items in the query are renamed, e.g. `id: gtfsId`, you need to rename those back to the original name for the mock, otherwise the shape of the data won't match the schema. You will be warned about this in the logs when the query is made, though, so pay special attention to those to figure out what needs to be corrected. 
 
-This feature or bug is advantageous because it forces us to keep track of **all** expected web requests
-made by the OTP-RR UI in `mock.har`, in the order they are made:
-- If a web request is introduced/removed,
-  it will disrupt the order of the responses sent by the mock server.
-- If the UI makes unnecessary web requests, those requests still have to be included in `mock.har`.
+There is also another HAR file and mock server used for the geocoder, this one without an express server sitting in front.
+
+## Running and debugging the Percy tests
+You can run the Percy tests locally with this command: 
+```OTP_RR_UI_MODE=normal npx percy exec -- npx jest percy/percy.test.js```
+or this for calltaker:
+```OTP_RR_UI_MODE=calltaker npx percy exec -- npx jest percy/percy.test.js```
+
+This will run the mock servers and then start the tests in headless mode by default. 
+
+You can disable headless mode by setting `headless: false` in the Puppeteer launch settings in `percy.test.js`. We left a line commented out which you can uncomment to achieve this. 
+
+You can also debug the tests by creating a JavaScript Debug Terminal, then running the above commands with breakpoints set in the editor. 
 
-In all cases, `mock.har` needs to contain the mock responses for all queries the UI is expected to make,
-or the screenshot comparison will fail.

percy/graphql-mocks.js

@@ -0,0 +1,83 @@
+const PlanResponseBike = require('./mocks/PlanResponseBike.json').data.plan
+const PlanResponseWalk = require('./mocks/PlanResponseWalk.json').data.plan
+const PlanResponseBusSubwayTram =
+  require('./mocks/PlanResponseBusSubwayTram.json').data.plan
+const TripResponse = require('./mocks/TripResponse.json').data.trip
+const NearestResponse = require('./mocks/NearbyResponse.json').data.nearest
+const Stop114900Response = require('./mocks/Stop114900Response.json').data.stop
+const Stop803Response = require('./mocks/Stop803Response.json').data.stop
+const StopsByRadiusResponse = require('./mocks/StopsByRadiusResponse.json').data
+  .stopsByRadius
+const ServiceTimeRangeResponse =
+  require('./mocks/ServiceTimeRangeResponse.json').data.serviceTimeRange
+const RoutesResponse = require('./mocks/Routes.json').data.routes
+const IndividualRouteResponse = require('./mocks/IndividualRoute.json').data
+  .route
+
+function getPlanResponseMock(transportModes) {
+  const transportModesString = transportModes
+    .map((tm) => tm.mode)
+    .sort()
+    .join('')
+  switch (transportModesString) {
+    case 'BICYCLEBUSSUBWAYTRAM':
+    case 'BUSSUBWAY':
+      return PlanResponseBusSubwayTram
+    case 'BICYCLE':
+      return PlanResponseBike
+    case 'WALK':
+      return PlanResponseWalk
+    default:
+      return PlanResponseBike
+  }
+}
+
+function getStopResponseMock(stopId) {
+  switch (stopId) {
+    case 'MARTA:803':
+      return Stop803Response
+    case 'MARTA:114900':
+    default:
+      return Stop114900Response
+  }
+}
+
+const increment = (obj, key) => (obj[key] ? obj[key]++ : (obj[key] = 0))
+
+const mocks = (callCount) => ({
+  QueryType: {
+    nearest() {
+      increment(callCount, 'nearest')
+      return NearestResponse
+    },
+    plan(obj, { transportModes }) {
+      increment(callCount, 'plan')
+      return getPlanResponseMock(transportModes)
+    },
+    route() {
+      increment(callCount, 'route')
+      return IndividualRouteResponse
+    },
+    routes() {
+      increment(callCount, 'routes')
+      return RoutesResponse
+    },
+    serviceTimeRange() {
+      increment(callCount, 'serviceTimeRange')
+      return ServiceTimeRangeResponse
+    },
+    stop(obj, { id }) {
+      increment(callCount, 'stop')
+      return getStopResponseMock(id)
+    },
+    stopsByRadius() {
+      increment(callCount, 'stopsByRoute')
+      return StopsByRadiusResponse
+    },
+    trip() {
+      increment(callCount, 'trip')
+      return TripResponse
+    }
+  }
+})
+module.exports = mocks

percy/har-mock-config.yml

@@ -1,118 +1,125 @@
-branding: HAR test
-title: test environment
+branding: HAR Test
+title: Percy Mock Config
 homeTimezone: America/New_York
 
-# Default OTP API
 api:
   host: http://localhost:9999
-  path: /test/otp/routers/default
+  path: /otp2/routers/default
+  v2: true
 
-# Enabled multimodal routing types (e.g. interary, profile)
 routingTypes:
   - key: ITINERARY
     text: Exact Time
   - key: BATCH
     text: Multiple Mode Combinations
-# Map config
+
+elevationProfile: true
 map:
-  # Enabled map views
   views:
     - type: DEFAULT
       text: Map View
-  # Default map center
-  initLat: 29.7604
-  initLon: -95.3698
-  initZoom: 12
 
-  overlays:
-    - type: bike-rental
-      name: HOPR
-      modes:
-        - BICYCLE_RENT
-      companies:
-        - HOPR
-      mapSymbols:
-        - maxZoom: 12
-          minZoom: 0
-          type: circle
-          pixels: 3
-          fillColor: "#FF2E28"
-          dockStrokeColor: "#000000"
-        - maxZoom: 15
-          minZoom: 13
-          type: circle
-          pixels: 5
-          fillColor: "#FF2E28"
-          dockStrokeColor: "#000000"
-        - maxZoom: 20
-          minZoom: 16
-          fillColor: "#FF2E28"
-          dockStrokeColor: "#000000"
-          type: hubAndFloatingBike
+  initLat: 33.7490
+  initLon: -84.3880
+  initZoom: 10
 
-    - type: park-and-ride
-      name: Park & Ride Locations
-      maxTransitDistance: 1000
+geocoder:
+  baseUrl: http://localhost:9977
+  focusPoint:
+    lat: 33.7490
+    lon: -84.3880
+  boundary:
+    rect:
+      minLon: -86.0856
+      maxLon: -81.9499
+      minLat: 32.066
+      maxLat: 35.7251
+  maxNearbyStops: 6
+  options:
+    headers:
+      x-api-key: insert-your-geocoder-key
+  type: PELIAS
+modes:
+  modeButtons:
+    - iconName: transit
+      key: transit
+      label: Transit
       modes:
-        - CAR_PARK
-
-    - type: stops
-      name: Transit Stops
-      visible: true
+        - mode: TRANSIT
+    - iconName: walk
+      key: walk
+      label: Walk
+      modes:
+        - mode: WALK
+    - iconName: bicycle
+      key: bike
+      label: Bike
+      modes:
+        - mode: BICYCLE
+    - iconName: car
+      key: car
+      label: Car
+      modes:
+        - mode: CAR
+  initialState:
+    enabledModeButtons:
+      - walk
+      - transit
+  modeSettingDefinitions:
+    - applicableMode: TRANSIT
+      default: false
+      key: wheelchair
+      label: Use Accessible Routing
+      type: CHECKBOX
 
-# A list of private transportation operators. These are either companies that
-# provide rental vehicles or transportation network companies. Companies that
-# have multiple modes of transport should have all modes listed as a string with
-# commas. For example: BICYCLE_RENT,MICROMOBILITY_RENT.
-companies:
-  - id: HOPR
-    label: HOPR
-    modes: BICYCLE_RENT
 
-# Mode selector configuration
-modes:
   transitModes:
     - mode: BUS
-      label: Bus
-    - mode: TRAM
-      label: Tram
+      showWheelchairSetting: true
     - mode: SUBWAY
-      label: Subway
-  combinations:
-    # Standard
-    - mode: "WALK,TRANSIT"
-      params:
-        numItineraries: 2
+      showWheelchairSetting: true
+    - mode: TRAM
+      label: Atl. Streetcar
+      showWheelchairSetting: true
 
-  # access to transit modes. These options are all combined with the above
-  # transit modes in the request to OTP
   accessModes:
     - mode: BICYCLE
-      label: Transit + Personal bike
     - mode: BICYCLE_RENT
-      label: Transit + BCycle
-      company: HOPR
-    - mode: CAR_PARK
-      label: Park & Ride
-  # which exclusive modes to show. This involves using a single mode and no
-  # transit for the duration of the trip. Further configurations of
-  # `bicycleModes`, `micromobilityModes` and/or `carModes` are needed as
-  # desired, but no extra configuration is needed for a WALK exclusive mode.
-  exclusiveModes:
-    - WALK
-    - BICYCLE
+      label: Transit + Bikeshare
+    - mode: SCOOTER
+      label: Transit + eScooter rental
 
-  bicycleModes:
-    - mode: BICYCLE
-      label: Own Bike
-      iconWidth: 18
-    - mode: BICYCLE_RENT
-      label: HOPR
-      iconWidth: 36
+itinerary:
+  showHeaderText: false
+  hideSkeletons: true
+  customBatchUiBackground: true
+  groupByMode: true
+  groupTransitModes: true
+  showFirstResultByDefault: false
+  mergeItineraries: true
 
 dateTime:
   timeFormat: h:mm a
   dateFormat: MM/dd/yyyy
+stopViewer:
+  nearbyRadius: 250
+routeViewer:
+  hideRouteShapesWithinFlexZones: true
 
-itinerary:
-  mergeItineraries: true
+accessibilityScore:
+  gradationMap:
+    0.0:
+      color: "#ffb5b9"
+      icon: thumbs-down
+    0.5:
+      color: "#b5d1ff"
+      icon: question-circle
+    0.8:
+      color: "#bfffb5"
+      icon: thumbs-up
+    1.0:
+      color: "#a2e099"
+      icon: thumbs-up
+
+defaultQueryParams:
+  maxWalkDistance: 1207 # 3/4 miles in meters