Use a more sophisticated template for end-to-end testing. (#1187)

* Use a more sophisticated template for end-to-end testing.

* Not publish integration tests to npm

* Use "commander" for  cli argv handling

* Handle different scripts version forms and exits without a name given

* Prepare the commands for testing with a template

* Fix dev "template" path

* Add various features to test

* Test various features separately

* Test language features

* Comment unused e2e.sh lines

* Add "development" tests

* Test environment variables

* Test webpack plugins

* Replace kitchensink README

* Switch integration tests from jest to mocha

* Use `fs-extra`

* Use the correct folders

* Do some cleanup

* Print a better message for `--template`

* Test `npm start` with and without https

* Separate fast e2e testing from kitchensink testing

* Hide `--internal-testing-template` (former `--template`) CLI option

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

+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(4)) {
+      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/fixtures/kitchensink/src/features/syntax/Generators.test.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import Generators from './Generators';
+
+describe('generators', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<Generators />, div);
+  });
+});

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

+import React from 'react'
+
+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 = load();
+    this.setState({ users });
+  }
+
+  render() {
+    return (
+      <div id="feature-object-destructuring">
+        {this.state.users.map(user => {
+          const { id, name } = user;
+          return <div key={id}>{name}</div>
+        })}
+      </div>
+    );
+  }
+}

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

+import React from 'react';
+import ReactDOM from 'react-dom';
+import ObjectDestructuring from './ObjectDestructuring';
+
+describe('object destructuring', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<ObjectDestructuring />, div);
+  });
+});

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

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

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

+import React from 'react';
+import ReactDOM from 'react-dom';
+import ObjectSpread from './ObjectSpread';
+
+describe('object spread', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<ObjectSpread />, div);
+  });
+});

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

+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/fixtures/kitchensink/src/features/syntax/Promises.test.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import Promises from './Promises';
+
+describe('promises', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<Promises />, div);
+  });
+});

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

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

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

+import React from 'react';
+import ReactDOM from 'react-dom';
+import RestAndDefault from './RestAndDefault';
+
+describe('rest + default', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<RestAndDefault />, div);
+  });
+});

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

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

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

+import React from 'react';
+import ReactDOM from 'react-dom';
+import RestParameters from './RestParameters';
+
+describe('rest parameters', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<RestParameters />, div);
+  });
+});

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

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

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

+import React from 'react';
+import ReactDOM from 'react-dom';
+import TemplateInterpolation from './TemplateInterpolation';
+
+describe('template interpolation', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<TemplateInterpolation />, div);
+  });
+});

packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssInclusion.js

+import React from 'react'
+import './assets/style.css'
+
+export default () => (
+  <p id="feature-css-inclusion">We love useless text.</p>
+)

packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssInclusion.test.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import CssInclusion from './CssInclusion';
+
+describe('css inclusion', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<CssInclusion />, div);
+  });
+});

packages/react-scripts/fixtures/kitchensink/src/features/webpack/ImageInclusion.js

+import React from 'react'
+import tiniestCat from './assets/tiniest-cat.jpg'
+
+export default () => (
+  <img id="feature-image-inclusion" src={tiniestCat} alt="tiniest cat" />
+)

packages/react-scripts/fixtures/kitchensink/src/features/webpack/ImageInclusion.test.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import ImageInclusion from './ImageInclusion';
+
+describe('image inclusion', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<ImageInclusion />, div);
+  });
+});

packages/react-scripts/fixtures/kitchensink/src/features/webpack/JsonInclusion.js

+import React from 'react'
+import { abstract } from './assets/abstract.json'
+
+export default () => (
+  <summary id="feature-json-inclusion">{abstract}</summary>
+)

packages/react-scripts/fixtures/kitchensink/src/features/webpack/JsonInclusion.test.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import JsonInclusion from './JsonInclusion';
+
+describe('JSON inclusion', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<JsonInclusion />, div);
+  });
+});