diff --git a/.travis.yml b/.travis.yml index bb9c8112081..8f358246614 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 6645ea27971..6705e0413f9 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 9ab11a5e938..4dbb37f4969 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('') .usage(chalk.green('') + ' [options]') @@ -69,6 +70,7 @@ var program = require('commander') }) .option('--verbose', 'print additional logs') .option('--scripts-version ', 'use a non-standard version of react-scripts') + .allowUnknownOption() .on('--help', function () { console.log(' Only ' + chalk.green('') + ' 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 ', '(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 00000000000..76163ab966a --- /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 00000000000..5686105b953 --- /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 00000000000..3e6e8a5a360 --- /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 00000000000..c658362285f --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/.flowconfig @@ -0,0 +1,8 @@ +[ignore] +/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 00000000000..8adac45708d --- /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 00000000000..6c96c5cff12 --- /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 00000000000..a179aa7cbb2 --- /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 00000000000..c04e60d4c87 --- /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 00000000000..c8b7fbbc508 --- /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 00000000000..9e2826b8fc6 --- /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 00000000000..5c125de5d89 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 00000000000..ce76aae90a4 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/public/index.html @@ -0,0 +1,12 @@ + + + + + + + React App + + +
+ + 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 00000000000..66cd45541f7 --- /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 ? : 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 00000000000..b84af98d720 --- /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(, 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 00000000000..dc769fe1e53 --- /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 00000000000..c7b7c5d537d --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/FileEnvVariables.js @@ -0,0 +1,5 @@ +import React from 'react' + +export default () => ( + {process.env.REACT_APP_FILE_ENV_MESSAGE}. +) 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 00000000000..c9d802be975 --- /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(, 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 00000000000..2d2f474f19e --- /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 ( +
+ {this.state.users.map(user => ( +
{user.name}
+ ))} +
+ ); + } +} 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 00000000000..05b981853b9 --- /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(, 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 00000000000..37b80ec6097 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/ShellEnvVariables.js @@ -0,0 +1,5 @@ +import React from 'react' + +export default () => ( + {process.env.REACT_APP_SHELL_ENV_MESSAGE}. +) 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 00000000000..981bee67c26 --- /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(, 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 00000000000..38e35120960 --- /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 ( +
+ {this.state.users.map(user => { + const [id, name] = user; + return
{name}
+ })} +
+ ); + } +} 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 00000000000..617df2a6c6c --- /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(, 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 00000000000..d7d9a459133 --- /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 ( +
+ {this.state.users.map(user => ( +
{user.name}
+ ))} +
+ ); + } +} 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 00000000000..85fade6e3a9 --- /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(, 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 00000000000..01c68640575 --- /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 ( +
+ {this.state.users.map(user => ( +
{user.name}
+ ))} +
+ ); + } +} 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 00000000000..072f16fffea --- /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(, 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 00000000000..65e500d645b --- /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 ( +
+ {this.users.map(user => ( +
{user.name}
+ ))} +
+ ); + } +} 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 00000000000..71d851dd2fc --- /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(, 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 00000000000..c7a24cb7f3d --- /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 ( +
+ {this.state.users.map(user => ( +
{user.user_name}
+ ))} +
+ ); + } +} 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 00000000000..4e9aaf17a1d --- /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(, 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 00000000000..03298968375 --- /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 ( +
+ {this.state.users.map(user => ( +
{user.name}
+ ))} +
+ ); + } +} 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 00000000000..10b1df278c1 --- /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(, 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 00000000000..3a676358a92 --- /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 ( +
+ {this.state.users.map(user => ( +
{user.name}
+ ))} +
+ ); + } +} 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 00000000000..b5ece244681 --- /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(, 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 00000000000..291ed3bccc4 --- /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 ( +
+ {this.state.users.map(user => ( +
{user.name}
+ ))} +
+ ); + } +} 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 00000000000..14521e30798 --- /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(, 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 00000000000..4f2fc95ca6f --- /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 ( +
+ {this.state.users.map(user => ( +
{user.name}
+ ))} +
+ ); + } +} 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 00000000000..1fd36cdbed3 --- /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(, 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 00000000000..c6edbee2702 --- /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 ( +
+ {this.state.users.map(user => { + const { id, name } = user; + return
{name}
+ })} +
+ ); + } +} 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 00000000000..7ed28147dec --- /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(, 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 00000000000..ca41004f9f6 --- /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 ( +
+ {this.state.users.map(user => ( +
{user.name}: {user.age}
+ ))} +
+ ); + } +} 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 00000000000..9de96c26418 --- /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(, 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 00000000000..c0e13c81ebf --- /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 ( +
+ {this.state.users.map(user => ( +
{user.name}
+ ))} +
+ ); + } +} 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 00000000000..96b4d298d7c --- /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(, 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 00000000000..a977e8c8340 --- /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 ( +
+ {this.state.users.map(user => ( +
{user.name}
+ ))} +
+ ); + } +} 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 00000000000..95f4a19fa0b --- /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(, 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 00000000000..9dcc33fa00e --- /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 ( +
+ {this.state.users.map(user => ( +
{user.name}
+ ))} +
+ ); + } +} 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 00000000000..8e097713318 --- /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(, 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 00000000000..505ee6173d5 --- /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 ( +
+ {this.state.users.map(user => ( +
{user.name}
+ ))} +
+ ); + } +} 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 00000000000..b49af029a44 --- /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(, 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 00000000000..f35d11e0a82 --- /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 () => ( +

We love useless text.

+) 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 00000000000..f3e10a441a8 --- /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(, 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 00000000000..d793408a5c7 --- /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 () => ( + 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 00000000000..85e68d51e85 --- /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(, 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 00000000000..8050b9cfd6c --- /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 () => ( + {abstract} +) 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 00000000000..70043bd0503 --- /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(, 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 00000000000..70b2d2b2155 --- /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 () => ( +

{text}.

+) 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 00000000000..666f94f384c --- /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(, 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 00000000000..7c2fdb2e44e --- /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 () => ( + 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 00000000000..507da01403c --- /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(, 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 00000000000..30aeccd6fb7 --- /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 () => ( +

{text}.

+) 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 00000000000..46724e0a27b --- /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(, 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 00000000000..a5de8eb3264 --- /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 00000000000..dbcc1afda65 --- /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 00000000000..5d21a7168a8 --- /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 00000000000..6b60c1042f5 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/logo.svg @@ -0,0 +1,7 @@ + + + + + + + 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 00000000000..c399d1acada --- /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 00000000000..c658e9922a7 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 00000000000..0ea36197ba1 --- /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( + , + 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 00000000000..6c7375d5479 --- /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 e438e5a2ee2..864005ecac2 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 00000000000..f3c1d8d3bd0 --- /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 00000000000..eecd6ed62a7 --- /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 27cd0ae45f6..f8baf743de7 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