Merge pull request #7321 from keyanzhang/codemod-es6-component

Codemod tests from createClass to ES2015 classes
facebook · Jul 23, 2016 · 484f96b · 484f96b
2 parents 08a0895 + 4d8a5bc
commit 484f96b
Show file tree

Hide file tree

Showing 44 changed files with 2,045 additions and 1,881 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "babel-eslint": "^5.0.0",
     "babel-plugin-check-es2015-constants": "^6.5.0",
     "babel-plugin-syntax-trailing-function-commas": "^6.5.0",
-    "babel-plugin-transform-class-properties": "^6.10.2",
+    "babel-plugin-transform-class-properties": "^6.11.5",
     "babel-plugin-transform-es2015-arrow-functions": "^6.5.2",
     "babel-plugin-transform-es2015-block-scoped-functions": "^6.5.0",
     "babel-plugin-transform-es2015-block-scoping": "^6.5.0",

diff --git a/src/addons/__tests__/renderSubtreeIntoContainer-test.js b/src/addons/__tests__/renderSubtreeIntoContainer-test.js
@@ -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,86 +60,84 @@ 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() {
     var container = document.createElement('div');
     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');

diff --git a/src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js b/src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js
@@ -271,17 +271,17 @@ 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"
             transitionEnterTimeout={500}>
             {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);