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/env/NodePath.js

+import React from 'react'
+import load from 'absoluteLoad'
+
+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-node-path">
+        {this.state.users.map(user => (
+          <div key={user.id}>{user.name}</div>
+        ))}
+      </div>
+    );
+  }
+}

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

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

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

+import React from 'react'
+
+export default () => (
+  <span id="feature-shell-env-variables">{process.env.REACT_APP_SHELL_ENV_MESSAGE}.</span>
+)

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

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

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

+import React from 'react'
+
+function load() {
+  return [
+    [1, '1'],
+    [2, '2'],
+    [3, '3'],
+    [4, '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-array-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/ArrayDestructuring.test.js

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

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

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

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

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

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

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

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

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

+import React from 'react'
+
+export default class extends React.Component {
+  users = [
+    { id: 1, name: '1' },
+    { id: 2, name: '2' },
+    { id: 3, name: '3' },
+    { id: 4, name: '4' }
+  ];
+
+  render() {
+    return (
+      <div id="feature-class-properties">
+        {this.users.map(user => (
+          <div key={user.id}>{user.name}</div>
+        ))}
+      </div>
+    );
+  }
+}

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

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

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

+import React from 'react'
+
+function load(prefix) {
+  return [
+    { id: 1, [prefix + 'name']: '1' },
+    { id: 2, [prefix + 'name']: '2' },
+    { id: 3, [prefix + 'name']: '3' },
+    { id: 4, [prefix + '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-computed-properties">
+        {this.state.users.map(user => (
+          <div key={user.id}>{user.user_name}</div>
+        ))}
+      </div>
+    );
+  }
+}

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

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

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

+import React from 'react'
+
+const styled = ([style]) => style.trim()
+  .split(/\s*;\s*/)
+  .map(rule => rule.split(/\s*:\s*/))
+  .reduce((rules, rule) => ({ ...rules, [rule[0]]: rule[1] }), {});
+
+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() {
+    const veryInlineStyle = styled`
+      background: palevioletred;
+      color: papayawhip;
+    `;
+
+    return (
+      <div id="feature-custom-interpolation">
+        {this.state.users.map(user => (
+          <div key={user.id} style={veryInlineStyle}>{user.name}</div>
+        ))}
+      </div>
+    );
+  }
+}

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

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

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

+import React from 'react'
+
+function load(id = 0) {
+  return [
+    { id: id + 1, name: '1' },
+    { id: id + 2, name: '2' },
+    { id: id + 3, name: '3' },
+    { id: 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-default-parameters">
+        {this.state.users.map(user => (
+          <div key={user.id}>{user.name}</div>
+        ))}
+      </div>
+    );
+  }
+}

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

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

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

+import React from 'react'
+
+async function load() {
+  return { users: [
+    { 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-destructuring-and-await">
+        {this.state.users.map(user => (
+          <div key={user.id}>{user.name}</div>
+        ))}
+      </div>
+    );
+  }
+}

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

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