refactor: refactor Input tests

Author: ElenaBitire

src/ui/input.test.tsx

@@ -9,53 +9,47 @@ afterEach(cleanup);
 
 describe('Input component ', () => {
   it('renders correctly ', () => {
-    render(<Input testID="text-input" />);
-    const input = screen.getByTestId('text-input');
-    expect(input).toBeOnTheScreen();
-    expect(screen.getByTestId('text-input')).toBeOnTheScreen();
+    render(<Input testID="input" />);
+    expect(screen.getByTestId('input')).toBeOnTheScreen();
   });
 
   it('should render the placeholder correctly ', () => {
-    render(<Input testID="text-input" placeholder="Enter your username" />);
-    expect(screen.getByTestId('text-input')).toBeOnTheScreen();
+    render(<Input testID="input" placeholder="Enter your username" />);
+    expect(screen.getByTestId('input')).toBeOnTheScreen();
     expect(
       screen.getByPlaceholderText('Enter your username')
     ).toBeOnTheScreen();
   });
 
   it('should render the label correctly ', () => {
-    render(<Input testID="text-input" label="Username" />);
-    expect(screen.getByTestId('text-input')).toBeOnTheScreen();
-    expect(screen.getByTestId('text-input-label')).toBeOnTheScreen();
-    expect(screen.getByTestId('text-input-label')?.props.children).toBe(
-      'Username'
-    );
+    render(<Input testID="input" label="Username" />);
+    expect(screen.getByTestId('input')).toBeOnTheScreen();
+    expect(screen.getByTestId('input-label')).toBeOnTheScreen();
+    expect(screen.getByTestId('input-label')?.props.children).toBe('Username');
   });
 
   it('should render the error message correctly ', () => {
-    render(<Input testID="text-input" error="This is an error message" />);
-    expect(screen.getByTestId('text-input')).toBeOnTheScreen();
-    expect(screen.getByTestId('text-input-error')).toBeOnTheScreen();
-    expect(screen.getByTestId('text-input-error')?.props.children).toBe(
+    render(<Input testID="input" error="This is an error message" />);
+    expect(screen.getByTestId('input')).toBeOnTheScreen();
+    expect(screen.getByTestId('input-error')).toBeOnTheScreen();
+    expect(screen.getByTestId('input-error')?.props.children).toBe(
       'This is an error message'
     );
   });
   it('should render the label, error message & placeholder correctly ', () => {
     render(
       <Input
-        testID="text-input"
+        testID="input"
         label="Username"
         placeholder="Enter your username"
         error="This is an error message"
       />
     );
-    expect(screen.getByTestId('text-input')).toBeOnTheScreen();
-    expect(screen.getByTestId('text-input-label')).toBeOnTheScreen();
-    expect(screen.getByTestId('text-input-label')?.props.children).toBe(
-      'Username'
-    );
-    expect(screen.getByTestId('text-input-error')).toBeOnTheScreen();
-    expect(screen.getByTestId('text-input-error')?.props.children).toBe(
+    expect(screen.getByTestId('input')).toBeOnTheScreen();
+    expect(screen.getByTestId('input-label')).toBeOnTheScreen();
+    expect(screen.getByTestId('input-label')?.props.children).toBe('Username');
+    expect(screen.getByTestId('input-error')).toBeOnTheScreen();
+    expect(screen.getByTestId('input-error')?.props.children).toBe(
       'This is an error message'
     );
     expect(
@@ -65,7 +59,7 @@ describe('Input component ', () => {
 
   it('should trigger onFocus event correctly ', () => {
     const onFocus = jest.fn();
-    render(<Input onFocus={onFocus} />);
+    render(<Input testID="input" onFocus={onFocus} />);
 
     const input = screen.getByTestId('input');
     fireEvent(input, 'focus');
@@ -74,25 +68,25 @@ describe('Input component ', () => {
 
   it('should trigger onBlur event correctly ', () => {
     const onBlur = jest.fn();
-    render(<Input onBlur={onBlur} />);
+    render(<Input testID="input" onBlur={onBlur} />);
 
     const input = screen.getByTestId('input');
     fireEvent(input, 'blur');
     expect(onBlur).toHaveBeenCalledTimes(1);
   });
   it('should trigger onChangeText event correctly', () => {
     const onChangeText = jest.fn();
-    render(<Input onChangeText={onChangeText} />);
+    render(<Input testID="input" onChangeText={onChangeText} />);
 
     const input = screen.getByTestId('input');
     fireEvent.changeText(input, 'test text');
     expect(onChangeText).toHaveBeenCalledTimes(1);
     expect(onChangeText).toHaveBeenCalledWith('test text');
   });
   it('should be disabled when disabled prop is true', () => {
-    render(<Input testID="text-input" disabled={true} />);
+    render(<Input testID="input" disabled={true} />);
 
-    const input = screen.getByTestId('text-input');
+    const input = screen.getByTestId('input');
     expect(input.props.disabled).toBe(true);
   });
 });

src/ui/input.tsx

@@ -70,7 +70,7 @@ interface ControlledInputProps<T extends FieldValues>
     InputControllerType<T> {}
 
 export const Input = React.forwardRef<TextInput, NInputProps>((props, ref) => {
-  const { label, error, testID = 'input', ...inputProps } = props;
+  const { label, error, testID, ...inputProps } = props;
   const [isFocussed, setIsFocussed] = React.useState(false);
   const onBlur = React.useCallback(() => setIsFocussed(false), []);
   const onFocus = React.useCallback(() => setIsFocussed(true), []);
@@ -88,7 +88,10 @@ export const Input = React.forwardRef<TextInput, NInputProps>((props, ref) => {
   return (
     <View className={styles.container()}>
       {label && (
-        <Text testID={`${testID}-label`} className={styles.label()}>
+        <Text
+          testID={testID ? `${testID}-label` : undefined}
+          className={styles.label()}
+        >
           {label}
         </Text>
       )}
@@ -107,7 +110,7 @@ export const Input = React.forwardRef<TextInput, NInputProps>((props, ref) => {
       />
       {error && (
         <Text
-          testID={`${testID}-error`}
+          testID={testID ? `${testID}-error` : undefined}
           className="text-sm text-danger-400 dark:text-danger-600"
         >
           {error}