Use any config files: backstop.json, backstop.js - Version 2

README.md

@@ -104,6 +104,8 @@ BackstopJS can create a default configuration file and project scaffolding in yo
 backstop init
 ```
 
+Use `backstop init --js` to initialize the project with a `.js` configuration file.
+
 ### Working with Your Config File
 
 By default, BackstopJS places `backstop.json` in the root of your project. And also by default, BackstopJS looks for this file when invoked.
@@ -112,9 +114,9 @@ Pass a `--config=<configFilePathStr>` argument to test using a different config
 
 **JS based config file**
 
-You may use a javascript based config file to allow comments in your config. Be sure to _export your config object as a node module_.
+You may use a javascript based config file to allow the use of comments and more complex configurations. Be sure to _export your config object as a node module_.
 
-Example: Create a backstop.config.js
+Example: Create a `backstop.config.js`
 
 ```
 module.exports = { Same object as backstop.json }

capture/config.default.js

@@ -0,0 +1,54 @@
+module.exports = {
+  id: 'backstop_default',
+  viewports: [
+    {
+      label: 'phone',
+      width: 320,
+      height: 480
+    },
+    {
+      label: 'tablet',
+      width: 1024,
+      height: 768
+    }
+  ],
+  onBeforeScript: 'puppet/onBefore.js',
+  onReadyScript: 'puppet/onReady.js',
+  scenarios: [
+    {
+      label: 'BackstopJS Homepage',
+      cookiePath: 'backstop_data/engine_scripts/cookies.json',
+      url: 'https://garris.github.io/BackstopJS/',
+      referenceUrl: '',
+      readyEvent: '',
+      readySelector: '',
+      delay: 0,
+      hideSelectors: [],
+      removeSelectors: [],
+      hoverSelector: '',
+      clickSelector: '',
+      postInteractionWait: 0,
+      selectors: [],
+      selectorExpansion: true,
+      expect: 0,
+      misMatchThreshold: 0.1,
+      requireSameDimensions: true
+    }
+  ],
+  paths: {
+    bitmaps_reference: 'backstop_data/bitmaps_reference',
+    bitmaps_test: 'backstop_data/bitmaps_test',
+    engine_scripts: 'backstop_data/engine_scripts',
+    html_report: 'backstop_data/html_report',
+    ci_report: 'backstop_data/ci_report'
+  },
+  report: ['browser'],
+  engine: 'puppeteer',
+  engineOptions: {
+    args: ['--no-sandbox']
+  },
+  asyncCaptureLimit: 5,
+  asyncCompareLimit: 50,
+  debug: false,
+  debugWindow: false
+};

cli/index.js

@@ -12,7 +12,7 @@ function main () {
     boolean: ['h', 'help', 'v', 'version', 'i', 'docker'],
     string: ['config'],
     default: {
-      config: 'backstop.json'
+      config: 'backstop'
     }
   });
 

core/command/init.js

@@ -14,9 +14,30 @@ module.exports = {
       logger.error('ERROR: Can\'t generate a scripts directory. No \'engine_scripts\' path property was found in backstop.json.');
     }
 
+    const resolveAndWriteConfigFile = (fileName, useJs) => {
+      const extension = useJs ? '.js' : '.json';
+      if (!fileName.endsWith(extension)) {
+        fileName += extension;
+      }
+
+      const writeFile = () => {
+        if (useJs) {
+          return fs.copy(config.captureConfigFileNameDefault, fileName);
+        } else {
+          const configContent = require(config.captureConfigFileNameDefault);
+          const jsonContent = JSON.stringify(configContent, null, 2);
+          return fs.writeFile(fileName, `module.exports = ${jsonContent};`);
+        }
+      };
+
+      return writeFile().then(() => fileName); // Return fileName after the operation
+    };
+
+    console.log(config);
+
     // Copies a boilerplate config file to the current config file location.
-    promises.push(fs.copy(config.captureConfigFileNameDefault, config.backstopConfigFileName).then(function () {
-      logger.log("Configuration file written at '" + config.backstopConfigFileName + "'");
+    promises.push(resolveAndWriteConfigFile(config.backstopConfigFileName, config.args.js).then(configFile => {
+      logger.log("Configuration file written at '" + configFile + "'");
     }, function (err) {
       throw err;
     }));

core/util/extendConfig.js

@@ -92,7 +92,7 @@ function captureConfigPaths (config) {
   }
   const configHash = hash(config);
   config.captureConfigFileName = path.join(tmpdir, 'capture', configHash + '.json');
-  config.captureConfigFileNameDefault = path.join(config.backstop, 'capture', 'config.default.json');
+  config.captureConfigFileNameDefault = path.join(config.backstop, 'capture', 'config.default.js');
 }
 
 function engine (config, userConfig) {

test/core/util/makeConfig_it_spec.js

@@ -23,7 +23,7 @@ const expectedConfig = {
   comparePath: path.resolve(backstopDir, 'compare/output'),
   captureConfigFileNameDefault: path.resolve(
     backstopDir,
-    'capture/config.default.json'
+    'capture/config.default.js'
   ),
   engine: null,
   engine_scripts: path.resolve('backstop_data/engine_scripts'),