Added Tests for Home and Login page, getting out of time so could not…

… write more, spent most of time fixing react-native spacific issues with jest

__mocks__/@react-native-community/async-storage.js

@@ -0,0 +1 @@
+export default from '@react-native-community/async-storage/jest/async-storage-mock';

__mocks__/svgMock.js

@@ -0,0 +1,2 @@
+module.exports = "SvgMock";
+// module.exports.ReactComponent = "SvgMock";

__tests__/App.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { cleanup, fireEvent } from 'react-native-testing-library';
+import 'jest-styled-components';
+import { customRender } from './utils';
+import App from 'components/App';
+import renderer from 'react-test-renderer';
+
+
+afterEach(cleanup);
+
+jest.mock('redux-persist/integration/react', () => ({
+  PersistGate: props => props.children,
+}));
+
+it('renders correctly', () => {
+  const { getByText, baseElement } = customRender(
+    <App />,
+  );
+  expect(baseElement).toMatchSnapshot()
+});

__tests__/Home.test.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, cleanup, fireEvent } from 'react-native-testing-library';
+import 'jest-styled-components';
+import { customRender } from './utils';
+
+import Home from 'components/Home/Home';
+
+afterEach(cleanup);
+
+
+
+describe('<Home />', () => {  
+  it('should have title text', () => {
+    const { getByText, baseElement } = customRender(
+      <Home />
+    );
+    expect(getByText('Currency Converter')).toBeTruthy()
+    expect(baseElement).toMatchSnapshot()
+  });
+});
+
+// test('renders correctly', () => {
+//   const tree = renderer.create(<Home />).toJSON();
+//   expect(tree).toMatchSnapshot();
+// });
+
+
+// test('examples of some things', async () => {
+//   const { getByTestId, getByText, queryByTestId, baseElement } = render(<Home />);
+//   // const famousWomanInHistory = 'Ada Lovelace';
+
+//   // const input = getByTestId('input');
+//   // fireEvent.changeText(input, famousWomanInHistory);
+
+//   // const button = getByText('Print Username');
+//   // fireEvent.press(button);
+
+//   // await wait(() => expect(queryByTestId('printed-username')).toBeTruthy());
+
+//   // expect(getByTestId('printed-username').props.children).toBe(famousWomanInHistory);
+//   // expect(baseElement).toMatchSnapshot();
+// });

__tests__/Login.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { cleanup } from 'react-native-testing-library';
+import 'jest-styled-components';
+import { customRender } from './utils';
+
+import Login from 'components/Login/Login';
+
+afterEach(cleanup);
+
+
+
+describe('<Login />', () => {  
+  it('should render', () => {
+    const { getByText, baseElement } = customRender(
+      <Login />
+    );
+    expect(baseElement).toMatchSnapshot()
+  });
+});

__tests__/__snapshots__/App.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `undefined`;

__tests__/__snapshots__/Home.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Home /> should have title text 1`] = `undefined`;

__tests__/__snapshots__/Login.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Login /> should render 1`] = `undefined`;

__tests__/utils.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render } from 'react-native-testing-library';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+
+import { THEMES_MAP } from 'constants';
+import { AUTH_STATES } from 'constants';
+
+export const initialState = {
+  appReducer: {
+    theme: THEMES_MAP.Blue,
+    authState: AUTH_STATES.LOGGED_OUT,
+    loginLoading: false,
+    favorites: {},
+  },
+  currencyReducer: {
+    baseCurrency: 'USD',
+    targetCurrency: 'AUD',
+    baseCurrencyValue: 0,
+    targetCurrencyValue: 0,
+    rates: {},
+  }
+}
+
+const mockStore = configureStore([]);
+const mockedStore = mockStore(initialState);
+export const customRender = (ui, store = mockedStore) => {
+  return render(
+    <Provider store={store}>
+      {ui}
+    </Provider>,
+    {
+      createNodeMock: (element) => {
+        if (element.type === PersistGate) { return element.props.children }
+        return null;
+     }
+    }
+  )
+}

android/app/src/main/java/com/currencyconverter/MainApplication.java

@@ -4,6 +4,7 @@
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.reactnativecommunity.asyncstorage.AsyncStoragePackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;

android/settings.gradle

@@ -1,3 +1,5 @@
 rootProject.name = 'CurrencyConverter'
+include ':@react-native-community_async-storage'
+project(':@react-native-community_async-storage').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/async-storage/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'

babel.config.js

@@ -1,5 +1,10 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  "env": {
+    "test": {
+      "plugins": ["@babel/plugin-transform-modules-commonjs"]
+    }
+  },
   plugins: [
     [
       'module-resolver',

components/Home/Home.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from 'styled-components/native';
 
 import Screen from 'components/Screen';
 import AppLogo from 'components/AppLogo';
@@ -32,7 +32,7 @@ function Home({ navigation }) {
     <Screen backgroundColor={theme.color}>
       <AppLogo scale={imageScale} translateY={imageY} showInfo />
       <InputsContainer translateY={inputContainerY}>
-        <Title>Currency Converter</Title>
+        <Title testID="main-title">Currency Converter</Title>
         <CurrencyInput
           code={baseCurrency}
           changeCurrency={(item) => {

components/ListItem.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/native';
 
 const ListItem = styled.View`
   display: flex;

components/ListItemTitle.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/native';
 
 const ListItemTitle = styled.Text`
   font-size: ${(props) => `${props.fontSize || 16}px`};

components/Login/Login.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { faUser, faLock, faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { faUser, faLock } from '@fortawesome/free-solid-svg-icons';
 
 import Screen from 'components/Screen';
 import AppLogo from 'components/AppLogo';

components/Options/Option.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/native';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';

components/Screen.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from 'styled-components/native';
 
 const Screen = styled.View`
   flex: 1;

components/StyledComponents.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/native';
 import { Animated, Easing } from 'react-native';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';

ios/Podfile

@@ -77,6 +77,8 @@ target 'CurrencyConverter' do
   pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
   pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
 
+  pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage'
+
   target 'CurrencyConverterTests' do
     inherit! :complete
     # Pods for testing

package.json

@@ -37,17 +37,28 @@
   },
   "devDependencies": {
     "@babel/core": "^7.10.3",
+    "@babel/plugin-transform-modules-commonjs": "^7.10.1",
     "@babel/runtime": "^7.10.3",
     "@react-native-community/eslint-config": "^2.0.0",
     "babel-jest": "^26.0.1",
     "babel-plugin-module-resolver": "^4.0.0",
     "eslint": "^7.3.0",
     "jest": "^26.0.1",
+    "jest-styled-components": "^7.0.2",
     "metro-react-native-babel-preset": "^0.59.0",
-    "react-test-renderer": "16.11.0"
+    "react-native-testing-library": "^2.1.0",
+    "react-test-renderer": "16.11.0",
+    "redux-mock-store": "^1.5.4"
   },
   "jest": {
-    "preset": "react-native"
+    "preset": "react-native",
+    "transformIgnorePatterns": [
+      "node_modules/(?!@fortawesome/react-native-fontawesome|(?!deck.gl)|ng-dynamic)"
+    ],
+    "moduleNameMapper": {
+      "\\.svg": "<rootDir>/__mocks__/svgMock.js"
+    },
+    "setupFiles": [ "./node_modules/react-native-gesture-handler/jestSetup.js" ]
   },
   "rnpm": {
     "assets": [

yarn.lock

@@ -526,7 +526,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.1"
 
-"@babel/plugin-transform-modules-commonjs@^7.0.0":
+"@babel/plugin-transform-modules-commonjs@^7.0.0", "@babel/plugin-transform-modules-commonjs@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.10.1.tgz#d5ff4b4413ed97ffded99961056e1fb980fb9301"
   integrity sha512-AQG4fc3KOah0vdITwt7Gi6hD9BtQP/8bhem7OjbaMoRNCH5Djx42O2vYMfau7QnAzQCa+RJnhJBmFFMGpQEzrg==
@@ -2556,6 +2556,16 @@ css-what@^3.2.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.3.0.tgz#10fec696a9ece2e591ac772d759aacabac38cd39"
   integrity sha512-pv9JPyatiPaQ6pf4OvD/dbfm0o5LviWmwxNWzblYf/1u9QZd0ihV+PMwy5jdQWQ3349kZmKEx9WXuSka2dM4cg==
 
+css@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
+  integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
+  dependencies:
+    inherits "^2.0.3"
+    source-map "^0.6.1"
+    source-map-resolve "^0.5.2"
+    urix "^0.1.0"
+
 csso@^4.0.2:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/csso/-/csso-4.0.3.tgz#0d9985dc852c7cc2b2cacfbbe1079014d1a8e903"
@@ -4464,6 +4474,13 @@ jest-snapshot@^26.0.1:
     pretty-format "^26.0.1"
     semver "^7.3.2"
 
+jest-styled-components@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-7.0.2.tgz#b7711871ea74a04491b12bad123fa35cc65a2a80"
+  integrity sha512-i1Qke8Jfgx0Why31q74ohVj9S2FmMLUE8bNRSoK4DgiurKkXG6HC4NPhcOLAz6VpVd9wXkPn81hOt4aAQedqsA==
+  dependencies:
+    css "^2.2.4"
+
 jest-util@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.9.0.tgz#7396814e48536d2e85a37de3e4c431d7cb140162"
@@ -4804,6 +4821,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -6025,6 +6047,13 @@ react-native-svg@^12.1.0:
     css-select "^2.1.0"
     css-tree "^1.0.0-alpha.39"
 
+react-native-testing-library@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-testing-library/-/react-native-testing-library-2.1.0.tgz#820a300dcae70d3da64813b816d208a14ab05f19"
+  integrity sha512-cBZIQ60XzT8pN5XNcvI5OE4ADej43pT43jLynKIrQRnBuw5cIJotN+xHyLxyGcv4WdiCCONmyK3yhIOXV8PTyQ==
+  dependencies:
+    pretty-format "^26.0.1"
+
 react-native-vector-icons@^6.6.0:
   version "6.6.0"
   resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-6.6.0.tgz#66cf004918eb05d90778d64bd42077c1800d481b"
@@ -6145,6 +6174,13 @@ redux-logger@^3.0.6:
   dependencies:
     deep-diff "^0.3.5"
 
+redux-mock-store@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/redux-mock-store/-/redux-mock-store-1.5.4.tgz#90d02495fd918ddbaa96b83aef626287c9ab5872"
+  integrity sha512-xmcA0O/tjCLXhh9Fuiq6pMrJCwFRaouA8436zcikdIpYWWCjU76CRk+i2bHx8EeiSiMGnB85/lZdU3wIJVXHTA==
+  dependencies:
+    lodash.isplainobject "^4.0.6"
+
 redux-persist@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
@@ -6687,7 +6723,7 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
-source-map-resolve@^0.5.0:
+source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
   integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==