Nav bar testing

.gitignore

@@ -8,7 +8,7 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
-coverage
+coverage/**/*
 
 # macOS
 .DS_Store

components/NavBar.js → components/NavBar/NavBar.js

@@ -15,7 +15,7 @@ const NavBar = ({ navigation }) => {
         <Image
           accessibilityRole="button"
           id="search"
-          source={require("../assets/icons/search.png")}
+          source={require("../../assets/icons/search.png")}
           style={styles.icons}
         />
       </TouchableWithoutFeedback>
@@ -25,15 +25,15 @@ const NavBar = ({ navigation }) => {
         <Image
           accessibilityRole="button"
           id="add"
-          source={require("../assets/icons/add.png")}
+          source={require("../../assets/icons/add.png")}
           style={styles.icons}
         />
       </TouchableWithoutFeedback>
       <TouchableWithoutFeedback>
         <Image
           accessibilityRole="button"
           id="profile"
-          source={require("../assets/icons/profile.png")}
+          source={require("../../assets/icons/profile.png")}
           style={styles.icons}
         />
       </TouchableWithoutFeedback>

components/NavBar/NavBar.test.js

@@ -0,0 +1,31 @@
+import NavBar from "./NavBar";
+import React from "react";
+import renderer from "react-test-renderer";
+
+
+describe("NavBar", () => {
+  it("should render three icons component", () => {
+    const tree = renderer.create(<NavBar />).toJSON();
+    expect(tree.children.length).toBe(3);
+  });
+  it("renders correctly", () => {
+    const tree = renderer.create(<NavBar />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it("should render a search icon first", () => {
+    const tree = renderer.create(<NavBar />).toJSON();
+    const searchIconId = tree.children[0].children[0].children[0].props.id;
+    expect(searchIconId).toBe("search");
+  });
+  it("should render a plus icon second", () => {
+    const tree = renderer.create(<NavBar />).toJSON();
+    const addIconId = tree.children[1].children[0].children[0].props.id;
+    expect(addIconId).toBe("add");
+  });
+  it("should render a profile icon third", () => {
+    const tree = renderer.create(<NavBar />).toJSON();
+    const addIconId = tree.children[2].children[0].children[0].props.id;
+    expect(addIconId).toBe("profile");
+  });
+
+});

components/NavBar/__snapshots__/NavBar.test.js.snap

@@ -0,0 +1,116 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NavBar renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "white",
+      "bottom": "0%",
+      "display": "flex",
+      "flexDirection": "row",
+      "height": "11%",
+      "justifyContent": "space-around",
+      "padding": 10,
+      "position": "absolute",
+      "width": "100%",
+    }
+  }
+>
+  <RNGestureHandlerButton
+    collapsable={false}
+    onGestureEvent={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onHandlerStateChange={[Function]}
+    rippleColor={0}
+    style={
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessible={true}
+    >
+      <Image
+        accessibilityRole="button"
+        id="search"
+        source={1}
+        style={
+          Object {
+            "height": 45,
+            "width": 45,
+          }
+        }
+      />
+    </View>
+  </RNGestureHandlerButton>
+  <RNGestureHandlerButton
+    collapsable={false}
+    onGestureEvent={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onHandlerStateChange={[Function]}
+    rippleColor={0}
+    style={
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessible={true}
+    >
+      <Image
+        accessibilityRole="button"
+        id="add"
+        source={1}
+        style={
+          Object {
+            "height": 45,
+            "width": 45,
+          }
+        }
+      />
+    </View>
+  </RNGestureHandlerButton>
+  <RNGestureHandlerButton
+    collapsable={false}
+    onGestureEvent={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onHandlerStateChange={[Function]}
+    rippleColor={0}
+    style={
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessible={true}
+    >
+      <Image
+        accessibilityRole="button"
+        id="profile"
+        source={1}
+        style={
+          Object {
+            "height": 45,
+            "width": 45,
+          }
+        }
+      />
+    </View>
+  </RNGestureHandlerButton>
+</View>
+`;

package.json

@@ -33,6 +33,7 @@
     "babel-preset-expo": "~8.1.0",
     "jest": "^26.1.0",
     "jest-expo": "^38.0.2",
+    "react-native-testing-library": "^2.1.1",
     "react-test-renderer": "^16.13.1"
   },
   "private": true,
@@ -42,6 +43,14 @@
     "testEnvironment": "jsdom",
     "transformIgnorePatterns": [
       "/node_modules/(?!native-base)/"
+    ],
+    "collectCoverage": true,
+    "collectCoverageFrom": [
+      "**/*.{js,jsx}",
+      "!**/coverage/**",
+      "!**/node_modules/**",
+      "!**/babel.config.js",
+      "!**/jest.setup.js"
     ]
   }
 }

screens/ListingDetails.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Image, Text, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import NavBar from "../components/NavBar";
+import NavBar from "../components/NavBar/NavBar";
 import { StyleSheet } from "react-native";
 import { TouchableOpacity, ScrollView } from "react-native-gesture-handler";
 import { useStore } from "../store";

screens/Welcome.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View, Button, Image, Text } from "react-native";
-import NavBar from "../components/NavBar";
+import NavBar from '../components/NavBar/NavBar';
 import { StyleSheet } from "react-native";
 import { TouchableOpacity } from "react-native-gesture-handler";