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

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

-import React from 'react'
+import React, { Component, PropTypes } from 'react'
 
 async function load() {
   return { users: [
@@ -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/DestructuringAndAwait.test.js

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

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

-import React from 'react'
+import React, { Component, PropTypes } from 'react'
 
 function * load(limit) {
   let i = 1;
@@ -8,15 +8,13 @@ function * load(limit) {
   }
 }
 
-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: [] };
   }
 
@@ -25,7 +23,11 @@ export default class extends React.Component {
     for (let user of load(4)) {
       users.push(user);
     }
-    this.setState({ users }, () => this.done());
+    this.setState({ users });
+  }
+
+  componentDidUpdate() {
+    this.props.onReady();
   }
 
   render() {

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

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

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

-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/ObjectDestructuring.test.js

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

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

-import React from 'react'
+import React, { Component, PropTypes } from 'react'
 
 function load(baseUser) {
   return [
@@ -9,21 +9,23 @@ function load(baseUser) {
   ];
 }
 
-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({ age: 42 });
-    this.setState({ users }, () => this.done());
+    this.setState({ users });
+  }
+
+  componentDidUpdate() {
+    this.props.onReady();
   }
 
   render() {

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

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

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

-import React from 'react'
+import React, { Component, PropTypes } from 'react'
 
 function load() {
   return Promise.resolve([
@@ -9,24 +9,26 @@ 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: [] };
   }
 
   componentDidMount() {
     load().then(users => {
-      this.setState({ users }, () => this.done());
+      this.setState({ users });
     });
   }
 
+  componentDidUpdate() {
+    this.props.onReady();
+  }
+
   render() {
     return (
       <div id="feature-promises">

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

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

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

-import React from 'react'
+import React, { Component, PropTypes } from 'react'
 
 function load({ id, ...rest } = { id: 0, user: { id: 42, name: '42' } }) {
   return [
@@ -9,21 +9,23 @@ function load({ id, ...rest } = { id: 0, user: { id: 42, name: '42' } }) {
   ];
 }
 
-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/RestAndDefault.test.js

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

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

-import React from 'react'
+import React, { Component, PropTypes } from 'react'
 
 function load({ id = 0, ...rest }) {
   return [
@@ -9,21 +9,23 @@ function load({ id = 0, ...rest }) {
   ];
 }
 
-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: 0, user: { 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/RestParameters.test.js

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

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

-import React from 'react'
+import React, { Component, PropTypes } from 'react'
 
 function load(name) {
   return [
@@ -9,21 +9,23 @@ function load(name) {
   ];
 }
 
-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/TemplateInterpolation.test.js

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

tasks/e2e-kitchensink.sh

@@ -110,6 +110,9 @@ create_react_app --scripts-version=$scripts_path --internal-testing-template=$ro
 # Enter the app directory
 cd test-kitchensink
 
+# Link to our preset
+npm link $root_path/packages/babel-preset-react-app
+
 # Test the build
 NODE_PATH=src REACT_APP_SHELL_ENV_MESSAGE=fromtheshell npm run build
 # Check for expected output
@@ -120,6 +123,7 @@ test -e build/static/js/main.*.js
 REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
   CI=true \
   NODE_PATH=src \
+  NODE_ENV=test \
   npm test -- --no-cache --testPathPattern="/src/"
 
 # Test "development" environment
@@ -132,18 +136,23 @@ grep -q 'The app is running at:' <(tail -f $tmp_server_log)
 E2E_URL="http://localhost:3001" \
   REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
   CI=true NODE_PATH=src \
+  NODE_ENV=development \
   node node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.test.js
 
 # Test "production" environment
 E2E_FILE=./build/index.html \
   CI=true \
   NODE_PATH=src \
+  NODE_ENV=production \
   node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.test.js
 
 # ******************************************************************************
 # Finally, let's check that everything still works after ejecting.
 # ******************************************************************************
 
+# Unlink our preset
+npm unlink $root_path/packages/babel-preset-react-app
+
 # Eject...
 echo yes | npm run eject
 
@@ -153,7 +162,7 @@ npm link $root_path/packages/eslint-config-react-app
 npm link $root_path/packages/react-dev-utils
 npm link $root_path/packages/react-scripts
 
-# ...and we need  to remove template's .babelrc
+# ...and we need to remove template's .babelrc
 rm .babelrc
 
 # Test the build
@@ -166,6 +175,7 @@ test -e build/static/js/main.*.js
 REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
   CI=true \
   NODE_PATH=src \
+  NODE_ENV=test \
   npm test -- --no-cache --testPathPattern="/src/"
 
 # Test "development" environment
@@ -178,7 +188,7 @@ grep -q 'The app is running at:' <(tail -f $tmp_server_log)
 E2E_URL="http://localhost:3002" \
   REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
   CI=true NODE_PATH=src \
-  NODE_ENV=production \
+  NODE_ENV=development \
   node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.test.js
 
 # Test "production" environment