@hero-design/rn-work-uikit 1.9.5 → 1.10.0

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

@@ -1,679 +0,0 @@
-import React from 'react';
-import { act, fireEvent, waitFor, within } from '@testing-library/react-native';
-import type {
-  TextInput as RNTextInput,
-  ViewStyle,
-  StyleProp,
-} from 'react-native';
-import { StyleSheet } from 'react-native';
-import { Icon } from '@hero-design/rn';
-import { theme } from '../../..';
-import renderWithTheme from '../../../../testUtils/renderWithTheme';
-import type { TextInputHandles } from '../index';
-import TextInput 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, queryAllByTestId } = renderWithTheme(
-        <TextInput
-          label="Amount (AUD)"
-          prefix="dollar-sign"
-          suffix="arrow-down"
-          style={{ borderColor: theme.colors.error }}
-        />
-      );
-
-      const textInput = getByTestId('text-input');
-      expect(textInput).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);
-
-      // User should see the label text
-      const inputLabel = getByTestId('input-label');
-      expect(inputLabel).toHaveTextContent('Amount (AUD) (Optional)');
-
-      // User should be able to identify the prefix icon through accessibility
-      const prefixIcon = getByTestId('input-prefix-icon');
-      expect(prefixIcon).toBeTruthy();
-      expect(prefixIcon).toHaveProp(
-        'accessibilityLabel',
-        'Prefix icon: dollar-sign'
-      );
-
-      expect(toJSON()).toMatchSnapshot();
-    });
-
-    it('should not show label when no label text is provided', () => {
-      const { queryByTestId, queryAllByTestId } = renderWithTheme(
-        <TextInput
-          prefix="dollar-sign"
-          suffix="arrow-down"
-          testID="idle-text-input"
-        />
-      );
-
-      // User should not see any label element when none is provided
-      expect(queryAllByTestId('input-label')).toHaveLength(0);
-
-      // Input elements should still be present but hidden until interaction
-      expect(queryByTestId('text-input-idle-text-input')).toBeTruthy();
-      expect(queryByTestId('input-prefix')).toBeTruthy();
-    });
-
-    it('should respond to user interactions with proper callbacks', () => {
-      const onChangeText = jest.fn();
-      const onBlur = jest.fn();
-      const onFocus = jest.fn();
-
-      const { getByTestId } = renderWithTheme(
-        <TextInput
-          label="Amount (AUD)"
-          prefix="dollar-sign"
-          suffix="arrow-down"
-          onChangeText={onChangeText}
-          onBlur={onBlur}
-          onFocus={onFocus}
-        />
-      );
-
-      const textInput = getByTestId('text-input');
-
-      // User focuses the input
-      fireEvent(textInput, 'focus');
-      expect(onFocus).toHaveBeenCalledTimes(1);
-
-      // User types text into the input
-      fireEvent.changeText(textInput, 'Thong Quach');
-      expect(onChangeText).toHaveBeenCalledWith('Thong Quach');
-
-      // User moves focus away from the input
-      fireEvent(textInput, 'blur');
-      expect(onBlur).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, getByTestId } = renderWithTheme(
-        <TextInput
-          label="Amount (AUD)"
-          prefix={<Icon icon="eye-circle" testID="prefix-element" />}
-          suffix={<Icon icon="eye-invisible" testID="suffix-element" />}
-          required
-        />
-      );
-
-      // 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(getByTestId('prefix-element')).toBeTruthy();
-      expect(getByTestId('suffix-element')).toBeTruthy();
-
-      expect(toJSON()).toMatchSnapshot();
-    });
-  });
-
-  describe('when user sees a required field', () => {
-    it('should indicate the field is required through styling', () => {
-      const { toJSON, getByTestId } = renderWithTheme(
-        <TextInput
-          label="Amount (AUD)"
-          prefix="dollar-sign"
-          suffix="arrow-down"
-          required
-        />
-      );
-
-      // User should see the label text with an asterisk
-      const textInput = getByTestId('text-input');
-      expect(textInput).toBeTruthy();
-
-      expect(toJSON()).toMatchSnapshot();
-    });
-  });
-
-  describe('when user has entered text', () => {
-    it('should show the input content and maintain all visual elements', () => {
-      const { toJSON, getByDisplayValue } = renderWithTheme(
-        <TextInput
-          label="Amount (AUD)"
-          prefix="dollar-sign"
-          suffix="arrow-down"
-          value="100"
-        />
-      );
-
-      // User should see their entered value
-      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, getByDisplayValue, getByTestId } = renderWithTheme(
-        <TextInput
-          label="Amount (AUD)"
-          prefix="dollar-sign"
-          suffix="arrow-down"
-          editable={false}
-          value="Read-only value"
-          onChangeText={onChangeText}
-          onFocus={onFocus}
-        />
-      );
-
-      // User should see the content and label
-      const textInput = getByTestId('text-input');
-      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(getByDisplayValue('Read-only value')).toBeTruthy();
-
-      expect(toJSON()).toMatchSnapshot();
-    });
-  });
-
-  describe('when user sees a loading state', () => {
-    it('should show loading indicator in place of suffix icon', () => {
-      const { toJSON, getByTestId } = renderWithTheme(
-        <TextInput
-          label="Amount (AUD)"
-          prefix="dollar-sign"
-          suffix="arrow-down"
-          loading
-          value="100"
-        />
-      );
-
-      const textInput = getByTestId('text-input');
-      expect(textInput).toBeTruthy();
-
-      // User should see loading indicator instead of regular suffix
-      const suffixContainer = getByTestId('input-suffix');
-      expect(suffixContainer).toBeTruthy();
-
-      const loadingIcon = within(suffixContainer).getByLabelText(
-        'Suffix icon: loading'
-      );
-      expect(loadingIcon).toBeTruthy();
-
-      expect(toJSON()).toMatchSnapshot();
-    });
-  });
-
-  describe('when user sees a textarea with character count', () => {
-    it('should display multiline input with character counter', () => {
-      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
-      const textInput = getByTestId('text-input');
-      expect(textInput).toBeTruthy();
-      expect(getByText('3/255')).toBeTruthy();
-
-      // User should be able to enter multiple lines
-      expect(textInput).toHaveProp('multiline', true);
-
-      expect(toJSON()).toMatchSnapshot();
-    });
-
-    it('should hide character count when user requests it', () => {
-      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
-      const textInput = getByTestId('text-input');
-      expect(textInput).toBeTruthy();
-      expect(queryByText('3/255')).toBeFalsy();
-
-      // User should still be able to enter multiple lines
-      expect(textInput).toHaveProp('multiline', true);
-
-      expect(toJSON()).toMatchSnapshot();
-    });
-  });
-
-  describe('when user encounters a disabled field', () => {
-    it('should display content but prevent any user interaction', () => {
-      const { toJSON, getByTestId } = renderWithTheme(
-        <TextInput label="Amount (AUD)" disabled value="100" />
-      );
-
-      const textInput = getByTestId('text-input');
-      expect(textInput).toBeDisabled();
-
-      // Visual styling should indicate disabled state
-      const borderElement = getByTestId('text-input-border');
-      expect(borderElement).toBeTruthy();
-
-      // Helper function to extract border color from complex React Native styles
-      function getBorderColor(style: unknown): string | undefined {
-        if (Array.isArray(style)) {
-          return style.reduce<string | undefined>((result, styleItem) => {
-            if (result) return result;
-            return getBorderColor(styleItem);
-          }, undefined);
-        }
-        if (style && typeof style === 'object') {
-          const flattened = StyleSheet.flatten(style as StyleProp<ViewStyle>);
-          return flattened?.borderColor as string | undefined;
-        }
-        return undefined;
-      }
-
-      // User should see disabled styling (muted border color)
-      const borderColor = getBorderColor(borderElement.props.style);
-      expect(borderColor).toBe('#bfc1c5');
-
-      expect(toJSON()).toMatchSnapshot();
-    });
-  });
-
-  describe('when user sees an error state', () => {
-    it('should display error message to help user understand the issue', () => {
-      const { toJSON, getByText } = renderWithTheme(
-        <TextInput
-          label="Amount (AUD)"
-          prefix="dollar-sign"
-          required
-          error="This field is required"
-        />
-      );
-
-      // User should see both the label and error message
-      expect(getByText('This field is required')).toBeTruthy();
-
-      expect(toJSON()).toMatchSnapshot();
-    });
-  });
-
-  describe('when user sees helper text', () => {
-    it('should display guidance text to assist user understanding', () => {
-      const { toJSON, getByText } = renderWithTheme(
-        <TextInput
-          label="Amount (AUD)"
-          prefix="dollar-sign"
-          required
-          helpText="This is helper text"
-        />
-      );
-
-      // User should see both the label and helpful guidance
-      expect(getByText('This is helper text')).toBeTruthy();
-
-      expect(toJSON()).toMatchSnapshot();
-    });
-  });
-
-  describe('when user interacts with placeholder text', () => {
-    describe('starting from empty field', () => {
-      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"
-            required
-            helpText="This is helper text"
-            placeholder="Enter Amount"
-          />
-        );
-
-        const textInput = getByTestId('text-input');
-        expect(textInput).toBeTruthy();
-
-        // User focuses the input field
-        fireEvent(textInput, 'focus');
-        await waitFor(() => {
-          expect(queryByPlaceholderText('Enter Amount')).toBeTruthy();
-        });
-
-        // User leaves the field empty and moves focus away
-        fireEvent(textInput, 'blur');
-        await waitFor(() => {
-          expect(textInput).toHaveProp('placeholder', ' ');
-        });
-
-        // Input remains empty, so placeholder should be hidden again
-        expect(queryByPlaceholderText('Placeholder')).toBeFalsy();
-
-        expect(toJSON()).toMatchSnapshot();
-      });
-    });
-  });
-
-  describe('when user provides default values', () => {
-    describe('starting with pre-filled content', () => {
-      it('should display default value and character count', () => {
-        const { getByDisplayValue, getByText, toJSON } = renderWithTheme(
-          <TextInput
-            label="Amount (AUD)"
-            prefix="dollar-sign"
-            required
-            helpText="This is helper text"
-            placeholder="Enter Amount"
-            defaultValue="1000"
-            maxLength={255}
-          />
-        );
-
-        // User should see the pre-filled value
-        expect(getByDisplayValue('1000')).toBeTruthy();
-
-        // User should see character count reflecting the default value
-        expect(getByText('4/255')).toBeTruthy();
-
-        expect(toJSON()).toMatchSnapshot();
-      });
-    });
-
-    describe('when both default and controlled values are provided', () => {
-      it('should prioritize controlled value over default value', () => {
-        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(getByDisplayValue('2000')).toBeVisible();
-        expect(queryByDisplayValue('1000')).toBeFalsy();
-
-        // Character count should reflect the actual displayed value
-        expect(getByText('4/255')).toBeTruthy();
-
-        expect(toJSON()).toMatchSnapshot();
-      });
-    });
-  });
-
-  describe('when user applies custom styling', () => {
-    it('should respect user-provided background color styling', () => {
-      const { getByTestId, toJSON } = renderWithTheme(
-        <TextInput
-          label="Amount (AUD)"
-          prefix="dollar-sign"
-          required
-          helpText="This is helper text"
-          placeholder="Enter Amount"
-          defaultValue="1000"
-          value="2000"
-          maxLength={255}
-          style={{ backgroundColor: 'customColor' }}
-        />
-      );
-
-      const textInput = getByTestId('text-input');
-
-      // Helper function to extract background color from complex React Native styles
-      function getBackgroundColor(
-        style: StyleProp<ViewStyle> | unknown[]
-      ): string | undefined {
-        function flatten(s: StyleProp<ViewStyle> | unknown[]): ViewStyle[] {
-          if (Array.isArray(s)) {
-            return s
-              .filter(Boolean)
-              .reduce<ViewStyle[]>(
-                (acc, item) =>
-                  acc.concat(flatten(item as StyleProp<ViewStyle> | unknown[])),
-                []
-              );
-          }
-          if (s) {
-            return [StyleSheet.flatten(s as StyleProp<ViewStyle>) as ViewStyle];
-          }
-          return [];
-        }
-        const flat = flatten(style);
-        for (let i = flat.length - 1; i >= 0; i -= 1) {
-          if (flat[i].backgroundColor !== undefined) {
-            return flat[i].backgroundColor as string;
-          }
-        }
-        return undefined;
-      }
-
-      // User should see their custom background color applied
-      const textInputStyle = textInput.props.style;
-      expect(getBackgroundColor(textInputStyle)).toBe('customColor');
-
-      const borderStyle = getByTestId('text-input-border').props.style;
-      expect(getBackgroundColor(borderStyle)).toBe('customColor');
-
-      expect(toJSON()).toMatchSnapshot();
-    });
-  });
-
-  describe('when user needs programmatic control', () => {
-    it('should provide ref methods for external control of the input', () => {
-      const ref = React.createRef<
-        TextInputHandles & {
-          getNativeTextInputRef(): RNTextInput;
-        }
-      >();
-
-      const { getByDisplayValue, toJSON } = renderWithTheme(
-        <TextInput label="Amount (AUD)" value="2000" ref={ref} />
-      );
-
-      // User should see the initial value
-      expect(getByDisplayValue('2000')).toBeTruthy();
-
-      // External code should be able to control the input programmatically
-      const nativeTextInputRef = ref.current?.getNativeTextInputRef();
-      if (nativeTextInputRef && ref.current) {
-        const focusSpy = jest.spyOn(nativeTextInputRef, 'focus');
-        const clearSpy = jest.spyOn(nativeTextInputRef, 'clear');
-        const blurSpy = jest.spyOn(nativeTextInputRef, 'blur');
-        const setNativePropsSpy = jest.spyOn(
-          nativeTextInputRef,
-          'setNativeProps'
-        );
-
-        act(() => {
-          ref.current?.focus();
-          ref.current?.clear();
-          ref.current?.setNativeProps({ text: '1000' });
-          ref.current?.blur();
-        });
-
-        // Verify that programmatic methods work as expected
-        expect(focusSpy).toHaveBeenCalledTimes(1);
-        expect(clearSpy).toHaveBeenCalledTimes(1);
-        expect(setNativePropsSpy).toHaveBeenCalledTimes(1);
-        expect(blurSpy).toHaveBeenCalledTimes(1);
-      }
-
-      expect(toJSON()).toMatchSnapshot();
-    });
-  });
-
-  describe('when user chooses textarea variant', () => {
-    it('should provide multiline text input experience', () => {
-      const { toJSON, getByDisplayValue } = renderWithTheme(
-        <TextInput label="Amount (AUD)" value="2000" variant="textarea" />
-      );
-
-      // User should see their entered value
-      expect(getByDisplayValue('2000')).toBeTruthy();
-
-      expect(toJSON()).toMatchSnapshot();
-    });
-  });
-
-  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 { getByTestId } = renderWithTheme(
-        <TextInput label="Email" error="Invalid Email" onFocus={onFocus} />
-      );
-
-      // User should be able to focus the input despite the error
-      const textInput = getByTestId('text-input');
-      fireEvent(textInput, 'focus');
-
-      // Should trigger focus callback
-      expect(onFocus).toHaveBeenCalled();
-    });
-
-    it('should display focused styling when error input is focused', async () => {
-      const { getByTestId } = renderWithTheme(
-        <TextInput label="Email" error="Invalid Email" />
-      );
-
-      // Focus the input
-      const textInput = getByTestId('text-input');
-      fireEvent(textInput, 'focus');
-
-      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-email-input-container');
-
-    // 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');
-  });
-});