Test various features separately

Author: Enoah Netzach

packages/react-scripts/scripts/init.js

@@ -86,7 +86,9 @@ module.exports = function(appPath, appName, verbose, originalDirectory, template
   var templateDependenciesPath = path.join(appPath, '.template.dependencies.json');
   if (fs.existsSync(templateDependenciesPath)) {
     var templateDependencies = require(templateDependenciesPath).dependencies;
-    args = args.concat(templateDependencies);
+    args = args.concat(Object.keys(templateDependencies).map(function (key) {
+      return key + '@' + templateDependencies[key];
+    }));
     fs.unlinkSync(templateDependenciesPath);
   }
 

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

@@ -1,3 +1,5 @@
 {
-  "dependencies": ["jsdom"]
+  "dependencies": {
+    "jsdom": "9.8.3"
+  }
 }

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

@@ -1,48 +1,39 @@
 // @flow
-import React, { Component } from 'react';
-// testing absolute imports using NODE_PATH=src
-import CommentsList from 'CommentsList';
-import UsersList from 'UsersList';
-import logo from './logo.svg';
-import './App.css';
-import EnvVariableMessages from './EnvVariableMessages';
-import { abstract } from './abstract.json';
-import verySmallImage from './1x1-img.jpg';
-import aFileWithoutExt from './aFileWithoutExt';
-import aFileWithUnknownExt from './aFileWithExt.unknown'
-import aDeepJsModule from './subfolder/lol'
+import React from 'react';
 
-class App extends Component {
-  render() {
-    const templateName : string = "Kitchen Sink"
-    return (
-      <div className="App">
-        <div className="App-header">
-          <img id="svg-import" src={logo} className="App-logo" alt="logo" />
-          <h2>Welcome to the {templateName} Template</h2>
-        </div>
-
-        <details>
-          <summary>
-            {abstract}
-          </summary>
-
-          <p className="App-intro">
-            To get started, edit <code>src/App.js</code> and save to reload.
-          </p>
-        </details>
+class App extends React.Component {
+  constructor(props) {
+    super(props)
 
-        <img id="img-import" src={verySmallImage} alt="a very small cat" />
+    this.state = { feature: null }
+  }
 
-        <span id="no-ext-import">{aFileWithoutExt}</span>
-        <span id="unknown-ext-import">{aFileWithUnknownExt}</span>
-        <span id="subfolder-js-import">{aDeepJsModule()} {aDeepJsModule.toString()}</span>
+  componentDidMount() {
+    switch (location.hash.slice(1)) {
+      case 'promises':
+        require.ensure(['./features/Promises'], () => {
+          this.setState({ feature: require('./features/Promises').default })
+        });
+        break;
+      case 'generators':
+        require.ensure(['./features/Generators'], () => {
+          this.setState({ feature: require('./features/Generators').default })
+        });
+        break;
+      case 'async-await':
+        require.ensure(['./features/AsyncAwait'], () => {
+          this.setState({ feature: require('./features/AsyncAwait').default })
+        });
+        break;
+      default:
+        this.setState({ feature: null });
+        break;
+    }
+  }
 
-        <EnvVariableMessages />
-        <UsersList />
-        <CommentsList user="User 1" />
-      </div>
-    );
+  render() {
+    const Feature = this.state.feature;
+    return Feature ? <Feature /> : null;
   }
 }
 

packages/react-scripts/templates/kitchensink/src/features/AsyncAwait.js

@@ -0,0 +1,33 @@
+import React from 'react'
+
+async function load() {
+  return [
+    { id: 1, name: '1' },
+    { id: 2, name: '2' },
+    { id: 3, name: '3' },
+    { id: 4, name: '4' }
+  ];
+}
+
+export default class extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = { users: [] }
+  }
+
+  async componentDidMount() {
+    const users = await load();
+    this.setState({ users });
+  }
+
+  render() {
+    return (
+      <div id="feature-async-await">
+        {this.state.users.map(user => (
+          <div key={user.id}>{user.name}</div>
+        ))}
+      </div>
+    )
+  }
+}

packages/react-scripts/templates/kitchensink/src/features/Generators.js

@@ -0,0 +1,35 @@
+import React from 'react'
+
+function * load(limit) {
+  let i = 1;
+  while (i <= limit) {
+    yield { id: i, name: i };
+    i++;
+  }
+}
+
+export default class extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = { users: [] }
+  }
+
+  componentDidMount() {
+    const users = [];
+    for (let user of load(5)) {
+      users.push(user);
+    }
+    this.setState({ users });
+  }
+
+  render() {
+    return (
+      <div id="feature-generators">
+        {this.state.users.map(user => (
+          <div key={user.id}>{user.name}</div>
+        ))}
+      </div>
+    )
+  }
+}

packages/react-scripts/templates/kitchensink/src/features/Promises.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+function load() {
+  return Promise.resolve([
+    { id: 1, name: '1' },
+    { id: 2, name: '2' },
+    { id: 3, name: '3' },
+    { id: 4, name: '4' }
+  ]);
+}
+
+export default class extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = { users: [] }
+  }
+
+  componentDidMount() {
+    load().then(users => {
+      this.setState({ users });
+    })
+  }
+
+  render() {
+    return (
+      <div id="feature-promises">
+        {this.state.users.map(user => (
+          <div key={user.id}>{user.name}</div>
+        ))}
+      </div>
+    )
+  }
+}

packages/react-scripts/templates/kitchensink/tests/features.test.js

@@ -0,0 +1,65 @@
+const fs = require('fs')
+const jsdom = require('jsdom')
+const path = require('path')
+
+let resourcesResolver
+let markup
+
+if (process.env.E2E_FILE) {
+  const file = path.isAbsolute(process.env.E2E_FILE)
+    ? process.env.E2E_FILE
+    : path.join(process.cwd(), process.env.E2E_FILE)
+
+  markup = fs.readFileSync(file, 'utf8')
+
+  resourcesResolver = resource => path.join(path.dirname(file), resource)
+} else if (process.env.E2E_URL) {
+//  jsdomConfig.url = process.env.E2E_URL
+} else {
+  it.only('can run jsdom (at least one of "E2E_FILE" or "E2E_URL" environment variables must be provided)', () => {
+    expect(markup).toBeDefined()
+  })
+}
+
+// eslint-disable-next-line no-undef
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000
+
+const initDOM = feature => new Promise(resolve => {
+  const doc = jsdom.jsdom(markup, {
+    features : {
+      FetchExternalResources : ['script'],
+      ProcessExternalResources : ['script'],
+    },
+    resourceLoader: (resource, callback) => {
+      return callback(null, fs.readFileSync(resourcesResolver(resource.url.pathname), 'utf8'))
+    },
+    url: `http://localhost#${feature}`,
+    virtualConsole: jsdom.createVirtualConsole().sendTo(console),
+  })
+
+  doc.defaultView.addEventListener('load', () => {
+    setTimeout(() => resolve(doc), 0)
+  }, false)
+})
+
+describe('Integration', () => {
+  describe('Language syntax', () => {
+    it('runs Promises', async () => {
+      const doc = await initDOM('promises')
+
+      expect(doc.getElementById('feature-promises').childElementCount).toBe(4)
+    })
+
+    it('runs generators', async () => {
+      const doc = await initDOM('generators')
+
+      expect(doc.getElementById('feature-generators').childElementCount).toBe(5)
+    })
+
+    it('runs async/await', async () => {
+      const doc = await initDOM('async-await')
+
+      expect(doc.getElementById('feature-async-await').childElementCount).toBe(4)
+    })
+  })
+})

tasks/e2e.sh

@@ -158,7 +158,7 @@ test -e build/static/media/*.svg
 test -e build/favicon.ico
 
 # Run tests with CI flag
-CI=true NODE_PATH=src npm test
+E2E_FILE=./build/index.html CI=true NODE_PATH=src npm test
 # Uncomment when snapshot testing is enabled by default:
 # test -e src/__snapshots__/App.test.js.snap
 
@@ -191,7 +191,7 @@ test -e build/favicon.ico
 # `CI=true npm test` won't work here because `npm test` becomes just `jest`.
 # We should either teach Jest to respect CI env variable, or make
 # `scripts/test.js` survive ejection (right now it doesn't).
-NODE_PATH=src npm test -- --watch=no
+E2E_FILE=./build/index.html NODE_PATH=src npm test -- --watch=no
 # Uncomment when snapshot testing is enabled by default:
 # test -e src/__snapshots__/App.test.js.snap