Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

codemodded tests from createClass to ES2015 classes

Browse Source 
- reverted more files under classic
This commit is contained in:
Keyan Zhang
2016-07-23 15:16:12 -07:00
parent bf26e70374
commit 4d8a5bcd5c
43 changed files with 2065 additions and 1901 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/addons/__tests__/renderSubtreeIntoContainer-test.js
+70 -72
View File
@@ -21,37 +21,37 @@ describe('renderSubtreeIntoContainer', function() {
it('should pass context when rendering subtree elsewhere', function() {
var portal = document.createElement('div');
var Component = React.createClass({
contextTypes: {
class Component extends React.Component {
static contextTypes = {
foo: React.PropTypes.string.isRequired,
},
};
render: function() {
render() {
return <div>{this.context.foo}</div>;
},
});
}
}
var Parent = React.createClass({
childContextTypes: {
class Parent extends React.Component {
static childContextTypes = {
foo: React.PropTypes.string.isRequired,
},
};
getChildContext: function() {
getChildContext() {
return {
foo: 'bar',
};
},
}
render: function() {
render() {
return null;
},
}
componentDidMount: function() {
componentDidMount() {
expect(function() {
renderSubtreeIntoContainer(this, <Component />, portal);
}.bind(this)).not.toThrow();
},
});
}
}
ReactTestUtils.renderIntoDocument(<Parent />);
expect(portal.firstChild.innerHTML).toBe('bar');
@@ -60,37 +60,37 @@ describe('renderSubtreeIntoContainer', function() {
it('should throw if parentComponent is invalid', function() {
var portal = document.createElement('div');
var Component = React.createClass({
contextTypes: {
class Component extends React.Component {
static contextTypes = {
foo: React.PropTypes.string.isRequired,
},
};
render: function() {
render() {
return <div>{this.context.foo}</div>;
},
});
}
}
var Parent = React.createClass({
childContextTypes: {
class Parent extends React.Component {
static childContextTypes = {
foo: React.PropTypes.string.isRequired,
},
};
getChildContext: function() {
getChildContext() {
return {
foo: 'bar',
};
},
}
render: function() {
render() {
return null;
},
}
componentDidMount: function() {
componentDidMount() {
expect(function() {
renderSubtreeIntoContainer(<Parent />, <Component />, portal);
}).toThrowError('parentComponentmust be a valid React Component');
},
});
}
}
});
it('should update context if it changes due to setState', function() {
@@ -98,48 +98,46 @@ describe('renderSubtreeIntoContainer', function() {
document.body.appendChild(container);
var portal = document.createElement('div');
var Component = React.createClass({
contextTypes: {
class Component extends React.Component {
static contextTypes = {
foo: React.PropTypes.string.isRequired,
getFoo: React.PropTypes.func.isRequired,
},
};
render: function() {
render() {
return <div>{this.context.foo + '-' + this.context.getFoo()}</div>;
},
});
}
}
var Parent = React.createClass({
childContextTypes: {
class Parent extends React.Component {
static childContextTypes = {
foo: React.PropTypes.string.isRequired,
getFoo: React.PropTypes.func.isRequired,
},
};
getChildContext: function() {
state = {
bar: 'initial',
};
getChildContext() {
return {
foo: this.state.bar,
getFoo: () => this.state.bar,
};
},
}
getInitialState: function() {
return {
bar: 'initial',
};
},
render: function() {
render() {
return null;
},
}
componentDidMount: function() {
componentDidMount() {
renderSubtreeIntoContainer(this, <Component />, portal);
},
}
componentDidUpdate() {
renderSubtreeIntoContainer(this, <Component />, portal);
},
});
}
}
var instance = ReactDOM.render(<Parent />, container);
expect(portal.firstChild.innerHTML).toBe('initial-initial');
@@ -152,42 +150,42 @@ describe('renderSubtreeIntoContainer', function() {
document.body.appendChild(container);
var portal = document.createElement('div');
var Component = React.createClass({
contextTypes: {
class Component extends React.Component {
static contextTypes = {
foo: React.PropTypes.string.isRequired,
getFoo: React.PropTypes.func.isRequired,
},
};
render: function() {
render() {
return <div>{this.context.foo + '-' + this.context.getFoo()}</div>;
},
});
}
}
var Parent = React.createClass({
childContextTypes: {
class Parent extends React.Component {
static childContextTypes = {
foo: React.PropTypes.string.isRequired,
getFoo: React.PropTypes.func.isRequired,
},
};
getChildContext: function() {
getChildContext() {
return {
foo: this.props.bar,
getFoo: () => this.props.bar,
};
},
}
render: function() {
render() {
return null;
},
}
componentDidMount: function() {
componentDidMount() {
renderSubtreeIntoContainer(this, <Component />, portal);
},
}
componentDidUpdate() {
renderSubtreeIntoContainer(this, <Component />, portal);
},
});
}
}
ReactDOM.render(<Parent bar="initial" />, container);
expect(portal.firstChild.innerHTML).toBe('initial-initial');
src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js
+12 -14
View File
@@ -271,8 +271,8 @@ describe('ReactCSSTransitionGroup', function() {
});
it('should clear transition timeouts when unmounted', function() {
var Component = React.createClass({
render: function() {
class Component extends React.Component {
render() {
return (
<ReactCSSTransitionGroup
transitionName="yolo"
@@ -280,8 +280,8 @@ describe('ReactCSSTransitionGroup', function() {
{this.props.children}
</ReactCSSTransitionGroup>
);
},
});
}
}
ReactDOM.render(<Component/>, container);
ReactDOM.render(<Component><span key="yolo" id="yolo"/></Component>, container);
@@ -293,23 +293,21 @@ describe('ReactCSSTransitionGroup', function() {
});
it('should handle unmounted elements properly', function() {
var Child = React.createClass({
class Child extends React.Component {
render() {
if (!this.props.show) {
return null;
}
return <div />;
},
});
}
}
var Component = React.createClass({
getInitialState() {
return { showChild: true };
},
class Component extends React.Component {
state = { showChild: true };
componentDidMount() {
this.setState({ showChild: false });
},
}
render() {
return (
@@ -321,8 +319,8 @@ describe('ReactCSSTransitionGroup', function() {
<Child show={this.state.showChild} />
</ReactCSSTransitionGroup>
);
},
});
}
}
ReactDOM.render(<Component/>, container);
src/addons/transitions/__tests__/ReactTransitionGroup-test.js
+134 -112
View File
@@ -36,51 +36,58 @@ describe('ReactTransitionGroup', function() {
it('should handle willEnter correctly', function() {
var log = [];
var Child = React.createClass({
componentDidMount: function() {
class Child extends React.Component {
componentDidMount() {
log.push('didMount');
},
componentWillAppear: function(cb) {
}
componentWillAppear = (cb) => {
log.push('willAppear');
cb();
},
componentDidAppear: function() {
};
componentDidAppear = () => {
log.push('didAppear');
},
componentWillEnter: function(cb) {
};
componentWillEnter = (cb) => {
log.push('willEnter');
cb();
},
componentDidEnter: function() {
};
componentDidEnter = () => {
log.push('didEnter');
},
componentWillLeave: function(cb) {
};
componentWillLeave = (cb) => {
log.push('willLeave');
cb();
},
componentDidLeave: function() {
log.push('didLeave');
},
componentWillUnmount: function() {
log.push('willUnmount');
},
render: function() {
return <span />;
},
});
};
var Component = React.createClass({
getInitialState: function() {
return {count: 1};
},
render: function() {
componentDidLeave = () => {
log.push('didLeave');
};
componentWillUnmount() {
log.push('willUnmount');
}
render() {
return <span />;
}
}
class Component extends React.Component {
state = {count: 1};
render() {
var children = [];
for (var i = 0; i < this.state.count; i++) {
children.push(<Child key={i} />);
}
return <ReactTransitionGroup>{children}</ReactTransitionGroup>;
},
});
}
}
var instance = ReactDOM.render(<Component />, container);
expect(log).toEqual(['didMount', 'willAppear', 'didAppear']);
@@ -100,44 +107,49 @@ describe('ReactTransitionGroup', function() {
var log = [];
var willEnterCb;
var Child = React.createClass({
componentDidMount: function() {
class Child extends React.Component {
componentDidMount() {
log.push('didMount');
},
componentWillEnter: function(cb) {
}
componentWillEnter = (cb) => {
log.push('willEnter');
willEnterCb = cb;
},
componentDidEnter: function() {
};
componentDidEnter = () => {
log.push('didEnter');
},
componentWillLeave: function(cb) {
};
componentWillLeave = (cb) => {
log.push('willLeave');
cb();
},
componentDidLeave: function() {
log.push('didLeave');
},
componentWillUnmount: function() {
log.push('willUnmount');
},
render: function() {
return <span />;
},
});
};
var Component = React.createClass({
getInitialState: function() {
return {count: 1};
},
render: function() {
componentDidLeave = () => {
log.push('didLeave');
};
componentWillUnmount() {
log.push('willUnmount');
}
render() {
return <span />;
}
}
class Component extends React.Component {
state = {count: 1};
render() {
var children = [];
for (var i = 0; i < this.state.count; i++) {
children.push(<Child key={i} />);
}
return <ReactTransitionGroup>{children}</ReactTransitionGroup>;
},
});
}
}
var instance = ReactDOM.render(<Component />, container);
expect(log).toEqual(['didMount']);
@@ -160,44 +172,49 @@ describe('ReactTransitionGroup', function() {
var log = [];
var willEnterCb;
var Child = React.createClass({
componentDidMount: function() {
class Child extends React.Component {
componentDidMount() {
log.push('didMount');
},
componentWillEnter: function(cb) {
}
componentWillEnter = (cb) => {
log.push('willEnter');
willEnterCb = cb;
},
componentDidEnter: function() {
};
componentDidEnter = () => {
log.push('didEnter');
},
componentWillLeave: function(cb) {
};
componentWillLeave = (cb) => {
log.push('willLeave');
cb();
},
componentDidLeave: function() {
log.push('didLeave');
},
componentWillUnmount: function() {
log.push('willUnmount');
},
render: function() {
return <span />;
},
});
};
var Component = React.createClass({
getInitialState: function() {
return {count: 1};
},
render: function() {
componentDidLeave = () => {
log.push('didLeave');
};
componentWillUnmount() {
log.push('willUnmount');
}
render() {
return <span />;
}
}
class Component extends React.Component {
state = {count: 1};
render() {
var children = [];
for (var i = 0; i < this.state.count; i++) {
children.push(<Child key={i} />);
}
return <ReactTransitionGroup>{children}</ReactTransitionGroup>;
},
});
}
}
var instance = ReactDOM.render(<Component />, container);
expect(log).toEqual(['didMount']);
@@ -217,44 +234,49 @@ describe('ReactTransitionGroup', function() {
it('should handle entering/leaving several elements at once', function() {
var log = [];
var Child = React.createClass({
componentDidMount: function() {
class Child extends React.Component {
componentDidMount() {
log.push('didMount' + this.props.id);
},
componentWillEnter: function(cb) {
}
componentWillEnter = (cb) => {
log.push('willEnter' + this.props.id);
cb();
},
componentDidEnter: function() {
};
componentDidEnter = () => {
log.push('didEnter' + this.props.id);
},
componentWillLeave: function(cb) {
};
componentWillLeave = (cb) => {
log.push('willLeave' + this.props.id);
cb();
},
componentDidLeave: function() {
log.push('didLeave' + this.props.id);
},
componentWillUnmount: function() {
log.push('willUnmount' + this.props.id);
},
render: function() {
return <span />;
},
});
};
var Component = React.createClass({
getInitialState: function() {
return {count: 1};
},
render: function() {
componentDidLeave = () => {
log.push('didLeave' + this.props.id);
};
componentWillUnmount() {
log.push('willUnmount' + this.props.id);
}
render() {
return <span />;
}
}
class Component extends React.Component {
state = {count: 1};
render() {
var children = [];
for (var i = 0; i < this.state.count; i++) {
children.push(<Child key={i} id={i} />);
}
return <ReactTransitionGroup>{children}</ReactTransitionGroup>;
},
});
}
}
var instance = ReactDOM.render(<Component />, container);
expect(log).toEqual(['didMount0']);
@@ -277,12 +299,12 @@ describe('ReactTransitionGroup', function() {
it('should warn for duplicated keys with component stack info', function() {
spyOn(console, 'error');
var Component = React.createClass({
render: function() {
class Component extends React.Component {
render() {
var children = [<div key="1"/>, <div key="1" />];
return <ReactTransitionGroup>{children}</ReactTransitionGroup>;
},
});
}
}
ReactDOM.render(<Component />, container);
src/isomorphic/children/__tests__/onlyChild-test.js
+4 -4
View File
@@ -22,15 +22,15 @@ describe('onlyChild', function() {
React = require('React');
ReactFragment = require('ReactFragment');
onlyChild = require('onlyChild');
WrapComponent = React.createClass({
render: function() {
WrapComponent = class extends React.Component {
render() {
return (
<div>
{onlyChild(this.props.children, this.props.mapFn, this)}
</div>
);
},
});
}
};
});
it('should fail when passed two children', function() {
src/isomorphic/classic/types/__tests__/ReactPropTypes-test.js
+30 -30
View File
@@ -340,15 +340,15 @@ describe('ReactPropTypes', function() {
describe('Component Type', function() {
beforeEach(function() {
Component = React.createClass({
propTypes: {
Component = class extends React.Component {
static propTypes = {
label: PropTypes.element.isRequired,
},
};
render: function() {
render() {
return <div>{this.props.label}</div>;
},
});
}
};
});
it('should support components', () => {
@@ -513,11 +513,11 @@ describe('ReactPropTypes', function() {
describe('React Component Types', function() {
beforeEach(function() {
MyComponent = React.createClass({
render: function() {
MyComponent = class extends React.Component {
render() {
return <div />;
},
});
}
};
});
it('should warn for invalid values', function() {
@@ -1048,13 +1048,13 @@ describe('ReactPropTypes', function() {
it('should have been called with the right params', function() {
var spy = jasmine.createSpy();
Component = React.createClass({
propTypes: {num: spy},
Component = class extends React.Component {
static propTypes = {num: spy};
render: function() {
render() {
return <div />;
},
});
}
};
var instance = <Component num={5} />;
instance = ReactTestUtils.renderIntoDocument(instance);
@@ -1065,13 +1065,13 @@ describe('ReactPropTypes', function() {
it('should have been called even if the prop is not present', function() {
var spy = jasmine.createSpy();
Component = React.createClass({
propTypes: {num: spy},
Component = class extends React.Component {
static propTypes = {num: spy};
render: function() {
render() {
return <div />;
},
});
}
};
var instance = <Component bla={5} />;
instance = ReactTestUtils.renderIntoDocument(instance);
@@ -1089,13 +1089,13 @@ describe('ReactPropTypes', function() {
}
}
);
Component = React.createClass({
propTypes: {num: spy},
Component = class extends React.Component {
static propTypes = {num: spy};
render: function() {
render() {
return <div />;
},
});
}
};
var instance = <Component num={6} />;
instance = ReactTestUtils.renderIntoDocument(instance);
@@ -1116,13 +1116,13 @@ describe('ReactPropTypes', function() {
return null;
}
);
Component = React.createClass({
propTypes: {num: spy},
Component = class extends React.Component {
static propTypes = {num: spy};
render: function() {
render() {
return <div />;
},
});
}
};
var instance = <Component num={5} />;
instance = ReactTestUtils.renderIntoDocument(instance);
src/renderers/art/__tests__/ReactART-test.js
+42 -30
View File
@@ -60,8 +60,8 @@ describe('ReactART', function() {
Shape = ReactART.Shape;
Surface = ReactART.Surface;
TestComponent = React.createClass({
render: function() {
TestComponent = class extends React.Component {
render() {
var a =
<Shape
@@ -96,7 +96,7 @@ describe('ReactART', function() {
</Surface>
);
}
});
};
});
it('should have the correct lifecycle state', function() {
@@ -185,16 +185,16 @@ describe('ReactART', function() {
it('should be able to reorder many components', function() {
var container = document.createElement('div');
var Component = React.createClass({
render: function() {
class Component extends React.Component {
render() {
var chars = this.props.chars.split('');
return (
<Surface>
{chars.map((text) => <Shape key={text} title={text} />)}
</Surface>
);
},
});
}
}
// Mini multi-child stress test: lots of reorders, some adds, some removes.
var before = 'abcdefghijklmnopqrst';
@@ -212,14 +212,17 @@ describe('ReactART', function() {
it('renders composite with lifecycle inside group', function() {
var mounted = false;
var CustomShape = React.createClass({
render: function() {
class CustomShape extends React.Component {
render() {
return <Shape />;
},
componentDidMount: function() {
}
componentDidMount() {
mounted = true;
}
});
}
ReactTestUtils.renderIntoDocument(
<Surface>
<Group>
@@ -231,17 +234,20 @@ describe('ReactART', function() {
});
it('resolves refs before componentDidMount', function() {
var CustomShape = React.createClass({
render: function() {
class CustomShape extends React.Component {
render() {
return <Shape />;
}
});
}
var ref = null;
var Outer = React.createClass({
componentDidMount: function() {
class Outer extends React.Component {
componentDidMount() {
ref = this.refs.test;
},
render: function() {
}
render() {
return (
<Surface>
<Group>
@@ -250,26 +256,31 @@ describe('ReactART', function() {
</Surface>
);
}
});
}
ReactTestUtils.renderIntoDocument(<Outer />);
expect(ref.constructor).toBe(CustomShape);
});
it('resolves refs before componentDidUpdate', function() {
var CustomShape = React.createClass({
render: function() {
class CustomShape extends React.Component {
render() {
return <Shape />;
}
});
}
var ref = {};
var Outer = React.createClass({
componentDidMount: function() {
class Outer extends React.Component {
componentDidMount() {
ref = this.refs.test;
},
componentDidUpdate: function() {
}
componentDidUpdate() {
ref = this.refs.test;
},
render: function() {
}
render() {
return (
<Surface>
<Group>
@@ -278,7 +289,8 @@ describe('ReactART', function() {
</Surface>
);
}
});
}
var container = document.createElement('div');
ReactDOM.render(<Outer />, container);
expect(ref).not.toBeDefined();
src/renderers/dom/__tests__/ReactDOMProduction-test.js
+9 -8
View File
@@ -49,11 +49,11 @@ describe('ReactDOMProduction', function() {
});
it('should handle a simple flow', function() {
var Component = React.createClass({
render: function() {
class Component extends React.Component {
render() {
return <span>{this.props.children}</span>;
},
});
}
}
var container = document.createElement('div');
var inst = ReactDOM.render(
@@ -88,11 +88,12 @@ describe('ReactDOMProduction', function() {
it('should throw with an error code in production', function() {
expect(function() {
var Component = React.createClass({
render: function() {
class Component extends React.Component {
render() {
return ['this is wrong'];
},
});
}
}
var container = document.createElement('div');
ReactDOM.render(<Component />, container);
}).toThrowError(
src/renderers/dom/client/__tests__/ReactDOM-test.js
+14 -14
View File
@@ -123,14 +123,14 @@ describe('ReactDOM', function() {
this.a = 1;
this.b = 2;
}
var A = React.createClass({
getInitialState: function() {
return {};
},
render: function() {
class A extends React.Component {
state = {};
render() {
return <div />;
},
});
}
}
var myDiv = document.createElement('div');
expect(() => ReactDOM.render(<A />, myDiv, 'no')).toThrowError(
@@ -152,14 +152,14 @@ describe('ReactDOM', function() {
this.a = 1;
this.b = 2;
}
var A = React.createClass({
getInitialState: function() {
return {};
},
render: function() {
class A extends React.Component {
state = {};
render() {
return <div />;
},
});
}
}
var myDiv = document.createElement('div');
ReactDOM.render(<A />, myDiv);
src/renderers/dom/client/__tests__/ReactDOMComponentTree-test.js
+8 -8
View File
@@ -35,8 +35,8 @@ describe('ReactDOMComponentTree', function() {
// This is a little hard to test directly. But refs rely on it -- so we
// check that we can find a ref at arbitrary points in the tree, even if
// other nodes don't have a ref.
var Component = React.createClass({
render: function() {
class Component extends React.Component {
render() {
var toRef = this.props.toRef;
return (
<div ref={toRef === 'div' ? 'target' : null}>
@@ -47,8 +47,8 @@ describe('ReactDOMComponentTree', function() {
goodbye.
</div>
);
},
});
}
}
function renderAndGetRef(toRef) {
var inst = renderMarkupIntoDocument(<Component toRef={toRef} />);
@@ -62,8 +62,8 @@ describe('ReactDOMComponentTree', function() {
});
it('finds instances for nodes', function() {
var Component = React.createClass({
render: function() {
class Component extends React.Component {
render() {
return (
<div>
<h1>hello</h1>
@@ -74,8 +74,8 @@ describe('ReactDOMComponentTree', function() {
<main dangerouslySetInnerHTML={{__html: '<b><img></b>'}} />
</div>
);
},
});
}
}
function renderAndQuery(sel) {
var root = renderMarkupIntoDocument(<section><Component /></section>);
src/renderers/dom/client/__tests__/ReactDOMTreeTraversal-test.js
+8 -8
View File
@@ -21,19 +21,19 @@ var ReactTestUtils = require('ReactTestUtils');
var ARG = {arg: true};
var ARG2 = {arg2: true};
var ChildComponent = React.createClass({
render: function() {
class ChildComponent extends React.Component {
render() {
return (
<div ref="DIV">
<div ref="DIV_1" />
<div ref="DIV_2" />
</div>
);
},
});
}
}
var ParentComponent = React.createClass({
render: function() {
class ParentComponent extends React.Component {
render() {
return (
<div ref="P">
<div ref="P_P1">
@@ -43,8 +43,8 @@ var ParentComponent = React.createClass({
<div ref="P_OneOff" />
</div>
);
},
});
}
}
function renderParentIntoDocument() {
return ReactTestUtils.renderIntoDocument(<ParentComponent />);
src/renderers/dom/client/__tests__/ReactEventListener-test.js
+6 -8
View File
@@ -184,18 +184,16 @@ describe('ReactEventListener', function() {
});
it('should not fire duplicate events for a React DOM tree', function() {
var Wrapper = React.createClass({
getInner: function() {
class Wrapper extends React.Component {
getInner = () => {
return this.refs.inner;
},
};
render: function() {
render() {
var inner = <div ref="inner">Inner</div>;
return <div><div id="outer">{inner}</div></div>;
},
});
}
}
var instance = ReactTestUtils.renderIntoDocument(<Wrapper />);
src/renderers/dom/client/__tests__/ReactMount-test.js
+19 -16
View File
@@ -60,11 +60,12 @@ describe('ReactMount', function() {
});
it('throws when given a factory', function() {
var Component = React.createClass({
render: function() {
class Component extends React.Component {
render() {
return <div />;
},
});
}
}
expect(function() {
ReactTestUtils.renderIntoDocument(Component);
}).toThrowError(
@@ -206,11 +207,13 @@ describe('ReactMount', function() {
it('should warn if render removes React-rendered children', function() {
var container = document.createElement('container');
var Component = React.createClass({
render: function() {
class Component extends React.Component {
render() {
return <div><div /></div>;
},
});
}
}
ReactDOM.render(<Component />, container);
// Test that blasting away children throws a warning
@@ -281,17 +284,17 @@ describe('ReactMount', function() {
it('marks top-level mounts', function() {
var ReactFeatureFlags = require('ReactFeatureFlags');
var Foo = React.createClass({
render: function() {
class Foo extends React.Component {
render() {
return <Bar />;
},
});
}
}
var Bar = React.createClass({
render: function() {
class Bar extends React.Component {
render() {
return <div />;
},
});
}
}
try {
ReactFeatureFlags.logTopLevelRenders = true;
src/renderers/dom/client/__tests__/ReactRenderDocument-test.js
+28 -28
View File
@@ -41,8 +41,8 @@ describe('rendering React components at document', function() {
it('should be able to adopt server markup', function() {
expect(testDocument).not.toBeUndefined();
var Root = React.createClass({
render: function() {
class Root extends React.Component {
render() {
return (
<html>
<head>
@@ -53,8 +53,8 @@ describe('rendering React components at document', function() {
</body>
</html>
);
},
});
}
}
var markup = ReactDOMServer.renderToString(<Root hello="world" />);
testDocument = getTestDocument(markup);
@@ -72,8 +72,8 @@ describe('rendering React components at document', function() {
it('should not be able to unmount component from document node', function() {
expect(testDocument).not.toBeUndefined();
var Root = React.createClass({
render: function() {
class Root extends React.Component {
render() {
return (
<html>
<head>
@@ -84,8 +84,8 @@ describe('rendering React components at document', function() {
</body>
</html>
);
},
});
}
}
var markup = ReactDOMServer.renderToString(<Root />);
testDocument = getTestDocument(markup);
@@ -102,8 +102,8 @@ describe('rendering React components at document', function() {
it('should not be able to switch root constructors', function() {
expect(testDocument).not.toBeUndefined();
var Component = React.createClass({
render: function() {
class Component extends React.Component {
render() {
return (
<html>
<head>
@@ -114,11 +114,11 @@ describe('rendering React components at document', function() {
</body>
</html>
);
},
});
}
}
var Component2 = React.createClass({
render: function() {
class Component2 extends React.Component {
render() {
return (
<html>
<head>
@@ -129,8 +129,8 @@ describe('rendering React components at document', function() {
</body>
</html>
);
},
});
}
}
var markup = ReactDOMServer.renderToString(<Component />);
testDocument = getTestDocument(markup);
@@ -150,8 +150,8 @@ describe('rendering React components at document', function() {
it('should be able to mount into document', function() {
expect(testDocument).not.toBeUndefined();
var Component = React.createClass({
render: function() {
class Component extends React.Component {
render() {
return (
<html>
<head>
@@ -162,8 +162,8 @@ describe('rendering React components at document', function() {
</body>
</html>
);
},
});
}
}
var markup = ReactDOMServer.renderToString(
<Component text="Hello world" />
@@ -178,8 +178,8 @@ describe('rendering React components at document', function() {
it('should give helpful errors on state desync', function() {
expect(testDocument).not.toBeUndefined();
var Component = React.createClass({
render: function() {
class Component extends React.Component {
render() {
return (
<html>
<head>
@@ -190,8 +190,8 @@ describe('rendering React components at document', function() {
</body>
</html>
);
},
});
}
}
var markup = ReactDOMServer.renderToString(
<Component text="Goodbye world" />
@@ -220,8 +220,8 @@ describe('rendering React components at document', function() {
var container = testDocument;
var Component = React.createClass({
render: function() {
class Component extends React.Component {
render() {
return (
<html>
<head>
@@ -232,8 +232,8 @@ describe('rendering React components at document', function() {
</body>
</html>
);
},
});
}
}
expect(function() {
ReactDOM.render(<Component />, container);
src/renderers/dom/client/__tests__/findDOMNode-test.js
+15 -14
View File
@@ -21,11 +21,11 @@ describe('findDOMNode', function() {
});
it('findDOMNode should find dom element', function() {
var MyNode = React.createClass({
render: function() {
class MyNode extends React.Component {
render() {
return <div><span>Noise</span></div>;
},
});
}
}
var myNode = ReactTestUtils.renderIntoDocument(<MyNode />);
var myDiv = ReactDOM.findDOMNode(myNode);
@@ -43,11 +43,11 @@ describe('findDOMNode', function() {
});
it('findDOMNode should reject unmounted objects with render func', function() {
var Foo = React.createClass({
render: function() {
class Foo extends React.Component {
render() {
return <div />;
},
});
}
}
var container = document.createElement('div');
var inst = ReactDOM.render(<Foo />, container);
@@ -59,14 +59,15 @@ describe('findDOMNode', function() {
});
it('findDOMNode should not throw an error when called within a component that is not mounted', function() {
var Bar = React.createClass({
componentWillMount: function() {
class Bar extends React.Component {
componentWillMount() {
expect(ReactDOM.findDOMNode(this)).toBeNull();
},
render: function() {
}
render() {
return <div/>;
},
});
}
}
expect(() => ReactTestUtils.renderIntoDocument(<Bar/>)).not.toThrow();
});
src/renderers/dom/client/eventPlugins/__tests__/SelectEventPlugin-test.js
+8 -8
View File
@@ -42,11 +42,11 @@ describe('SelectEventPlugin', function() {
});
it('should skip extraction if no listeners are present', function() {
var WithoutSelect = React.createClass({
render: function() {
class WithoutSelect extends React.Component {
render() {
return <input type="text" />;
},
});
}
}
var rendered = ReactTestUtils.renderIntoDocument(<WithoutSelect />);
var node = ReactDOM.findDOMNode(rendered);
@@ -60,11 +60,11 @@ describe('SelectEventPlugin', function() {
});
it('should extract if an `onSelect` listener is present', function() {
var WithSelect = React.createClass({
render: function() {
class WithSelect extends React.Component {
render() {
return <input type="text" onSelect={this.props.onSelect} />;
},
});
}
}
var cb = jest.fn();
src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
+4 -4
View File
@@ -281,8 +281,8 @@ describe('ReactDOMInput', function() {
});
it('should control radio buttons', function() {
var RadioGroup = React.createClass({
render: function() {
class RadioGroup extends React.Component {
render() {
return (
<div>
<input
@@ -310,8 +310,8 @@ describe('ReactDOMInput', function() {
</form>
</div>
);
},
});
}
}
var stub = ReactTestUtils.renderIntoDocument(<RadioGroup />);
var aNode = ReactDOM.findDOMNode(stub.refs.a);
src/renderers/dom/server/__tests__/ReactServerRendering-test.js
+129 -100
View File
@@ -75,11 +75,12 @@ describe('ReactServerRendering', function() {
});
it('should generate comment markup for component returns null', function() {
var NullComponent = React.createClass({
render: function() {
class NullComponent extends React.Component {
render() {
return null;
},
});
}
}
var response = ReactServerRendering.renderToString(<NullComponent />);
expect(response).toBe('<!-- react-empty: 1 -->');
});
@@ -95,16 +96,18 @@ describe('ReactServerRendering', function() {
});
it('should render composite components', function() {
var Parent = React.createClass({
render: function() {
class Parent extends React.Component {
render() {
return <div><Child name="child" /></div>;
},
});
var Child = React.createClass({
render: function() {
}
}
class Child extends React.Component {
render() {
return <span>My name is {this.props.name}</span>;
},
});
}
}
var response = ReactServerRendering.renderToString(
<Parent />
);
@@ -123,37 +126,47 @@ describe('ReactServerRendering', function() {
it('should only execute certain lifecycle methods', function() {
function runTest() {
var lifecycle = [];
var TestComponent = React.createClass({
componentWillMount: function() {
lifecycle.push('componentWillMount');
},
componentDidMount: function() {
lifecycle.push('componentDidMount');
},
getInitialState: function() {
class TestComponent extends React.Component {
constructor(props) {
super(props);
lifecycle.push('getInitialState');
return {name: 'TestComponent'};
},
render: function() {
this.state = {name: 'TestComponent'};
}
componentWillMount() {
lifecycle.push('componentWillMount');
}
componentDidMount() {
lifecycle.push('componentDidMount');
}
render() {
lifecycle.push('render');
return <span>Component name: {this.state.name}</span>;
},
componentWillUpdate: function() {
}
componentWillUpdate() {
lifecycle.push('componentWillUpdate');
},
componentDidUpdate: function() {
}
componentDidUpdate() {
lifecycle.push('componentDidUpdate');
},
shouldComponentUpdate: function() {
}
shouldComponentUpdate() {
lifecycle.push('shouldComponentUpdate');
},
componentWillReceiveProps: function() {
}
componentWillReceiveProps() {
lifecycle.push('componentWillReceiveProps');
},
componentWillUnmount: function() {
}
componentWillUnmount() {
lifecycle.push('componentWillUnmount');
},
});
}
}
var response = ReactServerRendering.renderToString(
<TestComponent />
@@ -186,19 +199,21 @@ describe('ReactServerRendering', function() {
var mountCount = 0;
var numClicks = 0;
var TestComponent = React.createClass({
componentDidMount: function() {
class TestComponent extends React.Component {
componentDidMount() {
mountCount++;
},
click: function() {
}
click = () => {
numClicks++;
},
render: function() {
};
render() {
return (
<span ref="span" onClick={this.click}>Name: {this.props.name}</span>
);
},
});
}
}
var element = document.createElement('div');
ReactDOM.render(<TestComponent />, element);
@@ -274,17 +289,17 @@ describe('ReactServerRendering', function() {
describe('renderToStaticMarkup', function() {
it('should not put checksum and React ID on components', function() {
var NestedComponent = React.createClass({
render: function() {
class NestedComponent extends React.Component {
render() {
return <div>inner text</div>;
},
});
}
}
var TestComponent = React.createClass({
render: function() {
class TestComponent extends React.Component {
render() {
return <span><NestedComponent /></span>;
},
});
}
}
var response = ReactServerRendering.renderToStaticMarkup(
<TestComponent />
@@ -294,11 +309,11 @@ describe('ReactServerRendering', function() {
});
it('should not put checksum and React ID on text components', function() {
var TestComponent = React.createClass({
render: function() {
class TestComponent extends React.Component {
render() {
return <span>{'hello'} {'world'}</span>;
},
});
}
}
var response = ReactServerRendering.renderToStaticMarkup(
<TestComponent />
@@ -320,37 +335,47 @@ describe('ReactServerRendering', function() {
it('should only execute certain lifecycle methods', function() {
function runTest() {
var lifecycle = [];
var TestComponent = React.createClass({
componentWillMount: function() {
lifecycle.push('componentWillMount');
},
componentDidMount: function() {
lifecycle.push('componentDidMount');
},
getInitialState: function() {
class TestComponent extends React.Component {
constructor(props) {
super(props);
lifecycle.push('getInitialState');
return {name: 'TestComponent'};
},
render: function() {
this.state = {name: 'TestComponent'};
}
componentWillMount() {
lifecycle.push('componentWillMount');
}
componentDidMount() {
lifecycle.push('componentDidMount');
}
render() {
lifecycle.push('render');
return <span>Component name: {this.state.name}</span>;
},
componentWillUpdate: function() {
}
componentWillUpdate() {
lifecycle.push('componentWillUpdate');
},
componentDidUpdate: function() {
}
componentDidUpdate() {
lifecycle.push('componentDidUpdate');
},
shouldComponentUpdate: function() {
}
shouldComponentUpdate() {
lifecycle.push('shouldComponentUpdate');
},
componentWillReceiveProps: function() {
}
componentWillReceiveProps() {
lifecycle.push('componentWillReceiveProps');
},
componentWillUnmount: function() {
}
componentWillUnmount() {
lifecycle.push('componentWillUnmount');
},
});
}
}
var response = ReactServerRendering.renderToStaticMarkup(
<TestComponent />
@@ -381,14 +406,15 @@ describe('ReactServerRendering', function() {
});
it('allows setState in componentWillMount without using DOM', function() {
var Component = React.createClass({
componentWillMount: function() {
class Component extends React.Component {
componentWillMount() {
this.setState({text: 'hello, world'});
},
render: function() {
}
render() {
return <div>{this.state.text}</div>;
},
});
}
}
ReactReconcileTransaction.prototype.perform = function() {
// We shouldn't ever be calling this on the server
@@ -401,25 +427,27 @@ describe('ReactServerRendering', function() {
});
it('renders components with different batching strategies', function() {
var StaticComponent = React.createClass({
render: function() {
class StaticComponent extends React.Component {
render() {
const staticContent = ReactServerRendering.renderToStaticMarkup(
<div>
<img src="foo-bar.jpg" />
</div>
);
return <div dangerouslySetInnerHTML={{__html: staticContent}} />;
},
});
}
}
var Component = React.createClass({
componentWillMount: function() {
class Component extends React.Component {
componentWillMount() {
this.setState({text: 'hello, world'});
},
render: function() {
}
render() {
return <div>{this.state.text}</div>;
},
});
}
}
expect(
ReactServerRendering.renderToString.bind(
ReactServerRendering,
@@ -485,17 +513,18 @@ describe('ReactServerRendering', function() {
});
it('warns with a no-op when an async forceUpdate is triggered', function() {
var Baz = React.createClass({
componentWillMount: function() {
class Baz extends React.Component {
componentWillMount() {
this.forceUpdate();
setTimeout(() => {
this.forceUpdate();
});
},
render: function() {
}
render() {
return <div onClick={() => {}}></div>;
},
});
}
}
spyOn(console, 'error');
ReactServerRendering.renderToString(<Baz />);
src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
+35 -25
View File
@@ -108,12 +108,14 @@ describe('CSSPropertyOperations', function() {
});
it('should warn when using hyphenated style names', function() {
var Comp = React.createClass({
displayName: 'Comp',
render: function() {
class Comp extends React.Component {
static displayName = 'Comp';
render() {
return <div style={{ 'background-color': 'crimson' }}/>;
},
});
}
}
spyOn(console, 'error');
var root = document.createElement('div');
ReactDOM.render(<Comp />, root);
@@ -125,12 +127,14 @@ describe('CSSPropertyOperations', function() {
});
it('should warn when updating hyphenated style names', function() {
var Comp = React.createClass({
displayName: 'Comp',
render: function() {
class Comp extends React.Component {
static displayName = 'Comp';
render() {
return <div style={this.props.style} />;
},
});
}
}
spyOn(console, 'error');
var styles = {
'-ms-transform': 'translate3d(0, 0, 0)',
@@ -152,16 +156,18 @@ describe('CSSPropertyOperations', function() {
});
it('warns when miscapitalizing vendored style names', function() {
var Comp = React.createClass({
displayName: 'Comp',
render: function() {
class Comp extends React.Component {
static displayName = 'Comp';
render() {
return (<div style={{
msTransform: 'translate3d(0, 0, 0)',
oTransform: 'translate3d(0, 0, 0)',
webkitTransform: 'translate3d(0, 0, 0)',
}} />);
},
});
}
}
spyOn(console, 'error');
var root = document.createElement('div');
ReactDOM.render(<Comp />, root);
@@ -178,17 +184,19 @@ describe('CSSPropertyOperations', function() {
});
it('should warn about style having a trailing semicolon', function() {
var Comp = React.createClass({
displayName: 'Comp',
render: function() {
class Comp extends React.Component {
static displayName = 'Comp';
render() {
return (<div style={{
fontFamily: 'Helvetica, arial',
backgroundImage: 'url(foo;bar)',
backgroundColor: 'blue;',
color: 'red; ',
}} />);
},
});
}
}
spyOn(console, 'error');
var root = document.createElement('div');
ReactDOM.render(<Comp />, root);
@@ -204,12 +212,14 @@ describe('CSSPropertyOperations', function() {
});
it('should warn about style containing a NaN value', function() {
var Comp = React.createClass({
displayName: 'Comp',
render: function() {
class Comp extends React.Component {
static displayName = 'Comp';
render() {
return <div style={{ fontSize: NaN }}/>;
},
});
}
}
spyOn(console, 'error');
var root = document.createElement('div');
ReactDOM.render(<Comp />, root);
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+78 -70
View File
@@ -116,14 +116,14 @@ describe('ReactDOMComponent', function() {
spyOn(console, 'error');
var style = {border: '1px solid black'};
var App = React.createClass({
getInitialState: function() {
return {style: style};
},
render: function() {
class App extends React.Component {
state = {style: style};
render() {
return <div style={this.state.style}>asd</div>;
},
});
}
}
var stub = ReactTestUtils.renderIntoDocument(<App />);
style.position = 'absolute';
@@ -186,11 +186,12 @@ describe('ReactDOMComponent', function() {
it('should not warn for "0" as a unitless style value', function() {
spyOn(console, 'error');
var Component = React.createClass({
render: function() {
class Component extends React.Component {
render() {
return <div style={{margin: '0'}} />;
},
});
}
}
ReactTestUtils.renderIntoDocument(<Component />);
expect(console.error.calls.count()).toBe(0);
@@ -755,11 +756,12 @@ describe('ReactDOMComponent', function() {
});
it('should not duplicate uppercased selfclosing tags', function() {
var Container = React.createClass({
render: function() {
class Container extends React.Component {
render() {
return React.createElement('BR', null);
},
});
}
}
var returnedValue = ReactDOMServer.renderToString(<Container/>);
expect(returnedValue).not.toContain('</BR>');
});
@@ -944,11 +946,11 @@ describe('ReactDOMComponent', function() {
});
it('should warn for children on void elements', function() {
var X = React.createClass({
render: function() {
class X extends React.Component {
render() {
return <input>moo</input>;
},
});
}
}
var container = document.createElement('div');
expect(function() {
@@ -1039,11 +1041,11 @@ describe('ReactDOMComponent', function() {
});
it('should report component containing invalid styles', function() {
var Animal = React.createClass({
render: function() {
class Animal extends React.Component {
render() {
return <div style={1}></div>;
},
});
}
}
expect(function() {
ReactDOM.render(<Animal/>, container);
@@ -1123,15 +1125,16 @@ describe('ReactDOMComponent', function() {
});
it('unmounts children before unsetting DOM node info', function() {
var Inner = React.createClass({
render: function() {
class Inner extends React.Component {
render() {
return <span />;
},
componentWillUnmount: function() {
}
componentWillUnmount() {
// Should not throw
expect(ReactDOM.findDOMNode(this).nodeName).toBe('SPAN');
},
});
}
}
var container = document.createElement('div');
ReactDOM.render(<div><Inner /></div>, container);
@@ -1219,16 +1222,19 @@ describe('ReactDOMComponent', function() {
it('warns nicely for table rows', () => {
spyOn(console, 'error');
var Row = React.createClass({
render: function() {
class Row extends React.Component {
render() {
return <tr />;
},
});
var Foo = React.createClass({
render: function() {
}
}
class Foo extends React.Component {
render() {
return <table><Row /> </table>;
},
});
}
}
ReactTestUtils.renderIntoDocument(<Foo />);
expect(console.error.calls.count()).toBe(2);
@@ -1251,16 +1257,18 @@ describe('ReactDOMComponent', function() {
var FancyRow = React.createClass({
render: () => <Row />,
});
var Table = React.createClass({
render: function() {
class Table extends React.Component {
render() {
return <table>{this.props.children}</table>;
},
});
var FancyTable = React.createClass({
render: function() {
}
}
class FancyTable extends React.Component {
render() {
return <Table>{this.props.children}</Table>;
},
});
}
}
var Viz1 = React.createClass({
render: () => <table><FancyRow /></table>,
@@ -1304,11 +1312,12 @@ describe('ReactDOMComponent', function() {
'See FancyTable > Table > table > tr.'
);
var Link = React.createClass({
render: function() {
class Link extends React.Component {
render() {
return <a>{this.props.children}</a>;
},
});
}
}
ReactTestUtils.renderIntoDocument(<Link><div><Link /></div></Link>);
expect(console.error.calls.count()).toBe(6);
expect(console.error.calls.argsFor(5)[0]).toContain(
@@ -1434,35 +1443,35 @@ describe('ReactDOMComponent', function() {
spyOn(console, 'error');
var container = document.createElement('div');
var Parent = React.createClass({
render: function() {
class Parent extends React.Component {
render() {
return <div><Child1 /><Child2 /><Child3 /><Child4 /></div>;
},
});
}
}
var Child1 = React.createClass({
render: function() {
class Child1 extends React.Component {
render() {
return <div class="paladin">Child1</div>;
},
});
}
}
var Child2 = React.createClass({
render: function() {
class Child2 extends React.Component {
render() {
return <div>Child2</div>;
},
});
}
}
var Child3 = React.createClass({
render: function() {
class Child3 extends React.Component {
render() {
return <div onclick="1">Child3</div>;
},
});
}
}
var Child4 = React.createClass({
render: function() {
class Child4 extends React.Component {
render() {
return <div>Child4</div>;
},
});
}
}
ReactDOMServer.renderToString(<Parent />, container);
@@ -1479,7 +1488,6 @@ describe('ReactDOMComponent', function() {
//verify line number has a proper relative difference,
//since hard coding the line number would make test too brittle
expect(parseInt(previousLine, 10) + 12).toBe(parseInt(currentLine, 10));
});
});
});
src/renderers/shared/__tests__/ReactPerf-test.js
+23 -19
View File
@@ -40,24 +40,24 @@ describe('ReactPerf', function() {
ReactTestUtils = require('ReactTestUtils');
emptyFunction = require('emptyFunction');
App = React.createClass({
render: function() {
App = class extends React.Component {
render() {
return <div><Box /><Box flip={this.props.flipSecond} /></div>;
},
});
}
};
Box = React.createClass({
render: function() {
Box = class extends React.Component {
render() {
return <div key={!!this.props.flip}><input /></div>;
},
});
}
};
// ReactPerf only measures composites, so we put everything in one.
Div = React.createClass({
render: function() {
Div = class extends React.Component {
render() {
return <div {...this.props} />;
},
});
}
};
LifeCycle = React.createClass({
shouldComponentUpdate: emptyFunction.thatReturnsTrue,
@@ -471,24 +471,28 @@ describe('ReactPerf', function() {
it('should work when measurement starts during reconciliation', () => {
// https://github.com/facebook/react/issues/6949#issuecomment-230371009
var Measurer = React.createClass({
class Measurer extends React.Component {
componentWillMount() {
ReactPerf.start();
},
}
componentDidMount() {
ReactPerf.stop();
},
}
componentWillUpdate() {
ReactPerf.start();
},
}
componentDidUpdate() {
ReactPerf.stop();
},
}
render() {
// Force reconciliation despite constant element
return React.cloneElement(this.props.children);
},
});
}
}
var container = document.createElement('div');
ReactDOM.render(<Measurer><App /></Measurer>, container);
src/renderers/shared/devtools/__tests__/ReactComponentTreeDevtool-test.js
+50 -45
View File
@@ -103,22 +103,26 @@ describe('ReactComponentTreeDevtool', () => {
describe('mount', () => {
it('uses displayName or Unknown for classic components', () => {
var Foo = React.createClass({
class Foo extends React.Component {
render() {
return null;
},
});
}
}
Foo.displayName = 'Bar';
var Baz = React.createClass({
class Baz extends React.Component {
render() {
return null;
},
});
var Qux = React.createClass({
}
}
class Qux extends React.Component {
render() {
return null;
},
});
}
}
delete Qux.displayName;
var element = <div><Foo /><Baz /><Qux /></div>;
@@ -306,11 +310,12 @@ describe('ReactComponentTreeDevtool', () => {
});
it('reports a tree with composites correctly', () => {
var Qux = React.createClass({
class Qux extends React.Component {
render() {
return null;
},
});
}
}
function Foo() {
return {
render() {
@@ -1361,11 +1366,11 @@ describe('ReactComponentTreeDevtool', () => {
describe('class component', () => {
it('updates with a host child', () => {
var Foo = React.createClass({
class Foo extends React.Component {
render() {
return this.props.children;
},
});
}
}
var elementBefore = <Foo><div /></Foo>;
var treeBefore = {
@@ -1392,11 +1397,11 @@ describe('ReactComponentTreeDevtool', () => {
});
it('updates from null to a host child', () => {
var Foo = React.createClass({
class Foo extends React.Component {
render() {
return this.props.children;
},
});
}
}
var elementBefore = <Foo>{null}</Foo>;
var treeBefore = {
@@ -1420,11 +1425,11 @@ describe('ReactComponentTreeDevtool', () => {
});
it('updates from a host child to null', () => {
var Foo = React.createClass({
class Foo extends React.Component {
render() {
return this.props.children;
},
});
}
}
var elementBefore = <Foo><div /></Foo>;
var treeBefore = {
@@ -1448,17 +1453,17 @@ describe('ReactComponentTreeDevtool', () => {
});
it('updates from a host child to a composite child', () => {
var Bar = React.createClass({
class Bar extends React.Component {
render() {
return null;
},
});
}
}
var Foo = React.createClass({
class Foo extends React.Component {
render() {
return this.props.children;
},
});
}
}
var elementBefore = <Foo><div /></Foo>;
var treeBefore = {
@@ -1485,17 +1490,17 @@ describe('ReactComponentTreeDevtool', () => {
});
it('updates from a composite child to a host child', () => {
var Bar = React.createClass({
class Bar extends React.Component {
render() {
return null;
},
});
}
}
var Foo = React.createClass({
class Foo extends React.Component {
render() {
return this.props.children;
},
});
}
}
var elementBefore = <Foo><Bar /></Foo>;
var treeBefore = {
@@ -1522,17 +1527,17 @@ describe('ReactComponentTreeDevtool', () => {
});
it('updates from null to a composite child', () => {
var Bar = React.createClass({
class Bar extends React.Component {
render() {
return null;
},
});
}
}
var Foo = React.createClass({
class Foo extends React.Component {
render() {
return this.props.children;
},
});
}
}
var elementBefore = <Foo>{null}</Foo>;
var treeBefore = {
@@ -1556,17 +1561,17 @@ describe('ReactComponentTreeDevtool', () => {
});
it('updates from a composite child to null', () => {
var Bar = React.createClass({
class Bar extends React.Component {
render() {
return null;
},
});
}
}
var Foo = React.createClass({
class Foo extends React.Component {
render() {
return this.props.children;
},
});
}
}
var elementBefore = <Foo><Bar /></Foo>;
var treeBefore = {
src/renderers/shared/devtools/__tests__/ReactComponentTreeDevtool-test.native.js
+58 -51
View File
@@ -40,17 +40,19 @@ describe('ReactComponentTreeDevtool', () => {
validAttributes: {},
uiViewClassName: 'RCText',
});
Text = React.createClass({
childContextTypes: {
Text = class extends React.Component {
static childContextTypes = {
isInAParentText: React.PropTypes.bool,
},
};
getChildContext() {
return {isInAParentText: true};
},
}
render() {
return <RCText {...this.props} />;
},
});
}
};
});
function assertTreeMatches(pairs, options) {
@@ -116,22 +118,26 @@ describe('ReactComponentTreeDevtool', () => {
describe('mount', () => {
it('uses displayName or Unknown for classic components', () => {
var Foo = React.createClass({
class Foo extends React.Component {
render() {
return null;
},
});
}
}
Foo.displayName = 'Bar';
var Baz = React.createClass({
class Baz extends React.Component {
render() {
return null;
},
});
var Qux = React.createClass({
}
}
class Qux extends React.Component {
render() {
return null;
},
});
}
}
delete Qux.displayName;
var element = <View><Foo /><Baz /><Qux /></View>;
@@ -318,11 +324,12 @@ describe('ReactComponentTreeDevtool', () => {
});
it('reports a tree with composites correctly', () => {
var Qux = React.createClass({
class Qux extends React.Component {
render() {
return null;
},
});
}
}
function Foo() {
return {
render() {
@@ -1323,11 +1330,11 @@ describe('ReactComponentTreeDevtool', () => {
describe('class component', () => {
it('updates with a host child', () => {
var Foo = React.createClass({
class Foo extends React.Component {
render() {
return this.props.children;
},
});
}
}
var elementBefore = <Foo><View /></Foo>;
var treeBefore = {
@@ -1354,11 +1361,11 @@ describe('ReactComponentTreeDevtool', () => {
});
it('updates from null to a host child', () => {
var Foo = React.createClass({
class Foo extends React.Component {
render() {
return this.props.children;
},
});
}
}
var elementBefore = <Foo>{null}</Foo>;
var treeBefore = {
@@ -1382,11 +1389,11 @@ describe('ReactComponentTreeDevtool', () => {
});
it('updates from a host child to null', () => {
var Foo = React.createClass({
class Foo extends React.Component {
render() {
return this.props.children;
},
});
}
}
var elementBefore = <Foo><View /></Foo>;
var treeBefore = {
@@ -1410,17 +1417,17 @@ describe('ReactComponentTreeDevtool', () => {
});
it('updates from a host child to a composite child', () => {
var Bar = React.createClass({
class Bar extends React.Component {
render() {
return null;
},
});
}
}
var Foo = React.createClass({
class Foo extends React.Component {
render() {
return this.props.children;
},
});
}
}
var elementBefore = <Foo><View /></Foo>;
var treeBefore = {
@@ -1447,17 +1454,17 @@ describe('ReactComponentTreeDevtool', () => {
});
it('updates from a composite child to a host child', () => {
var Bar = React.createClass({
class Bar extends React.Component {
render() {
return null;
},
});
}
}
var Foo = React.createClass({
class Foo extends React.Component {
render() {
return this.props.children;
},
});
}
}
var elementBefore = <Foo><Bar /></Foo>;
var treeBefore = {
@@ -1484,17 +1491,17 @@ describe('ReactComponentTreeDevtool', () => {
});
it('updates from null to a composite child', () => {
var Bar = React.createClass({
class Bar extends React.Component {
render() {
return null;
},
});
}
}
var Foo = React.createClass({
class Foo extends React.Component {
render() {
return this.props.children;
},
});
}
}
var elementBefore = <Foo>{null}</Foo>;
var treeBefore = {
@@ -1518,17 +1525,17 @@ describe('ReactComponentTreeDevtool', () => {
});
it('updates from a composite child to null', () => {
var Bar = React.createClass({
class Bar extends React.Component {
render() {
return null;
},
});
}
}
var Foo = React.createClass({
class Foo extends React.Component {
render() {
return this.props.children;
},
});
}
}
var elementBefore = <Foo><Bar /></Foo>;
var treeBefore = {
src/renderers/shared/stack/reconciler/__tests__/ReactChildReconciler-test.js
+15 -15
View File
@@ -32,11 +32,11 @@ describe('ReactChildReconciler', function() {
it('warns for duplicated keys', function() {
spyOn(console, 'error');
var Component = React.createClass({
class Component extends React.Component {
render() {
return <div>{[<div key="1" />, <div key="1" />]}</div>;
},
});
}
}
ReactTestUtils.renderIntoDocument(<Component />);
@@ -49,23 +49,23 @@ describe('ReactChildReconciler', function() {
it('warns for duplicated keys with component stack info', function() {
spyOn(console, 'error');
var Component = React.createClass({
render: function() {
class Component extends React.Component {
render() {
return <div>{[<div key="1" />, <div key="1" />]}</div>;
},
});
}
}
var Parent = React.createClass({
render: function() {
class Parent extends React.Component {
render() {
return React.cloneElement(this.props.child);
},
});
}
}
var GrandParent = React.createClass({
render: function() {
class GrandParent extends React.Component {
render() {
return <Parent child={<Component />} />;
},
});
}
}
ReactTestUtils.renderIntoDocument(<GrandParent />);
src/renderers/shared/stack/reconciler/__tests__/ReactComponent-test.js
+87 -73
View File
@@ -79,48 +79,49 @@ describe('ReactComponent', function() {
var innerObj = {};
var outerObj = {};
var Wrapper = React.createClass({
getObject: function() {
class Wrapper extends React.Component {
getObject = () => {
return this.props.object;
},
};
render: function() {
render() {
return <div>{this.props.children}</div>;
},
}
}
});
var Component = React.createClass({
render: function() {
class Component extends React.Component {
render() {
var inner = <Wrapper object={innerObj} ref="inner" />;
var outer = <Wrapper object={outerObj} ref="outer">{inner}</Wrapper>;
return outer;
},
componentDidMount: function() {
}
componentDidMount() {
expect(this.refs.inner.getObject()).toEqual(innerObj);
expect(this.refs.outer.getObject()).toEqual(outerObj);
},
});
}
}
var instance = <Component />;
instance = ReactTestUtils.renderIntoDocument(instance);
});
it('should not have refs on unmounted components', function() {
var Parent = React.createClass({
render: function() {
class Parent extends React.Component {
render() {
return <Child><div ref="test" /></Child>;
},
componentDidMount: function() {
}
componentDidMount() {
expect(this.refs && this.refs.test).toEqual(undefined);
},
});
var Child = React.createClass({
render: function() {
}
}
class Child extends React.Component {
render() {
return <div />;
},
});
}
}
var instance = <Parent child={<span />} />;
instance = ReactTestUtils.renderIntoDocument(instance);
@@ -130,18 +131,20 @@ describe('ReactComponent', function() {
var innerObj = {};
var outerObj = {};
var Wrapper = React.createClass({
getObject: function() {
class Wrapper extends React.Component {
getObject = () => {
return this.props.object;
},
render: function() {
};
render() {
return <div>{this.props.children}</div>;
},
});
}
}
var mounted = false;
var Component = React.createClass({
render: function() {
class Component extends React.Component {
render() {
var inner = <Wrapper object={innerObj} ref={(c) => this.innerRef = c} />;
var outer = (
<Wrapper object={outerObj} ref={(c) => this.outerRef = c}>
@@ -149,13 +152,14 @@ describe('ReactComponent', function() {
</Wrapper>
);
return outer;
},
componentDidMount: function() {
}
componentDidMount() {
expect(this.innerRef.getObject()).toEqual(innerObj);
expect(this.outerRef.getObject()).toEqual(outerObj);
mounted = true;
},
});
}
}
var instance = <Component />;
instance = ReactTestUtils.renderIntoDocument(instance);
@@ -163,23 +167,26 @@ describe('ReactComponent', function() {
});
it('should support new-style refs with mixed-up owners', function() {
var Wrapper = React.createClass({
getTitle: function() {
class Wrapper extends React.Component {
getTitle = () => {
return this.props.title;
},
render: function() {
};
render() {
return this.props.getContent();
},
});
}
}
var mounted = false;
var Component = React.createClass({
getInner: function() {
class Component extends React.Component {
getInner = () => {
// (With old-style refs, it's impossible to get a ref to this div
// because Wrapper is the current owner when this function is called.)
return <div title="inner" ref={(c) => this.innerRef = c} />;
},
render: function() {
};
render() {
return (
<Wrapper
title="wrapper"
@@ -187,14 +194,15 @@ describe('ReactComponent', function() {
getContent={this.getInner}
/>
);
},
componentDidMount: function() {
}
componentDidMount() {
// Check .props.title to make sure we got the right elements back
expect(this.wrapperRef.getTitle()).toBe('wrapper');
expect(ReactDOM.findDOMNode(this.innerRef).title).toBe('inner');
mounted = true;
},
});
}
}
var instance = <Component />;
instance = ReactTestUtils.renderIntoDocument(instance);
@@ -204,24 +212,27 @@ describe('ReactComponent', function() {
it('should call refs at the correct time', function() {
var log = [];
var Inner = React.createClass({
render: function() {
class Inner extends React.Component {
render() {
log.push(`inner ${this.props.id} render`);
return <div />;
},
componentDidMount: function() {
log.push(`inner ${this.props.id} componentDidMount`);
},
componentDidUpdate: function() {
log.push(`inner ${this.props.id} componentDidUpdate`);
},
componentWillUnmount: function() {
log.push(`inner ${this.props.id} componentWillUnmount`);
},
});
}
var Outer = React.createClass({
render: function() {
componentDidMount() {
log.push(`inner ${this.props.id} componentDidMount`);
}
componentDidUpdate() {
log.push(`inner ${this.props.id} componentDidUpdate`);
}
componentWillUnmount() {
log.push(`inner ${this.props.id} componentWillUnmount`);
}
}
class Outer extends React.Component {
render() {
return (
<div>
<Inner id={1} ref={(c) => {
@@ -232,17 +243,20 @@ describe('ReactComponent', function() {
}}/>
</div>
);
},
componentDidMount: function() {
}
componentDidMount() {
log.push('outer componentDidMount');
},
componentDidUpdate: function() {
}
componentDidUpdate() {
log.push('outer componentDidUpdate');
},
componentWillUnmount: function() {
}
componentWillUnmount() {
log.push('outer componentWillUnmount');
},
});
}
}
// mount, update, unmount
var el = document.createElement('div');
src/renderers/shared/stack/reconciler/__tests__/ReactComponentLifeCycle-test.js
+102 -83
View File
@@ -107,16 +107,17 @@ describe('ReactComponentLifeCycle', function() {
it('should not reuse an instance when it has been unmounted', function() {
var container = document.createElement('div');
var StatefulComponent = React.createClass({
getInitialState: function() {
return {};
},
render: function() {
class StatefulComponent extends React.Component {
state = {};
render() {
return (
<div></div>
);
},
});
}
}
var element = <StatefulComponent />;
var firstInstance = ReactDOM.render(element, container);
ReactDOM.unmountComponentAtNode(container);
@@ -129,31 +130,35 @@ describe('ReactComponentLifeCycle', function() {
* that second onDOMReady should not fail.
*/
it('it should fire onDOMReady when already in onDOMReady', function() {
var _testJournal = [];
var Child = React.createClass({
componentDidMount: function() {
class Child extends React.Component {
componentDidMount() {
_testJournal.push('Child:onDOMReady');
},
render: function() {
return <div></div>;
},
});
}
var SwitcherParent = React.createClass({
getInitialState: function() {
render() {
return <div></div>;
}
}
class SwitcherParent extends React.Component {
constructor(props) {
super(props);
_testJournal.push('SwitcherParent:getInitialState');
return {showHasOnDOMReadyComponent: false};
},
componentDidMount: function() {
this.state = {showHasOnDOMReadyComponent: false};
}
componentDidMount() {
_testJournal.push('SwitcherParent:onDOMReady');
this.switchIt();
},
switchIt: function() {
}
switchIt = () => {
this.setState({showHasOnDOMReadyComponent: true});
},
render: function() {
};
render() {
return (
<div>{
this.state.showHasOnDOMReadyComponent ?
@@ -161,8 +166,8 @@ describe('ReactComponentLifeCycle', function() {
<div> </div>
}</div>
);
},
});
}
}
var instance = <SwitcherParent />;
instance = ReactTestUtils.renderIntoDocument(instance);
@@ -176,16 +181,18 @@ describe('ReactComponentLifeCycle', function() {
// You could assign state here, but not access members of it, unless you
// had provided a getInitialState method.
it('throws when accessing state in componentWillMount', function() {
var StatefulComponent = React.createClass({
componentWillMount: function() {
class StatefulComponent extends React.Component {
componentWillMount() {
void this.state.yada;
},
render: function() {
}
render() {
return (
<div></div>
);
},
});
}
}
var instance = <StatefulComponent />;
expect(function() {
instance = ReactTestUtils.renderIntoDocument(instance);
@@ -193,16 +200,18 @@ describe('ReactComponentLifeCycle', function() {
});
it('should allow update state inside of componentWillMount', function() {
var StatefulComponent = React.createClass({
componentWillMount: function() {
class StatefulComponent extends React.Component {
componentWillMount() {
this.setState({stateField: 'something'});
},
render: function() {
}
render() {
return (
<div></div>
);
},
});
}
}
var instance = <StatefulComponent />;
expect(function() {
instance = ReactTestUtils.renderIntoDocument(instance);
@@ -211,18 +220,22 @@ describe('ReactComponentLifeCycle', function() {
it('should not allow update state inside of getInitialState', function() {
spyOn(console, 'error');
var StatefulComponent = React.createClass({
getInitialState: function() {
class StatefulComponent extends React.Component {
constructor(props, context) {
super(props, context);
this.setState({stateField: 'something'});
return {stateField: 'somethingelse'};
},
render: function() {
this.state = {stateField: 'somethingelse'};
}
render() {
return (
<div></div>
);
},
});
}
}
ReactTestUtils.renderIntoDocument(<StatefulComponent />);
expect(console.error.calls.count()).toBe(1);
expect(console.error.calls.argsFor(0)[0]).toBe(
@@ -327,8 +340,9 @@ describe('ReactComponentLifeCycle', function() {
});
it('should carry through each of the phases of setup', function() {
var LifeCycleComponent = React.createClass({
getInitialState: function() {
class LifeCycleComponent extends React.Component {
constructor(props, context) {
super(props, context);
this._testJournal = {};
var initState = {
hasWillMountCompleted: false,
@@ -339,24 +353,24 @@ describe('ReactComponentLifeCycle', function() {
this._testJournal.returnedFromGetInitialState = clone(initState);
this._testJournal.lifeCycleAtStartOfGetInitialState =
getLifeCycleState(this);
return initState;
},
this.state = initState;
}
componentWillMount: function() {
componentWillMount() {
this._testJournal.stateAtStartOfWillMount = clone(this.state);
this._testJournal.lifeCycleAtStartOfWillMount =
getLifeCycleState(this);
this.state.hasWillMountCompleted = true;
},
}
componentDidMount: function() {
componentDidMount() {
this._testJournal.stateAtStartOfDidMount = clone(this.state);
this._testJournal.lifeCycleAtStartOfDidMount =
getLifeCycleState(this);
this.setState({hasDidMountCompleted: true});
},
}
render: function() {
render() {
var isInitialRender = !this.state.hasRenderCompleted;
if (isInitialRender) {
this._testJournal.stateInInitialRender = clone(this.state);
@@ -372,15 +386,15 @@ describe('ReactComponentLifeCycle', function() {
I am the inner DIV
</div>
);
},
}
componentWillUnmount: function() {
componentWillUnmount() {
this._testJournal.stateAtStartOfWillUnmount = clone(this.state);
this._testJournal.lifeCycleAtStartOfWillUnmount =
getLifeCycleState(this);
this.state.hasWillUnmountCompleted = true;
},
});
}
}
// A component that is merely "constructed" (as in "constructor") but not
// yet initialized, or rendered.
@@ -445,25 +459,29 @@ describe('ReactComponentLifeCycle', function() {
});
it('should not throw when updating an auxiliary component', function() {
var Tooltip = React.createClass({
render: function() {
class Tooltip extends React.Component {
render() {
return <div>{this.props.children}</div>;
},
componentDidMount: function() {
}
componentDidMount() {
this.container = document.createElement('div');
this.updateTooltip();
},
componentDidUpdate: function() {
}
componentDidUpdate() {
this.updateTooltip();
},
updateTooltip: function() {
}
updateTooltip = () => {
// Even though this.props.tooltip has an owner, updating it shouldn't
// throw here because it's mounted as a root component
ReactDOM.render(this.props.tooltip, this.container);
},
});
var Component = React.createClass({
render: function() {
};
}
class Component extends React.Component {
render() {
return (
<Tooltip
ref="tooltip"
@@ -471,8 +489,8 @@ describe('ReactComponentLifeCycle', function() {
{this.props.text}
</Tooltip>
);
},
});
}
}
var container = document.createElement('div');
ReactDOM.render(
@@ -492,19 +510,20 @@ describe('ReactComponentLifeCycle', function() {
/**
* calls setState in an componentDidMount.
*/
var SetStateInComponentDidMount = React.createClass({
getInitialState: function() {
return {
stateField: this.props.valueToUseInitially,
};
},
componentDidMount: function() {
class SetStateInComponentDidMount extends React.Component {
state = {
stateField: this.props.valueToUseInitially,
};
componentDidMount() {
this.setState({stateField: this.props.valueToUseInOnDOMReady});
},
render: function() {
}
render() {
return (<div></div>);
},
});
}
}
var instance =
<SetStateInComponentDidMount
valueToUseInitially="hello"
src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponent-test.js
+344 -349
View File
File diff suppressed because it is too large Load Diff
src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponentDOMMinimalism-test.js
+8 -8
View File
@@ -34,25 +34,25 @@ describe('ReactCompositeComponentDOMMinimalism', function() {
React = require('React');
ReactTestUtils = require('ReactTestUtils');
LowerLevelComposite = React.createClass({
render: function() {
LowerLevelComposite = class extends React.Component {
render() {
return (
<div>
{this.props.children}
</div>
);
},
});
}
};
MyCompositeComponent = React.createClass({
render: function() {
MyCompositeComponent = class extends React.Component {
render() {
return (
<LowerLevelComposite>
{this.props.children}
</LowerLevelComposite>
);
},
});
}
};
expectSingleChildlessDiv = function(instance) {
reactComponentExpect(instance)
src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponentNestedState-test.js
+18 -19
View File
@@ -24,19 +24,17 @@ describe('ReactCompositeComponentNestedState-state', function() {
});
it('should provide up to date values for props', function() {
var ParentComponent = React.createClass({
getInitialState: function() {
return {color: 'blue'};
},
class ParentComponent extends React.Component {
state = {color: 'blue'};
handleColor: function(color) {
handleColor = (color) => {
this.props.logger('parent-handleColor', this.state.color);
this.setState({color: color}, function() {
this.props.logger('parent-after-setState', this.state.color);
});
},
};
render: function() {
render() {
this.props.logger('parent-render', this.state.color);
return (
<ChildComponent
@@ -45,16 +43,17 @@ describe('ReactCompositeComponentNestedState-state', function() {
onSelectColor={this.handleColor}
/>
);
},
});
}
}
var ChildComponent = React.createClass({
getInitialState: function() {
this.props.logger('getInitialState', this.props.color);
return {hue: 'dark ' + this.props.color};
},
class ChildComponent extends React.Component {
constructor(props) {
super(props);
props.logger('getInitialState', props.color);
this.state = {hue: 'dark ' + props.color};
}
handleHue: function(shade, color) {
handleHue = (shade, color) => {
this.props.logger('handleHue', this.state.hue, this.props.color);
this.props.onSelectColor(color);
this.setState(function(state, props) {
@@ -64,9 +63,9 @@ describe('ReactCompositeComponentNestedState-state', function() {
}, function() {
this.props.logger('after-setState', this.state.hue, this.props.color);
});
},
};
render: function() {
render() {
this.props.logger('render', this.state.hue, this.props.color);
return (
<div>
@@ -84,8 +83,8 @@ describe('ReactCompositeComponentNestedState-state', function() {
</button>
</div>
);
},
});
}
}
var container = document.createElement('div');
document.body.appendChild(container);
src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponentState-test.js
+15 -13
View File
@@ -218,24 +218,26 @@ describe('ReactCompositeComponent-state', function() {
it('should batch unmounts', function() {
var outer;
var Inner = React.createClass({
render: function() {
class Inner extends React.Component {
render() {
return <div />;
},
componentWillUnmount: function() {
}
componentWillUnmount() {
// This should get silently ignored (maybe with a warning), but it
// shouldn't break React.
outer.setState({showInner: false});
},
});
var Outer = React.createClass({
getInitialState: function() {
return {showInner: true};
},
render: function() {
}
}
class Outer extends React.Component {
state = {showInner: true};
render() {
return <div>{this.state.showInner && <Inner />}</div>;
},
});
}
}
var container = document.createElement('div');
outer = ReactDOM.render(<Outer />, container);
src/renderers/shared/stack/reconciler/__tests__/ReactEmptyComponent-test.js
+64 -55
View File
@@ -32,35 +32,37 @@ describe('ReactEmptyComponent', function() {
log = jasmine.createSpy();
TogglingComponent = React.createClass({
getInitialState: function() {
return {component: this.props.firstComponent};
},
componentDidMount: function() {
TogglingComponent = class extends React.Component {
state = {component: this.props.firstComponent};
componentDidMount() {
log(ReactDOM.findDOMNode(this));
this.setState({component: this.props.secondComponent});
},
componentDidUpdate: function() {
}
componentDidUpdate() {
log(ReactDOM.findDOMNode(this));
},
render: function() {
}
render() {
var Component = this.state.component;
return Component ? <Component /> : null;
},
});
}
};
});
it('should render null and false as a noscript tag under the hood', () => {
var Component1 = React.createClass({
render: function() {
class Component1 extends React.Component {
render() {
return null;
},
});
var Component2 = React.createClass({
render: function() {
}
}
class Component2 extends React.Component {
render() {
return false;
},
});
}
}
var instance1 = ReactTestUtils.renderIntoDocument(<Component1 />);
var instance2 = ReactTestUtils.renderIntoDocument(<Component2 />);
@@ -73,9 +75,10 @@ describe('ReactEmptyComponent', function() {
});
it('should still throw when rendering to undefined', () => {
var Component = React.createClass({
render: function() {},
});
class Component extends React.Component {
render() {}
}
expect(function() {
ReactTestUtils.renderIntoDocument(<Component />);
}).toThrowError(
@@ -161,17 +164,17 @@ describe('ReactEmptyComponent', function() {
it('should have findDOMNode return null when multiple layers of composite ' +
'components render to the same null placeholder',
() => {
var GrandChild = React.createClass({
render: function() {
class GrandChild extends React.Component {
render() {
return null;
},
});
}
}
var Child = React.createClass({
render: function() {
class Child extends React.Component {
render() {
return <GrandChild />;
},
});
}
}
var instance1 =
<TogglingComponent
@@ -201,28 +204,32 @@ describe('ReactEmptyComponent', function() {
it('works when switching components', function() {
var assertions = 0;
var Inner = React.createClass({
render: function() {
class Inner extends React.Component {
render() {
return <span />;
},
componentDidMount: function() {
}
componentDidMount() {
// Make sure the DOM node resolves properly even if we're replacing a
// `null` component
expect(ReactDOM.findDOMNode(this)).not.toBe(null);
assertions++;
},
componentWillUnmount: function() {
}
componentWillUnmount() {
// Even though we're getting replaced by `null`, we haven't been
// replaced yet!
expect(ReactDOM.findDOMNode(this)).not.toBe(null);
assertions++;
},
});
var Wrapper = React.createClass({
render: function() {
}
}
class Wrapper extends React.Component {
render() {
return this.props.showInner ? <Inner /> : null;
},
});
}
}
var el = document.createElement('div');
var component;
@@ -253,25 +260,27 @@ describe('ReactEmptyComponent', function() {
});
it('does not break when updating during mount', function() {
var Child = React.createClass({
class Child extends React.Component {
componentDidMount() {
if (this.props.onMount) {
this.props.onMount();
}
},
}
render() {
if (!this.props.visible) {
return null;
}
return <div>hello world</div>;
},
});
}
}
var Parent = React.createClass({
update() {
class Parent extends React.Component {
update = () => {
this.forceUpdate();
},
};
render() {
return (
<div>
@@ -280,8 +289,8 @@ describe('ReactEmptyComponent', function() {
<Child key="2" visible={false} />
</div>
);
},
});
}
}
expect(function() {
ReactTestUtils.renderIntoDocument(<Parent />);
@@ -289,11 +298,11 @@ describe('ReactEmptyComponent', function() {
});
it('preserves the dom node during updates', function() {
var Empty = React.createClass({
render: function() {
class Empty extends React.Component {
render() {
return null;
},
});
}
}
var container = document.createElement('div');
src/renderers/shared/stack/reconciler/__tests__/ReactIdentity-test.js
+43 -59
View File
@@ -48,12 +48,11 @@ describe('ReactIdentity', function() {
});
it('should use composite identity', function() {
var Wrapper = React.createClass({
render: function() {
class Wrapper extends React.Component {
render() {
return <a>{this.props.children}</a>;
},
});
}
}
var container = document.createElement('div');
var node1;
@@ -71,19 +70,16 @@ describe('ReactIdentity', function() {
});
function renderAComponentWithKeyIntoContainer(key, container) {
var Wrapper = React.createClass({
render: function() {
class Wrapper extends React.Component {
render() {
var s1 = <span ref="span1" key={key} />;
var s2 = <span ref="span2" />;
var map = {};
map[key] = s2;
return <div>{[s1, frag(map)]}</div>;
},
});
}
}
var instance = ReactDOM.render(<Wrapper />, container);
var span1 = instance.refs.span1;
@@ -135,8 +131,8 @@ describe('ReactIdentity', function() {
var instance1 = <span />;
var instance2 = <span />;
var TestComponent = React.createClass({
render: function() {
class TestComponent extends React.Component {
render() {
return (
<div>
{instance2}
@@ -144,16 +140,14 @@ describe('ReactIdentity', function() {
{this.props.children[1]}
</div>
);
},
});
}
}
var TestContainer = React.createClass({
render: function() {
class TestContainer extends React.Component {
render() {
return <TestComponent>{instance0}{instance1}</TestComponent>;
},
});
}
}
expect(function() {
@@ -167,8 +161,8 @@ describe('ReactIdentity', function() {
var instance1 = <span />;
var instance2 = <span />;
var TestComponent = React.createClass({
render: function() {
class TestComponent extends React.Component {
render() {
return (
<div>
{instance2}
@@ -176,20 +170,18 @@ describe('ReactIdentity', function() {
{this.props.children[1]}
</div>
);
},
});
}
}
var TestContainer = React.createClass({
render: function() {
class TestContainer extends React.Component {
render() {
return (
<div>
<TestComponent>{instance0}{instance1}</TestComponent>
</div>
);
},
});
}
}
expect(function() {
@@ -199,24 +191,22 @@ describe('ReactIdentity', function() {
});
it('should let text nodes retain their uniqueness', function() {
var TestComponent = React.createClass({
render: function() {
class TestComponent extends React.Component {
render() {
return <div>{this.props.children}<span /></div>;
},
});
}
}
var TestContainer = React.createClass({
render: function() {
class TestContainer extends React.Component {
render() {
return (
<TestComponent>
<div />
{'second'}
</TestComponent>
);
},
});
}
}
expect(function() {
@@ -226,33 +216,28 @@ describe('ReactIdentity', function() {
});
it('should retain key during updates in composite components', function() {
var TestComponent = React.createClass({
render: function() {
class TestComponent extends React.Component {
render() {
return <div>{this.props.children}</div>;
},
});
}
}
var TestContainer = React.createClass({
class TestContainer extends React.Component {
state = {swapped: false};
getInitialState: function() {
return {swapped: false};
},
swap: function() {
swap = () => {
this.setState({swapped: true});
},
};
render: function() {
render() {
return (
<TestComponent>
{this.state.swapped ? this.props.second : this.props.first}
{this.state.swapped ? this.props.first : this.props.second}
</TestComponent>
);
},
});
}
}
var instance0 = <span key="A" />;
var instance1 = <span key="B" />;
@@ -270,7 +255,6 @@ describe('ReactIdentity', function() {
expect(beforeA).toBe(afterA);
expect(beforeB).toBe(afterB);
});
it('should not allow implicit and explicit keys to collide', function() {
src/renderers/shared/stack/reconciler/__tests__/ReactMockedComponent-test.js
+14 -21
View File
@@ -36,21 +36,17 @@ describe('ReactMockedComponent', function() {
});
it('should allow an implicitly mocked component to be updated', () => {
var Wrapper = React.createClass({
class Wrapper extends React.Component {
state = {foo: 1};
getInitialState: function() {
return {foo: 1};
},
update: function() {
update = () => {
this.setState({foo: 2});
},
};
render: function() {
render() {
return <div><AutoMockedComponent prop={this.state.foo} /></div>;
},
});
}
}
var instance = ReactTestUtils.renderIntoDocument(<Wrapper />);
@@ -73,21 +69,18 @@ describe('ReactMockedComponent', function() {
});
it('should allow an explicitly mocked component to be updated', () => {
var Wrapper = React.createClass({
class Wrapper extends React.Component {
state = {foo: 1};
getInitialState: function() {
return {foo: 1};
},
update: function() {
update = () => {
this.setState({foo: 2});
},
};
render: function() {
render() {
return <div><MockedComponent prop={this.state.foo} /></div>;
},
}
}
});
var instance = ReactTestUtils.renderIntoDocument(<Wrapper />);
var found = ReactTestUtils.findRenderedComponentWithType(
src/renderers/shared/stack/reconciler/__tests__/ReactMultiChild-test.js
+12 -12
View File
@@ -101,11 +101,11 @@ describe('ReactMultiChild', function() {
},
});
var WrapperComponent = React.createClass({
render: function() {
class WrapperComponent extends React.Component {
render() {
return this.props.children || <MockComponent />;
},
});
}
}
expect(mockMount.mock.calls.length).toBe(0);
expect(mockUnmount.mock.calls.length).toBe(0);
@@ -157,14 +157,14 @@ describe('ReactMultiChild', function() {
var container = document.createElement('div');
var WrapperComponent = React.createClass({
render: function() {
class WrapperComponent extends React.Component {
render() {
return <div>{this.props.children}</div>;
},
});
}
}
var Parent = React.createClass({
render: function() {
class Parent extends React.Component {
render() {
return (
<div>
<WrapperComponent>
@@ -172,8 +172,8 @@ describe('ReactMultiChild', function() {
</WrapperComponent>
</div>
);
},
});
}
}
ReactDOM.render(
<Parent>{[<div key="1"/>]}</Parent>,
src/renderers/shared/stack/reconciler/__tests__/ReactMultiChildReconcile-test.js
+26 -25
View File
@@ -47,46 +47,44 @@ var getOriginalKey = function(childName) {
* existing children won't reinitialize components, when moving children -
* reusing existing DOM/memory resources.
*/
var StatusDisplay = React.createClass({
getInitialState: function() {
return {internalState: Math.random()};
},
class StatusDisplay extends React.Component {
state = {internalState: Math.random()};
getStatus: function() {
getStatus = () => {
return this.props.status;
},
};
getInternalState: function() {
getInternalState = () => {
return this.state.internalState;
},
};
componentDidMount: function() {
componentDidMount() {
this.props.onFlush();
},
}
componentDidUpdate: function() {
componentDidUpdate() {
this.props.onFlush();
},
}
render: function() {
render() {
return (
<div>
{this.state.internalState}
</div>
);
},
});
}
}
/**
* Displays friends statuses.
*/
var FriendsStatusDisplay = React.createClass({
class FriendsStatusDisplay extends React.Component {
/**
* Gets the order directly from each rendered child's `index` field.
* Refs are not maintained in the rendered order, and neither is
* `this._renderedChildren` (surprisingly).
*/
getOriginalKeys: function() {
getOriginalKeys = () => {
var originalKeys = [];
// TODO: Update this to a better test that doesn't rely so much on internal
// implementation details.
@@ -103,12 +101,13 @@ var FriendsStatusDisplay = React.createClass({
}
}
return originalKeys;
},
};
/**
* Retrieves the rendered children in a nice format for comparing to the input
* `this.props.usernameToStatus`.
*/
getStatusDisplays: function() {
getStatusDisplays = () => {
var res = {};
var i;
var originalKeys = this.getOriginalKeys();
@@ -117,7 +116,8 @@ var FriendsStatusDisplay = React.createClass({
res[key] = this.refs[key];
}
return res;
},
};
/**
* Verifies that by the time a child is flushed, the refs that appeared
* earlier have already been resolved.
@@ -125,7 +125,7 @@ var FriendsStatusDisplay = React.createClass({
* but our internal layer API depends on this assumption. We need to change
* it to be more declarative before making ref resolution indeterministic.
*/
verifyPreviousRefsResolved: function(flushedKey) {
verifyPreviousRefsResolved = (flushedKey) => {
var i;
var originalKeys = this.getOriginalKeys();
for (i = 0; i < originalKeys.length; i++) {
@@ -136,8 +136,9 @@ var FriendsStatusDisplay = React.createClass({
}
expect(this.refs[key]).toBeTruthy();
}
},
render: function() {
};
render() {
var children = [];
var key;
for (key in this.props.usernameToStatus) {
@@ -157,8 +158,8 @@ var FriendsStatusDisplay = React.createClass({
{children}
</div>
);
},
});
}
}
function getInternalStateByUserName(statusDisplays) {
src/renderers/shared/stack/reconciler/__tests__/ReactStateSetters-test.js
+5 -7
View File
@@ -22,15 +22,13 @@ describe('ReactStateSetters', function() {
beforeEach(function() {
jest.resetModuleRegistry();
TestComponent = React.createClass({
getInitialState: function() {
return {foo: 'foo'};
},
TestComponent = class extends React.Component {
state = {foo: 'foo'};
render: function() {
render() {
return <div />;
},
});
}
};
TestComponentWithMixin = React.createClass({
mixins: [ReactStateSetters.Mixin],
src/renderers/shared/stack/reconciler/__tests__/ReactStatelessComponent-test.js
+34 -29
View File
@@ -35,11 +35,11 @@ describe('ReactStatelessComponent', function() {
});
it('should update stateless component', function() {
var Parent = React.createClass({
class Parent extends React.Component {
render() {
return <StatelessComponent {...this.props} />;
},
});
}
}
var el = document.createElement('div');
ReactDOM.render(<Parent name="A" />, el);
@@ -60,33 +60,33 @@ describe('ReactStatelessComponent', function() {
});
it('should pass context thru stateless component', function() {
var Child = React.createClass({
contextTypes: {
class Child extends React.Component {
static contextTypes = {
test: React.PropTypes.string.isRequired,
},
};
render: function() {
render() {
return <div>{this.context.test}</div>;
},
});
}
}
function Parent() {
return <Child />;
}
var GrandParent = React.createClass({
childContextTypes: {
class GrandParent extends React.Component {
static childContextTypes = {
test: React.PropTypes.string.isRequired,
},
};
getChildContext() {
return {test: this.props.test};
},
}
render: function() {
render() {
return <Parent />;
},
});
}
}
var el = document.createElement('div');
ReactDOM.render(<GrandParent test="test" />, el);
@@ -149,12 +149,14 @@ describe('ReactStatelessComponent', function() {
it('should warn when given a ref', function() {
spyOn(console, 'error');
var Parent = React.createClass({
displayName: 'Parent',
render: function() {
class Parent extends React.Component {
static displayName = 'Parent';
render() {
return <StatelessComponent name="A" ref="stateless"/>;
},
});
}
}
ReactTestUtils.renderIntoDocument(<Parent/>);
expect(console.error.calls.count()).toBe(1);
@@ -206,17 +208,20 @@ describe('ReactStatelessComponent', function() {
});
it('should receive context', function() {
var Parent = React.createClass({
childContextTypes: {
class Parent extends React.Component {
static childContextTypes = {
lang: React.PropTypes.string,
},
getChildContext: function() {
};
getChildContext() {
return {lang: 'en'};
},
render: function() {
}
render() {
return <Child />;
},
});
}
}
function Child(props, context) {
return <div>{context.lang}</div>;
}
src/renderers/shared/stack/reconciler/__tests__/ReactUpdates-test.js
+294 -268
View File
@@ -26,17 +26,18 @@ describe('ReactUpdates', function() {
it('should batch state when updating state twice', function() {
var updateCount = 0;
var Component = React.createClass({
getInitialState: function() {
return {x: 0};
},
componentDidUpdate: function() {
class Component extends React.Component {
state = {x: 0};
componentDidUpdate() {
updateCount++;
},
render: function() {
}
render() {
return <div>{this.state.x}</div>;
},
});
}
}
var instance = ReactTestUtils.renderIntoDocument(<Component />);
expect(instance.state.x).toBe(0);
@@ -54,17 +55,18 @@ describe('ReactUpdates', function() {
it('should batch state when updating two different state keys', function() {
var updateCount = 0;
var Component = React.createClass({
getInitialState: function() {
return {x: 0, y: 0};
},
componentDidUpdate: function() {
class Component extends React.Component {
state = {x: 0, y: 0};
componentDidUpdate() {
updateCount++;
},
render: function() {
}
render() {
return <div>({this.state.x}, {this.state.y})</div>;
},
});
}
}
var instance = ReactTestUtils.renderIntoDocument(<Component />);
expect(instance.state.x).toBe(0);
@@ -85,17 +87,18 @@ describe('ReactUpdates', function() {
it('should batch state and props together', function() {
var updateCount = 0;
var Component = React.createClass({
getInitialState: function() {
return {y: 0};
},
componentDidUpdate: function() {
class Component extends React.Component {
state = {y: 0};
componentDidUpdate() {
updateCount++;
},
render: function() {
}
render() {
return <div>({this.props.x}, {this.state.y})</div>;
},
});
}
}
var container = document.createElement('div');
var instance = ReactDOM.render(<Component x={0} />, container);
@@ -117,29 +120,32 @@ describe('ReactUpdates', function() {
it('should batch parent/child state updates together', function() {
var parentUpdateCount = 0;
var Parent = React.createClass({
getInitialState: function() {
return {x: 0};
},
componentDidUpdate: function() {
class Parent extends React.Component {
state = {x: 0};
componentDidUpdate() {
parentUpdateCount++;
},
render: function() {
}
render() {
return <div><Child ref="child" x={this.state.x} /></div>;
},
});
}
}
var childUpdateCount = 0;
var Child = React.createClass({
getInitialState: function() {
return {y: 0};
},
componentDidUpdate: function() {
class Child extends React.Component {
state = {y: 0};
componentDidUpdate() {
childUpdateCount++;
},
render: function() {
}
render() {
return <div>{this.props.x + this.state.y}</div>;
},
});
}
}
var instance = ReactTestUtils.renderIntoDocument(<Parent />);
var child = instance.refs.child;
@@ -163,29 +169,32 @@ describe('ReactUpdates', function() {
it('should batch child/parent state updates together', function() {
var parentUpdateCount = 0;
var Parent = React.createClass({
getInitialState: function() {
return {x: 0};
},
componentDidUpdate: function() {
class Parent extends React.Component {
state = {x: 0};
componentDidUpdate() {
parentUpdateCount++;
},
render: function() {
}
render() {
return <div><Child ref="child" x={this.state.x} /></div>;
},
});
}
}
var childUpdateCount = 0;
var Child = React.createClass({
getInitialState: function() {
return {y: 0};
},
componentDidUpdate: function() {
class Child extends React.Component {
state = {y: 0};
componentDidUpdate() {
childUpdateCount++;
},
render: function() {
}
render() {
return <div>{this.props.x + this.state.y}</div>;
},
});
}
}
var instance = ReactTestUtils.renderIntoDocument(<Parent />);
var child = instance.refs.child;
@@ -211,17 +220,18 @@ describe('ReactUpdates', function() {
it('should support chained state updates', function() {
var updateCount = 0;
var Component = React.createClass({
getInitialState: function() {
return {x: 0};
},
componentDidUpdate: function() {
class Component extends React.Component {
state = {x: 0};
componentDidUpdate() {
updateCount++;
},
render: function() {
}
render() {
return <div>{this.state.x}</div>;
},
});
}
}
var instance = ReactTestUtils.renderIntoDocument(<Component />);
expect(instance.state.x).toBe(0);
@@ -250,20 +260,22 @@ describe('ReactUpdates', function() {
it('should batch forceUpdate together', function() {
var shouldUpdateCount = 0;
var updateCount = 0;
var Component = React.createClass({
getInitialState: function() {
return {x: 0};
},
shouldComponentUpdate: function() {
class Component extends React.Component {
state = {x: 0};
shouldComponentUpdate() {
shouldUpdateCount++;
},
componentDidUpdate: function() {
}
componentDidUpdate() {
updateCount++;
},
render: function() {
}
render() {
return <div>{this.state.x}</div>;
},
});
}
}
var instance = ReactTestUtils.renderIntoDocument(<Component />);
expect(instance.state.x).toBe(0);
@@ -291,23 +303,23 @@ describe('ReactUpdates', function() {
var parentRenderCount = 0;
var childRenderCount = 0;
var Parent = React.createClass({
shouldComponentUpdate: function() {
class Parent extends React.Component {
shouldComponentUpdate() {
return false;
},
}
render: function() {
render() {
parentRenderCount++;
return <Child ref="child" />;
},
});
}
}
var Child = React.createClass({
render: function() {
class Child extends React.Component {
render() {
childRenderCount++;
return <div />;
},
});
}
}
expect(parentRenderCount).toBe(0);
expect(childRenderCount).toBe(0);
@@ -337,29 +349,29 @@ describe('ReactUpdates', function() {
var numMiddleRenders = 0;
var numBottomRenders = 0;
var Top = React.createClass({
render: function() {
class Top extends React.Component {
render() {
return <Middle><Bottom /></Middle>;
},
});
}
}
var Middle = React.createClass({
componentDidMount: function() {
class Middle extends React.Component {
componentDidMount() {
this.forceUpdate();
},
}
render: function() {
render() {
numMiddleRenders++;
return React.Children.only(this.props.children);
},
});
}
}
var Bottom = React.createClass({
render: function() {
class Bottom extends React.Component {
render() {
numBottomRenders++;
return null;
},
});
}
}
ReactTestUtils.renderIntoDocument(<Top />);
expect(numMiddleRenders).toBe(2);
@@ -497,11 +509,11 @@ describe('ReactUpdates', function() {
var ReconcileTransaction = ReactUpdates.ReactReconcileTransaction;
spyOn(ReconcileTransaction, 'getPooled').and.callThrough();
var Component = React.createClass({
render: function() {
class Component extends React.Component {
render() {
return <div>{this.props.text}</div>;
},
});
}
}
var containerA = document.createElement('div');
var containerB = document.createElement('div');
@@ -532,27 +544,26 @@ describe('ReactUpdates', function() {
var aUpdated = false;
var A = React.createClass({
getInitialState: function() {
return {x: 0};
},
componentDidUpdate: function() {
class A extends React.Component {
state = {x: 0};
componentDidUpdate() {
expect(ReactDOM.findDOMNode(b).textContent).toBe('B1');
aUpdated = true;
},
render: function() {
return <div>A{this.state.x}</div>;
},
});
}
var B = React.createClass({
getInitialState: function() {
return {x: 0};
},
render: function() {
render() {
return <div>A{this.state.x}</div>;
}
}
class B extends React.Component {
state = {x: 0};
render() {
return <div>B{this.state.x}</div>;
},
});
}
}
a = ReactTestUtils.renderIntoDocument(<A />);
b = ReactTestUtils.renderIntoDocument(<B />);
@@ -567,35 +578,37 @@ describe('ReactUpdates', function() {
it('should flush updates in the correct order', function() {
var updates = [];
var Outer = React.createClass({
getInitialState: function() {
return {x: 0};
},
render: function() {
class Outer extends React.Component {
state = {x: 0};
render() {
updates.push('Outer-render-' + this.state.x);
return <div><Inner x={this.state.x} ref="inner" /></div>;
},
componentDidUpdate: function() {
}
componentDidUpdate() {
var x = this.state.x;
updates.push('Outer-didUpdate-' + x);
updates.push('Inner-setState-' + x);
this.refs.inner.setState({x: x}, function() {
updates.push('Inner-callback-' + x);
});
},
});
var Inner = React.createClass({
getInitialState: function() {
return {x: 0};
},
render: function() {
}
}
class Inner extends React.Component {
state = {x: 0};
render() {
updates.push('Inner-render-' + this.props.x + '-' + this.state.x);
return <div />;
},
componentDidUpdate: function() {
}
componentDidUpdate() {
updates.push('Inner-didUpdate-' + this.props.x + '-' + this.state.x);
},
});
}
}
var instance = ReactTestUtils.renderIntoDocument(<Outer />);
@@ -642,12 +655,13 @@ describe('ReactUpdates', function() {
var instances = [];
var updates = [];
var MockComponent = React.createClass({
render: function() {
class MockComponent extends React.Component {
render() {
updates.push(this.props.depth);
return <div />;
},
componentDidMount: function() {
}
componentDidMount() {
instances.push(this);
if (this.props.depth < this.props.count) {
ReactDOM.render(
@@ -658,8 +672,8 @@ describe('ReactUpdates', function() {
ReactDOM.findDOMNode(this)
);
}
},
});
}
}
ReactTestUtils.renderIntoDocument(<MockComponent depth={0} count={2} />);
@@ -678,11 +692,10 @@ describe('ReactUpdates', function() {
it('should queue nested updates', function() {
// See https://github.com/facebook/react/issues/1147
var X = React.createClass({
getInitialState: function() {
return {s: 0};
},
render: function() {
class X extends React.Component {
state = {s: 0};
render() {
if (this.state.s === 0) {
return (
<div>
@@ -692,32 +705,34 @@ describe('ReactUpdates', function() {
} else {
return <div>1</div>;
}
},
go: function() {
}
go = () => {
this.setState({s: 1});
this.setState({s: 0});
this.setState({s: 1});
},
});
};
}
var Y = React.createClass({
render: function() {
class Y extends React.Component {
render() {
return (
<div>
<Z />
</div>
);
},
});
}
}
var Z = React.createClass({
render: function() {
class Z extends React.Component {
render() {
return <div />;
},
componentWillUpdate: function() {
}
componentWillUpdate() {
x.go();
},
});
}
}
var x;
var y;
@@ -734,26 +749,27 @@ describe('ReactUpdates', function() {
// See https://github.com/facebook/react/issues/1353
var a;
var A = React.createClass({
getInitialState: function() {
return {x: 0};
},
componentWillMount: function() {
a = this;
},
render: function() {
return <div>A{this.state.x}</div>;
},
});
class A extends React.Component {
state = {x: 0};
var B = React.createClass({
componentWillMount: function() {
componentWillMount() {
a = this;
}
render() {
return <div>A{this.state.x}</div>;
}
}
class B extends React.Component {
componentWillMount() {
a.setState({x: 1});
},
render: function() {
}
render() {
return <div />;
},
});
}
}
ReactUpdates.batchedUpdates(function() {
ReactTestUtils.renderIntoDocument(
@@ -770,22 +786,23 @@ describe('ReactUpdates', function() {
it('calls componentWillReceiveProps setState callback properly', function() {
var callbackCount = 0;
var A = React.createClass({
getInitialState: function() {
return {x: this.props.x};
},
componentWillReceiveProps: function(nextProps) {
class A extends React.Component {
state = {x: this.props.x};
componentWillReceiveProps(nextProps) {
var newX = nextProps.x;
this.setState({x: newX}, function() {
// State should have updated by the time this callback gets called
expect(this.state.x).toBe(newX);
callbackCount++;
});
},
render: function() {
}
render() {
return <div>{this.state.x}</div>;
},
});
}
}
var container = document.createElement('div');
ReactDOM.render(<A x={1} />, container);
@@ -795,11 +812,13 @@ describe('ReactUpdates', function() {
it('calls asap callbacks properly', function() {
var callbackCount = 0;
var A = React.createClass({
render: function() {
class A extends React.Component {
render() {
return <div />;
},
componentDidUpdate: function() {
}
componentDidUpdate() {
ReactUpdates.asap(function() {
expect(this).toBe(component);
callbackCount++;
@@ -809,8 +828,8 @@ describe('ReactUpdates', function() {
expect(callbackCount).toBe(1);
}, component);
expect(callbackCount).toBe(0);
},
});
}
}
var component = ReactTestUtils.renderIntoDocument(<A />);
component.forceUpdate();
@@ -819,13 +838,16 @@ describe('ReactUpdates', function() {
it('calls asap callbacks with queued updates', function() {
var log = [];
var A = React.createClass({
getInitialState: () => ({updates: 0}),
render: function() {
class A extends React.Component {
state = {updates: 0};
render() {
log.push('render-' + this.state.updates);
return <div />;
},
componentDidUpdate: function() {
}
componentDidUpdate() {
if (this.state.updates === 1) {
ReactUpdates.asap(function() {
this.setState({updates: 2}, function() {
@@ -842,8 +864,8 @@ describe('ReactUpdates', function() {
});
}
log.push('didUpdate-' + this.state.updates);
},
});
}
}
var component = ReactTestUtils.renderIntoDocument(<A />);
component.setState({updates: 1});
@@ -866,31 +888,29 @@ describe('ReactUpdates', function() {
});
it('does not call render after a component as been deleted', function() {
var renderCount = 0;
var componentB = null;
var B = React.createClass({
getInitialState: function() {
return {updates: 0};
},
componentDidMount: function() {
class B extends React.Component {
state = {updates: 0};
componentDidMount() {
componentB = this;
},
render: function() {
}
render() {
renderCount++;
return <div />;
},
});
}
}
var A = React.createClass({
getInitialState: function() {
return {showB: true};
},
render: function() {
class A extends React.Component {
state = {showB: true};
render() {
return this.state.showB ? <B /> : <div />;
},
});
}
}
var component = ReactTestUtils.renderIntoDocument(<A />);
@@ -907,17 +927,17 @@ describe('ReactUpdates', function() {
it('marks top-level updates', function() {
var ReactFeatureFlags = require('ReactFeatureFlags');
var Foo = React.createClass({
render: function() {
class Foo extends React.Component {
render() {
return <Bar />;
},
});
}
}
var Bar = React.createClass({
render: function() {
class Bar extends React.Component {
render() {
return <div />;
},
});
}
}
var container = document.createElement('div');
ReactDOM.render(<Foo />, container);
@@ -943,14 +963,15 @@ describe('ReactUpdates', function() {
this.a = 1;
this.b = 2;
}
var A = React.createClass({
getInitialState: function() {
return {};
},
render: function() {
class A extends React.Component {
state = {};
render() {
return <div />;
},
});
}
}
var component = ReactTestUtils.renderIntoDocument(<A />);
expect(() => component.setState({}, 'no')).toThrowError(
@@ -1001,14 +1022,15 @@ describe('ReactUpdates', function() {
this.a = 1;
this.b = 2;
}
var A = React.createClass({
getInitialState: function() {
return {};
},
render: function() {
class A extends React.Component {
state = {};
render() {
return <div />;
},
});
}
}
var component = ReactTestUtils.renderIntoDocument(<A />);
expect(() => component.forceUpdate('no')).toThrowError(
@@ -1026,42 +1048,46 @@ describe('ReactUpdates', function() {
});
it('does not update one component twice in a batch (#2410)', function() {
var Parent = React.createClass({
getChild: function() {
class Parent extends React.Component {
getChild = () => {
return this.refs.child;
},
render: function() {
};
render() {
return <Child ref="child" />;
},
});
}
}
var renderCount = 0;
var postRenderCount = 0;
var once = false;
var Child = React.createClass({
getInitialState: function() {
return {updated: false};
},
componentWillUpdate: function() {
class Child extends React.Component {
state = {updated: false};
componentWillUpdate() {
if (!once) {
once = true;
this.setState({updated: true});
}
},
componentDidMount: function() {
}
componentDidMount() {
expect(renderCount).toBe(postRenderCount + 1);
postRenderCount++;
},
componentDidUpdate: function() {
}
componentDidUpdate() {
expect(renderCount).toBe(postRenderCount + 1);
postRenderCount++;
},
render: function() {
}
render() {
expect(renderCount).toBe(postRenderCount);
renderCount++;
return <div />;
},
});
}
}
var parent = ReactTestUtils.renderIntoDocument(<Parent />);
var child = parent.getChild();
src/renderers/shared/stack/reconciler/__tests__/refs-destruction-test.js
+27 -21
View File
@@ -25,8 +25,8 @@ describe('refs-destruction', function() {
ReactDOM = require('ReactDOM');
ReactTestUtils = require('ReactTestUtils');
TestComponent = React.createClass({
render: function() {
TestComponent = class extends React.Component {
render() {
return (
<div>
{this.props.destroy ? null :
@@ -36,8 +36,8 @@ describe('refs-destruction', function() {
}
</div>
);
},
});
}
};
});
it('should remove refs when destroying the parent', function() {
@@ -61,16 +61,18 @@ describe('refs-destruction', function() {
});
it('should not error when destroying child with ref asynchronously', function() {
var Modal = React.createClass({
componentDidMount: function() {
class Modal extends React.Component {
componentDidMount() {
this.div = document.createElement('div');
document.body.appendChild(this.div);
this.componentDidUpdate();
},
componentDidUpdate: function() {
}
componentDidUpdate() {
ReactDOM.render(<div>{this.props.children}</div>, this.div);
},
componentWillUnmount: function() {
}
componentWillUnmount() {
var self = this;
// some async animation
setTimeout(function() {
@@ -79,23 +81,27 @@ describe('refs-destruction', function() {
}).not.toThrow();
document.body.removeChild(self.div);
}, 0);
},
}
render() {
return null;
},
});
var AppModal = React.createClass({
render: function() {
}
}
class AppModal extends React.Component {
render() {
return (<Modal>
<a ref="ref"/>
</Modal>);
},
});
var App = React.createClass({
render: function() {
}
}
class App extends React.Component {
render() {
return this.props.hidden ? null : <AppModal onClose={this.close}/>;
},
});
}
}
var container = document.createElement('div');
ReactDOM.render(<App />, container);
ReactDOM.render(<App hidden={true}/>, container);
src/renderers/shared/stack/reconciler/__tests__/refs-test.js
+46 -40
View File
@@ -21,17 +21,18 @@ var reactComponentExpect = require('reactComponentExpect');
* Counts clicks and has a renders an item for each click. Each item rendered
* has a ref of the form "clickLogN".
*/
var ClickCounter = React.createClass({
getInitialState: function() {
return {count: this.props.initialCount};
},
triggerReset: function() {
class ClickCounter extends React.Component {
state = {count: this.props.initialCount};
triggerReset = () => {
this.setState({count: this.props.initialCount});
},
handleClick: function() {
};
handleClick = () => {
this.setState({count: this.state.count + 1});
},
render: function() {
};
render() {
var children = [];
var i;
for (i = 0; i < this.state.count; i++) {
@@ -48,29 +49,30 @@ var ClickCounter = React.createClass({
{children}
</span>
);
},
});
}
}
/**
* Only purpose is to test that refs are tracked even when applied to a
* component that is injected down several layers. Ref systems are difficult to
* build in such a way that ownership is maintained in an airtight manner.
*/
var GeneralContainerComponent = React.createClass({
render: function() {
class GeneralContainerComponent extends React.Component {
render() {
return <div>{this.props.children}</div>;
},
});
}
}
/**
* Notice how refs ownership is maintained even when injecting a component
* into a different parent.
*/
var TestRefsComponent = React.createClass({
doReset: function() {
class TestRefsComponent extends React.Component {
doReset = () => {
this.refs.myCounter.triggerReset();
},
render: function() {
};
render() {
return (
<div>
<div ref="resetDiv" onClick={this.doReset}>
@@ -81,8 +83,8 @@ var TestRefsComponent = React.createClass({
</GeneralContainerComponent>
</div>
);
},
});
}
}
/**
* Render a TestRefsComponent and ensure that the main refs are wired up.
@@ -161,14 +163,14 @@ describe('ref swapping', function() {
jest.resetModuleRegistry();
});
var RefHopsAround = React.createClass({
getInitialState: function() {
return {count: 0};
},
moveRef: function() {
class RefHopsAround extends React.Component {
state = {count: 0};
moveRef = () => {
this.setState({count: this.state.count + 1});
},
render: function() {
};
render() {
var count = this.state.count;
/**
* What we have here, is three divs with refs (div1/2/3), but a single
@@ -192,8 +194,8 @@ describe('ref swapping', function() {
/>
</div>
);
},
});
}
}
it('Allow refs to hop around children correctly', function() {
var refHopsAround = ReactTestUtils.renderIntoDocument(<RefHopsAround />);
@@ -231,11 +233,11 @@ describe('ref swapping', function() {
it('always has a value for this.refs', function() {
var Component = React.createClass({
render: function() {
class Component extends React.Component {
render() {
return <div />;
},
});
}
}
var instance = ReactTestUtils.renderIntoDocument(<Component />);
expect(!!instance.refs).toBe(true);
@@ -246,17 +248,21 @@ describe('ref swapping', function() {
function Inner(props) {
return <a ref={props.saveA} />;
}
var Outer = React.createClass({
saveA() {
class Outer extends React.Component {
saveA = () => {
refCalled++;
},
};
componentDidMount() {
this.setState({});
},
}
render() {
return <Inner saveA={this.saveA} />;
},
});
}
}
ReactTestUtils.renderIntoDocument(<Outer />);
expect(refCalled).toBe(1);
}
src/renderers/testing/__tests__/ReactTestRenderer-test.js
+10 -9
View File
@@ -46,11 +46,11 @@ describe('ReactTestRenderer', function() {
it('renders some basics with an update', function() {
var renders = 0;
var Component = React.createClass({
getInitialState: function() {
return {x: 3};
},
render: function() {
class Component extends React.Component {
state = {x: 3};
render() {
renders++;
return (
<div className="purple">
@@ -59,11 +59,12 @@ describe('ReactTestRenderer', function() {
<Null />
</div>
);
},
componentDidMount: function() {
}
componentDidMount() {
this.setState({x: 7});
},
});
}
}
var Child = () => (renders++, <moo />);
var Null = () => (renders++, null);
src/shared/utils/__tests__/traverseAllChildren-test.js
+3 -3
View File
@@ -542,13 +542,13 @@ describe('traverseAllChildren', function() {
it('should warn for using maps as children with owner info', function() {
spyOn(console, 'error');
var Parent = React.createClass({
class Parent extends React.Component {
render() {
return (
<div>{new Map([['foo', 0], ['bar', 1]])}</div>
);
},
});
}
}
ReactTestUtils.renderIntoDocument(<Parent />);
src/test/__tests__/ReactTestUtils-test.js
+110 -100
View File
@@ -26,16 +26,16 @@ describe('ReactTestUtils', function() {
});
it('should have shallow rendering', function() {
var SomeComponent = React.createClass({
render: function() {
class SomeComponent extends React.Component {
render() {
return (
<div>
<span className="child1" />
<span className="child2" />
</div>
);
},
});
}
}
var shallowRenderer = ReactTestUtils.createRenderer();
var result = shallowRenderer.render(<SomeComponent />);
@@ -68,11 +68,11 @@ describe('ReactTestUtils', function() {
});
it('should throw for invalid elements', function() {
var SomeComponent = React.createClass({
render: function() {
class SomeComponent extends React.Component {
render() {
return <div />;
},
});
}
}
var shallowRenderer = ReactTestUtils.createRenderer();
expect(() => shallowRenderer.render(SomeComponent)).toThrowError(
@@ -106,11 +106,11 @@ describe('ReactTestUtils', function() {
});
it('can shallow render to null', function() {
var SomeComponent = React.createClass({
render: function() {
class SomeComponent extends React.Component {
render() {
return null;
},
});
}
}
var shallowRenderer = ReactTestUtils.createRenderer();
var result = shallowRenderer.render(<SomeComponent />);
@@ -119,11 +119,11 @@ describe('ReactTestUtils', function() {
});
it('can shallow render with a ref', function() {
var SomeComponent = React.createClass({
render: function() {
class SomeComponent extends React.Component {
render() {
return <div ref="hello" />;
},
});
}
}
var shallowRenderer = ReactTestUtils.createRenderer();
// Shouldn't crash.
@@ -131,16 +131,14 @@ describe('ReactTestUtils', function() {
});
it('lets you update shallowly rendered components', function() {
var SomeComponent = React.createClass({
getInitialState: function() {
return {clicked: false};
},
class SomeComponent extends React.Component {
state = {clicked: false};
onClick: function() {
onClick = () => {
this.setState({clicked: true});
},
};
render: function() {
render() {
var className = this.state.clicked ? 'was-clicked' : '';
if (this.props.aNew === 'prop') {
@@ -160,8 +158,8 @@ describe('ReactTestUtils', function() {
</div>
);
}
},
});
}
}
var shallowRenderer = ReactTestUtils.createRenderer();
var result = shallowRenderer.render(<SomeComponent />);
@@ -183,14 +181,15 @@ describe('ReactTestUtils', function() {
});
it('can access the mounted component instance', function() {
var SimpleComponent = React.createClass({
someMethod: function() {
class SimpleComponent extends React.Component {
someMethod = () => {
return this.props.n;
},
render: function() {
};
render() {
return <div>{this.props.n}</div>;
},
});
}
}
var shallowRenderer = ReactTestUtils.createRenderer();
shallowRenderer.render(<SimpleComponent n={5} />);
@@ -198,14 +197,15 @@ describe('ReactTestUtils', function() {
});
it('can shallowly render components with contextTypes', function() {
var SimpleComponent = React.createClass({
contextTypes: {
class SimpleComponent extends React.Component {
static contextTypes = {
name: React.PropTypes.string,
},
render: function() {
};
render() {
return <div />;
},
});
}
}
var shallowRenderer = ReactTestUtils.createRenderer();
var result = shallowRenderer.render(<SimpleComponent />);
@@ -213,14 +213,14 @@ describe('ReactTestUtils', function() {
});
it('can shallowly render components with ref as function', function() {
var SimpleComponent = React.createClass({
getInitialState: function() {
return {clicked: false};
},
handleUserClick: function() {
class SimpleComponent extends React.Component {
state = {clicked: false};
handleUserClick = () => {
this.setState({ clicked: true });
},
render: function() {
};
render() {
return (
<div
ref={() => {}}
@@ -228,8 +228,8 @@ describe('ReactTestUtils', function() {
className={this.state.clicked ? 'clicked' : ''}
/>
);
},
});
}
}
var shallowRenderer = ReactTestUtils.createRenderer();
shallowRenderer.render(<SimpleComponent />);
@@ -244,14 +244,15 @@ describe('ReactTestUtils', function() {
});
it('can setState in componentWillMount when shallow rendering', function() {
var SimpleComponent = React.createClass({
class SimpleComponent extends React.Component {
componentWillMount() {
this.setState({groovy: 'doovy'});
},
}
render() {
return <div>{this.state.groovy}</div>;
},
});
}
}
var shallowRenderer = ReactTestUtils.createRenderer();
var result = shallowRenderer.render(<SimpleComponent />);
@@ -259,14 +260,15 @@ describe('ReactTestUtils', function() {
});
it('can pass context when shallowly rendering', function() {
var SimpleComponent = React.createClass({
contextTypes: {
class SimpleComponent extends React.Component {
static contextTypes = {
name: React.PropTypes.string,
},
render: function() {
};
render() {
return <div>{this.context.name}</div>;
},
});
}
}
var shallowRenderer = ReactTestUtils.createRenderer();
var result = shallowRenderer.render(<SimpleComponent />, {
@@ -277,14 +279,16 @@ describe('ReactTestUtils', function() {
it('can fail context when shallowly rendering', function() {
spyOn(console, 'error');
var SimpleComponent = React.createClass({
contextTypes: {
class SimpleComponent extends React.Component {
static contextTypes = {
name: React.PropTypes.string.isRequired,
},
render: function() {
};
render() {
return <div>{this.context.name}</div>;
},
});
}
}
var shallowRenderer = ReactTestUtils.createRenderer();
shallowRenderer.render(<SimpleComponent />);
@@ -299,11 +303,12 @@ describe('ReactTestUtils', function() {
});
it('can scryRenderedDOMComponentsWithClass with TextComponent', function() {
var Wrapper = React.createClass({
render: function() {
class Wrapper extends React.Component {
render() {
return <div>Hello <span>Jim</span></div>;
},
});
}
}
var renderedComponent = ReactTestUtils.renderIntoDocument(<Wrapper />);
var scryResults = ReactTestUtils.scryRenderedDOMComponentsWithClass(
renderedComponent,
@@ -313,11 +318,12 @@ describe('ReactTestUtils', function() {
});
it('can scryRenderedDOMComponentsWithClass with className contains \\n', function() {
var Wrapper = React.createClass({
render: function() {
class Wrapper extends React.Component {
render() {
return <div>Hello <span className={'x\ny'}>Jim</span></div>;
},
});
}
}
var renderedComponent = ReactTestUtils.renderIntoDocument(<Wrapper />);
var scryResults = ReactTestUtils.scryRenderedDOMComponentsWithClass(
renderedComponent,
@@ -327,11 +333,12 @@ describe('ReactTestUtils', function() {
});
it('can scryRenderedDOMComponentsWithClass with multiple classes', function() {
var Wrapper = React.createClass({
render: function() {
class Wrapper extends React.Component {
render() {
return <div>Hello <span className={'x y z'}>Jim</span></div>;
},
});
}
}
var renderedComponent = ReactTestUtils.renderIntoDocument(<Wrapper />);
var scryResults1 = ReactTestUtils.scryRenderedDOMComponentsWithClass(
renderedComponent,
@@ -368,11 +375,11 @@ describe('ReactTestUtils', function() {
});
it('traverses children in the correct order', function() {
var Wrapper = React.createClass({
render: function() {
class Wrapper extends React.Component {
render() {
return <div>{this.props.children}</div>;
},
});
}
}
var container = document.createElement('div');
ReactDOM.render(
@@ -425,8 +432,8 @@ describe('ReactTestUtils', function() {
// Full-page components (html, head, body) can't be rendered into a div
// directly...
var Root = React.createClass({
render: function() {
class Root extends React.Component {
render() {
return (
<html ref="html">
<head ref="head">
@@ -437,8 +444,8 @@ describe('ReactTestUtils', function() {
</body>
</html>
);
},
});
}
}
var markup = ReactDOMServer.renderToString(<Root />);
var testDocument = getTestDocument(markup);
@@ -470,15 +477,15 @@ describe('ReactTestUtils', function() {
});
it('should change the value of an input field in a component', function() {
var SomeComponent = React.createClass({
render: function() {
class SomeComponent extends React.Component {
render() {
return (
<div>
<input type="text" ref="input" onChange={this.props.handleChange} />
</div>
);
},
});
}
}
var obj = {
handler: function(e) {
@@ -497,15 +504,16 @@ describe('ReactTestUtils', function() {
});
it('should throw when attempting to use ReactTestUtils.Simulate with shallow rendering', function() {
var SomeComponent = React.createClass({
render: function() {
class SomeComponent extends React.Component {
render() {
return (
<div onClick={this.props.handleClick}>
hello, world.
</div>
);
},
});
}
}
var handler = jasmine.createSpy('spy');
var shallowRenderer = ReactTestUtils.createRenderer();
var result = shallowRenderer.render(<SomeComponent handleClick={handler} />);
@@ -522,14 +530,15 @@ describe('ReactTestUtils', function() {
var CLIENT_X = 100;
var Component = React.createClass({
handleClick: function(e) {
class Component extends React.Component {
handleClick = (e) => {
expect(e.clientX).toBe(CLIENT_X);
},
render: function() {
};
render() {
return <div onClick={this.handleClick} />;
},
});
}
}
var element = document.createElement('div');
var instance = ReactDOM.render(<Component />, element);
@@ -542,16 +551,17 @@ describe('ReactTestUtils', function() {
it('can scry with stateless components involved', function() {
var Stateless = () => <div><hr /></div>;
var SomeComponent = React.createClass({
render: function() {
class SomeComponent extends React.Component {
render() {
return (
<div>
<Stateless />
<hr />
</div>
);
},
});
}
}
var inst = ReactTestUtils.renderIntoDocument(<SomeComponent />);
var hrs = ReactTestUtils.scryRenderedDOMComponentsWithTag(inst, 'hr');
src/test/__tests__/reactComponentExpect-test.js
+4 -4
View File
@@ -24,16 +24,16 @@ describe('reactComponentExpect', function() {
});
it('should detect text components', function() {
var SomeComponent = React.createClass({
render: function() {
class SomeComponent extends React.Component {
render() {
return (
<div>
<div>This is a div</div>
{'This is text'}
</div>
);
},
});
}
}
var component = ReactTestUtils.renderIntoDocument(<SomeComponent />);