{"files":[{"path":"package.json","status":"M"},{"path":"scripts\/jest\/preprocessor.js","status":"M"},{"path":"src\/renderers\/dom\/shared\/__tests__\/ReactDOMServerIntegration-test.js","status":"M"}],"commit":{"authorEmail":"xander76@yahoo.com","shortRevision":"fcf41e7ca2","revision":"fcf41e7ca2ab902d3058016aac6fb9b1e0ab46f8","authorName":"Sasha Aickin","authoredAt":"2017-03-03T10:34:14-08:00","subject":"Add async\/await to unit tests; modify server rendering tests to use async\/await. (#9089)"},"patch":"diff --git a\/package.json b\/package.json\nindex 2ca46b1b15..c91e902a6c 100644\n--- a\/package.json\n+++ b\/package.json\n@@ -12,6 +12,7 @@\n \"babel-jest\": \"^19.0.0\",\n \"babel-plugin-check-es2015-constants\": \"^6.5.0\",\n \"babel-plugin-syntax-trailing-function-commas\": \"^6.5.0\",\n+ \"babel-plugin-transform-async-to-generator\": \"^6.22.0\",\n \"babel-plugin-transform-class-properties\": \"^6.11.5\",\n \"babel-plugin-transform-es2015-arrow-functions\": \"^6.5.2\",\n \"babel-plugin-transform-es2015-block-scoped-functions\": \"^6.5.0\",\ndiff --git a\/scripts\/jest\/preprocessor.js b\/scripts\/jest\/preprocessor.js\nindex 20f372dc57..4a48cfe9e5 100644\n--- a\/scripts\/jest\/preprocessor.js\n+++ b\/scripts\/jest\/preprocessor.js\n@@ -22,6 +22,7 @@ var pathToBabel = path.join(require.resolve('babel-core'), '..', 'package.json')\n var pathToModuleMap = require.resolve('fbjs\/module-map');\n var pathToBabelPluginDevWithCode = require.resolve('..\/error-codes\/dev-expression-with-codes');\n var pathToBabelPluginModules = require.resolve('fbjs-scripts\/babel-6\/rewrite-modules');\n+var pathToBabelPluginAsyncToGenerator = require.resolve('babel-plugin-transform-async-to-generator');\n var pathToBabelrc = path.join(__dirname, '..', '..', '.babelrc');\n var pathToErrorCodes = require.resolve('..\/error-codes\/codes.json');\n \n@@ -54,11 +55,17 @@ module.exports = {\n !filePath.match(\/\\\/node_modules\\\/\/) &&\n !filePath.match(\/\\\/third_party\\\/\/)\n ) {\n+ \/\/ for test files, we also apply the async-await transform, but we want to\n+ \/\/ make sure we don't accidentally apply that transform to product code.\n+ var isTestFile = !!filePath.match(\/\\\/__tests__\\\/\/);\n return babel.transform(\n src,\n Object.assign(\n {filename: path.relative(process.cwd(), filePath)},\n- babelOptions\n+ babelOptions,\n+ isTestFile ? {\n+ plugins: [pathToBabelPluginAsyncToGenerator].concat(babelOptions.plugins),\n+ } : {}\n )\n ).code;\n }\ndiff --git a\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMServerIntegration-test.js b\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMServerIntegration-test.js\nindex daf84a2f21..afe70f87cc 100644\n--- a\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMServerIntegration-test.js\n+++ b\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMServerIntegration-test.js\n@@ -19,41 +19,44 @@ let ReactDOMServer;\n \/\/ Helper functions for rendering tests\n \/\/ ====================================\n \n+\/\/ promisified version of ReactDOM.render()\n+function asyncReactDOMRender(reactElement, domElement) {\n+ return new Promise(resolve =>\n+ ReactDOM.render(reactElement, domElement, resolve));\n+}\n \/\/ performs fn asynchronously and expects count errors logged to console.error.\n \/\/ will fail the test if the count of errors logged is not equal to count.\n-function expectErrors(fn, count) {\n+async function expectErrors(fn, count) {\n if (console.error.calls && console.error.calls.reset) {\n console.error.calls.reset();\n } else {\n spyOn(console, 'error');\n }\n \n- return fn().then((result) => {\n- if (console.error.calls.count() !== count) {\n- console.log(`We expected ${count} warning(s), but saw ${console.error.calls.count()} warning(s).`);\n- if (console.error.calls.count() > 0) {\n- console.log(`We saw these warnings:`);\n- for (var i = 0; i < console.error.calls.count(); i++) {\n- console.log(console.error.calls.argsFor(i)[0]);\n- }\n+ const result = await fn();\n+ if (console.error.calls.count() !== count && console.error.calls.count() !== 0) {\n+ console.log(`We expected ${count} warning(s), but saw ${console.error.calls.count()} warning(s).`);\n+ if (console.error.calls.count() > 0) {\n+ console.log(`We saw these warnings:`);\n+ for (var i = 0; i < console.error.calls.count(); i++) {\n+ console.log(console.error.calls.argsFor(i)[0]);\n }\n }\n- expectDev(console.error.calls.count()).toBe(count);\n- return result;\n- });\n+ }\n+ expectDev(console.error.calls.count()).toBe(count);\n+ return result;\n }\n \n \/\/ renders the reactElement into domElement, and expects a certain number of errors.\n \/\/ returns a Promise that resolves when the render is complete.\n function renderIntoDom(reactElement, domElement, errorCount = 0) {\n return expectErrors(\n- () => new Promise((resolve) => {\n+ async () => {\n ExecutionEnvironment.canUseDOM = true;\n- ReactDOM.render(reactElement, domElement, () => {\n- ExecutionEnvironment.canUseDOM = false;\n- resolve(domElement.firstChild);\n- });\n- }),\n+ await asyncReactDOMRender(reactElement, domElement);\n+ ExecutionEnvironment.canUseDOM = false;\n+ return domElement.firstChild;\n+ },\n errorCount\n );\n }\n@@ -61,15 +64,14 @@ function renderIntoDom(reactElement, domElement, errorCount = 0) {\n \/\/ Renders text using SSR and then stuffs it into a DOM node; returns the DOM\n \/\/ element that corresponds with the reactElement.\n \/\/ Does not render on client or perform client-side revival.\n-function serverRender(reactElement, errorCount = 0) {\n- return expectErrors(\n+async function serverRender(reactElement, errorCount = 0) {\n+ const markup = await expectErrors(\n () => Promise.resolve(ReactDOMServer.renderToString(reactElement)),\n- errorCount)\n- .then((markup) => {\n- var domElement = document.createElement('div');\n- domElement.innerHTML = markup;\n- return domElement.firstChild;\n- });\n+ errorCount\n+ );\n+ var domElement = document.createElement('div');\n+ domElement.innerHTML = markup;\n+ return domElement.firstChild;\n }\n \n const clientCleanRender = (element, errorCount = 0) => {\n@@ -77,12 +79,11 @@ const clientCleanRender = (element, errorCount = 0) => {\n return renderIntoDom(element, div, errorCount);\n };\n \n-const clientRenderOnServerString = (element, errorCount = 0) => {\n- return serverRender(element, errorCount).then((markup) => {\n- var domElement = document.createElement('div');\n- domElement.innerHTML = markup;\n- return renderIntoDom(element, domElement, errorCount);\n- });\n+const clientRenderOnServerString = async (element, errorCount = 0) => {\n+ const markup = await serverRender(element, errorCount);\n+ var domElement = document.createElement('div');\n+ domElement.innerHTML = markup;\n+ return renderIntoDom(element, domElement, errorCount);\n };\n \n const clientRenderOnBadMarkup = (element, errorCount = 0) => {\n@@ -143,24 +144,26 @@ describe('ReactDOMServerIntegration', () => {\n });\n \n describe('basic rendering', function() {\n- itRenders('a blank div', render =>\n- render(

).then(e => expect(e.tagName).toBe('DIV')));\n-\n- itRenders('a div with inline styles', render =>\n- render(

).then(e => {\n- expect(e.style.color).toBe('red');\n- expect(e.style.width).toBe('30px');\n- })\n- );\n-\n- itRenders('a self-closing tag', render =>\n- render(
).then(e => expect(e.tagName).toBe('BR')));\n-\n- itRenders('a self-closing tag as a child', render =>\n- render(

<\/div>).then(e => {\n- expect(e.childNodes.length).toBe(1);\n- expect(e.firstChild.tagName).toBe('BR');\n- })\n- );\n+ itRenders('a blank div', async render => {\n+ const e = await render(

);\n+ expect(e.tagName).toBe('DIV');\n+ });\n+\n+ itRenders('a div with inline styles', async render => {\n+ const e = await render(

);\n+ expect(e.style.color).toBe('red');\n+ expect(e.style.width).toBe('30px');\n+ });\n+\n+ itRenders('a self-closing tag', async render => {\n+ const e = await render(
);\n+ expect(e.tagName).toBe('BR');\n+ });\n+\n+ itRenders('a self-closing tag as a child', async render => {\n+ const e = await render(

<\/div>);\n+ expect(e.childNodes.length).toBe(1);\n+ expect(e.firstChild.tagName).toBe('BR');\n+ });\n });\n });\n","body":"","parents":["fc4633775ab75ca3f0ff92f39b747c395f9ebfb0"]}

dillon1000/react

Files changed