ci(percy): Use sep key for calltaker, take mobile snaps in non-callta…

…ker test.
opentripplanner · Sep 7, 2023 · dc40b6e · dc40b6e
1 parent 2aed935
commit dc40b6e
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 51 deletions.
diff --git a/.github/workflows/percy.yml b/.github/workflows/percy.yml
@@ -32,24 +32,20 @@ jobs:
         env:
           YAML_CONFIG: /tmp/otp2config.yml
           JS_CONFIG: ./percy/har-mock-config.js
-      - name: Take Percy Snapshots (Desktop)
+      - name: Take Percy Snapshots (Desktop + Mobile)
         run: npx percy exec -- npx jest percy/percy.test.js --force-exit
         env:
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_OTP2 }}
-          OTP_RR_UI_MODE: desktop
-      - name: Take Percy Snapshots (Mobile)
-        run: npx percy exec -- npx jest percy/percy.test.js --force-exit
-        env:
-          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_OTP2 }}
-          OTP_RR_UI_MODE: mobile
-      # Calltaker has a separate config file, so another build should be produced.
+          OTP_RR_UI_MODE: normal
       - name: Build OTP-RR Calltaker
+        # Calltaker has a separate config file, so another build should be produced.
         run: yarn build
         env:
           YAML_CONFIG: /tmp/otp2config.yml
           JS_CONFIG: ./percy/har-mock-config-call-taker.js
       - name: Take Percy Snapshots (Calltaker)
         run: npx percy exec -- npx jest percy/percy.test.js --force-exit
         env:
-          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_OTP2 }}
+          # Calltaker has a separate key because the calltaker-specific snapshots are different.
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_CALL_TAKER_OTP2 }}
           OTP_RR_UI_MODE: calltaker
diff --git a/percy/percy.test.js b/percy/percy.test.js
@@ -357,7 +357,49 @@ async function executeTest(page, isMobile, isCallTaker) {
   }
 }
 
-if (OTP_RR_UI_MODE === 'mobile') {
+test('OTP-RR Desktop', async () => {
+  const page = await loadPath('/')
+  await page.setViewport({
+    height: 1080,
+    width: 1920
+  })
+  page.on('console', async (msg) => {
+    const args = await msg.args()
+    args.forEach(async (arg) => {
+      const val = await arg.jsonValue()
+      // value is serializable
+      if (JSON.stringify(val) !== JSON.stringify({})) console.log(val)
+      // value is unserializable (or an empty oject)
+      else {
+        const { description, subtype, type } = arg._remoteObject
+        console.log(
+          `type: ${type}, subtype: ${subtype}, description:\n ${description}`
+        )
+      }
+    })
+  })
+  // log all errors that were logged to the browser console
+  page.on('warn', (warn) => {
+    console.log(warn)
+  })
+  page.on('error', (error) => {
+    console.error(error)
+    console.error(error.stack)
+  })
+  // log all uncaught exceptions
+  page.on('pageerror', (error) => {
+    console.error(`Page Error: ${error}`)
+  })
+  // log all failed requests
+  page.on('requestfailed', (req) => {
+    console.error(`Request failed: ${req.method()} ${req.url()}`)
+  })
+
+  await executeTest(page, false, OTP_RR_UI_MODE === 'calltaker')
+})
+
+if (OTP_RR_UI_MODE !== 'calltaker') {
+  // Non-calltaker test runs both mobile and desktop test.
   test('OTP-RR Mobile', async () => {
     const page = await loadPath('/')
     await page.setUserAgent('android')
@@ -371,45 +413,4 @@ if (OTP_RR_UI_MODE === 'mobile') {
     // Execute the rest of the test
     await executeTest(page, true, false)
   })
-} else {
-  test('OTP-RR Desktop', async () => {
-    const page = await loadPath('/')
-    await page.setViewport({
-      height: 1080,
-      width: 1920
-    })
-    page.on('console', async (msg) => {
-      const args = await msg.args()
-      args.forEach(async (arg) => {
-        const val = await arg.jsonValue()
-        // value is serializable
-        if (JSON.stringify(val) !== JSON.stringify({})) console.log(val)
-        // value is unserializable (or an empty oject)
-        else {
-          const { description, subtype, type } = arg._remoteObject
-          console.log(
-            `type: ${type}, subtype: ${subtype}, description:\n ${description}`
-          )
-        }
-      })
-    })
-    // log all errors that were logged to the browser console
-    page.on('warn', (warn) => {
-      console.log(warn)
-    })
-    page.on('error', (error) => {
-      console.error(error)
-      console.error(error.stack)
-    })
-    // log all uncaught exceptions
-    page.on('pageerror', (error) => {
-      console.error(`Page Error: ${error}`)
-    })
-    // log all failed requests
-    page.on('requestfailed', (req) => {
-      console.error(`Request failed: ${req.method()} ${req.url()}`)
-    })
-
-    await executeTest(page, false, OTP_RR_UI_MODE === 'calltaker')
-  })
 }