diff --git a/.travis.yml b/.travis.yml index bb9c8112081b820a68f0cbff7d5d33e66a71dab6..8f3582466149e8aec9735a1530efd7bcbae14d68 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,7 +1,6 @@ --- language: node_js node_js: - - 0.10 - 4 - 6 cache: @@ -9,7 +8,20 @@ cache: - node_modules - packages/create-react-app/node_modules - packages/react-scripts/node_modules -script: tasks/e2e.sh +script: + - 'if [ $TEST_SUITE = "simple" ]; then tasks/e2e-simple.sh; fi' + - 'if [ $TEST_SUITE = "installs" ]; then tasks/e2e-installs.sh; fi' + - 'if [ $TEST_SUITE = "kitchensink" ]; then tasks/e2e-kitchensink.sh; fi' env: - - USE_YARN=no - - USE_YARN=yes + global: + - USE_YARN=no + matrix: + - TEST_SUITE=simple + - TEST_SUITE=installs + - TEST_SUITE=kitchensink +matrix: + include: + - node_js: 0.10 + env: TEST_SUITE=simple + - node_js: 6 + env: USE_YARN=yes TEST_SUITE=simple diff --git a/package.json b/package.json index 6645ea279710252b9c98f5cd071732d7d160dab9..6705e0413f9a1ea7364b26d3b9cb0f8023aa6aae 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "build": "node packages/react-scripts/scripts/build.js", "changelog": "lerna-changelog", "create-react-app": "tasks/cra.sh", - "e2e": "tasks/e2e.sh", + "e2e": "tasks/e2e-simple.sh", "postinstall": "lerna bootstrap", "publish": "tasks/release.sh", "start": "node packages/react-scripts/scripts/start.js", diff --git a/packages/create-react-app/index.js b/packages/create-react-app/index.js index 9ab11a5e938cf2b0d3f0fd68c9486eaca074ef0b..4dbb37f496961f484f18fc8b0f47798eb8b3f35a 100644 --- a/packages/create-react-app/index.js +++ b/packages/create-react-app/index.js @@ -52,6 +52,7 @@ if (currentNodeVersion.split('.')[0] < 4) { process.exit(1); } +var commander = require('commander'); var fs = require('fs-extra'); var path = require('path'); var execSync = require('child_process').execSync; @@ -60,7 +61,7 @@ var semver = require('semver'); var projectName; -var program = require('commander') +var program = commander .version(require('./package.json').version) .arguments('<project-directory>') .usage(chalk.green('<project-directory>') + ' [options]') @@ -69,6 +70,7 @@ var program = require('commander') }) .option('--verbose', 'print additional logs') .option('--scripts-version <alternative-package>', 'use a non-standard version of react-scripts') + .allowUnknownOption() .on('--help', function () { console.log(' Only ' + chalk.green('<project-directory>') + ' is required.'); console.log(); @@ -82,7 +84,7 @@ var program = require('commander') console.log(' ' + chalk.cyan('https://github.com/facebookincubator/create-react-app/issues/new')); console.log(); }) - .parse(process.argv) + .parse(process.argv); if (typeof projectName === 'undefined') { console.error('Please specify the project directory:'); @@ -95,9 +97,14 @@ if (typeof projectName === 'undefined') { process.exit(1); } -createApp(projectName, program.verbose, program.scriptsVersion); +var hiddenProgram = new commander.Command() + .option('--internal-testing-template <path-to-template>', '(internal usage only, DO NOT RELY ON THIS) ' + + 'use a non-standard application template') + .parse(process.argv) + +createApp(projectName, program.verbose, program.scriptsVersion, hiddenProgram.internalTestingTemplate); -function createApp(name, verbose, version) { +function createApp(name, verbose, version, template) { var root = path.resolve(name); var appName = path.basename(root); @@ -130,7 +137,7 @@ function createApp(name, verbose, version) { console.log('Installing ' + chalk.cyan('react-scripts') + '...'); console.log(); - run(root, appName, version, verbose, originalDirectory); + run(root, appName, version, verbose, originalDirectory, template); } function shouldUseYarn() { @@ -163,7 +170,7 @@ function install(packageToInstall, verbose, callback) { }); } -function run(root, appName, version, verbose, originalDirectory) { +function run(root, appName, version, verbose, originalDirectory, template) { var packageToInstall = getInstallPackage(version); var packageName = getPackageName(packageToInstall); @@ -183,7 +190,7 @@ function run(root, appName, version, verbose, originalDirectory) { 'init.js' ); var init = require(scriptsPath); - init(root, appName, verbose, originalDirectory); + init(root, appName, verbose, originalDirectory, template); }); } diff --git a/packages/react-scripts/.npmignore b/packages/react-scripts/.npmignore new file mode 100644 index 0000000000000000000000000000000000000000..76163ab966ad8ffdec01f8dc5585b8f6687a92f2 --- /dev/null +++ b/packages/react-scripts/.npmignore @@ -0,0 +1 @@ +/fixtures diff --git a/packages/react-scripts/fixtures/kitchensink/.babelrc b/packages/react-scripts/fixtures/kitchensink/.babelrc new file mode 100644 index 0000000000000000000000000000000000000000..5686105b95382cb798430626072886db23525570 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["latest"] +} diff --git a/packages/react-scripts/fixtures/kitchensink/.env b/packages/react-scripts/fixtures/kitchensink/.env new file mode 100644 index 0000000000000000000000000000000000000000..3e6e8a5a3605d7cbc9f4e560e2d1a6a1a8ecc38e --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/.env @@ -0,0 +1 @@ +REACT_APP_FILE_ENV_MESSAGE=fromtheenvfile diff --git a/packages/react-scripts/fixtures/kitchensink/.flowconfig b/packages/react-scripts/fixtures/kitchensink/.flowconfig new file mode 100644 index 0000000000000000000000000000000000000000..c658362285f48c4aa971ab9ae8e8244f796bd5ff --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/.flowconfig @@ -0,0 +1,8 @@ +[ignore] +<PROJECT_ROOT>/node_modules/fbjs/.* + +[include] + +[libs] + +[options] diff --git a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json new file mode 100644 index 0000000000000000000000000000000000000000..8adac45708d161a573d7c88bef5a70afd5887615 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json @@ -0,0 +1,10 @@ +{ + "dependencies": { + "babel-preset-latest": "6.16.0", + "babel-register": "6.18.0", + "babel-polyfill": "6.20.0", + "chai": "3.5.0", + "jsdom": "9.8.3", + "mocha": "3.2.0" + } +} diff --git a/packages/react-scripts/fixtures/kitchensink/gitignore b/packages/react-scripts/fixtures/kitchensink/gitignore new file mode 100644 index 0000000000000000000000000000000000000000..6c96c5cff124271309d717aa6a74c99fa3cdd455 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/gitignore @@ -0,0 +1,15 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +node_modules + +# testing +coverage + +# production +build + +# misc +.DS_Store +.env +npm-debug.log diff --git a/packages/react-scripts/fixtures/kitchensink/integration/env.test.js b/packages/react-scripts/fixtures/kitchensink/integration/env.test.js new file mode 100644 index 0000000000000000000000000000000000000000..a179aa7cbb2816a6630bb90e5df704ef0bb38a7c --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/integration/env.test.js @@ -0,0 +1,24 @@ +import { expect } from 'chai' +import initDOM from './initDOM' + +describe('Integration', () => { + describe('Environment variables', () => { + it('NODE_PATH', async () => { + const doc = await initDOM('node-path') + + expect(doc.getElementById('feature-node-path').childElementCount).to.equal(4) + }) + + it('shell env variables', async () => { + const doc = await initDOM('shell-env-variables') + + expect(doc.getElementById('feature-shell-env-variables').textContent).to.equal('fromtheshell.') + }) + + it('file env variables', async () => { + const doc = await initDOM('file-env-variables') + + expect(doc.getElementById('feature-file-env-variables').textContent).to.equal('fromtheenvfile.') + }) + }) +}) diff --git a/packages/react-scripts/fixtures/kitchensink/integration/initDOM.js b/packages/react-scripts/fixtures/kitchensink/integration/initDOM.js new file mode 100644 index 0000000000000000000000000000000000000000..c04e60d4c873faeee6231def78355461f673fcd5 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/integration/initDOM.js @@ -0,0 +1,62 @@ +const fs = require('fs') +const http = require('http') +const jsdom = require('jsdom') +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) + ? process.env.E2E_FILE + : path.join(process.cwd(), process.env.E2E_FILE) + + const markup = fs.readFileSync(file, 'utf8') + getMarkup = () => markup + + resourceLoader = (resource, callback) => callback( + 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) => { + let rawData = '' + res.on('data', chunk => rawData += chunk) + res.on('end', () => resolve(rawData)) + }) + }) + + 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() + }) +} + +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'], + }, + resourceLoader, + url: `${host}#${feature}`, + virtualConsole: jsdom.createVirtualConsole().sendTo(console), + }) + + doc.defaultView.addEventListener('load', () => { + setTimeout(() => resolve(doc), timeToWaitForJsToExecute) + }, false) +}) diff --git a/packages/react-scripts/fixtures/kitchensink/integration/syntax.test.js b/packages/react-scripts/fixtures/kitchensink/integration/syntax.test.js new file mode 100644 index 0000000000000000000000000000000000000000..c8b7fbbc5081ffb09121a3eceff80bf7b8040523 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/integration/syntax.test.js @@ -0,0 +1,96 @@ +import { expect } from 'chai' +import initDOM from './initDOM' + +describe('Integration', () => { + describe('Language syntax', () => { + it('array destructuring', async () => { + const doc = await initDOM('array-destructuring') + + expect(doc.getElementById('feature-array-destructuring').childElementCount).to.equal(4) + }) + + it('array spread', async () => { + const doc = await initDOM('array-spread') + + expect(doc.getElementById('feature-array-spread').childElementCount).to.equal(4) + }) + + it('async/await', async () => { + const doc = await initDOM('async-await') + + expect(doc.getElementById('feature-async-await').childElementCount).to.equal(4) + }) + + it('class properties', async () => { + const doc = await initDOM('class-properties') + + expect(doc.getElementById('feature-class-properties').childElementCount).to.equal(4) + }) + + it('computed properties', async () => { + const doc = await initDOM('computed-properties') + + expect(doc.getElementById('feature-computed-properties').childElementCount).to.equal(4) + }) + + it('custom interpolation', async () => { + const doc = await initDOM('custom-interpolation') + + expect(doc.getElementById('feature-custom-interpolation').childElementCount).to.equal(4) + }) + + it('default parameters', async () => { + const doc = await initDOM('default-parameters') + + expect(doc.getElementById('feature-default-parameters').childElementCount).to.equal(4) + }) + + it('destructuring and await', async () => { + const doc = await initDOM('destructuring-and-await') + + expect(doc.getElementById('feature-destructuring-and-await').childElementCount).to.equal(4) + }) + + it('generators', async () => { + const doc = await initDOM('generators') + + expect(doc.getElementById('feature-generators').childElementCount).to.equal(4) + }) + + it('object destructuring', async () => { + const doc = await initDOM('object-destructuring') + + expect(doc.getElementById('feature-object-destructuring').childElementCount).to.equal(4) + }) + + it('object spread', async () => { + const doc = await initDOM('object-spread') + + expect(doc.getElementById('feature-object-spread').childElementCount).to.equal(4) + }) + + it('promises', async () => { + const doc = await initDOM('promises') + + expect(doc.getElementById('feature-promises').childElementCount).to.equal(4) + }) + + it('rest + default', async () => { + const doc = await initDOM('rest-and-default') + + expect(doc.getElementById('feature-rest-and-default').childElementCount).to.equal(4) + }) + + it('rest parameters', async () => { + const doc = await initDOM('rest-parameters') + + expect(doc.getElementById('feature-rest-parameters').childElementCount).to.equal(4) + }) + + it('template interpolation', async () => { + const doc = await initDOM('template-interpolation') + + expect(doc.getElementById('feature-template-interpolation').childElementCount).to.equal(4) + }) + }) +}) diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js new file mode 100644 index 0000000000000000000000000000000000000000..9e2826b8fc6ee7f1cbfe2ebb4b0ff64f0f730b16 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js @@ -0,0 +1,44 @@ +import { expect } from 'chai' +import initDOM from './initDOM' + +describe('Integration', () => { + describe('Webpack plugins', () => { + it('css inclusion', async () => { + const doc = await initDOM('css-inclusion') + + expect(doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '')) + .to.match(/#feature-css-inclusion\{background:.+;color:.+}/) + }) + + it('image inclusion', async () => { + const doc = await initDOM('image-inclusion') + + expect(doc.getElementById('feature-image-inclusion').src).to.match(/^data:image\/jpeg;base64.+==$/) + }) + + it('no ext inclusion', async () => { + const doc = await initDOM('no-ext-inclusion') + + expect(doc.getElementById('feature-no-ext-inclusion').textContent) + .to.equal('This is just a file without an extension.') + }) + + it('json inclusion', async () => { + const doc = await initDOM('json-inclusion') + + expect(doc.getElementById('feature-json-inclusion').textContent).to.equal('This is an abstract.') + }) + + it('svg inclusion', async () => { + const doc = await initDOM('svg-inclusion') + + expect(doc.getElementById('feature-svg-inclusion').src).to.match(/\/static\/media\/logo\..+\.svg$/) + }) + + it('unknown ext inclusion', async () => { + const doc = await initDOM('unknown-ext-inclusion') + + expect(doc.getElementById('feature-unknown-ext-inclusion').textContent).to.equal('Whoooo, spooky!.') + }) + }) +}) diff --git a/packages/react-scripts/fixtures/kitchensink/public/favicon.ico b/packages/react-scripts/fixtures/kitchensink/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..5c125de5d897c1ff5692a656485b3216123dcd89 Binary files /dev/null and b/packages/react-scripts/fixtures/kitchensink/public/favicon.ico differ diff --git a/packages/react-scripts/fixtures/kitchensink/public/index.html b/packages/react-scripts/fixtures/kitchensink/public/index.html new file mode 100644 index 0000000000000000000000000000000000000000..ce76aae90a4d13dd4b518913a7ca269424879b8e --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/public/index.html @@ -0,0 +1,12 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> + <title>React App</title> + </head> + <body> + <div id="root"></div> + </body> +</html> diff --git a/packages/react-scripts/fixtures/kitchensink/src/App.js b/packages/react-scripts/fixtures/kitchensink/src/App.js new file mode 100644 index 0000000000000000000000000000000000000000..66cd45541f7d39bb3c87bb16261ccc5dc22be346 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/App.js @@ -0,0 +1,103 @@ +import React from 'react'; + +class App extends React.Component { + constructor(props) { + super(props); + + this.state = { feature: null }; + + this.setFeature = this.setFeature.bind(this); + } + + componentDidMount() { + switch (location.hash.slice(1)) { + case 'array-destructuring': + require.ensure([], () => this.setFeature(require('./features/syntax/ArrayDestructuring').default)); + break; + case 'array-spread': + require.ensure([], () => this.setFeature(require('./features/syntax/ArraySpread').default)); + break; + case 'async-await': + require.ensure([], () => this.setFeature(require('./features/syntax/AsyncAwait').default)); + break; + case 'class-properties': + require.ensure([], () => this.setFeature(require('./features/syntax/ClassProperties').default)); + break; + case 'computed-properties': + require.ensure([], () => this.setFeature(require('./features/syntax/ComputedProperties').default)); + break; + case 'css-inclusion': + require.ensure([], () => this.setFeature(require('./features/webpack/CssInclusion').default)); + break; + case 'custom-interpolation': + require.ensure([], () => this.setFeature(require('./features/syntax/CustomInterpolation').default)); + break; + case 'default-parameters': + require.ensure([], () => this.setFeature(require('./features/syntax/DefaultParameters').default)); + break; + case 'destructuring-and-await': + require.ensure([], () => this.setFeature(require('./features/syntax/DestructuringAndAwait').default)); + break; + case 'file-env-variables': + require.ensure([], () => this.setFeature(require('./features/env/FileEnvVariables').default)); + break; + case 'generators': + require.ensure([], () => this.setFeature(require('./features/syntax/Generators').default)); + break; + case 'image-inclusion': + require.ensure([], () => this.setFeature(require('./features/webpack/ImageInclusion').default)); + break; + case 'json-inclusion': + require.ensure([], () => this.setFeature(require('./features/webpack/JsonInclusion').default)); + break; + case 'node-path': + require.ensure([], () => this.setFeature(require('./features/env/NodePath').default)); + break; + case 'no-ext-inclusion': + require.ensure([], () => this.setFeature(require('./features/webpack/NoExtInclusion').default)); + break; + case 'object-destructuring': + require.ensure([], () => this.setFeature(require('./features/syntax/ObjectDestructuring').default)); + break; + case 'object-spread': + require.ensure([], () => this.setFeature(require('./features/syntax/ObjectSpread').default)); + break; + case 'promises': + require.ensure([], () => this.setFeature(require('./features/syntax/Promises').default)); + break; + case 'rest-and-default': + require.ensure([], () => this.setFeature(require('./features/syntax/RestAndDefault').default)); + break; + case 'rest-parameters': + require.ensure([], () => this.setFeature(require('./features/syntax/RestParameters').default)); + break; + case 'shell-env-variables': + require.ensure([], () => this.setFeature(require('./features/env/ShellEnvVariables').default)); + break; + case 'svg-inclusion': + require.ensure([], () => this.setFeature(require('./features/webpack/SvgInclusion').default)); + break; + case 'template-interpolation': + require.ensure([], () => this.setFeature(require('./features/syntax/TemplateInterpolation').default)); + break; + case 'unknown-ext-inclusion': + require.ensure([], () => this.setFeature(require('./features/webpack/UnknownExtInclusion').default) + ); + break; + default: + this.setFeature(null); + break; + } + } + + setFeature(feature) { + this.setState({ feature }); + } + + render() { + const Feature = this.state.feature; + return Feature ? <Feature /> : null; + } +} + +export default App; diff --git a/packages/react-scripts/fixtures/kitchensink/src/App.test.js b/packages/react-scripts/fixtures/kitchensink/src/App.test.js new file mode 100644 index 0000000000000000000000000000000000000000..b84af98d72031dc70085f2120c967b58adfcef6b --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/App.test.js @@ -0,0 +1,8 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(<App />, div); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/absoluteLoad.js b/packages/react-scripts/fixtures/kitchensink/src/absoluteLoad.js new file mode 100644 index 0000000000000000000000000000000000000000..dc769fe1e53cf3d5e4a271130cc01534782349b2 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/absoluteLoad.js @@ -0,0 +1,6 @@ +export default () => [ + { id: 1, name: '1' }, + { id: 2, name: '2' }, + { id: 3, name: '3' }, + { id: 4, name: '4' } +] diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/FileEnvVariables.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/FileEnvVariables.js new file mode 100644 index 0000000000000000000000000000000000000000..c7b7c5d537d8422186fb9731094e8a3af5000a11 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/FileEnvVariables.js @@ -0,0 +1,5 @@ +import React from 'react' + +export default () => ( + <span id="feature-file-env-variables">{process.env.REACT_APP_FILE_ENV_MESSAGE}.</span> +) diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/FileEnvVariables.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/FileEnvVariables.test.js new file mode 100644 index 0000000000000000000000000000000000000000..c9d802be97567b75f24ace222f0cfde1fbf5e3df --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/FileEnvVariables.test.js @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import FileEnvVariables from './FileEnvVariables'; + +describe('.env variables', () => { + it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(<FileEnvVariables />, div); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js new file mode 100644 index 0000000000000000000000000000000000000000..2d2f474f19e17e47e86e23384c5768210f733c03 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js @@ -0,0 +1,25 @@ +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> + ); + } +} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.test.js new file mode 100644 index 0000000000000000000000000000000000000000..05b981853b956a80cb9fcdd90260eabd0df7a9cf --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.test.js @@ -0,0 +1,10 @@ +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); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/ShellEnvVariables.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/ShellEnvVariables.js new file mode 100644 index 0000000000000000000000000000000000000000..37b80ec6097545eea7bc02248e300da8932ad59d --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/ShellEnvVariables.js @@ -0,0 +1,5 @@ +import React from 'react' + +export default () => ( + <span id="feature-shell-env-variables">{process.env.REACT_APP_SHELL_ENV_MESSAGE}.</span> +) diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/ShellEnvVariables.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/ShellEnvVariables.test.js new file mode 100644 index 0000000000000000000000000000000000000000..981bee67c267d2b3cf4ea4638b35414fa0a4ec6c --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/ShellEnvVariables.test.js @@ -0,0 +1,10 @@ +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); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js new file mode 100644 index 0000000000000000000000000000000000000000..38e3512096050baa1eaf6a0e417a1d9b3e9c8b9c --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js @@ -0,0 +1,34 @@ +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> + ); + } +} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.test.js new file mode 100644 index 0000000000000000000000000000000000000000..617df2a6c6cd2dca4e4119a4521da82d71bb869f --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.test.js @@ -0,0 +1,10 @@ +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); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js new file mode 100644 index 0000000000000000000000000000000000000000..d7d9a459133930e0ab1e21e858b46a8e45d08947 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js @@ -0,0 +1,33 @@ +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> + ); + } +} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.test.js new file mode 100644 index 0000000000000000000000000000000000000000..85fade6e3a9dc22bd36cdaa31e46814512869106 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.test.js @@ -0,0 +1,10 @@ +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); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js new file mode 100644 index 0000000000000000000000000000000000000000..01c68640575baf670356b562c75f8b5705fab811 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/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> + ); + } +} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.test.js new file mode 100644 index 0000000000000000000000000000000000000000..072f16fffeab8ef9ec475be134c83278c357d4d6 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.test.js @@ -0,0 +1,10 @@ +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); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js new file mode 100644 index 0000000000000000000000000000000000000000..65e500d645b3e45bb079280ad6ad8d83409e3762 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js @@ -0,0 +1,20 @@ +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> + ); + } +} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.test.js new file mode 100644 index 0000000000000000000000000000000000000000..71d851dd2fca743274af963348fbaf715abc6965 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.test.js @@ -0,0 +1,10 @@ +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); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js new file mode 100644 index 0000000000000000000000000000000000000000..c7a24cb7f3dc8cffa3a57f2fb58b5d3d6fa2e6cc --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js @@ -0,0 +1,33 @@ +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> + ); + } +} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.test.js new file mode 100644 index 0000000000000000000000000000000000000000..4e9aaf17a1d73575d395078f6a7c16e6395c849b --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.test.js @@ -0,0 +1,10 @@ +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); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js new file mode 100644 index 0000000000000000000000000000000000000000..03298968375bfee0ac498ae003de6223870db51f --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js @@ -0,0 +1,43 @@ +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> + ); + } +} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.test.js new file mode 100644 index 0000000000000000000000000000000000000000..10b1df278c113cb6f32ef901cb5788355ff3e11e --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.test.js @@ -0,0 +1,10 @@ +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); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js new file mode 100644 index 0000000000000000000000000000000000000000..3a676358a9278a6d3649831ee38e8e460ee0b68a --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js @@ -0,0 +1,33 @@ +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> + ); + } +} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.test.js new file mode 100644 index 0000000000000000000000000000000000000000..b5ece2446812211948e55202b0e36de4fee3937f --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.test.js @@ -0,0 +1,10 @@ +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); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js new file mode 100644 index 0000000000000000000000000000000000000000..291ed3bccc4ce61b69cc49dddcb275c843ce4d5b --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js @@ -0,0 +1,33 @@ +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> + ); + } +} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.test.js new file mode 100644 index 0000000000000000000000000000000000000000..14521e3079853a0e3ab22a5577e0dc6539bd4a61 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.test.js @@ -0,0 +1,10 @@ +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); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js new file mode 100644 index 0000000000000000000000000000000000000000..4f2fc95ca6f00041e2c91357cdf0e3645ec7502c --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/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(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> + ); + } +} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.test.js new file mode 100644 index 0000000000000000000000000000000000000000..1fd36cdbed325546293f727b3e97334fee74d5c3 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.test.js @@ -0,0 +1,10 @@ +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); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js new file mode 100644 index 0000000000000000000000000000000000000000..c6edbee2702cbeca478cbb153b1772d61fdbc9c2 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js @@ -0,0 +1,34 @@ +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> + ); + } +} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.test.js new file mode 100644 index 0000000000000000000000000000000000000000..7ed28147decd167665b76d31935577f39d00b6f1 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.test.js @@ -0,0 +1,10 @@ +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); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js new file mode 100644 index 0000000000000000000000000000000000000000..ca41004f9f6a741818041984474af8d8b8998375 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js @@ -0,0 +1,33 @@ +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> + ); + } +} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.test.js new file mode 100644 index 0000000000000000000000000000000000000000..9de96c26418ac6a5b65b2f926ab9762dfa9ebeda --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.test.js @@ -0,0 +1,10 @@ +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); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js new file mode 100644 index 0000000000000000000000000000000000000000..c0e13c81ebf41caa88e9c32d43d7ffaec5f8ca05 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/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> + ); + } +} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.test.js new file mode 100644 index 0000000000000000000000000000000000000000..96b4d298d7caa3d451418c6f35f60db0fd36eaf5 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.test.js @@ -0,0 +1,10 @@ +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); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js new file mode 100644 index 0000000000000000000000000000000000000000..a977e8c834000cdcf887ddfb0d257c060c59c1da --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js @@ -0,0 +1,33 @@ +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> + ); + } +} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.test.js new file mode 100644 index 0000000000000000000000000000000000000000..95f4a19fa0baac15e700c155a3cd447274b6042e --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.test.js @@ -0,0 +1,10 @@ +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); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js new file mode 100644 index 0000000000000000000000000000000000000000..9dcc33fa00e0f6264d50e90e4dcfbb6314861222 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js @@ -0,0 +1,33 @@ +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> + ); + } +} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.test.js new file mode 100644 index 0000000000000000000000000000000000000000..8e097713318eac8e14153ac596f93c7374c27c6d --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.test.js @@ -0,0 +1,10 @@ +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); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js new file mode 100644 index 0000000000000000000000000000000000000000..505ee6173d56e37c232f7bbc9a5e5001ea42baaa --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js @@ -0,0 +1,33 @@ +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> + ); + } +} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.test.js new file mode 100644 index 0000000000000000000000000000000000000000..b49af029a4445349020b92998a760ad7a0ed909d --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.test.js @@ -0,0 +1,10 @@ +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); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssInclusion.js new file mode 100644 index 0000000000000000000000000000000000000000..f35d11e0a82fa2454e448a045272a9506cdaa15b --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssInclusion.js @@ -0,0 +1,6 @@ +import React from 'react' +import './assets/style.css' + +export default () => ( + <p id="feature-css-inclusion">We love useless text.</p> +) diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssInclusion.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssInclusion.test.js new file mode 100644 index 0000000000000000000000000000000000000000..f3e10a441a8d329574cbc6f489a774f942477ec5 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssInclusion.test.js @@ -0,0 +1,10 @@ +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); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ImageInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ImageInclusion.js new file mode 100644 index 0000000000000000000000000000000000000000..d793408a5c7bbd081e9f5babeb47dc108f33813f --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ImageInclusion.js @@ -0,0 +1,6 @@ +import React from 'react' +import tiniestCat from './assets/tiniest-cat.jpg' + +export default () => ( + <img id="feature-image-inclusion" src={tiniestCat} alt="tiniest cat" /> +) diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ImageInclusion.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ImageInclusion.test.js new file mode 100644 index 0000000000000000000000000000000000000000..85e68d51e85df719ba395f686c6d912e192dc91c --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ImageInclusion.test.js @@ -0,0 +1,10 @@ +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); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/JsonInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/JsonInclusion.js new file mode 100644 index 0000000000000000000000000000000000000000..8050b9cfd6c6cd3aef779cfa21cb85b8cae7b130 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/JsonInclusion.js @@ -0,0 +1,6 @@ +import React from 'react' +import { abstract } from './assets/abstract.json' + +export default () => ( + <summary id="feature-json-inclusion">{abstract}</summary> +) diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/JsonInclusion.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/JsonInclusion.test.js new file mode 100644 index 0000000000000000000000000000000000000000..70043bd05034d03fd5c198bee97cc21930200aec --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/JsonInclusion.test.js @@ -0,0 +1,10 @@ +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); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/NoExtInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/NoExtInclusion.js new file mode 100644 index 0000000000000000000000000000000000000000..70b2d2b215551cbd0b98da1ca523070f0ac728ba --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/NoExtInclusion.js @@ -0,0 +1,10 @@ +import React from 'react' +import aFileWithoutExt from './assets/aFileWithoutExt' + +const text = aFileWithoutExt.includes('base64') + ? atob(aFileWithoutExt.split('base64,')[1]).trim() + : aFileWithoutExt + +export default () => ( + <p id="feature-no-ext-inclusion">{text}.</p> +) diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/NoExtInclusion.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/NoExtInclusion.test.js new file mode 100644 index 0000000000000000000000000000000000000000..666f94f384c23bf710458cdc9536588f2fd147b2 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/NoExtInclusion.test.js @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import NoExtInclusion from './NoExtInclusion'; + +describe('no ext inclusion', () => { + it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(<NoExtInclusion />, div); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgInclusion.js new file mode 100644 index 0000000000000000000000000000000000000000..7c2fdb2e44e8203b06871908699f9d289545a5ae --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgInclusion.js @@ -0,0 +1,6 @@ +import React from 'react' +import logo from './assets/logo.svg' + +export default () => ( + <img id="feature-svg-inclusion" src={logo} alt="logo" /> +) diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgInclusion.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgInclusion.test.js new file mode 100644 index 0000000000000000000000000000000000000000..507da01403c96841d3918ff72835a63157f4545a --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgInclusion.test.js @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import SvgInclusion from './SvgInclusion'; + +describe('svg inclusion', () => { + it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(<SvgInclusion />, div); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/UnknownExtInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/UnknownExtInclusion.js new file mode 100644 index 0000000000000000000000000000000000000000..30aeccd6fb7c22cfad895811ddc2ef55ec05b016 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/UnknownExtInclusion.js @@ -0,0 +1,10 @@ +import React from 'react' +import aFileWithExtUnknown from './assets/aFileWithExt.unknown' + +const text = aFileWithExtUnknown.includes('base64') + ? atob(aFileWithExtUnknown.split('base64,')[1]).trim() + : aFileWithExtUnknown + +export default () => ( + <p id="feature-unknown-ext-inclusion">{text}.</p> +) diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/UnknownExtInclusion.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/UnknownExtInclusion.test.js new file mode 100644 index 0000000000000000000000000000000000000000..46724e0a27b543053a75366fc16ed23e7aa37175 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/UnknownExtInclusion.test.js @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import UnknownExtInclusion from './UnknownExtInclusion'; + +describe('unknown ext inclusion', () => { + it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(<UnknownExtInclusion />, div); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/aFileWithExt.unknown b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/aFileWithExt.unknown new file mode 100644 index 0000000000000000000000000000000000000000..a5de8eb326474b012a89c6706141e0a61df85d1e --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/aFileWithExt.unknown @@ -0,0 +1 @@ +Whoooo, spooky! diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/aFileWithoutExt b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/aFileWithoutExt new file mode 100644 index 0000000000000000000000000000000000000000..dbcc1afda657ca293319cf7c316276eaf64cb035 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/aFileWithoutExt @@ -0,0 +1 @@ +This is just a file without an extension diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/abstract.json b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/abstract.json new file mode 100644 index 0000000000000000000000000000000000000000..5d21a7168a8ef1e3e02d66ce3024cc417f490329 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/abstract.json @@ -0,0 +1,3 @@ +{ + "abstract": "This is an abstract." +} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/logo.svg b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..6b60c1042f58d9fabb75485aa3624dddcf633b5c --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/logo.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"> + <g fill="#61DAFB"> + <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/> + <circle cx="420.9" cy="296.5" r="45.7"/> + <path d="M520.5 78.1z"/> + </g> +</svg> diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.css b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.css new file mode 100644 index 0000000000000000000000000000000000000000..c399d1acada649c2a52f3f82e1278cbb4c1522a2 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.css @@ -0,0 +1,4 @@ +#feature-css-inclusion { + background: palevioletred; + color: papayawhip; +} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/tiniest-cat.jpg b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/tiniest-cat.jpg new file mode 100644 index 0000000000000000000000000000000000000000..c658e9922a765fa62442f996a1c4fa028c731f45 Binary files /dev/null and b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/tiniest-cat.jpg differ diff --git a/packages/react-scripts/fixtures/kitchensink/src/index.js b/packages/react-scripts/fixtures/kitchensink/src/index.js new file mode 100644 index 0000000000000000000000000000000000000000..0ea36197ba1f815939c15fda13525bdae220f416 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/index.js @@ -0,0 +1,8 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render( + <App />, + document.getElementById('root') +); diff --git a/packages/react-scripts/fixtures/kitchensink/src/subfolder/lol.js b/packages/react-scripts/fixtures/kitchensink/src/subfolder/lol.js new file mode 100644 index 0000000000000000000000000000000000000000..6c7375d54791944f14ad6648658dfd8bc3c49352 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/subfolder/lol.js @@ -0,0 +1 @@ +module.exports = function() { return `haha` } diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js index e438e5a2ee2a6bbe3e5931e6245840002059c919..864005ecac24e7ae7763c8545d0556fced7f84b1 100644 --- a/packages/react-scripts/scripts/init.js +++ b/packages/react-scripts/scripts/init.js @@ -12,7 +12,7 @@ var path = require('path'); var spawn = require('cross-spawn'); var chalk = require('chalk'); -module.exports = function(appPath, appName, verbose, originalDirectory) { +module.exports = function(appPath, appName, verbose, originalDirectory, template) { var ownPackageName = require(path.join(__dirname, '..', 'package.json')).name; var ownPath = path.join(appPath, 'node_modules', ownPackageName); var appPackage = require(path.join(appPath, 'package.json')); @@ -41,7 +41,13 @@ module.exports = function(appPath, appName, verbose, originalDirectory) { } // Copy the files for the user - fs.copySync(path.join(ownPath, 'template'), appPath); + var templatePath = template ? path.resolve(originalDirectory, template) : path.join(ownPath, 'template'); + if (fs.existsSync(templatePath)) { + fs.copySync(templatePath, appPath); + } else { + console.error('Could not locate supplied template: ' + chalk.green(templatePath)); + return; + } // Rename gitignore after the fact to prevent npm from renaming it to .npmignore // See: https://github.com/npm/npm/issues/1862 @@ -76,6 +82,16 @@ module.exports = function(appPath, appName, verbose, originalDirectory) { } args.push('react', 'react-dom'); + // Install additional template dependencies, if present + var templateDependenciesPath = path.join(appPath, '.template.dependencies.json'); + if (fs.existsSync(templateDependenciesPath)) { + var templateDependencies = require(templateDependenciesPath).dependencies; + args = args.concat(Object.keys(templateDependencies).map(function (key) { + return key + '@' + templateDependencies[key]; + })); + fs.unlinkSync(templateDependenciesPath); + } + console.log('Installing react and react-dom using ' + command + '...'); console.log(); diff --git a/tasks/e2e-installs.sh b/tasks/e2e-installs.sh new file mode 100755 index 0000000000000000000000000000000000000000..f3c1d8d3bd0e634276661a29d8b02bade1446d03 --- /dev/null +++ b/tasks/e2e-installs.sh @@ -0,0 +1,152 @@ +#!/bin/bash +# Copyright (c) 2015-present, Facebook, Inc. +# All rights reserved. +# +# This source code is licensed under the BSD-style license found in the +# LICENSE file in the root directory of this source tree. An additional grant +# of patent rights can be found in the PATENTS file in the same directory. + +# ****************************************************************************** +# This is an end-to-end test intended to run on CI. +# You can also run it locally but it's slow. +# ****************************************************************************** + +# Start in tasks/ even if run from root directory +cd "$(dirname "$0")" + +# CLI and app temporary locations +# http://unix.stackexchange.com/a/84980 +temp_cli_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_cli_path'` +temp_app_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_app_path'` + +function cleanup { + echo 'Cleaning up.' + cd $root_path + # Uncomment when snapshot testing is enabled by default: + # rm ./packages/react-scripts/template/src/__snapshots__/App.test.js.snap + rm -rf $temp_cli_path $temp_app_path +} + +# Error messages are redirected to stderr +function handle_error { + echo "$(basename $0): ERROR! An error was encountered executing line $1." 1>&2; + cleanup + echo 'Exiting with error.' 1>&2; + exit 1 +} + +function handle_exit { + cleanup + echo 'Exiting without error.' 1>&2; + exit +} + +function create_react_app { + node "$temp_cli_path"/node_modules/create-react-app/index.js $* +} + +# Exit the script with a helpful error message when any error is encountered +trap 'set +x; handle_error $LINENO $BASH_COMMAND' ERR + +# Cleanup before exit on any termination signal +trap 'set +x; handle_exit' SIGQUIT SIGTERM SIGINT SIGKILL SIGHUP + +# Echo every command being executed +set -x + +# Go to root +cd .. +root_path=$PWD + +npm install + +# If the node version is < 4, the script should just give an error. +if [ `node --version | sed -e 's/^v//' -e 's/\..\+//g'` -lt 4 ] +then + cd $temp_app_path + err_output=`node "$root_path"/packages/create-react-app/index.js test-node-version 2>&1 > /dev/null || echo ''` + [[ $err_output =~ You\ are\ running\ Node ]] && exit 0 || exit 1 +fi + +if [ "$USE_YARN" = "yes" ] +then + # Install Yarn so that the test can use it to install packages. + npm install -g yarn@0.17.10 # TODO: remove version when https://github.com/yarnpkg/yarn/issues/2142 is fixed. + yarn cache clean +fi + +# ****************************************************************************** +# First, pack and install create-react-app. +# ****************************************************************************** + +# Pack CLI +cd $root_path/packages/create-react-app +cli_path=$PWD/`npm pack` + +# Install the CLI in a temporary location +cd $temp_cli_path +npm install $cli_path + +# ****************************************************************************** +# Test --scripts-version with a version number +# ****************************************************************************** + +cd $temp_app_path +create_react_app --scripts-version=0.4.0 test-app-version-number +cd test-app-version-number + +# Check corresponding scripts version is installed. +test -e node_modules/react-scripts +grep '"version": "0.4.0"' node_modules/react-scripts/package.json + +# ****************************************************************************** +# Test --scripts-version with a tarball url +# ****************************************************************************** + +cd $temp_app_path +create_react_app --scripts-version=https://registry.npmjs.org/react-scripts/-/react-scripts-0.4.0.tgz test-app-tarball-url +cd test-app-tarball-url + +# Check corresponding scripts version is installed. +test -e node_modules/react-scripts +grep '"version": "0.4.0"' node_modules/react-scripts/package.json + +# ****************************************************************************** +# Test --scripts-version with a custom fork of react-scripts +# ****************************************************************************** + +cd $temp_app_path +create_react_app --scripts-version=react-scripts-fork test-app-fork +cd test-app-fork + +# Check corresponding scripts version is installed. +test -e node_modules/react-scripts-fork + +# ****************************************************************************** +# Test nested folder path as the project name +# ****************************************************************************** + +#Testing a path that exists +cd $temp_app_path +mkdir test-app-nested-paths-t1 +cd test-app-nested-paths-t1 +mkdir -p test-app-nested-paths-t1/aa/bb/cc/dd +create_react_app test-app-nested-paths-t1/aa/bb/cc/dd +cd test-app-nested-paths-t1/aa/bb/cc/dd +npm start -- --smoke-test + +#Testing a path that does not exist +cd $temp_app_path +create_react_app test-app-nested-paths-t2/aa/bb/cc/dd +cd test-app-nested-paths-t2/aa/bb/cc/dd +npm start -- --smoke-test + +#Testing a path that is half exists +cd $temp_app_path +mkdir -p test-app-nested-paths-t3/aa +create_react_app test-app-nested-paths-t3/aa/bb/cc/dd +cd test-app-nested-paths-t3/aa/bb/cc/dd +npm start -- --smoke-test + +# Cleanup +cleanup diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh new file mode 100755 index 0000000000000000000000000000000000000000..eecd6ed62a710ffc62f9dd8d9afb1b80a34a7b03 --- /dev/null +++ b/tasks/e2e-kitchensink.sh @@ -0,0 +1,218 @@ +#!/bin/bash +# Copyright (c) 2015-present, Facebook, Inc. +# All rights reserved. +# +# This source code is licensed under the BSD-style license found in the +# LICENSE file in the root directory of this source tree. An additional grant +# of patent rights can be found in the PATENTS file in the same directory. + +# ****************************************************************************** +# This is an end-to-end kitchensink test intended to run on CI. +# You can also run it locally but it's slow. +# ****************************************************************************** + +# Start in tasks/ even if run from root directory +cd "$(dirname "$0")" + +# CLI and app temporary locations +# http://unix.stackexchange.com/a/84980 +temp_cli_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_cli_path'` +temp_app_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_app_path'` + +function cleanup { + echo 'Cleaning up.' + cd $root_path + # Uncomment when snapshot testing is enabled by default: + # rm ./packages/react-scripts/template/src/__snapshots__/App.test.js.snap + rm -rf $temp_cli_path $temp_app_path +} + +# Error messages are redirected to stderr +function handle_error { + echo "$(basename $0): ERROR! An error was encountered executing line $1." 1>&2; + cleanup + echo 'Exiting with error.' 1>&2; + exit 1 +} + +function handle_exit { + cleanup + echo 'Exiting without error.' 1>&2; + exit +} + +function create_react_app { + node "$temp_cli_path"/node_modules/create-react-app/index.js $* +} + +# Exit the script with a helpful error message when any error is encountered +trap 'set +x; handle_error $LINENO $BASH_COMMAND' ERR + +# Cleanup before exit on any termination signal +trap 'set +x; handle_exit' SIGQUIT SIGTERM SIGINT SIGKILL SIGHUP + +# Echo every command being executed +set -x + +# Go to root +cd .. +root_path=$PWD + +npm install + +# If the node version is < 4, the script should just give an error. +if [ `node --version | sed -e 's/^v//' -e 's/\..\+//g'` -lt 4 ] +then + cd $temp_app_path + err_output=`node "$root_path"/packages/create-react-app/index.js test-node-version 2>&1 > /dev/null || echo ''` + [[ $err_output =~ You\ are\ running\ Node ]] && exit 0 || exit 1 +fi + +if [ "$USE_YARN" = "yes" ] +then + # Install Yarn so that the test can use it to install packages. + npm install -g yarn@0.17.10 # TODO: remove version when https://github.com/yarnpkg/yarn/issues/2142 is fixed. + yarn cache clean +fi + +# ****************************************************************************** +# First, pack react-scripts and create-react-app so we can use them. +# ****************************************************************************** + +# Pack CLI +cd $root_path/packages/create-react-app +cli_path=$PWD/`npm pack` + +# Go to react-scripts +cd $root_path/packages/react-scripts + +# Save package.json because we're going to touch it +cp package.json package.json.orig + +# Replace own dependencies (those in the `packages` dir) with the local paths +# of those packages. +node $root_path/tasks/replace-own-deps.js + +# Remove .npmignore so the test template is added +rm $root_path/packages/react-scripts/.npmignore + +# Finally, pack react-scripts +scripts_path=$root_path/packages/react-scripts/`npm pack` + +# Restore package.json +rm package.json +mv package.json.orig package.json + +# ****************************************************************************** +# Now that we have packed them, create a clean app folder and install them. +# ****************************************************************************** + +# Install the CLI in a temporary location +cd $temp_cli_path +npm install $cli_path + +# Install the app in a temporary location +cd $temp_app_path +create_react_app --scripts-version=$scripts_path --internal-testing-template=$root_path/packages/react-scripts/fixtures/kitchensink test-kitchensink + +# ****************************************************************************** +# Now that we used create-react-app to create an app depending on react-scripts, +# let's make sure all npm scripts are in the working state. +# ****************************************************************************** + +# Enter the app directory +cd test-kitchensink + +# Test the build +NODE_PATH=src REACT_APP_SHELL_ENV_MESSAGE=fromtheshell npm run build +# Check for expected output +test -e build/*.html +test -e build/static/js/main.*.js + +# Unit tests +REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ + CI=true \ + NODE_PATH=src \ + npm test -- --no-cache --testPathPattern="/src/" + +# Test "development" environment +tmp_server_log=`mktemp` +PORT=3001 \ + REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ + NODE_PATH=src \ + nohup npm start &>$tmp_server_log & +grep -q 'The app is running at:' <(tail -f $tmp_server_log) +E2E_URL="http://localhost:3001" \ + REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ + CI=true NODE_PATH=src \ + node node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.test.js + +# Test "production" environment +E2E_FILE=./build/index.html \ + CI=true \ + NODE_PATH=src \ + node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.js + +# Uncomment when snapshot testing is enabled by default: +# test -e src/__snapshots__/App.test.js.snap + +# Test the server +REACT_APP_SHELL_ENV_MESSAGE=fromtheshell NODE_PATH=src npm start -- --smoke-test +REACT_APP_SHELL_ENV_MESSAGE=fromtheshell HTTPS=true NODE_PATH=src npm start -- --smoke-test + +# ****************************************************************************** +# Finally, let's check that everything still works after ejecting. +# ****************************************************************************** + +# Eject... +echo yes | npm run eject + +# ...but still link to the local packages +npm link $root_path/packages/babel-preset-react-app +npm link $root_path/packages/eslint-config-react-app +npm link $root_path/packages/react-dev-utils +npm link $root_path/packages/react-scripts + +# ...and we need to remove template's .babelrc +rm .babelrc + +# Test the build +NODE_PATH=src REACT_APP_SHELL_ENV_MESSAGE=fromtheshell npm run build +# Check for expected output +test -e build/*.html +test -e build/static/js/main.*.js + +# Unit tests +REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ + CI=true \ + NODE_PATH=src \ + npm test -- --no-cache --testPathPattern="/src/" + +# Test "development" environment +tmp_server_log=`mktemp` +PORT=3002 \ + REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ + NODE_PATH=src \ + nohup npm start &>$tmp_server_log & +grep -q 'The app is running at:' <(tail -f $tmp_server_log) +E2E_URL="http://localhost:3002" \ + REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ + CI=true NODE_PATH=src \ + NODE_ENV=production \ + node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.js + +# Test "production" environment +E2E_FILE=./build/index.html \ + CI=true \ + NODE_ENV=production \ + NODE_PATH=src \ + node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.js + +# Uncomment when snapshot testing is enabled by default: +# test -e src/__snapshots__/App.test.js.snap + +# Test the server +REACT_APP_SHELL_ENV_MESSAGE=fromtheshell NODE_PATH=src npm start -- --smoke-test + +# Cleanup +cleanup diff --git a/tasks/e2e.sh b/tasks/e2e-simple.sh similarity index 73% rename from tasks/e2e.sh rename to tasks/e2e-simple.sh index 27cd0ae45f6c188e02c5d6b8ae8d85dec093b509..f8baf743de7a36da48b9040328c2d4f7564417d4 100755 --- a/tasks/e2e.sh +++ b/tasks/e2e-simple.sh @@ -195,66 +195,6 @@ npm test -- --watch=no # Test the server npm start -- --smoke-test -# ****************************************************************************** -# Test --scripts-version with a version number -# ****************************************************************************** - -cd $temp_app_path -create_react_app --scripts-version=0.4.0 test-app-version-number -cd test-app-version-number - -# Check corresponding scripts version is installed. -test -e node_modules/react-scripts -grep '"version": "0.4.0"' node_modules/react-scripts/package.json - -# ****************************************************************************** -# Test --scripts-version with a tarball url -# ****************************************************************************** - -cd $temp_app_path -create_react_app --scripts-version=https://registry.npmjs.org/react-scripts/-/react-scripts-0.4.0.tgz test-app-tarball-url -cd test-app-tarball-url - -# Check corresponding scripts version is installed. -test -e node_modules/react-scripts -grep '"version": "0.4.0"' node_modules/react-scripts/package.json - -# ****************************************************************************** -# Test --scripts-version with a custom fork of react-scripts -# ****************************************************************************** - -cd $temp_app_path -create_react_app --scripts-version=react-scripts-fork test-app-fork -cd test-app-fork - -# Check corresponding scripts version is installed. -test -e node_modules/react-scripts-fork - -# ****************************************************************************** -# Test nested folder path as the project name -# ****************************************************************************** - -#Testing a path that exists -cd $temp_app_path -mkdir test-app-nested-paths-t1 -cd test-app-nested-paths-t1 -mkdir -p test-app-nested-paths-t1/aa/bb/cc/dd -create_react_app test-app-nested-paths-t1/aa/bb/cc/dd -cd test-app-nested-paths-t1/aa/bb/cc/dd -npm start -- --smoke-test - -#Testing a path that does not exist -cd $temp_app_path -create_react_app test-app-nested-paths-t2/aa/bb/cc/dd -cd test-app-nested-paths-t2/aa/bb/cc/dd -npm start -- --smoke-test - -#Testing a path that is half exists -cd $temp_app_path -mkdir -p test-app-nested-paths-t3/aa -create_react_app test-app-nested-paths-t3/aa/bb/cc/dd -cd test-app-nested-paths-t3/aa/bb/cc/dd -npm start -- --smoke-test # Cleanup cleanup