refactor(percy): improve otp1/otp2 parity in tests

.github/workflows/percy.yml

@@ -7,7 +7,7 @@ on:
   pull_request:
 
 jobs:
-  test-build-release:
+  run-pixel-tests-with-otp1-mock-server:
     runs-on: ubuntu-latest
 
     steps:
@@ -27,3 +27,27 @@ jobs:
         env:
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
           HAR_URL: ${{ secrets.PERCY_HAR_URL }}
+ run-pixel-tests-with-otp2-real-server:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          # This allows us to work with the repository during the lint step
+          fetch-depth: 2
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16.x
+      - name: Install npm packages using cache
+        uses: bahmutov/npm-install@v1
+      - name: Download OTP2 config file
+        run: curl $PERCY_OTP2_CONFIG_URL --output /tmp/otp2config.yml
+        env:
+          PERCY_OTP2_CONFIG_URL: ${{ secrets.PERCY_OTP2_CONFIG_URL }}
+      - name: Take Percy Snapshots
+        # Move everything from latest commit back to staged
+        run: npx percy exec -- npx jest percy/percy.test.js --force-exit
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+          PERCY_OTP_CONFIG_OVERRIDE: /tmp/otp2config.yml

percy/percy.test.js

@@ -197,10 +197,22 @@ test('OTP-RR', async () => {
   await percySnapshotWithWait(page, 'Route Viewer Showing Route 410')
 
   // View multiple patterns
-  await page.select('#headsign-selector', '6:410:1:01')
+  // Click second option
+  const sugarloafOption = await page.$$eval(
+    'option',
+    (options) => options.find((o) => o.innerText.includes('Sugarloaf'))?.value
+  )
+  await page.select('select#headsign-selector', sugarloafOption)
+
   await page.waitForSelector('#headsign-selector-label')
   await page.waitForTimeout(1000)
-  await page.select('#headsign-selector', '6:410:0:01')
+
+  // Click first option
+  const lindberghOption = await page.$$eval(
+    'option',
+    (options) => options.find((o) => o.innerText.includes('Lindbergh'))?.value
+  )
+  await page.select('select#headsign-selector', lindberghOption)
   await page.waitForTimeout(1000)
 
   await percySnapshotWithWait(page, 'Pattern Viewer Showing Route 410')