Refactor Node App

Author: ataylorme

README.md

@@ -1,6 +1,8 @@
 # Automating your QA with Visual Regression Testing Example Repository
 
-This repository is an example for my talk [Automating your QA with Visual Regression Testing](https://2019.europe.wordcamp.org/session/automating-your-qa-with-visual-regression-testing/) at WordCamp Europe 2019. It uses [BackstopJS](https://github.com/garris/BackstopJS/) and [Node JS](https://nodejs.org/) to automate visual QA. The slides for the talk can be found [here](https://goo.gl/V7QtNw).
+This repository is an example for my talk [Automating your QA with Visual Regression Testing](https://2019.europe.wordcamp.org/session/automating-your-qa-with-visual-regression-testing/) at WordCamp Europe 2019. The slides for the talk can be found [here](https://goo.gl/V7QtNw).
+
+[BackstopJS](https://github.com/garris/BackstopJS/) is used for the visual regression testing. The app itself is built with [Node JS](https://nodejs.org/), [`commander.js`](https://github.com/tj/commander.js/), and [`Inquirer.js`](https://github.com/SBoudrias/Inquirer.js).
 
 ## Prerequisites
 
@@ -21,7 +23,7 @@ After setting up the repository locally (see above) you will need to:
 
 1. Run the command `npm install` to download dependencies
 1. Run the command `npm run start`
-    * Type the number of a site from the list or enter _all_ to test all sites in `src/sitesToTest.js`
+    * Select the site you want to test from the list
 1. Check out the results from the sample test
     * They should open in your browser automatically
 1. Edit `src/sitesToTest.js`
@@ -34,7 +36,7 @@ After setting up the repository locally (see above) you will need to:
 1. Run the command `npm run build`.
     * This command needs to be run anytime you edit items in `src`
 1. Run the command `npm run start`.
-    * To test a single site, enter its number from the list, or enter `all` to test all sites in `src/sitesToTest.js`
+    * Select the site you want to test from the list
 
 **Troubleshooting**
 If you are having issues with the script hanging or BackstopJS taking a long time there may be headless Chrome instances that didn't close properly.

dist/backstopConfig.js

@@ -37,6 +37,7 @@ function backstopConfig(nonProductionBaseUrl, productionBaseUrl, pathsToTest, si
     }],
     'paths': {
       'ci_report': `${backstopDataDir}/ci_report`,
+      'json_report': `${backstopDataDir}/json_report`,
       'html_report': `${backstopDataDir}/html_report`,
       'bitmaps_reference': `${backstopDataDir}/bitmaps_reference`,
       'bitmaps_test': `${backstopDataDir}/bitmaps_test`,
@@ -45,7 +46,7 @@ function backstopConfig(nonProductionBaseUrl, productionBaseUrl, pathsToTest, si
       'engine_scripts': `${backstopDataDir}/engine_scripts`
     },
     'engine': 'puppeteer',
-    'report': ['browser', 'CI'],
+    'report': ['browser', 'json'],
     'casperFlags': [],
     'debug': false,
     'port': 3001

dist/index.js

@@ -1,20 +1,50 @@
+#!/usr/bin/env node
+// External dependencies
 "use strict";
 
-var _visualRegressionTests = _interopRequireDefault(require("./visualRegressionTests"));
+var _commander = _interopRequireDefault(require("commander"));
+
+var _inquirer = _interopRequireDefault(require("inquirer"));
+
+var _ansiColors = _interopRequireDefault(require("ansi-colors"));
 
-var _testAllSites = _interopRequireDefault(require("./testAllSites"));
+var _visualRegressionTestSite = _interopRequireDefault(require("./visualRegressionTestSite"));
 
-var _minimist = _interopRequireDefault(require("minimist"));
+var _sitesToTest = _interopRequireDefault(require("./sitesToTest"));
+
+var _throwError = _interopRequireDefault(require("./throwError"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // Local dependencies
-// External dependencies
-const args = (0, _minimist.default)(process.argv.slice(2), {}); // https://nodejs.org/api/process.html#process_process_platform
-// const isWindows = process.platform === "win32";
+// Get the site names
+const siteNames = Object.keys(_sitesToTest.default); // Throw an error if there are not sites defined
+
+if (siteNames.length === 0) {
+  (0, _throwError.default)(_ansiColors.default.red(`There are no sites defined in the ${_ansiColors.default.grey('sitesToTest.js')} config file`));
+} // Start a new program
+
+
+const program = new _commander.default.Command(); // Set the program version
+
+program.version('1.0.0'); // Allow site name to be passed as an option
+
+program.option('-s, --site [siteName]', 'specifiy a site to be tested'); // Process the arguments
+
+program.parse(process.argv); // If a site was specified, use it
 
-if (Object.prototype.hasOwnProperty.call(args, 'all')) {
-  (0, _testAllSites.default)();
+if (program.site) {
+  (0, _visualRegressionTestSite.default)(program.site);
 } else {
-  (0, _visualRegressionTests.default)();
+  // Ask which site should be used
+  _inquirer.default.prompt([{
+    type: 'list',
+    name: 'site',
+    message: 'Which site do you want to test?',
+    choices: siteNames
+  }]).then(answers => {
+    if (Object.prototype.hasOwnProperty.call(answers, 'site')) {
+      (0, _visualRegressionTestSite.default)(answers.site);
+    }
+  });
 }

dist/testAllSites.js

@@ -5,57 +5,51 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = _default;
 
+var _backstopjs = _interopRequireDefault(require("backstopjs"));
+
+var _fancyLog = _interopRequireDefault(require("fancy-log"));
+
+var _ansiColors = _interopRequireDefault(require("ansi-colors"));
+
 var _throwError = _interopRequireDefault(require("./throwError"));
 
 var _backstopConfig = _interopRequireDefault(require("./backstopConfig"));
 
 var _sitesToTest = _interopRequireDefault(require("./sitesToTest"));
 
-var _path = _interopRequireDefault(require("path"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _backstopjs = _interopRequireDefault(require("backstopjs"));
+// External dependencies
+// Local dependencies
+function _default(siteToTest) {
+  // Ensure the selected site exists in the config
+  const siteExists = Object.prototype.hasOwnProperty.call(_sitesToTest.default, siteToTest); // Throw an error if it doesn't
 
-var _fancyLog = _interopRequireDefault(require("fancy-log"));
+  if (!siteExists) {
+    (0, _throwError.default)(_ansiColors.default.red(`${_ansiColors.default.bold(siteToTest)} is not a valid site. Check the name you entered against the ${_ansiColors.default.grey('sitesToTest.js')} config file`));
+  } // Stash the current site
 
-var _ansiColors = _interopRequireDefault(require("ansi-colors"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  const site = _sitesToTest.default[siteToTest]; // Stash the site label
 
-// Local dependencies
-// External dependencies
-function _default(siteToTest) {
-  const siteExists = Object.prototype.hasOwnProperty.call(_sitesToTest.default, siteToTest);
+  const boldLabel = `${_ansiColors.default.bold(`${site.label}`)}`; // Let the user know we are starting the tests
 
-  let rootDir = _path.default.dirname(require.main.filename);
+  (0, _fancyLog.default)(_ansiColors.default.bgYellow(`Running visual regression tests on ${boldLabel}...\n`)); // Generate site specific configuration.
 
-  if (rootDir.endsWith('dist')) {
-    rootDir = rootDir.substring(0, rootDir.indexOf('/dist'));
-  }
+  const currentConfig = (0, _backstopConfig.default)(site.nonProductionBaseUrl, site.productionBaseUrl, site.pathsToTest, site.name); // Disable logging since BackstopJS is noisy
+  // console.log = function () {};
 
-  if (!siteExists) {
-    (0, _throwError.default)(_ansiColors.default.red(`${_ansiColors.default.gray(siteToTest)} is not a valid site. Check the name you entered against the ${_ansiColors.default.gray('sitesToTest.js')} config file`));
-  }
-
-  _sitesToTest.default[siteToTest].name = siteToTest;
-  const site = _sitesToTest.default[siteToTest];
-  (0, _fancyLog.default)(_ansiColors.default.yellow(`Testing: ${site.label}`));
-  (0, _fancyLog.default)(`Generating configuration for ${site.label}`);
-  const currentConfig = (0, _backstopConfig.default)(site.nonProductionBaseUrl, site.productionBaseUrl, site.pathsToTest, site.name);
-  (0, _fancyLog.default)(`Running Backstop tests for ${site.label}`);
   (0, _backstopjs.default)('reference', {
     config: currentConfig
   }).then(() => {
-    (0, _fancyLog.default)(`Backstop JS reference complete for ${site.label}! Starting tests.`);
     (0, _backstopjs.default)('test', {
       config: currentConfig
     }).then(() => {
-      (0, _fancyLog.default)(_ansiColors.default.yellow(`Report saved to ${_ansiColors.default.gray(`${rootDir}/backstop_data/${site.name}/html_report/index.html`)}`));
-      (0, _fancyLog.default)(_ansiColors.default.green(`Backstop JS tests passed for ${site.label}!`));
+      (0, _fancyLog.default)(_ansiColors.default.bgGreen(`Backstop JS tests passed for ${site.label}!`));
     }).catch(() => {
-      (0, _fancyLog.default)(`Report saved to "${rootDir}/backstop_data/${site.name}/html_report/index.html"`);
-      (0, _throwError.default)(_ansiColors.default.red(`Backstop JS tests failed for ${_ansiColors.default.gray(site.label)}!`));
+      (0, _fancyLog.default)(_ansiColors.default.bgRed(_ansiColors.default.white(`Backstop JS tests failed for ${site.label}!`)));
     });
   }).catch(() => {
-    (0, _throwError.default)(_ansiColors.default.red(`Backstop JS reference failed for ${_ansiColors.default.gray(site.label)}! Please check the BackstopReferenceBaseUrl`));
+    (0, _fancyLog.default)(_ansiColors.default.bgRed(_ansiColors.default.white(`Backstop JS tests failed for ${site.label}!`)));
   });
 }