feat(cc-widgets): UI Automation for Incoming Task (#485)

Co-authored-by: PrayagGP <127178102+PrayagGP@users.noreply.github.com>
Co-authored-by: Shreyas Sharma <72344404+Shreyas281299@users.noreply.github.com>

Author: 3 people

.github/workflows/pull-request.yml

@@ -264,4 +264,4 @@ jobs:
         run: yarn run test:tooling
 
       - name: Test CC Widgets
-        run: yarn run test:cc-widgets
+        run: yarn run test:cc-widgets

package.json

@@ -27,6 +27,7 @@
     "jest": "29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "node-gyp": "^10.2.0",
+    "nodemailer": "^7.0.3",
     "os-browserify": "^0.3.0",
     "process": "^0.11.10",
     "querystring-es3": "^0.2.1",

packages/contact-center/cc-components/src/components/task/CallControl/call-control.tsx

@@ -295,7 +295,7 @@ function CallControlComponent(props: CallControlComponentProps) {
                         button.className +
                         (button.disabled || (consultInitiated && isTelephony) ? ` ${button.className}-disabled` : '')
                       }
-                      data-testid="ButtonCircle"
+                      data-testid={button.id === 'end' ? 'call-control:end-call' : button.id}
                       onPress={button.onClick}
                       disabled={button.disabled || (consultInitiated && isTelephony)}
                       aria-label={button.tooltip}
@@ -332,6 +332,7 @@ function CallControlComponent(props: CallControlComponentProps) {
                   postfix-icon="arrow-down-bold"
                   type="button"
                   role="button"
+                  data-testid="call-control:wrapup-button"
                 >
                   {WRAP_UP}
                 </Button>
@@ -362,6 +363,7 @@ function CallControlComponent(props: CallControlComponentProps) {
                 info-icon-aria-label=""
                 name=""
                 className="wrapup-select"
+                data-testid="call-control:wrapup-select"
                 placeholder={SELECT}
                 onChange={(event: CustomEvent) => {
                   const key = event.detail.value;
@@ -370,7 +372,11 @@ function CallControlComponent(props: CallControlComponentProps) {
                 }}
               >
                 {wrapupCodes?.map((code) => (
-                  <Option key={code.id} value={code.id}>
+                  <Option
+                    key={code.id}
+                    value={code.id}
+                    data-testid={`call-control:wrapup-reason-${code.name.toLowerCase()}`}
+                  >
                     {code.name}
                   </Option>
                 ))}
@@ -379,7 +385,7 @@ function CallControlComponent(props: CallControlComponentProps) {
                 onClick={handleWrapupCall}
                 variant="primary"
                 className="submit-wrapup-button"
-                data-testid="submit-wrapup-button"
+                data-testid="call-control:wrapup-submit"
                 aria-label="Submit wrap-up"
                 disabled={selectedWrapupId && selectedWrapupReason ? false : true}
               >

packages/contact-center/cc-components/src/components/task/Task/index.tsx

@@ -155,12 +155,12 @@ const Task: React.FC<TaskProps> = ({
       <ListItemBaseSection position="end">
         <div className="task-button-container">
           {acceptText ? (
-            <ButtonPill onPress={acceptTask} color="join" disabled={disableAccept}>
+            <ButtonPill onPress={acceptTask} color="join" disabled={disableAccept} data-testid="task:accept-button">
               {acceptText}
             </ButtonPill>
           ) : null}
           {declineText ? (
-            <ButtonPill onPress={declineTask} color="cancel">
+            <ButtonPill onPress={declineTask} color="cancel" data-testid="task:decline-button">
               {declineText}
             </ButtonPill>
           ) : null}

playwright.config.ts

@@ -1,13 +1,14 @@
-import {defineConfig, devices} from '@playwright/test';
+import { defineConfig, devices } from '@playwright/test';
 import dotenv from 'dotenv';
 import path from 'path';
 
 // Alternatively, read from "../my.env" file.
-dotenv.config({path: path.resolve(__dirname, '.env')});
+dotenv.config({ path: path.resolve(__dirname, '.env') });
 
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
+const dummyAudioPath = path.resolve(__dirname, './playwright/wav/dummyAudio.wav');
 export default defineConfig({
   testDir: './playwright',
   /* Maximum time one test can run for. */
@@ -45,7 +46,22 @@ export default defineConfig({
     },
     {
       name: 'Test: Chrome',
-      use: {...devices['Desktop Chrome']},
+      use: {
+        ...devices['Desktop Chrome'],
+        launchOptions: {
+          args: [
+            `--disable-site-isolation-trials`,
+            `--disable-web-security`,
+            `--no-sandbox`,
+            `--disable-features=WebRtcHideLocalIpsWithMdns`,
+            `--allow-file-access-from-files`,
+            `--use-fake-ui-for-media-stream`,
+            `--use-fake-device-for-media-stream`,
+            `--use-file-for-fake-audio-capture=${dummyAudioPath}`,
+          ],
+        }
+      },
+
     },
     // Once we have stability for playwright tests, we can enable the following browsers
     // {