[Refactor] code base (#134)

* Update podfile.lock * Refactor code base - typgins & testing * Update packages
hyochan · Dec 31, 2019 · 0027f54 · 0027f54
1 parent e90311c
commit 0027f54
Show file tree

Hide file tree

Showing 14 changed files with 786 additions and 668 deletions.
diff --git a/STRINGS.ts b/STRINGS.ts
@@ -15,7 +15,7 @@ i18n.translations = { en, ko };
 
 export const getString = (param: string, mapObj?: object): string => {
   if (mapObj) {
-    i18n.t(param, mapObj);
+    return i18n.t(param, mapObj);
   }
   return i18n.t(param);
 };
diff --git a/assets/langs/en.json b/assets/langs/en.json
@@ -5,6 +5,6 @@
   "PASSWORD": "Password",
   "SIGNUP": "SIGN UP",
   "FORGOT_PW": "Forgot password?",
-  "NAVIGATE": "Navigate",
+  "NAVIGATE": "Navigate to %{name}",
   "CHANGE_THEME": "Change theme"
 }
diff --git a/assets/langs/ko.json b/assets/langs/ko.json
@@ -5,6 +5,6 @@
   "PASSWORD": "패스워드",
   "SIGNUP": "회원가입",
   "FORGOT_PW": "비밀번호를 잊어버리셨나요?",
-  "NAVIGATE": "이동하기",
+  "NAVIGATE": "%{name}으로 이동",
   "CHANGE_THEME": "테마 변경"
 }
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -219,7 +219,7 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
     - ReactCommon/jscallinvoker (= 0.61.5)
-  - RNCAsyncStorage (1.7.0):
+  - RNCAsyncStorage (1.7.1):
     - React
   - RNCMaskedView (0.1.5):
     - React
@@ -367,7 +367,7 @@ SPEC CHECKSUMS:
   React-RCTText: 9ccc88273e9a3aacff5094d2175a605efa854dbe
   React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad
   ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
-  RNCAsyncStorage: 8a2fadab0c6cc58d6a0629e24f978cc2ff3151fc
+  RNCAsyncStorage: 44395cb9c7c1523104c2b499eb426ef7aff82bca
   RNCMaskedView: dd13f9f7b146a9ad82f9b7eb6c9b5548fcf6e990
   RNGestureHandler: 946a7691e41df61e2c4b1884deab41a4cdc3afff
   RNLocalize: 07eb7a91d10021cdf59d80061ebf3adb8a5b5688

diff --git a/package.json b/package.json
@@ -59,20 +59,21 @@
     "@babel/plugin-transform-runtime": "7.7.6",
     "@babel/preset-typescript": "^7.7.4",
     "@babel/runtime": "^7.7.6",
-    "@dooboo/eslint-config": "^0.3.1",
+    "@dooboo/eslint-config": "^0.3.3",
     "@testing-library/jest-native": "^3.1.0",
     "@testing-library/react-native": "^5.0.3",
-    "@types/jest": "^24.0.24",
+    "@types/i18n-js": "^3.0.1",
+    "@types/jest": "^24.0.25",
     "@types/react": "^16.9.17",
-    "@types/react-native": "^0.60.25",
+    "@types/react-native": "^0.60.27",
     "@types/react-test-renderer": "^16.9",
     "@types/styled-components": "^4.4.1",
     "babel-jest": "24.9.0",
     "babel-preset-react-native": "^5.0.2",
     "codecov": "^3.6.1",
     "eslint": "^6.8.0",
     "jest": "^24.9.0",
-    "jest-fetch-mock": "^3.0.0",
+    "jest-fetch-mock": "^3.0.1",
     "jest-styled-components": "^6.3.4",
     "jetifier": "^1.6.5",
     "metro-react-native-babel-preset": "^0.57.0",

diff --git a/src/components/navigation/RootStackNavigator.tsx b/src/components/navigation/RootStackNavigator.tsx
@@ -1,11 +1,22 @@
+import { StackNavigationProp, createStackNavigator } from '@react-navigation/stack';
+
 import Intro from '../screen/Intro';
 import { NavigationNativeContainer } from '@react-navigation/native';
 import React from 'react';
 import Temp from '../screen/Temp';
-import { createStackNavigator } from '@react-navigation/stack';
 import { useThemeContext } from '@dooboo-ui/native-theme';
 
-const Stack = createStackNavigator();
+export type RootStackParamList = {
+  default: undefined;
+  Intro: undefined;
+  Temp: { param: string } | undefined;
+}
+
+export type RootStackNavigationProps<
+  T extends keyof RootStackParamList = 'default'
+> = StackNavigationProp<RootStackParamList, T>;
+
+const Stack = createStackNavigator<RootStackParamList>();
 
 function RootNavigator(): React.ReactElement {
   const { theme } = useThemeContext();

diff --git a/src/components/screen/Intro.tsx b/src/components/screen/Intro.tsx
@@ -1,8 +1,8 @@
-import { DefaultNavigationProps, User } from '../../types';
-
 import Button from '../shared/Button';
 import { IC_MASK } from '../../utils/Icons';
 import React from 'react';
+import { RootStackNavigationProps } from '../navigation/RootStackNavigator';
+import { User } from '../../types';
 import { View } from 'react-native';
 import { getString } from '../../../STRINGS';
 import styled from 'styled-components/native';
@@ -44,7 +44,7 @@ const StyledText = styled.Text`
 `;
 
 interface Props {
-  navigation: DefaultNavigationProps<'Intro'>;
+  navigation: RootStackNavigationProps<'Intro'>;
 }
 
 function Intro(props: Props): React.ReactElement {
@@ -82,21 +82,23 @@ function Intro(props: Props): React.ReactElement {
       </ContentWrapper>
       <ButtonWrapper>
         <Button
-          testID="btn1"
+          testID="btn-login"
           imgLeftSrc={IC_MASK}
           isLoading={isLoggingIn}
           onClick={(): void => onLogin()}
           text={getString('LOGIN')}
         />
         <View style={{ marginTop: 8 }} />
         <Button
-          testID="btn2"
-          onClick={(): void => props.navigation.navigate('Temp')}
-          text={getString('NAVIGATE', {})}
+          testID="btn-navigate"
+          onClick={(): void => props.navigation.navigate('Temp', {
+            param: 'GO BACK',
+          })}
+          text={getString('NAVIGATE', { name: 'Temp' })}
         />
         <View style={{ marginTop: 8 }} />
         <Button
-          testID="btn3"
+          testID="btn-theme"
           onClick={(): void => changeThemeType()}
           text={getString('CHANGE_THEME')}
         />

diff --git a/src/components/screen/Temp.tsx b/src/components/screen/Temp.tsx
@@ -1,6 +1,8 @@
+import { MainStackParamList, RouteProp } from '@react-navigation/core';
+
 import Button from '../shared/Button';
-import { DefaultNavigationProps } from '../../types';
 import React from 'react';
+import { RootStackNavigationProps } from '../../components/navigation/RootStackNavigator';
 import styled from 'styled-components/native';
 
 const Container = styled.View`
@@ -12,16 +14,18 @@ const Container = styled.View`
 `;
 
 interface Props {
-  navigation: DefaultNavigationProps<'Temp'>;
+  navigation: RootStackNavigationProps<'Temp'>;
+  route: RouteProp<MainStackParamList, 'Temp'>;
 }
 
 function Page(props: Props): React.ReactElement {
+  const { route: { params: { param } }, navigation } = props;
   return (
     <Container>
       <Button
-        testID="btn"
-        onClick={(): void => props.navigation.goBack()}
-        text="Go Back"
+        testID="btn-back"
+        onClick={(): void => navigation.goBack()}
+        text={param}
         style={{
           backgroundColor: '#333333',
         }}

diff --git a/src/components/screen/__tests__/Intro.test.tsx b/src/components/screen/__tests__/Intro.test.tsx
@@ -10,11 +10,13 @@ import renderer from 'react-test-renderer';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let props: any;
 let component: ReactElement;
+let testingLib: RenderResult;
 
 describe('[Intro] screen rendering test', () => {
   beforeEach(() => {
     props = createTestProps();
     component = createTestElement(<Intro {...props} />);
+    testingLib = render(component);
   });
 
   it('should render outer component and snapshot matches', () => {
@@ -25,29 +27,32 @@ describe('[Intro] screen rendering test', () => {
 
   it('should render [Dark] theme', () => {
     component = createTestElement(<Intro {...props} />, ThemeType.DARK);
-    const json = renderer.create(component).toJSON();
-    expect(json).toMatchSnapshot();
-    expect(json).toBeTruthy();
+    testingLib = render(component);
+    const { baseElement } = testingLib;
+    expect(baseElement).toMatchSnapshot();
+    expect(baseElement).toBeTruthy();
   });
 
   it('should render [isLoading] status', () => {
     props = createTestProps({
       isLoading: true,
     });
     component = createTestElement(<Intro {...props} />, ThemeType.DARK);
-    const json = renderer.create(component).toJSON();
-    expect(json).toMatchSnapshot();
-    expect(json).toBeTruthy();
+    testingLib = render(component);
+    const { baseElement } = testingLib;
+    expect(baseElement).toMatchSnapshot();
+    expect(baseElement).toBeTruthy();
   });
 
   it('should render [isDisabled] status', () => {
     props = createTestProps({
       isDisabled: true,
     });
     component = createTestElement(<Intro {...props} />, ThemeType.DARK);
-    const json = renderer.create(component).toJSON();
-    expect(json).toMatchSnapshot();
-    expect(json).toBeTruthy();
+    testingLib = render(component);
+    const { baseElement } = testingLib;
+    expect(baseElement).toMatchSnapshot();
+    expect(baseElement).toBeTruthy();
   });
 });
 
@@ -56,15 +61,15 @@ describe('[Intro] Interaction', () => {
   let rendered: renderer.ReactTestRenderer;
   let root: renderer.ReactTestInstance;
 
-  it('should simulate [onLogin] click', () => {
+  it('should simulate login when button has clicked', () => {
     testingLib = render(component);
     rendered = renderer.create(component);
     root = rendered.root;
 
     jest.useFakeTimers();
     const buttons = root.findAllByType(Button);
 
-    const button = testingLib.getByTestId('btn1');
+    const button = testingLib.getByTestId('btn-login');
     act(() => {
       fireEvent.press(button);
       expect(setTimeout).toHaveBeenCalledTimes(1);
@@ -75,20 +80,22 @@ describe('[Intro] Interaction', () => {
     expect(buttons[0].props.isLoading).toEqual(false);
   });
 
-  it('should simulate [navigate] click', () => {
+  it('should navigate when button has clicked', () => {
     testingLib = render(component);
 
     act(() => {
-      fireEvent.press(testingLib.getByTestId('btn2'), 'click');
+      fireEvent.press(testingLib.getByTestId('btn-navigate'), 'click');
+    });
+    expect(props.navigation.navigate).toHaveBeenCalledWith('Temp', {
+      param: 'GO BACK',
     });
-    expect(props.navigation.navigate).toBeCalledWith('Temp');
   });
 
-  it('should simulate [changeTheme] click', () => {
+  it('should change theme when button has clicked', () => {
     testingLib = render(component);
 
     act(() => {
-      fireEvent.press(testingLib.getByTestId('btn3'), 'click');
+      fireEvent.press(testingLib.getByTestId('btn-theme'), 'click');
     });
   });
 });
diff --git a/src/components/screen/__tests__/Temp.test.tsx b/src/components/screen/__tests__/Temp.test.tsx
@@ -11,27 +11,42 @@ import { createTestElement, createTestProps } from '../../../../test/testUtils';
 
 import Temp from '../Temp';
 import { ThemeType } from '@dooboo-ui/native-theme';
-import renderer from 'react-test-renderer';
 
-let props;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let props: any;
 let component: ReactElement;
+let testingLib: RenderResult;
 
 describe('[Temp] render', () => {
-  props = createTestProps();
+  props = createTestProps({
+    route: {
+      params: {
+        param: 'GO BACK',
+      },
+    },
+  });
   component = createTestElement(<Temp {...props} />);
 
   it('renders without crashing', () => {
-    const rendered = renderer.create(component).toJSON();
-    expect(rendered).toMatchSnapshot();
-    expect(rendered).toBeTruthy();
+    testingLib = render(component);
+    const { baseElement } = testingLib;
+    expect(baseElement).toMatchSnapshot();
+    expect(baseElement).toBeTruthy();
   });
 
   it('should render [Dark] theme', () => {
-    props = createTestProps();
+    props = createTestProps({
+      route: {
+        params: {
+          param: 'GO BACK',
+        },
+      },
+    });
     component = createTestElement(<Temp {...props} />, ThemeType.DARK);
-    const json = renderer.create(component).toJSON();
-    expect(json).toMatchSnapshot();
-    expect(json).toBeTruthy();
+    testingLib = render(component);
+    const { baseElement } = testingLib;
+    expect(baseElement).toMatchSnapshot();
+    expect(baseElement).toBeTruthy();
   });
 });
 
@@ -42,8 +57,8 @@ describe('[Temp] Interaction', () => {
     renderResult = render(component);
   });
 
-  it('should simulate [onClick] when [btn] has been clicked', () => {
-    const btnInstance = renderResult.getByTestId('btn');
+  it('should simulate [onClick] when button has been clicked', () => {
+    const btnInstance = renderResult.getByTestId('btn-back');
     act(() => {
       fireEvent.press(btnInstance);
     });