Merge pull request #2 from johelder/feature/unit-tests

feature/unit-tests

Author: johelder

eslint.config.mjs

@@ -16,7 +16,14 @@ const compat = new FlatCompat({
 
 export default defineConfig([
   {
-    extends: fixupConfigRules(compat.extends('@react-native', 'prettier')),
+    files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+    extends: fixupConfigRules(
+      compat.extends(
+        '@react-native',
+        'prettier',
+        'plugin:testing-library/react'
+      )
+    ),
     plugins: { prettier },
     rules: {
       'react/react-in-jsx-scope': 'off',
@@ -30,12 +37,10 @@ export default defineConfig([
           useTabs: false,
         },
       ],
+      'testing-library/prefer-screen-queries': 'off',
     },
   },
   {
-    ignores: [
-      'node_modules/',
-      'lib/'
-    ],
+    ignores: ['node_modules/', 'lib/'],
   },
 ]);

package.json

@@ -88,18 +88,21 @@
     "@evilmartians/lefthook": "^1.5.0",
     "@react-native/eslint-config": "^0.78.0",
     "@release-it/conventional-changelog": "^9.0.2",
+    "@testing-library/react-native": "^13.2.0",
     "@types/jest": "^29.5.5",
     "@types/react": "^19.0.12",
     "commitlint": "^19.6.1",
     "del-cli": "^5.1.0",
     "eslint": "^9.22.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-testing-library": "^7.2.2",
     "jest": "^29.7.0",
     "prettier": "^3.0.3",
     "react": "18.3.1",
     "react-native": "0.76.8",
-    "react-native-builder-bob": "^0.39.0",
+    "react-native-builder-bob": "^0.40.11",
+    "react-test-renderer": "18.3.1",
     "release-it": "^17.10.0",
     "typescript": "^5.2.2"
   },
@@ -176,6 +179,6 @@
   "create-react-native-library": {
     "languages": "js",
     "type": "library",
-    "version": "0.49.0"
+    "version": "0.50.3"
   }
 }

src/__tests__/text-input-otp.test.tsx

@@ -0,0 +1,79 @@
+import { act, fireEvent, render } from '@testing-library/react-native';
+import { TextInputOTP, TextInputOTPSlot } from '../components';
+import type { TextInputOTPProps, TextInputOTPRef } from '../types';
+import { createRef } from 'react';
+
+function renderTextInputOTP({
+  maxLength = 6,
+  ...rest
+}: Partial<TextInputOTPProps>) {
+  return render(
+    <TextInputOTP maxLength={maxLength} {...rest}>
+      <TextInputOTPSlot index={0} />
+      <TextInputOTPSlot index={1} />
+      <TextInputOTPSlot index={2} />
+      <TextInputOTPSlot index={3} />
+      <TextInputOTPSlot index={4} />
+      <TextInputOTPSlot index={5} />
+    </TextInputOTP>
+  );
+}
+
+describe('TextInputOTP Component', () => {
+  beforeAll(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should call onFilled with the complete code when all digits are filled', () => {
+    const CODE = '123456';
+    const mockedOnFilled = jest.fn();
+    const view = renderTextInputOTP({ onFilled: mockedOnFilled });
+    fireEvent.changeText(view.getByTestId('hidden-text-input'), CODE);
+    expect(mockedOnFilled).toHaveBeenCalledWith(CODE);
+  });
+
+  it('should not render the animated caret when the caretHidden prop is true', () => {
+    const view = renderTextInputOTP({ caretHidden: true });
+    expect(view.queryByTestId('caret')).toBeNull();
+  });
+
+  it('should render the slots only up to the number defined by the maxLength prop', () => {
+    const MAX_LENGTH = 6;
+    const view = renderTextInputOTP({
+      maxLength: MAX_LENGTH,
+      caretHidden: true,
+    });
+    const slots = view.getAllByTestId('text-input-otp-slot');
+    expect(slots).toHaveLength(MAX_LENGTH);
+  });
+
+  it('should call onFilled with the complete code when setValue is called programmatically', () => {
+    const CODE = '123';
+    const mockedOnFilled = jest.fn();
+    const ref = createRef<TextInputOTPRef>();
+    render(
+      <TextInputOTP ref={ref} maxLength={3} onFilled={mockedOnFilled}>
+        <TextInputOTPSlot index={0} />
+        <TextInputOTPSlot index={1} />
+        <TextInputOTPSlot index={2} />
+      </TextInputOTP>
+    );
+    act(() => ref.current?.setValue(CODE));
+    expect(mockedOnFilled).toHaveBeenCalledWith(CODE);
+  });
+
+  it('should call clear the input text when clear function is called programmatically', () => {
+    const CODE = '1';
+    const ref = createRef<TextInputOTPRef>();
+    const view = render(
+      <TextInputOTP ref={ref} maxLength={3}>
+        <TextInputOTPSlot index={0} />
+        <TextInputOTPSlot index={1} />
+        <TextInputOTPSlot index={2} />
+      </TextInputOTP>
+    );
+    fireEvent.changeText(view.getByTestId('hidden-text-input'), CODE);
+    act(() => ref.current?.clear());
+    expect(view.queryByText(CODE)).toBeFalsy();
+  });
+});

src/components/caret.tsx

@@ -26,6 +26,7 @@ export function Caret() {
 
   return (
     <Animated.View
+      testID="caret"
       style={[
         styles.caret,
         { opacity, backgroundColor: caretColor ?? DEFAULT_DARK_COLOR },

src/components/text-input-otp-slot.tsx

@@ -3,7 +3,7 @@ import { Pressable, Text, StyleSheet } from 'react-native';
 import { Caret } from './caret';
 import { useTextInputOTP } from '../hooks/use-text-input-otp';
 import { useSlotBorderStyles } from '../hooks/use-slot-border-styles';
-import { SLOT_HEIGHT, SLOT_WIDTH } from '../constants';
+import { DEFAULT_DARK_COLOR, SLOT_HEIGHT, SLOT_WIDTH } from '../constants';
 import type {
   TextInputOTPSlotInternalProps,
   TextInputOTPSlotProps,
@@ -26,6 +26,7 @@ function TextInputOTPSlotComponent({
 
   return (
     <Pressable
+      testID="text-input-otp-slot"
       onPress={handlePress}
       style={StyleSheet.flatten([
         styles.slot,
@@ -60,7 +61,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   slotText: {
-    color: '#030712',
+    color: DEFAULT_DARK_COLOR,
     fontSize: 14,
     fontWeight: 'bold',
   },

src/components/text-input.tsx

@@ -19,6 +19,7 @@ export const TextInput = forwardRef<
 
   return (
     <RNTextInput
+      testID="hidden-text-input"
       ref={inputRef}
       keyboardType="number-pad"
       autoFocus={autoFocus}

src/hooks/use-text-input-otp.tsx

@@ -70,6 +70,7 @@ export function TextInputOTPProvider({
         text.length > maxLength ? text.slice(0, maxLength) : text;
       setCode(filledCode);
       setCurrentIndex(maxLength - 1);
+      onFilled?.(filledCode);
     },
     [maxLength]
   );