Debug Mode + Bug Fixes (#78)

* Add debug mode that outputs percy files to disk instead of uploading them.

* Don't allow async suites.

* Fix tests on Windows.

* Ensure context is always set to the percy root directory.

* Try to format error in debug.

* Add a few clarify notes when running debug mode.

.gitignore

@@ -51,3 +51,6 @@ packages/*/lib
 
 # Packed npm
 *.tgz
+
+# Percy debug files
+.percy-debug

packages/react-percy-api-client/src/build/createBuild.js

@@ -15,7 +15,7 @@ export default function createBuild(percyClient, resources) {
           resolve(response.body.data);
         },
         err => {
-          debug('error creating build: %s (%s)', err.error, err.statusCode);
+          debug('error creating build: %o (%s)', err.error, err.statusCode);
           reject(err);
         },
       );

packages/react-percy-ci/src/index.js

@@ -5,15 +5,21 @@ import createDebug from 'debug';
 import { EntryNames } from '@percy-io/react-percy-webpack';
 import Environment from './Environment';
 import findEntryPath from './findEntryPath';
+import fs from 'fs';
 import getHTML from './getHTML';
 import getQueryParamsForSnapshot from './getQueryParamsForSnapshot';
+import path from 'path';
 import reporter from './reporter';
 
 const debug = createDebug('react-percy:ci');
 
 export default async function run(percyConfig, webpackConfig, percyToken) {
   const client = new ApiClient(percyToken);
 
+  if (percyConfig.debug) {
+    reporter.log(chalk.blue.bold('DEBUG MODE: No snapshots will be uploaded to Percy'));
+  }
+
   reporter.log('Compiling...');
   debug('compiling assets');
   const assets = await compileAssets(percyConfig, webpackConfig);
@@ -31,6 +37,24 @@ export default async function run(percyConfig, webpackConfig, percyToken) {
     return;
   }
 
+  if (percyConfig.debug) {
+    const html = getHTML(assets);
+    const htmlPath = path.join(percyConfig.rootDir, '.percy-debug', 'index.html');
+    fs.writeFileSync(htmlPath, html);
+    reporter.log(
+      'Debug snapshots by opening %s in your browser and appending the following query strings:',
+      chalk.blue.underline(`file://${htmlPath}`),
+    );
+    snapshots.sort().forEach(snapshot => {
+      reporter.log(
+        `  %s    ${chalk.green('?snapshot=%s')}`,
+        snapshot.name,
+        encodeURIComponent(snapshot.name),
+      );
+    });
+    return;
+  }
+
   reporter.log(
     'Uploading %d snapshot%s to Percy',
     snapshots.length,

packages/react-percy-config/src/__tests__/normalize-tests.js

@@ -2,6 +2,26 @@ import defaults from '../defaults';
 import normalize from '../normalize';
 import path from 'path';
 
+it('sets `debug` to false given `debug` mode is off', () => {
+  const config = {};
+  const packageRoot = '/package/root';
+  const debug = false;
+
+  const normalizedConfig = normalize(config, packageRoot, debug);
+
+  expect(normalizedConfig.debug).toBe(false);
+});
+
+it('sets `debug` to true given `debug` mode is on', () => {
+  const config = {};
+  const packageRoot = '/package/root';
+  const debug = true;
+
+  const normalizedConfig = normalize(config, packageRoot, debug);
+
+  expect(normalizedConfig.debug).toBe(true);
+});
+
 it('sets `includeFiles` to an empty array given no `includeFiles` in config', () => {
   const config = {};
   const packageRoot = '/package/root';

packages/react-percy-config/src/index.js

@@ -2,8 +2,8 @@ import loadFromPackage from './loadFromPackage';
 import normalize from './normalize';
 import path from 'path';
 
-export default function readPercyConfig(packageRoot) {
+export default function readPercyConfig(packageRoot, debug) {
   const packageJsonPath = path.join(packageRoot, 'package.json');
   const config = loadFromPackage(packageJsonPath);
-  return normalize(config, packageRoot);
+  return normalize(config, packageRoot, debug);
 }

packages/react-percy-config/src/normalize.js

@@ -1,9 +1,11 @@
 import defaults from './defaults';
 import path from 'path';
 
-export default function normalize(config, packageRoot) {
+export default function normalize(config, packageRoot, debug = false) {
   const normalizedConfig = {};
 
+  normalizedConfig.debug = debug;
+
   normalizedConfig.includeFiles = config.includeFiles || [];
 
   normalizedConfig.renderer = config.renderer || defaults.renderer;

packages/react-percy-test-framework/package.json

@@ -16,6 +16,7 @@
   ],
   "dependencies": {
     "babel-runtime": "^6.26.0",
+    "debug": "^2.6.3",
     "promise-each": "^2.2.0"
   },
   "devDependencies": {

packages/react-percy-test-framework/src/interfaces/__tests__/__snapshots__/getCommonInterface-tests.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`snapshot throws if a snapshot with the same name has already been added to a different suite with the same name 1`] = `[Error: A snapshot named \`Suite: snapshot\` has already been added, please use a different name]`;
+exports[`snapshot throws if a snapshot with the same name has already been added to a different suite with the same name 1`] = `"A snapshot named \`Suite: snapshot\` has already been added, please use a different name"`;

packages/react-percy-test-framework/src/interfaces/__tests__/getCommonInterface-tests.js

@@ -59,86 +59,46 @@ describe('afterAll', () => {
 });
 
 describe('suite', () => {
-  it('adds the suite as a child of the current suite given no callback', async () => {
-    await common.suite('suite');
+  it('adds the suite as a child of the current suite given no callback', () => {
+    common.suite('suite');
 
     expect(suites[0].addSuite).toHaveBeenCalledWith(expect.any(Suite));
   });
 
-  it('adds the suite as a child of the current suite given synchronous callback', async () => {
-    await common.suite('suite', jest.fn());
+  it('adds the suite as a child of the current suite given callback', () => {
+    common.suite('suite', jest.fn());
 
     expect(suites[0].addSuite).toHaveBeenCalledWith(expect.any(Suite));
   });
 
-  it('adds the suite as a child of the current suite given asynchronous callback', async () => {
-    const fn = () => new Promise(resolve => setTimeout(resolve, 1));
-    await common.suite('suite', fn);
-
-    expect(suites[0].addSuite).toHaveBeenCalledWith(expect.any(Suite));
-  });
-
-  it('returns the new suite given no callback', async () => {
-    const newSuite = await common.suite('suite');
+  it('returns the new suite given no callback', () => {
+    const newSuite = common.suite('suite');
 
     expect(newSuite).toEqual(expect.any(Suite));
   });
 
-  it('returns the new suite given synchronous callback', async () => {
-    const newSuite = await common.suite('suite', jest.fn());
+  it('returns the new suite given callback', () => {
+    const newSuite = common.suite('suite', jest.fn());
 
     expect(newSuite).toEqual(expect.any(Suite));
   });
 
-  it('returns the new suite given asynchronous callback', async () => {
-    const fn = () => new Promise(resolve => setTimeout(resolve, 1));
-    const newSuite = await common.suite('suite', fn);
-
-    expect(newSuite).toEqual(expect.any(Suite));
-  });
-
-  it('sets the new suite as the current suite while executing synchronous callback', async () => {
+  it('sets the new suite as the current suite while executing callback', () => {
     let callbackCurrentSuite;
     const callback = jest.fn(() => {
       callbackCurrentSuite = suites[0];
     });
 
-    const newSuite = await common.suite('suite', callback);
-
-    expect(callbackCurrentSuite).toBe(newSuite);
-    expect(callbackCurrentSuite).not.toBe(suites[0]);
-  });
-
-  it('sets the new suite as the current suite while executing asynchronous callback', async () => {
-    let callbackCurrentSuite;
-    const callback = () =>
-      new Promise(resolve => {
-        setTimeout(() => {
-          callbackCurrentSuite = suites[0];
-          resolve();
-        }, 5);
-      });
-
-    const newSuite = await common.suite('suite', callback);
+    const newSuite = common.suite('suite', callback);
 
     expect(callbackCurrentSuite).toBe(newSuite);
     expect(callbackCurrentSuite).not.toBe(suites[0]);
   });
 
-  it('restores the current suite after executing synchronous callback', async () => {
+  it('restores the current suite after executing callback', () => {
     const currentSuite = suites[0];
 
-    const newSuite = await common.suite('suite', jest.fn());
-
-    expect(suites[0]).toBe(currentSuite);
-    expect(suites[0]).not.toBe(newSuite);
-  });
-
-  it('restores the current suite after executing asynchronous callback', async () => {
-    const currentSuite = suites[0];
-    const fn = () => new Promise(resolve => setTimeout(resolve, 1));
-
-    const newSuite = await common.suite('suite', fn);
+    const newSuite = common.suite('suite', jest.fn());
 
     expect(suites[0]).toBe(currentSuite);
     expect(suites[0]).not.toBe(newSuite);
@@ -158,31 +118,28 @@ describe('snapshot', () => {
     expect(() => common.snapshot('snapshot 2', jest.fn())).not.toThrow();
   });
 
-  it('throws if a snapshot with the same name has already been added to a different suite with the same name', async () => {
-    await common.suite('Suite', () => {
+  it('throws if a snapshot with the same name has already been added to a different suite with the same name', () => {
+    common.suite('Suite', () => {
       common.snapshot('snapshot', jest.fn());
     });
 
-    try {
-      await common.suite('Suite', () => {
+    expect(() =>
+      common.suite('Suite', () => {
         common.snapshot('snapshot', jest.fn());
-      });
-    } catch (e) {
-      expect(e).toMatchSnapshot();
-      return;
-    }
-
-    throw new Error('adding second snapshot should have thrown');
+      }),
+    ).toThrowErrorMatchingSnapshot();
   });
 
-  it('does not throw if a snapshot with the same name has already been added to a different suite with a different name', async () => {
-    await common.suite('Suite 1', () => {
+  it('does not throw if a snapshot with the same name has already been added to a different suite with a different name', () => {
+    common.suite('Suite 1', () => {
       common.snapshot('snapshot', jest.fn());
     });
 
-    await common.suite('Suite 2', () => {
-      common.snapshot('snapshot', jest.fn());
-    });
+    expect(() =>
+      common.suite('Suite 2', () => {
+        common.snapshot('snapshot', jest.fn());
+      }),
+    ).not.toThrow();
   });
 
   it('adds snapshot to the current suite', () => {

packages/react-percy-test-framework/src/interfaces/getCommonInterface.js

@@ -1,6 +1,9 @@
+import createDebug from 'debug';
 import Snapshot from '../Snapshot';
 import Suite from '../Suite';
 
+const debug = createDebug('react-percy:test-framework');
+
 export default function getCommonInterface(suites) {
   const snapshotNames = {};
 
@@ -17,16 +20,22 @@ export default function getCommonInterface(suites) {
     afterAll(fn) {
       suites[0].addAfterAll(fn);
     },
-    async suite(title, options, fn) {
+    suite(title, options, fn) {
       if (typeof fn === 'undefined') {
         fn = options;
         options = undefined;
       }
       const suite = new Suite(title, options);
       suites[0].addSuite(suite);
       suites.unshift(suite);
+      if (suite.fullTitle()) {
+        debug('processing suite %o', suite.fullTitle());
+      }
       if (typeof fn === 'function') {
-        await fn.call(suite);
+        fn.call(suite);
+      }
+      if (suite.fullTitle()) {
+        debug('finished processing suite %o', suite.fullTitle());
       }
       suites.shift();
       return suite;
@@ -41,6 +50,7 @@ export default function getCommonInterface(suites) {
         );
       }
       snapshotNames[snapshotFullTitle] = true;
+      debug('added snapshot %o', snapshotFullTitle);
       return snapshot;
     },
   };