Listen for special event

Author: Timer

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)
 })

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;

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">

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);
+}

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">

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">

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">

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">

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">

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;