archetype-react-app: [major] default to Chrome Headless for karma

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(
     {},
     {

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;
+};

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);
 };

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);
 };

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 = [

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")();