diff --git a/.eslintrc b/.eslintrc index 5ee6406982396..5622bebb6f159 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 740d69f34b4a7..dc0c5759006b4 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 79e633f7433b1..14ef8a2cb06b5 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 9818479d1637b..034d281a5775a 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 f7ea8cc6f0d4d..254d4e4129ecf 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 a091b269acdbf..cf034bccef31c 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 dd2acc1f3c917..23342ca46c446 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 779a0588b1a29..ce58e6418a180 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 018e6ff628022..0198427ad94ef 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 daef7b0e70bf3..d27de3ed5bc40 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 };