Merge lp:~bcsaller/juju-gui/component-framework into lp:juju-gui/experimental

[Benjamin Saller]

Micro Framework for Environment View

A subclass of Component will container 1 or more modules
which implement their own areas of application concern.

The pattern is that we can declaratively define event listeners
and respond to those across modules. For example A canvas click
might fire an application event 'clickedCanvas' which each module
can have subscribers for that do things like close menus and remove
drag lines, etc.

https://codereview.appspot.com/6828048/

[Benjamin Saller (bcsaller)]

Reviewers: mp+133391_code.launchpad.net,

Message:
Please take a look.

Description:
Micro Framework for Environment View

A subclass of Component will container 1 or more modules
which implement their own areas of application concern.

The pattern is that we can declaratively define event listeners
and respond to those across modules. For example A canvas click
might fire an application event 'clickedCanvas' which each module
can have subscribers for that do things like close menus and remove
drag lines, etc.

https://code.launchpad.net/~bcsaller/juju-gui/component-framework/+merge/133391

(do not edit description out of merge proposal)

Please review this at https://codereview.appspot.com/6828048/

Affected files:
   A [revision details]
   A app/assets/javascripts/d3-components.js
   M app/modules.js
   M test/index.html
   A test/test_d3_components.js

[Thiago Veronezi (tveronezi)]

Hi Ben!

Thanks for this branch. It seems you had a lot of fun doing this. :O)

This is a review for your main file. I still need to look at the tests.

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js
File app/assets/javascripts/d3-components.js (right):

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode40
app/assets/javascripts/d3-components.js:40: var Component =
Y.Base.create('Component', Y.Base, [], {
I like this code style. You could the same with the class above. I
mean...

var Module = ...

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode62
app/assets/javascripts/d3-components.js:62: //
this.after('containerChange', this.bind());
You could remove the commented code.

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode85
app/assets/javascripts/d3-components.js:85: options = options || {};
I don't like setting a value to one function parameter.

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode93
app/assets/javascripts/d3-components.js:93: this.modules[module.name] =
module;
Funny indentation

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode95
app/assets/javascripts/d3-components.js:95: var modEvents =
module.events;
Usually we have only one var per closure. Maybe you can declare the
variables in the first line and then attribute values to it here.

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode120
app/assets/javascripts/d3-components.js:120: var self = this,
It seems self is never used.

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode146
app/assets/javascripts/d3-components.js:146: if (typeof handler ===
'object') {
Null is also an object...
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/typeof

Maybe you could use "Lang" for all the cases here.

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode155
app/assets/javascripts/d3-components.js:155: return;
If that is an error, you could throw the exception.

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode160
app/assets/javascripts/d3-components.js:160: return;
If that is an error, you could throw the exception.

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode169
app/assets/javascripts/d3-components.js:169: for (var selector in
modEvents.scene) {
YUI utility?

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode191
app/assets/javascripts/d3-components.js:191: var resolvedHandler = {};
var declarations should be the first statement in the function body. I
dont know why lint didn't catch this.
http://javascript.crockford.com/code.html

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode215
app/assets/javascripts/d3-components.js:215: var filtered = {};
The blocks of scope in js are crazy. The filtered variable ...

[Thiago Veronezi (tveronezi)]

https://codereview.appspot.com/6828048/diff/1/test/test_d3_components.js
File test/test_d3_components.js (right):

https://codereview.appspot.com/6828048/diff/1/test/test_d3_components.js#newcode65
test/test_d3_components.js:65: comp.addModule(TestModule);
Nothing to assert?

https://codereview.appspot.com/6828048/

[Madison Scott-Clary (makyo)]

This all looks pretty good to me, with a few little
minors/clarifications and Thiago's comments. Eager to see it plugged
in, for sure.

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js
File app/assets/javascripts/d3-components.js (right):

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode44
app/assets/javascripts/d3-components.js:44: * Component collections
modules implementing various portions
Minor - should be 'collects', I think? Was just confusing.

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode52
app/assets/javascripts/d3-components.js:52: * - Providing suggestions
around updating the interactive portions
Minor - 'updating'

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode70
app/assets/javascripts/d3-components.js:70: *
Minor - Docs don't match method signature.

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode97
app/assets/javascripts/d3-components.js:97: this.bind(module.name);
Curious about the necessity for not doing Y.clone(module.events); here.
Clarity?

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode124
app/assets/javascripts/d3-components.js:124: phase = 'on',
phase is set and carefully handled, but not used. Is this a future
implementation thing?

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode189
app/assets/javascripts/d3-components.js:189: // where object
includes phase (before, on, after)
 From above, assuming this is the future use of phase?

https://codereview.appspot.com/6828048/

[Benjamin Saller (bcsaller)]

Thank you both for the review feedback. I've made the changes and will
propose again after getting these comments out.

The most significant change is the expanded handling around event
phases.

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js
File app/assets/javascripts/d3-components.js (right):

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode40
app/assets/javascripts/d3-components.js:40: var Component =
Y.Base.create('Component', Y.Base, [], {
On 2012/11/08 13:33:35, thiago wrote:
> I like this code style. You could the same with the class above. I
mean...

> var Module = ...

The linter complained that I didn't combine the var decls into one set,
I prefer the other style as well. I'll see if I cna get lint to shut up.

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode62
app/assets/javascripts/d3-components.js:62: //
this.after('containerChange', this.bind());
On 2012/11/08 13:33:35, thiago wrote:
> You could remove the commented code.

Done.

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode70
app/assets/javascripts/d3-components.js:70: *
On 2012/11/08 18:49:46, matthew.scott wrote:
> Minor - Docs don't match method signature.

Done.

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode85
app/assets/javascripts/d3-components.js:85: options = options || {};
On 2012/11/08 13:33:35, thiago wrote:
> I don't like setting a value to one function parameter.

I agree its questionable, questionable but common. Still, I can alter
it.

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode93
app/assets/javascripts/d3-components.js:93: this.modules[module.name] =
module;
On 2012/11/08 13:33:35, thiago wrote:
> Funny indentation

fixjsstyle must have done this, fixed.

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode95
app/assets/javascripts/d3-components.js:95: var modEvents =
module.events;
On 2012/11/08 13:33:35, thiago wrote:
> Usually we have only one var per closure. Maybe you can declare the
variables in
> the first line and then attribute values to it here.

Done.

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode97
app/assets/javascripts/d3-components.js:97: this.bind(module.name);
On 2012/11/08 18:49:46, matthew.scott wrote:
> Curious about the necessity for not doing Y.clone(module.events);
here.
> Clarity?

Its not needed now I think, it was because the Module was returning its
real dict and so there was a Module level instance with shared state
being used. This could leave subscriptions bound to all instances.
Module was changed to do the shallow copy of events in its init method
and this was removed.

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-components.js#newcode120
app/assets/javascripts/d3-components.js:120: var self = this,
On 2012/11/08 13:33:35, thiago wrote:
> It seems self is never used.

Done.

https://codereview.appspot.com/6828048/diff/1/app/assets/javascripts/d3-...

[lp:~bcsaller/juju-gui/component-framework]

227. By Benjamin Saller on 2012-11-09

use yui methods for iteration more places, support phase event bindings for custom events

228. By Benjamin Saller on 2012-11-09

lint

[Benjamin Saller (bcsaller)]

Please take a look.

https://codereview.appspot.com/6828048/

[lp:~bcsaller/juju-gui/component-framework]

229. By Benjamin Saller on 2012-11-09

basic assertion around addModule

[Madison Scott-Clary (makyo)]

Thanks for the changes! Looks good to me.

https://codereview.appspot.com/6828048/

[Thiago Veronezi (tveronezi)]

On 2012/11/09 18:07:59, matthew.scott wrote:
> Thanks for the changes! Looks good to me.

Thanks, Ben. It looks good to me too.

https://codereview.appspot.com/6828048/

[Benjamin Saller (bcsaller)]

*** Submitted:

Micro Framework for Environment View

A subclass of Component will container 1 or more modules
which implement their own areas of application concern.

The pattern is that we can declaratively define event listeners
and respond to those across modules. For example A canvas click
might fire an application event 'clickedCanvas' which each module
can have subscribers for that do things like close menus and remove
drag lines, etc.

R=thiago, matthew.scott, benjamin.saller
CC=
https://codereview.appspot.com/6828048

https://codereview.appspot.com/6828048/

=== added file 'app/assets/javascripts/d3-components.js'
--- app/assets/javascripts/d3-components.js	1970-01-01 00:00:00 +0000
+++ app/assets/javascripts/d3-components.js	2012-11-09 14:20:28 +0000
@@ -0,0 +1,401 @@
+'use strict';
+
+/**
+ * Provides a declarative structure around interactive D3
+ * applications.
+ *
+ * @module d3-components
+ **/
+
+YUI.add('d3-components', function(Y) {
+  var ns = Y.namespace('d3'),
+      L = Y.Lang;
+
+  var Module = Y.Base.create('Module', Y.Base, [], {
+    /**
+     * @property events
+     * @type {object}
+     **/
+    events: {
+      scene: {},
+      d3: {},
+      yui: {}
+    },
+
+    initializer: function() {
+      this.events = Y.merge(this.events);
+    }
+  }, {
+    ATTRS: {
+      component: {},
+      options: {},
+      container: {getter: function() {
+        return this.get('component').get('container');}}
+    }
+  });
+  ns.Module = Module;
+
+
+  var Component = Y.Base.create('Component', Y.Base, [], {
+    /**
+     * @class Component
+     *
+     * Component collects modules implementing various portions of an
+     * applications functionality in a declarative way. It is designed to allow
+     * both a cleaner separation of concerns and the ability to reuse the
+     * component in different ways.
+     *
+     * Component accomplishes these goals by:
+     *    - Control how events are bound and unbound.
+     *    - Providing patterns for update data cleanly.
+     *    - Providing suggestions around updating the interactive portions
+     *      of the application.
+     *
+     * @constructor
+     **/
+    initializer: function() {
+      this.modules = {};
+      this.events = {};
+    },
+
+    /**
+     * @method addModule
+     * @chainable
+     * @param {Module} ModClassOrInstance bound will be to this.
+     * @param {Object} options dict of options set as options attribute on
+     * module.
+     *
+     * Add a Module to this Component. This will bind its events and set up all
+     * needed event subscriptions.  Modules can return three sets of events
+     * that will be bound in different ways
+     *
+     *   - scene: {selector: event-type: handlerName} -> YUI styled event
+     *            delegation
+     *   - d3 {selector: event-type: handlerName} -> Bound using
+     *          specialized d3 event handling
+     *   - yui {event-type: handlerName} -> collection of global and custom
+     *          events the module reacts to.
+     **/
+
+    addModule: function(ModClassOrInstance, options) {
+      var config = options || {},
+          module = ModClassOrInstance,
+          modEvents;
+
+      if (!(ModClassOrInstance instanceof Module)) {
+        module = new ModClassOrInstance();
+      }
+      module.setAttrs({
+        component: this,
+        options: config});
+
+      this.modules[module.name] = module;
+
+      modEvents = module.events;
+      this.events[module.name] = modEvents;
+      this.bind(module.name);
+      return this;
+    },
+
+    /**
+     * @method removeModule
+     * @param {String} moduleName Module name to remove.
+     * @chainable
+     **/
+    removeModule: function(moduleName) {
+      this.unbind(moduleName);
+      delete this.events[moduleName];
+      delete this.modules[moduleName];
+      return this;
+    },
+
+    /**
+     * Internal implementation of
+     * binding both
+     * Module.events.scene and
+     * Module.events.yui.
+     **/
+    _bindEvents: function(modName) {
+      var self = this,
+          modEvents = this.events[modName],
+          module = this.modules[modName],
+          owns = Y.Object.owns,
+          container = this.get('container'),
+          subscriptions = [],
+          handlers,
+          handler;
+
+      function _bindEvent(name, handler, container, selector, context) {
+        // Adapt between d3 events and YUI delegates.
+        var d3Adaptor = function(evt) {
+          var selection = d3.select(evt.currentTarget.getDOMNode()),
+              d = selection.data()[0];
+          // This is a minor violation (extension)
+          // of the interface, but suits us well.
+          d3.event = evt;
+          return handler.call(
+              evt.currentTarget.getDOMNode(), d, context);
+        };
+
+        subscriptions.push(
+            Y.delegate(name, d3Adaptor, container, selector, context));
+      }
+
+      // Return a resolved handler object in the form
+      // {phase: str, callback: function}
+      function _normalizeHandler(handler, module, selector) {
+        var result = {};
+
+        if (L.isString(handler)) {
+          result.callback = module[handler];
+          result.phase = 'on';
+        }
+
+        if (L.isObject(handler)) {
+          result.phase = handler.phase || 'on';
+          result.callback = handler.callback;
+        }
+
+        if (L.isString(result.callback)) {
+          result.callback = module[result.callback];
+        }
+
+        if (!result.callback) {
+          console.error('No Event handler for', selector, modName);
+          return;
+        }
+        if (!L.isFunction(result.callback)) {
+          console.error('Unable to resolve a proper callback for',
+                        selector, handler, modName, result);
+          return;
+        }
+        return result;
+      }
+
+      this.unbind(modName);
+
+      // Bind 'scene' events
+      Y.each(modEvents.scene, function(handlers, selector, sceneEvents) {
+        Y.each(handlers, function(handler, trigger) {
+          handler = _normalizeHandler(handler, module, selector);
+          if (L.isValue(handler)) {
+            _bindEvent(trigger, handler.callback, container, selector, self);
+          }
+        });
+      });
+
+      // Bind 'yui' custom/global subscriptions
+      // yui: {str: str_or_function}
+      // TODO {str: str/func/obj}
+      //       where object includes phase (before, on, after)
+      if (modEvents.yui) {
+        // Resolve any 'string' handlers to methods on module.
+        Y.each(['after', 'before', 'on'], function(eventPhase) {
+          var resolvedHandler = {};
+          Y.each(modEvents.yui, function(handler, name) {
+            handler = _normalizeHandler(handler, module);
+            if (!handler || handler.phase !== eventPhase) {
+              return;
+            }
+            resolvedHandler[name] = handler.callback;
+          }, this);
+          // Bind resolved event handlers as a group.
+          if (Y.Object.keys(resolvedHandler).length) {
+            subscriptions.push(Y[eventPhase](resolvedHandler));
+          }
+        });
+      }
+      return subscriptions;
+    },
+
+    /**
+     * @method bind
+     *
+     * Internal. Called automatically by addModule.
+     **/
+    bind: function(moduleName) {
+      var eventSet = this.events,
+          filtered = {};
+
+      if (moduleName) {
+        filtered[moduleName] = eventSet[moduleName];
+        eventSet = filtered;
+      }
+
+      Y.each(Y.Object.keys(eventSet), function(name) {
+        this.events[name].subscriptions = this._bindEvents(name);
+      }, this);
+      return this;
+    },
+
+    /**
+     * Specialized handling of events only found in d3.
+     * This is again an internal implementation detail.
+     *
+     * Its worth noting that d3 events don't use a delegate pattern
+     * and thus must be bound to nodes present in a selection.
+     * For this reason binding d3 events happens after render cycles.
+     *
+     * @method _bindD3Events
+     * @param {String} modName Module name.
+     **/
+    _bindD3Events: function(modName) {
+      // Walk each selector for a given module 'name', doing a
+      // d3 selection and an 'on' binding.
+      var modEvents = this.events[modName],
+          owns = Y.Object.owns,
+          module;
+      if (!modEvents || !modEvents.d3) {
+        return;
+      }
+      modEvents = modEvents.d3;
+      module = this.modules[modName];
+
+      function _normalizeHandler(handler, module) {
+        if (handler && !L.isFunction(handler)) {
+          handler = module[handler];
+        }
+        return handler;
+      }
+
+      Y.each(modEvents, function(handlers, selector) {
+        Y.each(handlers, function(handler, trigger) {
+          handler = _normalizeHandler(handler, module);
+          d3.selectAll(selector).on(trigger, handler);
+        });
+      });
+    },
+
+    /**
+     * @method _unbindD3Events
+     *
+     * Internal Detail. Called by unbind automatically.
+     * D3 events follow a 'slot' like system. Setting the
+     * event to null unbinds existing handlers.
+     **/
+    _unbindD3Events: function(modName) {
+      var modEvents = this.events[modName],
+          owns = Y.Object.owns,
+          module;
+
+      if (!modEvents || !modEvents.d3) {
+        return;
+      }
+      modEvents = modEvents.d3;
+      module = this.modules[modName];
+
+      Y.each(modEvents, function(handlers, selector) {
+        Y.each(handlers, function(handler, trigger) {
+          d3.selectAll(selector).on(trigger, null);
+        });
+      });
+    },
+
+    /**
+     * @method unbind
+     * Internal. Called automatically by removeModule.
+     **/
+    unbind: function(moduleName) {
+      var eventSet = this.events,
+          filtered = {};
+
+      function _unbind(modEvents) {
+        Y.each(modEvents.subscriptions, function(handler) {
+          if (handler) {
+            handler.detach();
+          }
+        });
+        delete modEvents.subscriptions;
+      }
+
+      if (moduleName) {
+        filtered[moduleName] = eventSet[moduleName];
+        eventSet = filtered;
+      }
+      Y.each(Y.Object.values(eventSet), _unbind, this);
+      // Remove any d3 subscriptions as well.
+      this._unbindD3Events();
+
+      return this;
+    },
+
+    /**
+     * @method render
+     * @chainable
+     *
+     * Render each module bound to the canvas
+     */
+    render: function() {
+      var self = this;
+      function renderAndBind(module, name) {
+        if (module && module.render) {
+          module.render();
+        }
+        self._bindD3Events(name);
+      }
+
+      // If the container isn't bound to the DOM
+      // do so now.
+      this.attachContainer();
+      // Render modules.
+      Y.each(this.modules, renderAndBind, this);
+      return this;
+    },
+
+    /**
+     * @method attachContainer
+     * @chainable
+     *
+     * Called by render, conditionally attach container to the DOM if
+     * it isn't already. The framework calls this before module
+     * rendering so that d3 Events will have attached DOM elements. If
+     * your application doesn't need this behavior feel free to override.
+     **/
+    attachContainer: function() {
+      var container = this.get('container');
+      if (container && !container.inDoc()) {
+        Y.one('body').append(container);
+      }
+      return this;
+    },
+
+    /**
+     * @method detachContainer
+     *
+     * Remove container from DOM returning container. This
+     * is explicitly not chainable.
+     **/
+    detachContainer: function() {
+      var container = this.get('container');
+      if (container.inDoc()) {
+        container.remove();
+      }
+      return container;
+    },
+
+    /**
+     *
+     * @method update
+     * @chainable
+     *
+     * Update the data for each module
+     * see also the dataBinding event hookup
+     */
+    update: function() {
+      Y.each(Y.Object.values(this.modules), function(mod) {
+        mod.update();
+      });
+      return this;
+    }
+  }, {
+    ATTRS: {
+      container: {}
+    }
+
+  });
+  ns.Component = Component;
+}, '0.1', {
+  'requires': ['d3',
+    'base',
+    'array-extras',
+    'event']});

=== modified file 'app/modules.js'
--- app/modules.js	2012-11-01 13:30:58 +0000
+++ app/modules.js	2012-11-09 14:20:28 +0000
@@ -12,6 +12,9 @@
       modules: {
         'd3': {
           'fullpath': '/juju-ui/assets/javascripts/d3.v2.min.js'
+        },
+        'd3-components': {
+          fullpath: '/juju-ui/assets/javascripts/d3-components.js'
         }
       }
     },

=== modified file 'test/index.html'
--- test/index.html	2012-11-01 13:12:28 +0000
+++ test/index.html	2012-11-09 14:20:28 +0000
@@ -15,6 +15,7 @@
     mocha.setup({'ui': 'bdd', 'ignoreLeaks': false})
   </script>
 
+  <script src="test_d3_components.js"></script>
   <script src="test_env.js"></script>
   <script src="test_model.js"></script>
   <script src="test_notifications.js"></script>

=== added file 'test/test_d3_components.js'
--- test/test_d3_components.js	1970-01-01 00:00:00 +0000
+++ test/test_d3_components.js	2012-11-09 14:20:28 +0000
@@ -0,0 +1,173 @@
+'use strict';
+
+describe('d3-components', function() {
+  var Y, NS, TestModule, modA, state,
+      container, comp;
+
+  before(function(done) {
+    Y = YUI(GlobalConfig).use(['d3-components',
+      'node',
+      'node-event-simulate'],
+    function(Y) {
+      NS = Y.namespace('d3');
+
+      TestModule = Y.Base.create('TestModule', NS.Module, [], {
+        events: {
+          scene: { '.thing': {click: 'decorateThing'}},
+          d3: {'.target': {click: 'targetTarget'}},
+          yui: {
+            cancel: 'cancelHandler'
+          }
+        },
+
+        decorateThing: function(evt) {
+          state.thing = 'decorated';
+        },
+
+        targetTarget: function(evt) {
+          state.targeted = true;
+        },
+
+        cancelHandler: function(evt) {
+          state.cancelled = true;
+        }
+      });
+
+      done();
+    });
+  });
+
+  beforeEach(function() {
+    container = Y.Node.create('<div id="test" style="visibility: hidden">' +
+                              '<button class="thing"></button>' +
+                              '<button class="target"></button>' +
+                              '</div>');
+    state = {};
+  });
+
+  afterEach(function() {
+    container.remove();
+    container.destroy();
+    if (comp) {
+      comp.unbind();
+    }
+  });
+
+
+  it('should be able to create a component and add a module', function() {
+    comp = new NS.Component();
+    Y.Lang.isValue(comp).should.equal(true);
+  });
+
+  it('should be able to add and remove a module', function() {
+    comp = new NS.Component();
+    comp.setAttrs({container: container});
+    comp.addModule(TestModule);
+    Y.Lang.isValue(comp.events).should.equal(true);
+    Y.Lang.isValue(comp.modules).should.equal(true);
+  });
+
+  it('should be able to (un)bind module event subscriptions', function() {
+    comp = new NS.Component();
+    comp.setAttrs({container: container});
+    comp.addModule(TestModule);
+
+    // Test that default bindings work by simulating
+    Y.fire('cancel');
+    state.cancelled.should.equal(true);
+
+    // XXX: While on the plane I determined that things like
+    // 'events' are sharing state with other runs/modules.
+    // This must be fixed before this can work again.
+
+    // Manually set state, remove the module and test again
+    state.cancelled = false;
+    comp.removeModule('TestModule');
+
+    Y.fire('cancel');
+    state.cancelled.should.equal(false);
+
+    // Adding the module back again doesn't create any issues.
+    comp.addModule(TestModule);
+    Y.fire('cancel');
+    state.cancelled.should.equal(true);
+
+    // Simulated events on DOM handlers better work.
+    // These require a bound DOM element however
+    comp.render();
+    Y.one('.thing').simulate('click');
+    state.thing.should.equal('decorated');
+  });
+
+  it('should allow event bindings through the use of a declartive object',
+     function() {
+       comp = new NS.Component();
+       comp.setAttrs({container: container});
+
+       // Change test module to use rich captures on some events.
+       // This defines a phase for click (before, after, on (default))
+       // and also shows an inline callback (which is discouraged but allowed)
+       modA = new TestModule();
+       modA.events.scene['.thing'] = {
+         click: {phase: 'after',
+           callback: 'afterThing'},
+         dblclick: {phase: 'on',
+           callback: function(evt) {
+             state.dbldbl = true;
+           }}};
+       modA.afterThing = function(evt) {
+         state.clicked = true;
+       };
+       comp.addModule(modA);
+       comp.render();
+
+       Y.one('.thing').simulate('click');
+       state.clicked.should.equal(true);
+
+       Y.one('.thing').simulate('dblclick');
+       state.dbldbl.should.equal(true);
+
+     });
+
+  it('should support basic rendering from all modules',
+     function() {
+       var modA = new TestModule(),
+           modB = new TestModule();
+
+       comp = new NS.Component();
+       // Give each of these a render method that adds to container
+       modA.name = 'moda';
+       modA.render = function() {
+         this.get('container').append(Y.Node.create('<div id="fromA"></div>'));
+       };
+
+       modB.name = 'modb';
+       modB.render = function() {
+         this.get('container').append(Y.Node.create('<div id="fromB"></div>'));
+       };
+
+       comp.setAttrs({container: container});
+       comp.addModule(modA)
+        .addModule(modB);
+
+       comp.render();
+       Y.Lang.isValue(Y.one('#fromA')).should.equal(true);
+       Y.Lang.isValue(Y.one('#fromB')).should.equal(true);
+     });
+
+  it('should support d3 event bindings post render', function() {
+    comp = new NS.Component();
+    comp.setAttrs({container: container});
+
+    comp.addModule(TestModule);
+
+    comp.render();
+
+    // This is a d3 bound handler that occurs only after render.
+    container.one('.target').simulate('click');
+    state.targeted.should.equal(true);
+  });
+
+});
+
+