Add tests using snapshots for components

parent 3cd439ae
/* 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;
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
// 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>
`;
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
// 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>
`;
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();
});
});
// 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>
`;
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
// 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>
`;
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
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
// 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>
`;
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SquareView component renders correctly 1`] = `
<View
style={
Array [
Object {},
Object {
"height": 20,
"width": 20,
},
]
}
>
<View />
</View>
`;
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
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
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ReduxNavigator component renders correctly 1`] = `
<View