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

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

@@ -0,0 +1,203 @@
+import React from 'react';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+import FloatingLabel from '../FloatingLabel';
+
+describe('FloatingLabel', () => {
+  describe('label text display based on required prop', () => {
+    it.each`
+      required | expectedText          | shouldShowOptional | description
+      ${true}  | ${'Email'}            | ${false}           | ${'required field without optional indicator'}
+      ${false} | ${'Phone (Optional)'} | ${true}            | ${'optional field with optional indicator'}
+    `(
+      'should display $expectedText for $description',
+      ({ required, expectedText, shouldShowOptional }) => {
+        const label = required ? 'Email' : 'Phone';
+        const { getByText, queryByText } = renderWithTheme(
+          <FloatingLabel
+            label={label}
+            variant="text"
+            state="default"
+            isFocused={false}
+            required={required}
+            isEmptyValue
+          />
+        );
+
+        // User should see the appropriate label text
+        expect(getByText(expectedText)).toBeTruthy();
+
+        if (!shouldShowOptional) {
+          expect(queryByText(`${label} (Optional)`)).toBeFalsy();
+          expect(queryByText('(Optional)')).toBeFalsy();
+        }
+      }
+    );
+  });
+
+  describe('label behavior based on focus and content state', () => {
+    it.each`
+      state        | isEmptyValue | expectedBehavior                        | description
+      ${'focused'} | ${true}      | ${'label in focused state'}             | ${'user focuses empty input'}
+      ${'filled'}  | ${false}     | ${'label remains in floating position'} | ${'user enters text in input'}
+    `(
+      'should show $expectedBehavior when $description',
+      ({ state, isEmptyValue }) => {
+        const { getByTestId } = renderWithTheme(
+          <FloatingLabel
+            label={state === 'focused' ? 'Password' : 'Message'}
+            variant="text"
+            state={state}
+            isFocused={state === 'focused'}
+            required
+            isEmptyValue={isEmptyValue}
+          />
+        );
+
+        // User should see the label behaving appropriately
+        const label = getByTestId('input-label');
+        expect(label).toBeTruthy();
+        const { children } = label.props;
+        const expectedText = state === 'focused' ? 'Password' : 'Message';
+        expect(
+          Array.isArray(children) ? children.filter(Boolean).join('') : children
+        ).toBe(expectedText);
+      }
+    );
+  });
+
+  describe('variant-specific positioning', () => {
+    it.each`
+      variant       | required | expectedText                | description
+      ${'textarea'} | ${false} | ${'Description (Optional)'} | ${'multiline input with optional label'}
+    `(
+      'should position label appropriately for $variant ($description)',
+      ({ variant, required, expectedText }) => {
+        const { getByTestId } = renderWithTheme(
+          <FloatingLabel
+            label="Description"
+            variant={variant}
+            state="default"
+            isFocused={false}
+            required={required}
+            isEmptyValue
+          />
+        );
+
+        // User should see the label with proper variant positioning
+        const label = getByTestId('input-label');
+        expect(label).toBeTruthy();
+        const { children } = label.props;
+        expect(Array.isArray(children) ? children.join('') : children).toBe(
+          expectedText
+        );
+      }
+    );
+  });
+
+  describe('when user encounters different input states', () => {
+    it.each`
+      state         | required | expectedText                   | description
+      ${'error'}    | ${true}  | ${'Email'}                     | ${'validation error with required field'}
+      ${'disabled'} | ${false} | ${'Disabled Field (Optional)'} | ${'non-interactive optional field'}
+    `(
+      'should display appropriate styling for $state state ($description)',
+      ({ state, required, expectedText }) => {
+        const { getByTestId } = renderWithTheme(
+          <FloatingLabel
+            label={state === 'error' ? 'Email' : 'Disabled Field'}
+            variant="text"
+            state={state}
+            isFocused={false}
+            required={required}
+            isEmptyValue
+          />
+        );
+
+        // User should see the label with appropriate state styling
+        const label = getByTestId('input-label');
+        expect(label).toBeTruthy();
+        const { children } = label.props;
+        expect(
+          Array.isArray(children) ? children.filter(Boolean).join('') : children
+        ).toBe(expectedText);
+      }
+    );
+  });
+
+  describe('when used with accessibility features', () => {
+    it('should provide proper accessibility labeling', () => {
+      const accessibilityId = 'email-input-label';
+      const { getByTestId } = renderWithTheme(
+        <FloatingLabel
+          label="Email Address"
+          variant="text"
+          state="default"
+          isFocused={false}
+          required
+          accessibilityLabelledBy={accessibilityId}
+          isEmptyValue
+        />
+      );
+
+      // User should have proper accessibility support
+      const label = getByTestId('input-label');
+      expect(label).toHaveProp('nativeID', accessibilityId);
+    });
+  });
+
+  describe('label color styling based on state', () => {
+    it.each`
+      state         | isFocused | expectedColor | description
+      ${'default'}  | ${false}  | ${'#808f91'}  | ${'inactive/empty field'}
+      ${'default'}  | ${true}   | ${'#001f23'}  | ${'user is typing'}
+      ${'filled'}   | ${false}  | ${'#001f23'}  | ${'field has content'}
+      ${'filled'}   | ${true}   | ${'#001f23'}  | ${'field has content and focused'}
+      ${'error'}    | ${false}  | ${'#cb300a'}  | ${'validation error'}
+      ${'error'}    | ${true}   | ${'#001f23'}  | ${'validation error but focused'}
+      ${'disabled'} | ${false}  | ${'#bfc1c5'}  | ${'non-interactive field'}
+      ${'readonly'} | ${false}  | ${'#808f91'}  | ${'read-only field'}
+    `(
+      'should apply $expectedColor color for $state state when focused=$isFocused ($description)',
+      ({ state, isFocused, expectedColor: _expectedColor }) => {
+        const { getByTestId } = renderWithTheme(
+          <FloatingLabel
+            label={`${state} Label`}
+            variant="text"
+            state={state}
+            isFocused={isFocused}
+            required
+            isEmptyValue={state !== 'filled'}
+          />
+        );
+
+        const label = getByTestId('input-label');
+        expect(label).toHaveProp('themeState', state);
+      }
+    );
+
+    describe('component behavior', () => {
+      it('should render correctly with all props', () => {
+        const { getByTestId } = renderWithTheme(
+          <FloatingLabel
+            label="Full Name"
+            variant="text"
+            state="filled"
+            isFocused
+            required={false}
+            accessibilityLabelledBy="fullname-label"
+            isEmptyValue={false}
+          />
+        );
+
+        // User should see a fully rendered floating label
+        const label = getByTestId('input-label');
+        expect(label).toBeTruthy();
+        expect(label).toHaveProp('nativeID', 'fullname-label');
+        const { children } = label.props;
+        expect(Array.isArray(children) ? children.join('') : children).toBe(
+          'Full Name (Optional)'
+        );
+      });
+    });
+  });
+});

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { TextInput as RNTextInput } from 'react-native';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+import InputComponent from '../InputComponent';
+
+describe('InputComponent', () => {
+  it('renders correctly with renderInputValue', () => {
+    const ref = React.createRef<RNTextInput>();
+    const wrapper = renderWithTheme(
+      <InputComponent
+        variant="textarea"
+        nativeInputProps={{}}
+        renderInputValue={(props) => (
+          <RNTextInput
+            {...props}
+            value="customised text"
+            testID="custom-text-input"
+          />
+        )}
+        ref={ref}
+      />
+    );
+    expect(wrapper.queryAllByTestId('custom-text-input')).toHaveLength(1);
+    expect(wrapper.queryAllByDisplayValue('customised text')).toHaveLength(1);
+  });
+
+  it('renders correctly without renderInputValue', () => {
+    const ref = React.createRef<RNTextInput>();
+    const wrapper = renderWithTheme(
+      <InputComponent
+        variant="textarea"
+        nativeInputProps={{ testID: 'text-input', value: 'text input value' }}
+        ref={ref}
+      />
+    );
+    expect(wrapper.queryAllByTestId('text-input')).toHaveLength(1);
+    expect(wrapper.queryAllByDisplayValue('text input value')).toHaveLength(1);
+  });
+});

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

@@ -0,0 +1,275 @@
+import React from 'react';
+import { Text, TextInput as RNTextInput } from 'react-native';
+import type { TextInputProps as NativeTextInputProps } from 'react-native';
+// import { TextInput as RNTextInput } from 'react-native';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+import InputRow from '../InputRow';
+
+// Mock the LABEL_ANIMATION_DURATION constant
+jest.mock('../constants', () => ({
+  LABEL_ANIMATION_DURATION: 0, // Instant animation for testing
+}));
+
+describe('InputRow', () => {
+  const defaultProps = {
+    state: 'default' as const,
+    isFocused: false,
+    variant: 'text' as const,
+    nativeInputProps: {
+      value: '',
+      placeholder: 'Enter text',
+    },
+    isEmptyValue: true,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('when user sees an empty input field', () => {
+    it('should hide both prefix and input components with opacity', () => {
+      const ref = React.createRef<RNTextInput>();
+      const { getByTestId } = renderWithTheme(
+        <InputRow {...defaultProps} prefix="search" ref={ref} />
+      );
+
+      // Components should be present but hidden
+      const inputWrapper = getByTestId('input-row-input-wrapper');
+      expect(inputWrapper).toBeTruthy();
+      expect(inputWrapper).toHaveProp('accessibilityElementsHidden', true);
+    });
+  });
+
+  describe('when user focuses the input', () => {
+    it('should show both prefix and input components with animation', () => {
+      const ref = React.createRef<RNTextInput>();
+      const { getByTestId } = renderWithTheme(
+        <InputRow {...defaultProps} isFocused isEmptyValue ref={ref} />
+      );
+
+      // Should be visible when focused
+      const inputWrapper = getByTestId('input-row-input-wrapper');
+      expect(inputWrapper).toHaveProp('accessibilityElementsHidden', false);
+    });
+  });
+
+  describe('when user enters text in the input', () => {
+    it('should keep components visible even when not focused', () => {
+      const ref = React.createRef<RNTextInput>();
+      const { getByTestId } = renderWithTheme(
+        <InputRow
+          {...defaultProps}
+          prefix="search"
+          state="filled"
+          isEmptyValue={false}
+          nativeInputProps={{
+            ...defaultProps.nativeInputProps,
+            value: 'user@example.com',
+          }}
+          ref={ref}
+        />
+      );
+
+      // User has entered text - components should be visible
+      const inputWrapper = getByTestId('input-row-input-wrapper');
+      expect(inputWrapper).toHaveProp('accessibilityElementsHidden', false);
+    });
+  });
+
+  describe('when user uses input with prefix icon', () => {
+    it('should render input wrapper when prefix is provided', () => {
+      const ref = React.createRef<RNTextInput>();
+      const { getByTestId } = renderWithTheme(
+        <InputRow
+          {...defaultProps}
+          prefix="search"
+          isFocused
+          isEmptyValue={false}
+          ref={ref}
+        />
+      );
+
+      // User should see the input wrapper with prefix
+      const inputWrapper = getByTestId('input-row-input-wrapper');
+      expect(inputWrapper).toBeTruthy();
+      expect(inputWrapper).toHaveProp('accessibilityElementsHidden', false);
+    });
+  });
+
+  describe('when user uses input with custom prefix', () => {
+    it('should render custom prefix element', () => {
+      const CustomPrefix = () => <Text testID="custom-prefix">Custom</Text>;
+      const ref = React.createRef<RNTextInput>();
+
+      const { getByTestId } = renderWithTheme(
+        <InputRow
+          {...defaultProps}
+          prefix={<CustomPrefix />}
+          isFocused
+          isEmptyValue={false}
+          ref={ref}
+        />
+      );
+
+      // User should see the custom prefix
+      expect(getByTestId('custom-prefix')).toBeTruthy();
+    });
+  });
+
+  describe('when user uses textarea variant', () => {
+    it('should render input component with textarea variant', () => {
+      const ref = React.createRef<RNTextInput>();
+      const { getByTestId } = renderWithTheme(
+        <InputRow
+          {...defaultProps}
+          variant="textarea"
+          isFocused
+          isEmptyValue={false}
+          nativeInputProps={{
+            ...defaultProps.nativeInputProps,
+            multiline: true,
+            numberOfLines: 4,
+          }}
+          ref={ref}
+        />
+      );
+
+      // User should see the textarea input
+      const inputWrapper = getByTestId('input-row-input-wrapper');
+      expect(inputWrapper).toBeTruthy();
+      expect(inputWrapper).toHaveProp('accessibilityLabel', 'Text input field');
+    });
+  });
+
+  describe('when user encounters different input states', () => {
+    it('should render input wrapper in error state', () => {
+      const ref = React.createRef<RNTextInput>();
+      const { getByTestId } = renderWithTheme(
+        <InputRow
+          {...defaultProps}
+          state="error"
+          isEmptyValue={false}
+          ref={ref}
+        />
+      );
+
+      // Components should render with error state
+      const inputWrapper = getByTestId('input-row-input-wrapper');
+      expect(inputWrapper).toBeTruthy();
+    });
+
+    it('should handle disabled state appropriately', () => {
+      const ref = React.createRef<RNTextInput>();
+      const { getByTestId } = renderWithTheme(
+        <InputRow {...defaultProps} state="disabled" isEmptyValue ref={ref} />
+      );
+
+      // Even disabled inputs should render components
+      const inputWrapper = getByTestId('input-row-input-wrapper');
+      expect(inputWrapper).toBeTruthy();
+    });
+  });
+
+  describe('when user uses custom input renderer', () => {
+    it('should use custom render function for input value', () => {
+      const customRenderer = (inputProps: NativeTextInputProps) => (
+        <Text testID="custom-input-renderer">Custom: {inputProps.value}</Text>
+      );
+      const ref = React.createRef<RNTextInput>();
+
+      const { getByTestId } = renderWithTheme(
+        <InputRow
+          {...defaultProps}
+          renderInputValue={customRenderer}
+          isFocused
+          isEmptyValue={false}
+          nativeInputProps={{
+            ...defaultProps.nativeInputProps,
+            value: 'test value',
+          }}
+          ref={ref}
+        />
+      );
+
+      // User should see the custom rendered input
+      expect(getByTestId('custom-input-renderer')).toBeTruthy();
+    });
+  });
+
+  describe('input reference handling', () => {
+    it('should properly handle input ref', () => {
+      const ref = React.createRef<RNTextInput>();
+      renderWithTheme(
+        <InputRow {...defaultProps} isFocused isEmptyValue={false} ref={ref} />
+      );
+      expect(ref.current).toBeDefined();
+    });
+  });
+
+  describe('accessibility features', () => {
+    it('should provide proper accessibility labels for input wrapper', () => {
+      const ref = React.createRef<RNTextInput>();
+      const { getByTestId } = renderWithTheme(
+        <InputRow {...defaultProps} isFocused isEmptyValue={false} ref={ref} />
+      );
+
+      // User should have proper accessibility support
+      const inputWrapper = getByTestId('input-row-input-wrapper');
+      expect(inputWrapper).toHaveProp('accessibilityLabel', 'Text input field');
+    });
+
+    it('should hide components from screen readers when not visible', () => {
+      const ref = React.createRef<RNTextInput>();
+      const { getByTestId } = renderWithTheme(
+        <InputRow
+          {...defaultProps}
+          prefix="search"
+          state="default"
+          isEmptyValue
+          ref={ref}
+        />
+      );
+
+      // Components should be hidden from screen readers when not visible
+      const inputWrapper = getByTestId('input-row-input-wrapper');
+      expect(inputWrapper).toHaveProp('accessibilityElementsHidden', true);
+    });
+  });
+
+  describe('component behavior', () => {
+    it('should render correctly with all props', () => {
+      const ref = React.createRef<RNTextInput>();
+      const { getByTestId } = renderWithTheme(
+        <InputRow
+          {...defaultProps}
+          prefix="search"
+          isFocused
+          isEmptyValue={false}
+          nativeInputProps={{
+            ...defaultProps.nativeInputProps,
+            value: 'test@example.com',
+            placeholder: 'Enter email',
+          }}
+          ref={ref}
+        />
+      );
+
+      // User should see a fully rendered input row
+      const inputWrapper = getByTestId('input-row-input-wrapper');
+      expect(inputWrapper).toBeTruthy();
+      expect(inputWrapper).toHaveProp('accessibilityElementsHidden', false);
+    });
+
+    it('should render without prefix', () => {
+      const ref = React.createRef<RNTextInput>();
+      const { getByTestId, queryByText } = renderWithTheme(
+        <InputRow {...defaultProps} ref={ref} />
+      );
+
+      // User should see input without prefix
+      const inputWrapper = getByTestId('input-row-input-wrapper');
+      expect(inputWrapper).toBeTruthy();
+      expect(queryByText('search')).toBeNull();
+    });
+  });
+});

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+import MaxLengthMessage from '../MaxLengthMessage';
+
+describe('MaxLengthMessage', () => {
+  it('renders correctly with maxLength', () => {
+    const { queryAllByText } = renderWithTheme(
+      <MaxLengthMessage
+        maxLength={10}
+        state="default"
+        currentLength={5}
+        hideCharacterCount={false}
+      />
+    );
+    expect(queryAllByText('5/10')).toHaveLength(1);
+  });
+});

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+import PrefixComponent from '../PrefixComponent';
+
+describe('PrefixComponent', () => {
+  it('renders prefix icon', () => {
+    const wrapper = renderWithTheme(
+      <PrefixComponent prefix="dollar-sign" state="default" />
+    );
+    expect(wrapper.getByA11yLabel('Prefix icon: dollar-sign')).toBeDefined();
+    // Optionally, keep testID fallback
+    expect(wrapper.getByTestId('input-prefix')).toBeDefined();
+  });
+});

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

@@ -0,0 +1,114 @@
+import React from 'react';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+import {
+  StyledHelperText,
+  StyledTextInput,
+  StyledCharacterCount,
+  StyledError,
+  StyledErrorRow,
+  StyledLabel,
+  StyledBorder,
+} from '../StyledTextInput';
+
+describe('StyledLabel', () => {
+  it.each`
+    themeState
+    ${'default'}
+    ${'filled'}
+    ${'error'}
+    ${'disabled'}
+    ${'readonly'}
+  `('renders correctly with themeState $themeState', ({ themeState }): void => {
+    const { toJSON } = renderWithTheme(
+      <StyledLabel themeState={themeState}>Label</StyledLabel>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledErrorRow', () => {
+  it('renders correctly', (): void => {
+    const { toJSON } = renderWithTheme(<StyledErrorRow />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledError', () => {
+  it('renders correctly', (): void => {
+    const { toJSON } = renderWithTheme(
+      <StyledError>must not exceed character limit</StyledError>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledCharacterCount', () => {
+  it.each`
+    themeState
+    ${'default'}
+    ${'filled'}
+    ${'error'}
+    ${'disabled'}
+    ${'readonly'}
+  `('renders correctly with themeState $themeState', ({ themeState }): void => {
+    const { toJSON } = renderWithTheme(
+      <StyledCharacterCount themeState={themeState}>
+        100/255
+      </StyledCharacterCount>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledHelperText', () => {
+  it('renders correctly', (): void => {
+    const { toJSON } = renderWithTheme(
+      <StyledHelperText>helper text</StyledHelperText>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledBorder', () => {
+  it.each`
+    themeState
+    ${'default'}
+    ${'filled'}
+    ${'error'}
+    ${'disabled'}
+    ${'readonly'}
+  `('renders correctly with themeState $themeState', ({ themeState }): void => {
+    const { toJSON } = renderWithTheme(
+      <StyledBorder themeState={themeState} themeFocused={false} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly when focused', (): void => {
+    const { toJSON } = renderWithTheme(
+      <StyledBorder themeState="error" themeFocused />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledTextInput', () => {
+  it.each`
+    themeVariant
+    ${'text'}
+    ${'textarea'}
+  `('renders correctly with $themeState state', ({ themeVariant }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledTextInput themeVariant={themeVariant} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+import SuffixComponent from '../SuffixComponent';
+
+describe('SuffixComponent', () => {
+  it('renders loading icon with loading', () => {
+    const wrapper = renderWithTheme(
+      <SuffixComponent loading suffix="dollar-sign" state="default" />
+    );
+
+    expect(wrapper.getByA11yLabel('Suffix icon: loading')).toBeDefined();
+  });
+
+  it('renders suffix icon', () => {
+    const wrapper = renderWithTheme(
+      <SuffixComponent loading={false} suffix="dollar-sign" state="default" />
+    );
+    expect(wrapper.getByA11yLabel('Suffix icon: dollar-sign')).toBeDefined();
+  });
+});