diff --git a/.eslintrc b/.eslintrc index 5ee6406982..5622bebb6f 100644 --- a/.eslintrc +++ b/.eslintrc @@ -12,6 +12,7 @@ }, "globals": { "__DEV__": "readonly", + "__TEST__": "readonly", "jasmine": "readonly", "spyOn": "readonly" } diff --git a/flow.js b/flow.js index 740d69f34b..dc0c575900 100644 --- a/flow.js +++ b/flow.js @@ -18,6 +18,7 @@ declare module 'events' { } declare var __DEV__: boolean; +declare var __TEST__: boolean; declare var jasmine: {| getEnv: () => {| diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js index 79e633f743..14ef8a2cb0 100644 --- a/packages/react-devtools-core/webpack.backend.js +++ b/packages/react-devtools-core/webpack.backend.js @@ -35,6 +35,7 @@ module.exports = { plugins: [ new DefinePlugin({ __DEV__: true, + __TEST__: false, 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`, 'process.env.GITHUB_URL': `"${GITHUB_URL}"`, }), diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js index 9818479d16..034d281a57 100644 --- a/packages/react-devtools-core/webpack.standalone.js +++ b/packages/react-devtools-core/webpack.standalone.js @@ -34,6 +34,7 @@ module.exports = { plugins: [ new DefinePlugin({ __DEV__: false, + __TEST__: false, 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`, 'process.env.GITHUB_URL': `"${GITHUB_URL}"`, 'process.env.NODE_ENV': `"${NODE_ENV}"`, diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js index f7ea8cc6f0..254d4e4129 100644 --- a/packages/react-devtools-inline/webpack.config.js +++ b/packages/react-devtools-inline/webpack.config.js @@ -38,7 +38,8 @@ module.exports = { }, plugins: [ new DefinePlugin({ - __DEV__: __DEV__, + __DEV__, + __TEST__: false, 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`, 'process.env.GITHUB_URL': `"${GITHUB_URL}"`, 'process.env.NODE_ENV': `"${NODE_ENV}"`, diff --git a/shells/browser/shared/webpack.backend.js b/shells/browser/shared/webpack.backend.js index a091b269ac..cf034bccef 100644 --- a/shells/browser/shared/webpack.backend.js +++ b/shells/browser/shared/webpack.backend.js @@ -31,6 +31,7 @@ module.exports = { plugins: [ new DefinePlugin({ __DEV__: true, + __TEST__: false, 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`, 'process.env.GITHUB_URL': `"${GITHUB_URL}"`, }), diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js index dd2acc1f3c..23342ca46c 100644 --- a/shells/browser/shared/webpack.config.js +++ b/shells/browser/shared/webpack.config.js @@ -36,6 +36,7 @@ module.exports = { plugins: [ new DefinePlugin({ __DEV__: false, + __TEST__: false, 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`, 'process.env.GITHUB_URL': `"${GITHUB_URL}"`, 'process.env.NODE_ENV': `"${NODE_ENV}"`, diff --git a/shells/dev/webpack.config.js b/shells/dev/webpack.config.js index 779a0588b1..ce58e6418a 100644 --- a/shells/dev/webpack.config.js +++ b/shells/dev/webpack.config.js @@ -39,7 +39,8 @@ const config = { }, plugins: [ new DefinePlugin({ - __DEV__: __DEV__, + __DEV__, + __TEST__: false, 'process.env.GITHUB_URL': `"${GITHUB_URL}"`, 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`, }), diff --git a/src/__tests__/setupEnv.js b/src/__tests__/setupEnv.js index 018e6ff628..0198427ad9 100644 --- a/src/__tests__/setupEnv.js +++ b/src/__tests__/setupEnv.js @@ -12,3 +12,4 @@ if (!global.hasOwnProperty('localStorage')) { // Mimic the global we set with Webpack's DefinePlugin global.__DEV__ = process.env.NODE_ENV !== 'production'; +global.__TEST__ = process.env.NODE_ENV === 'test'; diff --git a/src/constants.js b/src/constants.js index daef7b0e70..d27de3ed5b 100644 --- a/src/constants.js +++ b/src/constants.js @@ -1,26 +1,8 @@ // @flow -// $FlowFixMe Cannot resolve module -import rawStyleString from '!!raw-loader!src/devtools/views/root.css'; // eslint-disable-line import/no-webpack-loader-syntax - // Flip this flag to true to enable verbose console debug logging. export const __DEBUG__ = false; -const extractVar = varName => { - const regExp = new RegExp(`${varName}: ([0-9]+)`); - const match = rawStyleString.match(regExp); - return parseInt(match[1], 10); -}; - -// TRICKY -// Extracting during build time avoids a temporarily invalid state for the inline target. -// Sometimes the inline target is rendered before root styles are applied, -// which would result in e.g. NaN itemSize being passed to react-window list. -export const COMFORTABLE_LINE_HEIGHT = extractVar( - 'comfortable-line-height-data' -); -export const COMPACT_LINE_HEIGHT = extractVar('compact-line-height-data'); - export const TREE_OPERATION_ADD = 1; export const TREE_OPERATION_REMOVE = 2; export const TREE_OPERATION_REORDER_CHILDREN = 3; @@ -45,3 +27,31 @@ export const PROFILER_EXPORT_VERSION = 4; export const CHANGE_LOG_URL = 'https://github.com/bvaughn/react-devtools-experimental/blob/master/CHANGELOG.md'; + +// HACK +// +// Extracting during build time avoids a temporarily invalid state for the inline target. +// Sometimes the inline target is rendered before root styles are applied, +// which would result in e.g. NaN itemSize being passed to react-window list. +// +// We can't use the Webpack loader syntax in the context of Jest though, +// so tests need some reasonably meaningful fallback value. +let COMFORTABLE_LINE_HEIGHT = 15; +let COMPACT_LINE_HEIGHT = 10; + +if (!__TEST__) { + // $FlowFixMe + const rawStyleString = require('!!raw-loader!src/devtools/views/root.css') // eslint-disable-line import/no-webpack-loader-syntax + .default; + + const extractVar = varName => { + const regExp = new RegExp(`${varName}: ([0-9]+)`); + const match = rawStyleString.match(regExp); + return parseInt(match[1], 10); + }; + + COMFORTABLE_LINE_HEIGHT = extractVar('comfortable-line-height-data'); + COMPACT_LINE_HEIGHT = extractVar('compact-line-height-data'); +} + +export { COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT };