Add some `Fake`s for easier interaction snapshot testing

Summary:
`Fake` components are simplified so snapshots are stable and reliable, and references are exported
so that interactions like `onRefresh` and `onScroll` can be called manually. Currently there is just
one global export for each class, but we may change this in the future if we need to manage multiple
`Fake`s of the same type in one render tree.

Right now these must be installed explicitly, but I might move them into `__mocks__` folders if it
seems reasonable to make them defaults.

Reviewed By: cpojer

Differential Revision: D4318207

fbshipit-source-id: 62802353a98b09ca1c80804ef7201ea63091f94a
This commit is contained in:
Spencer Ahrens 2016-12-20 15:44:54 -08:00 committed by Facebook Github Bot
parent ab89b7195d
commit 5537055bf8
5 changed files with 126 additions and 8 deletions

View File

@ -152,7 +152,7 @@ const RefreshControl = React.createClass({
return (
<NativeRefreshControl
{...this.props}
ref={ref => this._nativeRef = ref}
ref={ref => {this._nativeRef = ref;}}
onRefresh={this._onRefresh}
/>
);

View File

@ -0,0 +1,29 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @flow
*/
'use strict';
const React = require('React');
const requireNativeComponent = require('requireNativeComponent');
const RCTRefreshControl = requireNativeComponent('RCTRefreshControl');
class RefreshControlMock extends React.Component {
static latestRef: ?RefreshControlMock;
componentDidMount() {
RefreshControlMock.latestRef = this;
}
render() {
return <RCTRefreshControl />;
}
}
module.exports = RefreshControlMock;

View File

@ -0,0 +1,33 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @flow
*/
'use strict';
const React = require('React');
const View = require('View');
const requireNativeComponent = require('requireNativeComponent');
const RCTScrollView = requireNativeComponent('RCTScrollView');
class ScrollViewMock extends React.Component {
render() {
return (
<RCTScrollView>
{this.props.refreshControl}
<View>
{this.props.children}
</View>
</RCTScrollView>
);
}
}
module.exports = ScrollViewMock;

View File

@ -0,0 +1,60 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @flow
*/
'use strict';
const ListViewDataSource = require('ListViewDataSource');
const React = require('React');
const ScrollView = require('ScrollView');
const StaticRenderer = require('StaticRenderer');
const View = require('View');
class ListViewMock extends React.Component {
static latestRef: ?ListViewMock;
static defaultProps = {
renderScrollComponent: (props) => <ScrollView {...props} />,
}
componentDidMount() {
ListViewMock.latestRef = this;
}
render() {
const {dataSource, renderFooter, renderHeader} = this.props;
const rows = [renderHeader && renderHeader()];
const allRowIDs = dataSource.rowIdentities;
for (let sectionIdx = 0; sectionIdx < allRowIDs.length; sectionIdx++) {
const sectionID = dataSource.sectionIdentities[sectionIdx];
const rowIDs = allRowIDs[sectionIdx];
for (let rowIdx = 0; rowIdx < rowIDs.length; rowIdx++) {
const rowID = rowIDs[rowIdx];
rows.push(
<StaticRenderer
key={rowID}
shouldUpdate={true}
render={this.props.renderRow.bind(
null,
dataSource.getRowData(sectionIdx, rowIdx),
sectionID,
rowID
)}
/>
);
}
}
renderFooter && rows.push(renderFooter());
return (
<View>
{this.props.renderScrollComponent({children: rows})}
</View>
);
}
static DataSource = ListViewDataSource;
}
module.exports = ListViewMock;

View File

@ -33,17 +33,13 @@ jest
.mock('TextInput', () => mockComponent('TextInput'))
.mock('Modal', () => mockComponent('Modal'))
.mock('View', () => mockComponent('View'))
.mock('ScrollView', () => mockComponent('ScrollView'))
.mock('RefreshControl', () => require.requireMock('RefreshControlMock'))
.mock('ScrollView', () => require.requireMock('ScrollViewMock'))
.mock(
'ActivityIndicator',
() => mockComponent('ActivityIndicator'),
)
.mock('ListView', () => {
const RealListView = require.requireActual('ListView');
const ListView = mockComponent('ListView');
ListView.prototype.render = RealListView.prototype.render;
return ListView;
})
.mock('ListView', () => require.requireMock('ListViewMock'))
.mock('ListViewDataSource', () => {
const DataSource = require.requireActual('ListViewDataSource');
DataSource.prototype.toJSON = function() {