Add "development" tests

Author: Enoah Netzach

packages/react-scripts/templates/kitchensink/integration/README.md

@@ -0,0 +1,4 @@
+# IMPORTANT
+
+Until further investigations, there is a max limit of `initDOM` in one single file.
+Empirically they should not exceed 10 tests per file.

packages/react-scripts/templates/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'],
+      ProcessExternalResources : ['script'],
+    },
+    resourceLoader,
+    url: `${host}#${feature}`,
+    virtualConsole: jsdom.createVirtualConsole().sendTo(console),
+  })
+
+  doc.defaultView.addEventListener('load', () => {
+    setTimeout(() => resolve(doc), timeToWaitForJsToExecute)
+  }, false)
+})

packages/react-scripts/templates/kitchensink/integration/syntax.1.test.js

@@ -0,0 +1,68 @@
+import initDOM from './initDOM'
+
+// eslint-disable-next-line no-undef
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000
+
+describe('Integration', () => {
+  describe('Language syntax', () => {
+    it('array-destructuring', async () => {
+      const doc = await initDOM('array-destructuring')
+
+      expect(doc.getElementById('feature-array-destructuring').childElementCount).toBe(4)
+    })
+
+    it('array-spread', async () => {
+      const doc = await initDOM('array-spread')
+
+      expect(doc.getElementById('feature-array-spread').childElementCount).toBe(4)
+    })
+
+    it('async/await', async () => {
+      const doc = await initDOM('async-await')
+
+      expect(doc.getElementById('feature-async-await').childElementCount).toBe(4)
+    })
+
+    it('class properties', async () => {
+      const doc = await initDOM('class-properties')
+
+      expect(doc.getElementById('feature-class-properties').childElementCount).toBe(4)
+    })
+
+    it('computed properties', async () => {
+      const doc = await initDOM('computed-properties')
+
+      expect(doc.getElementById('feature-computed-properties').childElementCount).toBe(4)
+    })
+
+    it('custom interpolation', async () => {
+      const doc = await initDOM('custom-interpolation')
+
+      expect(doc.getElementById('feature-custom-interpolation').childElementCount).toBe(4)
+    })
+
+    it('default parameters', async () => {
+      const doc = await initDOM('default-parameters')
+
+      expect(doc.getElementById('feature-default-parameters').childElementCount).toBe(4)
+    })
+
+    it('destructuring and await', async () => {
+      const doc = await initDOM('destructuring-and-await')
+
+      expect(doc.getElementById('feature-destructuring-and-await').childElementCount).toBe(4)
+    })
+
+    it('generators', async () => {
+      const doc = await initDOM('generators')
+
+      expect(doc.getElementById('feature-generators').childElementCount).toBe(4)
+    })
+
+    it('object-destructuring', async () => {
+      const doc = await initDOM('object-destructuring')
+
+      expect(doc.getElementById('feature-object-destructuring').childElementCount).toBe(4)
+    })
+  })
+})

packages/react-scripts/templates/kitchensink/integration/syntax.2.test.js

@@ -0,0 +1,38 @@
+import initDOM from './initDOM'
+
+// eslint-disable-next-line no-undef
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000
+
+describe('Integration', () => {
+  describe('Language syntax', () => {
+    it('object-spread', async () => {
+      const doc = await initDOM('object-spread')
+
+      expect(doc.getElementById('feature-object-spread').childElementCount).toBe(4)
+    })
+
+    it('promises', async () => {
+      const doc = await initDOM('promises')
+
+      expect(doc.getElementById('feature-promises').childElementCount).toBe(4)
+    })
+
+    it('rest + default', async () => {
+      const doc = await initDOM('rest-and-default')
+
+      expect(doc.getElementById('feature-rest-and-default').childElementCount).toBe(4)
+    })
+
+    it('rest parameters', async () => {
+      const doc = await initDOM('rest-parameters')
+
+      expect(doc.getElementById('feature-rest-parameters').childElementCount).toBe(4)
+    })
+
+    it('template interpolation', async () => {
+      const doc = await initDOM('template-interpolation')
+
+      expect(doc.getElementById('feature-template-interpolation').childElementCount).toBe(4)
+    })
+  })
+})

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

@@ -157,8 +157,15 @@ test -e build/static/css/main.*.css
 # test -e build/static/media/*.svg # TODO uncomment this line
 # test -e build/favicon.ico # TODO uncomment this line
 
-# Run tests with CI flag
-E2E_FILE=./build/index.html CI=true NODE_PATH=src npm test
+# Unit tests
+CI=true NODE_PATH=src npm test -- --no-cache --testPathPattern="/src"
+# Test "development" environment
+tmp_server_log=`mktemp`
+PORT=3001 nohup npm start &>$tmp_server_log &
+grep -q 'The app is running at:' <(tail -f $tmp_server_log)
+E2E_URL="http://localhost:3001" CI=true NODE_PATH=src npm test -- --no-cache --testPathPattern="/integration/"
+# Test "production" environment
+E2E_FILE=./build/index.html CI=true NODE_PATH=src npm test -- --no-cache --testPathPattern="/integration/"
 # Uncomment when snapshot testing is enabled by default:
 # test -e src/__snapshots__/App.test.js.snap
 
@@ -187,11 +194,15 @@ test -e build/static/css/main.*.css
 # test -e build/static/media/*.svg # TODO uncomment this line
 # test -e build/favicon.ico # TODO uncomment this line
 
-# Run tests, overring the watch option to disable it.
-# `CI=true npm test` won't work here because `npm test` becomes just `jest`.
-# We should either teach Jest to respect CI env variable, or make
-# `scripts/test.js` survive ejection (right now it doesn't).
-E2E_FILE=./build/index.html NODE_PATH=src npm test -- --watch=no
+# Unit tests
+CI=true NODE_PATH=src npm test -- --no-cache --testPathPattern="/src"
+# Test "development" environment
+tmp_server_log=`mktemp`
+PORT=3002 nohup npm start &>$tmp_server_log &
+grep -q 'The app is running at:' <(tail -f $tmp_server_log)
+E2E_URL="http://localhost:3002" CI=true NODE_PATH=src npm test -- --no-cache --testPathPattern="/integration/"
+# Test "production" environment
+E2E_FILE=./build/index.html CI=true NODE_PATH=src npm test -- --no-cache --testPathPattern="/integration/"
 # Uncomment when snapshot testing is enabled by default:
 # test -e src/__snapshots__/App.test.js.snap