Add tests using snapshots for components

__mocks__/react-i18next-mock.js

+/* global jest */
+import React from 'react';
+
+const reacti18next = jest.genMockFromModule('react-i18next');
+
+const translate = () => Component => props => <Component t={s => s} {...props} />;
+
+reacti18next.translate = translate;
+
+module.exports = reacti18next;

__tests__/ui/components/button/Button.spec.js

+import React from 'react';
+import { Platform } from 'react-native';
+import renderer from 'react-test-renderer';
+import Button from '../../../../app/ui/components/button/Button';
+
+describe('Button component', () => {
+  it('renders correctly', () => {
+    const tree = renderer
+      .create(<Button title="title" onPress={() => {}} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders disabled correctly', () => {
+    const tree = renderer
+      .create(<Button title="title" disabled onPress={() => {}} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders title correctly on Android', () => {
+    Platform.OS = 'android';
+    const tree = renderer
+      .create(<Button title="title" onPress={() => {}} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
\ No newline at end of file

__tests__/ui/components/button/__snapshots__/Button.spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button component renders correctly 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 [
+      undefined,
+      Object {
+        "borderRadius": 100,
+      },
+    ]
+  }
+  testID={undefined}
+  tvParallaxProperties={undefined}
+>
+  <View
+    style={
+      Array [
+        Object {
+          "borderRadius": 100,
+          "padding": 10,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+        },
+        Object {
+          "backgroundColor": "#E62272",
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "#FFFFFF",
+            "fontSize": 14,
+            "justifyContent": "center",
+            "textAlign": "center",
+          },
+          Object {},
+        ]
+      }
+    >
+      title
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Button component renders disabled correctly 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 [
+      undefined,
+      Object {
+        "borderRadius": 100,
+      },
+      Object {
+        "opacity": 0.8,
+      },
+    ]
+  }
+  testID={undefined}
+  tvParallaxProperties={undefined}
+>
+  <View
+    style={
+      Array [
+        Object {
+          "borderRadius": 100,
+          "padding": 10,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+        },
+        Object {
+          "backgroundColor": "#E62272",
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "#FFFFFF",
+            "fontSize": 14,
+            "justifyContent": "center",
+            "textAlign": "center",
+          },
+          Object {},
+        ]
+      }
+    >
+      title
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Button component renders title correctly on Android 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 [
+      undefined,
+      Object {
+        "borderRadius": 100,
+      },
+    ]
+  }
+  testID={undefined}
+  tvParallaxProperties={undefined}
+>
+  <View
+    style={
+      Array [
+        Object {
+          "borderRadius": 100,
+          "padding": 10,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+        },
+        Object {
+          "backgroundColor": "#E62272",
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "#FFFFFF",
+            "fontSize": 14,
+            "justifyContent": "center",
+            "textAlign": "center",
+          },
+          Object {},
+        ]
+      }
+    >
+      TITLE
+    </Text>
+  </View>
+</View>
+`;

__tests__/ui/components/dismissKeyboardView/DismissKeyboardView.spec.js

+import React from 'react';
+import { Text } from 'react-native';
+import renderer from 'react-test-renderer';
+import DismissKeyboardView from '../../../../app/ui/components/dismissKeyboardView/DismissKeyboardView';
+
+describe('DismissKeyboardView component', () => {
+  it('renders correctly', () => {
+    const tree = renderer
+      .create(<DismissKeyboardView><Text>Text</Text></DismissKeyboardView>)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
\ No newline at end of file

__tests__/ui/components/dismissKeyboardView/__snapshots__/DismissKeyboardView.spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DismissKeyboardView component renders correctly 1`] = `
+<View
+  accessibilityComponentType={undefined}
+  accessibilityLabel={undefined}
+  accessibilityTraits={undefined}
+  accessible={false}
+  hitSlop={undefined}
+  nativeID={undefined}
+  onLayout={undefined}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={Object {}}
+  testID={undefined}
+>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+  >
+    Text
+  </Text>
+</View>
+`;

__tests__/ui/components/errorScreen/ErrorScreen.spec.js

+import React from 'react';
+import renderer from 'react-test-renderer';
+import ErrorScreen from '../../../../app/ui/components/errorScreen/ErrorScreen';
+
+describe('ErrorScreen component', () => {
+  it('renders correctly', () => {
+    const tree = renderer
+      .create(<ErrorScreen message="Lorem ipsum" />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

__tests__/ui/components/errorScreen/__snapshots__/ErrorScreen.spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ErrorScreen component renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#FAFAFA",
+      "flex": 1,
+      "justifyContent": "center",
+    }
+  }
+>
+  <Image
+    source={
+      Object {
+        "testUri": "../../../app/assets/img/sad_cloud.png",
+      }
+    }
+    style={
+      Object {
+        "height": 200,
+        "marginBottom": 32,
+        "resizeMode": "contain",
+        "width": 200,
+      }
+    }
+  />
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Object {
+        "color": "#616161",
+        "fontFamily": "System",
+        "fontSize": 16,
+        "fontWeight": "500",
+        "textAlign": "center",
+      }
+    }
+  >
+    Lorem ipsum
+  </Text>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Object {
+        "color": "#616161",
+        "fontFamily": "System",
+        "fontSize": 16,
+        "fontWeight": "500",
+        "textAlign": "center",
+      }
+    }
+  >
+    Try again later.
+  </Text>
+</View>
+`;

__tests__/ui/components/loadingScreen/LoadingScreen.spec.js

+import React from 'react';
+import renderer from 'react-test-renderer';
+import LoadingScreen from '../../../../app/ui/components/loadingScreen/LoadingScreen';
+
+describe('LoadingScreen component', () => {
+  it('renders correctly', () => {
+    const tree = renderer
+      .create(<LoadingScreen />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
\ No newline at end of file

__tests__/ui/components/loadingScreen/__snapshots__/LoadingScreen.spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LoadingScreen component renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "flex": 1,
+      "justifyContent": "center",
+    }
+  }
+>
+  <ActivityIndicator
+    animating={true}
+    color="#E62272"
+    hidesWhenStopped={true}
+    size="large"
+  />
+</View>
+`;

__tests__/ui/components/memberView/MemberView.spec.js

+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store'
+import MemberView from '../../../../app/ui/components/memberView/MemberView';
+import reducer from '../../../../app/reducers/index';
+
+describe('MemberView component', () => {
+  const mockStore = configureStore(reducer);
+  const initialState = {
+    session: {
+      token: 'token123',
+    },
+  };
+  const store = mockStore(initialState);
+
+  const member = {
+    pk: 1,
+    name: 'Lorem ipsum',
+    photo: 'http://example.org/example.png',
+  };
+
+  it('renders correctly', () => {
+    const tree = renderer
+      .create(<MemberView store={store} member={member} size={20} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
\ No newline at end of file

__tests__/ui/components/memberView/SquareView.spec.js

+import React from 'react';
+import { View } from 'react-native';
+import renderer from 'react-test-renderer';
+import SquareView from '../../../../app/ui/components/memberView/SquareView';
+
+describe('SquareView component', () => {
+  it('renders correctly', () => {
+    const tree = renderer
+      .create(<SquareView size={20}><View /></SquareView>)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
\ No newline at end of file

__tests__/ui/components/memberView/__snapshots__/MemberView.spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MemberView component renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {},
+      Object {
+        "height": 20,
+        "width": 20,
+      },
+    ]
+  }
+>
+  <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={
+      Object {
+        "flex": 1,
+      }
+    }
+    testID={undefined}
+    tvParallaxProperties={undefined}
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Image
+        source={
+          Object {
+            "uri": "http://example.org/example.png",
+          }
+        }
+        style={
+          Array [
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            Object {
+              "height": undefined,
+              "width": undefined,
+            },
+            undefined,
+          ]
+        }
+      />
+      <BVLinearGradient
+        colors={
+          Array [
+            5570560,
+            4278190080,
+          ]
+        }
+        endPoint={undefined}
+        locations={null}
+        startPoint={undefined}
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0.6,
+            "position": "absolute",
+            "right": 0,
+            "top": "50%",
+          }
+        }
+      />
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "backgroundColor": "transparent",
+            "bottom": 4,
+            "color": "#FFFFFF",
+            "fontSize": 11,
+            "left": 6,
+            "position": "absolute",
+            "right": 6,
+          }
+        }
+      >
+        Lorem ipsum
+      </Text>
+    </View>
+  </View>
+</View>
+`;

__tests__/ui/components/memberView/__snapshots__/SquareView.spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SquareView component renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {},
+      Object {
+        "height": 20,
+        "width": 20,
+      },
+    ]
+  }
+>
+  <View />
+</View>
+`;

__tests__/ui/components/navigator/ReduxNavigator.spec.js

+import React from 'react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import renderer from 'react-test-renderer';
+import ReduxNavigator from '../../../../app/ui/components/navigator/ReduxNavigator';
+import reducer from '../../../../app/reducers';
+
+describe('ReduxNavigator component', () => {
+  const mockStore = configureStore(reducer);
+  const initialState = {
+    navigation: {
+      currentScene: 'home',
+      previousScenes: [],
+      drawerOpen: false,
+    },
+  };
+  const store = mockStore(initialState);
+
+  it('renders correctly', () => {
+    const tree = renderer
+      .create(<Provider store={store}><ReduxNavigator /></Provider>)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
\ No newline at end of file

__tests__/ui/components/navigator/Sidebar.spec.js

+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import Sidebar from '../../../../app/ui/components/navigator/Sidebar';
+import reducer from '../../../../app/reducers';
+
+describe('Sidebar component', () => {
+  const mockStore = configureStore(reducer);
+  const initialState = {
+    navigation: {
+      currentScene: 'home',
+    },
+    session: {
+      displayName: 'Lorem ipsum',
+      photo: 'photo',
+      token: 'token123',
+    },
+  };
+  const store = mockStore(initialState);
+
+  it('renders correctly', () => {
+    const tree = renderer
+      .create(<Sidebar store={store} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
\ No newline at end of file