Add Jest tests and Codecov reports (FaridSafi#673)

* chore(test): add jest

* chore(coverage): add codecov to circleci

* chore(vscode): remove vscode from git

* chore(test): snapshot all component

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["react-native"]
+}

.npmignore

@@ -1,3 +1,5 @@
 example/
 TODO.md
 screenshots/
+.babelrc
+tests/

.watchmanconfig

@@ -1,7 +1,3 @@
 {
-  "ignore_dirs": [
-    ".git",
-    "node_modules",
-    "example"
-  ]
+    "ignore_dirs": [".git", "node_modules", "example"]
 }

circle.yml

@@ -17,9 +17,8 @@ dependencies:
 test:
   override:
     - yarn run lint
-    # TODO: - yarn run flow
-    # TODO: - yarn run test -- --coverage
-    # TODO: - codecov
+    - yarn run test:coverage
+    - codecov
 
 # TODO: deployment:
 #   release:

package.json

@@ -25,17 +25,31 @@
   "homepage": "https://github.com/FaridSafi/react-native-gifted-chat#readme",
   "scripts": {
     "lint": "eslint . --ext .js,.jsx",
-    "precommit": "yarn lint"
+    "precommit": "yarn lint",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
+  },
+  "jest": {
+    "preset": "react-native",
+    "setupFiles": ["./tests/setup.js"]
   },
   "devDependencies": {
+    "babel": "6.23.0",
+    "babel-jest": "22.0.3",
+    "babel-preset-react-native": "4.0.0",
     "eslint": "^4.9.0",
     "eslint-config-airbnb": "16.1.0",
     "eslint-config-cooperka": "0.2.9",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.4.0",
     "eslint-plugin-react-native": "3.2.0",
-    "husky": "0.14.3"
+    "husky": "0.14.3",
+    "jest": "22.0.3",
+    "react": "16.2.0",
+    "react-native": "0.51.0",
+    "react-test-renderer": "16.2.0"
   },
   "dependencies": {
     "@expo/react-native-action-sheet": "^1.0.1",
@@ -49,4 +63,4 @@
     "shallowequal": "1.0.2",
     "uuid": "3.1.0"
   }
-}
+}

src/__tests__/Actions.test.js

@@ -0,0 +1,11 @@
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { Actions } from '../GiftedChat';
+
+it('should render <Actions /> and compare with snapshot', () => {
+  const tree = renderer.create(<Actions />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

src/__tests__/Avatar.test.js

@@ -0,0 +1,11 @@
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { Avatar } from '../GiftedChat';
+
+it('should render <Avatar /> and compare with snapshot', () => {
+  const tree = renderer.create(<Avatar renderAvatar={() => 'renderAvatar'} />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

src/__tests__/Bubble.test.js

@@ -0,0 +1,13 @@
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { Bubble } from '../GiftedChat';
+
+it('should render <Bubble /> and compare with snapshot', () => {
+  const tree = renderer
+    .create(<Bubble user={{ _id: 1 }} currentMessage={{ user: { _id: 1 } }} />)
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

src/__tests__/Color.test.js

@@ -0,0 +1,5 @@
+import Color from '../Color';
+
+it('should compare Color with snapshot', () => {
+  expect(Color).toMatchSnapshot();
+});

src/__tests__/Composer.test.js

@@ -0,0 +1,11 @@
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { Composer } from '../GiftedChat';
+
+it('should render <Composer /> and compare with snapshot', () => {
+  const tree = renderer.create(<Composer />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

src/__tests__/Constant.test.js

@@ -0,0 +1,5 @@
+import * as Constant from '../Constant';
+
+it('should compare Constant with snapshot', () => {
+  expect(Constant).toMatchSnapshot();
+});

src/__tests__/Day.test.js

@@ -0,0 +1,12 @@
+import 'react-native';
+import React from 'react';
+import createComponentWithContext from '../../tests/context';
+
+import { Day } from '../GiftedChat';
+
+it('should render <Day /> and compare with snapshot', () => {
+  const component = createComponentWithContext(<Day />);
+  const tree = component.toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

src/__tests__/GiftedAvatar.test.js

@@ -0,0 +1,11 @@
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { GiftedAvatar } from '../GiftedChat';
+
+it('should render <GiftedAvatar /> and compare with snapshot', () => {
+  const tree = renderer.create(<GiftedAvatar />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

src/__tests__/GiftedChat.test.js

@@ -0,0 +1,33 @@
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { GiftedChat } from '../GiftedChat';
+
+const messages = [
+  {
+    _id: 1,
+    text: 'Hello developer',
+    createdAt: new Date(),
+    user: {
+      _id: 2,
+      name: 'React Native',
+    },
+  },
+];
+
+it('should render <GiftedChat/> and compare with snapshot', () => {
+  const tree = renderer
+    .create(
+      <GiftedChat
+        messages={messages}
+        onSend={() => {}}
+        user={{
+          _id: 1,
+        }}
+      />,
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

src/__tests__/InputToolbar.test.js

@@ -0,0 +1,11 @@
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { InputToolbar } from '../GiftedChat';
+
+it('should render <InputToolbar /> and compare with snapshot', () => {
+  const tree = renderer.create(<InputToolbar />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

src/__tests__/LoadEarlier.test.js

@@ -0,0 +1,11 @@
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { LoadEarlier } from '../GiftedChat';
+
+it('should render <LoadEarlier /> and compare with snapshot', () => {
+  const tree = renderer.create(<LoadEarlier />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

src/__tests__/Message.test.js

@@ -0,0 +1,13 @@
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { Message } from '../GiftedChat';
+
+it('should render <Message /> and compare with snapshot', () => {
+  const tree = renderer
+    .create(<Message user={{ _id: 1 }} currentMessage={{ user: { _id: 1 } }} />)
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

src/__tests__/MessageContainer.test.js

@@ -0,0 +1,11 @@
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { MessageContainer } from '../GiftedChat';
+
+it('should render <MessageContainer /> and compare with snapshot', () => {
+  const tree = renderer.create(<MessageContainer />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

src/__tests__/MessageImage.test.js

@@ -0,0 +1,11 @@
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { MessageImage } from '../GiftedChat';
+
+it('should render <MessageImage /> and compare with snapshot', () => {
+  const tree = renderer.create(<MessageImage />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

src/__tests__/MessageText.test.js

@@ -0,0 +1,11 @@
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { MessageText } from '../GiftedChat';
+
+it('should render <MessageText /> and compare with snapshot', () => {
+  const tree = renderer.create(<MessageText />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

src/__tests__/Send.test.js

@@ -0,0 +1,11 @@
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { Send } from '../GiftedChat';
+
+it('should render <Send /> and compare with snapshot', () => {
+  const tree = renderer.create(<Send />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

src/__tests__/SystemMessage.test.js

@@ -0,0 +1,11 @@
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { SystemMessage } from '../GiftedChat';
+
+it('should render <SystemMessage /> and compare with snapshot', () => {
+  const tree = renderer.create(<SystemMessage />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

src/__tests__/Time.test.js

@@ -0,0 +1,12 @@
+import 'react-native';
+import React from 'react';
+import createComponentWithContext from '../../tests/context';
+
+import { Time } from '../GiftedChat';
+
+it('should render <Time /> and compare with snapshot', () => {
+  const component = createComponentWithContext(<Time />);
+  const tree = component.toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

src/__tests__/__snapshots__/Actions.test.js.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render <Actions /> and compare with snapshot 1`] = `
+<View
+  accessibilityComponentType={undefined}
+  accessibilityLabel={undefined}
+  accessibilityTraits={undefined}
+  accessible={true}
+  collapsable={undefined}
+  hasTVPreferredFocus={undefined}
+  hitSlop={undefined}
+  isTVSelectable={true}
+  nativeID={undefined}
+  onLayout={undefined}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "height": 26,
+      "marginBottom": 10,
+      "marginLeft": 10,
+      "opacity": 1,
+      "width": 26,
+    }
+  }
+  testID={undefined}
+  tvParallaxProperties={undefined}
+>
+  <View
+    style={
+      Array [
+        Object {
+          "borderColor": "#b2b2b2",
+          "borderRadius": 13,
+          "borderWidth": 2,
+          "flex": 1,
+        },
+        Object {},
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "color": "#b2b2b2",
+            "fontSize": 16,
+            "fontWeight": "bold",
+            "textAlign": "center",
+          },
+          Object {},
+        ]
+      }
+    >
+      +
+    </Text>
+  </View>
+</View>
+`;