Code review comment for lp:~frankban/juju-gui/bug-1090046-resize

Reviewers: mp+139959_code.launchpad.net,

Message:
Please take a look.

Description:
Fix GUI breakage on browser resizing.

Fixed how yui events are handled by the component framework.
Also added two tests:
- ensure that the module synthetic events binding works;
- ensure that the custom events 'beforePageSizeRecalculation'
   and 'afterPageSizeRecalculation' are correctly fired by
   the environment view when the browser is resized.

QA: resize the browser, open the charm panel, resize the
     browser again, close the charm panel, resize again,
     re-open the panel...

https://code.launchpad.net/~frankban/juju-gui/bug-1090046-resize/+merge/139959

(do not edit description out of merge proposal)

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

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

Index: [revision details]
=== added file '[revision details]'
--- [revision details] 2012-01-01 00:00:00 +0000
+++ [revision details] 2012-01-01 00:00:00 +0000
@@ -0,0 +1,2 @@
+Old revision: <email address hidden>
+New revision:
<email address hidden>

Index: test/test_d3_components.js
=== modified file 'test/test_d3_components.js'
--- test/test_d3_components.js 2012-11-09 14:17:58 +0000
+++ test/test_d3_components.js 2012-12-14 15:25:55 +0000
@@ -129,6 +129,24 @@

       });

+ it('should correctly handle synthetic event bindings', function(done) {
+ comp = new NS.Component();
+ comp.setAttrs({container: container});
+ modA = new TestModule();
+ var resized = false;
+ modA.windowResizeHandler = function(evt) {
+ resized = true;
+ };
+ modA.events.yui.windowresize = 'windowResizeHandler';
+ comp.addModule(modA);
+ var subscription = Y.after('windowresize', function(evt) {
+ subscription.detach();
+ assert.isTrue(resized);
+ done();
+ });
+ Y.one('window').simulate('resize');
+ });
+
    it('should support basic rendering from all modules',
       function() {
         var modA = new TestModule(),

Index: test/test_environment_view.js
=== modified file 'test/test_environment_view.js'
--- test/test_environment_view.js 2012-12-05 18:37:01 +0000
+++ test/test_environment_view.js 2012-12-14 15:25:55 +0000
@@ -103,7 +103,7 @@
      });

      beforeEach(function(done) {
- container = Y.Node.create('<div id="test-container" />');
+ container = Y.Node.create('<div
/>').setStyle('visibility', 'hidden');
        Y.one('body').prepend(container);
        db = new models.Database();
        db.on_delta({data: environment_delta});
@@ -118,6 +118,22 @@
        done();
      });

+ it('must handle the window resize event', function(done) {
+ var view = new views.environment({container: container, db: db});
+ view.render();
+ var beforeResizeEventFired = false;
+ Y.once('beforePageSizeRecalculation', function() {
+ // This event must be fired by
views.MegaModule.setSizesFromViewport.
+ beforeResizeEventFired = true;
+ });
+ Y.once('afterPageSizeRecalculation', function() {
+ // This event must be fired by
views.MegaModule.setSizesFromViewport.
+ assert.isTrue(beforeResizeEventFired);
+ done();
+ });
+ Y.one('window').simulate('resize');
+ });
+
      // Ensure the environment view loads properly
      it('must be able to render service blocks and relations',
          function() {

Index: app/assets/javascripts/d3-components.js
=== modified file 'app/assets/javascripts/d3-components.js'
--- app/assets/javascripts/d3-components.js 2012-12-11 15:35:25 +0000
+++ app/assets/javascripts/d3-components.js 2012-12-14 15:25:55 +0000
@@ -231,9 +231,12 @@
            // Bind resolved event handlers as a group.
            if (Y.Object.keys(resolvedHandler).length) {
              Y.each(resolvedHandler, function(handler, name) {
- subscriptions.push(Y[eventPhase](name,
- handler.callback,
- handler.context));
+ // DOM and synthetic events are subscribed using Y.on with
+ // this signature: Y.on(event, callback, target, context).
+ // For this reason, it is not possible here to just pass the
+ // context as third argument.
+ var callback = Y.bind(handler.callback, handler.context);
+ subscriptions.push(Y[eventPhase](name, callback));
              });
            }
          });