From dc40b6eee60f212327afdedca7af652cf8493d32 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 7 Sep 2023 17:36:52 -0400
Subject: [PATCH] ci(percy): Use sep key for calltaker, take mobile snaps in
 non-calltaker test.

---
 .github/workflows/percy.yml | 14 +++---
 percy/percy.test.js         | 85 +++++++++++++++++++------------------
 2 files changed, 48 insertions(+), 51 deletions(-)

diff --git a/.github/workflows/percy.yml b/.github/workflows/percy.yml
index ae53907d2..957eafc81 100644
--- a/.github/workflows/percy.yml
+++ b/.github/workflows/percy.yml
@@ -32,18 +32,13 @@ 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
@@ -51,5 +46,6 @@ jobs:
       - 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
index 462419dcb..9c62e92e7 100644
--- 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')
-  })
 }