From b333a9c1e9e5939d926d1af762cfc92a5a6e3283 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Thu, 26 Jan 2017 13:23:27 -0500
Subject: [PATCH 1/2] Wait for feature element

---
 .../kitchensink/integration/initDOM.js        | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/react-scripts/fixtures/kitchensink/integration/initDOM.js b/packages/react-scripts/fixtures/kitchensink/integration/initDOM.js
index c04e60d4c87..7c5db08f6f9 100644
--- a/packages/react-scripts/fixtures/kitchensink/integration/initDOM.js
+++ b/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) => {
@@ -35,8 +30,6 @@ if (process.env.E2E_FILE) {
   resourceLoader = (resource, callback) => {
     return resource.defaultFetch(callback)
   }
-
-  timeToWaitForJsToExecute = 100
 } 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,9 +40,9 @@ 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'],
     },
     resourceLoader,
     url: `${host}#${feature}`,
@@ -57,6 +50,14 @@ export default feature => new Promise(async resolve => {
   })
 
   doc.defaultView.addEventListener('load', () => {
-    setTimeout(() => resolve(doc), timeToWaitForJsToExecute)
+    let tries = 0
+    const check = () => {
+      if (++tries > 50 || doc.querySelector('[id^="feature"]') != null) {
+        resolve(doc)
+      } else {
+        setTimeout(check, 10)
+      }
+    }
+    check()
   }, false)
 })

From 9baddfe63cd7d31351dec04d6d452c349a3c3aa9 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Fri, 27 Jan 2017 18:01:19 -0500
Subject: [PATCH 2/2] Listen for special event

---
 .../fixtures/kitchensink/integration/initDOM.js | 17 ++++++-----------
 .../fixtures/kitchensink/src/App.js             |  7 +++++++
 .../kitchensink/src/features/env/NodePath.js    |  5 +++++
 .../kitchensink/src/features/fixture-event.js   |  5 +++++
 .../src/features/syntax/ArrayDestructuring.js   |  5 +++++
 .../src/features/syntax/ArraySpread.js          |  5 +++++
 .../src/features/syntax/AsyncAwait.js           |  5 +++++
 .../src/features/syntax/ClassProperties.js      |  5 +++++
 .../src/features/syntax/ComputedProperties.js   |  5 +++++
 .../src/features/syntax/CustomInterpolation.js  |  5 +++++
 .../src/features/syntax/DefaultParameters.js    |  5 +++++
 .../features/syntax/DestructuringAndAwait.js    |  5 +++++
 .../src/features/syntax/Generators.js           |  5 +++++
 .../src/features/syntax/ObjectDestructuring.js  |  5 +++++
 .../src/features/syntax/ObjectSpread.js         |  5 +++++
 .../kitchensink/src/features/syntax/Promises.js |  5 +++++
 .../src/features/syntax/RestAndDefault.js       |  5 +++++
 .../src/features/syntax/RestParameters.js       |  5 +++++
 .../features/syntax/TemplateInterpolation.js    |  5 +++++
 19 files changed, 98 insertions(+), 11 deletions(-)
 create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/fixture-event.js

diff --git a/packages/react-scripts/fixtures/kitchensink/integration/initDOM.js b/packages/react-scripts/fixtures/kitchensink/integration/initDOM.js
index 7c5db08f6f9..6c57b9a29f5 100644
--- a/packages/react-scripts/fixtures/kitchensink/integration/initDOM.js
+++ b/packages/react-scripts/fixtures/kitchensink/integration/initDOM.js
@@ -5,6 +5,7 @@ const path = require('path')
 
 let getMarkup
 let resourceLoader
+let initCallback
 
 if (process.env.E2E_FILE) {
   const file = path.isAbsolute(process.env.E2E_FILE)
@@ -18,6 +19,8 @@ if (process.env.E2E_FILE) {
     null,
     fs.readFileSync(path.join(path.dirname(file), resource.url.pathname), 'utf8')
   )
+
+  initCallback = (doc, resolve) => doc.defaultView.addEventListener('load', () => resolve(doc), false)
 } else if (process.env.E2E_URL) {
   getMarkup = () => new Promise(resolve => {
     http.get(process.env.E2E_URL, (res) => {
@@ -30,6 +33,8 @@ if (process.env.E2E_FILE) {
   resourceLoader = (resource, callback) => {
     return resource.defaultFetch(callback)
   }
+
+  initCallback = (doc, resolve) => doc.addEventListener('fixture', () => resolve(doc), false)
 } 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()
@@ -49,15 +54,5 @@ export default feature => new Promise(async resolve => {
     virtualConsole: jsdom.createVirtualConsole().sendTo(console),
   })
 
-  doc.defaultView.addEventListener('load', () => {
-    let tries = 0
-    const check = () => {
-      if (++tries > 50 || doc.querySelector('[id^="feature"]') != null) {
-        resolve(doc)
-      } else {
-        setTimeout(check, 10)
-      }
-    }
-    check()
-  }, false)
+  initCallback(doc, resolve)
 })
diff --git a/packages/react-scripts/fixtures/kitchensink/src/App.js b/packages/react-scripts/fixtures/kitchensink/src/App.js
index 66cd45541f7..0b5cbd25391 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/App.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/App.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import fixtureEvent from './features/fixture-event';
 
 class App extends React.Component {
   constructor(props) {
@@ -94,6 +95,12 @@ class App extends React.Component {
     this.setState({ feature });
   }
 
+  componentDidUpdate() {
+    const { feature } = this.state;
+    if (feature === null || React.Component.isPrototypeOf(feature)) return;
+    fixtureEvent(document);
+  }
+
   render() {
     const Feature = this.state.feature;
     return Feature ? <Feature /> : null;
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js
index 2d2f474f19e..b2822860b3f 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import load from 'absoluteLoad'
+import fixtureEvent from '../fixture-event'
 
 export default class extends React.Component {
   constructor(props) {
@@ -13,6 +14,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-node-path">
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/fixture-event.js b/packages/react-scripts/fixtures/kitchensink/src/features/fixture-event.js
new file mode 100644
index 00000000000..7684876b4bd
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/fixture-event.js
@@ -0,0 +1,5 @@
+export default doc => {
+  const event = doc.createEvent('CustomEvent');
+  event.initCustomEvent('fixture', true, true, {});
+  doc.dispatchEvent(event);
+}
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js
index 38e35120960..ad12d94dc6c 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function load() {
   return [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-array-destructuring">
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js
index d7d9a459133..c3909162416 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function load(users) {
   return [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-array-spread">
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js
index 01c68640575..6549f7b10c3 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 async function load() {
   return [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-async-await">
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js
index 65e500d645b..aa79c9dcb59 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 export default class extends React.Component {
   users = [
@@ -8,6 +9,10 @@ export default class extends React.Component {
     { id: 4, name: '4' }
   ];
 
+  componentDidMount() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-class-properties">
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js
index c7a24cb7f3d..6079020cc83 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function load(prefix) {
   return [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-computed-properties">
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js
index 03298968375..bccfc3ea6bb 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 const styled = ([style]) => style.trim()
   .split(/\s*;\s*/)
@@ -26,6 +27,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     const veryInlineStyle = styled`
       background: palevioletred;
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js
index 3a676358a92..fc703ce4ea0 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function load(id = 0) {
   return [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-default-parameters">
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js
index 291ed3bccc4..97a47c63f0b 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 async function load() {
   return { users: [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-destructuring-and-await">
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js
index 4f2fc95ca6f..a92e01e2ad6 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function * load(limit) {
   let i = 1;
@@ -23,6 +24,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-generators">
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js
index c6edbee2702..d7d55b822cc 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function load() {
   return [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-object-destructuring">
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js
index ca41004f9f6..1b2edb12de0 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function load(baseUser) {
   return [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-object-spread">
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js
index c0e13c81ebf..3845d09ff2a 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function load() {
   return Promise.resolve([
@@ -22,6 +23,10 @@ export default class extends React.Component {
     });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-promises">
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js
index a977e8c8340..0e501fef199 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function load({ id, ...rest } = { id: 0, user: { id: 42, name: '42' } }) {
   return [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-rest-and-default">
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js
index 9dcc33fa00e..ccd66c210fc 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function load({ id = 0, ...rest }) {
   return [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-rest-parameters">
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js
index 505ee6173d5..d77c46ab69c 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function load(name) {
   return [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-template-interpolation">