E2e jsdom fix (facebook#1470)

* E2E: run tests when react is ready

* Entangle e2e with callbacks

* Remove unused e2e lines

Author: EnoahNetzach

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

@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "babel-preset-latest": "6.16.0",
-    "babel-register": "6.18.0",
+    "babel-register": "6.22.0",
     "babel-polyfill": "6.20.0",
     "chai": "3.5.0",
     "jsdom": "9.8.3",

packages/react-scripts/fixtures/kitchensink/integration/initDOM.js

@@ -5,9 +5,6 @@ const path = require('path')
 
 let getMarkup
 let resourceLoader
-// this value could be tweaked in order to let the resource
-// retriever get every file and jsdom execute react
-let timeToWaitForJsToExecute
 
 if (process.env.E2E_FILE) {
   const file = path.isAbsolute(process.env.E2E_FILE)
@@ -21,8 +18,6 @@ if (process.env.E2E_FILE) {
     null,
     fs.readFileSync(path.join(path.dirname(file), resource.url.pathname), 'utf8')
   )
-
-  timeToWaitForJsToExecute = 0
 } else if (process.env.E2E_URL) {
   getMarkup = () => new Promise(resolve => {
     http.get(process.env.E2E_URL, (res) => {
@@ -32,11 +27,7 @@ if (process.env.E2E_FILE) {
     })
   })
 
-  resourceLoader = (resource, callback) => {
-    return resource.defaultFetch(callback)
-  }
-
-  timeToWaitForJsToExecute = 100
+  resourceLoader = (resource, callback) => resource.defaultFetch(callback)
 } else {
   it.only('can run jsdom (at least one of "E2E_FILE" or "E2E_URL" environment variables must be provided)', () => {
     expect(new Error('This isn\'t the error you are looking for.')).toBeUndefined()
@@ -47,16 +38,16 @@ export default feature => new Promise(async resolve => {
   const markup = await getMarkup()
   const host = process.env.E2E_URL || 'http://localhost:3000'
   const doc = jsdom.jsdom(markup, {
-    features : {
-      FetchExternalResources : ['script', 'css'],
-      ProcessExternalResources : ['script'],
+    features: {
+      FetchExternalResources: ['script', 'css'],
+      ProcessExternalResources: ['script'],
     },
+    created: (_, win) => win.addEventListener('ReactFeatureDidMount', () => resolve(doc), true),
+    deferClose: true,
     resourceLoader,
     url: `${host}#${feature}`,
     virtualConsole: jsdom.createVirtualConsole().sendTo(console),
   })
 
-  doc.defaultView.addEventListener('load', () => {
-    setTimeout(() => resolve(doc), timeToWaitForJsToExecute)
-  }, false)
+  doc.close()
 })

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

@@ -1,5 +1,27 @@
 import React from 'react';
 
+class BuiltEmitter extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.callWhenDone = done => done();
+  }
+
+  componentDidMount() {
+    this.callWhenDone(() => document.dispatchEvent(new Event('ReactFeatureDidMount')));
+  }
+
+  render() {
+    const feature = React.cloneElement(React.Children.only(this.props.children), {
+      setCallWhenDone: done => {
+        this.callWhenDone = done;
+      }
+    });
+
+    return <div>{feature}</div>;
+  }
+}
+
 class App extends React.Component {
   constructor(props) {
     super(props);
@@ -96,7 +118,7 @@ class App extends React.Component {
 
   render() {
     const Feature = this.state.feature;
-    return Feature ? <Feature /> : null;
+    return Feature ? <BuiltEmitter><Feature /></BuiltEmitter> : null;
   }
 }
 

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

@@ -5,12 +5,17 @@ export default class extends React.Component {
   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.setState({ users }, () => this.done());
   }
 
   render() {

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

@@ -13,12 +13,17 @@ export default class extends React.Component {
   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.setState({ users }, () => this.done());
   }
 
   render() {

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

@@ -13,12 +13,17 @@ export default class extends React.Component {
   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.setState({ users }, () => this.done());
   }
 
   render() {

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

@@ -13,12 +13,17 @@ export default class extends React.Component {
   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.setState({ users }, () => this.done());
   }
 
   render() {

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

@@ -13,12 +13,17 @@ export default class extends React.Component {
   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.setState({ users }, () => this.done());
   }
 
   render() {

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

@@ -18,12 +18,17 @@ export default class extends React.Component {
   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.setState({ users }, () => this.done());
   }
 
   render() {

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

@@ -13,12 +13,17 @@ export default class extends React.Component {
   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.setState({ users }, () => this.done());
   }
 
   render() {

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

@@ -13,12 +13,17 @@ export default class extends React.Component {
   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.setState({ users }, () => this.done());
   }
 
   render() {

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

@@ -12,6 +12,11 @@ export default class extends React.Component {
   constructor(props) {
     super(props);
 
+    this.done = () => {};
+    this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
+      this.done = done;
+    });
+
     this.state = { users: [] };
   }
 
@@ -20,7 +25,7 @@ export default class extends React.Component {
     for (let user of load(4)) {
       users.push(user);
     }
-    this.setState({ users });
+    this.setState({ users }, () => this.done());
   }
 
   render() {

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

@@ -13,12 +13,17 @@ export default class extends React.Component {
   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.setState({ users }, () => this.done());
   }
 
   render() {

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

@@ -13,12 +13,17 @@ export default class extends React.Component {
   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.setState({ users }, () => this.done());
   }
 
   render() {

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

@@ -13,12 +13,17 @@ export default class extends React.Component {
   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.setState({ users }, () => this.done());
     });
   }
 

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

@@ -13,12 +13,17 @@ export default class extends React.Component {
   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.setState({ users }, () => this.done());
   }
 
   render() {

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

@@ -13,12 +13,17 @@ export default class extends React.Component {
   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.setState({ users }, () => this.done());
   }
 
   render() {

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

@@ -13,12 +13,17 @@ export default class extends React.Component {
   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.setState({ users }, () => this.done());
   }
 
   render() {