From 9f4144504d370e05e6c7f52560ae96a6a0f78b52 Mon Sep 17 00:00:00 2001 From: Joel Chen Date: Tue, 20 Jun 2017 10:50:51 -0700 Subject: [PATCH] archetype-react-app: [major] default to Chrome Headless for karma (#403) --- .../config/archetype.js | 8 +++-- .../config/karma/browser-settings.js | 30 ++++++++++++++++ .../config/karma/karma.conf.dev.js | 26 ++------------ .../config/karma/karma.conf.js | 27 ++------------ .../config/webpack/partial/extract-style.js | 6 ++-- .../generators/app/templates/clap.js | 36 ++++++++++++------- 6 files changed, 67 insertions(+), 66 deletions(-) create mode 100644 packages/electrode-archetype-react-app-dev/config/karma/browser-settings.js diff --git a/packages/electrode-archetype-react-app-dev/config/archetype.js b/packages/electrode-archetype-react-app-dev/config/archetype.js index 43b490489..057895274 100644 --- a/packages/electrode-archetype-react-app-dev/config/archetype.js +++ b/packages/electrode-archetype-react-app-dev/config/archetype.js @@ -27,9 +27,11 @@ module.exports = { }, archetypeOptions.webpack ), - karma: Object.assign({}, { - enableChromeHeadless: process.env.ENABLE_CHROME_HEADLESS - }), + karma: Object.assign( + {}, + { browser: process.env.KARMA_BROWSER === undefined ? "chrome" : process.env.KARMA_BROWSER }, + archetypeOptions.karma + ), config: Object.assign( {}, { diff --git a/packages/electrode-archetype-react-app-dev/config/karma/browser-settings.js b/packages/electrode-archetype-react-app-dev/config/karma/browser-settings.js new file mode 100644 index 000000000..f06e984f7 --- /dev/null +++ b/packages/electrode-archetype-react-app-dev/config/karma/browser-settings.js @@ -0,0 +1,30 @@ +"use strict"; + +const archetype = require("electrode-archetype-react-app/config/archetype"); +const logger = require("electrode-archetype-react-app/lib/logger"); + +module.exports = function(settings) { + const browser = archetype.karma.browser.toLowerCase(); + if (browser === "chrome") { + settings.browsers = ["Chrome", "Chrome_without_security"]; + settings.customLaunchers = { + Chrome_without_security: { + base: "Chrome", + flags: ["--disable-web-security"] + } + }; + logger.info("Using Chrome Headless to run Karma test"); + } else if (browser === "phantomjs") { + settings.frameworks.push("phantomjs-shim"); + settings.browser = ["PhantomJS"]; + // eslint-disable-next-line max-len + logger.warn( + "Using PhantomJS to run Karma test. It's been deprecated and may be removed in the future." + ); + } else { + logger.error(`Unknown browser ${browser} set for Karma test. Failed.`); + return process.exit(1); + } + + return settings; +}; diff --git a/packages/electrode-archetype-react-app-dev/config/karma/karma.conf.dev.js b/packages/electrode-archetype-react-app-dev/config/karma/karma.conf.dev.js index 3a57a8444..cc9d51a61 100644 --- a/packages/electrode-archetype-react-app-dev/config/karma/karma.conf.dev.js +++ b/packages/electrode-archetype-react-app-dev/config/karma/karma.conf.dev.js @@ -10,11 +10,11 @@ const loadUserConfig = require("./util/load-user-config"); const Path = require("path"); -const logger = require("electrode-archetype-react-app/lib/logger"); -const archetype = require("electrode-archetype-react-app/config/archetype"); +const browserSettings = require("./browser-settings"); module.exports = function(config) { const settings = { + frameworks: ["mocha"], reporters: ["spec"], basePath: process.cwd(), // repository root. files: [ @@ -31,26 +31,6 @@ module.exports = function(config) { } }; - if (archetype.karma.enableChromeHeadless) { - Object.assign(settings, { - frameworks: ["mocha"], - browsers: ["Chrome", "Chrome_without_security"], - customLaunchers: { - Chrome_without_security: { // eslint-disable-line camelcase - base: "Chrome", - flags: ["--disable-web-security"] - } - } - }); - } else { - Object.assign(settings, { - frameworks: ["mocha", "phantomjs-shim"], - browsers: ["PhantomJS"] - }); - - // eslint-disable-next-line max-len - logger.warn("PhantomJS has been deprecated, to use chrome headless, please set env 'ENABLE_CHROME_HEADLESS' to true."); - } - + browserSettings(settings); loadUserConfig(Path.basename(__filename), config, settings); }; diff --git a/packages/electrode-archetype-react-app-dev/config/karma/karma.conf.js b/packages/electrode-archetype-react-app-dev/config/karma/karma.conf.js index db449bb57..8552bcaab 100644 --- a/packages/electrode-archetype-react-app-dev/config/karma/karma.conf.js +++ b/packages/electrode-archetype-react-app-dev/config/karma/karma.conf.js @@ -10,15 +10,14 @@ const PREPROCESSORS = {}; const loadUserConfig = require("./util/load-user-config"); -const logger = require("electrode-archetype-react-app/lib/logger"); -const archetype = require("electrode-archetype-react-app/config/archetype"); +const browserSettings = require("./browser-settings"); PREPROCESSORS[MAIN_PATH] = ["webpack", "sourcemap"]; module.exports = function(config) { const settings = { basePath: process.cwd(), - frameworks: ["mocha", "phantomjs-shim", "intl-shim"], + frameworks: ["mocha", "intl-shim"], files: [MAIN_PATH], plugins: [ "karma-chrome-launcher", @@ -66,26 +65,6 @@ module.exports = function(config) { singleRun: true }; - if (archetype.karma.enableChromeHeadless) { - Object.assign(settings, { - frameworks: ["mocha", "intl-shim"], - browsers: ["Chrome", "Chrome_without_security"], - customLaunchers: { - Chrome_without_security: { // eslint-disable-line camelcase - base: "Chrome", - flags: ["--disable-web-security"] - } - } - }); - } else { - Object.assign(settings, { - frameworks: ["mocha", "phantomjs-shim", "intl-shim"], - browsers: ["PhantomJS"] - }); - - // eslint-disable-next-line max-len - logger.warn("PhantomJS has been deprecated, to use chrome headless, please set env 'ENABLE_CHROME_HEADLESS' to true."); - } - + browserSettings(settings); loadUserConfig(Path.basename(__filename), config, settings); }; diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/partial/extract-style.js b/packages/electrode-archetype-react-app-dev/config/webpack/partial/extract-style.js index 7d9279051..bad2d4610 100644 --- a/packages/electrode-archetype-react-app-dev/config/webpack/partial/extract-style.js +++ b/packages/electrode-archetype-react-app-dev/config/webpack/partial/extract-style.js @@ -40,11 +40,11 @@ const cssModuleSupport = !stylusExists && cssNextExists; module.exports = function() { const cssModuleStylusSupport = archetype.webpack.cssModuleStylusSupport; - const stylusQuery = cssLoader + "?-autoprefixer!" + stylusLoader; + const stylusQuery = `${cssLoader}?-autoprefixer!${stylusLoader}`; const cssLoaderOptions = "?modules&localIdentName=[name]__[local]___[hash:base64:5]&-autoprefixer"; - const cssQuery = cssLoader + cssLoaderOptions + "!" + postcssLoader; - const cssStylusQuery = cssLoader + cssLoaderOptions + "!" + postcssLoader + "!" + stylusLoader; + const cssQuery = `${cssLoader}${cssLoaderOptions}!${postcssLoader}`; + const cssStylusQuery = `${cssLoader}${cssLoaderOptions}!${postcssLoader}!${stylusLoader}`; // By default, this archetype assumes you are using CSS-Modules + CSS-Next const rules = [ diff --git a/packages/generator-electrode/generators/app/templates/clap.js b/packages/generator-electrode/generators/app/templates/clap.js index 8bfcfbf52..c52acce96 100644 --- a/packages/generator-electrode/generators/app/templates/clap.js +++ b/packages/generator-electrode/generators/app/templates/clap.js @@ -1,24 +1,34 @@ -// Tell Electrode app archetype that you want to use ES6 syntax in your server code +/* + * Tell Electrode app archetype that you want to use ES6 syntax in your server code + */ + process.env.SERVER_ES6 = true; /* - * Enable the following flags for optional features in the Electrode app archetype + * Use PhantomJS to run your Karma Unit tests. Default is "chrome" (Chrome Headless) */ -// Use Chrome Headless instead of PhantomJS to run your Karma Unit tests -// process.env.ENABLE_CHROME_HEADLESS = true; +// process.env.KARMA_BROWSER = "phantomjs"; -// Turn off using electrode-webpack-reporter to show visual report of your webpack -// compile results when running in dev mode with `clap dev` -// process.env.HTML_WEBPACK_REPORTER_OFF = true +/* + * Turn off using electrode-webpack-reporter to show visual report of your webpack + * compile results when running in dev mode with `clap dev` + */ -// Use a custom host name instead of localhost, and a diff port instead of 2992 -// for webpack dev server when running in dev mode with `clap dev` -// process.env.WEBPACK_DEV_HOST = "dev.mymachine.net" -// process.env.WEBPACK_DEV_PORT = 8100 +// process.env.HTML_WEBPACK_REPORTER_OFF = true; -// Enable HTTPS for webpack dev server when running in dev mode with `clap dev` -// process.env.WEBPACK_DEV_HTTPS = true; +/* + * Use a custom host name instead of localhost, and a diff port instead of 2992 + * for webpack dev server when running in dev mode with `clap dev` + */ + +// process.env.WEBPACK_DEV_HOST = "dev.mymachine.net"; +// process.env.WEBPACK_DEV_PORT = 8100; + +/* + * Enable HTTPS for webpack dev server when running in dev mode with `clap dev` + */ +// process.env.WEBPACK_DEV_HTTPS = true; require("electrode-archetype-react-app")();