e2e: Reduce complexity of e2e and improve Jest coverage (#1484)

Author: Timer

packages/react-scripts/fixtures/kitchensink/.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["latest"]
+  "presets": ["react-app"]
 }

packages/react-scripts/fixtures/kitchensink/.template.dependencies.json

@@ -1,6 +1,5 @@
 {
   "dependencies": {
-    "babel-preset-latest": "6.16.0",
     "babel-register": "6.22.0",
     "babel-polyfill": "6.20.0",
     "chai": "3.5.0",

packages/react-scripts/fixtures/kitchensink/src/App.js

@@ -1,28 +1,40 @@
-import React from 'react';
+import React, { Component, PropTypes, createElement } from 'react';
 
-class BuiltEmitter extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.callWhenDone = done => done();
+class BuiltEmitter extends Component {
+  static propTypes = {
+    feature: PropTypes.func.isRequired
   }
 
   componentDidMount() {
-    this.callWhenDone(() => document.dispatchEvent(new Event('ReactFeatureDidMount')));
+    const { feature } = this.props
+
+    // Class components must call this.props.onReady when they're ready for the test.
+    // We will assume functional components are ready immediately after mounting.
+    if (!Component.isPrototypeOf(feature)) {
+      this.handleReady();
+    }
   }
 
-  render() {
-    const feature = React.cloneElement(React.Children.only(this.props.children), {
-      setCallWhenDone: done => {
-        this.callWhenDone = done;
-      }
-    });
+  handleReady() {
+    document.dispatchEvent(new Event('ReactFeatureDidMount'));
+  }
 
-    return <div>{feature}</div>;
+  render() {
+    const {
+      props: { feature },
+      handleReady
+    } = this;
+    return (
+      <div>
+        {createElement(feature, {
+          onReady: handleReady
+        })}
+      </div>
+    );
   }
 }
 
-class App extends React.Component {
+class App extends Component {
   constructor(props) {
     super(props);
 
@@ -105,9 +117,7 @@ class App extends React.Component {
       case 'unknown-ext-inclusion':
         require.ensure([], () => this.setFeature(require('./features/webpack/UnknownExtInclusion').default));
         break;
-      default:
-        this.setFeature(null);
-        break;
+      default: throw new Error('Unknown feature!');
     }
   }
 
@@ -116,8 +126,11 @@ class App extends React.Component {
   }
 
   render() {
-    const Feature = this.state.feature;
-    return Feature ? <BuiltEmitter><Feature /></BuiltEmitter> : null;
+    const { feature } = this.state;
+    if (feature !== null) {
+      return <BuiltEmitter feature={feature} />;
+    }
+    return null;
   }
 }
 

packages/react-scripts/fixtures/kitchensink/src/App.test.js

@@ -1,21 +1,23 @@
-import React from 'react'
+import React, { Component, PropTypes } from 'react'
 import load from 'absoluteLoad'
 
-export default class extends React.Component {
+export default class extends Component {
+  static propTypes = {
+    onReady: PropTypes.func.isRequired
+  }
+
   constructor(props) {
     super(props);
-
-    this.done = () => {};
-    this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
-      this.done = done;
-    });
-
     this.state = { users: [] };
   }
 
   async componentDidMount() {
     const users = load();
-    this.setState({ users }, () => this.done());
+    this.setState({ users });
+  }
+
+  componentDidUpdate() {
+    this.props.onReady();
   }
 
   render() {

packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js

@@ -5,6 +5,8 @@ import NodePath from './NodePath';
 describe('NODE_PATH', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<NodePath />, div);
+    return new Promise(resolve => {
+      ReactDOM.render(<NodePath onReady={resolve} />, div);
+    });
   });
 });

packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.test.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component, PropTypes } from 'react'
 
 function load() {
   return [
@@ -9,21 +9,23 @@ function load() {
   ];
 }
 
-export default class extends React.Component {
+export default class extends Component {
+  static propTypes = {
+    onReady: PropTypes.func.isRequired
+  }
+
   constructor(props) {
     super(props);
-
-    this.done = () => {};
-    this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
-      this.done = done;
-    });
-
     this.state = { users: [] };
   }
 
   async componentDidMount() {
     const users = load();
-    this.setState({ users }, () => this.done());
+    this.setState({ users });
+  }
+
+  componentDidUpdate() {
+    this.props.onReady();
   }
 
   render() {

packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js

@@ -5,6 +5,8 @@ import ArrayDestructuring from './ArrayDestructuring';
 describe('array destructuring', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<ArrayDestructuring />, div);
+    return new Promise(resolve => {
+      ReactDOM.render(<ArrayDestructuring onReady={resolve} />, div);
+    });
   });
 });

packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.test.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component, PropTypes } from 'react'
 
 function load(users) {
   return [
@@ -9,21 +9,23 @@ function load(users) {
   ];
 }
 
-export default class extends React.Component {
+export default class extends Component {
+  static propTypes = {
+    onReady: PropTypes.func.isRequired
+  }
+
   constructor(props) {
     super(props);
-
-    this.done = () => {};
-    this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
-      this.done = done;
-    });
-
     this.state = { users: [] };
   }
 
   async componentDidMount() {
     const users = load([{ id: 42, name: '42' }]);
-    this.setState({ users }, () => this.done());
+    this.setState({ users });
+  }
+
+  componentDidUpdate() {
+    this.props.onReady();
   }
 
   render() {

packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js

@@ -5,6 +5,8 @@ import ArraySpread from './ArraySpread';
 describe('array spread', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<ArraySpread />, div);
+    return new Promise(resolve => {
+      ReactDOM.render(<ArraySpread onReady={resolve} />, div);
+    });
   });
 });

packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.test.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component, PropTypes } from 'react'
 
 async function load() {
   return [
@@ -9,21 +9,23 @@ async function load() {
   ];
 }
 
-export default class extends React.Component {
+export default class extends Component {
+  static propTypes = {
+    onReady: PropTypes.func.isRequired
+  }
+
   constructor(props) {
     super(props);
-
-    this.done = () => {};
-    this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
-      this.done = done;
-    });
-
     this.state = { users: [] };
   }
 
   async componentDidMount() {
     const users = await load();
-    this.setState({ users }, () => this.done());
+    this.setState({ users });
+  }
+
+  componentDidUpdate() {
+    this.props.onReady();
   }
 
   render() {

packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js

@@ -5,6 +5,8 @@ import AsyncAwait from './AsyncAwait';
 describe('async/await', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<AsyncAwait />, div);
+    return new Promise(resolve => {
+      ReactDOM.render(<AsyncAwait onReady={resolve} />, div);
+    });
   });
 });

packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.test.js

@@ -1,13 +1,21 @@
-import React from 'react'
+import React, { Component, PropTypes } from 'react'
+
+export default class extends Component {
+  static propTypes = {
+    onReady: PropTypes.func.isRequired
+  }
 
-export default class extends React.Component {
   users = [
     { id: 1, name: '1' },
     { id: 2, name: '2' },
     { id: 3, name: '3' },
     { id: 4, name: '4' }
   ];
 
+  componentDidMount() {
+    this.props.onReady()
+  }
+
   render() {
     return (
       <div id="feature-class-properties">

packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js

@@ -5,6 +5,8 @@ import ClassProperties from './ClassProperties';
 describe('class properties', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<ClassProperties />, div);
+    return new Promise(resolve => {
+      ReactDOM.render(<ClassProperties onReady={resolve} />, div);
+    });
   });
 });

packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.test.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component, PropTypes } from 'react'
 
 function load(prefix) {
   return [
@@ -9,21 +9,23 @@ function load(prefix) {
   ];
 }
 
-export default class extends React.Component {
+export default class extends Component {
+  static propTypes = {
+    onReady: PropTypes.func.isRequired
+  }
+
   constructor(props) {
     super(props);
-
-    this.done = () => {};
-    this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
-      this.done = done;
-    });
-
     this.state = { users: [] };
   }
 
   async componentDidMount() {
     const users = load('user_');
-    this.setState({ users }, () => this.done());
+    this.setState({ users });
+  }
+
+  componentDidUpdate() {
+    this.props.onReady();
   }
 
   render() {

packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js

@@ -5,6 +5,8 @@ import ComputedProperties from './ComputedProperties';
 describe('computed properties', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<ComputedProperties />, div);
+    return new Promise(resolve => {
+      ReactDOM.render(<ComputedProperties onReady={resolve} />, div);
+    });
   });
 });