Merge lp:~rharding/launchpad/registry_yui35 into lp:launchpad

[Richard Harding]

Update the registery JS tests for YUI 3.5

= Summary =

This updates the registry JS test files to pass in YUI 3.5.

Note that 98% of this is around the distroseriesdifferences_details.js as they
required some extra work. Once again I've got a giant branch diff, but a
significant portion is just moving the content around.

I've tried to list explicit points of changes made in the Implementation
notes.

== Implementation Notes ==

The changes in the other files were mostly just fixing quotes around selectors
using attributes.

test_distroseriesdifference_details notes

#8
The tests didn't mock out IO requests. This leads to distracting console
errors because ajax requests come back failed/etc and attempt to perform some
dom manipulation with a dom that's been emptied due to tearDown() methods.

In order to work correctly with MockIo this was tweaked. See comment in code.

#32
See above, this is due to the tweak in the namespace.io.

#136
There were some forms already built from the .html file using x-template, but
there were other large bits of the html constructed from JS. I moved all of
the large blocks of html into the .html file as x-template and adjusted setup
scripts accordingly. (See #335, #416, )

#1155
I moved all utility methods to the top of the file. I find that in order for
others to come along and reuse utility methods, it's best if they're at the
top of the file for visibility. If there's a helper 500 lines in between
tests, it'll never been seen/reused.

So anything that isn't a test is moved up to the top of the test file starting
here. This includes the code that pulls the html blocks from the x-template
sections (See #1213 onward)

#1235
Most of these tests had no tearDown method at all. The setup method was
calling Y.one('#placeholder').empty().append(). Teardown should do teardown
and so the .empty in all cases was moved to a tearDown method. In many cases
there were still things not torn down and I had to fight a lot of cross test
pollution. This also tears down the introduction of the mockio added.

#1546
There was a method assertWillBeFired that just failed and caused test
pollution. I honestly never got to the total bottom of what was up, but the
code is actually firing two events and so something was getting messed up. I
inlined the assertion and changed it to actually count that it got two hits
based on the html generated (two rows). This seems to have cleaned things up
at the expense of ditching the old assert method. This is used in the next
three tests.

#2470
These are just moved tests. I didn't change these up.

== LoC Qualification ==

It's a negative LoC change.

[j.c.sackett (jcsackett)]

Looks good. Thanks Rick.

review: Approve

=== modified file 'lib/lp/registry/javascript/distroseriesdifferences_details.js'
--- lib/lp/registry/javascript/distroseriesdifferences_details.js	2011-08-30 13:22:03 +0000
+++ lib/lp/registry/javascript/distroseriesdifferences_details.js	2012-07-05 17:22:27 +0000
@@ -16,7 +16,12 @@
  */
 namespace.lp_client = new Y.lp.client.Launchpad();
 
-namespace.io = Y.io;
+// Our MockIo() needs to be called and then .io() called on it. To keep scope
+// of this in the io() mock method we need to not just pass the method, but
+// the object. In this way the call to namespace.io will be:
+// Y.io()
+// MockIo.io()
+namespace.io = Y;
 
 function ExpandableRowWidget(config) {
     ExpandableRowWidget.superclass.constructor.apply(this, arguments);
@@ -48,7 +53,7 @@
     },
 
     expander_handler: function(e) {
-        e.preventDefault();
+        e.halt();
         var parsed = this.parse_row_data();
         this._toggle.toggleClass('treeCollapsed').toggleClass('treeExpanded');
 
@@ -183,7 +188,7 @@
                 'source_name': source_name
             }
         };
-        namespace.io(uri, config);
+        namespace.io.io(uri, config);
 
     }
 });
@@ -351,11 +356,10 @@
      */
      blacklist_submit_handler: function(method_name, blacklist_all, comment,
                                         target) {
+        var self = this;
         this.lock();
-
         var diff_rows = this.relatedRows;
 
-        var self = this;
         var config = {
             on: {
                 success: function(updated_entry, args) {
@@ -854,7 +858,7 @@
 */
 namespace.get_number_of_packages = function() {
     return Y.all(
-        'input[name=field.selected_differences]').filter(':checked').size();
+        'input[name="field.selected_differences"]').filter(':checked').size();
 };
 
 /**
@@ -890,7 +894,7 @@
 */
 namespace.get_packages_summary = function() {
     var all_inputs = Y.all(
-        'input[name=field.selected_differences]').filter(':checked');
+        'input[name="field.selected_differences"]').filter(':checked');
     var nb_inputs = all_inputs.size();
     var summary = Y.Node.create('<div><ul></ul></div>'),
         summary_ul = summary.one('ul');

=== modified file 'lib/lp/registry/javascript/team.js'
--- lib/lp/registry/javascript/team.js	2012-06-05 22:08:17 +0000
+++ lib/lp/registry/javascript/team.js	2012-07-05 17:22:27 +0000
@@ -183,12 +183,12 @@
  * @param visibility
  */
 module.visibility_changed_subscription = function(visibility) {
-    var widget_label = Y.one("[for=field.subscriptionpolicy]");
+    var widget_label = Y.one("[for='field.subscriptionpolicy']");
     if (!Y.Lang.isValue(widget_label)) {
         return;
     }
     var widget = widget_label.ancestor('div').one('.radio-button-widget');
-    widget.all("td input[name=field.subscriptionpolicy]")
+    widget.all("td input[name='field.subscriptionpolicy']")
             .each(function(choice_node) {
         var input_row = choice_node.ancestor('tr');
         var help_row = input_row.next(function (node) {
@@ -218,7 +218,7 @@
  * @param visibility
  */
 module.visibility_changed_visibility = function(visibility) {
-    var widget_label = Y.one("[for=field.visibility]");
+    var widget_label = Y.one("[for='field.visibility']");
     if (!Y.Lang.isValue(widget_label)) {
         return;
     }

=== modified file 'lib/lp/registry/javascript/tests/test_distroseriesdifferences_details.html'
--- lib/lp/registry/javascript/tests/test_distroseriesdifferences_details.html	2012-03-14 04:41:36 +0000
+++ lib/lp/registry/javascript/tests/test_distroseriesdifferences_details.html	2012-07-05 17:22:27 +0000
@@ -21,6 +21,10 @@
 
       <script type="text/javascript"
               src="../../../../../build/js/lp/app/testing/testrunner.js"></script>
+      <script type="text/javascript"
+              src="../../../../../build/js/lp/app/testing/helpers.js"></script>
+      <script type="text/javascript"
+              src="../../../../../build/js/lp/app/testing/mockio.js"></script>
 
       <link rel="stylesheet" href="../../../app/javascript/testing/test.css" />
 
@@ -47,8 +51,7 @@
     </head>
     <body class="yui3-skin-sam">
         <ul id="suites">
-            <!-- <li>lp.large_indicator.test</li> -->
-            <li>lp.distroseriesdifferences_details.test</li>
+            <li>lp.registry.distroseriesdifferences_details.test</li>
         </ul>
 
         <h1>Testing the DistroSeriesDifferenceDetails javascript</h1>
@@ -56,8 +59,8 @@
         <h2>Errors</h2>
         <div id="errors"></div>
 
-        <div id="placeholder" style="display:none;">
-        </div>
+        <table id="placeholder" style="display:none;">
+        </table>
 
         <script type="text/x-template" id="derivedtd-template">
           <td id="derived_row">
@@ -90,5 +93,94 @@
             <td class="latest-comment-fragment"></td>
           </tr>
         </script>
-    </body>
+
+        <script type="text/x-template" id="blacklist_html">
+            <div class="blacklist-options" style="float:left">
+              <dl>
+                <dt>Ignored:</dt>
+                <dd>
+                  <form>
+                    <div>
+                      <div class="value">
+                        <label for="field.blacklist_options.0">
+                          <input type="radio" value="NONE"
+                            name="field.blacklist_options"
+                            id="field.blacklist_options.0" checked="checked"
+                            class="radioType">&nbsp;No</input>
+                        </label><br>
+                        <label for="field.blacklist_options.1">
+                          <input type="radio" value="BLACKLISTED_ALWAYS"
+                           name="field.blacklist_options"
+                            id="field.blacklist_options.1" class="radioType">
+                            &nbsp;All versions</input>
+                        </label><br>
+                        <label for="field.blacklist_options.2">
+                          <input type="radio" value="BLACKLISTED_CURRENT"
+                            name="field.blacklist_options"
+                            id="field.blacklist_options.2"
+                            class="radioType">&nbsp;These versions</input>
+                        </label>
+                      </div>
+                      <input type="hidden" value="1"
+                        name="field.blacklist_options-empty-marker" />
+                    </div>
+                  </form>
+                </dd>
+              </dl>
+            </div>
+       </script>
+
+       <script type="text/x-template" id="blacklist_extra_row">
+          <tr id="extra_row">
+            <td>
+              <div class="diff-extra-container">
+                <div>
+                <dl>
+                <dt class="package-diff-placeholder">
+                 <span class="package-diff-compute-request">
+                  <a class="js-action sprite add" href="">
+                    Compute differences from last common version:
+                  </a>
+                </span></dt>
+                <dd>
+                  <ul class="package-diff-status">
+                    <li>
+                      <span id="derived" class="PENDING">
+                       1.2.1 to Derilucid version: 1.2.4
+                      </span>
+                    </li>
+                    <li>
+                      <span id="parent" class="request-derived-diff">
+                        1.2.1 to Lucid version: 1.2.3
+                      </span>
+                    </li>
+                  </ul>
+                </dd>
+                </dl>
+                </div>
+                {blacklist_html}
+                <div class="boardComment ">
+                  <div class="boardCommentDetails">
+                    <a class="sprite person" href="/~mark">Mark S.</a>
+                    wrote on 2010-06-26
+                  </div>
+                  <div class="boardCommentBody">Body</div>
+                </div>
+                <div class="add-comment-placeholder evolution">
+                  <a href="" class="widget-hd js-action sprite add">
+                  Add comment</a>
+                </div>
+              </div>
+            </td>
+          </tr>
+      </script>
+      <script type="text/x-template" id="blacklist_whole_table">
+          <table class="listing">
+              <tbody>
+                   {row}
+                   {extra_row}
+               </tbody>
+          </table>
+      </script>
+  </body>
 </html>

=== modified file 'lib/lp/registry/javascript/tests/test_distroseriesdifferences_details.js'
--- lib/lp/registry/javascript/tests/test_distroseriesdifferences_details.js	2012-02-21 22:46:28 +0000
+++ lib/lp/registry/javascript/tests/test_distroseriesdifferences_details.js	2012-07-05 17:22:27 +0000
@@ -1,1110 +1,1027 @@
-/* Copyright 2009-2012 Canonical Ltd.  This software is licensed under the
-   GNU Affero General Public License version 3 (see the file LICENSE). */
-
-YUI().use(
-        'lp.testing.runner', 'test', 'console', 'node-event-simulate',
-        'lp.soyuz.base', "lp.anim", "lazr.formoverlay", "lazr.effects",
-        'lp.soyuz.dynamic_dom_updater', 'event-simulate', "io-base",
-        'lp.registry.distroseriesdifferences_details', function(Y) {
-
-var suite = new Y.Test.Suite("Distroseries differences Tests");
-var dsd_details = Y.lp.registry.distroseriesdifferences_details;
-var dsd_uri = '/duntu/dwarty/+source/evolution/+difference/ubuntu/warty';
-
-var row_html = Y.one('#localpackagediffs-template').getContent();
-var derivedtd_html = Y.one('#derivedtd-template').getContent();
-
-/**
- * Utility function to create a row of the diff pages.
- *
- * @param package_name {String} The name of the package for this row.
- * @param parent_version {String} The version for the package in the parent
- *     series.
- * @param derived_version {String} The version for the package in the derived
- *     series.
- * @missing_row {Boolean} If false, generate a row of the +localpackagediffs
- *      page, if true, generate a row of te +missingpackages page.
- */
-var createRow = function(package_name, parent_version, derived_version,
-                         missing_row) {
-    var derivedtd = '';
-    if (!missing_row) {
-        derivedtd = Y.substitute(
-            derivedtd_html,
-            {package_name: package_name,
-             derived_version: derived_version
-            });
-    }
-    return Y.substitute(
-            row_html,
-            {package_name: package_name,
-             parent_version: parent_version,
-             derived_version: derived_version,
-             derivedrow: derivedtd
-            });
-};
-
-var row = createRow(
-    'evolution', '2.0.9-1', '2.0.8-4', false);
-
-var testExpandableRowWidget = {
-
-    name: 'expandable-row-widget',
-
-    setUp: function() {
-        Y.one("#placeholder")
-            .empty()
-            .append(Y.Node.create(row));
-        this.toggle = Y.one('a.toggle-extra');
-     },
-
-    test_initializer: function() {
-       var row = new dsd_details.ExpandableRowWidget({toggle: this.toggle});
-       Y.Assert.isTrue(this.toggle.hasClass('treeCollapsed'));
-       Y.Assert.isTrue(this.toggle.hasClass('sprite'));
-    },
-
-    test_parse_row_data: function() {
-        var row = new dsd_details.ExpandableRowWidget({toggle: this.toggle});
-        var parsed = row.parse_row_data();
-        var res = {
-            source_name: 'evolution',
-            parent_series_name: 'warty',
-            parent_distro_name: 'ubuntu',
-            nb_columns: 7};
-        Y.ObjectAssert.areEqual(res, parsed);
-    },
-
-    test_expander_handler_adds_new_row: function() {
-        var row = new dsd_details.ExpandableRowWidget({toggle: this.toggle});
-        row._toggle.simulate('click');
-        var new_row = row._row.next();
-        Y.Assert.isTrue(new_row.hasClass('evolution'));
-        Y.Assert.isTrue(new_row.hasClass('diff-extra'));
-        Y.Assert.areEqual(7, new_row.one('td').getAttribute('colspan'));
-    },
-
-    test_expand_handler_toggles_hiding: function() {
-        var row = new dsd_details.ExpandableRowWidget({toggle: this.toggle});
-        Y.Assert.isTrue(row._toggle.hasClass('treeCollapsed'));
-        // First click opens up the new row.
-        row._toggle.simulate('click');
-        var new_row = row._row.next();
-        Y.Assert.isTrue(row._toggle.hasClass('treeExpanded'));
-        Y.Assert.isFalse(new_row.hasClass('unseen'));
-        Y.Assert.isTrue(new_row.one('div').hasClass('diff-extra-container'));
-        // Second click hides it.
-        row._toggle.simulate('click');
-        Y.Assert.isTrue(row._toggle.hasClass('treeCollapsed'));
-        Y.Assert.isTrue(new_row.hasClass('unseen'));
-    }
-
-};
-
-var blacklist_html = [
-    '<div class="blacklist-options" style="float:left">',
-    '  <dl>',
-    '    <dt>Ignored:</dt>',
-    '    <dd>',
-    '      <form>',
-    '        <div>',
-    '          <div class="value">',
-    '            <label for="field.blacklist_options.0">',
-    '              <input type="radio" value="NONE" ',
-    '                name="field.blacklist_options"',
-    '                id="field.blacklist_options.0" checked="checked" ',
-    '                class="radioType">&nbsp;No</input>',
-    '            </label><br>',
-    '            <label for="field.blacklist_options.1">',
-    '              <input type="radio" value="BLACKLISTED_ALWAYS" ',
-    '               name="field.blacklist_options"',
-    '                id="field.blacklist_options.1" class="radioType">',
-    '                &nbsp;All versions</input>',
-    '            </label><br>',
-    '            <label for="field.blacklist_options.2">',
-    '              <input type="radio" value="BLACKLISTED_CURRENT"',
-    '                name="field.blacklist_options"',
-    '                id="field.blacklist_options.2"',
-    '                class="radioType">&nbsp;These versions</input>',
-    '            </label>',
-    '          </div>',
-    '          <input type="hidden" value="1" ',
-    '            name="field.blacklist_options-empty-marker" />',
-    '        </div>',
-    '      </form>',
-    '    </dd>',
-    '  </dl>',
-    '</div>'
-    ].join('');
-
-var extra_row = [
-    '<tr id="extra_row">',
-    '  <td>',
-    '    <div class="diff-extra-container">',
-    '      <div>',
-    '      <dl>',
-    '      <dt class="package-diff-placeholder">',
-    '       <span class="package-diff-compute-request">',
-    '        <a class="js-action sprite add" href="">',
-    '          Compute differences from last common version:',
-    '        </a>',
-    '      </span></dt>',
-    '      <dd>',
-    '        <ul class="package-diff-status">',
-    '          <li>',
-    '            <span id="derived" class="PENDING">',
-    '             1.2.1 to Derilucid version: 1.2.4',
-    '            </span>',
-    '          </li>',
-    '          <li>',
-    '            <span id="parent" class="request-derived-diff">',
-    '              1.2.1 to Lucid version: 1.2.3',
-    '            </span>',
-    '          </li>',
-    '        </ul>',
-    '      </dd>',
-    '      </dl>',
-    '      </div>',
-    blacklist_html,
-    '      <div class="boardComment ">',
-    '        <div class="boardCommentDetails">',
-    '          <a class="sprite person" href="/~mark">Mark S.</a>',
-    '          wrote on 2010-06-26',
-    '        </div>',
-    '        <div class="boardCommentBody">Body</div>',
-    '      </div>',
-    '      <div class="add-comment-placeholder evolution">',
-    '        <a href="" class="widget-hd js-action sprite add">',
-    '        Add comment</a>',
-    '      </div>',
-    '    </div>',
-    '  </td>',
-    '</tr>'
-    ].join('');
-
-var whole_table = [
-    '<table class="listing"><tbody>',
-    row,
-    extra_row,
-    '</tbody></table>'
-    ].join('');
-
-var testPackageDiffUpdate = {
-
-    name: 'package-diff',
-
-    setUp: function() {
-        Y.one("#placeholder")
-            .empty()
-            .append(Y.Node.create(extra_row));
-    },
-
-    test_vocabulary_helper: function() {
-        // The vocabulary helper extracts the selected item from a
-        // jsonified vocabulary.
-        var voc = [
-            {"token": "PENDING", "title": "Pending"},
-            {"token": "COMPLETED", "selected": true, "title": "Completed"},
-            {"token": "FAILED", "title": "Failed"}];
-        var res = dsd_details.get_selected(voc);
-        Y.Assert.areEqual('COMPLETED', res.token);
-        Y.Assert.areEqual('Completed', res.title);
-        var voc_nothing_selected = [
-            {"token": "PENDING", "title": "Pending"},
-            {"token": "COMPLETED", "title": "Completed"},
-            {"token": "FAILED", "title": "Failed"}];
-        Y.Assert.isUndefined(dsd_details.get_selected(voc_nothing_selected));
-    },
-
-    test_add_msg_node: function() {
-        var msg_txt = 'Exemple text';
-        var msg_node = Y.Node.create(msg_txt);
-        placeholder = Y.one('#placeholder');
-        dsd_details.add_msg_node(placeholder, msg_node);
-        Y.Assert.areEqual(
-            placeholder.one('.package-diff-placeholder').get('innerHTML'),
-            msg_txt);
-    }
-};
-
-var assertAllDisabled = function(node, selector) {
-    var all_input_status = node.all(selector).get('disabled');
-    Y.ArrayAssert.doesNotContain(false, all_input_status);
-};
-
-var assertAllEnabled = function(node, selector) {
-    var all_input_status = node.all(selector).get('disabled');
-    Y.ArrayAssert.doesNotContain(true, all_input_status);
-};
-
-function Comment() {}
-
-Comment.prototype.get = function(key) {
-    var data = {
-        comment_date: "2011-08-08T13:15:50.636269+00:00",
-        body_text: 'This is the comment',
-        self_link:  ["https://lp.net/api/devel/u/d//+source/",
-                     "evolution/+difference/ubuntu/warty/comments/6"
-                    ].join(''),
-        web_link: ["https://lp.net/d/d/+source/evolution/",
-                   "+difference/ubuntu/warty/comments/6"
-                  ].join('')
-        };
-    return data[key];
-};
-
-var testBlacklistWidget = {
-
-    name: 'package-diff-update-interaction',
-
-    setUp: function() {
-        Y.one("#placeholder")
-            .empty()
-            .append(Y.Node.create(whole_table));
-        this.node = Y.one('.blacklist-options');
-        this.commentWidget = null;
-        this.widget = new dsd_details.BlacklistWidget(
-            {srcNode: this.node,
-             sourceName: 'evolution',
-             dsdLink: '/a/link',
-             commentWidget: this.commentWidget
-            });
-        // Set the animation duration to 0.1 to avoid having to wait for its
-        // completion for too long.
-        this.widget.ANIM_DURATION = 0.1;
-     },
-
-    test_initializer: function() {
-        Y.Assert.areEqual(this.node, this.widget.get('srcNode'));
-        Y.Assert.areEqual('evolution', this.widget.sourceName);
-        Y.Assert.areEqual('/a/link', this.widget.dsdLink);
-        Y.Assert.areEqual(
-            this.latestCommentContainer,
-            this.widget.latestCommentContainer);
-        Y.Assert.areEqual(this.commentWidget, this.widget.commentWidget);
-    },
-
-    test_wire_blacklist_click: function() {
-        var input = Y.one(
-            'div.blacklist-options input[value="BLACKLISTED_CURRENT"]');
-        var fired = false;
-
-        var show_comment_overlay = function(target) {
-            fired = true;
-            Y.Assert.areEqual(input, target);
-        };
-        this.widget.show_comment_overlay = show_comment_overlay;
-        input.simulate('click');
-
-        Y.Assert.isTrue(fired);
-    },
-
-    test_wire_blacklist_changed: function() {
-        var fired = false;
-
-        var blacklist_submit_handler = function(arg1, arg2, arg3, arg4) {
-            fired = true;
-            Y.Assert.areEqual(1, arg1);
-            Y.Assert.areEqual(2, arg2);
-            Y.Assert.areEqual(3, arg3);
-            Y.Assert.areEqual(4, arg4);
-        };
-        this.widget.blacklist_submit_handler = blacklist_submit_handler;
-        this.widget.fire('blacklist_changed', 1, 2, 3, 4);
-
-        Y.Assert.isTrue(fired);
-    },
-
-    test_containing_rows: function() {
-        var expected = [Y.one('.evolution'), Y.one('#extra_row')];
-        Y.ArrayAssert.itemsAreEqual(expected, this.widget.relatedRows);
-    },
-
-    test_show_comment_overlay_creates_overlay: function() {
-        var input = Y.one('div.blacklist-options input');
-        var overlay = this.widget.show_comment_overlay(input);
-        // Check overlay's structure.
-        Y.Assert.isInstanceOf(Y.lazr.FormOverlay, overlay);
-        Y.Assert.isNotNull(overlay.form_node.one('textarea'));
-        Y.Assert.areEqual(
-            'OK',
-            overlay.form_node.one('button[type="submit"]').get('text'));
-        Y.Assert.areEqual(
-            'Cancel',
-            overlay.form_node.one('button[type="button"]').get('text'));
-        Y.Assert.isTrue(overlay.get('visible'));
-    },
-
-    test_show_comment_overlay_cancel_hides_overlay: function() {
-        var input = Y.one('div.blacklist-options input');
-        var overlay = this.widget.show_comment_overlay(input);
-        var cancel_button = overlay.form_node.one('button[type="button"]');
-        Y.Assert.isTrue(overlay.get('visible'));
-        cancel_button.simulate('click');
-        Y.Assert.isFalse(overlay.get('visible'));
-     },
-
-    test_show_comment_overlay_ok_hides_overlay: function() {
-        var input = Y.one('div.blacklist-options input');
-        var overlay = this.widget.show_comment_overlay(input);
-        Y.Assert.isTrue(overlay.get('visible'));
-        overlay.form_node.one('button[type="submit"]').simulate('click');
-        Y.Assert.isFalse(overlay.get('visible'));
-    },
-
-    test_show_comment_overlay_fires_event: function() {
-        var input = Y.one('div.blacklist-options input[value="NONE"]');
-        input.set('checked', true);
-        var overlay = this.widget.show_comment_overlay(input);
-        var event_fired = false;
-        var method = null;
-        var all = null;
-        var comment = null;
-        var target = null;
-
-        var handleEvent = function(e, e_method, e_all, e_comment, e_target) {
-            event_fired = true;
-            method = e_method;
-            all = e_all;
-            comment = e_comment;
-            target = e_target;
-        };
-
-        this.widget.on("blacklist_changed", handleEvent, this.widget);
-
-        overlay.form_node.one('textarea').set('text', 'Test comment');
-        overlay.form_node.one('button[type="submit"]').simulate('click');
-
-        Y.Assert.isTrue(event_fired);
-        Y.Assert.areEqual('unblacklist', method);
-        Y.Assert.areEqual(false, all);
-        Y.Assert.areEqual('Test comment', comment);
-        Y.Assert.areEqual(input, target);
-    },
-
-    test_show_comment_overlay_fires_event_blacklist_all: function() {
-        var input = Y.one(
-            'div.blacklist-options input[value="BLACKLISTED_ALWAYS"]');
-        input.set('checked', true);
-        var overlay = this.widget.show_comment_overlay(input);
-        var method = null;
-        var all = null;
-        var target = null;
-
-        var handleEvent = function(e, e_method, e_all, e_comment, e_target) {
-            method = e_method;
-            all = e_all;
-            target = e_target;
-        };
-        this.widget.on("blacklist_changed", handleEvent, this.widget);
-        overlay.form_node.one('button[type="submit"]').simulate('click');
-
-        Y.Assert.areEqual('blacklist', method);
-        Y.Assert.areEqual(true, all);
-        Y.Assert.areEqual(input, target);
-    },
-
-    test_show_comment_overlay_fires_event_blacklist: function() {
-        var input = Y.one(
-            'div.blacklist-options input[value="BLACKLISTED_CURRENT"]');
-        input.set('checked', true);
-        var overlay = this.widget.show_comment_overlay(input);
-        var method = null;
-        var all = null;
-        var target = null;
-
-        var handleEvent = function(e, e_method, e_all, e_comment, e_target) {
-            method = e_method;
-            all = e_all;
-            target = e_target;
-        };
-        this.widget.on("blacklist_changed", handleEvent, this.widget);
-        overlay.form_node.one('button[type="submit"]').simulate('click');
-
-        Y.Assert.areEqual('blacklist', method);
-        Y.Assert.areEqual(false, all);
-        Y.Assert.areEqual(input, target);
-    },
-
-    assertIsLocked: function() {
-        var node = this.widget.get('srcNode');
-        Y.Assert.isNotNull(node.one('img[src="/@@/spinner"]'));
-        assertAllDisabled(node, 'div.blacklist-options input');
-    },
-
-    assertIsUnlocked: function() {
-        var node = this.widget.get('srcNode');
-        Y.Assert.isNull(node.one('img[src="/@@/spinner"]'));
-        assertAllEnabled(node, 'div.blacklist-options input');
-    },
-
-    test_lock: function() {
-        this.widget.lock();
-        this.assertIsLocked();
-    },
-
-    test_unlock: function() {
-        this.widget.unlock();
-        this.assertIsUnlocked();
-    },
-
-    test_lock_unlock: function() {
-        this.widget.lock();
-        this.widget.unlock();
-        this.assertIsUnlocked();
-    },
-
-    patchNamedPost: function(method_name, expected_parameters) {
-        var comment_entry = new Comment();
-        var self = this;
-        dsd_details.lp_client.named_post = function(url, func, config) {
-            Y.Assert.areEqual(func, method_name);
-            Y.ObjectAssert.areEqual(expected_parameters, config.parameters);
-            self.assertIsLocked();
-            config.on.success(comment_entry);
-            self.assertIsUnlocked();
-        };
-    },
-
-    assertWillBeFired: function(event_name) {
-        var self = this;
-        this._fired = false;
-        var listener = function(e) {
-            // Only call resume if the test is waiting, this is
-            // required because we sometimes hit this code before
-            // we had the chance to call this.wait().
-            if (Y.Test.Runner._waiting) {
-                self.resume(function(){});
-            }
-            else {
-                self._fired = true;
-            }
-        };
-        this.widget.on(event_name, listener);
-    },
-
-    test_blacklist_submit_handler_blacklist_simple: function() {
-        var mockCommentWidget = Y.Mock();
-        Y.Mock.expect(mockCommentWidget, {
-            method: "display_new_comment",
-            args: [Y.Mock.Value.Object]
-        });
-        this.widget.commentWidget = mockCommentWidget;
-
-        this.patchNamedPost(
-            'blacklist',
-            {comment: 'Test comment', all: false});
-        var input = Y.one(
-            'div.blacklist-options input[value="BLACKLISTED_CURRENT"]');
-        input.set('checked', false);
-
-        this.assertWillBeFired('blacklisting_animation_ended');
-        this.widget.blacklist_submit_handler(
-            'blacklist', false, "Test comment", input);
-
-        Y.Assert.isTrue(input.get('checked'));
-        // Only wait for resume to happen if the event has not been fired
-        // yet.
-        if (!this._fired) {
-            this.wait(1000);
-        }
-    },
-
-    test_blacklist_submit_handler_blacklist_null_comment_widget: function() {
-        // The widget can cope with a null commentWidget.
-        Y.Assert.isNull(this.widget.commentWidget);
-        var input = Y.one(
-            'div.blacklist-options input[value="BLACKLISTED_CURRENT"]');
-        this.widget.blacklist_submit_handler(
-            'blacklist', false, "Test comment", input);
-    },
-
-    test_blacklist_submit_handler_blacklist_all: function() {
-        var mockCommentWidget = Y.Mock();
-        Y.Mock.expect(mockCommentWidget, {
-            method: "display_new_comment",
-            args: [Y.Mock.Value.Object]
-        });
-        this.widget.commentWidget = mockCommentWidget;
-
-        this.patchNamedPost(
-            'blacklist',
-            {comment: 'Test comment', all: true});
-        var input = Y.one(
-            'div.blacklist-options input[value="BLACKLISTED_ALWAYS"]');
-        input.set('checked', false);
-
-        this.assertWillBeFired('blacklisting_animation_ended');
-        this.widget.blacklist_submit_handler(
-            'blacklist', true, "Test comment", input);
-
-        Y.Assert.isTrue(input.get('checked'));
-        // Only wait for resume to happen if the event has not been fired
-        // yet.
-        if (!this._fired) {
-            this.wait(1000);
-        }
-    },
-
-    test_blacklist_submit_handler_unblacklist: function() {
-        var mockCommentWidget = Y.Mock();
-        Y.Mock.expect(mockCommentWidget, {
-            method: "display_new_comment",
-            args: [Y.Mock.Value.Object]
-        });
-        this.widget.commentWidget = mockCommentWidget;
-
-        this.patchNamedPost(
-            'unblacklist',
-            {comment: 'Test comment', all: true});
-        var input = Y.one('div.blacklist-options input[value="NONE"]');
-        input.set('checked', false);
-
-        this.assertWillBeFired('blacklisting_animation_ended');
-        this.widget.blacklist_submit_handler(
-            'unblacklist', true, "Test comment", input);
-
-        Y.Assert.isTrue(input.get('checked'));
-        // Only wait for resume to happen if the event has not been fired
-        // yet.
-        if (!this._fired) {
-            this.wait(1000);
-        }
-    },
-
-    test_blacklist_submit_handler_failure: function() {
-        var self = this;
-        dsd_details.lp_client.named_post = function(url, func, config) {
-            self.assertIsLocked();
-            config.on.failure();
-            self.assertIsUnlocked();
-        };
-        var input = Y.one('div.blacklist-options input');
-        input.set('checked', false);
-        this.widget.blacklist_submit_handler(
-            null, 'unblacklist', true, "Test comment", input);
-    }
-};
-
-var testAddCommentWidget = {
-
-    name: 'test-add-comment-widget',
-
-    setUp: function() {
-        Y.one("#placeholder")
-            .empty()
-            .append(Y.Node.create(whole_table));
-        this.latestCommentContainer = Y.one('td.latest-comment-fragment');
-        this.addCommentPlaceholder = Y.one('div.add-comment-placeholder');
-        this.apiUri = '/testuri/';
-        this.widget = new dsd_details.AddCommentWidget({
-            srcNode: this.node,
-            apiUri: this.apiUri,
-            latestCommentContainer: this.latestCommentContainer,
-            addCommentPlaceholder: this.addCommentPlaceholder
-            });
-        this.widget.render(this.addCommentPlaceholder);
-    },
-
-    tearDown: function() {
-        this.widget.destroy();
-    },
-
-    test_initializer: function() {
-        Y.Assert.areEqual(
-            this.latestCommentContainer, this.widget.latestCommentContainer);
-        Y.Assert.areEqual(
-            this.addCommentPlaceholder, this.widget.addCommentPlaceholder);
-        Y.Assert.areEqual(
-            this.apiUri, this.widget.apiUri);
-    },
-
-    test_comment_text_getter: function() {
-        this.widget.get('srcNode').one('textarea').set('value', 'Content');
-        Y.Assert.areEqual(
-            'Content',
-            this.widget.get('comment_text'));
-    },
-
-    test_comment_text_setter: function() {
-        this.widget.set('comment_text', 'Content');
-        Y.Assert.areEqual(
-            'Content',
-            this.widget.get('srcNode').one('textarea').get('value'));
-    },
-
-    test_slide_in: function() {
-        // 'Manually' open the widget.
-        var node = this.widget.get('srcNode');
-        node.one('div.widget-bd').setStyle('height', '1000px');
-        var self = this;
-        var listener = function(e) {
-            self.resume(function(){
-                fired = true;
-            });
-        };
-        this.widget.on('slid_in', listener);
-        this.widget.slide_in();
-        this.wait(1000);
-    },
-
-    test_slide_out: function() {
-        var fired = false;
-        var self = this;
-        var listener = function(e) {
-            self.resume(function(){
-                fired = true;
-            });
-        };
-        this.widget.on('slid_out', listener);
-        this.widget.slide_out();
-        this.wait(1000);
-    },
-
-    assertIsLocked: function() {
-        var node = this.widget.get('srcNode');
-        Y.Assert.isNotNull(node.one('img[src="/@@/spinner"]'));
-        assertAllDisabled(node, 'textarea, button');
-    },
-
-    assertIsUnlocked: function() {
-        var node = this.widget.get('srcNode');
-        Y.Assert.isNull(node.one('img[src="/@@/spinner"]'));
-        assertAllEnabled(node, 'textarea, button');
-    },
-
-    test_lock: function() {
-        this.widget.lock();
-        this.assertIsLocked();
-    },
-
-    test_unlock: function() {
-        this.widget.unlock();
-        this.assertIsUnlocked();
-    },
-
-    test_lock_unlock: function() {
-        this.widget.lock();
-        this.widget.unlock();
-        this.assertIsUnlocked();
-    },
-
-    test_wire_click_add_comment_link: function() {
-        var fired = false;
-        var input = this.widget.get('srcNode').one('a.widget-hd');
-        var self = this;
-        var listener = function(e) {
-            self.resume(function(){
-                fired = true;
-            });
-        };
-        this.widget.on('slid_out', listener);
-        input.simulate('click');
-        this.wait();
-    },
-
-    test_wire_comment_added_calls_display_new_comment: function() {
-        var fired = false;
-        var comment_entry = new Comment();
-
-        var display_new_comment = function(entry) {
-            fired = true;
-            Y.ObjectAssert.areEqual(comment_entry, entry);
-        };
-        this.widget.display_new_comment = display_new_comment;
-        this.widget.fire('comment_added', comment_entry);
-
-        Y.Assert.isTrue(fired);
-     },
-
-    test_wire_click_button_calls_add_comment_handler: function() {
-        var input = this.widget.get('srcNode').one('button');
-        var fired = false;
-
-        var add_comment_handler = function() {
-            fired = true;
-        };
-        this.widget.add_comment_handler = add_comment_handler;
-        input.simulate('click');
-
-        Y.Assert.isTrue(fired);
-    },
-
-    test_clean: function() {
-        var comment_text = 'Content';
-        this.widget.get('srcNode').one('textarea').set('value', comment_text);
-        var self = this;
-        var comment_entry = new Comment();
-        var post_called = false;
-        dsd_details.lp_client.named_post = function(url, method, config) {
-            post_called = true;
-            Y.Assert.areEqual('addComment', method);
-            Y.Assert.areEqual(comment_text, config.parameters.comment);
-            config.on.success(comment_entry);
-        };
-        // The event comment_added will be fired.
-        var event_fired = false;
-        event_handler = function(e) {
-            event_fired = true;
-            Y.ObjectAssert.areEqual(comment_entry, e.details[0]);
-        };
-        this.widget.on('comment_added', event_handler);
-
-        this.widget.add_comment_handler();
-
-        Y.Assert.areEqual('', this.widget.get('comment_text'));
-        Y.Assert.isTrue(post_called);
-        Y.Assert.isTrue(event_fired);
-    },
-
-    test_display_new_comment_success: function() {
-        var comment_html = '<span id="new_comment">Comment content.</span>';
-        var self = this;
-        var comment_entry = new Comment();
-        var get_called = false;
-        dsd_details.lp_client.get = function(url, config) {
-            get_called = true;
-            config.on.success(comment_html);
-        };
-        // The method update_latest_comment will be called with the right
-        // arguments.
-        var update_latest_called = false;
-        dsd_details.update_latest_comment = function(entry, node) {
-            update_latest_called = true;
-            Y.ObjectAssert.areEqual(comment_entry, entry);
-            Y.Assert.areEqual(self.widget.latestCommentContainer, node);
-        };
-        this.widget.display_new_comment(comment_entry);
-
-        // The new comment has been added to the list of comments.
-        Y.Assert.areEqual(
-            'Comment content.',
-            this.widget.addCommentPlaceholder.previous().get('text'));
-        Y.Assert.isTrue(get_called);
-        Y.Assert.isTrue(update_latest_called);
-    },
-
-    test_display_new_comment_failure: function() {
-        var comment_html = '<span id="new_comment">Comment content.</span>';
-        var comment_entry = new Comment();
-        var get_called = false;
-        dsd_details.lp_client.get = function(url, config) {
-            get_called = true;
-            config.on.failure(comment_html);
-        };
-        // The method update_latest_comment won't.
-        var update_latest_called = false;
-        dsd_details.update_latest_comment = function(entry, node) {
-            update_latest_called = true;
-        };
-        this.widget.display_new_comment(comment_entry);
-
-        // The new comment has *not* been added to the list of comments.
-        // The last existing comment is still displayed.
-        Y.Assert.areEqual(
-            'Mark S.',
-            this.widget.addCommentPlaceholder.previous().one(
-                'a.person').get('text'));
-        Y.Assert.isTrue(get_called);
-        Y.Assert.isFalse(update_latest_called);
-    },
-
-    test_add_comment_handler_success: function() {
-        var comment_text = 'Content';
-        this.widget.get('srcNode').one('textarea').set('value', comment_text);
-        var comment_entry = new Comment();
-        var post_called = false;
-        dsd_details.lp_client.named_post = function(url, method, config) {
-            post_called = true;
-            Y.Assert.areEqual('addComment', method);
-            Y.Assert.areEqual(comment_text, config.parameters.comment);
-            config.on.success(comment_entry);
-        };
-        // The event comment_added will be fired.
-        var event_fired = false;
-        event_handler = function(e) {
-            event_fired = true;
-            Y.ObjectAssert.areEqual(comment_entry, e.details[0]);
-        };
-        this.widget.on('comment_added', event_handler);
-
-        this.widget.add_comment_handler();
-
-        Y.Assert.areEqual('', this.widget.get('comment_text'));
-        Y.Assert.isTrue(post_called);
-        Y.Assert.isTrue(event_fired);
-        this.assertIsUnlocked();
-    },
-
-    test_add_comment_handler_failure: function() {
-        var comment_text = 'Content';
-        this.widget.get('srcNode').one('textarea').set('value', comment_text);
-        var post_called = false;
-        dsd_details.lp_client.named_post = function(url, method, config) {
-            post_called = true;
-            config.on.failure();
-        };
-        this.widget.add_comment_handler();
-
-        // The content has not been cleaned.
-        Y.Assert.areEqual('Content', this.widget.get('comment_text'));
-        Y.Assert.isTrue(post_called);
-        this.assertIsUnlocked();
-    },
-
-    test_add_comment_handler_empty: function() {
-        // An empty comment is treated as a mistake.
-        var comment_text = '';
-        this.widget.get('srcNode').one('textarea').set('value', comment_text);
-        var self = this;
-        var comment_entry = new Comment();
-        var post_called = false;
-        dsd_details.lp_client.named_post = function(url, method, config) {
-            post_called = true;
-        };
-        this.widget.add_comment_handler();
-        Y.Assert.isFalse(post_called);
-    }
-
-};
-
-var testPackageDiffUpdateInteraction = {
-
-    name: 'package-diff-update-interaction',
-
-    setUp: function() {
-        Y.one("#placeholder")
-            .empty()
-            .append(Y.Node.create(whole_table));
-        var first_poll = true;
-        pending_voc = [
-            {"token": "PENDING", "selected": true, "title": "Pending"},
-            {"token": "COMPLETED", "title": "Completed"},
-            {"token": "FAILED", "title": "Failed"}];
-        completed_voc = [
-            {"token": "PENDING", "title": "Pending"},
-            {"token": "COMPLETED", "selected": true, "title": "Completed"},
-            {"token": "FAILED", "title": "Failed"}];
-
-        // Monkey patch request.
-        dsd_details.lp_client.named_post = function(url, func, config) {
-            config.on.success();};
-        dsd_details.lp_client.named_get = function(url, func, config) {
-            config.on.success();};
-        dsd_details.lp_client.get = function(uri, config) {
-            if (first_poll === true) {
-                first_poll = false;
-                config.on.success(pending_voc);
-            }
-            else {
-                config.on.success(completed_voc);
-            }
-        };
-        dsd_details.poll_interval = 100;
-    },
-
-    test_request_wrong_click: function() {
-        // Click on the placeholder has no effect.
-        // The listeners are on the link with class
-        // '.package-diff-compute-request'.
-        // bug=746277.
-        var placeholder = Y.one('#placeholder');
-        placeholder
-            .one('#derived')
+/* Copyright (c) 2009-2012 Canonical Ltd. All rights reserved. */
+
+// XXX: rharding 2012-07-03 bug=1020671: The tests should be adjusted to not
+// require the 1000s wait waiting for the animation. We should allow a
+// skip_animation or some other method of allowing tests to run synchronously
+// without wait times.
+
+YUI.add('lp.registry.distroseriesdifferences_details.test', function (Y) {
+    var module = Y.lp.registry.distroseriesdifferences_details;
+
+    /**
+     * Utility function to create a row of the diff pages.
+     *
+     * @param package_name {String} The name of the package for this row.
+     * @param parent_version {String} The version for the package in the parent
+     *     series.
+     * @param derived_version {String} The version for the package in the derived
+     *     series.
+     * @missing_row {Boolean} If false, generate a row of the +localpackagediffs
+     *      page, if true, generate a row of te +missingpackages page.
+     */
+    var create_row = function(package_name, parent_version, derived_version,
+                             missing_row) {
+        var derivedtd = '';
+        if (!missing_row) {
+            derivedtd = Y.substitute(derivedtd_html, {
+                package_name: package_name,
+                derived_version: derived_version
+            });
+        }
+        return Y.substitute( row_html, {
+            package_name: package_name,
+            parent_version: parent_version,
+            derived_version: derived_version,
+            derivedrow: derivedtd
+        });
+    };
+
+    var assertAllDisabled = function(node, selector) {
+        var all_input_status = node.all(selector).get('disabled');
+        Y.ArrayAssert.doesNotContain(false, all_input_status);
+    };
+
+    var assertAllEnabled = function(node, selector) {
+        var all_input_status = node.all(selector).get('disabled');
+        Y.ArrayAssert.doesNotContain(true, all_input_status);
+    };
+
+    var Comment = function () {
+        this.data = {
+            comment_date: "2011-08-08T13:15:50.636269+00:00",
+            body_text: 'This is the comment',
+            self_link:  ["https://lp.net/api/devel/u/d//+source/",
+                         "evolution/+difference/ubuntu/warty/comments/6"
+                        ].join(''),
+            web_link: ["https://lp.net/d/d/+source/evolution/",
+                       "+difference/ubuntu/warty/comments/6"
+                      ].join('')
+        };
+        this.get = function (key) {
+            return this.data[key];
+        };
+    };
+
+    var dsd_uri = '/duntu/dwarty/+source/evolution/+difference/ubuntu/warty';
+    var row_html = Y.one('#localpackagediffs-template').getContent();
+    var derivedtd_html = Y.one('#derivedtd-template').getContent();
+    var blacklist_html = Y.one('#blacklist_html').getContent();
+    var extra_row = Y.one('#blacklist_extra_row').getContent();
+    extra_row = Y.substitute(extra_row, {
+        blacklist_html: blacklist_html
+    });
+    var whole_table = Y.one('#blacklist_whole_table').getContent();
+    whole_table = Y.substitute(whole_table, {
+        row: create_row('evolution', '2.0.9-1', '2.0.8-4', false),
+        extra_row: extra_row
+    });
+
+    var tests = Y.namespace('lp.registry.distroseriesdifferences_details.test');
+    tests.suite = new Y.Test.Suite('lp.registry.distroseriesdifferences_details Tests');
+    tests.suite.add(new Y.Test.Case({
+        name: 'expandable-row-widget',
+        setUp: function() {
+            module.io = new Y.lp.testing.mockio.MockIo();
+            var row = create_row('evolution', '2.0.9-1', '2.0.8-4', false);
+            Y.one("#placeholder").append(Y.Node.create(row));
+            this.toggle = Y.one('a.toggle-extra');
+        },
+
+        tearDown: function () {
+            Y.one('#placeholder').empty();
+            delete this.toggle;
+            module.io = Y.io;
+        },
+
+        test_initializer: function() {
+            var row = new module.ExpandableRowWidget({toggle: this.toggle});
+            Y.Assert.isTrue(this.toggle.hasClass('treeCollapsed'));
+            Y.Assert.isTrue(this.toggle.hasClass('sprite'));
+        },
+
+        test_parse_row_data: function() {
+            var row = new module.ExpandableRowWidget({toggle: this.toggle});
+            var parsed = row.parse_row_data();
+            var res = {
+                source_name: 'evolution',
+                parent_series_name: 'warty',
+                parent_distro_name: 'ubuntu',
+                nb_columns: 7};
+            Y.ObjectAssert.areEqual(res, parsed);
+        },
+
+        test_expander_handler_adds_new_row: function() {
+            var row = new module.ExpandableRowWidget({toggle: this.toggle});
+            row._toggle.simulate('click');
+            var new_row = row._row.next();
+            Y.Assert.isTrue(new_row.hasClass('evolution'));
+            Y.Assert.isTrue(new_row.hasClass('diff-extra'));
+            Y.Assert.areEqual(7, new_row.one('td').getAttribute('colspan'));
+        },
+
+        test_expand_handler_toggles_hiding: function() {
+            var row = new module.ExpandableRowWidget({toggle: this.toggle});
+            Y.Assert.isTrue(row._toggle.hasClass('treeCollapsed'));
+            // First click opens up the new row.
+            row._toggle.simulate('click');
+            var new_row = row._row.next();
+            Y.Assert.isTrue(row._toggle.hasClass('treeExpanded'), 'is expanded');
+            Y.Assert.isFalse(new_row.hasClass('unseen'), 'not unseen');
+            Y.Assert.isTrue(new_row.one('div').hasClass('diff-extra-container'));
+            // Second click hides it.
+            row._toggle.simulate('click');
+            Y.Assert.isTrue(row._toggle.hasClass('treeCollapsed'), 'is collapsed');
+            Y.Assert.isTrue(new_row.hasClass('unseen'), 'is unseen');
+        }
+    }));
+
+    tests.suite.add(new Y.Test.Case({
+        name: 'package-diff',
+        setUp: function() {
+            Y.one("#placeholder").append(Y.Node.create(extra_row));
+        },
+
+        tearDown: function () {
+            Y.one('#placeholder').empty();
+        },
+
+        test_vocabulary_helper: function() {
+            // The vocabulary helper extracts the selected item from a
+            // jsonified vocabulary.
+            var voc = [
+                {"token": "PENDING", "title": "Pending"},
+                {"token": "COMPLETED", "selected": true, "title": "Completed"},
+                {"token": "FAILED", "title": "Failed"}];
+            var res = module.get_selected(voc);
+            Y.Assert.areEqual('COMPLETED', res.token);
+            Y.Assert.areEqual('Completed', res.title);
+            var voc_nothing_selected = [
+                {"token": "PENDING", "title": "Pending"},
+                {"token": "COMPLETED", "title": "Completed"},
+                {"token": "FAILED", "title": "Failed"}];
+            Y.Assert.isUndefined(module.get_selected(voc_nothing_selected));
+        },
+
+        test_add_msg_node: function() {
+            var msg_txt = 'Exemple text';
+            var msg_node = Y.Node.create(msg_txt);
+            placeholder = Y.one('#placeholder');
+            module.add_msg_node(placeholder, msg_node);
+            Y.Assert.areEqual(
+                placeholder.one('.package-diff-placeholder').get('innerHTML'),
+                msg_txt);
+        }
+    }));
+
+    tests.suite.add(new Y.Test.Case({
+        name: 'package-diff-update-interaction',
+        setUp: function() {
+            Y.one("#placeholder").append(Y.Node.create(whole_table));
+            this.node = Y.one('.blacklist-options');
+            this.commentWidget = null;
+            this.widget = new module.BlacklistWidget({
+                srcNode: this.node,
+                sourceName: 'evolution',
+                dsdLink: '/a/link',
+                commentWidget: this.commentWidget
+            });
+            // Set the animation duration to 0.1 to avoid having to wait for its
+            // completion for too long.
+            this.widget.ANIM_DURATION = 0.1;
+        },
+
+        tearDown: function () {
+            Y.one('#placeholder').empty();
+            delete this.widget;
+
+            if (!Y.Lang.isUndefined(this._fired)) {
+                delete this._fired;
+            }
+        },
+
+        assertIsLocked: function() {
+            var node = this.widget.get('srcNode');
+            Y.Assert.isNotNull(node.one('img[src="/@@/spinner"]'));
+            assertAllDisabled(node, 'div.blacklist-options input');
+        },
+
+        assertIsUnlocked: function() {
+            var node = this.widget.get('srcNode');
+            Y.Assert.isNull(node.one('img[src="/@@/spinner"]'));
+            assertAllEnabled(node, 'div.blacklist-options input');
+        },
+
+        test_lock: function() {
+            this.widget.lock();
+            this.assertIsLocked();
+        },
+
+        test_unlock: function() {
+            this.widget.unlock();
+            this.assertIsUnlocked();
+        },
+
+        test_lock_unlock: function() {
+            this.widget.lock();
+            this.widget.unlock();
+            this.assertIsUnlocked();
+        },
+
+        patchNamedPost: function(method_name, expected_parameters) {
+            var that = this;
+            var comment_entry = new Comment();
+            module.lp_client.named_post = function(url, func, config) {
+                Y.Assert.areEqual(func, method_name);
+                Y.ObjectAssert.areEqual(expected_parameters, config.parameters);
+                that.assertIsLocked();
+                config.on.success(comment_entry);
+                that.assertIsUnlocked();
+            };
+        },
+
+        test_initializer: function() {
+            Y.Assert.areEqual(this.node, this.widget.get('srcNode'));
+            Y.Assert.areEqual('evolution', this.widget.sourceName);
+            Y.Assert.areEqual('/a/link', this.widget.dsdLink);
+            Y.Assert.areEqual(
+                this.latestCommentContainer,
+                this.widget.latestCommentContainer);
+            Y.Assert.areEqual(this.commentWidget, this.widget.commentWidget);
+        },
+
+        test_wire_blacklist_click: function() {
+            var input = Y.one(
+                'div.blacklist-options input[value="BLACKLISTED_CURRENT"]');
+            var fired = false;
+
+            var show_comment_overlay = function(target) {
+                fired = true;
+                Y.Assert.areEqual(input, target);
+            };
+            this.widget.show_comment_overlay = show_comment_overlay;
+            input.simulate('click');
+
+            Y.Assert.isTrue(fired);
+        },
+
+        test_wire_blacklist_changed: function() {
+            var fired = false;
+
+            var blacklist_submit_handler = function(arg1, arg2, arg3, arg4) {
+                fired = true;
+                Y.Assert.areEqual(1, arg1);
+                Y.Assert.areEqual(2, arg2);
+                Y.Assert.areEqual(3, arg3);
+                Y.Assert.areEqual(4, arg4);
+            };
+            this.widget.blacklist_submit_handler = blacklist_submit_handler;
+            this.widget.fire('blacklist_changed', 1, 2, 3, 4);
+            Y.Assert.isTrue(fired);
+        },
+
+        test_containing_rows: function() {
+            var expected = [Y.one('.evolution'), Y.one('#extra_row')];
+            Y.ArrayAssert.itemsAreEqual(expected, this.widget.relatedRows);
+        },
+
+        test_show_comment_overlay_creates_overlay: function() {
+            var input = Y.one('div.blacklist-options input');
+            var overlay = this.widget.show_comment_overlay(input);
+            // Check overlay's structure.
+            Y.Assert.isInstanceOf(Y.lazr.FormOverlay, overlay);
+            Y.Assert.isNotNull(overlay.form_node.one('textarea'));
+            Y.Assert.areEqual(
+                'OK',
+                overlay.form_node.one('button[type="submit"]').get('text'));
+            Y.Assert.areEqual(
+                'Cancel',
+                overlay.form_node.one('button[type="button"]').get('text'));
+            Y.Assert.isTrue(overlay.get('visible'));
+        },
+
+        test_show_comment_overlay_cancel_hides_overlay: function() {
+            var input = Y.one('div.blacklist-options input');
+            var overlay = this.widget.show_comment_overlay(input);
+            var cancel_button = overlay.form_node.one('button[type="button"]');
+            Y.Assert.isTrue(overlay.get('visible'));
+            cancel_button.simulate('click');
+            Y.Assert.isFalse(overlay.get('visible'));
+         },
+
+        test_show_comment_overlay_ok_hides_overlay: function() {
+            var input = Y.one('div.blacklist-options input');
+            var overlay = this.widget.show_comment_overlay(input);
+            Y.Assert.isTrue(overlay.get('visible'));
+            overlay.form_node.one('button[type="submit"]').simulate('click');
+            Y.Assert.isFalse(overlay.get('visible'));
+        },
+
+        test_show_comment_overlay_fires_event: function() {
+            var input = Y.one('div.blacklist-options input[value="NONE"]');
+            input.set('checked', true);
+            var overlay = this.widget.show_comment_overlay(input);
+            var event_fired = false;
+            var method = null;
+            var all = null;
+            var comment = null;
+            var target = null;
+
+            var handleEvent = function(e, e_method, e_all, e_comment, e_target) {
+                event_fired = true;
+                method = e_method;
+                all = e_all;
+                comment = e_comment;
+                target = e_target;
+            };
+
+            this.widget.on("blacklist_changed", handleEvent, this.widget);
+
+            overlay.form_node.one('textarea').set('text', 'Test comment');
+            overlay.form_node.one('button[type="submit"]').simulate('click');
+
+            Y.Assert.isTrue(event_fired);
+            Y.Assert.areEqual('unblacklist', method);
+            Y.Assert.areEqual(false, all);
+            Y.Assert.areEqual('Test comment', comment);
+            Y.Assert.areEqual(input, target);
+        },
+
+        test_show_comment_overlay_fires_event_blacklist_all: function() {
+            var input = Y.one(
+                'div.blacklist-options input[value="BLACKLISTED_ALWAYS"]');
+            input.set('checked', true);
+            var overlay = this.widget.show_comment_overlay(input);
+            var method = null;
+            var all = null;
+            var target = null;
+
+            var handleEvent = function(e, e_method, e_all, e_comment, e_target) {
+                method = e_method;
+                all = e_all;
+                target = e_target;
+            };
+            this.widget.on("blacklist_changed", handleEvent, this.widget);
+            overlay.form_node.one('button[type="submit"]').simulate('click');
+
+            Y.Assert.areEqual('blacklist', method);
+            Y.Assert.areEqual(true, all);
+            Y.Assert.areEqual(input, target);
+        },
+
+        test_show_comment_overlay_fires_event_blacklist: function() {
+            var input = Y.one(
+                'div.blacklist-options input[value="BLACKLISTED_CURRENT"]');
+            input.set('checked', true);
+            var overlay = this.widget.show_comment_overlay(input);
+            var method = null;
+            var all = null;
+            var target = null;
+
+            var handleEvent = function(e, e_method, e_all, e_comment, e_target) {
+                method = e_method;
+                all = e_all;
+                target = e_target;
+            };
+            this.widget.on("blacklist_changed", handleEvent, this.widget);
+            overlay.form_node.one('button[type="submit"]').simulate('click');
+
+            Y.Assert.areEqual('blacklist', method);
+            Y.Assert.areEqual(false, all);
+            Y.Assert.areEqual(input, target);
+        },
+
+        test_blacklist_submit_handler_blacklist_null_comment_widget: function() {
+            // The widget can cope with a null commentWidget.
+            Y.Assert.isNull(this.widget.commentWidget);
+            var input = Y.one(
+                'div.blacklist-options input[value="BLACKLISTED_CURRENT"]');
+            this.widget.blacklist_submit_handler(
+                'blacklist', false, "Test comment", input);
+        },
+
+        test_blacklist_submit_handler_blacklist_simple: function() {
+            var mockCommentWidget = Y.Mock();
+            Y.Mock.expect(mockCommentWidget, {
+                method: "display_new_comment",
+                args: [Y.Mock.Value.Object]
+            });
+            this.widget.commentWidget = mockCommentWidget;
+
+            this.patchNamedPost(
+                'blacklist',
+                {comment: 'Test comment', all: false});
+            var input = Y.one(
+                'div.blacklist-options input[value="BLACKLISTED_CURRENT"]');
+            input.set('checked', false);
+
+            var fired = 0;
+            var listener = function(e) {
+                // Only call resume if the test is waiting, this is
+                // required because we sometimes hit this code before
+                // we had the chance to call this.wait().
+                fired += 1;
+            };
+            this.widget.on('blacklisting_animation_ended', listener);
+            this.widget.blacklist_submit_handler(
+                'blacklist', false, "Test comment", input);
+
+            Y.Assert.isTrue(input.get('checked'));
+
+            this.wait(function () {
+                // There are two rows that get worked across.
+                Y.Assert.areEqual(2, fired);
+            }, 1000);
+        },
+
+        test_blacklist_submit_handler_blacklist_all: function() {
+            var mockCommentWidget = Y.Mock();
+            Y.Mock.expect(mockCommentWidget, {
+                method: "display_new_comment",
+                args: [Y.Mock.Value.Object]
+            });
+            this.widget.commentWidget = mockCommentWidget;
+
+            this.patchNamedPost(
+                'blacklist',
+                {comment: 'Test comment', all: true});
+            var input = Y.one(
+                'div.blacklist-options input[value="BLACKLISTED_CURRENT"]');
+            input.set('checked', false);
+
+            var fired = 0;
+            var listener = function(e) {
+                // Only call resume if the test is waiting, this is
+                // required because we sometimes hit this code before
+                // we had the chance to call this.wait().
+                fired += 1;
+            };
+            this.widget.on('blacklisting_animation_ended', listener);
+            this.widget.blacklist_submit_handler(
+                'blacklist', true, "Test comment", input);
+
+            Y.Assert.isTrue(input.get('checked'));
+
+            this.wait(function () {
+                // There are two rows that get worked across.
+                Y.Assert.areEqual(2, fired);
+            }, 1000);
+        },
+
+        test_blacklist_submit_handler_unblacklist: function() {
+            var fired = false;
+            var mockCommentWidget = Y.Mock();
+            Y.Mock.expect(mockCommentWidget, {
+                method: "display_new_comment",
+                args: [Y.Mock.Value.Object]
+            });
+            this.widget.commentWidget = mockCommentWidget;
+
+            this.patchNamedPost(
+                'unblacklist', {
+                    comment: 'Test comment',
+                    all: true
+            });
+
+            var input = Y.one('div.blacklist-options input[value="NONE"]');
+            input.set('checked', false);
+
+            var listener = function (ev) {
+                fired = true;
+            };
+
+            this.widget.on('blacklisting_animation_ended', listener);
+            this.widget.blacklist_submit_handler(
+                'unblacklist', true, "Test comment", input);
+
+            Y.Assert.isTrue(input.get('checked'));
+            this.wait(function () {
+                // There are two rows that get worked across.
+                Y.Assert.isTrue(fired);
+            }, 1000);
+        },
+
+        test_blacklist_submit_handler_failure: function() {
+            var that = this;
+            module.lp_client.named_post = function(url, func, config) {
+                that.assertIsLocked();
+                config.on.failure();
+                that.assertIsUnlocked();
+            };
+            var input = Y.one('div.blacklist-options input');
+            input.set('checked', false);
+            this.widget.blacklist_submit_handler(
+                null, 'unblacklist', true, "Test comment", input);
+        }
+    }));
+
+    tests.suite.add(new Y.Test.Case({
+        name: 'test-add-comment-widget',
+        setUp: function() {
+            Y.one("#placeholder").append(Y.Node.create(whole_table));
+            this.latestCommentContainer = Y.one('td.latest-comment-fragment');
+            this.addCommentPlaceholder = Y.one('div.add-comment-placeholder');
+            this.apiUri = '/testuri/';
+            this.widget = new module.AddCommentWidget({
+                srcNode: this.node,
+                apiUri: this.apiUri,
+                latestCommentContainer: this.latestCommentContainer,
+                addCommentPlaceholder: this.addCommentPlaceholder
+                });
+            this.widget.render(this.addCommentPlaceholder);
+        },
+
+        tearDown: function() {
+            this.widget.destroy();
+            Y.one('#placeholder').empty();
+        },
+
+        test_initializer: function() {
+            Y.Assert.areEqual(
+                this.latestCommentContainer, this.widget.latestCommentContainer);
+            Y.Assert.areEqual(
+                this.addCommentPlaceholder, this.widget.addCommentPlaceholder);
+            Y.Assert.areEqual(
+                this.apiUri, this.widget.apiUri);
+        },
+
+        test_comment_text_getter: function() {
+            this.widget.get('srcNode').one('textarea').set('value', 'Content');
+            Y.Assert.areEqual(
+                'Content',
+                this.widget.get('comment_text'));
+        },
+
+        test_comment_text_setter: function() {
+            this.widget.set('comment_text', 'Content');
+            Y.Assert.areEqual(
+                'Content',
+                this.widget.get('srcNode').one('textarea').get('value'));
+        },
+
+        test_slide_in: function() {
+            // 'Manually' open the widget.
+            var that = this;
+            var fired = false;
+            var node = this.widget.get('srcNode');
+            node.one('div.widget-bd').setStyle('height', '1000px');
+            var listener = function (e) {
+                fired = true;
+                that.resume();
+            };
+            this.widget.on('slid_in', listener);
+            this.widget.slide_in();
+            this.wait(function () {
+                Y.Assert.isTrue(fired);
+            }, 2000);
+        },
+
+        test_slide_out: function() {
+            var fired = false;
+            var that = this;
+            var listener = function(e) {
+                that.resume(function(){
+                    fired = true;
+                });
+            };
+            this.widget.on('slid_out', listener);
+            this.widget.slide_out();
+            this.wait(1000);
+        },
+
+        assertIsLocked: function() {
+            var node = this.widget.get('srcNode');
+            Y.Assert.isNotNull(node.one('img[src="/@@/spinner"]'));
+            assertAllDisabled(node, 'textarea, button');
+        },
+
+        assertIsUnlocked: function() {
+            var node = this.widget.get('srcNode');
+            Y.Assert.isNull(node.one('img[src="/@@/spinner"]'));
+            assertAllEnabled(node, 'textarea, button');
+        },
+
+        test_lock: function() {
+            this.widget.lock();
+            this.assertIsLocked();
+        },
+
+        test_unlock: function() {
+            this.widget.unlock();
+            this.assertIsUnlocked();
+        },
+
+        test_lock_unlock: function() {
+            this.widget.lock();
+            this.widget.unlock();
+            this.assertIsUnlocked();
+        },
+
+        test_wire_click_add_comment_link: function() {
+            var fired = false;
+            var input = this.widget.get('srcNode').one('a.widget-hd');
+            var that = this;
+            var listener = function(e) {
+                that.resume(function(){
+                    fired = true;
+                });
+            };
+            this.widget.on('slid_out', listener);
+            input.simulate('click');
+            this.wait();
+        },
+
+        test_wire_comment_added_calls_display_new_comment: function() {
+            var fired = false;
+            var comment_entry = new Comment();
+
+            var display_new_comment = function(entry) {
+                fired = true;
+                Y.ObjectAssert.areEqual(comment_entry, entry);
+            };
+            this.widget.display_new_comment = display_new_comment;
+            this.widget.fire('comment_added', comment_entry);
+
+            Y.Assert.isTrue(fired);
+         },
+
+        test_wire_click_button_calls_add_comment_handler: function() {
+            var input = this.widget.get('srcNode').one('button');
+            var fired = false;
+            var add_comment_handler = function() {
+                fired = true;
+            };
+            this.widget.add_comment_handler = add_comment_handler;
+            input.simulate('click');
+            Y.Assert.isTrue(fired);
+        },
+
+        test_clean: function() {
+            var that = this;
+            var comment_text = 'Content';
+            this.widget.get('srcNode').one('textarea').set('value', comment_text);
+            var comment_entry = new Comment();
+            var post_called = false;
+            module.lp_client.named_post = function(url, method, config) {
+                post_called = true;
+                Y.Assert.areEqual('addComment', method);
+                Y.Assert.areEqual(comment_text, config.parameters.comment);
+                config.on.success(comment_entry);
+            };
+            // The event comment_added will be fired.
+            var event_fired = false;
+            event_handler = function(e) {
+                event_fired = true;
+                Y.ObjectAssert.areEqual(comment_entry, e.details[0]);
+            };
+            this.widget.on('comment_added', event_handler);
+            this.widget.add_comment_handler();
+
+            Y.Assert.areEqual('', this.widget.get('comment_text'));
+            Y.Assert.isTrue(post_called);
+            Y.Assert.isTrue(event_fired);
+        },
+
+        test_display_new_comment_success: function() {
+            var that = this;
+            var comment_html = '<span id="new_comment">Comment content.</span>';
+            var comment_entry = new Comment();
+            var get_called = false;
+            module.lp_client.get = function(url, config) {
+                get_called = true;
+                config.on.success(comment_html);
+            };
+            // The method update_latest_comment will be called with the right
+            // arguments.
+            var update_latest_called = false;
+            module.update_latest_comment = function(entry, node) {
+                update_latest_called = true;
+                Y.ObjectAssert.areEqual(comment_entry, entry);
+                Y.Assert.areEqual(that.widget.latestCommentContainer, node);
+            };
+            this.widget.display_new_comment(comment_entry);
+
+            // The new comment has been added to the list of comments.
+            Y.Assert.areEqual(
+                'Comment content.',
+                this.widget.addCommentPlaceholder.previous().get('text'));
+            Y.Assert.isTrue(get_called);
+            Y.Assert.isTrue(update_latest_called);
+        },
+
+        test_display_new_comment_failure: function() {
+            var comment_html = '<span id="new_comment">Comment content.</span>';
+            var comment_entry = new Comment();
+            var get_called = false;
+            module.lp_client.get = function(url, config) {
+                get_called = true;
+                config.on.failure(comment_html);
+            };
+            // The method update_latest_comment won't.
+            var update_latest_called = false;
+            module.update_latest_comment = function(entry, node) {
+                update_latest_called = true;
+            };
+            this.widget.display_new_comment(comment_entry);
+
+            // The new comment has *not* been added to the list of comments.
+            // The last existing comment is still displayed.
+            Y.Assert.areEqual(
+                'Mark S.',
+                this.widget.addCommentPlaceholder.previous().one(
+                    'a.person').get('text'));
+            Y.Assert.isTrue(get_called);
+            Y.Assert.isFalse(update_latest_called);
+        },
+
+        test_add_comment_handler_success: function() {
+            var comment_text = 'Content';
+            this.widget.get('srcNode').one('textarea').set('value', comment_text);
+            var comment_entry = new Comment();
+            var post_called = false;
+            module.lp_client.named_post = function(url, method, config) {
+                post_called = true;
+                Y.Assert.areEqual('addComment', method);
+                Y.Assert.areEqual(comment_text, config.parameters.comment);
+                config.on.success(comment_entry);
+            };
+            // The event comment_added will be fired.
+            var event_fired = false;
+            event_handler = function(e) {
+                event_fired = true;
+                Y.ObjectAssert.areEqual(comment_entry, e.details[0]);
+            };
+            this.widget.on('comment_added', event_handler);
+
+            this.widget.add_comment_handler();
+
+            Y.Assert.areEqual('', this.widget.get('comment_text'));
+            Y.Assert.isTrue(post_called);
+            Y.Assert.isTrue(event_fired);
+            this.assertIsUnlocked();
+        },
+
+        test_add_comment_handler_failure: function() {
+            var comment_text = 'Content';
+            this.widget.get('srcNode').one('textarea').set('value', comment_text);
+            var post_called = false;
+            module.lp_client.named_post = function(url, method, config) {
+                post_called = true;
+                config.on.failure();
+            };
+            this.widget.add_comment_handler();
+
+            // The content has not been cleaned.
+            Y.Assert.areEqual('Content', this.widget.get('comment_text'));
+            Y.Assert.isTrue(post_called);
+            this.assertIsUnlocked();
+        },
+
+        test_add_comment_handler_empty: function() {
+            // An empty comment is treated as a mistake.
+            var that = this;
+            var comment_text = '';
+            this.widget.get('srcNode').one('textarea').set('value', comment_text);
+            var comment_entry = new Comment();
+            var post_called = false;
+            module.lp_client.named_post = function(url, method, config) {
+                post_called = true;
+            };
+            this.widget.add_comment_handler();
+            Y.Assert.isFalse(post_called);
+        }
+    }));
+
+    tests.suite.add(new Y.Test.Case({
+        name: 'test-add-comment-widget',
+
+        setUp: function() {
+            Y.one("#placeholder").append(Y.Node.create(whole_table));
+            var first_poll = true;
+            pending_voc = [
+                {"token": "PENDING", "selected": true, "title": "Pending"},
+                {"token": "COMPLETED", "title": "Completed"},
+                {"token": "FAILED", "title": "Failed"}];
+            completed_voc = [
+                {"token": "PENDING", "title": "Pending"},
+                {"token": "COMPLETED", "selected": true, "title": "Completed"},
+                {"token": "FAILED", "title": "Failed"}];
+
+            // Monkey patch request.
+            module.lp_client.named_post = function(url, func, config) {
+                config.on.success();};
+            module.lp_client.named_get = function(url, func, config) {
+                config.on.success();};
+            module.lp_client.get = function(uri, config) {
+                if (first_poll === true) {
+                    first_poll = false;
+                    config.on.success(pending_voc);
+                }
+                else {
+                    config.on.success(completed_voc);
+                }
+            };
+            module.poll_interval = 100;
+        },
+
+        tearDown: function () {
+            Y.one('#placeholder').empty();
+        },
+
+        test_request_wrong_click: function() {
+            // Click on the placeholder has no effect.
+            // The listeners are on the link with class
+            // '.package-diff-compute-request'.
+            // bug=746277.
+            var placeholder = Y.one('#placeholder');
+            placeholder
+                .one('#derived')
+                    .removeClass('PENDING')
+                        .addClass('FAILED');
+            module.setup_packages_diff_states(
+                placeholder.one('.diff-extra-container'), dsd_uri);
+            var func_req;
+            module.lp_client.named_post = function(url, func, config) {
+                func_req = func;
+                config.on.success();
+            };
+            var wrong_button = placeholder.one('.package-diff-placeholder');
+            wrong_button.simulate('click');
+            var package_diff = Y.one('#parent');
+
+            // The request has not been triggered.
+            Y.Assert.isTrue(package_diff.hasClass('request-derived-diff'));
+        },
+
+        test_request_package_diff_computation: function() {
+            // A click on the button changes the package diff status and requests
+            // the package diffs computation via post.
+            var placeholder = Y.one('#placeholder');
+            placeholder
+                .one('#derived')
                 .removeClass('PENDING')
-                    .addClass('FAILED');
-        dsd_details.setup_packages_diff_states(
-            placeholder.one('.diff-extra-container'), dsd_uri);
-        var func_req;
-        dsd_details.lp_client.named_post = function(url, func, config) {
-            func_req = func;
-            config.on.success();
-        };
-
-        var wrong_button = placeholder.one('.package-diff-placeholder');
-
-        wrong_button.simulate('click');
-        var package_diff = Y.one('#parent');
-
-        // The request has not been triggered.
-        Y.Assert.isTrue(package_diff.hasClass('request-derived-diff'));
-    },
-
-    test_request_package_diff_computation: function() {
-        // A click on the button changes the package diff status and requests
-        // the package diffs computation via post.
-        var placeholder = Y.one('#placeholder');
-        placeholder
-            .one('#derived')
-            .removeClass('PENDING')
-            .addClass('FAILED');
-        dsd_details.setup_packages_diff_states(
-            placeholder.one('.diff-extra-container'), dsd_uri);
-        var func_req;
-        dsd_details.lp_client.named_post = function(url, func, config) {
-            func_req = func;
-            config.on.success();
-        };
-        var button = placeholder.one('.package-diff-compute-request');
-
-        button.simulate('click');
-        var package_diff = Y.one('#parent');
-
-        Y.Assert.isTrue(package_diff.hasClass('PENDING'));
-        Y.Assert.isFalse(package_diff.hasClass('request-derived-diff'));
-        Y.Assert.areEqual('requestPackageDiffs', func_req);
-        Y.Assert.isNotUndefined(package_diff.updater);
-
-        // Let the polling happen.
-        this.wait(function() {
-            Y.Assert.isTrue(package_diff.hasClass('PENDING'));
-                this.wait(function() {
-                    Y.Assert.isTrue(package_diff.hasClass('COMPLETED'));
-                }, dsd_details.poll_interval);
-         }, dsd_details.poll_interval);
-    },
-
-    test_polling_for_pending_items: function() {
-        // The polling has started on the pending package diff. The
-        // status is being updated.
-        var placeholder = Y.one('#placeholder');
-        dsd_details.setup_packages_diff_states(
-            placeholder.one('.diff-extra-container'), dsd_uri);
-        var package_diff = Y.one('#derived');
-        Y.Assert.isTrue(package_diff.hasClass('PENDING'));
-        Y.Assert.isFalse(package_diff.hasClass('request-derived-diff'));
-        this.wait(function() {
-            Y.Assert.isTrue(package_diff.hasClass('PENDING'));
-                this.wait(function() {
-                    Y.Assert.isTrue(package_diff.hasClass('COMPLETED'));
-                }, dsd_details.poll_interval);
-        }, dsd_details.poll_interval);
-    }
-};
-
-var testFormParsing = {
-
-    name: 'form-parsing',
-
-    createRows: function(missing_packages) {
-        rows_data = [
-            ['evolution', '2.0.9-1', '2.0.8-4', missing_packages],
-            ['package', '2.0', '1.0', missing_packages],
-            ['package2', '4.0.4', '0.0.2', missing_packages],
-            ['package3', '3.0.4', '0.8.2', missing_packages],
-            ['package4', '2.0.4', '1.0.2', missing_packages],
-            ['package5', '1.0.4', '0.2.2', missing_packages]
-            ];
-
-        var placeholder = Y.one("#placeholder")
-            .empty();
-
-        var i;
-        for (i=0; i<rows_data.length; i++) {
-            var data = rows_data[i];
-            var node = Y.Node.create(
-                createRow(data[0], data[1], data[2], data[3]));
-            placeholder.append(node);
-        }
-    },
-
-    checkPackage: function(package_name) {
-        var placeholder = Y.one("#placeholder");
-        var checkbox = placeholder.one('.' + package_name).one('input');
-        checkbox.set('checked', true);
-    },
-
-    checkAllPackages: function() {
-        var placeholder = Y.one("#placeholder");
-        var checkboxes = placeholder.all('input');
-        checkboxes.set('checked', true);
-    },
-
-    test_get_confirmation_header_number_of_packages_1: function() {
-        this.createRows(false);
-        this.checkPackage('evolution');
-
-        Y.Assert.areEqual(
-            1,
-            dsd_details.get_number_of_packages());
-        Y.Assert.areEqual(
-            "You're about to sync 1 package. Continue?",
-            dsd_details.get_confirmation_header_number_of_packages().get(
-                'text'));
-    },
-
-    test_get_confirmation_header_number_of_packages_x: function() {
-        this.createRows(false);
-        this.checkPackage('evolution');
-        this.checkPackage('package');
-
-        Y.Assert.areEqual(
-            2,
-            dsd_details.get_number_of_packages());
-        Y.Assert.areEqual(
-            "You're about to sync 2 packages. Continue?",
-            dsd_details.get_confirmation_header_number_of_packages().get(
-                'text'));
-    },
-
-    test_get_packages_summary: function() {
-        // get_packages_summary parses row from the +localpackagediffs
-        // page to create a summary of the packages to be synced.
-        this.createRows(false);
-        this.checkPackage('evolution');
-        this.checkPackage('package2');
-
-        Y.Assert.areEqual(
-            ['<ul>',
-             '<li><b>evolution</b>: 2.0.9-1 ',
-             '→ 2.0.8-4</li>',
-             '<li><b>package2</b>: 4.0.4 → 0.0.2</li>',
-             '</ul>'
-            ].join(''),
-            dsd_details.get_packages_summary().get('innerHTML'));
-    },
-
-    test_get_packages_summary_croped: function() {
-        // If more than MAX_PACKAGES are to be synced, the summary is
-        // limited to MAX_PACKAGES and mentions 'and x more packages'.
-        this.createRows(false);
-        this.checkAllPackages();
-        dsd_details.MAX_PACKAGES = 1;
-
-        Y.Assert.areEqual(
-            ['<ul>',
-             '<li><b>evolution</b>: 2.0.9-1 ',
-             '→ 2.0.8-4</li>',
-             '</ul>',
-             '... and 5 more packages.'
-            ].join(''),
-            dsd_details.get_packages_summary().get('innerHTML'));
-    },
-
-    test_get_packages_summary_missingpackages: function() {
-        // get_packages_summary can also parse the row from +missingpackages
-        // with no derived_series version of the packages.
-        this.createRows(true);
-        Y.one('#placeholder').all('input').set('checked', true);
-        dsd_details.MAX_PACKAGES = 1;
-
-        Y.Assert.areEqual(
-            ['<ul>',
-             '<li><b>evolution</b>: 2.0.9-1</li>',
-             '</ul>',
-             '... and 5 more packages.'
-            ].join(''),
-            dsd_details.get_packages_summary().get('innerHTML'));
-    }
-};
-
-suite.add(new Y.Test.Case(testPackageDiffUpdate));
-suite.add(new Y.Test.Case(testExpandableRowWidget));
-suite.add(new Y.Test.Case(testBlacklistWidget));
-suite.add(new Y.Test.Case(testAddCommentWidget));
-suite.add(new Y.Test.Case(testPackageDiffUpdateInteraction));
-suite.add(new Y.Test.Case(testFormParsing));
-
-Y.lp.testing.Runner.run(suite);
-
+                .addClass('FAILED');
+            module.setup_packages_diff_states(
+                placeholder.one('.diff-extra-container'), dsd_uri);
+            var func_req;
+            module.lp_client.named_post = function(url, func, config) {
+                func_req = func;
+                config.on.success();
+            };
+            var button = placeholder.one('.package-diff-compute-request');
+
+            button.simulate('click');
+            var package_diff = Y.one('#parent');
+
+            Y.Assert.isTrue(package_diff.hasClass('PENDING'));
+            Y.Assert.isFalse(package_diff.hasClass('request-derived-diff'));
+            Y.Assert.areEqual('requestPackageDiffs', func_req);
+            Y.Assert.isNotUndefined(package_diff.updater);
+
+            // Let the polling happen.
+            this.wait(function() {
+                Y.Assert.isTrue(package_diff.hasClass('PENDING'));
+                    this.wait(function() {
+                        Y.Assert.isTrue(package_diff.hasClass('COMPLETED'));
+                    }, module.poll_interval);
+             }, module.poll_interval);
+        },
+
+        test_polling_for_pending_items: function() {
+            // The polling has started on the pending package diff. The
+            // status is being updated.
+            var placeholder = Y.one('#placeholder');
+            module.setup_packages_diff_states(
+                placeholder.one('.diff-extra-container'), dsd_uri);
+            var package_diff = Y.one('#derived');
+            Y.Assert.isTrue(package_diff.hasClass('PENDING'));
+            Y.Assert.isFalse(package_diff.hasClass('request-derived-diff'));
+            this.wait(function() {
+                Y.Assert.isTrue(package_diff.hasClass('PENDING'));
+                    this.wait(function() {
+                        Y.Assert.isTrue(package_diff.hasClass('COMPLETED'));
+                    }, module.poll_interval);
+            }, module.poll_interval);
+        }
+    }));
+
+    tests.suite.add(new Y.Test.Case({
+        name: 'form-parsing',
+        tearDown: function () {
+            Y.one('#placeholder').empty();
+        },
+
+        create_rows: function(missing_packages) {
+            var placeholder = Y.one("#placeholder");
+            rows_data = [
+                ['evolution', '2.0.9-1', '2.0.8-4', missing_packages],
+                ['package', '2.0', '1.0', missing_packages],
+                ['package2', '4.0.4', '0.0.2', missing_packages],
+                ['package3', '3.0.4', '0.8.2', missing_packages],
+                ['package4', '2.0.4', '1.0.2', missing_packages],
+                ['package5', '1.0.4', '0.2.2', missing_packages]
+                ];
+
+            var i;
+            for (i=0; i<rows_data.length; i++) {
+                var data = rows_data[i];
+                var node = Y.Node.create(
+                    create_row(data[0], data[1], data[2], data[3]));
+                placeholder.append(node);
+            }
+        },
+
+        checkPackage: function(package_name) {
+            var placeholder = Y.one("#placeholder");
+            var checkbox = placeholder.one('.' + package_name).one('input');
+            checkbox.set('checked', true);
+        },
+
+        checkAllPackages: function() {
+            var placeholder = Y.one("#placeholder");
+            var checkboxes = placeholder.all('input');
+            checkboxes.set('checked', true);
+        },
+
+        test_get_confirmation_header_number_of_packages_1: function() {
+            this.create_rows(false);
+            this.checkPackage('evolution');
+
+            Y.Assert.areEqual(
+                1,
+                module.get_number_of_packages());
+            Y.Assert.areEqual(
+                "You're about to sync 1 package. Continue?",
+                module.get_confirmation_header_number_of_packages().get(
+                    'text'));
+        },
+
+        test_get_confirmation_header_number_of_packages_x: function() {
+            this.create_rows(false);
+            this.checkPackage('evolution');
+            this.checkPackage('package');
+
+            Y.Assert.areEqual(
+                2,
+                module.get_number_of_packages());
+            Y.Assert.areEqual(
+                "You're about to sync 2 packages. Continue?",
+                module.get_confirmation_header_number_of_packages().get(
+                    'text'));
+        },
+
+        test_get_packages_summary: function() {
+            // get_packages_summary parses row from the +localpackagediffs
+            // page to create a summary of the packages to be synced.
+            this.create_rows(false);
+            this.checkPackage('evolution');
+            this.checkPackage('package2');
+
+            Y.Assert.areEqual(
+                ['<ul>',
+                 '<li><b>evolution</b>: 2.0.9-1 ',
+                 '→ 2.0.8-4</li>',
+                 '<li><b>package2</b>: 4.0.4 → 0.0.2</li>',
+                 '</ul>'
+                ].join(''),
+                module.get_packages_summary().get('innerHTML'));
+        },
+
+        test_get_packages_summary_croped: function() {
+            // If more than MAX_PACKAGES are to be synced, the summary is
+            // limited to MAX_PACKAGES and mentions 'and x more packages'.
+            this.create_rows(false);
+            this.checkAllPackages();
+            module.MAX_PACKAGES = 1;
+
+            Y.Assert.areEqual(
+                ['<ul>',
+                 '<li><b>evolution</b>: 2.0.9-1 ',
+                 '→ 2.0.8-4</li>',
+                 '</ul>',
+                 '... and 5 more packages.'
+                ].join(''),
+                module.get_packages_summary().get('innerHTML'));
+        },
+
+        test_get_packages_summary_missingpackages: function() {
+            // get_packages_summary can also parse the row from +missingpackages
+            // with no derived_series version of the packages.
+            this.create_rows(true);
+            Y.one('#placeholder').all('input').set('checked', true);
+            module.MAX_PACKAGES = 1;
+
+            Y.Assert.areEqual(
+                ['<ul>',
+                 '<li><b>evolution</b>: 2.0.9-1</li>',
+                 '</ul>',
+                 '... and 5 more packages.'
+                ].join(''),
+                module.get_packages_summary().get('innerHTML'));
+        }
+    }));
+}, '0.1', {
+    requires: ['test', 'lp.testing.helpers', 'lp.testing.mockio', 'console',
+        'lp.registry.distroseriesdifferences_details', 'node-event-simulate',
+        'lp.soyuz.base', 'lp.anim', 'lazr.formoverlay', 'lazr.effects',
+        'lp.soyuz.dynamic_dom_updater', 'event-simulate', 'io-base']
 });

=== modified file 'lib/lp/registry/javascript/tests/test_team.js'
--- lib/lp/registry/javascript/tests/test_team.js	2012-04-06 17:28:25 +0000
+++ lib/lp/registry/javascript/tests/test_team.js	2012-07-05 17:22:27 +0000
@@ -50,7 +50,7 @@
                 visibility_changed_called = true;
             };
             Y.Assert.isFalse(visibility_changed_called);
-            var visibility_field = Y.one('[name=field.visibility]');
+            var visibility_field = Y.one('[name="field.visibility"]');
             visibility_field.set('value', 'PRIVATE');
             visibility_field.simulate('change');
             Y.Assert.isTrue(visibility_changed_called);
@@ -63,7 +63,7 @@
         test_visibility_change_private: function() {
             namespace.visibility_changed('PRIVATE');
             var nr_radio_buttons = 0;
-            Y.all('input[type=radio]').each(function(radio_button) {
+            Y.all('input[type="radio"]').each(function(radio_button) {
                 if (radio_button.ancestor('tr').hasClass('unseen')
                         || !radio_button.get('checked')) {
                     return;
@@ -77,7 +77,7 @@
                 nr_radio_buttons++;
             });
             Y.Assert.isTrue(nr_radio_buttons === 1);
-            var extra_help = Y.one('[for=field.subscriptionpolicy]')
+            var extra_help = Y.one('[for="field.subscriptionpolicy"]')
                 .ancestor('div').one('.info');
             Y.Assert.areEqual(
                 'Private teams must have a restricted subscription '+
@@ -94,7 +94,7 @@
         // are visible again.
         test_visibility_change_public: function() {
             namespace.visibility_changed('PRIVATE');
-            var extra_help = Y.one('[for=field.subscriptionpolicy]')
+            var extra_help = Y.one('[for="field.subscriptionpolicy"]')
                 .ancestor('div').one('.info');
             Y.Assert.areEqual(
                 'Private teams must have a restricted subscription '+
@@ -103,7 +103,7 @@
 
             namespace.visibility_changed('PUBLIC');
             var nr_radio_buttons = 0;
-            Y.all('input[type=radio]').each(function(radio_button) {
+            Y.all('input[type="radio"]').each(function(radio_button) {
                 Y.Assert.isFalse(
                     radio_button.ancestor('tr').hasClass('unseen'));
                 var help_row = radio_button.ancestor('tr')
@@ -114,7 +114,7 @@
                 nr_radio_buttons++;
             });
             Y.Assert.isTrue(nr_radio_buttons === 4);
-            extra_help = Y.one('[for=field.subscriptionpolicy]')
+            extra_help = Y.one('[for="field.subscriptionpolicy"]')
                 .ancestor('div').one('.info');
             Y.Assert.isNull(extra_help);
             var extra_visibility_help = Y.one('#visibility-extra-help');
@@ -124,7 +124,7 @@
         // When the subscription policy changes to private and back to public,
         // any original extra help text that was there is restored.
         test_visibility_change_public_restores_extra_help: function() {
-            var widget = Y.one('[for=field.subscriptionpolicy]')
+            var widget = Y.one('[for="field.subscriptionpolicy"]')
                 .ancestor('div').one('.radio-button-widget');
             var extra_help = Y.Node.create('<div>Help Me</div>')
                 .addClass('sprite')
@@ -132,7 +132,7 @@
             widget.insert(extra_help, 'before');
 
             namespace.visibility_changed('PRIVATE');
-            extra_help = Y.one('[for=field.subscriptionpolicy]')
+            extra_help = Y.one('[for="field.subscriptionpolicy"]')
                 .ancestor('div').one('.info');
             Y.Assert.areEqual(
                 'Private teams must have a restricted subscription '+
@@ -140,7 +140,7 @@
                 extra_help.get('text'));
 
             namespace.visibility_changed('PUBLIC');
-            extra_help = Y.one('[for=field.subscriptionpolicy]')
+            extra_help = Y.one('[for="field.subscriptionpolicy"]')
                 .ancestor('div').one('.info');
             Y.Assert.areEqual('Help Me', extra_help.get('text'));
         }

=== modified file 'lib/lp/registry/javascript/tests/test_team_mailinglists.html'
--- lib/lp/registry/javascript/tests/test_team_mailinglists.html	2012-03-14 04:41:36 +0000
+++ lib/lp/registry/javascript/tests/test_team_mailinglists.html	2012-07-05 17:22:27 +0000
@@ -41,7 +41,7 @@
     <body class="yui3-skin-sam">
         <ul id="suites">
             <!-- <li>lp.large_indicator.test</li> -->
-            <li>lp.team_mailinglists.test</li>
+            <li>lp.registry.team.mailinglists.test</li>
         </ul>
 
         <!-- The example markup required by the script to run -->

=== modified file 'lib/lp/registry/javascript/tests/test_team_mailinglists.js'
--- lib/lp/registry/javascript/tests/test_team_mailinglists.js	2012-02-03 16:28:14 +0000
+++ lib/lp/registry/javascript/tests/test_team_mailinglists.js	2012-07-05 17:22:27 +0000
@@ -1,94 +1,76 @@
-/* Copyright (c) 2012, Canonical Ltd. All rights reserved. */
-YUI({
-    base: '../../../../canonical/launchpad/icing/yui/',
-    filter: 'raw',
-    combine: false,
-    fetchCSS: false
-}).use('event', 'lp.mustache', 'node', 'node-event-simulate', 'test',
-       'widget-stack', 'console', 'lp.registry.team.mailinglists',
-       function(Y) {
-
-// Local aliases
-var Assert = Y.Assert,
-    ArrayAssert = Y.ArrayAssert;
-var team_mailinglists = Y.lp.registry.team.mailinglists;
-var suite = new Y.Test.Suite("team.mailinglists Tests");
-
-suite.add(new Y.Test.Case({
-
-    name: 'Team Mailinglists',
-
-    setUp: function() {
-        window.LP = {
-            links: {},
-            cache: {}
-        };
-    },
-
-    tearDown: function() {
-    },
-
-    test_render_message: function () {
-        var config = {
-            messages: [
-                {
-                    'message_id': 3,
-                    'headers': {
-                        'Subject': 'Please stop breaking things',
-                        'To': '[e-mail]',
-                        'From': '[e-mail]',
-                        'Date': '2011-10-13'
-                    },
-                    'nested_messages': [],
-                    'attachments': []
-                }
-            ],
-            container: Y.one('#messagelist'),
-            forwards_navigation: Y.all('.last,.next'),
-            backwards_navigation: Y.all('.first,.previous')
-        };
-        var message_list = new Y.lp.registry.team.mailinglists.MessageList(
-            config);
-        message_list.display_messages();
-        var message = Y.one("#message-3");
-        Assert.areEqual(message.get('text'), 'Please stop breaking things');
-    },
-
-    test_nav: function () {
-        var config = {
-            messages: [],
-            container: Y.one('#messagelist'),
-            forwards_navigation: Y.all('.last,.next'),
-            backwards_navigation: Y.all('.first,.previous')
-        };
-        var message_list = new Y.lp.registry.team.mailinglists.MessageList(
-            config);
-
-        var fired = false;
-        Y.on('messageList:backwards', function () {
-            fired = true;
-        });
-
-        var nav_link = Y.one('.first');
-        nav_link.simulate('click');
-        Assert.isTrue(fired);
-    }
-}));
-
-
-var handle_complete = function(data) {
-    window.status = '::::' + JSON.stringify(data);
-    };
-Y.Test.Runner.on('complete', handle_complete);
-Y.Test.Runner.add(suite);
-
-var yconsole = new Y.Console({
-    newestOnTop: false
-});
-yconsole.render('#log');
-
-Y.on('domready', function() {
-    Y.Test.Runner.run();
-});
-
+/* Copyright (c) 2012 Canonical Ltd. All rights reserved. */
+
+YUI.add('lp.registry.team.mailinglists.test', function (Y) {
+    // Local aliases.
+    var Assert = Y.Assert,
+        ArrayAssert = Y.ArrayAssert;
+    var team_mailinglists = Y.lp.registry.team.mailinglists;
+
+    var tests = Y.namespace('lp.registry.team.mailinglists.test');
+    tests.suite = new Y.Test.Suite('lp.registry.team.mailinglists Tests');
+    tests.suite.add(new Y.Test.Case({
+
+        name: 'Team Mailinglists',
+
+        setUp: function() {
+            window.LP = {
+                links: {},
+                cache: {}
+            };
+        },
+
+        tearDown: function() {
+        },
+
+        test_render_message: function () {
+            var config = {
+                messages: [
+                    {
+                        'message_id': 3,
+                        'headers': {
+                            'Subject': 'Please stop breaking things',
+                            'To': '[e-mail]',
+                            'From': '[e-mail]',
+                            'Date': '2011-10-13'
+                        },
+                        'nested_messages': [],
+                        'attachments': []
+                    }
+                ],
+                container: Y.one('#messagelist'),
+                forwards_navigation: Y.all('.last,.next'),
+                backwards_navigation: Y.all('.first,.previous')
+            };
+            var message_list = new Y.lp.registry.team.mailinglists.MessageList(
+                config);
+            message_list.display_messages();
+            var message = Y.one("#message-3");
+            Assert.areEqual(message.get('text'), 'Please stop breaking things');
+        },
+
+        test_nav: function () {
+            var config = {
+                messages: [],
+                container: Y.one('#messagelist'),
+                forwards_navigation: Y.all('.last,.next'),
+                backwards_navigation: Y.all('.first,.previous')
+            };
+            var message_list = new Y.lp.registry.team.mailinglists.MessageList(
+                config);
+
+            var fired = false;
+            Y.on('messageList:backwards', function () {
+                fired = true;
+            });
+
+            var nav_link = Y.one('.first');
+            nav_link.simulate('click');
+            Assert.isTrue(fired);
+        }
+    }));
+
+}, '0.1', {
+    requires: ['test', 'lp.testing.helpers', 'console',
+        'lp.registry.team.mailinglists', 'lp.mustache',
+        'node-event-simulate', 'widget-stack', 'event']
 });