Merge pull request #146 from hypothesis/debug-middleware

Add application state debugging utility

h/static/scripts/annotation-ui.js

@@ -43,6 +43,8 @@ var sessionReducer = require('./reducers/session');
 var viewerReducer = require('./reducers/viewer');
 var util = require('./reducers/util');
 
+var debugMiddleware = require('./reducers/debug-middleware');
+
 /**
  * Redux middleware which triggers an Angular change-detection cycle
  * if no cycle is currently in progress.
@@ -75,6 +77,7 @@ module.exports = function ($rootScope, settings) {
     // This is used to implement actions which have side effects or are
     // asynchronous (see https://github.com/gaearon/redux-thunk#motivation)
     thunk,
+    debugMiddleware,
     angularDigestMiddleware.bind(null, $rootScope)
   );
   var store = redux.createStore(reducers.update, reducers.init(settings),

h/static/scripts/reducers/debug-middleware.js

+'use strict';
+
+/**
+ * A debug utility that prints information about internal application state
+ * changes to the console.
+ *
+ * Debugging is enabled by setting `window.debug` to a truthy value.
+ *
+ * When enabled, every action that changes application state will be printed
+ * to the console, along with the application state before and after the action
+ * was handled.
+ */
+function debugMiddleware(store) {
+  /* eslint-disable no-console */
+  var serial = 0;
+
+  return function (next) {
+    return function (action) {
+      if (!window.debug) {
+        next(action);
+        return;
+      }
+
+      ++serial;
+
+      var groupTitle = action.type + ' (' + serial.toString() + ')';
+      console.group(groupTitle);
+      console.log('Prev State:', store.getState());
+      console.log('Action:', action);
+
+      next(action);
+
+      console.log('Next State:', store.getState());
+      console.groupEnd(groupTitle);
+    };
+  };
+  /* eslint-enable no-console */
+}
+
+module.exports = debugMiddleware;

h/static/scripts/reducers/test/debug-middleware-test.js

+'use strict';
+
+/* eslint-disable no-console */
+
+var redux = require('redux');
+
+var debugMiddleware = require('../debug-middleware');
+
+function id(state) {
+  return state;
+}
+
+describe('debug middleware', function () {
+  var store;
+
+  beforeEach(function () {
+    sinon.stub(console, 'log');
+    sinon.stub(console, 'group');
+    sinon.stub(console, 'groupEnd');
+
+    var enhancer = redux.applyMiddleware(debugMiddleware);
+    store = redux.createStore(id, {}, enhancer);
+  });
+
+  afterEach(function () {
+    console.log.restore();
+    console.group.restore();
+    console.groupEnd.restore();
+
+    delete window.debug;
+  });
+
+  it('logs app state changes when "window.debug" is truthy', function () {
+    window.debug = true;
+    store.dispatch({type: 'SOMETHING_HAPPENED'});
+    assert.called(console.log);
+  });
+
+  it('logs nothing when "window.debug" is falsey', function () {
+    store.dispatch({type: 'SOMETHING_HAPPENED'});
+    assert.notCalled(console.log);
+  });
+});