@hero-design/rn-work-uikit 1.2.0-alpha.1 → 1.2.0

package/src/components/TextInput/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { act, fireEvent, within } from '@testing-library/react-native';
+import { act, fireEvent, waitFor, within } from '@testing-library/react-native';
 import {
   TextInput as RNTextInput,
   ViewStyle,
@@ -14,57 +14,40 @@ import TextInput, { TextInputHandles } from '../index';
 describe('TextInput', () => {
   describe('when user sees an empty input field', () => {
     it('should display label and icons but hide input content until user interacts', () => {
-      const { toJSON, getByTestId } = renderWithTheme(
+      const { toJSON, getByTestId, queryAllByTestId } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
           prefix="dollar-sign"
           suffix="arrow-down"
-          testID="idle-text-input"
           style={{ borderColor: theme.colors.error }}
         />
       );
 
-      // User should see the main input container
-      const inputContainer = getByTestId('idle-text-input');
-      expect(inputContainer).toBeTruthy();
-
-      // User should see all visual elements
-      const textInput = within(inputContainer).getByTestId('text-input');
-      const inputPrefix = within(inputContainer).getByTestId('input-prefix');
-      const inputLabel = within(inputContainer).getByTestId('input-label');
-      const inputSuffix = within(inputContainer).getByTestId('input-suffix');
-      const inputRowWrapper = within(inputContainer).getByTestId(
-        'input-row-input-wrapper'
-      );
-
+      const textInput = getByTestId('text-input');
       expect(textInput).toBeTruthy();
-      expect(inputPrefix).toBeTruthy();
-      expect(inputLabel).toBeTruthy();
-      expect(inputSuffix).toBeTruthy();
 
-      // User should see the label text with optional indicator
-      expect(
-        within(inputContainer).getByText('Amount (AUD) (Optional)')
-      ).toBeTruthy();
+      // Ensure all visual elements are present
+      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
 
-      // For accessibility: input content should be hidden from screen readers in idle state
-      expect(inputRowWrapper).toHaveProp('accessibilityElementsHidden', true);
-      expect(inputPrefix).toHaveProp('accessibilityElementsHidden', true);
+      // User should see the label text
+      const inputLabel = getByTestId('input-label');
+      expect(inputLabel).toHaveTextContent('Amount (AUD)');
 
       // User should be able to identify the prefix icon through accessibility
-      const prefixIcon = within(inputContainer).getByA11yLabel(
+      const prefixIcon = getByTestId('input-prefix-icon');
+      expect(prefixIcon).toBeTruthy();
+      expect(prefixIcon).toHaveProp(
+        'accessibilityLabel',
         'Prefix icon: dollar-sign'
       );
-      expect(prefixIcon).toBeTruthy();
-      expect(
-        within(inputContainer).getByTestId('input-prefix-icon')
-      ).toBeTruthy();
 
       expect(toJSON()).toMatchSnapshot();
     });
 
     it('should not show label when no label text is provided', () => {
-      const { getByTestId } = renderWithTheme(
+      const { queryByTestId, queryAllByTestId } = renderWithTheme(
         <TextInput
           prefix="dollar-sign"
           suffix="arrow-down"
@@ -72,21 +55,12 @@ describe('TextInput', () => {
         />
       );
 
-      const inputContainer = getByTestId('idle-text-input');
-      expect(inputContainer).toBeTruthy();
-
       // User should not see any label element when none is provided
-      expect(
-        within(inputContainer).queryAllByTestId('input-label')
-      ).toHaveLength(0);
+      expect(queryAllByTestId('input-label')).toHaveLength(0);
 
       // Input elements should still be present but hidden until interaction
-      expect(
-        within(inputContainer).queryAllByTestId('text-input')
-      ).toHaveLength(1);
-      expect(
-        within(inputContainer).queryAllByTestId('input-prefix')
-      ).toHaveLength(1);
+      expect(queryByTestId('text-input')).toBeTruthy();
+      expect(queryByTestId('input-prefix')).toBeTruthy();
     });
 
     it('should respond to user interactions with proper callbacks', () => {
@@ -99,19 +73,17 @@ describe('TextInput', () => {
           label="Amount (AUD)"
           prefix="dollar-sign"
           suffix="arrow-down"
-          testID="idle-text-input"
           onChangeText={onChangeText}
           onBlur={onBlur}
           onFocus={onFocus}
         />
       );
 
-      const inputContainer = getByTestId('idle-text-input');
-      const labelElement = within(inputContainer).getByTestId('input-label');
-      const textInput = within(inputContainer).getByTestId('text-input');
+      const textInput = getByTestId('text-input');
 
-      // User clicks on the label to focus the input
-      fireEvent.press(labelElement);
+      // User focuses the input
+      fireEvent(textInput, 'focus');
+      expect(onFocus).toHaveBeenCalledTimes(1);
 
       // User types text into the input
       fireEvent.changeText(textInput, 'Thong Quach');
@@ -120,16 +92,12 @@ describe('TextInput', () => {
       // User moves focus away from the input
       fireEvent(textInput, 'blur');
       expect(onBlur).toHaveBeenCalledTimes(1);
-
-      // User focuses the input again
-      fireEvent(textInput, 'focus');
-      expect(onFocus).toHaveBeenCalledTimes(1);
     });
   });
 
   describe('when user sees input with custom prefix and suffix elements', () => {
     it('should display custom React components instead of icon names', () => {
-      const { toJSON, queryAllByTestId, queryAllByText } = renderWithTheme(
+      const { toJSON, getByTestId } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
           prefix={<Icon icon="eye-circle" testID="prefix-element" />}
@@ -138,15 +106,13 @@ describe('TextInput', () => {
         />
       );
 
-      // User should see the label without asterisk (since required styling is handled differently)
-      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
-      expect(queryAllByText('*')).toHaveLength(0);
+      // User should see the label with an asterisk
+      const textInput = getByTestId('text-input');
+      expect(textInput).toBeTruthy();
 
       // User should see all visual elements including custom components
-      expect(queryAllByTestId('input-label')).toHaveLength(1);
-      expect(queryAllByTestId('suffix-element')).toHaveLength(1);
-      expect(queryAllByTestId('text-input')).toHaveLength(1);
-      expect(queryAllByTestId('prefix-element')).toHaveLength(1);
+      expect(getByTestId('prefix-element')).toBeTruthy();
+      expect(getByTestId('suffix-element')).toBeTruthy();
 
       expect(toJSON()).toMatchSnapshot();
     });
@@ -154,7 +120,7 @@ describe('TextInput', () => {
 
   describe('when user sees a required field', () => {
     it('should indicate the field is required through styling', () => {
-      const { toJSON, queryAllByTestId, queryAllByText } = renderWithTheme(
+      const { toJSON, getByTestId } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
           prefix="dollar-sign"
@@ -163,13 +129,9 @@ describe('TextInput', () => {
         />
       );
 
-      // User should see the label text
-      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
-      // User should see all input elements
-      expect(queryAllByTestId('input-label')).toHaveLength(1);
-      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
-      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
-      expect(queryAllByTestId('text-input')).toHaveLength(1);
+      // User should see the label text with an asterisk
+      const textInput = getByTestId('text-input');
+      expect(textInput).toBeTruthy();
 
       expect(toJSON()).toMatchSnapshot();
     });
@@ -177,12 +139,7 @@ describe('TextInput', () => {
 
   describe('when user has entered text', () => {
     it('should show the input content and maintain all visual elements', () => {
-      const {
-        toJSON,
-        queryAllByTestId,
-        queryAllByText,
-        queryAllByDisplayValue,
-      } = renderWithTheme(
+      const { toJSON, getByDisplayValue } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
           prefix="dollar-sign"
@@ -191,33 +148,28 @@ describe('TextInput', () => {
         />
       );
 
-      // User should see the label with optional indicator
-      expect(queryAllByText('Amount (AUD) (Optional)')).toHaveLength(1);
-
       // User should see their entered value
-      expect(queryAllByDisplayValue('100')).toHaveLength(1);
-
-      // User should see all visual elements in active state
-      expect(queryAllByTestId('input-label')).toHaveLength(1);
-      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
-      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
-      expect(queryAllByTestId('text-input')).toHaveLength(1);
+      const textInput = getByDisplayValue('100');
+      expect(textInput).toBeTruthy();
 
       expect(toJSON()).toMatchSnapshot();
     });
   });
 
+  describe('when label is not provided', () => {
+    it('should show the input content', () => {
+      const { getByDisplayValue } = renderWithTheme(
+        <TextInput value="This is the content" />
+      );
+      expect(getByDisplayValue('This is the content')).toBeTruthy();
+    });
+  });
+
   describe('when user encounters a read-only field', () => {
     it('should display content but prevent user from editing', () => {
       const onChangeText = jest.fn();
       const onFocus = jest.fn();
-      const {
-        toJSON,
-        queryAllByTestId,
-        queryAllByText,
-        queryAllByDisplayValue,
-        getByTestId,
-      } = renderWithTheme(
+      const { toJSON, getByDisplayValue, getByTestId } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
           prefix="dollar-sign"
@@ -226,40 +178,26 @@ describe('TextInput', () => {
           value="Read-only value"
           onChangeText={onChangeText}
           onFocus={onFocus}
-          testID="readonly-input"
         />
       );
 
       // User should see the content and label
-      expect(queryAllByText('Amount (AUD) (Optional)')).toHaveLength(1);
-      expect(queryAllByDisplayValue('Read-only value')).toHaveLength(1);
-
-      // User should see all visual elements
-      expect(queryAllByTestId('input-label')).toHaveLength(1);
-      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
-      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
-      expect(queryAllByTestId('text-input')).toHaveLength(1);
-
-      // User should not be able to interact with the input due to Pressable being disabled
-      const inputContainer = getByTestId('readonly-input');
-      expect(inputContainer).toBeDisabled();
-
-      // User should see the input marked as read-only through accessibility
       const textInput = getByTestId('text-input');
-      expect(textInput).toBeDisabled();
+      expect(textInput).toBeTruthy();
+      expect(getByDisplayValue('Read-only value')).toBeTruthy();
 
       // The input should have editable=false prop
       expect(textInput).toHaveProp('editable', false);
 
       // Simulate user trying to type
       fireEvent.changeText(textInput, 'New value');
+      expect(onChangeText).not.toHaveBeenCalled();
 
       // It should still show the old value
       expect(textInput.props.value).toBe('Read-only value');
 
       // User should still see the original value displayed
-      expect(queryAllByDisplayValue('Read-only value')).toHaveLength(1);
-      expect(queryAllByDisplayValue('New value')).toHaveLength(0);
+      expect(getByDisplayValue('Read-only value')).toBeTruthy();
 
       expect(toJSON()).toMatchSnapshot();
     });
@@ -267,24 +205,18 @@ describe('TextInput', () => {
 
   describe('when user sees a loading state', () => {
     it('should show loading indicator in place of suffix icon', () => {
-      const { toJSON, queryAllByTestId, queryAllByText, getByTestId } =
-        renderWithTheme(
-          <TextInput
-            label="Amount (AUD)"
-            prefix="dollar-sign"
-            suffix="arrow-down"
-            loading
-            value="100"
-          />
-        );
-
-      // User should see the label and content
-      expect(queryAllByText('Amount (AUD) (Optional)')).toHaveLength(1);
+      const { toJSON, getByTestId } = renderWithTheme(
+        <TextInput
+          label="Amount (AUD)"
+          prefix="dollar-sign"
+          suffix="arrow-down"
+          loading
+          value="100"
+        />
+      );
 
-      // User should see all input elements
-      expect(queryAllByTestId('input-label')).toHaveLength(1);
-      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
-      expect(queryAllByTestId('text-input')).toHaveLength(1);
+      const textInput = getByTestId('text-input');
+      expect(textInput).toBeTruthy();
 
       // User should see loading indicator instead of regular suffix
       const suffixContainer = getByTestId('input-suffix');
@@ -301,60 +233,48 @@ describe('TextInput', () => {
 
   describe('when user sees a textarea with character count', () => {
     it('should display multiline input with character counter', () => {
-      const { toJSON, queryAllByTestId, queryAllByText, getByTestId } =
-        renderWithTheme(
-          <TextInput
-            label="Amount (AUD)"
-            prefix="dollar-sign"
-            suffix="arrow-down"
-            value="100"
-            maxLength={255}
-            variant="textarea"
-          />
-        );
+      const { toJSON, getByTestId, getByText } = renderWithTheme(
+        <TextInput
+          label="Amount (AUD)"
+          prefix="dollar-sign"
+          suffix="arrow-down"
+          value="100"
+          maxLength={255}
+          variant="textarea"
+        />
+      );
 
       // User should see the label and character count
-      expect(queryAllByText('Amount (AUD) (Optional)')).toHaveLength(1);
-      expect(queryAllByText('3/255')).toHaveLength(1);
-
-      // User should see all visual elements
-      expect(queryAllByTestId('input-label')).toHaveLength(1);
-      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
-      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
-      expect(queryAllByTestId('text-input')).toHaveLength(1);
+      const textInput = getByTestId('text-input');
+      expect(textInput).toBeTruthy();
+      expect(getByText('3/255')).toBeTruthy();
 
       // User should be able to enter multiple lines
-      expect(getByTestId('text-input')).toHaveProp('multiline', true);
+      expect(textInput).toHaveProp('multiline', true);
 
       expect(toJSON()).toMatchSnapshot();
     });
 
     it('should hide character count when user requests it', () => {
-      const { toJSON, queryAllByTestId, queryAllByText, getByTestId } =
-        renderWithTheme(
-          <TextInput
-            label="Amount (AUD)"
-            prefix="dollar-sign"
-            suffix="arrow-down"
-            value="100"
-            maxLength={255}
-            variant="textarea"
-            hideCharacterCount
-          />
-        );
+      const { toJSON, queryByText, getByTestId } = renderWithTheme(
+        <TextInput
+          label="Amount (AUD)"
+          prefix="dollar-sign"
+          suffix="arrow-down"
+          value="100"
+          maxLength={255}
+          hideCharacterCount
+          variant="textarea"
+        />
+      );
 
       // User should see the label but not the character count
-      expect(queryAllByText('Amount (AUD) (Optional)')).toHaveLength(1);
-      expect(queryAllByText('3/255')).toHaveLength(0);
-
-      // User should see all visual elements
-      expect(queryAllByTestId('input-label')).toHaveLength(1);
-      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
-      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
-      expect(queryAllByTestId('text-input')).toHaveLength(1);
+      const textInput = getByTestId('text-input');
+      expect(textInput).toBeTruthy();
+      expect(queryByText('3/255')).toBeFalsy();
 
       // User should still be able to enter multiple lines
-      expect(getByTestId('text-input')).toHaveProp('multiline', true);
+      expect(textInput).toHaveProp('multiline', true);
 
       expect(toJSON()).toMatchSnapshot();
     });
@@ -363,25 +283,10 @@ describe('TextInput', () => {
   describe('when user encounters a disabled field', () => {
     it('should display content but prevent any user interaction', () => {
       const { toJSON, getByTestId } = renderWithTheme(
-        <TextInput
-          label="Amount (AUD)"
-          required
-          disabled
-          value="100"
-          testID="disabled-text-input"
-        />
+        <TextInput label="Amount (AUD)" disabled value="100" />
       );
 
-      const disabledInput = getByTestId('disabled-text-input');
-      const textInput = within(disabledInput).getByTestId('text-input');
-      const inputLabel = within(disabledInput).getByTestId('input-label');
-
-      // User should see the structure but understand it's disabled
-      expect(disabledInput).toBeTruthy();
-      expect(textInput).toBeTruthy();
-      expect(inputLabel).toBeTruthy();
-
-      // User should not be able to interact with the input
+      const textInput = getByTestId('text-input');
       expect(textInput).toBeDisabled();
 
       // Visual styling should indicate disabled state
@@ -413,7 +318,7 @@ describe('TextInput', () => {
 
   describe('when user sees an error state', () => {
     it('should display error message to help user understand the issue', () => {
-      const { toJSON, queryAllByText } = renderWithTheme(
+      const { toJSON, getByText } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
           prefix="dollar-sign"
@@ -423,8 +328,7 @@ describe('TextInput', () => {
       );
 
       // User should see both the label and error message
-      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
-      expect(queryAllByText('This field is required')).toHaveLength(1);
+      expect(getByText('This field is required')).toBeTruthy();
 
       expect(toJSON()).toMatchSnapshot();
     });
@@ -432,7 +336,7 @@ describe('TextInput', () => {
 
   describe('when user sees helper text', () => {
     it('should display guidance text to assist user understanding', () => {
-      const { toJSON, queryAllByText } = renderWithTheme(
+      const { toJSON, getByText } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
           prefix="dollar-sign"
@@ -442,8 +346,7 @@ describe('TextInput', () => {
       );
 
       // User should see both the label and helpful guidance
-      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
-      expect(queryAllByText('This is helper text')).toHaveLength(1);
+      expect(getByText('This is helper text')).toBeTruthy();
 
       expect(toJSON()).toMatchSnapshot();
     });
@@ -451,8 +354,8 @@ describe('TextInput', () => {
 
   describe('when user interacts with placeholder text', () => {
     describe('starting from empty field', () => {
-      it('should show placeholder when user focuses, hide when user leaves empty', () => {
-        const wrapper = renderWithTheme(
+      it('should show placeholder when user focuses, hide when user leaves empty', async () => {
+        const { getByTestId, queryByPlaceholderText, toJSON } = renderWithTheme(
           <TextInput
             label="Amount (AUD)"
             prefix="dollar-sign"
@@ -462,21 +365,25 @@ describe('TextInput', () => {
           />
         );
 
-        // User should see the input field
-        expect(wrapper.queryByTestId('text-input')).toBeTruthy();
+        const textInput = getByTestId('text-input');
+        expect(textInput).toBeTruthy();
 
         // User focuses the input field
-        fireEvent(wrapper.getByTestId('text-input'), 'focus');
-        expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeTruthy();
+        fireEvent(textInput, 'focus');
+        await waitFor(() => {
+          expect(queryByPlaceholderText('Enter Amount')).toBeTruthy();
+        });
 
         // User leaves the field empty and moves focus away
-        fireEvent(wrapper.getByTestId('text-input'), 'blur');
-        expect(wrapper.getByTestId('text-input')).toHaveProp(
-          'placeholder',
-          ' '
-        );
+        fireEvent(textInput, 'blur');
+        await waitFor(() => {
+          expect(textInput).toHaveProp('placeholder', ' ');
+        });
 
-        expect(wrapper.toJSON()).toMatchSnapshot();
+        // Input remains empty, so placeholder should be hidden again
+        expect(queryByPlaceholderText('Placeholder')).toBeFalsy();
+
+        expect(toJSON()).toMatchSnapshot();
       });
     });
   });
@@ -484,7 +391,7 @@ describe('TextInput', () => {
   describe('when user provides default values', () => {
     describe('starting with pre-filled content', () => {
       it('should display default value and character count', () => {
-        const wrapper = renderWithTheme(
+        const { getByDisplayValue, getByText, toJSON } = renderWithTheme(
           <TextInput
             label="Amount (AUD)"
             prefix="dollar-sign"
@@ -497,45 +404,46 @@ describe('TextInput', () => {
         );
 
         // User should see the pre-filled value
-        expect(wrapper.queryByDisplayValue('1000')).toBeTruthy();
+        expect(getByDisplayValue('1000')).toBeTruthy();
 
         // User should see character count reflecting the default value
-        expect(wrapper.queryByText('4/255')).toBeTruthy();
+        expect(getByText('4/255')).toBeTruthy();
 
-        expect(wrapper.toJSON()).toMatchSnapshot();
+        expect(toJSON()).toMatchSnapshot();
       });
     });
 
     describe('when both default and controlled values are provided', () => {
       it('should prioritize controlled value over default value', () => {
-        const wrapper = renderWithTheme(
-          <TextInput
-            label="Amount (AUD)"
-            prefix="dollar-sign"
-            required
-            helpText="This is helper text"
-            placeholder="Enter Amount"
-            defaultValue="1000"
-            value="2000"
-            maxLength={255}
-          />
-        );
+        const { getByDisplayValue, queryByDisplayValue, getByText, toJSON } =
+          renderWithTheme(
+            <TextInput
+              label="Amount (AUD)"
+              prefix="dollar-sign"
+              required
+              helpText="This is helper text"
+              placeholder="Enter Amount"
+              defaultValue="1000"
+              value="2000"
+              maxLength={255}
+            />
+          );
 
         // User should see the controlled value, not the default
-        expect(wrapper.queryByDisplayValue('2000')).toBeTruthy();
-        expect(wrapper.queryByDisplayValue('1000')).toBeFalsy();
+        expect(getByDisplayValue('2000')).toBeVisible();
+        expect(queryByDisplayValue('1000')).toBeFalsy();
 
         // Character count should reflect the actual displayed value
-        expect(wrapper.queryByText('4/255')).toBeTruthy();
+        expect(getByText('4/255')).toBeTruthy();
 
-        expect(wrapper.toJSON()).toMatchSnapshot();
+        expect(toJSON()).toMatchSnapshot();
       });
     });
   });
 
   describe('when user applies custom styling', () => {
     it('should respect user-provided background color styling', () => {
-      const wrapper = renderWithTheme(
+      const { getByTestId, toJSON } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
           prefix="dollar-sign"
@@ -549,6 +457,8 @@ describe('TextInput', () => {
         />
       );
 
+      const textInput = getByTestId('text-input');
+
       // Helper function to extract background color from complex React Native styles
       function getBackgroundColor(
         style: StyleProp<ViewStyle> | unknown[]
@@ -578,13 +488,13 @@ describe('TextInput', () => {
       }
 
       // User should see their custom background color applied
-      const textInputStyle = wrapper.getByTestId('text-input').props.style;
+      const textInputStyle = textInput.props.style;
       expect(getBackgroundColor(textInputStyle)).toBe('customColor');
 
-      const borderStyle = wrapper.getByTestId('text-input-border').props.style;
+      const borderStyle = getByTestId('text-input-border').props.style;
       expect(getBackgroundColor(borderStyle)).toBe('customColor');
 
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      expect(toJSON()).toMatchSnapshot();
     });
   });
 
@@ -596,13 +506,12 @@ describe('TextInput', () => {
         }
       >();
 
-      const wrapper = renderWithTheme(
+      const { getByDisplayValue, toJSON } = renderWithTheme(
         <TextInput label="Amount (AUD)" value="2000" ref={ref} />
       );
 
       // User should see the initial value
-      expect(wrapper.queryByDisplayValue('2000')).toBeTruthy();
-      expect(wrapper.queryByDisplayValue('1000')).toBeFalsy();
+      expect(getByDisplayValue('2000')).toBeTruthy();
 
       // External code should be able to control the input programmatically
       const nativeTextInputRef = ref.current?.getNativeTextInputRef();
@@ -629,21 +538,18 @@ describe('TextInput', () => {
         expect(blurSpy).toHaveBeenCalledTimes(1);
       }
 
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      expect(toJSON()).toMatchSnapshot();
     });
   });
 
   describe('when user chooses textarea variant', () => {
     it('should provide multiline text input experience', () => {
-      const { toJSON, queryByText, queryByDisplayValue } = renderWithTheme(
+      const { toJSON, getByDisplayValue } = renderWithTheme(
         <TextInput label="Amount (AUD)" value="2000" variant="textarea" />
       );
 
-      // User should see the label with optional indicator
-      expect(queryByText('Amount (AUD) (Optional)')).toBeTruthy();
-
       // User should see their entered value
-      expect(queryByDisplayValue('2000')).toBeTruthy();
+      expect(getByDisplayValue('2000')).toBeTruthy();
 
       expect(toJSON()).toMatchSnapshot();
     });
@@ -652,15 +558,8 @@ describe('TextInput', () => {
   describe('when user encounters an error state that needs to be corrected', () => {
     it('should allow focusing input even when error is present', () => {
       const onFocus = jest.fn();
-      const onBlur = jest.fn();
       const { getByTestId } = renderWithTheme(
-        <TextInput
-          label="Email"
-          error="Please enter a valid email address"
-          onFocus={onFocus}
-          onBlur={onBlur}
-          testID="error-input"
-        />
+        <TextInput label="Email" error="Invalid Email" onFocus={onFocus} />
       );
 
       // User should be able to focus the input despite the error
@@ -668,32 +567,112 @@ describe('TextInput', () => {
       fireEvent(textInput, 'focus');
 
       // Should trigger focus callback
-      expect(onFocus).toHaveBeenCalledTimes(1);
-
-      // User should be able to blur the input
-      fireEvent(textInput, 'blur');
-      expect(onBlur).toHaveBeenCalledTimes(1);
+      expect(onFocus).toHaveBeenCalled();
     });
 
-    it('should display focused styling when error input is focused', () => {
+    it('should display focused styling when error input is focused', async () => {
       const { getByTestId } = renderWithTheme(
-        <TextInput
-          label="Email"
-          error="Please enter a valid email address"
-          testID="error-input"
-        />
+        <TextInput label="Email" error="Invalid Email" />
       );
 
-      // Get the border element
-      const border = getByTestId('text-input-border');
-
       // Focus the input
       const textInput = getByTestId('text-input');
       fireEvent(textInput, 'focus');
 
-      // Border should have focused styling (themeFocused=true)
-      expect(border).toHaveProp('themeFocused', true);
-      expect(border).toHaveProp('themeState', 'error');
+      await waitFor(() => {
+        const border = getByTestId('text-input-border');
+        expect(border).toHaveProp('themeFocused', true);
+        expect(border).toHaveProp('themeState', 'error');
+      });
+    });
+  });
+
+  describe('when text is changed in the input', () => {
+    it('updates the display value', () => {
+      const ControllableInput = () => {
+        const [value, setValue] = React.useState('');
+        return (
+          <TextInput
+            label="Amount (AUD)"
+            value={value}
+            onChangeText={setValue}
+          />
+        );
+      };
+      const { getByTestId, getByDisplayValue } = renderWithTheme(
+        <ControllableInput />
+      );
+
+      fireEvent.changeText(getByTestId('text-input'), '100');
+      expect(getByDisplayValue('100')).toBeTruthy();
     });
+
+    it('does not update when not editable', () => {
+      const ControllableInput = () => {
+        const [value, setValue] = React.useState('hello');
+        return (
+          <TextInput
+            label="Amount (AUD)"
+            value={value}
+            onChangeText={setValue}
+            editable={false}
+          />
+        );
+      };
+      const { getByTestId, getByDisplayValue } = renderWithTheme(
+        <ControllableInput />
+      );
+
+      // This should not work
+      fireEvent.changeText(getByTestId('text-input'), 'new value');
+
+      // show old value
+      expect(getByDisplayValue('hello')).toBeTruthy();
+    });
+
+    it('allows user to press label to focus and type', () => {
+      const ControllableInput = () => {
+        const [value, setValue] = React.useState('');
+        return (
+          <TextInput label="My Label" value={value} onChangeText={setValue} />
+        );
+      };
+      const { getByText, getByDisplayValue, getByTestId } = renderWithTheme(
+        <ControllableInput />
+      );
+
+      // Pressing the label should focus the input
+      fireEvent.press(getByText('My Label'));
+
+      // Now we can type into the focused input
+      fireEvent.changeText(getByTestId('text-input'), 'hello');
+
+      // Verify the value has changed
+      expect(getByDisplayValue('hello')).toBeVisible();
+    });
+  });
+
+  it('should allow user to type text', () => {
+    const handleChangeText = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <TextInput
+        label="Email"
+        onChangeText={handleChangeText}
+        testID="email-input-container"
+      />
+    );
+
+    // 1. Get both the container and the actual input field
+    const container = getByTestId('email-input-container');
+    const textInput = getByTestId('text-input');
+
+    // 2. Focus the component by interacting with the container
+    fireEvent(container, 'focus');
+
+    // 3. Type text by firing changeText on the input field itself
+    fireEvent.changeText(textInput, 'hello world');
+
+    // 4. Assert that your onChangeText handler was called with the correct text
+    expect(handleChangeText).toHaveBeenCalledWith('hello world');
   });
 });