test: add data-test-id for inputs

Author: adarshpastakia

packages/form/src/input/Checkbox.tsx

@@ -78,12 +78,15 @@ export interface CheckboxProps extends RefProp<HTMLInputElement> {
    * cutom checkbox checked icon
    */
   iconChecked?: string;
+
+  name?: string;
 }
 
 export const Checkbox = ({
   ref,
   label,
   value,
+  name,
   checked,
   invalid,
   disabled,
@@ -92,6 +95,7 @@ export const Checkbox = ({
   icon,
   iconChecked,
   onChange,
+  ...rest
 }: CheckboxProps) => {
   const [actualValue, setActualValue] = useState(false);
   const deferred = useDeferredValue(!!checked);
@@ -137,9 +141,11 @@ export const Checkbox = ({
         ref={ref}
         size={1}
         tabIndex={0}
+        name={name}
         autoComplete="off"
         checked={actualValue}
         onChange={handleChange}
+        {...rest}
       />
       <Icon
         className={classNames(

packages/form/src/input/File.tsx

@@ -58,6 +58,7 @@ export const FileInput = ({
   placeholder,
   autoFocus,
   error,
+  name,
   multiple,
   onChange,
   onEnterPressed,
@@ -155,6 +156,8 @@ export const FileInput = ({
         size={1}
         type="file"
         multiple={multiple}
+        data-test-id={name}
+        name={name}
         ref={ref}
         autoComplete="off"
         {...{ autoFocus }}

packages/form/src/input/Input.tsx

@@ -101,6 +101,7 @@ export const Input = ({
         placeholder={placeholder}
         disabled={disabled}
         readOnly={readOnly}
+        data-test-id={name}
         name={name}
         size={1}
         type={type}

packages/form/src/input/Number.tsx

@@ -61,6 +61,7 @@ export const Number = ({
   required,
   placeholder,
   autoFocus,
+  name,
   min,
   max,
   step,
@@ -109,6 +110,8 @@ export const Number = ({
         placeholder={placeholder}
         disabled={disabled}
         readOnly={readOnly}
+        data-test-id={name}
+        name={name}
         type="number"
         size={1}
         min={min}

packages/form/src/input/Password.tsx

@@ -51,6 +51,7 @@ export interface PasswordProps extends InputProps, RefProp<HTMLInputElement> {
 export const Password = ({
   ref,
   value,
+  name,
   strength,
   invalid,
   readOnly,
@@ -124,6 +125,8 @@ export const Password = ({
         placeholder={placeholder}
         disabled={disabled}
         readOnly={readOnly}
+        data-test-id={name}
+        name={name}
         size={1}
         type={show ? "text" : "password"}
         ref={ref}

packages/form/src/input/Radio.tsx

@@ -81,6 +81,7 @@ export const Radio = ({
   icon,
   iconChecked,
   onChange,
+  ...rest
 }: RadioProps) => {
   const iconOn = useMemo(
     () => iconChecked ?? icon ?? CoreIcons.radioOn,
@@ -120,6 +121,7 @@ export const Radio = ({
         value={value}
         autoComplete="off"
         onChange={handleChange}
+        {...rest}
       />
       <Icon
         className={classNames(

packages/form/src/input/Search.tsx

@@ -55,6 +55,7 @@ export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
 export const Search = ({
   ref,
   value,
+  name,
   invalid,
   readOnly,
   disabled,
@@ -143,6 +144,8 @@ export const Search = ({
         disabled={disabled}
         readOnly={readOnly}
         size={1}
+        data-test-id={name}
+        name={name}
         type="search"
         ref={ref}
         autoComplete="off"

packages/form/src/input/Switch.tsx

@@ -76,6 +76,8 @@ export interface SwitchProps extends RefProp<HTMLInputElement> {
    * cutom Switch icon
    */
   defaultColor?: ColorType;
+
+  name?: string;
 }
 
 export const Switch = ({
@@ -87,8 +89,10 @@ export const Switch = ({
   error,
   width,
   color,
+  name,
   defaultColor,
   onChange,
+  ...rest
 }: SwitchProps) => {
   const [actualValue, setActualValue] = useState(false);
   const deferred = useDeferredValue(!!checked);
@@ -144,6 +148,7 @@ export const Switch = ({
           autoComplete="off"
           checked={actualValue}
           onChange={handleChange}
+          {...rest}
         />
         <span
           aria-hidden="true"

packages/form/src/input/Textarea.tsx

@@ -53,6 +53,7 @@ export interface TextareaProps
 export const Textarea = ({
   ref,
   value,
+  name,
   invalid,
   readOnly,
   disabled,
@@ -117,6 +118,8 @@ export const Textarea = ({
         disabled={disabled}
         readOnly={readOnly}
         rows={fixedRows}
+        data-test-id={name}
+        name={name}
         ref={ref}
         autoComplete="off"
         {...{ autoFocus }}

packages/form/src/select/List.tsx

@@ -247,6 +247,8 @@ export const List = <T extends AnyObject = string>({
             disabled={disabled}
             value={state.query}
             aria-invalid={invalid}
+            data-test-id={name}
+            name={name}
             className={classNames(
               "appearance-none bg-transparent outline-none border-none ring-0 flex-1 min-w-24",
               disabled && "cursor-not-allowed pointer-events-none",

packages/form/src/select/Select.tsx

@@ -272,6 +272,8 @@ export const Select = <T extends AnyObject = string>({
           disabled={disabled}
           value={state.query}
           aria-invalid={invalid}
+          data-test-id={name}
+          name={name}
           className={classNames(
             "appearance-none bg-transparent outline-none border-none ring-0 flex-1 min-w-24",
             disabled && "cursor-not-allowed pointer-events-none",