Merge pull request #543 from rebeccaalpert/data-test-id

fix(ResponseActions): Allow passing unspecified props

Author: thatblindgeye

packages/module/src/ResponseActions/ResponseActionButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 
-export interface ResponseActionButtonProps {
+export interface ResponseActionButtonProps extends ButtonProps {
   /** Aria-label for the button. Defaults to the value of the tooltipContent if none provided */
   ariaLabel?: string;
   /** Aria-label for the button, shown when the button is clicked. Defaults to the value of ariaLabel or tooltipContent if not provided. */

packages/module/src/ResponseActions/ResponseActions.test.tsx

@@ -41,6 +41,14 @@ const CUSTOM_ACTIONS = [
   }
 ];
 
+const ALL_ACTIONS_DATA_TEST = [
+  { type: 'positive', label: 'Good response', dataTestId: 'positive' },
+  { type: 'negative', label: 'Bad response', dataTestId: 'negative' },
+  { type: 'copy', label: 'Copy', dataTestId: 'copy' },
+  { type: 'share', label: 'Share', dataTestId: 'share' },
+  { type: 'listen', label: 'Listen', dataTestId: 'listen' }
+];
+
 describe('ResponseActions', () => {
   afterEach(() => {
     jest.clearAllMocks();
@@ -181,6 +189,13 @@ describe('ResponseActions', () => {
     });
   });
 
+  it('should be able to add custom attributes to buttons', () => {
+    ALL_ACTIONS_DATA_TEST.forEach(({ type, dataTestId }) => {
+      render(<ResponseActions actions={{ [type]: { onClick: jest.fn(), 'data-testid': dataTestId } }} />);
+      expect(screen.getByTestId(dataTestId)).toBeTruthy();
+    });
+  });
+
   it('should be able to add custom actions', () => {
     CUSTOM_ACTIONS.forEach((action) => {
       const key = Object.keys(action)[0];
@@ -192,12 +207,14 @@ describe('ResponseActions', () => {
               onClick: action[key].onClick,
               // doing this just because it's easier to test without a regex for the button name
               ariaLabel: action[key].ariaLabel.toLowerCase(),
-              icon: action[key].icon
+              icon: action[key].icon,
+              'data-testid': action[key]
             }
           }}
         />
       );
       expect(screen.getByRole('button', { name: key })).toBeTruthy();
+      expect(screen.getByTestId(action[key])).toBeTruthy();
     });
   });
 });

packages/module/src/ResponseActions/ResponseActions.tsx

@@ -36,9 +36,12 @@ export interface ActionProps extends Omit<ButtonProps, 'ref'> {
   'aria-controls'?: string;
 }
 
+type ExtendedActionProps = ActionProps & {
+  [key: string]: any;
+};
 export interface ResponseActionProps {
   /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
-  actions: Record<string, ActionProps | undefined> & {
+  actions: Record<string, ExtendedActionProps | undefined> & {
     positive?: ActionProps;
     negative?: ActionProps;
     copy?: ActionProps;
@@ -78,6 +81,7 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
     <div ref={responseActions} className="pf-chatbot__response-actions">
       {positive && (
         <ResponseActionButton
+          {...positive}
           ariaLabel={positive.ariaLabel ?? 'Good response'}
           clickedAriaLabel={positive.ariaLabel ?? 'Response recorded'}
           onClick={(e) => handleClick(e, 'positive', positive.onClick)}
@@ -95,6 +99,7 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
       )}
       {negative && (
         <ResponseActionButton
+          {...negative}
           ariaLabel={negative.ariaLabel ?? 'Bad response'}
           clickedAriaLabel={negative.ariaLabel ?? 'Response recorded'}
           onClick={(e) => handleClick(e, 'negative', negative.onClick)}
@@ -112,6 +117,7 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
       )}
       {copy && (
         <ResponseActionButton
+          {...copy}
           ariaLabel={copy.ariaLabel ?? 'Copy'}
           clickedAriaLabel={copy.ariaLabel ?? 'Copied'}
           onClick={(e) => handleClick(e, 'copy', copy.onClick)}
@@ -129,6 +135,7 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
       )}
       {share && (
         <ResponseActionButton
+          {...share}
           ariaLabel={share.ariaLabel ?? 'Share'}
           clickedAriaLabel={share.ariaLabel ?? 'Shared'}
           onClick={(e) => handleClick(e, 'share', share.onClick)}
@@ -146,6 +153,7 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
       )}
       {listen && (
         <ResponseActionButton
+          {...listen}
           ariaLabel={listen.ariaLabel ?? 'Listen'}
           clickedAriaLabel={listen.ariaLabel ?? 'Listening'}
           onClick={(e) => handleClick(e, 'listen', listen.onClick)}
@@ -163,6 +171,7 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
       )}
       {Object.keys(additionalActions).map((action) => (
         <ResponseActionButton
+          {...additionalActions[action]}
           key={action}
           ariaLabel={additionalActions[action]?.ariaLabel}
           clickedAriaLabel={additionalActions[action]?.clickedAriaLabel}