feat: added test implementation

- added test button and input

.eslintrc.js

@@ -26,4 +26,11 @@ module.exports = {
     'react/jsx-indent': ['error', 2],
     'react/jsx-indent-props': ['error', 2],
   },
+  overrides: [
+    {
+      // Test files only
+      files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+      extends: ['plugin:testing-library/react'],
+    },
+  ],
 };

jest-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/react-native/extend-expect';

package.json

@@ -4,6 +4,7 @@
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
+    "test": "jest",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
@@ -41,6 +42,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "@testing-library/react-native": "^12.5.0",
+    "@types/jest": "^29.5.12",
     "@types/react": "~18.2.14",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "babel-plugin-module-resolver": "^5.0.0",
@@ -52,10 +55,19 @@
     "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-testing-library": "^6.2.2",
     "husky": "^8.0.3",
+    "jest": "^29.7.0",
+    "jest-expo": "^50.0.4",
     "prettier": "^3.1.1",
     "tailwindcss": "3.3.2",
     "typescript": "*"
   },
+  "jest": {
+    "preset": "jest-expo",
+    "transformIgnorePatterns": [
+      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
+    ]
+  },
   "private": true
 }

src/components/core/Button.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react-native';
+
+import Button from './Button';
+
+describe('Button', () => {
+  const buttonTitle = 'Close';
+  it('should render correctly', () => {
+    render(<Button title={buttonTitle} onPress={() => null} />);
+
+    expect(screen.getByText(buttonTitle)).toBeTruthy();
+  });
+
+  it('should render loading correctly', () => {
+    render(<Button title={buttonTitle} onPress={() => null} />);
+    expect(screen.queryAllByTestId('buttonLoading')).toHaveLength(0);
+
+    render(<Button title={buttonTitle} onPress={() => null} isLoading />);
+    expect(screen.getByTestId('buttonLoading')).toBeTruthy();
+  });
+
+  it('should call onPress when presses the button', async () => {
+    const onPress = jest.fn();
+    render(<Button title={buttonTitle} onPress={onPress} />);
+
+    const button = screen.getByRole('button', { name: buttonTitle });
+    fireEvent.press(button);
+
+    await waitFor(() => {
+      expect(onPress).toHaveBeenCalled();
+    });
+  });
+});

src/components/core/Button.tsx

@@ -16,9 +16,9 @@ const ActivityIndicatorColors = {
 };
 
 const Button = ({ title, onPress, isLoading, variant = 'solid' }: Props) => (
-  <TouchableOpacity onPress={onPress} className={button({ variant })}>
+  <TouchableOpacity onPress={onPress} className={button({ variant })} accessibilityRole="button">
     {isLoading ? (
-      <ActivityIndicator color={ActivityIndicatorColors[variant]} />
+      <ActivityIndicator color={ActivityIndicatorColors[variant]} testID="buttonLoading" />
     ) : (
       <Text className={button({ title: variant })}>{title}</Text>
     )}

src/components/core/Input.test.tsx

@@ -0,0 +1,46 @@
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import { Search } from 'lucide-react-native';
+
+import Input from './Input';
+
+describe('Input', () => {
+  it('should render correctly', () => {
+    render(
+      <Input
+        onChangeText={() => {}}
+        placeholder="Search..."
+        rightIcon={<Search testID="searchIcon" />}
+      />,
+    );
+
+    expect(screen.getByPlaceholderText('Search...')).toBeTruthy();
+    expect(screen.getAllByTestId('searchIcon')).toBeTruthy();
+
+    render(
+      <Input
+        value="search keyword"
+        onChangeText={() => {}}
+        placeholder="Search..."
+        rightIcon={<Search testID="searchIcon" />}
+      />,
+    );
+
+    expect(screen.getByDisplayValue('search keyword')).toBeTruthy();
+  });
+
+  it('Should call onChangeText function when text input changes', () => {
+    const onChangeText = jest.fn();
+
+    render(
+      <Input
+        placeholder="Search..."
+        onChangeText={onChangeText}
+        rightIcon={<Search testID="searchIcon" />}
+      />,
+    );
+
+    fireEvent(screen.getByPlaceholderText('Search...'), 'changeText', 'article 1');
+
+    expect(onChangeText).toHaveBeenCalledWith('article 1');
+  });
+});