Merge pull request #27 from obytes/tests

Tests

template/.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  singleQuote: true,
+  endOfLine: 'auto',
+};

template/__mocks__/@gorhom/bottom-sheet.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { FlatList, Modal, ScrollView, View } from 'react-native';
+
+const BottomSheetModalContext = React.createContext(null);
+
+const BottomSheetModalProvider = (props: any) => {
+  return <BottomSheetModalContext.Provider {...props} value={{}} />;
+};
+const BottomSheet = (props: any) => <View {...props} />;
+const BottomSheetModal = (props: any) => <Modal {...props} />;
+
+const BottomSheetBackdrop = (props: any) => <View {...props} />;
+const BottomSheetHandle = (props: any) => <View {...props} />;
+const BottomSheetFooter = (props: any) => <View {...props} />;
+const BottomSheetScrollView = (props: any) => <ScrollView {...props} />;
+const BottomSheetFlatList = (props: any) => <FlatList {...props} />;
+
+const useBottomSheet = jest.fn();
+const useBottomSheetModal = jest.fn();
+const useBottomSheetSpringConfigs = jest.fn();
+const useBottomSheetTimingConfigs = jest.fn();
+const useBottomSheetInternal = jest.fn();
+const useBottomSheetDynamicSnapPoints = jest.fn();
+
+export { useBottomSheet };
+export { useBottomSheetModal };
+export { useBottomSheetSpringConfigs };
+export { useBottomSheetTimingConfigs };
+export { useBottomSheetInternal };
+export { useBottomSheetDynamicSnapPoints };
+
+export {
+  BottomSheetBackdrop,
+  BottomSheetFlatList,
+  BottomSheetFooter,
+  BottomSheetHandle,
+  BottomSheetModal,
+  BottomSheetModalProvider,
+  BottomSheetScrollView,
+};
+
+export default BottomSheet;

template/__mocks__/react-native-gesture-handler.js

@@ -0,0 +1,25 @@
+import { FlatList, ScrollView, TouchableOpacity, View } from 'react-native';
+
+module.exports = {
+  ScrollView,
+  FlatList,
+  TouchableOpacity,
+  PanGestureHandler: View,
+  attachGestureHandler: () => {},
+  createGestureHandler: () => {},
+  dropGestureHandler: () => {},
+  updateGestureHandler: () => {},
+  Direction: {
+    RIGHT: 1,
+    LEFT: 2,
+    UP: 4,
+    DOWN: 8,
+  },
+  State: {
+    BEGAN: 'BEGAN',
+    FAILED: 'FAILED',
+    ACTIVE: 'ACTIVE',
+    END: 'END',
+    UNDETERMINED: 'UNDETERMINED',
+  },
+};

template/__mocks__/react-native-reanimated.js

@@ -0,0 +1 @@
+module.exports = require('react-native-reanimated/mock');

template/jest.config.js

@@ -0,0 +1,31 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  preset: 'jest-expo',
+  globals: {
+    'ts-jest': {
+      tsconfig: {
+        jsx: 'react',
+      },
+    },
+  },
+  transform: {
+    '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  testMatch: ['**/?(*.)+(spec|test).ts?(x)'],
+  collectCoverageFrom: [
+    '**/*.{ts,tsx}',
+    '!**/coverage/**',
+    '!**/node_modules/**',
+    '!**/babel.config.js',
+    '!**/jest.setup.js',
+  ],
+  moduleFileExtensions: ['js', 'ts', 'tsx'],
+  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)',
+  ],
+  coverageReporters: ['json-summary', 'text', 'lcov'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+};

template/package.json

@@ -24,7 +24,11 @@
     "web": "expo start --web",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "type-check": "tsc --noemit",
-    "lint:translations": "eslint ./src/translations/ --fix --ext .json  "
+    "lint:translations": "eslint ./src/translations/ --fix --ext .json  ",
+    "test": "jest",
+    "test:watch": "yarn test --watch",
+    "test:ci": "yarn test --coverage",
+    "test:badges": "yarn test:ci  && jest-coverage-badges --input coverage/coverage-summary.json --output __badges__"
   },
   "dependencies": {
     "@bacons/link-assets": "^1.1.0",
@@ -73,10 +77,13 @@
     "@expo/config": "^7.0.1",
     "@jamesacarr/eslint-formatter-github-actions": "^0.1.0",
     "@react-native-community/eslint-config": "^3.1.0",
+    "@testing-library/react-native": "^11.3.0",
     "@types/i18n-js": "^3.8.2",
+    "@types/jest": "^29.2.1",
     "@types/lodash.memoize": "^4.1.7",
     "@types/react": "~18.0.14",
     "@types/react-native": "~0.69.6",
+    "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.37.0",
     "@typescript-eslint/parser": "^5.36.2",
     "babel-plugin-module-resolver": "^4.1.0",
@@ -87,9 +94,16 @@
     "eslint-plugin-unicorn": "^43.0.2",
     "eslint-plugin-unused-imports": "^2.0.0",
     "husky": "^8.0.1",
+    "jest": "^29.2.2",
+    "jest-coverage-badges": "^1.1.2",
+    "jest-environment-jsdom": "^29.2.2",
+    "jest-expo": "^46.0.1",
     "lint-staged": "^13.0.3",
+    "metro-babel-register": "^0.73.3",
     "prettier": "^2.7.1",
+    "react-test-renderer": "^18.2.0",
     "tailwindcss": "^3.1.8",
+    "ts-jest": "^29.0.3",
     "typescript": "~4.8.2"
   },
   "repository": {

template/src/screens/login/index.tsx

@@ -26,15 +26,22 @@ export const Login = () => {
   };
   return (
     <View className="flex-1 justify-center p-4">
-      <ControlledInput control={control} name="email" label="Email" />
       <ControlledInput
+        testID="emailInput"
+        control={control}
+        name="email"
+        label="Email"
+      />
+      <ControlledInput
+        testID="passwordInput"
         control={control}
         name="password"
         label="Password"
         placeholder="***"
         secureTextEntry={true}
       />
       <Button
+        testID="LoginButton"
         label="Login"
         onPress={handleSubmit(onSubmit)}
         variant="primary"

template/src/screens/login/login.test.tsx

@@ -0,0 +1,20 @@
+//App.spec.tsx
+import { cleanup, render, screen } from '@testing-library/react-native';
+import React from 'react';
+
+import { Login } from './index';
+
+afterEach(cleanup);
+
+test('LoginComponents', () => {
+  render(<Login />);
+  const { getByTestId } = screen;
+
+  const emailInput = getByTestId('emailInput');
+  const passwordInput = getByTestId('passwordInput');
+  const LoginButton = getByTestId('LoginButton');
+
+  expect(emailInput).toBeDefined();
+  expect(passwordInput).toBeDefined();
+  expect(LoginButton).toBeDefined();
+});

template/src/ui/core/input/input.tsx

@@ -41,6 +41,7 @@ export const Input = React.forwardRef<TextInput, NInputProps>((props, ref) => {
         </Text>
       )}
       <STextInput
+        testID="STextInput"
         ref={ref}
         placeholderTextColor={colors.neutral[400]}
         className={`mt-0 border-[1px] py-4 px-2  ${borderColor} rounded-md ${bgColor} text-[16px] ${textDirection}`}

template/tsconfig.json

@@ -6,6 +6,7 @@
     "paths": {
       "@/*": ["./src/*"],
       "@config": ["./config/index.ts"]
-    }
+    },
+    "esModuleInterop": true
   }
 }