Address PR Comments and Prepare for SDK Changes

Author: molker

packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.tsx

@@ -40,7 +40,7 @@ interface OutdialANIEntry {
  * @property startOutdial - Function to initiate the outdial call with the entered destination number.
  */
 const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps> = (props) => {
-  const {startOutdial} = props;
+  const {startOutdial, outdialANIEntries} = props;
 
   // State Hooks
   const [destination, setDestination] = useState('');
@@ -53,21 +53,8 @@ const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps> =
     []
   );
 
-  const outdialANIEntries: OutdialANIEntry[] = [
-    {number: '+1(234)567-8910', name: 'name 1'},
-    {number: '+1(019)876-5432', name: 'name 2'},
-    {number: '+1(019)876-5432', name: 'name 3'},
-    {number: '+1(019)876-5432', name: 'name 4'},
-    {number: '+1(019)876-5432', name: 'name 2'},
-    {number: '+1(019)876-5432', name: 'name 2'},
-    {number: '+1(019)876-5432', name: 'name 2'},
-    {number: '+1(019)876-5432', name: 'name 2'},
-    {number: '+1(019)876-5432', name: 'name 2'},
-    {number: '+1(019)876-5432', name: 'name 2'},
-    {number: '+1(019)876-5432', name: 'name 2'},
-    {number: '+1(019)876-5432', name: 'name 2'},
-    {number: '+1(019)876-5432', name: 'name 2'},
-  ];
+  // Give Select an empty list if outdial ANI entries are not provided
+  const outdialANIList: OutdialANIEntry[] = outdialANIEntries ?? [];
 
   /**
    * validateOutboundNumber
@@ -107,6 +94,8 @@ const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps> =
       <Input
         className="input"
         id="outdial-number-input"
+        name="outdial-number-input"
+        data-testid="outdial-number-input"
         helpText={isValidNumber}
         helpTextType={isValidNumber ? 'error' : 'default'}
         placeholder={OutdialStrings.DN_PLACEHOLDER}
@@ -130,19 +119,20 @@ const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps> =
         className="input"
         label={OutdialStrings.ANI_SELECT_LABEL}
         id="outdial-ani-option"
-        name="outdial-ani-option"
+        name="outdial-ani-option-select"
         data-testid="outdial-ani-option-select"
         placeholder={OutdialStrings.ANI_SELECT_PLACEHOLDER}
         onChange={(event: CustomEvent) => {
           setSelectedANI(event.detail.value);
         }}
       >
-        {outdialANIEntries.map((option: OutdialANIEntry, index: number) => {
+        {outdialANIList.map((option: OutdialANIEntry, index: number) => {
           return (
             <Option
               selected={option.number === selectedANI}
               key={index}
               value={option.number}
+              name={`outdial-ani-option-${index}`}
               data-testid={`outdial-ani-option-${index}`}
             >
               {option.name}
@@ -151,6 +141,7 @@ const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps> =
         })}
       </Select>
       <Button
+        data-testid="outdial-call-button"
         className="button"
         prefixIcon={'handset-regular'}
         onClick={() => startOutdial(destination)}

packages/contact-center/cc-components/src/components/task/task.types.ts

@@ -465,6 +465,20 @@ export interface OutdialCallProps {
    */
   startOutdial: (destination: string) => void;
 
+  /**
+   * Array of Outdial ANI entries.
+   * TODO: update with exported type when SDK PR#4513 is merged
+   */
+  outdialANIEntries?: Array<{
+    organizationId?: string;
+    id?: string;
+    version?: number;
+    name: string;
+    number: string;
+    createdTime?: number;
+    lastUpdatedTime?: number;
+  }>;
+
   /**
    * CC SDK Instance.
    */
@@ -476,7 +490,7 @@ export interface OutdialCallProps {
   logger: ILogger;
 }
 
-export type OutdialCallComponentProps = Pick<OutdialCallProps, 'startOutdial'>;
+export type OutdialCallComponentProps = Pick<OutdialCallProps, 'startOutdial' | 'outdialANIEntries'>;
 
 /**
  * Interface representing the properties for CallControlListItem component.

packages/contact-center/cc-components/tests/components/task/OutdialCall/out-dial-call.tsx

@@ -1,92 +1,140 @@
 import React from 'react';
-import {render, fireEvent, screen} from '@testing-library/react';
+import {render, fireEvent, screen, waitFor} from '@testing-library/react';
 import '@testing-library/jest-dom';
 import OutdialCallComponent from '../../../../src/components/task/OutdialCall/outdial-call';
+import store from '@webex/cc-store';
 
-// This test suite is skipped because we have removed the :broken from the command
-// line in the package.json scripts to run these tests in pipeline
-describe.skip('OutdialCallComponent', () => {
+describe('OutdialCallComponent', () => {
   const mockStartOutdial = jest.fn();
+  const KEY_LIST = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'];
+  let customEvent;
+
+  // Prevent warning 'CC-Widgets: UI Metrics: No logger found'
+  store.store.logger = {
+    log: jest.fn(),
+    info: jest.fn(),
+    warn: jest.fn(),
+    error: jest.fn(),
+    trace: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
   const props = {
     startOutdial: mockStartOutdial,
+    outdialANIEntries: [
+      {name: 'name 1', number: '1'},
+      {name: 'name 2', number: '2'},
+    ],
   };
 
   beforeEach(() => {
+    // Create a custom event that mimics what the mdc-input component would fire
+    customEvent = new Event('change', {bubbles: true});
     mockStartOutdial.mockClear();
   });
 
   it('renders the component correctly', () => {
     render(<OutdialCallComponent {...props} />);
-    expect(screen.getByPlaceholderText('Enter number to dial')).toBeInTheDocument();
-    expect(screen.getByText('Outdial Call')).toBeInTheDocument();
+    expect(screen.getByTestId('outdial-number-input')).toBeInTheDocument();
+    KEY_LIST.forEach((key) => {
+      expect(screen.getByText(key)).toBeInTheDocument();
+    });
+    expect(screen.getByTestId('outdial-ani-option-select')).toBeInTheDocument();
+    expect(screen.getByTestId('outdial-call-button')).toBeInTheDocument();
   });
 
-  it('updates input value when typing directly', () => {
+  it('updates input value when typing directly', async () => {
     render(<OutdialCallComponent {...props} />);
-    const input = screen.getByPlaceholderText('Enter number to dial');
-    fireEvent.change(input, {target: {value: '123'}});
-    expect(input).toHaveValue('123');
+    const input = await screen.findByTestId('outdial-number-input');
+
+    Object.defineProperty(customEvent, 'target', {
+      writable: false,
+      value: {value: '123'},
+    });
+    fireEvent(input, customEvent);
+
+    await waitFor(() => {
+      expect(input).toHaveAttribute('value', '123');
+    });
   });
 
   it('updates input value when clicking keypad buttons', () => {
     render(<OutdialCallComponent {...props} />);
     fireEvent.click(screen.getByText('1'));
     fireEvent.click(screen.getByText('2'));
     fireEvent.click(screen.getByText('3'));
-    expect(screen.getByPlaceholderText('Enter number to dial')).toHaveValue('123');
+    expect(screen.getByTestId('outdial-number-input')).toHaveValue('123');
   });
 
   it('calls startOutdial with correct payload when clicking call button', () => {
     render(<OutdialCallComponent {...props} />);
-    const input = screen.getByPlaceholderText('Enter number to dial');
-    fireEvent.change(input, {target: {value: '123'}});
+    const input = screen.getByTestId('outdial-number-input');
+    Object.defineProperty(customEvent, 'target', {
+      writable: false,
+      value: {value: '123'},
+    });
+    fireEvent(input, customEvent);
 
-    const callButton = screen.getByRole('button');
+    const callButton = screen.getByTestId('outdial-call-button');
     fireEvent.click(callButton);
 
-    expect(mockStartOutdial).toHaveBeenCalledWith({
-      entryPointId: 'test-entry-point',
-      destination: '123',
-      direction: 'OUTBOUND',
-      attributes: {},
-      mediaType: 'telephony',
-      outboundType: 'OUTDIAL',
-    });
+    expect(mockStartOutdial).toHaveBeenCalledWith('123');
   });
 
   it('allows special characters (* # +) from keypad', () => {
     render(<OutdialCallComponent {...props} />);
     fireEvent.click(screen.getByText('*'));
     fireEvent.click(screen.getByText('#'));
-    expect(screen.getByPlaceholderText('Enter number to dial')).toHaveValue('*#');
+    expect(screen.getByTestId('outdial-number-input')).toHaveValue('*#');
   });
 
-  it('does not allow invalid characters', () => {
+  it('shows error help text when invalid characters are entered', async () => {
     render(<OutdialCallComponent {...props} />);
-    const input = screen.getByPlaceholderText('Enter number to dial');
-    fireEvent.change(input, {target: {value: 'abc'}});
-    expect(input).toHaveValue('');
+    const input = await screen.findByTestId('outdial-number-input');
+    Object.defineProperty(customEvent, 'target', {
+      writable: false,
+      value: {value: 'abc'},
+    });
+    fireEvent(input, customEvent);
+    await waitFor(() => expect(input).toHaveAttribute('help-text', 'Incorrect format.'));
   });
 
-  it('does not allow invalid characters when typing', () => {
+  it('does not allow invalid characters when typing', async () => {
     render(<OutdialCallComponent {...props} />);
-    const input = screen.getByPlaceholderText('Enter number to dial');
-    fireEvent.change(input, {target: {value: '123abc'}});
-    expect(input).toHaveValue('123');
+    const input = await screen.findByTestId('outdial-number-input');
+    Object.defineProperty(customEvent, 'target', {
+      writable: false,
+      value: {value: '123abc'},
+    });
+    fireEvent(input, customEvent);
+    await waitFor(() => expect(input).toHaveAttribute('help-text', 'Incorrect format.'));
   });
 
-  it('does not allow empty input', () => {
+  it('has no ANI entry options when the entry list is empty', async () => {
+    render(<OutdialCallComponent startOutdial={mockStartOutdial} outdialANIEntries={[]} />);
+    const select = await screen.findByTestId('outdial-ani-option-select');
+    fireEvent.click(select);
+    expect(screen.queryByText('name 1')).not.toBeInTheDocument();
+  });
+
+  it('sets selected ani when an option is selected', async () => {
     render(<OutdialCallComponent {...props} />);
-    const callButton = screen.getByRole('button');
-    fireEvent.click(callButton);
-    expect(mockStartOutdial).not.toHaveBeenCalled();
+    const select = await screen.findByTestId('outdial-ani-option-select');
+    fireEvent.click(select);
+    const option = await screen.findByText('name 1');
+    expect(option).toBeInTheDocument();
+    fireEvent.click(option);
+    await waitFor(() => {
+      expect(option).toHaveAttribute('aria-selected', 'true');
+    });
   });
 
-  it('should remove whitespace and only keep numbers', () => {
+  it('does not allow empty input', async () => {
     render(<OutdialCallComponent {...props} />);
-    const input = screen.getByPlaceholderText('Enter number to dial');
-    fireEvent.change(input, {target: {value: '  1 2 3 4  '}});
-    expect(input).toHaveValue('1234');
+    const callButton = await screen.findByTestId('outdial-call-button');
+    expect(callButton).toBeDisabled();
   });
 });

packages/contact-center/task/src/OutdialCall/index.tsx

@@ -9,8 +9,11 @@ const OutdialCallInternal: React.FunctionComponent = observer(() => {
   const {cc, logger} = store;
 
   const result = useOutdialCall({cc, logger});
+  // Uncomment after SDK PR#4513 is merged
+  // const outdialANIEntries = getOutdialANIEntries({cc, logger});
   const props = {
     ...result,
+    // outdialANIEntries,
   };
 
   return <OutdialCallComponent {...props} />;

packages/contact-center/task/src/helper.ts

@@ -872,3 +872,20 @@ export const useOutdialCall = (props: useOutdialCallProps) => {
     startOutdial,
   };
 };
+
+// Uncomment once SDK PR#4513 is merged
+// export const getOutdialANIEntries = async (props: useOutdialCallProps) => {
+//   const {cc, logger} = props;
+//   const agentProfile = cc.agentConfig;
+//   const outdialANIId = agentProfile?.outdialANIId || '';
+//   try {
+//     const result = await cc.getOutdialANIEntries(outdialANIId);
+//     return result;
+//   } catch (error) {
+//     logger.error(`Error fetching Outdial ANI entries: ${error}`, {
+//       module: 'widget-OutdialCall#helper.ts',
+//       method: 'getOutdialANIEntries',
+//     });
+//     throw error;
+//   }
+// };