feat: Refactor Code

App.js

@@ -12,9 +12,7 @@ if (!window.Intl) {
   })
     .then(() => Promise.all([import('intl/locale-data/jsonp/en.js')]))
     .then(() => AppRegistry.registerComponent(appName, () => App))
-    .catch(err => {
-      throw err;
-    });
+    .catch(alert);
 } else {
   AppRegistry.registerComponent(appName, () => App);
 }

app/components/molecules/If/tests/index.test.js → app/components/atoms/If/tests/index.test.js

@@ -9,35 +9,48 @@
 import React from 'react';
 import { Text } from 'react-native';
 import { render } from '@testing-library/react-native';
-
 import If from '../index';
 
 describe('<If />', () => {
   it('Should render and match the snapshot', () => {
     const baseElement = render(<If />);
     expect(baseElement).toMatchSnapshot();
   });
-  it('Should render the correct prop component based on the condition', () => {
-    const conditionTrueText = 'Shoudld render when condition is true';
+
+  it('If should render the child component when props.condition = true', () => {
+    const conditionTrueText = 'Should render when condition is true';
     const conditionFalseText = 'Should render condition is false';
     const OtherwiseComponent = () => <Text>{conditionFalseText}</Text>;
     const TrueConditionComponent = () => <Text>{conditionTrueText}</Text>;
     const props = {
       otherwise: <OtherwiseComponent />,
       condition: true
     };
-    const { getByText } = render(
+    const { queryByText, getByText } = render(
       <If {...props}>
         <TrueConditionComponent />
       </If>
     );
     expect(getByText(conditionTrueText)).toBeTruthy();
-    props.condition = false;
-    const { getByText: textQueryOnReRender } = render(
+    expect(queryByText(conditionFalseText)).not.toBeTruthy();
+  });
+
+  it('If should render the component passed on otherwise when props.condition = false', () => {
+    const conditionFalseText = 'Should render condition is false';
+    const conditionTrueText = 'Should render when condition is true';
+    const TrueConditionComponent = () => <Text>{conditionTrueText}</Text>;
+    const OtherwiseComponent = () => <Text>{conditionFalseText}</Text>;
+    const props = {
+      otherwise: <OtherwiseComponent />,
+      condition: false
+    };
+
+    const { queryByText, getByText } = render(
       <If {...props}>
         <TrueConditionComponent />
       </If>
     );
-    expect(textQueryOnReRender(conditionFalseText)).toBeTruthy();
+    expect(getByText(conditionFalseText)).toBeTruthy();
+    expect(queryByText(conditionTrueText)).not.toBeTruthy();
   });
 });

app/components/molecules/CharacterWithQuote/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components/native';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import { fonts } from '@themes';
 import T from '@atoms/T';
@@ -23,7 +23,7 @@ function CharacterWithQuote({ user }) {
       <Result
         id="wednesday_lover"
         values={{
-          username: get(user, 'character') || 'character'
+          username: get(user, 'character', 'character')
         }}
       />
       <Result id="because" />

app/components/organisms/SimpsonsLoveWednesday/index.js

@@ -2,11 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components/native';
 import { fonts } from '@themes';
-import If from '@molecules/If';
+import If from '@app/components/atoms/If';
 import CharacterWithQuote from '@molecules/CharacterWithQuote';
 import LogoWithInstructions from '@molecules/LogoWithInstructions';
 
-const Error = styled.Text`
+const Err = styled.Text`
   ${fonts.style.standard()};
   text-align: center;
   margin-bottom: 5px;
@@ -32,7 +32,7 @@ function SimpsonsLoveWednesday({ instructions, user, userErrorMessage }) {
       <LogoWithInstructions instructions={instructions} />
       <If
         condition={!userErrorMessage}
-        otherwise={<Error>{userErrorMessage}</Error>}
+        otherwise={<Err>{userErrorMessage}</Err>}
       >
         <SeparatedView>
           <CharacterWithQuote user={user} />

app/components/organisms/SimpsonsLoveWednesday/tests/index.test.js

@@ -10,7 +10,6 @@ import React from 'react';
 import { renderWithIntl } from '@utils/testUtils';
 import { rerender } from '@testing-library/react-native';
 import SimpsonsLoveWednesday from '../index';
-
 describe('<SimpsonsLoveWednesday />', () => {
   it('Should render and match the snapshot', () => {
     const baseElement = renderWithIntl(<SimpsonsLoveWednesday />);
@@ -29,7 +28,18 @@ describe('<SimpsonsLoveWednesday />', () => {
     };
     const { getByText } = renderWithIntl(<SimpsonsLoveWednesday {...props} />);
     expect(getByText(props.userErrorMessage)).toBeTruthy();
-    props.userErrorMessage = null;
+  });
+  it('Should render the component if userErrorMessage is empty', () => {
+    const props = {
+      userErrorMessage: null,
+      instructions: 'PRESS CMD + D for iOS',
+      user: {
+        character: 'Homer',
+        image:
+          'https://www.onthisday.com/images/people/homer-simpson-medium.jpg',
+        quote: "D'Oh!"
+      }
+    };
     const { getByText: textQueryOnReRender } = renderWithIntl(
       <SimpsonsLoveWednesday {...props} />,
       rerender

app/utils/apiUtils.js

@@ -1,8 +1,9 @@
 import { create } from 'apisauce';
 import mapKeysDeep from 'map-keys-deep';
-import { camelCase, snakeCase } from 'lodash';
+import camelCase from 'lodash/camelCase';
+import snakeCase from 'lodash/snakeCase';
 import { Config } from '@app/config/index';
-
+import get from 'lodash/get';
 export const apiClients = {
   configApi: null,
   default: null
@@ -11,10 +12,14 @@
 export const generateApiClient = (type = 'configApi') => {
   switch (type) {
     case 'configApi':
-      apiClients[type] = createApiClientWithTransForm(Config.API_URL);
-      return apiClients[type];
+      Object.assign(apiClients, {
+        [type]: createApiClientWithTransForm(Config.API_URL)
+      });
+      return get(apiClients, type);
     default:
-      apiClients.default = createApiClientWithTransForm(Config.API_URL);
+      Object.assign(apiClients, {
+        default: createApiClientWithTransForm(Config.API_URL)
+      });
       return apiClients.default;
   }
 };
@@ -27,15 +32,19 @@
   api.addResponseTransform(response => {
     const { ok, data } = response;
     if (ok && data) {
-      response.data = mapKeysDeep(data, keys => camelCase(keys));
+      Object.assign(response, {
+        data: mapKeysDeep(data, keys => camelCase(keys))
+      });
     }
     return response;
   });
 
   api.addRequestTransform(request => {
     const { data } = request;
     if (data) {
-      request.data = mapKeysDeep(data, keys => snakeCase(keys));
+      Object.assign(request, {
+        data: mapKeysDeep(data, keys => snakeCase(keys))
+      });
     }
     return request;
   });

app/utils/createStore.js

@@ -26,14 +26,10 @@ const persistConfig = {
 };
 
 export default (rootReducer, rootSaga) => {
-  const middleware = [];
-  const enhancers = [];
-
   // Connect the sagas to the redux store
   const sagaMiddleware = createSagaMiddleware();
-  middleware.push(sagaMiddleware);
-
-  enhancers.push(applyMiddleware(...middleware));
+  const middleware = [sagaMiddleware];
+  const enhancers = [applyMiddleware(...middleware)];
 
   // Redux persist
   const persistedReducer = persistReducer(persistConfig, rootReducer);

app/utils/testUtils.js

@@ -5,7 +5,7 @@ import { Provider } from 'react-redux';
 import createStore from 'app/rootReducer';
 import { DEFAULT_LOCALE, translationMessages } from '@app/i18n';
 import ConnectedLanguageProvider from '@atoms/LanguageProvider';
-
+import get from 'lodash/get';
 export const apiResponseGenerator = (ok, data) => ({
   ok,
   data
@@ -14,7 +14,7 @@ export const renderWithIntl = (children, renderFunction = render) =>
   renderFunction(
     <IntlProvider
       locale={DEFAULT_LOCALE}
-      messages={translationMessages[DEFAULT_LOCALE]}
+      messages={get(translationMessages, DEFAULT_LOCALE)}
     >
       {children}
     </IntlProvider>

setupTests.js

@@ -1,5 +1,5 @@
 import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
-
+import { LogBox } from 'react-native';
 jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);
 
 jest.mock('redux-persist', () => {
@@ -10,4 +10,4 @@ jest.mock('redux-persist', () => {
   };
 });
 
-console.disableYellowBox = true;
+LogBox.ignoreAllLogs();