Implemented the visual regression testing

gulpfile.ts

@@ -1,5 +1,6 @@
 import { series, task } from 'gulp';
 import * as tsConfigPaths from 'tsconfig-paths';
+import backstopAsync from './src/gulp/backstopAsync';
 import buildElectronAsync from './src/gulp/buildElectronAsync';
 import cleanAsync from './src/gulp/cleanAsync';
 import * as contentBuilder from './src/gulp/contentBuilder';
@@ -25,9 +26,14 @@ task('build:sb:dummy-ci', syncDummy);
 task('build:sb:toc', createToc);
 task('build:sb:pre', series('build:sb:dummy-ci', 'build:sb:toc'));
 task('build:sb:rebuild', series('clean:sb', 'build:sb:pre', 'build:sb'));
+task('run:backstop', () => backstopAsync());
+task('run:backstop:approve', () => spawnAsync('backstop approve'));
+task('run:backstop:rebuild', series('build:sb:pre', 'run:backstop'));
+task('run:backstop:report', () => spawnAsync('backstop openReport'));
 task('run:electron', () => spawnAsync('electron ./'));
 task('run:sb:serve', () => storybook.launchAsync());
 task('run:sb', series('build:sb:pre', 'run:sb:serve'));
 task('test', () => testRunner.unitAsync());
 task('test:coverage', () => testRunner.coverageAsync());
+
 task('default', contentBuilder.condition('run:electron'));

package.json

@@ -52,6 +52,7 @@
     "@types/eslint": "^4.16.6",
     "@types/gulp": "^4.0.6",
     "@types/jest": "^24.0.11",
+    "@types/lodash.noop": "^3.0.6",
     "@types/minimist": "^1.2.0",
     "@types/node-fetch": "^2.1.6",
     "@types/puppeteer": "^1.12.3",
@@ -88,6 +89,7 @@
     "husky": "^1.3.1",
     "jest": "^24.5.0",
     "lint-staged": "^8.1.5",
+    "lodash.noop": "^3.0.1",
     "minimist": "^1.2.0",
     "node-fetch": "^2.3.0",
     "prettier": "^1.16.4",

src/gulp/args.ts

@@ -1,10 +1,12 @@
 import minimist from 'minimist';
+import { options as backstopOptions } from './backstopAsync';
 import { options as binaryBuilderOptions } from './buildElectronAsync';
 import { options as cleanOptions } from './cleanAsync';
 import { options as contentBuilderOptions } from './contentBuilder';
 
 /** Combined default values. */
 const defaultArgs = {
+  ...backstopOptions,
   ...binaryBuilderOptions,
   ...cleanOptions,
   ...contentBuilderOptions

src/gulp/backstopAsync.ts

@@ -0,0 +1,45 @@
+import noop from 'lodash.noop';
+import getArgs from './args';
+import spawnAsync from './spawnAsync';
+import * as storybook from './storybook';
+
+/** Command definition for BackstopJS. */
+type BackstopCommand = 'reference' | 'test';
+
+/** CLI Options definition for BackstopJS. */
+interface IBackstopOptions {
+  /** Command for BackstopJS. */
+  backstop: BackstopCommand;
+}
+
+/** Default values of options for BackstopJS. */
+export const options = Object.freeze({ backstop: 'test' } as IBackstopOptions);
+
+/**
+ * Get CLI for BackstopJS.
+ * @param options command for BackstopJS, and port number.
+ */
+const getBackstopCLI = ({
+  command,
+  port
+}: {
+  command: BackstopCommand;
+  port?: number;
+}) =>
+  `backstop ${command} --configPath=backstop.config.js ${
+    port && port > 0 ? `--port=${port}` : ''
+  }`;
+
+/**
+ * Launch the BackstopJS.
+ *
+ * And launch the Storybook server on dynamic port if required.
+ */
+const backstopAsync = async () => {
+  const { exists, port } = await storybook.findServer();
+  const kill = exists ? noop : await storybook.launchNoWaitAsync(port);
+  await spawnAsync(getBackstopCLI({ command: getArgs().backstop, port }));
+  kill();
+};
+
+export default backstopAsync;