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

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();
+  });
+});