Add Jest tests and Codecov reports (#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/

.vscode/settings.json

@@ -1,15 +0,0 @@
-{
-  "typescript.check.tscVersion": false,
-  "window.zoomLevel": 0,
-  "javascript.validate.enable": false,
-  "editor.tabSize": 2,
-  "files.trimTrailingWhitespace": true,
-  "workbench.statusBar.visible": true,
-  "workbench.welcome.enabled": false,
-  "flow.useNPMPackagedFlow ": true,
-  "flow.pathToFlow": "./node_modules/flow-bin/cli.js",
-  "editor.formatOnSave": true,
-  "prettier.singleQuote": true,
-  "prettier.trailingComma": "all",
-  "prettier.semi": true,
-}

.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,9 +25,19 @@
   "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",
@@ -35,7 +45,11 @@
     "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>
+`;

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

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render <Avatar /> and compare with snapshot 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "marginRight": 8,
+      },
+      Object {},
+      undefined,
+    ]
+  }
+>
+  renderAvatar
+</View>
+`;

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

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render <Bubble /> and compare with snapshot 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "flex-start",
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#f0f0f0",
+          "borderRadius": 15,
+          "justifyContent": "flex-end",
+          "marginRight": 60,
+          "minHeight": 20,
+        },
+        undefined,
+        null,
+        null,
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits="text"
+      accessible={true}
+      hitSlop={undefined}
+      nativeID={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={undefined}
+      testID={undefined}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+              "justifyContent": "flex-end",
+            },
+            undefined,
+          ]
+        }
+      />
+    </View>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should compare Color with snapshot 1`] = `
+Object {
+  "alizarin": "#e74c3c",
+  "backgroundTransparent": "transparent",
+  "carrot": "#e67e22",
+  "defaultBlue": "#0084ff",
+  "defaultColor": "#b2b2b2",
+  "emerald": "#2ecc71",
+  "leftBubbleBackground": "#f0f0f0",
+  "midnightBlue": "#2c3e50",
+  "optionTintColor": "#007AFF",
+  "peterRiver": "#3498db",
+  "timeTextColor": "#aaa",
+  "turquoise": "#1abc9c",
+  "white": "#fff",
+  "wisteria": "#8e44ad",
+}
+`;

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

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render <Composer /> and compare with snapshot 1`] = `
+<TextInput
+  accessibilityLabel="Type a message..."
+  allowFontScaling={true}
+  autoFocus={false}
+  enablesReturnKeyAutomatically={true}
+  multiline={true}
+  onChange={[Function]}
+  onChangeText={[Function]}
+  onContentSizeChange={[Function]}
+  placeholder="Type a message..."
+  placeholderTextColor={undefined}
+  style={
+    Array [
+      Object {
+        "flex": 1,
+        "fontSize": 16,
+        "lineHeight": 16,
+        "marginBottom": 5,
+        "marginLeft": 10,
+        "marginTop": 6,
+      },
+      Object {},
+      Object {
+        "height": 33,
+      },
+    ]
+  }
+  underlineColorAndroid="transparent"
+  value=""
+/>
+`;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should compare Constant with snapshot 1`] = `
+Object {
+  "DATE_FORMAT": "ll",
+  "DEFAULT_PLACEHOLDER": "Type a message...",
+  "MAX_COMPOSER_HEIGHT": 100,
+  "MIN_COMPOSER_HEIGHT": 33,
+  "TIME_FORMAT": "LT",
+}
+`;

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

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render <Day /> and compare with snapshot 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "justifyContent": "center",
+        "marginBottom": 10,
+        "marginTop": 5,
+      },
+      Object {},
+    ]
+  }
+>
+  <View
+    style={Object {}}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "color": "#b2b2b2",
+            "fontSize": 12,
+            "fontWeight": "600",
+          },
+          Object {},
+        ]
+      }
+    >
+      INVALID DATE
+    </Text>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render <GiftedAvatar /> and compare with snapshot 1`] = `
+<View
+  accessibilityTraits="image"
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "borderRadius": 20,
+        "height": 40,
+        "justifyContent": "center",
+        "width": 40,
+      },
+      Object {
+        "backgroundColor": "transparent",
+      },
+      Object {},
+    ]
+  }
+/>
+`;

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

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render <GiftedChat/> and compare with snapshot 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+/>
+`;

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

@@ -0,0 +1,128 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render <InputToolbar /> and compare with snapshot 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#fff",
+        "borderTopColor": "#b2b2b2",
+        "borderTopWidth": 0.5,
+        "bottom": 0,
+        "width": 750,
+      },
+      Object {},
+      Object {
+        "position": "absolute",
+      },
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "flex-end",
+          "flexDirection": "row",
+        },
+        Object {},
+      ]
+    }
+  >
+    <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>
+    <TextInput
+      accessibilityLabel="Type a message..."
+      allowFontScaling={true}
+      autoFocus={false}
+      enablesReturnKeyAutomatically={true}
+      multiline={true}
+      onChange={[Function]}
+      onChangeText={[Function]}
+      onContentSizeChange={[Function]}
+      placeholder="Type a message..."
+      placeholderTextColor={undefined}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+            "fontSize": 16,
+            "lineHeight": 16,
+            "marginBottom": 5,
+            "marginLeft": 10,
+            "marginTop": 6,
+          },
+          Object {},
+          Object {
+            "height": 33,
+          },
+        ]
+      }
+      underlineColorAndroid="transparent"
+      value=""
+    />
+    <View />
+  </View>
+</View>
+`;

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

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render <LoadEarlier /> and compare with snapshot 1`] = `
+<View
+  accessibilityComponentType={undefined}
+  accessibilityLabel={undefined}
+  accessibilityTraits="button"
+  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 {
+      "alignItems": "center",
+      "marginBottom": 10,
+      "marginTop": 5,
+      "opacity": 1,
+    }
+  }
+  testID={undefined}
+  tvParallaxProperties={undefined}
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#b2b2b2",
+          "borderRadius": 15,
+          "height": 30,
+          "justifyContent": "center",
+          "paddingLeft": 10,
+          "paddingRight": 10,
+        },
+        Object {},
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "color": "#fff",
+            "fontSize": 12,
+          },
+          Object {},
+        ]
+      }
+    >
+      Load earlier messages
+    </Text>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render <Message /> and compare with snapshot 1`] = `
+<View>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "flex-end",
+          "flexDirection": "row",
+          "justifyContent": "flex-start",
+          "marginLeft": 8,
+          "marginRight": 0,
+        },
+        Object {
+          "marginBottom": 10,
+        },
+        false,
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#f0f0f0",
+              "borderRadius": 15,
+              "justifyContent": "flex-end",
+              "marginRight": 60,
+              "minHeight": 20,
+            },
+            undefined,
+            null,
+            null,
+          ]
+        }
+      >
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits="text"
+          accessible={true}
+          hitSlop={undefined}
+          nativeID={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={undefined}
+          testID={undefined}
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "flexDirection": "row",
+                  "justifyContent": "flex-end",
+                },
+                undefined,
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render <MessageContainer /> and compare with snapshot 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RCTScrollView
+    automaticallyAdjustContentInsets={false}
+    contentContainerStyle={Object {}}
+    dataSource={
+      ListViewDataSource {
+        "items": 0,
+      }
+    }
+    enableEmptySections={true}
+    initialListSize={20}
+    pageSize={20}
+    renderFooter={[Function]}
+    renderHeader={[Function]}
+    renderRow={[Function]}
+  >
+    <View />
+  </RCTScrollView>
+</View>
+`;

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

@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render <MessageImage /> and compare with snapshot 1`] = `
+<View
+  style={
+    Array [
+      Object {},
+      Object {},
+    ]
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={undefined}
+  >
+    <View
+      collapsable={undefined}
+      style={
+        Object {
+          "opacity": 1,
+        }
+      }
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hasTVPreferredFocus={undefined}
+        hitSlop={undefined}
+        isTVSelectable={true}
+        nativeID={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+        tvParallaxProperties={undefined}
+      >
+        <Image
+          source={
+            Object {
+              "uri": null,
+            }
+          }
+          style={
+            Array [
+              Object {
+                "borderRadius": 13,
+                "height": 100,
+                "margin": 3,
+                "resizeMode": "cover",
+                "width": 150,
+              },
+              Object {},
+            ]
+          }
+        />
+      </View>
+    </View>
+    <Modal
+      hardwareAccelerated={false}
+      onRequestClose={[Function]}
+      transparent={true}
+      visible={false}
+    >
+      <View
+        collapsable={undefined}
+        style={
+          Object {
+            "backgroundColor": "black",
+            "height": 1334,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "top": 0,
+            "width": 750,
+          }
+        }
+      />
+      <View
+        collapsable={undefined}
+        onMoveShouldSetResponder={[Function]}
+        onMoveShouldSetResponderCapture={[Function]}
+        onResponderEnd={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderReject={[Function]}
+        onResponderRelease={[Function]}
+        onResponderStart={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        onStartShouldSetResponderCapture={[Function]}
+        style={
+          Object {
+            "backgroundColor": "transparent",
+            "flex": 1,
+            "height": 0,
+            "justifyContent": "center",
+            "left": 0,
+            "position": "absolute",
+            "top": 0,
+            "width": 0,
+          }
+        }
+      >
+        <Image
+          source={
+            Object {
+              "uri": null,
+            }
+          }
+          style={
+            Object {
+              "flex": 1,
+              "resizeMode": "contain",
+            }
+          }
+        />
+      </View>
+      <View
+        collapsable={undefined}
+        style={
+          Object {
+            "backgroundColor": "transparent",
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "top": 0,
+            "width": 750,
+          }
+        }
+      >
+        <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 {
+              "opacity": 1,
+            }
+          }
+          testID={undefined}
+          tvParallaxProperties={undefined}
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "color": "white",
+                "fontSize": 35,
+                "lineHeight": 40,
+                "shadowColor": "black",
+                "shadowOffset": Object {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.8,
+                "shadowRadius": 1.5,
+                "textAlign": "center",
+                "width": 40,
+              }
+            }
+          >
+            ×
+          </Text>
+        </View>
+      </View>
+    </Modal>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render <MessageText /> and compare with snapshot 1`] = `
+<View
+  style={
+    Array [
+      Object {},
+      undefined,
+    ]
+  }
+>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    childrenProps={Object {}}
+    ellipsizeMode="tail"
+    parse={
+      Array [
+        Object {
+          "onPress": [Function],
+          "style": Object {
+            "color": "black",
+            "textDecorationLine": "underline",
+          },
+          "type": "url",
+        },
+        Object {
+          "onPress": [Function],
+          "style": Object {
+            "color": "black",
+            "textDecorationLine": "underline",
+          },
+          "type": "phone",
+        },
+        Object {
+          "onPress": [Function],
+          "style": Object {
+            "color": "black",
+            "textDecorationLine": "underline",
+          },
+          "type": "email",
+        },
+      ]
+    }
+    style={
+      Array [
+        Object {
+          "color": "black",
+          "fontSize": 16,
+          "lineHeight": 20,
+          "marginBottom": 5,
+          "marginLeft": 10,
+          "marginRight": 10,
+          "marginTop": 5,
+        },
+        undefined,
+        Object {},
+      ]
+    }
+  />
+</View>
+`;

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render <Send /> and compare with snapshot 1`] = `<View />`;

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

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render <SystemMessage /> and compare with snapshot 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flex": 1,
+        "justifyContent": "center",
+        "marginBottom": 10,
+        "marginTop": 5,
+      },
+      Object {},
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        undefined,
+        Object {},
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "color": "#b2b2b2",
+            "fontSize": 12,
+            "fontWeight": "300",
+          },
+          Object {},
+        ]
+      }
+    />
+  </View>
+</View>
+`;

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

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render <Time /> and compare with snapshot 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "marginBottom": 5,
+        "marginLeft": 10,
+        "marginRight": 10,
+      },
+      undefined,
+    ]
+  }
+>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+          "color": "#aaa",
+          "fontSize": 10,
+          "textAlign": "right",
+        },
+        undefined,
+      ]
+    }
+  >
+    Invalid date
+  </Text>
+</View>
+`;

tests/context.js

@@ -0,0 +1,32 @@
+/* eslint react/prop-types: 0,  padded-blocks: 0 */
+
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+import PropTypes from 'prop-types';
+
+class Context extends React.Component {
+  getChildContext() {
+    return {
+      actionSheet: () => {},
+      getLocale: () => 'en',
+    };
+  }
+  render() {
+    return this.props.children;
+  }
+}
+
+Context.propTypes = {
+  children: PropTypes.element,
+};
+
+Context.childContextTypes = {
+  actionSheet: PropTypes.func,
+  getLocale: PropTypes.func,
+  children: PropTypes.element,
+};
+
+export default function createComponentWithContext(children) {
+  return renderer.create(<Context>{children}</Context>);
+}

tests/setup.js

@@ -0,0 +1,3 @@
+// mocks
+
+jest.mock('@expo/react-native-action-sheet', () => 'ActionSheet');