Jest setup 💫

* Basic unit test.
* Folder re-structuring.

.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+cache/

.npmignore

@@ -1 +1,6 @@
-Example/
+Sample/
+src/__tests__/
+package-lock.json
+.gitignore
+.babelrc
+.flowconfig

_config.yml

@@ -1 +0,0 @@
-theme: jekyll-theme-merlot

package.json

@@ -2,9 +2,10 @@
   "name": "react-native-segmented-control-tab",
   "version": "3.3.1",
   "description": "A react native component with the same concept of react native's SegmantedControlIOS, Primarily built to support both IOS and Android.",
-  "main": "SegmentedControlTab.js",
+  "main": "src/SegmentedControlTab.js",
   "scripts": {
-    "flow": "flow check"
+    "flow": "flow check",
+    "test": "jest"
   },
   "repository": {
     "type": "git",
@@ -40,7 +41,19 @@
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "^7.11.1",
     "flow-bin": "^0.83.0",
+    "jest": "^23.6.0",
+    "jest-react-native": "^18.0.0",
     "react": "16.6.0-alpha.8af6728",
-    "react-native": "^0.57.2"
+    "react-native": "^0.57.2",
+    "react-test-renderer": "^16.5.2"
+  },
+  "jest": {
+    "preset": "react-native",
+    "coveragePathIgnorePatterns": [
+      "/node_modules/"
+    ],
+    "modulePathIgnorePatterns": [
+      "<rootDir>/Sample/"
+    ]
   }
-}
+}

src/__tests__/SegmentedControlTab.js

@@ -0,0 +1,14 @@
+/* @flow */
+import 'react-native'
+import React from 'react'
+import renderer from 'react-test-renderer'
+import SegmentedControlTab from '../SegmentedControlTab'
+
+jest.mock('../TabOption', () => 'TabOption')
+
+describe('<SegmentedControlTab />', () => {
+  it('should render default SegmentedControlTab', () => {
+    const tree = renderer.create(<SegmentedControlTab />)
+    expect(tree).toMatchSnapshot()
+  })
+})

src/__tests__/TabOption.js

@@ -0,0 +1,12 @@
+/* @flow */
+import 'react-native'
+import React from 'react'
+import renderer from 'react-test-renderer'
+import TabOption from '../TabOption'
+
+describe('<TabOption />', () => {
+  it('should render TabOption', () => {
+    const tree = renderer.create(<TabOption text="Tab value" />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

src/__tests__/__snapshots__/SegmentedControlTab.js.snap

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SegmentedControlTab /> should render default SegmentedControlTab 1`] = `
+<View
+  removeClippedSubviews={false}
+  style={
+    Array [
+      Object {
+        "backgroundColor": "transparent",
+        "flexDirection": "row",
+      },
+      Object {},
+    ]
+  }
+>
+  <TabOption
+    accessibilityLabel="One"
+    accessible={true}
+    activeTabBadgeContainerStyle={Object {}}
+    activeTabBadgeStyle={Object {}}
+    activeTabOpacity={1}
+    activeTabStyle={Object {}}
+    activeTabTextStyle={Object {}}
+    allowFontScaling={true}
+    badge={false}
+    enabled={true}
+    firstTabStyle={
+      Array [
+        Object {
+          "borderRightWidth": 0,
+        },
+        Array [
+          Object {
+            "borderBottomLeftRadius": 5,
+            "borderRightWidth": 0,
+            "borderTopLeftRadius": 5,
+          },
+        ],
+      ]
+    }
+    index={0}
+    isTabActive={true}
+    lastTabStyle={Object {}}
+    onTabPress={[Function]}
+    tabBadgeContainerStyle={Object {}}
+    tabBadgeStyle={Object {}}
+    tabStyle={
+      Array [
+        Object {},
+        Object {},
+      ]
+    }
+    tabTextStyle={Object {}}
+    text="One"
+    textNumberOfLines={1}
+  />
+  <TabOption
+    accessibilityLabel="Two"
+    accessible={true}
+    activeTabBadgeContainerStyle={Object {}}
+    activeTabBadgeStyle={Object {}}
+    activeTabOpacity={1}
+    activeTabStyle={Object {}}
+    activeTabTextStyle={Object {}}
+    allowFontScaling={true}
+    badge={false}
+    enabled={true}
+    firstTabStyle={Object {}}
+    index={1}
+    isTabActive={false}
+    lastTabStyle={Object {}}
+    onTabPress={[Function]}
+    tabBadgeContainerStyle={Object {}}
+    tabBadgeStyle={Object {}}
+    tabStyle={
+      Array [
+        Object {},
+        Object {
+          "marginLeft": -1,
+        },
+      ]
+    }
+    tabTextStyle={Object {}}
+    text="Two"
+    textNumberOfLines={1}
+  />
+  <TabOption
+    accessibilityLabel="Three"
+    accessible={true}
+    activeTabBadgeContainerStyle={Object {}}
+    activeTabBadgeStyle={Object {}}
+    activeTabOpacity={1}
+    activeTabStyle={Object {}}
+    activeTabTextStyle={Object {}}
+    allowFontScaling={true}
+    badge={false}
+    enabled={true}
+    firstTabStyle={Object {}}
+    index={2}
+    isTabActive={false}
+    lastTabStyle={
+      Array [
+        Object {
+          "borderLeftWidth": 0,
+        },
+        Array [
+          Object {
+            "borderBottomRightRadius": 5,
+            "borderLeftWidth": 0,
+            "borderTopRightRadius": 5,
+          },
+        ],
+      ]
+    }
+    onTabPress={[Function]}
+    tabBadgeContainerStyle={Object {}}
+    tabBadgeStyle={Object {}}
+    tabStyle={
+      Array [
+        Object {},
+        Object {},
+      ]
+    }
+    tabTextStyle={Object {}}
+    text="Three"
+    textNumberOfLines={1}
+  />
+</View>
+`;

src/__tests__/__snapshots__/TabOption.js.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TabOption /> should render TabOption 1`] = `
+<View
+  accessibilityLabel=""
+  accessible={true}
+  isTVSelectable={true}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "white",
+      "borderColor": "#0076FF",
+      "borderWidth": 1,
+      "flex": 1,
+      "justifyContent": "center",
+      "opacity": 1,
+      "paddingVertical": 5,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+      }
+    }
+  >
+    <Text
+      allowFontScaling={false}
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        Array [
+          Object {
+            "color": "#0076FF",
+          },
+          Object {},
+          Object {},
+        ]
+      }
+    >
+      Tab value
+    </Text>
+  </View>
+</View>
+`;