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

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

@@ -0,0 +1,699 @@
+import React from 'react';
+import { act, fireEvent, within } from '@testing-library/react-native';
+import {
+  TextInput as RNTextInput,
+  ViewStyle,
+  StyleProp,
+  StyleSheet,
+} from 'react-native';
+import { Icon } from '@hero-design/rn';
+import { theme } from '../../..';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+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(
+        <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'
+      );
+
+      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();
+
+      // 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 be able to identify the prefix icon through accessibility
+      const prefixIcon = within(inputContainer).getByA11yLabel(
+        '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(
+        <TextInput
+          prefix="dollar-sign"
+          suffix="arrow-down"
+          testID="idle-text-input"
+        />
+      );
+
+      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);
+
+      // 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);
+    });
+
+    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"
+          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');
+
+      // User clicks on the label to focus the input
+      fireEvent.press(labelElement);
+
+      // 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);
+
+      // 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(
+        <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 without asterisk (since required styling is handled differently)
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByText('*')).toHaveLength(0);
+
+      // 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(toJSON()).toMatchSnapshot();
+    });
+  });
+
+  describe('when user sees a required field', () => {
+    it('should indicate the field is required through styling', () => {
+      const { toJSON, queryAllByTestId, queryAllByText } = renderWithTheme(
+        <TextInput
+          label="Amount (AUD)"
+          prefix="dollar-sign"
+          suffix="arrow-down"
+          required
+        />
+      );
+
+      // 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);
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+
+  describe('when user has entered text', () => {
+    it('should show the input content and maintain all visual elements', () => {
+      const {
+        toJSON,
+        queryAllByTestId,
+        queryAllByText,
+        queryAllByDisplayValue,
+      } = renderWithTheme(
+        <TextInput
+          label="Amount (AUD)"
+          prefix="dollar-sign"
+          suffix="arrow-down"
+          value="100"
+        />
+      );
+
+      // 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);
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+
+  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(
+        <TextInput
+          label="Amount (AUD)"
+          prefix="dollar-sign"
+          suffix="arrow-down"
+          editable={false}
+          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();
+
+      // The input should have editable=false prop
+      expect(textInput).toHaveProp('editable', false);
+
+      // Simulate user trying to type
+      fireEvent.changeText(textInput, 'New value');
+
+      // 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(toJSON()).toMatchSnapshot();
+    });
+  });
+
+  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);
+
+      // User should see all input elements
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+
+      // User should see loading indicator instead of regular suffix
+      const suffixContainer = getByTestId('input-suffix');
+      expect(suffixContainer).toBeTruthy();
+
+      const loadingIcon = within(suffixContainer).getByA11yLabel(
+        '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, queryAllByTestId, queryAllByText, getByTestId } =
+        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);
+
+      // User should be able to enter multiple lines
+      expect(getByTestId('text-input')).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
+          />
+        );
+
+      // 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);
+
+      // User should still be able to enter multiple lines
+      expect(getByTestId('text-input')).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)"
+          required
+          disabled
+          value="100"
+          testID="disabled-text-input"
+        />
+      );
+
+      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
+      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, queryAllByText } = renderWithTheme(
+        <TextInput
+          label="Amount (AUD)"
+          prefix="dollar-sign"
+          required
+          error="This field is required"
+        />
+      );
+
+      // User should see both the label and error message
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByText('This field is required')).toHaveLength(1);
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+
+  describe('when user sees helper text', () => {
+    it('should display guidance text to assist user understanding', () => {
+      const { toJSON, queryAllByText } = renderWithTheme(
+        <TextInput
+          label="Amount (AUD)"
+          prefix="dollar-sign"
+          required
+          helpText="This is helper text"
+        />
+      );
+
+      // User should see both the label and helpful guidance
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByText('This is helper text')).toHaveLength(1);
+
+      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', () => {
+        const wrapper = renderWithTheme(
+          <TextInput
+            label="Amount (AUD)"
+            prefix="dollar-sign"
+            required
+            helpText="This is helper text"
+            placeholder="Enter Amount"
+          />
+        );
+
+        // User should see the input field
+        expect(wrapper.queryByTestId('text-input')).toBeTruthy();
+
+        // User focuses the input field
+        fireEvent(wrapper.getByTestId('text-input'), 'focus');
+        expect(wrapper.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',
+          ' '
+        );
+
+        expect(wrapper.toJSON()).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('when user provides default values', () => {
+    describe('starting with pre-filled content', () => {
+      it('should display default value and character count', () => {
+        const wrapper = 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(wrapper.queryByDisplayValue('1000')).toBeTruthy();
+
+        // User should see character count reflecting the default value
+        expect(wrapper.queryByText('4/255')).toBeTruthy();
+
+        expect(wrapper.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}
+          />
+        );
+
+        // User should see the controlled value, not the default
+        expect(wrapper.queryByDisplayValue('2000')).toBeTruthy();
+        expect(wrapper.queryByDisplayValue('1000')).toBeFalsy();
+
+        // Character count should reflect the actual displayed value
+        expect(wrapper.queryByText('4/255')).toBeTruthy();
+
+        expect(wrapper.toJSON()).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('when user applies custom styling', () => {
+    it('should respect user-provided background color styling', () => {
+      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}
+          style={{ backgroundColor: 'customColor' }}
+        />
+      );
+
+      // 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 = wrapper.getByTestId('text-input').props.style;
+      expect(getBackgroundColor(textInputStyle)).toBe('customColor');
+
+      const borderStyle = wrapper.getByTestId('text-input-border').props.style;
+      expect(getBackgroundColor(borderStyle)).toBe('customColor');
+
+      expect(wrapper.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 wrapper = 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();
+
+      // 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(wrapper.toJSON()).toMatchSnapshot();
+    });
+  });
+
+  describe('when user chooses textarea variant', () => {
+    it('should provide multiline text input experience', () => {
+      const { toJSON, queryByText, queryByDisplayValue } = 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(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 onBlur = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <TextInput
+          label="Email"
+          error="Please enter a valid email address"
+          onFocus={onFocus}
+          onBlur={onBlur}
+          testID="error-input"
+        />
+      );
+
+      // 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).toHaveBeenCalledTimes(1);
+
+      // User should be able to blur the input
+      fireEvent(textInput, 'blur');
+      expect(onBlur).toHaveBeenCalledTimes(1);
+    });
+
+    it('should display focused styling when error input is focused', () => {
+      const { getByTestId } = renderWithTheme(
+        <TextInput
+          label="Email"
+          error="Please enter a valid email address"
+          testID="error-input"
+        />
+      );
+
+      // 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');
+    });
+  });
+});

package/src/components/TextInput/constants.ts

@@ -0,0 +1 @@
+export const LABEL_ANIMATION_DURATION = 150;