Merge pull request #145 from Groww/add/data-testid

add: data-testid for automation

Author: vyapak154

packages/ui-toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groww-tech/ui-toolkit",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "A lightning nature UI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/ui-toolkit/src/components/atoms/Button/Button.tsx

@@ -19,7 +19,8 @@ class Button extends React.PureComponent<Props> {
       isDisabled,
       iconPosition,
       showLoader,
-      loadingText
+      loadingText,
+      dataTestId
     } = this.props;
 
     const classname = cn({
@@ -34,9 +35,10 @@ class Button extends React.PureComponent<Props> {
     });
 
     return (
-      <div className={fixToBottom ? 'btn51BottomFixed' : ''}>
+      <div className={fixToBottom ? 'btn51BottomFixed' : ''} >
         <div
           className={classname}
+          data-test-id={dataTestId.length ? dataTestId : null}
           onClick={this.onButtonClick}
           style={this.getComputedStyle()}
         >
@@ -121,7 +123,8 @@ class Button extends React.PureComponent<Props> {
     loadingText: 'Loading...',
     fontSize: '',
     textColor: '',
-    backgroundColor: ''
+    backgroundColor: '',
+    dataTestId: ''
   }
 }
 
@@ -150,6 +153,7 @@ type DefaultProps = {
   loadingText: string;
   fontSize: string | number;
   textColor: string;
+  dataTestId: string;
   /**
   * What background color to use
   */

packages/ui-toolkit/src/components/atoms/CheckBox/CheckBox.tsx

@@ -16,7 +16,7 @@ const CheckBox = (props: Props) => {
     labelComponent, isChecked,
     handleOnClick, value,
     disabled, checkBoxDirection,
-    addParentClass
+    addParentClass, dataTestId
   } = props;
 
 
@@ -67,7 +67,9 @@ const CheckBox = (props: Props) => {
   );
 
   return (
-    <div onClick={checkBoxClick}
+    <div
+      onClick={checkBoxClick}
+      data-test-id={dataTestId.length ? dataTestId : null}
       className={`c11AlignCenter c11Pointer ${addParentClass} ${checkBoxDirection === CHECKBOX_DIRECTION.RIGHT ? 'c11checkOnRight' : ''}`}
     >
       {isChecked ? active_svg : inactive_svg}
@@ -89,6 +91,7 @@ type DefaultProps = {
   addParentClass: string;
   labelComponent: () => React.ReactNode;
   checkBoxDirection: ValueOf<typeof CHECKBOX_DIRECTION>;
+  dataTestId: string;
 }
 
 
@@ -106,7 +109,8 @@ CheckBox.defaultProps = {
   activeColor: 'var(--secondaryClr)',
   inActiveColor: 'var(--text)',
   labelComponent: () => null,
-  checkBoxDirection: CHECKBOX_DIRECTION.LEFT
+  checkBoxDirection: CHECKBOX_DIRECTION.LEFT,
+  dataTestId: ''
 } as DefaultProps;
 
 export type Props = DefaultProps & RequiredProps;

packages/ui-toolkit/src/components/atoms/InformationBoard/InformationBox.tsx

@@ -33,7 +33,8 @@ const InformationBox = (props: Props) => {
     iconComponent,
     outlined,
     informationBoxClass,
-    informationBoxStyle
+    informationBoxStyle,
+    dataTestId
   } = props;
 
   const parentDivClass = cn({
@@ -57,9 +58,11 @@ const InformationBox = (props: Props) => {
     className: 'clrText infbd45InfoIcon'
   };
 
+
   return (
     <div style={parentDivStyle}
       className={parentDivClass}
+      data-test-id={dataTestId.length ? dataTestId : null}
     >
       {
         showIcon
@@ -73,7 +76,6 @@ const InformationBox = (props: Props) => {
   );
 };
 
-
 const defaultProps: DefaultProps = {
   showIcon: true,
   iconComponent: (props: ReactIconProps) => <Info {...props} />,
@@ -82,7 +84,8 @@ const defaultProps: DefaultProps = {
   outlined: false,
   type: 'DEFAULT',
   informationBoxClass: '',
-  informationBoxStyle: {}
+  informationBoxStyle: {},
+  dataTestId: ''
 };
 
 
@@ -102,6 +105,7 @@ type DefaultProps = {
   height: number | 'auto';
   informationBoxClass: string;
   informationBoxStyle: React.CSSProperties;
+  dataTestId: string;
   type: 'DEFAULT' | 'POSITIVE' | 'NEUTRAL' | 'ERROR' | 'WARNING';
 }
 

packages/ui-toolkit/src/components/atoms/Popup/Rodal/Rodal.tsx

@@ -104,6 +104,7 @@ class Rodal extends React.Component<Props, State> {
     } = this.props;
 
     const CloseButton = showCloseButton ? <span className="rodal-close"
+      data-test-id='rodal-close-icon'
       onClick={onClose}
     /> : null;
 

packages/ui-toolkit/src/components/atoms/RadioButton/RadioButton.tsx

@@ -20,7 +20,8 @@ const RadioButton = (props: Props) => {
     labelClassName,
     parentClassName,
     iconClassName,
-    radioDirection
+    radioDirection,
+    dataTestId
   } = props;
 
   const labelParentClassName = cn({
@@ -33,6 +34,7 @@ const RadioButton = (props: Props) => {
   return (
     <div
       onClick={onSelect}
+      data-test-id={dataTestId.length ? dataTestId : null}
       className={`radioCo11Box ${parentClassName} ${radioDirection === RADIO_DIRECTION.RIGHT ? 'radioCo11BoxReverse' : ''}`}
     >
       {
@@ -62,6 +64,7 @@ const defaultProps: DefaultProps = {
   iconClassName: '',
   labelClassName: '',
   parentClassName: 'bas11RadioParent',
+  dataTestId: '',
   radioDirection: RADIO_DIRECTION.LEFT
 };
 
@@ -71,6 +74,7 @@ type DefaultProps = {
   parentClassName: string;
   radioDirection: ValueOf<typeof RADIO_DIRECTION>;
   iconClassName: string;
+  dataTestId: string;
 }
 
 

packages/ui-toolkit/src/components/atoms/Select/Select.tsx

@@ -61,7 +61,8 @@ class Select extends React.PureComponent<Props> {
       optionClass,
       optionsParentClass,
       activeOptionBoxClass,
-      activeIndex
+      activeIndex,
+      dataTestId
     } = this.props;
 
     let selectedOption = null;
@@ -78,7 +79,9 @@ class Select extends React.PureComponent<Props> {
         >
           <DropdownTrigger>
             <div className="width100 pos-rel">
-              <div className={`pos-rel valign-wrapper se55SelectBox clrText ${activeOptionBoxClass}`}>
+              <div
+                className={`pos-rel valign-wrapper se55SelectBox clrText ${activeOptionBoxClass}`}
+              >
                 <div>
                   {selectedOption ? selectedOption.label : placeholder}
                 </div>
@@ -93,6 +96,7 @@ class Select extends React.PureComponent<Props> {
                   aria-hidden="true"
                   tabIndex={-1}
                   className="se55Input"
+                  data-test-id={dataTestId.length ? dataTestId : null}
                 />
               </div>
 
@@ -106,6 +110,7 @@ class Select extends React.PureComponent<Props> {
                       <div
                         key={`selectOption-${index}`}
                         ref={this.optionsRefArr[index]}
+                        data-test-id={dataTestId.length ? index + '-' + dataTestId : null}
                         className={
                           cn('se55DropdownPara', {
                             'se55DropdownParaHover': activeIndex === index,
@@ -193,7 +198,8 @@ Select.defaultProps = {
   optionClass: '',
   optionsParentClass: '',
   activeOptionBoxClass: '',
-  onChange: () => {}
+  onChange: () => {},
+  dataTestId: ''
 } as DefaultProps;
 
 
@@ -216,6 +222,7 @@ type DefaultProps = {
   /* class for a box in which selected values is shown */
   activeOptionBoxClass: string;
   onChange:(e:React.ChangeEvent<HTMLInputElement>)=> void;
+  dataTestId: string;
 }
 
 export type Props = RequiredProps & DefaultProps;

packages/ui-toolkit/src/components/atoms/TextInputV1/BaseTextInputV1.tsx

@@ -15,6 +15,8 @@ const BaseTextInputV1 = React.forwardRef<HTMLInputElement, TextInputProps>((prop
     variant = 'default',
     size = 'medium',
     label,
+    inputDataTestId = '',
+    errorDataTestId = '',
     PrefixComponent,
     SuffixComponent,
     ...rest
@@ -23,7 +25,9 @@ const BaseTextInputV1 = React.forwardRef<HTMLInputElement, TextInputProps>((prop
   //switch for size
   return (
     <>
-      {label && <Label className='fs14 fw400'>{label}</Label>}
+      {
+        label && <Label className='fs14 fw400'>{label}</Label>
+      }
       <Container
         error={error ? true : false}
         variant={variant}
@@ -32,6 +36,7 @@ const BaseTextInputV1 = React.forwardRef<HTMLInputElement, TextInputProps>((prop
           {PrefixComponent && <TrailingVisContainer variant={variant}>{PrefixComponent()}</TrailingVisContainer>}
           <PrimaryInput
             ref={ref}
+            data-test-id={inputDataTestId.length ? inputDataTestId : null}
             className={calculateInputClass(size)}
             onCopy={onCopy}
             onPaste={onPaste}
@@ -49,6 +54,7 @@ const BaseTextInputV1 = React.forwardRef<HTMLInputElement, TextInputProps>((prop
 
         <ErrorLabel
           className='fs14 fw400'
+          data-test-id={errorDataTestId.length ? errorDataTestId : null}
           error={error ? true : false}
         >
           {error}
@@ -59,6 +65,7 @@ const BaseTextInputV1 = React.forwardRef<HTMLInputElement, TextInputProps>((prop
         <ErrorLabel
           className='fs14 fw400'
           error={error ? true : false}
+          data-test-id={errorDataTestId.length ? errorDataTestId : null}
         >
           {error}
         </ErrorLabel>

packages/ui-toolkit/src/components/atoms/TextInputV1/PaswordTextInputV1.tsx

@@ -36,6 +36,7 @@ const PasswordTrailingVisual = ({ type, setType }:{type:string | undefined; setT
     return (
       <Visibility
         onClick={setType}
+        data-test-id='visibility-icon'
         size={18}
       />
     );
@@ -44,6 +45,7 @@ const PasswordTrailingVisual = ({ type, setType }:{type:string | undefined; setT
   return (
     <VisibilityOff
       onClick={setType}
+      data-test-id='visibility-off-icon'
       size={18}
     />
   );

packages/ui-toolkit/src/components/atoms/TextInputV1/TextInputV1.tsx

@@ -45,6 +45,8 @@ type _TextInputProps = {
   onChange: React.FormEventHandler<HTMLInputElement>;
   clearable?: boolean;
   size?: 'small' | 'medium'| 'large';
+  inputDataTestId?: string;
+  errorDataTestId?: string;
 };
 
 export default TextInputV1;

packages/ui-toolkit/src/components/atoms/Toastify/Toastify.tsx

@@ -46,10 +46,11 @@ class Toastify extends React.PureComponent<Props, State> {
 
   render() {
     const { open, msg } = this.state;
-    const { msgType, position, showCloseBtn } = this.props;
+    const { msgType, position, showCloseBtn, dataTestId } = this.props;
 
     return (
       <div
+        data-test-id={dataTestId?.length ? dataTestId : null}
         className={
           cn('sb10Toastify', {
             'sb10ToastifyShow': open,
@@ -110,6 +111,7 @@ type Props = {
   position?: string;
   showCloseBtn?: boolean;
   autoClose?: boolean;
+  dataTestId?: string;
 };
 
 
@@ -124,7 +126,8 @@ Toastify.defaultProps = {
   msgType: TOASTIFY_TYPE.INFO,
   position: TOASTIFY_POSITION.BOTTOM,
   showCloseBtn: false,
-  autoClose: true
+  autoClose: true,
+  dataTestId: ''
 };
 
 export default Toastify;

packages/ui-toolkit/src/components/atoms/ToggleSwitch/ToggleSwitch.tsx

@@ -7,7 +7,7 @@ const ToggleSwitch = (props: Props) => {
   const {
     switchCircleColor, activeBackgroundColor, width,
     inactiveBackgroundColor, onChange, height,
-    isActive, leftText, rightText
+    isActive, leftText, rightText, dataTestId
   } = props;
 
   // circleDiameter is the diameter of the circular slider which should be smaller than the size of the parent component so as to provide offset between the slider and it's parent
@@ -41,6 +41,7 @@ const ToggleSwitch = (props: Props) => {
       {leftText}
       <div style={switchDivStyle}
         className='sw348reactSwitchDivision'
+        data-test-id={dataTestId.length ? dataTestId : null}
         onClick={(e) => onChange(e)}
       >
         <input
@@ -74,7 +75,8 @@ const defaultProps: DefaultProps = {
   rightText: '',
   inactiveBackgroundColor: 'var(--subText)',
   switchCircleColor: 'var(--constantWhite)',
-  activeBackgroundColor: 'var(--primaryClr)'
+  activeBackgroundColor: 'var(--primaryClr)',
+  dataTestId: ''
 };
 
 
@@ -92,6 +94,7 @@ type DefaultProps = {
   leftText: React.ReactNode;
   rightText: React.ReactNode;
   inactiveBackgroundColor: string;
+  dataTestId: string;
 }
 
 

packages/ui-toolkit/src/components/molecules/RadioButtonGroup/RadioButtonGroup.tsx

@@ -8,7 +8,8 @@ import './radioButtonGroup.css';
 
 const RadioButtonGroup = (props: Props) => {
 
-  const { radioButtons, containerClassName, onSelect, selected, ...restProps } = props;
+  const { radioButtons, containerClassName,
+    dataTestId, onSelect, selected, ...restProps } = props;
 
   return (
     <div id="container"
@@ -27,6 +28,7 @@ const RadioButtonGroup = (props: Props) => {
                 labelClassName={item.labelClassName}
                 parentClassName={item.parentClassName}
                 radioDirection={item.radioDirection}
+                dataTestId= {dataTestId ? index + '-' + dataTestId + '-radio-button' : ''}
               />
             </div>
           );
@@ -38,12 +40,14 @@ const RadioButtonGroup = (props: Props) => {
 
 
 const defaultProps: DefaultProps = {
-  containerClassName: ''
+  containerClassName: '',
+  dataTestId: ''
 };
 
 
 type DefaultProps = {
   containerClassName: string;
+  dataTestId: string;
 }