kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-01-12 22:50:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

WIP: add snapshots for mocked and unmocked components (#24554)

Browse Source 
Summary:
Per a conversation with TheSavior, in #24538, this adds snapshot tests for all components whose mocks will be addressed in that PR. Shallow and deep snapshots are included.

[General] [Added] - Snapshots
Pull Request resolved: https://github.com/facebook/react-native/pull/24554

Differential Revision: D15062197

Pulled By: cpojer

fbshipit-source-id: 70ddbaa5e6d1d2c0fd1130ab04c458d9c49d0ee8
This commit is contained in:
Brandon Carroll
2019-04-24 06:47:16 -07:00
committed by Facebook Github Bot
parent ec90ad127f
commit de12b98cd5
12 changed files with 528 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Libraries/Components/ActivityIndicator/__tests__/ActivityIndicator-test.js
View File

@@ -15,7 +15,7 @@ const React = require('React');
const ActivityIndicator = require('ActivityIndicator');
const render = require('../../../../jest/renderer');
describe('ActivityIndicator', () => {
describe('<ActivityIndicator />', () => {
it('should set displayName to prevent <Component /> regressions', () => {
expect(ActivityIndicator.displayName).toBe('ActivityIndicator');
});

8
Libraries/Components/ActivityIndicator/__tests__/__snapshots__/ActivityIndicator-test.js.snap
View File

@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ActivityIndicator should render as <ActivityIndicator> when mocked 1`] = `
exports[`<ActivityIndicator /> should render as <ActivityIndicator> when mocked 1`] = `
<ActivityIndicator
animating={true}
color="#0000ff"
@@ -9,7 +9,7 @@ exports[`ActivityIndicator should render as <ActivityIndicator> when mocked 1`]
/>
`;
exports[`ActivityIndicator should render as <View> when not mocked 1`] = `
exports[`<ActivityIndicator /> should render as <View> when not mocked 1`] = `
<View
style={
Object {
@@ -35,7 +35,7 @@ exports[`ActivityIndicator should render as <View> when not mocked 1`] = `
</View>
`;
exports[`ActivityIndicator should shallow render as <ActivityIndicator> when mocked 1`] = `
exports[`<ActivityIndicator /> should shallow render as <ActivityIndicator> when mocked 1`] = `
<ActivityIndicator
animating={true}
color="#0000ff"
@@ -44,7 +44,7 @@ exports[`ActivityIndicator should shallow render as <ActivityIndicator> when moc
/>
`;
exports[`ActivityIndicator should shallow render as <ForwardRef(ActivityIndicator)> when not mocked 1`] = `
exports[`<ActivityIndicator /> should shallow render as <ForwardRef(ActivityIndicator)> when not mocked 1`] = `
<ForwardRef(ActivityIndicator)
animating={true}
color="#0000ff"

66
Libraries/Components/DatePicker/__tests__/DatePickerIOS-test.js Normal file
View File

@@ -0,0 +1,66 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @emails oncall+react_native
* @flow
*/
'use strict';
const React = require('React');
const DatePickerIOS = require('DatePickerIOS');
const render = require('../../../../jest/renderer');
describe('DatePickerIOS', () => {
it('should render as <View> when mocked', () => {
const instance = render.create(
<DatePickerIOS
date={new Date(1555883690956)}
mode="date"
onDateChange={jest.fn()}
/>,
);
expect(instance).toMatchSnapshot();
});
it('should shallow render as <DatePickerIOS> when mocked', () => {
const output = render.shallow(
<DatePickerIOS
date={new Date(1555883690956)}
mode="date"
onDateChange={jest.fn()}
/>,
);
expect(output).toMatchSnapshot();
});
it('should shallow render as <DatePickerIOS> when not mocked', () => {
jest.dontMock('DatePickerIOS');
const output = render.shallow(
<DatePickerIOS
date={new Date(1555883690956)}
mode="date"
onDateChange={jest.fn()}
/>,
);
expect(output).toMatchSnapshot();
});
it('should render as <View> when not mocked', () => {
jest.dontMock('DatePickerIOS');
const instance = render.create(
<DatePickerIOS
date={new Date(1555883690956)}
mode="date"
onDateChange={jest.fn()}
/>,
);
expect(instance).toMatchSnapshot();
});
});

51
Libraries/Components/DatePicker/__tests__/__snapshots__/DatePickerIOS-test.js.snap Normal file
View File

@@ -0,0 +1,51 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DatePickerIOS should render as <View> when mocked 1`] = `
<View>
<RCTDatePicker
date={1555883690956}
mode="date"
onChange={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"height": 216,
}
}
/>
</View>
`;
exports[`DatePickerIOS should render as <View> when not mocked 1`] = `
<View>
<RCTDatePicker
date={1555883690956}
mode="date"
onChange={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"height": 216,
}
}
/>
</View>
`;
exports[`DatePickerIOS should shallow render as <DatePickerIOS> when mocked 1`] = `
<DatePickerIOS
date={2019-04-21T21:54:50.956Z}
mode="date"
onDateChange={[MockFunction]}
/>
`;
exports[`DatePickerIOS should shallow render as <DatePickerIOS> when not mocked 1`] = `
<DatePickerIOS
date={2019-04-21T21:54:50.956Z}
mode="date"
onDateChange={[MockFunction]}
/>
`;

1
Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js
View File

@@ -21,7 +21,6 @@ const nullthrows = require('nullthrows');
const DrawerConsts = UIManager.getViewManagerConfig('AndroidDrawerLayout')
.Constants;
const dismissKeyboard = require('dismissKeyboard');
const AndroidDrawerLayoutNativeComponent = require('AndroidDrawerLayoutNativeComponent');

69
Libraries/Components/DrawerAndroid/__tests__/DrawerAndroid-test.js Normal file
View File

@@ -0,0 +1,69 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @emails oncall+react_native
* @flow
*/
'use strict';
const React = require('React');
// $FlowFixMe
const DrawerLayoutAndroid = require('../DrawerLayoutAndroid.android');
const View = require('View');
const render = require('../../../../jest/renderer');
describe('<DrawerLayoutAndroid />', () => {
it('should render as <DrawerLayoutAndroid> when mocked', () => {
const instance = render.create(
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => <View />}
/>,
);
expect(instance).toMatchSnapshot();
});
it('should shallow render as <DrawerLayoutAndroid> when mocked', () => {
const output = render.shallow(
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => <View />}
/>,
);
expect(output).toMatchSnapshot();
});
it('should shallow render as <DrawerLayoutAndroid> when not mocked', () => {
jest.dontMock('DrawerLayoutAndroid');
const output = render.shallow(
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => <View />}
/>,
);
expect(output).toMatchSnapshot();
});
it('should render as <DrawerLayoutAndroid> when not mocked', () => {
jest.dontMock('DrawerLayoutAndroid');
const instance = render.create(
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => <View />}
/>,
);
expect(instance).toMatchSnapshot();
});
});

125
Libraries/Components/DrawerAndroid/__tests__/__snapshots__/DrawerAndroid-test.js.snap Normal file
View File

@@ -0,0 +1,125 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<DrawerLayoutAndroid /> should render as <DrawerLayoutAndroid> when mocked 1`] = `
<AndroidDrawerLayout
drawerBackgroundColor="white"
drawerPosition={10}
drawerWidth={300}
onDrawerClose={[Function]}
onDrawerOpen={[Function]}
onDrawerSlide={[Function]}
onDrawerStateChanged={[Function]}
renderNavigationView={[Function]}
style={
Array [
Object {
"elevation": 16,
"flex": 1,
},
undefined,
]
}
>
<View
collapsable={false}
style={
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
/>
<View
collapsable={false}
style={
Array [
Object {
"bottom": 0,
"position": "absolute",
"top": 0,
},
Object {
"backgroundColor": "white",
"width": 300,
},
]
}
>
<View />
</View>
</AndroidDrawerLayout>
`;
exports[`<DrawerLayoutAndroid /> should render as <DrawerLayoutAndroid> when not mocked 1`] = `
<AndroidDrawerLayout
drawerBackgroundColor="white"
drawerPosition={10}
drawerWidth={300}
onDrawerClose={[Function]}
onDrawerOpen={[Function]}
onDrawerSlide={[Function]}
onDrawerStateChanged={[Function]}
renderNavigationView={[Function]}
style={
Array [
Object {
"elevation": 16,
"flex": 1,
},
undefined,
]
}
>
<View
collapsable={false}
style={
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
/>
<View
collapsable={false}
style={
Array [
Object {
"bottom": 0,
"position": "absolute",
"top": 0,
},
Object {
"backgroundColor": "white",
"width": 300,
},
]
}
>
<View />
</View>
</AndroidDrawerLayout>
`;
exports[`<DrawerLayoutAndroid /> should shallow render as <DrawerLayoutAndroid> when mocked 1`] = `
<DrawerLayoutAndroid
drawerBackgroundColor="white"
drawerPosition={10}
drawerWidth={300}
renderNavigationView={[Function]}
/>
`;
exports[`<DrawerLayoutAndroid /> should shallow render as <DrawerLayoutAndroid> when not mocked 1`] = `
<DrawerLayoutAndroid
drawerBackgroundColor="white"
drawerPosition={10}
drawerWidth={300}
renderNavigationView={[Function]}
/>
`;

59
Libraries/Components/TextInput/__tests__/InputAccessoryView-test.js Normal file
View File

@@ -0,0 +1,59 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @emails oncall+react_native
* @flow
*/
'use strict';
const React = require('React');
const View = require('View');
const InputAccessoryView = require('InputAccessoryView');
const render = require('../../../../jest/renderer');
describe('<InputAccessoryView />', () => {
it('should render as <RCTInputAccessoryView> when mocked', () => {
const instance = render.create(
<InputAccessoryView nativeID="1">
<View />
</InputAccessoryView>,
);
expect(instance).toMatchSnapshot();
});
it('should shallow render as <InputAccessoryView> when mocked', () => {
const output = render.shallow(
<InputAccessoryView nativeID="1">
<View />
</InputAccessoryView>,
);
expect(output).toMatchSnapshot();
});
it('should shallow render as <InputAccessoryView> when not mocked', () => {
jest.dontMock('InputAccessoryView');
const output = render.shallow(
<InputAccessoryView nativeID="1">
<View />
</InputAccessoryView>,
);
expect(output).toMatchSnapshot();
});
it('should render as <RCTInputAccessoryView> when not mocked', () => {
jest.dontMock('InputAccessoryView');
const instance = render.create(
<InputAccessoryView nativeID="1">
<View />
</InputAccessoryView>,
);
expect(instance).toMatchSnapshot();
});
});

49
Libraries/Components/TextInput/__tests__/__snapshots__/InputAccessoryView-test.js.snap Normal file
View File

@@ -0,0 +1,49 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<InputAccessoryView /> should render as <RCTInputAccessoryView> when mocked 1`] = `
<RCTInputAccessoryView
nativeID="1"
style={
Array [
undefined,
Object {
"position": "absolute",
},
]
}
>
<View />
</RCTInputAccessoryView>
`;
exports[`<InputAccessoryView /> should render as <RCTInputAccessoryView> when not mocked 1`] = `
<RCTInputAccessoryView
nativeID="1"
style={
Array [
undefined,
Object {
"position": "absolute",
},
]
}
>
<View />
</RCTInputAccessoryView>
`;
exports[`<InputAccessoryView /> should shallow render as <InputAccessoryView> when mocked 1`] = `
<InputAccessoryView
nativeID="1"
>
<View />
</InputAccessoryView>
`;
exports[`<InputAccessoryView /> should shallow render as <InputAccessoryView> when not mocked 1`] = `
<InputAccessoryView
nativeID="1"
>
<View />
</InputAccessoryView>
`;

42
Libraries/Image/__tests__/Image-test.js Normal file
View File

@@ -0,0 +1,42 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @emails oncall+react_native
* @flow
*/
'use strict';
const React = require('React');
const Image = require('Image');
const render = require('../../../jest/renderer');
describe('<Image />', () => {
it('should render as <Image> when mocked', () => {
const instance = render.create(<Image source={{uri: 'foo-bar.jpg'}} />);
expect(instance).toMatchSnapshot();
});
it('should shallow render as <Image> when mocked', () => {
const output = render.shallow(<Image source={{uri: 'foo-bar.jpg'}} />);
expect(output).toMatchSnapshot();
});
it('should shallow render as <ForwardRef(Image)> when not mocked', () => {
jest.dontMock('Image');
const output = render.shallow(<Image source={{uri: 'foo-bar.jpg'}} />);
expect(output).toMatchSnapshot();
});
it('should render as <RCTImageView> when not mocked', () => {
jest.dontMock('Image');
const instance = render.create(<Image source={{uri: 'foo-bar.jpg'}} />);
expect(instance).toMatchSnapshot();
});
});

51
Libraries/Image/__tests__/__snapshots__/Image-test.js.snap Normal file
View File

@@ -0,0 +1,51 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Image /> should render as <Image> when mocked 1`] = `
<Image
source={
Object {
"uri": "foo-bar.jpg",
}
}
/>
`;
exports[`<Image /> should render as <RCTImageView> when not mocked 1`] = `
<RCTImageView
resizeMode="cover"
source={
Array [
Object {
"uri": "foo-bar.jpg",
},
]
}
style={
Object {
"height": undefined,
"overflow": "hidden",
"width": undefined,
}
}
/>
`;
exports[`<Image /> should shallow render as <ForwardRef(Image)> when not mocked 1`] = `
<ForwardRef(Image)
source={
Object {
"uri": "foo-bar.jpg",
}
}
/>
`;
exports[`<Image /> should shallow render as <Image> when mocked 1`] = `
<Image
source={
Object {
"uri": "foo-bar.jpg",
}
}
/>
`;

12
jest/setup.js
View File

@@ -254,7 +254,17 @@ const mockNativeModules = {
createView: jest.fn(),
dispatchViewManagerCommand: jest.fn(),
focus: jest.fn(),
getViewManagerConfig: jest.fn(),
getViewManagerConfig: jest.fn(name => {
if (name === 'AndroidDrawerLayout') {
return {
Constants: {
DrawerPosition: {
Left: 10,
},
},
};
}
}),
setChildren: jest.fn(),
manageChildren: jest.fn(),
updateView: jest.fn(),