Fix fetch sideeffect of test libs, clean react browser libs

Author: dhruvdutt

.babelrc

@@ -1,8 +1,8 @@
 {
-  "presets": ["babel-preset-expo"],
-  "env": {
-    "development": {
-      "plugins": ["transform-react-jsx-source"]
-    }
-  }
+	"presets": ["babel-preset-expo"],
+	"env": {
+		"development": {
+			"plugins": ["transform-react-jsx-source"]
+		}
+	}
 }

package.json

@@ -11,17 +11,27 @@
     "react-navigation": "^1.5.9"
   },
   "scripts": {
-    "start": "exp start -c --lan"
+    "start": "exp start -c --lan",
+    "test": "node_modules/.bin/jest"
+  },
+  "jest": {
+    "preset": "jest-expo"
   },
   "devDependencies": {
-		"babel-eslint": "^8.2.2",
-		"eslint": "^4.19.1",
-		"eslint-config-airbnb": "^16.1.0",
-		"eslint-config-prettier": "^2.9.0",
-		"eslint-plugin-import": "^2.9.0",
-		"eslint-plugin-jsx-a11y": "^6.0.3",
-		"eslint-plugin-prettier": "^2.6.0",
-		"eslint-plugin-react": "^7.7.0",
-    "prettier": "1.11.1"
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.2.2",
+    "babel-jest": "^22.4.3",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react-native": "^4.0.0",
+    "eslint": "^4.19.1",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-prettier": "^2.6.0",
+    "eslint-plugin-react": "^7.7.0",
+    "jest-expo": "^26.0.0",
+    "prettier": "1.11.1",
+    "regenerator-runtime": "^0.11.1"
   }
 }

src/__tests__/utils.test.js

@@ -0,0 +1,73 @@
+import * as utils from '../utils';
+
+const inputMapping = {
+	DataSearch: {
+		screen: 'DefaultScreen',
+		DataSearch_withTitle: {
+			screen: 'DataSearch_withTitle',
+		},
+		DataSearch_withIcon: {
+			screen: 'DataSearch_withIcon',
+		},
+	},
+	TextField: {
+		screen: 'DefaultScreen',
+		TextField_withTitle: {
+			screen: 'TextField_withTitle',
+		},
+		TextField_withIcon: {
+			screen: 'TextField_withIcon',
+		},
+	},
+};
+
+const outputOne = {
+	DataSearch: { screen: 'DefaultScreen' },
+	TextField: { screen: 'DefaultScreen' },
+};
+
+const outputTwo = {
+	DataSearch_withTitle: { screen: 'DataSearch_withTitle' },
+	DataSearch_withIcon: { screen: 'DataSearch_withIcon' },
+	TextField_withTitle: { screen: 'TextField_withTitle' },
+	TextField_withIcon: { screen: 'TextField_withIcon' },
+};
+
+const outputThree = {
+	DataSearch_withTitle: {
+		screen: 'DataSearch_withTitle',
+	},
+	DataSearch_withIcon: {
+		screen: 'DataSearch_withIcon',
+	},
+};
+
+const outputFour = {
+	TextField_withTitle: {
+		screen: 'TextField_withTitle',
+	},
+	TextField_withIcon: {
+		screen: 'TextField_withIcon',
+	},
+};
+
+/* eslint no-undef: 0 */
+test('Flattens MainDrawer Objects', () => {
+	expect(utils.flattenMainDrawerObjects(inputMapping)).toEqual(outputOne);
+});
+
+test('Flattens ChildDrawer Objects', () => {
+	expect(utils.flattenChildDrawerObjects(inputMapping)).toEqual(outputTwo);
+});
+
+test('Fetches ChildDrawer Options for DataSearch', () => {
+	expect(utils.getChildDrawerOptions(inputMapping, 'DataSearch')).toEqual(
+		outputThree
+	);
+});
+
+test('Fetches ChildDrawer Options for TextField', () => {
+	expect(utils.getChildDrawerOptions(inputMapping, 'TextField')).toEqual(
+		outputFour
+	);
+});

src/drawers/MainDrawer.js

@@ -5,6 +5,7 @@ import DrawerItem from '../components/DrawerItem';
 import ChildDrawer from './ChildDrawer';
 import DrawerContainer from '../components/DrawerContainer';
 import DrawerHeader from '../components/DrawerHeader';
+import screenMapping from './../screenMapping';
 
 class MainDrawer extends Component {
 	constructor(props) {
@@ -50,7 +51,10 @@ class MainDrawer extends Component {
 			);
 		}
 
-		const childDrawerItems = getChildDrawerOptions(currentComponent.key);
+		const childDrawerItems = getChildDrawerOptions(
+			screenMapping,
+			currentComponent.key
+		);
 
 		return (
 			<ChildDrawer

src/utils.js

@@ -1,5 +1,3 @@
-import screenMapping from './screenMapping';
-
 /*	Used in RootDrawer to register for each component individually
 	Flatten the screen mapping in form of:
 	{
@@ -56,7 +54,7 @@ export const flattenChildDrawerObjects = nestedObject => {
 		}
 	}
 */
-export const getChildDrawerOptions = componentId => {
+export const getChildDrawerOptions = (screenMapping, componentId) => {
 	const { screen, ...drawerOptions } = screenMapping[componentId];
 	return drawerOptions;
 };