Launchpad itself

lib/lp/registry/javascript/distroseries.initseries.js (+8/-1235)
lib/lp/registry/javascript/distroseries.widgets.js (+1247/-0)
lib/lp/registry/javascript/tests/test_distroseries.initseries.html (+10/-2)
lib/lp/registry/javascript/tests/test_distroseries.initseries.js (+3/-1020)
lib/lp/registry/javascript/tests/test_distroseries.widgets.html (+47/-0)
lib/lp/registry/javascript/tests/test_distroseries.widgets.js (+1046/-0)

To merge this branch:

bzr merge lp:~allenap/launchpad/localpackagediffs-filter-by-package-set-bug-809786-split

High

Fix Released

Link a bug report

Reviewer	Review Type	Date Requested	Status
Gavin Panella (community)			Approve on 2011-07-18
Review via email: mp+68235@code.launchpad.net

Commit message

[r=allenap][bug=809786] Split out all the reusable widgets from lp.registry.distroseries.initseries into a new .widgets module.

Description of the change

This splits out all the reusable widgets from lp.registry.distroseries.initseries into a .widgets module. Not much else to see here.

Revision history for this message

Gavin Panella (allenap) on 2011-07-18:

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk

Subscribers

People subscribed via source and target branches

to all changes:

Barki Mustapha

Celso Providelo

Christian Reis

Christy Awad

Colin Watson

Gavin Panella

Harpianto,ANDI

James Troup

John A Meinel

Kevin bush

Launchpad code reviewers

Launchpad code reviewers from Canonical

Matthew Tanner

Maximiliano Bertacchini

Oguz Ersoz

Simon Brakhane

Ubuntu-BR DevOps

William Grant

alhawiti

api.ng

pedro cavazos

todaioan

wenjingwen

to status/vote changes:

Tzaddi

Tzaddi Belding

 === modified file 'lib/lp/registry/javascript/distroseries.initseries.js'
 --- lib/lp/registry/javascript/distroseries.initseries.js	2011-07-18 11:56:51 +0000
 +++ lib/lp/registry/javascript/distroseries.initseries.js	2011-07-18 11:56:52 +0000
@@ -14,1234 +14,7 @@
  var namespace = Y.namespace('lp.registry.distroseries.initseries');
--
--/**
-- * A form row matching that which LaunchpadForm presents, containing a
-- * field (defined in a subclass), and an optional label and
-- * description.
-- *
-- * @class FormRowWidget
-- */
--var FormRowWidget;
--
--FormRowWidget = function() {
--    FormRowWidget.superclass.constructor.apply(this, arguments);
--};
--
--Y.mix(FormRowWidget, {
--
--    NAME: 'formRowWidget',
--
--    ATTRS: {
--
--        /**
--         * The field name.
--         *
--         * @property name
--         */
--        name: {
--            setter: function(value, name) {
--                this.fieldNode.all("input, select").set("name", value);
--            }
--        },
--
--        /**
--         * The top label for the field.
--         *
--         * @property label
--         */
--        label: {
--            getter: function() {
--                return this.labelNode.get("text");
--            },
--            setter: function(value, name) {
--                this.labelNode.set("text", value);
--            }
--        },
--
--        /**
--         * A dictionary {link:link, text:text} to populate
--         * the pop-up help for the field.
--         *
--         * @property help
--         */
--        help: {
--            getter: function() {
--                return {link:this.helpNode.one('a')
--                            .get("href"),
--                        text:this.helpNode
--                            .one('.invisible-link')
--                            .get("text")};
--            },
--            setter: function(value, name) {
--                if ((value.link !== undefined) &&
--                    (value.text !== undefined)) {
--                    this.helpNode.one('a').set("href", value.link);
--                    this.helpNode.one('.invisible-link')
--                        .set("text", value.text);
--                    this.helpNode.removeClass('unseen');
--                }
--                else {
--                    this.helpNode.addClass('unseen');
--                }
--            }
--        },
--
--        /**
--         * A description shown near the field.
--         *
--         * @label description
--         */
--        description: {
--            getter: function() {
--                return this.descriptionNode.get("text");
--            },
--            setter: function(value, name) {
--                this.descriptionNode.set("text", value);
--            }
--        }
--    }
--
--});
--
--Y.extend(FormRowWidget, Y.Widget, {
--
--    BOUNDING_TEMPLATE: "<tr></tr>",
--
--    CONTENT_TEMPLATE: '<td colspan="2"></td>',
--
--    initializer: function(config) {
--        this.labelNode = Y.Node.create("<label />");
--        this.helpNode = Y.Node.create(('<span class="helper unseen">'+
--            '&nbsp;<a href=""' +
--            'target="help" class="sprite maybe">&nbsp;' +
--            '<span class="invisible-link"></span></a></span>'));
--        this.fieldNode = Y.Node.create("<div></div>");
--        this.descriptionNode = Y.Node.create('<p class="formHelp" />');
--        this.spinnerNode = Y.Node.create(
--            '<img src="/@@/spinner" alt="Loading..." />');
--    },
--
--    renderUI: function() {
--        this.get("contentBox")
--            .append(this.labelNode)
--            .append(this.helpNode)
--            .append(this.fieldNode)
--            .append(this.descriptionNode);
--    },
--
--    /**
--     * Show the spinner.
--     *
--     * @method showSpinner
--     */
--    showSpinner: function() {
--        this.fieldNode.empty().append(this.spinnerNode);
--    },
--
--    /**
--     * Hide the spinner.
--     *
--     * @method hideSpinner
--     */
--    hideSpinner: function() {
--        this.spinnerNode.remove();
--    },
--
--    /**
--     * Display an error.
--     *
--     * @method showError
--     */
--    showError: function(error) {
--        var message = Y.Node.create('<p />').set("text", error);
--        this.fieldNode.empty().append(message);
--        Y.lazr.anim.red_flash({node: message}).run();
--    }
--
--});
--
--namespace.FormRowWidget = FormRowWidget;
--
--/**
-- * A table to display, order, delete the selected parent series. Each parent
-- * can also be made an overlay, and a component and a pocket selected.
-- *
-- */
--var ParentSeriesListWidget;
--
--ParentSeriesListWidget = function() {
--    ParentSeriesListWidget
--        .superclass.constructor.apply(this, arguments);
--};
--
--Y.mix(ParentSeriesListWidget, {
--
--    NAME: 'parentSeriesListWidget',
--
--    ATTRS: {
--
--        /**
--         * The DistroSeries the choices in this field should
--         * reflect. Takes the form of a list of ids,
--         * e.g. ["4", "55"].
--         *
--         * @property parents
--         */
--        parents: {
--            getter: function() {
--                var series = [];
--                this.fieldNode.all("tbody > tr.parent").each(
--                    function(node) {
--                        series.push(
--                            node.get('id').replace('parent-',''));
--                    }
--                );
--                return series;
--            }
--        },
--        overlays: {
--            getter: function() {
--                var overlays = [];
--                this.fieldNode.all("tbody > tr.parent").each(
--                    function(node) {
--                        overlays.push(
--                            node.one('input.overlay').get('checked'));
--                    }
--                );
--                return overlays;
--            }
--        },
--        overlay_pockets: {
--            getter: function() {
--                var overlay_pockets = [];
--                this.fieldNode.all("tbody > tr.parent").each(
--                    function(node) {
--                        var select = node.one('td.pocket').one('select');
--                        if (select !== null) {
--                            overlay_pockets.push(select.get('value'));
--                        }
--                        else {
--                            overlay_pockets.push(null);
--                        }
--                    }
--                );
--                return overlay_pockets;
--            }
--        },
--        overlay_components: {
--            getter: function() {
--                var overlay_components = [];
--                this.fieldNode.all("tbody > tr.parent").each(
--                    function(node) {
--                        var select = node.one('td.component').one('select');
--                        if (select !== null) {
--                            overlay_components.push(select.get('value'));
--                        }
--                        else {
--                            overlay_components.push(null);
--                        }
--                    }
--                );
--                return overlay_components;
--            }
--        }
--    }
--});
--
--Y.extend(ParentSeriesListWidget, FormRowWidget, {
--
--    initializer: function() {
--        ParentSeriesListWidget.superclass.initializer();
--        this.client = new Y.lp.client.Launchpad();
--        this.clean_display();
--    },
--
--    /**
--     * Display a simple message when no parent series are selected.
--     *
--     * @method clean_display
--     */
--    clean_display: function() {
--        this.fieldNode.empty();
--        this.fieldNode.append(Y.Node.create("<div />")
--            .set('text', '[No parent for this series yet!]'));
--    },
--
--    /**
--     * Display the table header.
--     *
--     * @method init_display
--     */
--    init_display: function() {
--        this.fieldNode.empty();
--        this.fieldNode = Y.Node.create("<table />");
--        var table_header = Y.Node.create(
--            ["<thead><tr>",
--             "<th>Order</th>",
--             "<th>Parent name</th>",
--             "<th>Overlay?</th>",
--             "<th>Component</th>",
--             "<th>Pocket</th>",
--             "<th>Delete</th>",
--             "</tr></thead>",
--             "<tbody>",
--             "</tbody>"
--            ].join(""));
--        this.fieldNode.append(table_header);
--    },
--
--    /**
--     * Helper method to create a select widget from a list and add it
--     * to a node.
--     *
--     * @method build_selector
--     */
--    build_selector: function(node, res_list, class_name) {
--        var select = Y.Node.create('<select disabled="disabled"/>');
--        res_list.forEach(
--            function(choice) {
--                select.appendChild('<option />')
--                    .set('text', choice)
--                    .set('value', choice);
--            });
--        node.one('td.'+class_name).append(select);
--        node.one('input').on('click', function(e) {
--            var select = node.one('td.'+class_name).one('select');
--            if (select.hasAttribute('disabled')) {
--                select.removeAttribute('disabled');
--            }
--            else {
--                select.setAttribute('disabled', 'disabled');
--            }
--        });
--    },
--
--    /**
--     * Build a select widget from a list retrieved from the api.
--     *
--     * @method build_select
--     */
--    build_select: function(node, class_name, path) {
--        var self = this;
--        var on = {
--            success: function(res_list) {
--                self.build_selector(node, res_list, class_name);
--            },
--            failure: function() {
--                var failed_node = Y.Node.create('<span />')
--                    .set('text', 'Failed to retrieve content.');
--                node.one('td.'+class_name).append(failed_node);
--                self.disable_overlay(node);
--            }
--        };
--        this.client.get(path, {on: on});
--     },
--
--
--    /**
--     * Move down a parent's line in the table.
--     *
--     * @method move_down
--     */
--    move_down: function(parent_id) {
--        var node = this.fieldNode.one("tr#parent-" + parent_id);
--        var other = node.next('tr.parent');
--        if (other !== null) { node.swap(other);}
--        Y.lazr.anim.green_flash({node: node}).run();
--    },
--
--    /**
--     * Move up a parent's line in the table.
--     *
--     * @method move_up
--     */
--    move_up: function(parent_id) {
--        var node = this.fieldNode.one("tr#parent-" + parent_id);
--        var other = node.previous('tr.parent');
--        if (other !== null) { node.swap(other);}
--        Y.lazr.anim.green_flash({node: node}).run();
--    },
--
--    /**
--     * Remove a parent series.
--     *
--     * @method remove_parent
--     */
--    remove_parent: function(parent_id) {
--        if (this.get('parents').length === 1) {
--            this.clean_display();
--            this.renderUI();
--        }
--        else {
--            this.fieldNode.one('tr#parent-' + parent_id).remove();
--        }
--        Y.fire("parent_removed", parent_id);
--    },
--
--    /**
--     * Disable the overlay (used when something goes wrong fetching possible
--     * components or pockets for the overlay).
--     *
--     * @method disable_overlay
--     */
--    disable_overlay: function(parent_node) {
--        var overlay = parent_node.one('input.overlay');
--        if (overlay.get('disabled') !== 'disabled') {
--            Y.lazr.anim.red_flash({node: parent_node}).run();
--            parent_node.one('input.overlay').set('disabled','disabled');
--        }
--    },
--
--    /**
--     * Add a parent series.
--     *
--     * @method add_parent
--     */
--    add_parent: function(parent) {
--        if (this.get('parents').length === 0) {
--            this.init_display();
--            this.renderUI();
--        }
--        var item = this.fieldNode.one('tr#parent-' + parent.value);
--        if (item !== null) {
--            Y.lazr.anim.red_flash({node: item}).run();
--            return false;
--        }
--        item =  Y.Node.create("<tr />")
--            .addClass('parent')
--            .set('id', 'parent-' + parent.value)
--            .append(Y.Node.create("<td />")
--                .append(Y.Node.create('<a href="" title="Move parent up"/>')
--                    .addClass('move-up')
--                .set('innerHTML', '&uarr;'))
--                .append(Y.Node.create('<a href="" title="Move parent down"/>')
--                    .addClass('move-down')
--                .set('innerHTML', '&darr;')))
--            .append(Y.Node.create("<td />")
--                .addClass('series')
--                .set('text', parent.title))
--            .append(Y.Node.create("<td />")
--                .set('align', 'center')
--                .append(Y.Node.create('<input type="checkbox" />')
--                    .addClass('overlay')))
--            .append(Y.Node.create("<td />")
--                .addClass('component'))
--            .append(Y.Node.create("<td />")
--                .addClass('pocket'))
--            .append(Y.Node.create("<td />")
--                .set('align', 'center')
--                .append(Y.Node.create('<span />')
--                    .addClass('sprite')
--                    .addClass('remove')));
--        this.fieldNode.one('tbody').append(item);
--        this.build_select(item, 'component',
--            parent.api_uri + '/component_names');
--        this.build_select(item, 'pocket',
--            parent.api_uri + '/suite_names');
--        item.one('.move-up').on('click', function(e) {
--            this.move_up(parent.value);
--            e.preventDefault();
--            return false;
--        }, this);
--        item.one('.move-down').on('click', function(e) {
--            this.move_down(parent.value);
--            e.preventDefault();
--            return false;
--        }, this);
--        item.one('.remove').on('click', function(e) {
--            var parent_id = item.get('id').replace('parent-','');
--            this.remove_parent(parent_id);
--            e.preventDefault();
--            return false;
--        }, this);
--
--        Y.lazr.anim.green_flash({node: item}).run();
--        return true;
--    }
--});
--
--namespace.ParentSeriesListWidget = ParentSeriesListWidget;
--
--
--/**
-- * A form row matching that which LaunchpadForm presents, containing a
-- * list of checkboxes, and an optional label and description.
-- *
-- * @class ChoiceListWidget
-- */
--var ChoiceListWidget;
--
--ChoiceListWidget = function() {
--    ChoiceListWidget.superclass.constructor.apply(this, arguments);
--};
--
--Y.mix(ChoiceListWidget, {
--
--    NAME: 'choiceListWidget',
--
--    ATTRS: {
--
--        /**
--         * An array of strings from which to choose.
--         *
--         * @property choices
--         */
--        choices: {
--            getter: function() {
--                return this.fieldNode.all("li > input").get("value");
--            },
--            setter: function(value, name) {
--                var choices = Y.Array.unique(value).sort();
--                var list = Y.Node.create("<ul />");
--                var self = this;
--                choices.forEach(
--                    function(choice) {
--                       var item = self._createChoice(choice);
--                       list.append(item);
--                    }
--                );
--                this.fieldNode.empty().append(list);
--            }
--        },
--
--        /**
--         * The current selection.
--         *
--         * @property choice
--         */
--        choice: {
--            setter: function(value, name) {
--                if (!Y.Lang.isArray(value)) {
--                    value = [value];
--                }
--                this.fieldNode.all("li > input").each(
--                    function(node) {
--                        node.set(
--                            "checked",
--                            value.indexOf(node.get("value")) >= 0);
--                    }
--                );
--            },
--            getter: function() {
--                var choice = [];
--                this.fieldNode.all("li > input").each(
--                    function(node) {
--                        if (node.get("checked")) {
--                            choice.push(node.get("value"));
--                        }
--                    }
--                );
--                if (this.get("type") === "radio") {
--                    if (choice.length === 0) {
--                        choice = null;
--                    }
--                    else if (choice.length === 1) {
--                        choice = choice[0];
--                    }
--                    else {
--                        choice = undefined;
--                    }
--                }
--                return choice;
--            }
--        },
--
--        /**
--         * The input type to display. Choose from "checkbox" or "radio".
--         *
--         * @property type
--         */
--        type: {
--            value: "checkbox",
--            setter: function(value, name) {
--                this.fieldNode.all("li > input").set("type", value);
--            }
--        }
--
--    }
--
--});
--
--Y.extend(ChoiceListWidget, FormRowWidget, {
--
--    /**
--     * Helper method to create an entry for the select widget.
--     *
--     * @method _createChoice
--     */
--    _createChoice: function(choice) {
--         var field_name = this.get("name");
--         var field_type = this.get("type");
--         var item = Y.Node.create(
--            "<li><input /> <label /></li>");
--        item.one("input")
--            .set("type", field_type)
--            .set("name", field_name)
--            .set("value", choice);
--        item.one("label")
--            .setAttribute(
--                "for", item.one("input").generateID())
--            .setStyle("font-weight", "normal")
--            .set("text", choice);
--        return item;
--    },
--
--   /**
--     * Remove a list of choices from the possible widget's choices.
--     *
--     * @method remove_choices
--     */
--    remove_choices: function(choices) {
--        choices.forEach(
--            function(choice) {
--                this.fieldNode.all("select > option").each(
--                    function(option) { options.push(option); });
--                this.fieldNode.all(
--                    "li input[value=" + choice + "]").each(
--                        function(li_input) {
--                            li_input.get('parentNode').remove();
--                        }
--                );
--            },
--            this
--        );
--        Y.lazr.anim.green_flash({node: this.fieldNode}).run();
--    },
--
--    _sorted_position: function(choice) {
--        var options = [];
--        this.fieldNode.all("input").each(
--            function(node) {
--                options.push(node.get('value'));
--            }
--        );
--        options.push(choice);
--        return options.sort().indexOf(choice);
--    },
--
--   /**
--     * Add new choices (if they are not already present).
--     *
--     * @method add_choices
--     */
--    add_choices: function(new_choices) {
--        new_choices.forEach(
--            function(choice) {
--                if (this.fieldNode.all(
--                    "li > input[value=" + choice + "]").isEmpty()) {
--                    var list = this.fieldNode.one('ul');
--                    if (list === null) {
--                        list = Y.Node.create("<ul />");
--                        this.fieldNode.empty().append(list);
--                    }
--                    var option = this._createChoice(choice);
--                    var options = list.all('input');
--                    if (options.isEmpty()) {
--                        list.append(option);
--                    }
--                    else {
--                        var pos = this._sorted_position(choice);
--                        if (pos === 0) {
--                            list.prepend(option);
--                        }
--                        else {
--                            list.insertBefore(option, options.item(pos));
--                        }
--                    }
--                }
--            }, this
--        );
--        Y.lazr.anim.green_flash({node: this.fieldNode}).run();
--    }
--
--});
--
--
--namespace.ChoiceListWidget = ChoiceListWidget;
--
--
--/**
-- * A special form of ChoiceListWidget for choosing architecture tags.
-- *
-- * @class ArchitecturesChoiceListWidget
-- */
--var ArchitecturesChoiceListWidget;
--
--ArchitecturesChoiceListWidget = function() {
--    ArchitecturesChoiceListWidget
--        .superclass.constructor.apply(this, arguments);
--};
--
--Y.mix(ArchitecturesChoiceListWidget, {
--
--    NAME: 'architecturesChoiceListWidget',
--
--    ATTRS: {
--    }
--
--});
--
--Y.extend(ArchitecturesChoiceListWidget, ChoiceListWidget, {
--
--    initializer: function(config) {
--        this.client = new Y.lp.client.Launchpad();
--        this.error_handler = new Y.lp.client.ErrorHandler();
--        this.error_handler.clearProgressUI = Y.bind(this.hideSpinner, this);
--        this.error_handler.showError = Y.bind(this.showError, this);
--        this._distroseries = {};
--        this.clean_display();
--    },
--
--    /**
--     * Display a simple message when no parent series are selected.
--     *
--     * @method clean_display
--     */
--    clean_display: function() {
--        this.fieldNode.empty();
--        this.fieldNode.append(Y.Node.create("<div />")
--            .set('text', '[No architectures to select from yet!]'));
--        this.renderUI();
--    },
--
--    /**
--     * Add a parent distroseries, add the architectures for this new
--     * distroseries to the possible choices.
--     *
--     * @method add_distroseries
--     * @param {Object} The distroseries to add ({value:distroseries_id),
--     *     api_uri:distroseries_uri}).
--     */
--    add_distroseries: function(distroseries) {
--        var path = distroseries.api_uri + "/architectures";
--        var distroseries_id = distroseries.value;
--        var self = this;
--        var on = {
--            success: function (results) {
--                self.add_distroarchseries(distroseries_id, results);
--            },
--            failure: this.error_handler.getFailureHandler()
--        };
--        this.client.get(path, {on: on});
--     },
--
--    /**
--     * Remove a parent distroseries, remove the architectures only
--     * present in this parent series from the possible choices.
--     *
--     * @method remove_distroseries
--     */
--    remove_distroseries: function(distroseries_id) {
--        // Compute which das is only in the distroseries to be removed.
--        var arch_to_remove = [];
--        var das = this._distroseries[distroseries_id];
--        var i, ds, j;
--        for (i=0; i<das.entries.length; i++) {
--            var remove_das = true;
--            var arch = das.entries[i].get('architecture_tag');
--            for (ds in this._distroseries) {
--                if (this._distroseries.hasOwnProperty(ds) &&
--                    ds !== distroseries_id) {
--                   var other_das = this._distroseries[ds];
--                   for (j=0; j<other_das.entries.length; j++) {
--                       var other_arch = other_das.entries[j].get(
--                           'architecture_tag');
--                       if (other_arch === arch) {
--                           remove_das = false;
--                       }
--                   }
--                }
--            }
--            if (remove_das) {
--                arch_to_remove.push(arch);
--            }
--        }
--        delete this._distroseries[distroseries_id];
--        this.remove_choices(arch_to_remove);
--        if (this.fieldNode.all('input').isEmpty()) {
--            this.clean_display();
--        }
--    },
--
--    /**
--     * Add a list of distroarchseries.
--     *
--     * @method add_distroarchseries
--     * @param {String} distroseries_id The distroarchseries id.
--     * @param {Object} distroarchseries The distroarchseries object.
--     */
--    add_distroarchseries: function(distroseries_id, distroarchseries) {
--        this._distroseries[distroseries_id] = distroarchseries;
--        var choices = distroarchseries.entries.map(
--            function(das) {
--                return das.get("architecture_tag");
--            }
--        );
--        this.add_choices(choices);
--     }
--
--});
--
--namespace.ArchitecturesChoiceListWidget = ArchitecturesChoiceListWidget;
--
--
--/**
-- * A special form of FormRowWidget, containing a select control.
-- *
-- * @class SelectWidget
-- */
--var SelectWidget;
--
--SelectWidget = function() {
--    SelectWidget.superclass.constructor.apply(this, arguments);
--};
--
--Y.mix(SelectWidget, {
--
--    NAME: 'selectWidget',
--
--    ATTRS: {
--
--        /**
--         * An array of objects from which to choose. Each object
--         * should contain a value for "value", "text" and "data".
--         *
--         * @property choices
--         */
--        choices: {
--            getter: function() {
--                /* I think this is a YUI3 wart; I can't see any way to
--                   map() over a NodeList, so I must push the elements
--                   one by one into an array first. */
--                var options = Y.Array([]);
--                this.fieldNode.all("select > option").each(
--                    function(option) { options.push(option); });
--                return options.map(
--                    function(option) {
--                        return {
--                            value: option.get("value"),
--                            text: option.get("text"),
--                            data: option.getData("data")
--                        };
--                    }
--                );
--            },
--            setter: function(value, name) {
--                var select = Y.Node.create("<select />");
--                select.set("name", this.get("name"))
--                      .set("size", this.get("size"));
--                if (this.get("multiple")) {
--                    select.set("multiple", "multiple");
--                }
--                var choices = Y.Array(value);
--                choices.forEach(
--                    function(choice) {
--                        var option = Y.Node.create("<option />");
--                        option.set("value", choice.value)
--                              .set("text", choice.text)
--                              .setData("data", choice.data);
--                        select.append(option);
--                    }
--                );
--                if (choices.length > 0) {
--                    this.fieldNode.empty().append(select);
--                }
--                else {
--                    this.fieldNode.empty();
--                }
--            }
--        },
--
--        /**
--         * The current selection.
--         *
--         * @property choice
--         */
--        choice: {
--            setter: function(value, name) {
--                if (!Y.Lang.isArray(value)) {
--                    value = [value];
--                }
--                this.fieldNode.all("select > option").each(
--                    function(node) {
--                        node.set(
--                            "selected",
--                            value.indexOf(node.get("value")) >= 0);
--                    }
--                );
--            },
--            getter: function() {
--                var choice = [];
--                this.fieldNode.all("select > option").each(
--                    function(node) {
--                        if (node.get("selected")) {
--                            choice.push(node.get("value"));
--                        }
--                    }
--                );
--                return choice;
--            }
--        },
--
--        /**
--         * The number of rows to show in the select widget.
--         *
--         * @property size
--         */
--        size: {
--            value: 1,
--            setter: function(value, name) {
--                this.fieldNode.all("select").set("size", value);
--            }
--        },
--
--        /**
--         * Whether multiple rows can be selected.
--         *
--         * @property multiple
--         */
--        multiple: {
--            value: false,
--            setter: function(value, name) {
--                value = value ? true : false;
--                this.fieldNode.all("select").set("multiple", value);
--                return value;
--            }
--        }
--
--    }
--
--});
--
--Y.extend(SelectWidget, FormRowWidget, {
--
--    _sorted_position: function(choice) {
--        var options = [];
--        this.fieldNode.all("option").each(
--            function(node) {
--                options.push(node.get('text'));
--            }
--        );
--        options.push(choice);
--        return options.sort().indexOf(choice);
--    },
--
--    /**
--     * Choose a size for the select control based on the number of
--     * choices, up to an optional maximum size.
--     *
--     * @method autoSize
--     */
--    autoSize: function(maxSize) {
--        var choiceCount = this.fieldNode.all("select > option").size();
--        if (choiceCount === 0) {
--            this.set("size", 1);
--        }
--        else if (maxSize === undefined) {
--            this.set("size", choiceCount);
--        }
--        else if (choiceCount < maxSize) {
--            this.set("size", choiceCount);
--        }
--        else {
--            this.set("size", maxSize);
--        }
--        return this;
--    }
--
--});
--
--namespace.SelectWidget = SelectWidget;
--
--
--/**
-- * A special form of SelectWidget for choosing packagesets.
-- *
-- * @class PackagesetPickerWidget
-- */
--var PackagesetPickerWidget;
--
--PackagesetPickerWidget = function() {
--    PackagesetPickerWidget
--        .superclass.constructor.apply(this, arguments);
--};
--
--Y.mix(PackagesetPickerWidget, {
--
--    NAME: 'packagesetPickerWidget',
--
--    ATTRS: {
--
--        /**
--         * The DistroSeries the choices in this field should
--         * reflect. Takes the form of a string, e.g. "ubuntu/hoary".
--         *
--         * @property distroSeries
--         */
--        distroSeries: {
--            setter: function(value, name) {
--                var distro_series_uri = Y.lp.client.get_absolute_uri(value);
--                var on = {
--                    start: Y.bind(this.showSpinner, this),
--                    success: Y.bind(this.set, this, "packageSets"),
--                    failure: this.error_handler.getFailureHandler(),
--                    end: Y.bind(this.hideSpinner, this)
--                };
--                var config = {
--                    on: on,
--                    parameters: {
--                        distroseries: distro_series_uri
--                    }
--                };
--                this.client.named_get("package-sets", "getBySeries", config);
--            }
--        }
--    }
--});
--
--
--Y.extend(PackagesetPickerWidget, SelectWidget, {
--
--    /**
--     * Add a distroseries: add its packagesets to the packageset picker.
--     *
--     * @method add_distroseries
--     * @param {Object} distroseries The distroseries object.
--     */
--    add_distroseries: function(distroseries) {
--        var distro_series_uri = Y.lp.client.get_absolute_uri(
--            distroseries.api_uri);
--        var self = this;
--        var on = {
--            success: function (results) {
--                self.add_packagesets(results, distroseries);
--            },
--            failure: this.error_handler.getFailureHandler()
--        };
--        var config = {
--            on: on,
--            parameters: {
--                distroseries: distro_series_uri
--            }
--        };
--        this.client.named_get("package-sets", "getBySeries", config);
--    },
--
--    /**
--     * Display a simple message when no parent series are selected.
--     *
--     * @method clean_display
--     */
--    clean_display: function() {
--        this.fieldNode.empty();
--        this.fieldNode.append(Y.Node.create("<div />")
--            .set('text', '[No package sets to select from yet!]'));
--        this.renderUI();
--    },
--
--    /**
--     * Initialize the picker's select node.
--     *
--     * @method init_select
--     */
--    init_select: function() {
--        var select = this.fieldNode.one('select');
--        if (select === null) {
--            select = Y.Node.create("<select />");
--            select.set("name", this.get("name"))
--                    .set("size", this.get("size"));
--            if (this.get("multiple")) {
--                select.set("multiple", "multiple");
--            }
--            this.fieldNode.empty().append(select);
--        }
--        return select;
--    },
--
--    /**
--     * Add a choice to the picker.
--     *
--     * @method add_choice
--     * @param {Object} choice The choice object to be added
--     *     ({text: choice_text, value: choice_value, data: choice_data}).
--     */
--    add_choice: function(choice) {
--        var select = this.init_select();
--        var option = Y.Node.create("<option />");
--        option.set("value", choice.value)
--            .set("text", choice.text)
--            .setData("data", choice.data);
--        var options = select.all('option');
--        if (options.isEmpty()) {
--            select.append(option);
--        }
--        else {
--            var pos = this._sorted_position(choice.text);
--            if (pos === 0) {
--                select.prepend(option);
--            }
--            else {
--                select.insertBefore(option, options.item(pos));
--            }
--        }
--    },
--
--    /**
--     * Add choices (a set of packagesets) to the picker.
--     *
--     * @method add_packagesets
--     * @param {Y.lp.client.Collection} packagesets The collection of
--     *     packagesets to add.
--     * @param {Object} distroseries The distroseries object
--     *     ({value:distroseries_id), api_uri:distroseries_uri}).
--     */
--    add_packagesets: function(packagesets, distroseries) {
--        this._packagesets[distroseries.value] = packagesets.entries;
--        packagesets.entries.forEach(
--            function(packageset) {
--                var value = packageset.get("id");
--                this.add_choice({
--                    data: packageset,
--                    value: value,
--                    text: (
--                        packageset.get("name") + ": " +
--                        packageset.get("description") +
--                        " (" + distroseries.title + ") ")
--                });
--            }, this);
--        this.autoSize(10);
--        Y.lazr.anim.green_flash({node: this.fieldNode}).run();
--     },
--
--    /**
--     * Remove a distroseries: remove its packagesets from the picker.
--     *
--     * @method remove_distroseries
--     * @param {String} distroseries_id The id of the distroseries to be
--     *     removed.
--     */
--    remove_distroseries: function(distroseries_id) {
--        this._packagesets[distroseries_id].forEach(
--            function(packageset) {
--                this.fieldNode.one(
--                    'option[value="' + packageset.get("id") + '"]').remove();
--            }, this);
--       Y.lazr.anim.green_flash({node: this.fieldNode}).run();
--        if (this.fieldNode.all('option').isEmpty()) {
--            this.clean_display();
--        }
--    },
--
--    initializer: function(config) {
--        this.client = new Y.lp.client.Launchpad();
--        this.error_handler = new Y.lp.client.ErrorHandler();
--        this.error_handler.clearProgressUI = Y.bind(this.hideSpinner, this);
--        this.error_handler.showError = Y.bind(this.showError, this);
--        this.clean_display();
--        // _packagesets maps each distroseries' id to a collection of ids
--        // of its packagesets.
--        // It's populated each time a new distroseries is added as a parent
--        // and used when a distroseries is removed to get all the
--        // corresponding packagesets to be removed from the widget.
--        this._packagesets = {};
--    }
--
--});
--
--namespace.PackagesetPickerWidget = PackagesetPickerWidget;
--
--
--/**
-- * A widget to encapsulate functionality around the form actions.
-- *
-- * @class FormActionsWidget
-- */
--var FormActionsWidget;
--
--FormActionsWidget = function() {
--    FormActionsWidget
--        .superclass.constructor.apply(this, arguments);
--};
--
--FormActionsWidget.ATTRS = {
--    duration: {
--        value: 1.0
--    },
--
--    height: {
--        value: 0
--    },
--
--    opacity: {
--        value: 0
--    }
--};
--
--
--Y.mix(FormActionsWidget, {
--
--    NAME: 'formActionsWidget',
--
--    HTML_PARSER: {
--        submitButtonNode: "input[type=submit]"
--    }
--
--});
--
--Y.extend(FormActionsWidget, Y.Widget, {
--
--    initializer: function(config) {
--        this.client = new Y.lp.client.Launchpad();
--        this.error_handler = new Y.lp.client.ErrorHandler();
--        this.error_handler.clearProgressUI = Y.bind(this.hideSpinner, this);
--        this.error_handler.showError = Y.bind(this.showError, this);
--        this.submitButtonNode = config.submitButtonNode;
--        this.spinnerNode = Y.Node.create(
--            '<img src="/@@/spinner" alt="Loading..." />');
--    },
--
--    /**
--     * Show the spinner, and hide the submit button.
--     *
--     * @method showSpinner
--     */
--    showSpinner: function() {
--        this.submitButtonNode.replace(this.spinnerNode);
--    },
--
--    /**
--     * Hide the spinner, and show the submit button again.
--     *
--     * @method hideSpinner
--     */
--    hideSpinner: function() {
--        this.spinnerNode.replace(this.submitButtonNode);
--    },
--
--    /**
--     * Display an error.
--     *
--     * @method showError
--     */
--    showError: function(error) {
--        Y.Node.create('<p class="error message" />')
--            .appendTo(this.get("contentBox"))
--            .set("text", error);
--    },
--
--    /**
--     * Remove all errors that have been previously displayed by showError.
--     *
--     * @method hideErrors
--     */
--    hideErrors: function(error) {
--        this.get("contentBox").all("p.error.message").remove();
--    }
--
--});
--
--namespace.FormActionsWidget = FormActionsWidget;
++var widgets = Y.lp.registry.distroseries.widgets;
  /**
@@ -1262,7 +35,7 @@
  });
--Y.extend(DeriveDistroSeriesActionsWidget, FormActionsWidget, {
++Y.extend(DeriveDistroSeriesActionsWidget, widgets.FormActionsWidget, {
      initializer: function(config) {
          this.context = config.context;
@@ -1399,14 +172,14 @@
              .set("text", "Add parent series");
      add_parent_link.appendTo(form_table_body);
      var parents_selection =
--        new ParentSeriesListWidget()
++        new widgets.ParentSeriesListWidget()
              .set("name", "field.parent")
              .set("label", "Parent Series:")
              .set("description", (
                       "Choose and configure the parent series."))
              .render(form_table_body);
      var architecture_choice =
--        new ArchitecturesChoiceListWidget()
++        new widgets.ArchitecturesChoiceListWidget()
              .set("name", "field.architectures")
              .set("label", "Architectures:")
              .set("description", (
@@ -1418,7 +191,7 @@
      var packageset_choice = null;
      if (cache.is_first_derivation) {
          packageset_choice =
--            new PackagesetPickerWidget()
++            new widgets.PackagesetPickerWidget()
                  .set("name", "field.packagesets")
                  .set("size", 5)
                  .set("help", {link: '/+help/init-series-packageset-help.html',
@@ -1433,7 +206,7 @@
                  .render(form_table_body);
+     }
      var package_copy_options =
--        new ChoiceListWidget()
++        new widgets.ChoiceListWidget()
              .set("name", "field.package_copy_options")
              .set("type", "radio")
              .set("label", "Copy options:")
@@ -1530,6 +303,6 @@
  };
--}, "0.1", {"requires": ["node", "dom", "io", "widget", "lp.client",
--                        "lazr.anim", "array-extras", "transition",
++}, "0.1", {"requires": ["node", "dom", "io", "widget", "array-extras",
++                        "transition", "lp.registry.distroseries.widgets",
                          "lp.app.picker"]});
 === added file 'lib/lp/registry/javascript/distroseries.widgets.js'
 --- lib/lp/registry/javascript/distroseries.widgets.js	1970-01-01 00:00:00 +0000
 +++ lib/lp/registry/javascript/distroseries.widgets.js	2011-07-18 11:56:52 +0000
@@ -0,0 +1,1247 @@
++/**
++ * Copyright 2011 Canonical Ltd. This software is licensed under the
++ * GNU Affero General Public License version 3 (see the file LICENSE).
++ *
++ * DistroSeries related stuff.
++ *
++ * @module registry
++ * @submodule distroseries
++ */
++
++YUI.add('lp.registry.distroseries.widgets', function(Y) {
++
++Y.log('loading lp.registry.distroseries.widgets');
++
++var namespace = Y.namespace('lp.registry.distroseries.widgets');
++
++
++/**
++ * A form row matching that which LaunchpadForm presents, containing a
++ * field (defined in a subclass), and an optional label and
++ * description.
++ *
++ * @class FormRowWidget
++ */
++var FormRowWidget;
++
++FormRowWidget = function() {
++    FormRowWidget.superclass.constructor.apply(this, arguments);
++};
++
++Y.mix(FormRowWidget, {
++
++    NAME: 'formRowWidget',
++
++    ATTRS: {
++
++        /**
++         * The field name.
++         *
++         * @property name
++         */
++        name: {
++            setter: function(value, name) {
++                this.fieldNode.all("input, select").set("name", value);
++            }
++        },
++
++        /**
++         * The top label for the field.
++         *
++         * @property label
++         */
++        label: {
++            getter: function() {
++                return this.labelNode.get("text");
++            },
++            setter: function(value, name) {
++                this.labelNode.set("text", value);
++            }
++        },
++
++        /**
++         * A dictionary {link:link, text:text} to populate
++         * the pop-up help for the field.
++         *
++         * @property help
++         */
++        help: {
++            getter: function() {
++                return {link:this.helpNode.one('a')
++                            .get("href"),
++                        text:this.helpNode
++                            .one('.invisible-link')
++                            .get("text")};
++            },
++            setter: function(value, name) {
++                if ((value.link !== undefined) &&
++                    (value.text !== undefined)) {
++                    this.helpNode.one('a').set("href", value.link);
++                    this.helpNode.one('.invisible-link')
++                        .set("text", value.text);
++                    this.helpNode.removeClass('unseen');
++                }
++                else {
++                    this.helpNode.addClass('unseen');
++                }
++            }
++        },
++
++        /**
++         * A description shown near the field.
++         *
++         * @label description
++         */
++        description: {
++            getter: function() {
++                return this.descriptionNode.get("text");
++            },
++            setter: function(value, name) {
++                this.descriptionNode.set("text", value);
++            }
++        }
++    }
++
++});
++
++Y.extend(FormRowWidget, Y.Widget, {
++
++    BOUNDING_TEMPLATE: "<tr></tr>",
++
++    CONTENT_TEMPLATE: '<td colspan="2"></td>',
++
++    initializer: function(config) {
++        this.labelNode = Y.Node.create("<label />");
++        this.helpNode = Y.Node.create(('<span class="helper unseen">'+
++            '&nbsp;<a href=""' +
++            'target="help" class="sprite maybe">&nbsp;' +
++            '<span class="invisible-link"></span></a></span>'));
++        this.fieldNode = Y.Node.create("<div></div>");
++        this.descriptionNode = Y.Node.create('<p class="formHelp" />');
++        this.spinnerNode = Y.Node.create(
++            '<img src="/@@/spinner" alt="Loading..." />');
++    },
++
++    renderUI: function() {
++        this.get("contentBox")
++            .append(this.labelNode)
++            .append(this.helpNode)
++            .append(this.fieldNode)
++            .append(this.descriptionNode);
++    },
++
++    /**
++     * Show the spinner.
++     *
++     * @method showSpinner
++     */
++    showSpinner: function() {
++        this.fieldNode.empty().append(this.spinnerNode);
++    },
++
++    /**
++     * Hide the spinner.
++     *
++     * @method hideSpinner
++     */
++    hideSpinner: function() {
++        this.spinnerNode.remove();
++    },
++
++    /**
++     * Display an error.
++     *
++     * @method showError
++     */
++    showError: function(error) {
++        var message = Y.Node.create('<p />').set("text", error);
++        this.fieldNode.empty().append(message);
++        Y.lazr.anim.red_flash({node: message}).run();
++    }
++
++});
++
++namespace.FormRowWidget = FormRowWidget;
++
++/**
++ * A table to display, order, delete the selected parent series. Each parent
++ * can also be made an overlay, and a component and a pocket selected.
++ *
++ */
++var ParentSeriesListWidget;
++
++ParentSeriesListWidget = function() {
++    ParentSeriesListWidget
++        .superclass.constructor.apply(this, arguments);
++};
++
++Y.mix(ParentSeriesListWidget, {
++
++    NAME: 'parentSeriesListWidget',
++
++    ATTRS: {
++
++        /**
++         * The DistroSeries the choices in this field should
++         * reflect. Takes the form of a list of ids,
++         * e.g. ["4", "55"].
++         *
++         * @property parents
++         */
++        parents: {
++            getter: function() {
++                var series = [];
++                this.fieldNode.all("tbody > tr.parent").each(
++                    function(node) {
++                        series.push(
++                            node.get('id').replace('parent-',''));
++                    }
++                );
++                return series;
++            }
++        },
++        overlays: {
++            getter: function() {
++                var overlays = [];
++                this.fieldNode.all("tbody > tr.parent").each(
++                    function(node) {
++                        overlays.push(
++                            node.one('input.overlay').get('checked'));
++                    }
++                );
++                return overlays;
++            }
++        },
++        overlay_pockets: {
++            getter: function() {
++                var overlay_pockets = [];
++                this.fieldNode.all("tbody > tr.parent").each(
++                    function(node) {
++                        var select = node.one('td.pocket').one('select');
++                        if (select !== null) {
++                            overlay_pockets.push(select.get('value'));
++                        }
++                        else {
++                            overlay_pockets.push(null);
++                        }
++                    }
++                );
++                return overlay_pockets;
++            }
++        },
++        overlay_components: {
++            getter: function() {
++                var overlay_components = [];
++                this.fieldNode.all("tbody > tr.parent").each(
++                    function(node) {
++                        var select = node.one('td.component').one('select');
++                        if (select !== null) {
++                            overlay_components.push(select.get('value'));
++                        }
++                        else {
++                            overlay_components.push(null);
++                        }
++                    }
++                );
++                return overlay_components;
++            }
++        }
++    }
++});
++
++Y.extend(ParentSeriesListWidget, FormRowWidget, {
++
++    initializer: function() {
++        ParentSeriesListWidget.superclass.initializer();
++        this.client = new Y.lp.client.Launchpad();
++        this.clean_display();
++    },
++
++    /**
++     * Display a simple message when no parent series are selected.
++     *
++     * @method clean_display
++     */
++    clean_display: function() {
++        this.fieldNode.empty();
++        this.fieldNode.append(Y.Node.create("<div />")
++            .set('text', '[No parent for this series yet!]'));
++    },
++
++    /**
++     * Display the table header.
++     *
++     * @method init_display
++     */
++    init_display: function() {
++        this.fieldNode.empty();
++        this.fieldNode = Y.Node.create("<table />");
++        var table_header = Y.Node.create(
++            ["<thead><tr>",
++             "<th>Order</th>",
++             "<th>Parent name</th>",
++             "<th>Overlay?</th>",
++             "<th>Component</th>",
++             "<th>Pocket</th>",
++             "<th>Delete</th>",
++             "</tr></thead>",
++             "<tbody>",
++             "</tbody>"
++            ].join(""));
++        this.fieldNode.append(table_header);
++    },
++
++    /**
++     * Helper method to create a select widget from a list and add it
++     * to a node.
++     *
++     * @method build_selector
++     */
++    build_selector: function(node, res_list, class_name) {
++        var select = Y.Node.create('<select disabled="disabled"/>');
++        res_list.forEach(
++            function(choice) {
++                select.appendChild('<option />')
++                    .set('text', choice)
++                    .set('value', choice);
++            });
++        node.one('td.'+class_name).append(select);
++        node.one('input').on('click', function(e) {
++            var select = node.one('td.'+class_name).one('select');
++            if (select.hasAttribute('disabled')) {
++                select.removeAttribute('disabled');
++            }
++            else {
++                select.setAttribute('disabled', 'disabled');
++            }
++        });
++    },
++
++    /**
++     * Build a select widget from a list retrieved from the api.
++     *
++     * @method build_select
++     */
++    build_select: function(node, class_name, path) {
++        var self = this;
++        var on = {
++            success: function(res_list) {
++                self.build_selector(node, res_list, class_name);
++            },
++            failure: function() {
++                var failed_node = Y.Node.create('<span />')
++                    .set('text', 'Failed to retrieve content.');
++                node.one('td.'+class_name).append(failed_node);
++                self.disable_overlay(node);
++            }
++        };
++        this.client.get(path, {on: on});
++     },
++
++
++    /**
++     * Move down a parent's line in the table.
++     *
++     * @method move_down
++     */
++    move_down: function(parent_id) {
++        var node = this.fieldNode.one("tr#parent-" + parent_id);
++        var other = node.next('tr.parent');
++        if (other !== null) { node.swap(other);}
++        Y.lazr.anim.green_flash({node: node}).run();
++    },
++
++    /**
++     * Move up a parent's line in the table.
++     *
++     * @method move_up
++     */
++    move_up: function(parent_id) {
++        var node = this.fieldNode.one("tr#parent-" + parent_id);
++        var other = node.previous('tr.parent');
++        if (other !== null) { node.swap(other);}
++        Y.lazr.anim.green_flash({node: node}).run();
++    },
++
++    /**
++     * Remove a parent series.
++     *
++     * @method remove_parent
++     */
++    remove_parent: function(parent_id) {
++        if (this.get('parents').length === 1) {
++            this.clean_display();
++            this.renderUI();
++        }
++        else {
++            this.fieldNode.one('tr#parent-' + parent_id).remove();
++        }
++        Y.fire("parent_removed", parent_id);
++    },
++
++    /**
++     * Disable the overlay (used when something goes wrong fetching possible
++     * components or pockets for the overlay).
++     *
++     * @method disable_overlay
++     */
++    disable_overlay: function(parent_node) {
++        var overlay = parent_node.one('input.overlay');
++        if (overlay.get('disabled') !== 'disabled') {
++            Y.lazr.anim.red_flash({node: parent_node}).run();
++            parent_node.one('input.overlay').set('disabled','disabled');
++        }
++    },
++
++    /**
++     * Add a parent series.
++     *
++     * @method add_parent
++     */
++    add_parent: function(parent) {
++        if (this.get('parents').length === 0) {
++            this.init_display();
++            this.renderUI();
++        }
++        var item = this.fieldNode.one('tr#parent-' + parent.value);
++        if (item !== null) {
++            Y.lazr.anim.red_flash({node: item}).run();
++            return false;
++        }
++        item =  Y.Node.create("<tr />")
++            .addClass('parent')
++            .set('id', 'parent-' + parent.value)
++            .append(Y.Node.create("<td />")
++                .append(Y.Node.create('<a href="" title="Move parent up"/>')
++                    .addClass('move-up')
++                .set('innerHTML', '&uarr;'))
++                .append(Y.Node.create('<a href="" title="Move parent down"/>')
++                    .addClass('move-down')
++                .set('innerHTML', '&darr;')))
++            .append(Y.Node.create("<td />")
++                .addClass('series')
++                .set('text', parent.title))
++            .append(Y.Node.create("<td />")
++                .set('align', 'center')
++                .append(Y.Node.create('<input type="checkbox" />')
++                    .addClass('overlay')))
++            .append(Y.Node.create("<td />")
++                .addClass('component'))
++            .append(Y.Node.create("<td />")
++                .addClass('pocket'))
++            .append(Y.Node.create("<td />")
++                .set('align', 'center')
++                .append(Y.Node.create('<span />')
++                    .addClass('sprite')
++                    .addClass('remove')));
++        this.fieldNode.one('tbody').append(item);
++        this.build_select(item, 'component',
++            parent.api_uri + '/component_names');
++        this.build_select(item, 'pocket',
++            parent.api_uri + '/suite_names');
++        item.one('.move-up').on('click', function(e) {
++            this.move_up(parent.value);
++            e.preventDefault();
++            return false;
++        }, this);
++        item.one('.move-down').on('click', function(e) {
++            this.move_down(parent.value);
++            e.preventDefault();
++            return false;
++        }, this);
++        item.one('.remove').on('click', function(e) {
++            var parent_id = item.get('id').replace('parent-','');
++            this.remove_parent(parent_id);
++            e.preventDefault();
++            return false;
++        }, this);
++
++        Y.lazr.anim.green_flash({node: item}).run();
++        return true;
++    }
++});
++
++namespace.ParentSeriesListWidget = ParentSeriesListWidget;
++
++
++/**
++ * A form row matching that which LaunchpadForm presents, containing a
++ * list of checkboxes, and an optional label and description.
++ *
++ * @class ChoiceListWidget
++ */
++var ChoiceListWidget;
++
++ChoiceListWidget = function() {
++    ChoiceListWidget.superclass.constructor.apply(this, arguments);
++};
++
++Y.mix(ChoiceListWidget, {
++
++    NAME: 'choiceListWidget',
++
++    ATTRS: {
++
++        /**
++         * An array of strings from which to choose.
++         *
++         * @property choices
++         */
++        choices: {
++            getter: function() {
++                return this.fieldNode.all("li > input").get("value");
++            },
++            setter: function(value, name) {
++                var choices = Y.Array.unique(value).sort();
++                var list = Y.Node.create("<ul />");
++                var self = this;
++                choices.forEach(
++                    function(choice) {
++                       var item = self._createChoice(choice);
++                       list.append(item);
++                    }
++                );
++                this.fieldNode.empty().append(list);
++            }
++        },
++
++        /**
++         * The current selection.
++         *
++         * @property choice
++         */
++        choice: {
++            setter: function(value, name) {
++                if (!Y.Lang.isArray(value)) {
++                    value = [value];
++                }
++                this.fieldNode.all("li > input").each(
++                    function(node) {
++                        node.set(
++                            "checked",
++                            value.indexOf(node.get("value")) >= 0);
++                    }
++                );
++            },
++            getter: function() {
++                var choice = [];
++                this.fieldNode.all("li > input").each(
++                    function(node) {
++                        if (node.get("checked")) {
++                            choice.push(node.get("value"));
++                        }
++                    }
++                );
++                if (this.get("type") === "radio") {
++                    if (choice.length === 0) {
++                        choice = null;
++                    }
++                    else if (choice.length === 1) {
++                        choice = choice[0];
++                    }
++                    else {
++                        choice = undefined;
++                    }
++                }
++                return choice;
++            }
++        },
++
++        /**
++         * The input type to display. Choose from "checkbox" or "radio".
++         *
++         * @property type
++         */
++        type: {
++            value: "checkbox",
++            setter: function(value, name) {
++                this.fieldNode.all("li > input").set("type", value);
++            }
++        }
++
++    }
++
++});
++
++Y.extend(ChoiceListWidget, FormRowWidget, {
++
++    /**
++     * Helper method to create an entry for the select widget.
++     *
++     * @method _createChoice
++     */
++    _createChoice: function(choice) {
++         var field_name = this.get("name");
++         var field_type = this.get("type");
++         var item = Y.Node.create(
++            "<li><input /> <label /></li>");
++        item.one("input")
++            .set("type", field_type)
++            .set("name", field_name)
++            .set("value", choice);
++        item.one("label")
++            .setAttribute(
++                "for", item.one("input").generateID())
++            .setStyle("font-weight", "normal")
++            .set("text", choice);
++        return item;
++    },
++
++   /**
++     * Remove a list of choices from the possible widget's choices.
++     *
++     * @method remove_choices
++     */
++    remove_choices: function(choices) {
++        choices.forEach(
++            function(choice) {
++                this.fieldNode.all("select > option").each(
++                    function(option) { options.push(option); });
++                this.fieldNode.all(
++                    "li input[value=" + choice + "]").each(
++                        function(li_input) {
++                            li_input.get('parentNode').remove();
++                        }
++                );
++            },
++            this
++        );
++        Y.lazr.anim.green_flash({node: this.fieldNode}).run();
++    },
++
++    _sorted_position: function(choice) {
++        var options = [];
++        this.fieldNode.all("input").each(
++            function(node) {
++                options.push(node.get('value'));
++            }
++        );
++        options.push(choice);
++        return options.sort().indexOf(choice);
++    },
++
++   /**
++     * Add new choices (if they are not already present).
++     *
++     * @method add_choices
++     */
++    add_choices: function(new_choices) {
++        new_choices.forEach(
++            function(choice) {
++                if (this.fieldNode.all(
++                    "li > input[value=" + choice + "]").isEmpty()) {
++                    var list = this.fieldNode.one('ul');
++                    if (list === null) {
++                        list = Y.Node.create("<ul />");
++                        this.fieldNode.empty().append(list);
++                    }
++                    var option = this._createChoice(choice);
++                    var options = list.all('input');
++                    if (options.isEmpty()) {
++                        list.append(option);
++                    }
++                    else {
++                        var pos = this._sorted_position(choice);
++                        if (pos === 0) {
++                            list.prepend(option);
++                        }
++                        else {
++                            list.insertBefore(option, options.item(pos));
++                        }
++                    }
++                }
++            }, this
++        );
++        Y.lazr.anim.green_flash({node: this.fieldNode}).run();
++    }
++
++});
++
++
++namespace.ChoiceListWidget = ChoiceListWidget;
++
++
++/**
++ * A special form of ChoiceListWidget for choosing architecture tags.
++ *
++ * @class ArchitecturesChoiceListWidget
++ */
++var ArchitecturesChoiceListWidget;
++
++ArchitecturesChoiceListWidget = function() {
++    ArchitecturesChoiceListWidget
++        .superclass.constructor.apply(this, arguments);
++};
++
++Y.mix(ArchitecturesChoiceListWidget, {
++
++    NAME: 'architecturesChoiceListWidget',
++
++    ATTRS: {
++    }
++
++});
++
++Y.extend(ArchitecturesChoiceListWidget, ChoiceListWidget, {
++
++    initializer: function(config) {
++        this.client = new Y.lp.client.Launchpad();
++        this.error_handler = new Y.lp.client.ErrorHandler();
++        this.error_handler.clearProgressUI = Y.bind(this.hideSpinner, this);
++        this.error_handler.showError = Y.bind(this.showError, this);
++        this._distroseries = {};
++        this.clean_display();
++    },
++
++    /**
++     * Display a simple message when no parent series are selected.
++     *
++     * @method clean_display
++     */
++    clean_display: function() {
++        this.fieldNode.empty();
++        this.fieldNode.append(Y.Node.create("<div />")
++            .set('text', '[No architectures to select from yet!]'));
++        this.renderUI();
++    },
++
++    /**
++     * Add a parent distroseries, add the architectures for this new
++     * distroseries to the possible choices.
++     *
++     * @method add_distroseries
++     * @param {Object} The distroseries to add ({value:distroseries_id),
++     *     api_uri:distroseries_uri}).
++     */
++    add_distroseries: function(distroseries) {
++        var path = distroseries.api_uri + "/architectures";
++        var distroseries_id = distroseries.value;
++        var self = this;
++        var on = {
++            success: function (results) {
++                self.add_distroarchseries(distroseries_id, results);
++            },
++            failure: this.error_handler.getFailureHandler()
++        };
++        this.client.get(path, {on: on});
++     },
++
++    /**
++     * Remove a parent distroseries, remove the architectures only
++     * present in this parent series from the possible choices.
++     *
++     * @method remove_distroseries
++     */
++    remove_distroseries: function(distroseries_id) {
++        // Compute which das is only in the distroseries to be removed.
++        var arch_to_remove = [];
++        var das = this._distroseries[distroseries_id];
++        var i, ds, j;
++        for (i=0; i<das.entries.length; i++) {
++            var remove_das = true;
++            var arch = das.entries[i].get('architecture_tag');
++            for (ds in this._distroseries) {
++                if (this._distroseries.hasOwnProperty(ds) &&
++                    ds !== distroseries_id) {
++                   var other_das = this._distroseries[ds];
++                   for (j=0; j<other_das.entries.length; j++) {
++                       var other_arch = other_das.entries[j].get(
++                           'architecture_tag');
++                       if (other_arch === arch) {
++                           remove_das = false;
++                       }
++                   }
++                }
++            }
++            if (remove_das) {
++                arch_to_remove.push(arch);
++            }
++        }
++        delete this._distroseries[distroseries_id];
++        this.remove_choices(arch_to_remove);
++        if (this.fieldNode.all('input').isEmpty()) {
++            this.clean_display();
++        }
++    },
++
++    /**
++     * Add a list of distroarchseries.
++     *
++     * @method add_distroarchseries
++     * @param {String} distroseries_id The distroarchseries id.
++     * @param {Object} distroarchseries The distroarchseries object.
++     */
++    add_distroarchseries: function(distroseries_id, distroarchseries) {
++        this._distroseries[distroseries_id] = distroarchseries;
++        var choices = distroarchseries.entries.map(
++            function(das) {
++                return das.get("architecture_tag");
++            }
++        );
++        this.add_choices(choices);
++     }
++
++});
++
++namespace.ArchitecturesChoiceListWidget = ArchitecturesChoiceListWidget;
++
++
++/**
++ * A special form of FormRowWidget, containing a select control.
++ *
++ * @class SelectWidget
++ */
++var SelectWidget;
++
++SelectWidget = function() {
++    SelectWidget.superclass.constructor.apply(this, arguments);
++};
++
++Y.mix(SelectWidget, {
++
++    NAME: 'selectWidget',
++
++    ATTRS: {
++
++        /**
++         * An array of objects from which to choose. Each object
++         * should contain a value for "value", "text" and "data".
++         *
++         * @property choices
++         */
++        choices: {
++            getter: function() {
++                /* I think this is a YUI3 wart; I can't see any way to
++                   map() over a NodeList, so I must push the elements
++                   one by one into an array first. */
++                var options = Y.Array([]);
++                this.fieldNode.all("select > option").each(
++                    function(option) { options.push(option); });
++                return options.map(
++                    function(option) {
++                        return {
++                            value: option.get("value"),
++                            text: option.get("text"),
++                            data: option.getData("data")
++                        };
++                    }
++                );
++            },
++            setter: function(value, name) {
++                var select = Y.Node.create("<select />");
++                select.set("name", this.get("name"))
++                      .set("size", this.get("size"));
++                if (this.get("multiple")) {
++                    select.set("multiple", "multiple");
++                }
++                var choices = Y.Array(value);
++                choices.forEach(
++                    function(choice) {
++                        var option = Y.Node.create("<option />");
++                        option.set("value", choice.value)
++                              .set("text", choice.text)
++                              .setData("data", choice.data);
++                        select.append(option);
++                    }
++                );
++                if (choices.length > 0) {
++                    this.fieldNode.empty().append(select);
++                }
++                else {
++                    this.fieldNode.empty();
++                }
++            }
++        },
++
++        /**
++         * The current selection.
++         *
++         * @property choice
++         */
++        choice: {
++            setter: function(value, name) {
++                if (!Y.Lang.isArray(value)) {
++                    value = [value];
++                }
++                this.fieldNode.all("select > option").each(
++                    function(node) {
++                        node.set(
++                            "selected",
++                            value.indexOf(node.get("value")) >= 0);
++                    }
++                );
++            },
++            getter: function() {
++                var choice = [];
++                this.fieldNode.all("select > option").each(
++                    function(node) {
++                        if (node.get("selected")) {
++                            choice.push(node.get("value"));
++                        }
++                    }
++                );
++                return choice;
++            }
++        },
++
++        /**
++         * The number of rows to show in the select widget.
++         *
++         * @property size
++         */
++        size: {
++            value: 1,
++            setter: function(value, name) {
++                this.fieldNode.all("select").set("size", value);
++            }
++        },
++
++        /**
++         * Whether multiple rows can be selected.
++         *
++         * @property multiple
++         */
++        multiple: {
++            value: false,
++            setter: function(value, name) {
++                value = value ? true : false;
++                this.fieldNode.all("select").set("multiple", value);
++                return value;
++            }
++        }
++
++    }
++
++});
++
++Y.extend(SelectWidget, FormRowWidget, {
++
++    _sorted_position: function(choice) {
++        var options = [];
++        this.fieldNode.all("option").each(
++            function(node) {
++                options.push(node.get('text'));
++            }
++        );
++        options.push(choice);
++        return options.sort().indexOf(choice);
++    },
++
++    /**
++     * Choose a size for the select control based on the number of
++     * choices, up to an optional maximum size.
++     *
++     * @method autoSize
++     */
++    autoSize: function(maxSize) {
++        var choiceCount = this.fieldNode.all("select > option").size();
++        if (choiceCount === 0) {
++            this.set("size", 1);
++        }
++        else if (maxSize === undefined) {
++            this.set("size", choiceCount);
++        }
++        else if (choiceCount < maxSize) {
++            this.set("size", choiceCount);
++        }
++        else {
++            this.set("size", maxSize);
++        }
++        return this;
++    }
++
++});
++
++namespace.SelectWidget = SelectWidget;
++
++
++/**
++ * A special form of SelectWidget for choosing packagesets.
++ *
++ * @class PackagesetPickerWidget
++ */
++var PackagesetPickerWidget;
++
++PackagesetPickerWidget = function() {
++    PackagesetPickerWidget
++        .superclass.constructor.apply(this, arguments);
++};
++
++Y.mix(PackagesetPickerWidget, {
++
++    NAME: 'packagesetPickerWidget',
++
++    ATTRS: {
++
++        /**
++         * The DistroSeries the choices in this field should
++         * reflect. Takes the form of a string, e.g. "ubuntu/hoary".
++         *
++         * @property distroSeries
++         */
++        distroSeries: {
++            setter: function(value, name) {
++                var distro_series_uri = Y.lp.client.get_absolute_uri(value);
++                var on = {
++                    start: Y.bind(this.showSpinner, this),
++                    success: Y.bind(this.set, this, "packageSets"),
++                    failure: this.error_handler.getFailureHandler(),
++                    end: Y.bind(this.hideSpinner, this)
++                };
++                var config = {
++                    on: on,
++                    parameters: {
++                        distroseries: distro_series_uri
++                    }
++                };
++                this.client.named_get("package-sets", "getBySeries", config);
++            }
++        }
++    }
++});
++
++
++Y.extend(PackagesetPickerWidget, SelectWidget, {
++
++    /**
++     * Add a distroseries: add its packagesets to the packageset picker.
++     *
++     * @method add_distroseries
++     * @param {Object} distroseries The distroseries object.
++     */
++    add_distroseries: function(distroseries) {
++        var distro_series_uri = Y.lp.client.get_absolute_uri(
++            distroseries.api_uri);
++        var self = this;
++        var on = {
++            success: function (results) {
++                self.add_packagesets(results, distroseries);
++            },
++            failure: this.error_handler.getFailureHandler()
++        };
++        var config = {
++            on: on,
++            parameters: {
++                distroseries: distro_series_uri
++            }
++        };
++        this.client.named_get("package-sets", "getBySeries", config);
++    },
++
++    /**
++     * Display a simple message when no parent series are selected.
++     *
++     * @method clean_display
++     */
++    clean_display: function() {
++        this.fieldNode.empty();
++        this.fieldNode.append(Y.Node.create("<div />")
++            .set('text', '[No package sets to select from yet!]'));
++        this.renderUI();
++    },
++
++    /**
++     * Initialize the picker's select node.
++     *
++     * @method init_select
++     */
++    init_select: function() {
++        var select = this.fieldNode.one('select');
++        if (select === null) {
++            select = Y.Node.create("<select />");
++            select.set("name", this.get("name"))
++                    .set("size", this.get("size"));
++            if (this.get("multiple")) {
++                select.set("multiple", "multiple");
++            }
++            this.fieldNode.empty().append(select);
++        }
++        return select;
++    },
++
++    /**
++     * Add a choice to the picker.
++     *
++     * @method add_choice
++     * @param {Object} choice The choice object to be added
++     *     ({text: choice_text, value: choice_value, data: choice_data}).
++     */
++    add_choice: function(choice) {
++        var select = this.init_select();
++        var option = Y.Node.create("<option />");
++        option.set("value", choice.value)
++            .set("text", choice.text)
++            .setData("data", choice.data);
++        var options = select.all('option');
++        if (options.isEmpty()) {
++            select.append(option);
++        }
++        else {
++            var pos = this._sorted_position(choice.text);
++            if (pos === 0) {
++                select.prepend(option);
++            }
++            else {
++                select.insertBefore(option, options.item(pos));
++            }
++        }
++    },
++
++    /**
++     * Add choices (a set of packagesets) to the picker.
++     *
++     * @method add_packagesets
++     * @param {Y.lp.client.Collection} packagesets The collection of
++     *     packagesets to add.
++     * @param {Object} distroseries The distroseries object
++     *     ({value:distroseries_id), api_uri:distroseries_uri}).
++     */
++    add_packagesets: function(packagesets, distroseries) {
++        this._packagesets[distroseries.value] = packagesets.entries;
++        packagesets.entries.forEach(
++            function(packageset) {
++                var value = packageset.get("id");
++                this.add_choice({
++                    data: packageset,
++                    value: value,
++                    text: (
++                        packageset.get("name") + ": " +
++                        packageset.get("description") +
++                        " (" + distroseries.title + ") ")
++                });
++            }, this);
++        this.autoSize(10);
++        Y.lazr.anim.green_flash({node: this.fieldNode}).run();
++     },
++
++    /**
++     * Remove a distroseries: remove its packagesets from the picker.
++     *
++     * @method remove_distroseries
++     * @param {String} distroseries_id The id of the distroseries to be
++     *     removed.
++     */
++    remove_distroseries: function(distroseries_id) {
++        this._packagesets[distroseries_id].forEach(
++            function(packageset) {
++                this.fieldNode.one(
++                    'option[value="' + packageset.get("id") + '"]').remove();
++            }, this);
++       Y.lazr.anim.green_flash({node: this.fieldNode}).run();
++        if (this.fieldNode.all('option').isEmpty()) {
++            this.clean_display();
++        }
++    },
++
++    initializer: function(config) {
++        this.client = new Y.lp.client.Launchpad();
++        this.error_handler = new Y.lp.client.ErrorHandler();
++        this.error_handler.clearProgressUI = Y.bind(this.hideSpinner, this);
++        this.error_handler.showError = Y.bind(this.showError, this);
++        this.clean_display();
++        // _packagesets maps each distroseries' id to a collection of ids
++        // of its packagesets.
++        // It's populated each time a new distroseries is added as a parent
++        // and used when a distroseries is removed to get all the
++        // corresponding packagesets to be removed from the widget.
++        this._packagesets = {};
++    }
++
++});
++
++namespace.PackagesetPickerWidget = PackagesetPickerWidget;
++
++
++/**
++ * A widget to encapsulate functionality around the form actions.
++ *
++ * @class FormActionsWidget
++ */
++var FormActionsWidget;
++
++FormActionsWidget = function() {
++    FormActionsWidget
++        .superclass.constructor.apply(this, arguments);
++};
++
++FormActionsWidget.ATTRS = {
++    duration: {
++        value: 1.0
++    },
++
++    height: {
++        value: 0
++    },
++
++    opacity: {
++        value: 0
++    }
++};
++
++
++Y.mix(FormActionsWidget, {
++
++    NAME: 'formActionsWidget',
++
++    HTML_PARSER: {
++        submitButtonNode: "input[type=submit]"
++    }
++
++});
++
++Y.extend(FormActionsWidget, Y.Widget, {
++
++    initializer: function(config) {
++        this.client = new Y.lp.client.Launchpad();
++        this.error_handler = new Y.lp.client.ErrorHandler();
++        this.error_handler.clearProgressUI = Y.bind(this.hideSpinner, this);
++        this.error_handler.showError = Y.bind(this.showError, this);
++        this.submitButtonNode = config.submitButtonNode;
++        this.spinnerNode = Y.Node.create(
++            '<img src="/@@/spinner" alt="Loading..." />');
++    },
++
++    /**
++     * Show the spinner, and hide the submit button.
++     *
++     * @method showSpinner
++     */
++    showSpinner: function() {
++        this.submitButtonNode.replace(this.spinnerNode);
++    },
++
++    /**
++     * Hide the spinner, and show the submit button again.
++     *
++     * @method hideSpinner
++     */
++    hideSpinner: function() {
++        this.spinnerNode.replace(this.submitButtonNode);
++    },
++
++    /**
++     * Display an error.
++     *
++     * @method showError
++     */
++    showError: function(error) {
++        Y.Node.create('<p class="error message" />')
++            .appendTo(this.get("contentBox"))
++            .set("text", error);
++    },
++
++    /**
++     * Remove all errors that have been previously displayed by showError.
++     *
++     * @method hideErrors
++     */
++    hideErrors: function(error) {
++        this.get("contentBox").all("p.error.message").remove();
++    }
++
++});
++
++namespace.FormActionsWidget = FormActionsWidget;
++
++}, "0.1", {"requires": ["node", "dom", "io", "widget", "lp.client",
++                        "lazr.anim", "array-extras", "transition"]});
 === modified file 'lib/lp/registry/javascript/tests/test_distroseries.initseries.html'
 --- lib/lp/registry/javascript/tests/test_distroseries.initseries.html	2011-07-18 11:56:51 +0000
 +++ lib/lp/registry/javascript/tests/test_distroseries.initseries.html	2011-07-18 11:56:52 +0000
@@ -29,12 +29,20 @@
            src="../../../app/javascript/picker/person_picker.js"></script>
    <script type="text/javascript"
            src="../../../app/javascript/picker/picker_patcher.js"></script>
++  <script type="text/javascript"
++          src="../distroseries.widgets.js"></script>
    <!-- The module under test -->
--  <script type="text/javascript" src="../distroseries.initseries.js"></script>
++  <script type="text/javascript"
++          src="../distroseries.initseries.js"></script>
++
++  <!-- Required test modules -->
++  <script type="text/javascript"
++          src="test_distroseries.widgets.js"></script>
    <!-- The test suite -->
--  <script type="text/javascript" src="test_distroseries.initseries.js"></script>
++  <script type="text/javascript"
++          src="test_distroseries.initseries.js"></script>
    </head>
    <body class="yui3-skin-sam">
 === modified file 'lib/lp/registry/javascript/tests/test_distroseries.initseries.js'
 --- lib/lp/registry/javascript/tests/test_distroseries.initseries.js	2011-07-18 11:56:51 +0000
 +++ lib/lp/registry/javascript/tests/test_distroseries.initseries.js	2011-07-18 11:56:52 +0000
@@ -18,1025 +18,6 @@
      var suite = new Y.Test.Suite("distroseries.initseries Tests");
      var initseries = Y.lp.registry.distroseries.initseries;
--    var attrgetter = function(name) {
--        return function(thing) {
--            return thing[name];
--        };
--    };
--
--    var attrselect = function(name) {
--        return function(things) {
--            return Y.Array(things).map(attrgetter(name));
--        };
--    };
--
--    var testFormRowWidget = {
--        name: 'TestFormRowWidget',
--
--        setUp: function() {
--            this.container = Y.Node.create("<div />");
--            this.widget = new initseries.FormRowWidget();
--        },
--
--        tearDown: function() {
--            this.container.remove(true);
--        },
--
--        testRender: function() {
--            this.widget.render(this.container);
--            Assert.isTrue(
--                this.container.contains(
--                    this.widget.get("boundingBox")));
--        },
--
--        testRenderWithName: function() {
--            this.widget.fieldNode.append(
--                Y.Node.create("<input /><input />"));
--            this.widget.set("name", "field");
--            this.widget.render(this.container);
--            ArrayAssert.itemsAreEqual(
--                ["field", "field"],
--                this.container.all("input").get("name"));
--        },
--
--        testRenderWithNameChange: function() {
--            this.widget.fieldNode.append(
--                Y.Node.create("<input /><input />"));
--            this.widget.set("name", "field");
--            this.widget.render(this.container);
--            this.widget.set("name", "plain");
--            ArrayAssert.itemsAreEqual(
--                ["plain", "plain"],
--                this.container.all("input").get("name"));
--        },
--
--        testRenderLabel: function() {
--            this.widget.set("label", "Test label");
--            this.widget.render(this.container);
--            Assert.areEqual(
--                "Test label",
--                this.container.one("label").get("text"));
--        },
--
--        testRenderLabelChange: function() {
--            this.widget.set("label", "Test label");
--            this.widget.render(this.container);
--            this.widget.set("label", "Another label");
--            Assert.areEqual(
--                "Another label",
--                this.container.one("label").get("text"));
--        },
--
--        testRenderDescription: function() {
--            this.widget.set("description", "Test description.");
--            this.widget.render(this.container);
--            Assert.areEqual(
--                "Test description.",
--                this.container.one("p.formHelp").get("text"));
--        },
--
--        testRenderDescriptionChange: function() {
--            this.widget.set("description", "Test description.");
--            this.widget.render(this.container);
--            this.widget.set("description", "Another description.");
--            Assert.areEqual(
--                "Another description.",
--                this.container.one("p.formHelp").get("text"));
--        },
--
--        testRenderHelp: function() {
--            this.widget.set("help",
--                {link: "http://test.com/test.html", text: "Help text"});
--            this.widget.render(this.container);
--            Assert.isFalse(this.container
--                .one('span.helper').hasClass("unseen"));
--            Assert.areEqual(
--                "Help text",
--                this.container.one("a")
--                   .one('span.invisible-link').get("text"));
--            Assert.areEqual(
--                "http://test.com/test.html",
--                this.container.one("a").get('href'));
--        },
--
--        testGetHelp: function() {
--            this.widget.set("help",
--                {link: "http://test.com/test.html", text: "Help text"});
--            this.widget.render(this.container);
--            Assert.areEqual(
--                "http://test.com/test.html",
--                this.widget.get("help").link);
--            Assert.areEqual(
--                "Help text",
--                this.widget.get("help").text);
--         },
--
--        testChangeHelp: function() {
--            this.widget.set("help",
--                {link: "http://test.com/test.html", text: "Help text"});
--            this.widget.render(this.container);
--            this.widget.set(
--                "help",
--                {link: "http://test.com/test2.html", text: "Help text2"});
--            Assert.areEqual(
--                "Help text2",
--                this.container.one("a")
--                    .one('span.invisible-link').get("text"));
--            Assert.areEqual(
--                "http://test.com/test2.html",
--                this.container.one("a").get('href'));
--        },
--
--        testChangeHelpUndefined: function() {
--            this.widget.set("help",
--                {link: "http://test.com/test.html", text: "Help text"});
--            this.widget.render(this.container);
--            this.widget.set("help", {});
--            Assert.isTrue(this.container
--                .one('span.helper').hasClass("unseen"));
--        },
--
--        testSpinner: function() {
--            Assert.isFalse(
--                this.widget.fieldNode.contains(this.widget.spinnerNode));
--            this.widget.showSpinner();
--            Assert.isTrue(
--                this.widget.fieldNode.contains(this.widget.spinnerNode));
--            this.widget.hideSpinner();
--            Assert.isFalse(
--                this.widget.fieldNode.contains(this.widget.spinnerNode));
--        },
--
--        testShowError: function() {
--            this.widget.showError("Unrealistic expectations.");
--            Assert.areEqual(
--                "Unrealistic expectations.",
--                this.widget.fieldNode.one("p").get("text"));
--        }
--
--    };
--
--    suite.add(new Y.Test.Case(testFormRowWidget));
--
--    var testChoiceListWidget = {
--        name: 'TestChoiceListWidget',
--
--        setUp: function() {
--            this.container = Y.Node.create("<div />");
--            this.widget = new initseries.ChoiceListWidget();
--        },
--
--        tearDown: function() {
--            this.container.remove(true);
--        },
--
--        testRenderChoices: function() {
--            this.widget.set("choices", ["a", "b"]);
--            this.widget.render(this.container);
--            ArrayAssert.itemsAreEqual(
--                ["a", "b"],
--                this.container.all("li > input").get("value"));
--            ArrayAssert.itemsAreEqual(
--                ["a", "b"],
--                this.container.all("li > label").get("text"));
--            ArrayAssert.itemsAreEqual(
--                ["checkbox", "checkbox"],
--                this.container.all("li > input").getAttribute("type"));
--        },
--
--        testRenderChoicesChange: function() {
--            this.widget.set("choices", ["a", "b"]);
--            this.widget.render(this.container);
--            this.widget.set("choices", ["c", "d", "e"]);
--            ArrayAssert.itemsAreEqual(
--                ["c", "d", "e"],
--                this.container.all("li > input").get("value"));
--            ArrayAssert.itemsAreEqual(
--                ["c", "d", "e"],
--                this.container.all("li > label").get("text"));
--        },
--
--       testRenderAddChoices: function() {
--            this.widget.add_choices(["a", "b"]);
--            this.widget.render(this.container);
--            ArrayAssert.itemsAreEqual(
--                ["a", "b"],
--                this.container.all("li > input").get("value"));
--            ArrayAssert.itemsAreEqual(
--                ["a", "b"],
--                this.container.all("li > label").get("text"));
--            ArrayAssert.itemsAreEqual(
--                ["checkbox", "checkbox"],
--                this.container.all("li > input").getAttribute("type"));
--        },
--
--        testRenderRemoveChoices: function() {
--            this.widget.add_choices(["a", "b", "c", "d"]);
--            this.widget.render(this.container);
--            this.widget.remove_choices(["b", "d"]);
--            ArrayAssert.itemsAreEqual(
--                ["a", "c"],
--                this.container.all("li > input").get("value"));
--            ArrayAssert.itemsAreEqual(
--                ["a", "c"],
--                this.container.all("li > label").get("text"));
--        },
--
--        testRenderChoicesChangeType: function() {
--            this.widget.set("choices", ["a", "b"]);
--            this.widget.render(this.container);
--            this.widget.set("type", "radio");
--            ArrayAssert.itemsAreEqual(
--                ["radio", "radio"],
--                this.container.all("li > input").getAttribute("type"));
--
--        },
--
--        testChoiceWithCheckBox: function() {
--            this.widget
--                .set("type", "checkbox")
--                .set("choices", ["a", "b"]);
--            ArrayAssert.itemsAreEqual(
--                [], this.widget.get("choice"));
--            this.widget.fieldNode.one("input[value=a]")
--                .set("checked", "checked");
--            ArrayAssert.itemsAreEqual(
--                ["a"], this.widget.get("choice"));
--        },
--
--        testChoiceWithRadio: function() {
--            // When both radio buttons are checked (this is possible in some
--            // broken DOMs/JS engined), choice is undefined.
--            this.widget
--                .set("type", "radio")
--                .set("choices", ["a", "b"]);
--            Assert.isNull(this.widget.get("choice"));
--            this.widget.fieldNode.one("input[value=a]")
--                .set("checked", "checked");
--            Assert.areEqual("a", this.widget.get("choice"));
--            this.widget.fieldNode.one("input[value=b]")
--                .set("checked", "checked");
--            if (this.widget.fieldNode.one("input[value=a]").get("checked")) {
--                // This assertion can only be made if the DOM/JS is broken
--                // in the host browser.
--                Assert.isUndefined(this.widget.get("choice"));
--            }
--            else {
--                // The host browser's DOM/JS is sane.
--                ArrayAssert.itemsAreEqual(
--                    ["b"], this.widget.get("choice"));
--            }
--        },
--
--        testSetChoiceWithCheckBox: function() {
--            this.widget
--                .set("type", "checkbox")
--                .set("choices", ["a", "b"])
--                .set("choice", "a");
--            ArrayAssert.itemsAreEqual(
--                ["a"], this.widget.get("choice"));
--            this.widget.set("choice", ["a"]);
--            ArrayAssert.itemsAreEqual(
--                ["a"], this.widget.get("choice"));
--            this.widget.set("choice", ["a", "b"]);
--            ArrayAssert.itemsAreEqual(
--                ["a", "b"], this.widget.get("choice"));
--            this.widget.set("choice", ["b", "c"]);
--            ArrayAssert.itemsAreEqual(
--                ["b"], this.widget.get("choice"));
--        },
--
--        testSetChoiceWithRadio: function() {
--            this.widget
--                .set("type", "radio")
--                .set("choices", ["a", "b"])
--                .set("choice", "a");
--            ArrayAssert.itemsAreEqual(
--                "a", this.widget.get("choice"));
--            this.widget.set("choice", ["a"]);
--            ArrayAssert.itemsAreEqual(
--                "a", this.widget.get("choice"));
--            this.widget.set("choice", "b");
--            ArrayAssert.itemsAreEqual(
--                "b", this.widget.get("choice"));
--        }
--
--    };
--
--    testChoiceListWidget = Y.merge(
--        testFormRowWidget, testChoiceListWidget);
--    suite.add(new Y.Test.Case(testChoiceListWidget));
--
--    var testParentSeriesListWidget = {
--        name: 'TestParentSeriesListWidget',
--
--        setUp: function() {
--            this.container = Y.Node.create("<div />");
--            this.widget = new initseries.ParentSeriesListWidget();
--        },
--
--        tearDown: function() {
--            this.container.remove(true);
--        },
--
--        testIsClean: function() {
--            Assert.areEqual(
--                "[No parent for this series yet!]",
--                this.widget.fieldNode.one("div").get("text"));
--        },
--
--        testBuildSelector: function() {
--            var node = Y.Node.create(
--                '<tr id="snarf">' +
--                '<td><input type="checkbox"/></td>' +
--                '<td class="test"></td>' +
--                '</tr>');
--            Y.one('body').append(node);
--            node = Y.one('#snarf');
--            this.widget.build_selector(node, ['a', 'b', 'c'], 'test');
--            Assert.areEqual(
--                '<td><input type="checkbox"></td>' +
--                '<td class="test">' +
--                '<select disabled="disabled">' +
--                '<option value="a">a</option>' +
--                '<option value="b">b</option>' +
--                '<option value="c">c</option>' +
--                '</select>' +
--                '</td>', node.get('innerHTML'));
--            Y.one('body').removeChild(node);
--        },
--
--        testAddParentAddsLine: function() {
--            parent = {value: "4", title: "Hoary", api_uri: "ubuntu/hoary"};
--            Assert.areEqual(
--                0,
--                this.widget.fieldNode.all('tr.parent').size());
--            this.widget.add_parent(parent);
--            Assert.areEqual(
--                1,
--                this.widget.fieldNode.all('tr.parent').size());
--            var new_line = this.widget.fieldNode.one('tr.parent');
--            Assert.areEqual(
--                'parent-4',
--                new_line.get('id'));
--        },
--
--        testAddDuplicateParent: function() {
--            parent = {value: "4", title: "Hoary", api_uri: "ubuntu/hoary"};
--            Assert.isTrue(
--                this.widget.add_parent(parent),
--                "Parent not added.");
--            this.widget.add_parent(parent);
--            Assert.isFalse(
--                this.widget.add_parent(parent),
--                "Parent added twice.");
--            Assert.areEqual(
--                1,
--                this.widget.fieldNode.all('tr.parent').size());
--        },
--
--        testParentOrdering: function() {
--            parent = {value: "4", title: "Hoary", api_uri: "ubuntu/hoary"};
--            this.widget.add_parent(parent);
--            parent = {value: "3", title: "Warty", api_uri: "ubuntu/warty"};
--            this.widget.add_parent(parent);
--            Assert.areEqual(
--                'parent-4',
--                this.widget.fieldNode.one('tr.parent').get('id'));
--            // Move first parent down.
--            this.widget.fieldNode.one(
--                'tr#parent-4').one('a.move-down').simulate("click");
--            Assert.areEqual(
--                'parent-3',
--                this.widget.fieldNode.one('tr.parent').get('id'));
--            // Move second parent up.
--            this.widget.fieldNode.one(
--                'tr#parent-4').one('a.move-up').simulate("click");
--            Assert.areEqual(
--                'parent-4',
--                this.widget.fieldNode.one('tr.parent').get('id'));
--        },
--
--        testRemoveParent: function() {
--            parent = {value: "4", title: "Hoary", api_uri: "ubuntu/hoary"};
--            this.widget.add_parent(parent);
--            parent = {value: "3", title: "Warty", api_uri: "ubuntu/warty"};
--            this.widget.add_parent(parent);
--            Assert.areEqual(
--                2,
--                this.widget.fieldNode.all('tr.parent').size());
--            // Delete first parent.
--            this.widget.fieldNode.one(
--                'tr#parent-4').one('span.remove').simulate("click");
--            Assert.areEqual(
--                1,
--                this.widget.fieldNode.all('tr.parent').size());
--            Assert.areEqual(
--                'parent-3',
--                this.widget.fieldNode.one('tr.parent').get('id'));
--            // Delete second parent.
--            this.widget.fieldNode.one(
--                'tr#parent-3').one('span.remove').simulate("click");
--            Assert.areEqual(
--                0,
--                this.widget.fieldNode.all('tr.parent').size());
--            // The parent table is empty.
--            Assert.areEqual(
--                "[No parent for this series yet!]",
--                this.widget.fieldNode.one("div").get("text"));
--        },
--
--        testParentGetter: function() {
--            var parent;
--            parent = {value: "4", title: "Hoary", api_uri: "ubuntu/hoary"};
--            this.widget.add_parent(parent);
--            parent = {value: "3", title: "Warty", api_uri: "ubuntu/warty"};
--            this.widget.add_parent(parent);
--            ArrayAssert.itemsAreEqual(
--                ["4", "3"],
--                this.widget.get('parents'));
--        }
--
--    };
--
--    testParentSeriesListWidget = Y.merge(
--        testFormRowWidget, testParentSeriesListWidget);
--    suite.add(new Y.Test.Case(testParentSeriesListWidget));
--
--   var testArchitecturesChoiceListWidget = {
--        name: 'TestArchitecturesChoiceListWidget',
--
--        setUp: function() {
--            this.container = Y.Node.create("<div />");
--            this.widget = new initseries.ArchitecturesChoiceListWidget();
--        },
--
--        tearDown: function() {
--            this.container.remove(true);
--        },
--
--        testAddDistroArchSerieses: function() {
--            var distro_arch_serieses = [
--                {architecture_tag: "i386"},
--                {architecture_tag: "amd64"},
--                {architecture_tag: "i386"}
--            ];
--            var distro_arch_serieses_collection =
--                new Y.lp.client.Collection(
--                    null, {entries: distro_arch_serieses}, null);
--            this.widget.add_distroarchseries(
--                3,
--                distro_arch_serieses_collection);
--            ArrayAssert.itemsAreEqual(
--                ["amd64", "i386"],
--                this.widget.get("choices"));
--        },
--
--        testAddDistroSeriesInitiatesIO: function() {
--            var io = false;
--            this.widget.client = {
--                get: function(path, config) {
--                    io = true;
--                    Assert.areEqual("ubuntu/hoary/architectures", path);
--                    Assert.isObject(config.on);
--                    Assert.isFunction(config.on.success);
--                    Assert.isFunction(config.on.failure);
--                }
--            };
--            var distroseries = {api_uri: "ubuntu/hoary", value: 3};
--            this.widget.add_distroseries(distroseries);
--            Assert.isTrue(io, "No IO initiated.");
--        },
--
--        testRemoveDistroSeries: function() {
--            var distro_arch_serieses1 = [
--                {architecture_tag: "i386"},
--                {architecture_tag: "amd64"},
--                {architecture_tag: "i386"}
--            ];
--            var distro_arch_serieses_collection1 =
--                new Y.lp.client.Collection(
--                    null, {entries: distro_arch_serieses1}, null);
--            this.widget.add_distroarchseries(
--                "3",
--                distro_arch_serieses_collection1);
--            ArrayAssert.itemsAreEqual(
--                ["amd64", "i386"],
--                this.widget.get("choices"));
--            var distro_arch_serieses2 = [
--                {architecture_tag: "hppa"},
--                {architecture_tag: "hppa"},
--                {architecture_tag: "i386"}
--            ];
--            var distro_arch_serieses_collection2 =
--                new Y.lp.client.Collection(
--                    null, {entries: distro_arch_serieses2}, null);
--            this.widget.add_distroarchseries(
--                "4",
--                distro_arch_serieses_collection2);
--            ArrayAssert.itemsAreEqual(
--                ["amd64", "hppa", "i386"],
--                this.widget.get("choices"));
--            this.widget.remove_distroseries("4");
--            ArrayAssert.itemsAreEqual(
--                ["amd64", "i386"],
--                this.widget.get("choices"));
--        },
--
--        testSetDistroSeriesError: function() {
--            var widget = this.widget;
--            widget.client = {
--                get: function(path, config) {
--                    config.on.failure(
--                        null, {status: 404,
--                               responseText: "Not found"});
--                    Assert.areEqual(
--                        "Not found",
--                        widget.fieldNode.one("p").get("text"));
--                }
--            };
--            this.widget.set("distroSeries", "ubuntu/hoary");
--        }
--
--    };
--
--    testArchitecturesChoiceListWidget = Y.merge(
--        testChoiceListWidget, testArchitecturesChoiceListWidget);
--    suite.add(new Y.Test.Case(testArchitecturesChoiceListWidget));
--
--    var testSelectWidget = {
--        name: 'TestSelectWidget',
--
--        choices: [
--            {value: "a", text: "A", data: 123},
--            {value: "b", text: "B", data: 456},
--            {value: "c", text: "C", data: 789}
--        ],
--
--        setUp: function() {
--            this.container = Y.Node.create("<div />");
--            this.widget = new initseries.SelectWidget();
--        },
--
--        tearDown: function() {
--            this.container.remove(true);
--        },
--
--        testNameChange: function() {
--            this.widget
--                .set("name", "foo")
--                .set("choices", this.choices);
--            var select = this.widget.fieldNode.one("select");
--            Assert.areEqual("foo", select.get("name"));
--            this.widget
--                .set("name", "bar");
--            Assert.areEqual("bar", select.get("name"));
--        },
--
--        testChoices: function() {
--            this.widget.set("choices", this.choices);
--            var choices_observed = this.widget.get("choices");
--            /* We have to compare bit by bit ourselves because
--               Javascript is a language born in hell. */
--            ArrayAssert.itemsAreEqual(
--                attrselect("value")(this.choices),
--                attrselect("value")(choices_observed));
--            ArrayAssert.itemsAreEqual(
--                attrselect("text")(this.choices),
--                attrselect("text")(choices_observed));
--            ArrayAssert.itemsAreEqual(
--                attrselect("data")(this.choices),
--                attrselect("data")(choices_observed));
--        },
--
--        testRenderChoices: function() {
--            this.widget.set("choices", this.choices);
--            this.widget.render(this.container);
--            ArrayAssert.itemsAreEqual(
--                ["a", "b", "c"],
--                this.container.all("select > option").get("value"));
--            ArrayAssert.itemsAreEqual(
--                ["A", "B", "C"],
--                this.container.all("select > option").get("text"));
--        },
--
--        testRenderEmptyChoices: function() {
--            this.widget.fieldNode.append("something");
--            this.widget.set("choices", []);
--            this.widget.render(this.container);
--            Assert.isNull(this.container.one("select"));
--            Assert.isFalse(this.widget.fieldNode.hasChildNodes());
--        },
--
--        testRenderChoicesChange: function() {
--            var choices1 = [
--                {value: "a", text: "A", data: 123}
--            ];
--            this.widget.set("choices", choices1);
--            this.widget.render(this.container);
--            var choices2 = [
--                {value: "b", text: "B", data: 456},
--                {value: "c", text: "C", data: 789}
--            ];
--            this.widget.set("choices", choices2);
--            ArrayAssert.itemsAreEqual(
--                ["b", "c"],
--                this.container.all("select > option").get("value"));
--            ArrayAssert.itemsAreEqual(
--                ["B", "C"],
--                this.container.all("select > option").get("text"));
--        },
--
--        testChoice: function() {
--            this.widget
--                .set("choices", this.choices)
--                .set("multiple", true);
--            /* It would be better to deselect all options by default,
--               but this appears impossible; the browser seems to
--               select the first option when rendering. */
--            this.widget.fieldNode.all("option").set("selected", false);
--            ArrayAssert.itemsAreEqual(
--                [], this.widget.get("choice"));
--            this.widget.fieldNode.one("option[value=a]")
--                .set("selected", true);
--            ArrayAssert.itemsAreEqual(
--                ["a"], this.widget.get("choice"));
--            this.widget.fieldNode.one("option[value=c]")
--                .set("selected", true);
--            ArrayAssert.itemsAreEqual(
--                ["a", "c"], this.widget.get("choice"));
--        },
--
--        testSetChoice: function() {
--            this.widget
--                .set("multiple", true)
--                .set("choices", this.choices)
--                .set("choice", "a");
--            ArrayAssert.itemsAreEqual(
--                ["a"], this.widget.get("choice"));
--            this.widget.set("choice", ["a"]);
--            ArrayAssert.itemsAreEqual(
--                ["a"], this.widget.get("choice"));
--            this.widget.set("choice", ["a", "b"]);
--            ArrayAssert.itemsAreEqual(
--                ["a", "b"], this.widget.get("choice"));
--            this.widget.set("choice", ["b", "z"]);
--            ArrayAssert.itemsAreEqual(
--                ["b"], this.widget.get("choice"));
--        },
--
--        testSize: function() {
--            Assert.areEqual(1, this.widget.get("size"));
--        },
--
--        testRenderSize: function() {
--            this.widget
--                .set("choices", this.choices)
--                .set("size", 7)
--                .render(this.container);
--            Assert.areEqual(
--                7, this.widget.fieldNode.one("select").get("size"));
--        },
--
--        testRenderSizeChange: function() {
--            this.widget
--                .set("choices", this.choices)
--                .set("size", 3)
--                .render(this.container)
--                .set("size", 5);
--            Assert.areEqual(
--                5, this.widget.fieldNode.one("select").get("size"));
--        },
--
--        testAutoSize: function() {
--            this.widget.set("choices", this.choices);
--            /* Without argument, autoSize() sets the size to the same
--               as the number of choices. */
--            this.widget.autoSize();
--            Assert.areEqual(3, this.widget.get("size"));
--        },
--
--        testAutoSizeMoreChoicesThanMaxiumum: function() {
--            this.widget.set("choices", this.choices);
--            /* autoSize() sets the size to the same as the number of
--               choices unless there are more than the specified
--               maximum. */
--            this.widget.autoSize(2);
--            Assert.areEqual(2, this.widget.get("size"));
--        },
--
--        testAutoSizeFewerChoicesThanMaxiumum: function() {
--            this.widget.set("choices", this.choices);
--            /* autoSize() sets the size to the same as the number of
--               choices. */
--            this.widget.autoSize(5);
--            Assert.areEqual(3, this.widget.get("size"));
--        },
--
--        testMultiple: function() {
--            Assert.areEqual(false, this.widget.get("multiple"));
--        },
--
--        testRenderMultiple: function() {
--            this.widget
--                .set("choices", this.choices)
--                .set("multiple", true)
--                .render(this.container);
--            Assert.isTrue(
--                this.widget.fieldNode.one("select")
--                    .hasAttribute("multiple"));
--        },
--
--        testRenderMultipleChange: function() {
--            this.widget
--                .set("choices", this.choices)
--                .set("multiple", true)
--                .render(this.container)
--                .set("multiple", false);
--            Assert.isFalse(
--                this.widget.fieldNode.one("select")
--                    .hasAttribute("multiple"));
--        }
--
--    };
--
--    testSelectWidget = Y.merge(
--        testFormRowWidget, testSelectWidget);
--    suite.add(new Y.Test.Case(testSelectWidget));
--
--    var testPackagesetPickerWidget = {
--        name: 'TestPackagesetPickerWidget',
--
--        setUp: function() {
--            this.container = Y.Node.create("<div />");
--            this.widget = new initseries.PackagesetPickerWidget();
--        },
--
--        tearDown: function() {
--            this.container.remove(true);
--        },
--
--        _getValues: function(items) {
--            return items.map(
--                function(item) {
--                    return item.text;
--                }
--            );
--        },
--
--        testAddChoice: function() {
--            this.widget.add_choice({value: 'c', text: 'c', data: 'c'});
--            ArrayAssert.itemsAreEqual(
--                ["c"], this._getValues(this.widget.get("choices")));
--            this.widget.add_choice({value: 'a', text: 'a', data: 'a'});
--            ArrayAssert.itemsAreEqual(
--                ["a", "c"], this._getValues(this.widget.get("choices")));
--            this.widget.add_choice({value: 'b', text: 'b', data: 'b'});
--            ArrayAssert.itemsAreEqual(
--                ["a", "b", "c"], this._getValues(this.widget.get("choices")));
--        },
--
--        testAddPackagesets: function() {
--            var package_sets = [
--                {id: "4", name: "foo", description: "Foo"},
--                {id: "5", name: "bar", description: "Bar"},
--                {id: "7", name: "baz", description: "Baz"}
--            ];
--            var package_sets_collection =
--                new Y.lp.client.Collection(
--                    null, {entries: package_sets}, null);
--            var distroseries = {value: "4", title: "series1"};
--            this.widget.add_packagesets(
--                package_sets_collection, distroseries);
--            var choices = this.widget.get("choices");
--            ArrayAssert.itemsAreEqual(
--                ["5", "7", "4"],
--                attrselect("value")(choices));
--        },
--
--        testAddPackagesetsCallsAutoSize: function() {
--            var package_sets = [
--                {name: "foo", description: "Foo"},
--                {name: "bar", description: "Bar"},
--                {name: "baz", description: "Baz"}
--            ];
--            var package_sets_collection =
--                new Y.lp.client.Collection(
--                    null, {entries: package_sets}, null);
--            var distroseries = {value: "4", title: "series1"};
--            var autoSized = false;
--            this.widget.autoSize = function() { autoSized = true; };
--            this.widget.add_packagesets(
--                package_sets_collection, distroseries);
--            Assert.isTrue(autoSized);
--        },
--
--        testAddDistroSeriesInitiatesIO: function() {
--            var io = false;
--            this.widget.client = {
--                named_get: function(path, operation, config) {
--                    io = true;
--                    Assert.areEqual("package-sets", path);
--                    Assert.areEqual("getBySeries", operation);
--                    Assert.isNotNull(
--                        config.parameters.distroseries.match(
--                            new RegExp("/ubuntu/hoary$")));
--                    Assert.isObject(config.on);
--                    Assert.isFunction(config.on.success);
--                    Assert.isFunction(config.on.failure);
--                }
--            };
--            var distroseries = {
--                value: "4", title: "series1", api_uri: "ubuntu/hoary"};
--            this.widget.add_distroseries(distroseries);
--            Assert.isTrue(io, "No IO initiated.");
--        },
--
--        testAddDistroSeriesUpdatesPackageSets: function() {
--            var package_sets = [
--                {id: "4", name: "foo", description: "Foo"},
--                {id: "5", name: "bar", description: "Bar"},
--                {id: "6", name: "baz", description: "Baz"}
--            ];
--            var package_sets_collection =
--                new Y.lp.client.Collection(
--                    null, {entries: package_sets}, null);
--            this.widget.client = {
--                named_get: function(path, operation, config) {
--                    config.on.success(package_sets_collection);
--                }
--            };
--            var distroseries = {
--                value: "4", title: "series1", api_uri: "ubuntu/hoary"};
--            this.widget.add_distroseries(distroseries);
--            ArrayAssert.itemsAreEqual(
--                ["5", "6", "4"],
--                attrselect("value")(this.widget.get("choices")));
--        },
--
--        testRemoveDistroSeriesUpdatesPackageSets: function() {
--            // Calling remove_distroseries removes the packagesets
--            // related to the distroseries from the widget.
--
--            // Setup a first distroseries with a bunch of packagesets.
--            var distroseries1 = {
--                value: "1", title: "series1",
--                api_uri: "ubuntu/hoary"};
--            var package_sets1 = [
--                {id: "4", name: "aa", description: "Aa"},
--                {id: "5", name: "bb", description: "Bb"}
--            ];
--            var package_sets_collection1 =
--                new Y.lp.client.Collection(
--                    null, {entries: package_sets1}, null);
--
--            // Setup a second distroseries with other packagesets.
--            var distroseries2 = {
--                value: "2", title: "series2",
--                api_uri: "ubuntu/breezy"};
--            var package_sets2 = [
--                {id: "6", name: "cc", description: "Cc"},
--                {id: "7", name: "dd", description: "Dd"}
--            ];
--            var package_sets_collection2 =
--                new Y.lp.client.Collection(
--                    null, {entries: package_sets2}, null);
--
--            // Setup the client so that the proper packagesets are returned
--            // for each distroseries.
--            var package_set_collections = {
--                'hoary': package_sets_collection1,
--                'breezy': package_sets_collection2
--            };
--            this.widget.client = {
--                named_get: function(path, operation, config) {
--                    var series_name = config
--                        .parameters.distroseries.split('/')[6];
--                    config.on.success(package_set_collections[series_name]);
--                }
--            };
--
--            // Add the two series.
--            this.widget.add_distroseries(distroseries1);
--            this.widget.add_distroseries(distroseries2);
--            // The packagesets widget has been populated with the
--            // packagesets from the series.
--            ArrayAssert.itemsAreEqual(
--                ["4", "5", "6", "7"],
--                attrselect("value")(this.widget.get("choices")));
--
--            // Remove a series.
--            this.widget.remove_distroseries("2");
--            // The remaining packagesets are those from the remaining series.
--            ArrayAssert.itemsAreEqual(
--                ["4", "5"],
--                attrselect("value")(this.widget.get("choices")));
--        },
--
--        testSetDistroSeriesSpinner: function() {
--            var widget = this.widget;
--            widget.client = {
--                named_get: function(path, operation, config) {
--                    Assert.isFalse(
--                        widget.fieldNode.contains(widget.spinnerNode));
--                    config.on.start();
--                    Assert.isTrue(
--                        widget.fieldNode.contains(widget.spinnerNode));
--                    config.on.end();
--                    Assert.isFalse(
--                        widget.fieldNode.contains(widget.spinnerNode));
--                }
--            };
--            this.widget.set("distroSeries", "ubuntu/hoary");
--        },
--
--        testSetDistroSeriesError: function() {
--            var widget = this.widget;
--            widget.client = {
--                named_get: function(path, operation, config) {
--                    config.on.failure(
--                        null, {status: 404,
--                               responseText: "Not found"});
--                    Assert.areEqual(
--                        "Not found",
--                        widget.fieldNode.one("p").get("text"));
--                }
--            };
--            this.widget.set("distroSeries", "ubuntu/hoary");
--        }
--
--    };
--
--    testPackagesetPickerWidget = Y.merge(
--        testSelectWidget, testPackagesetPickerWidget);
--    suite.add(new Y.Test.Case(testPackagesetPickerWidget));
--
--    var testFormActionsWidget = {
--        name: 'TestFormActionsWidget',
--
--        makeActionsDiv: function() {
--            var submit = Y.Node.create("<input />")
--                .set("type", "submit")
--                .set("value", "Initialize Series");
--            var cancel = Y.Node.create("<a>Cancel</a>");
--            var div = Y.Node.create("<div />")
--                .addClass("actions")
--                .append(submit)
--                .append(cancel);
--            return div;
--        },
--
--        setUp: function() {
--            this.actions = this.makeActionsDiv();
--            this.widget = new initseries.FormActionsWidget(
--                {srcNode: this.actions});
--        },
--
--        tearDown: function() {
--            this.actions.remove(true);
--        },
--
--        testInitializer: function() {
--            Assert.isTrue(
--                this.actions.one("input").compareTo(
--                    this.widget.submitButtonNode));
--        },
--
--        testSpinner: function() {
--            Assert.isTrue(
--                this.actions.contains(this.widget.submitButtonNode));
--            Assert.isFalse(
--                this.actions.contains(this.widget.spinnerNode));
--            this.widget.showSpinner();
--            Assert.isFalse(
--                this.actions.contains(this.widget.submitButtonNode));
--            Assert.isTrue(
--                this.actions.contains(this.widget.spinnerNode));
--            this.widget.hideSpinner();
--            Assert.isTrue(
--                this.actions.contains(this.widget.submitButtonNode));
--            Assert.isFalse(
--                this.actions.contains(this.widget.spinnerNode));
--        },
--
--        testShowError: function() {
--            this.widget.showError("The Man From U.N.C.L.E.");
--            Assert.areEqual(
--                "The Man From U.N.C.L.E.",
--                this.actions.one("p.error.message").get("text"));
--        },
--
--        testHideErrors: function() {
--            this.widget.showError("The Man From U.N.C.L.E.");
--            this.widget.showError("The Woman From A.U.N.T.I.E.");
--            this.widget.hideErrors();
--            Assert.isNull(this.actions.one("p.error.message"));
--        }
--
--    };
--
--    suite.add(new Y.Test.Case(testFormActionsWidget));
--
      var testDeriveDistroSeriesActionsWidget = {
          name: 'TestDeriveDistroSeriesActionsWidget',
@@ -1156,7 +137,8 @@
      };
      testDeriveDistroSeriesActionsWidget = Y.merge(
--        testFormActionsWidget, testDeriveDistroSeriesActionsWidget);
++        Y.lp.registry.distroseries.widgets.test.testFormActionsWidget,
++        testDeriveDistroSeriesActionsWidget);
      suite.add(new Y.Test.Case(testDeriveDistroSeriesActionsWidget));
      var testDeriveDistroSeriesSetup = {
@@ -1246,4 +228,5 @@
  }, "0.1", {"requires": [
                 'test', 'console', 'node-event-simulate',
++               'lp.registry.distroseries.widgets.test',
                 'lp.registry.distroseries.initseries']});
 === added file 'lib/lp/registry/javascript/tests/test_distroseries.widgets.html'
 --- lib/lp/registry/javascript/tests/test_distroseries.widgets.html	1970-01-01 00:00:00 +0000
 +++ lib/lp/registry/javascript/tests/test_distroseries.widgets.html	2011-07-18 11:56:52 +0000
@@ -0,0 +1,47 @@
++<!DOCTYPE
++   HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
++   "http://www.w3.org/TR/html4/strict.dtd">
++<html>
++  <head>
++  <title>Launchpad DistroSeries</title>
++
++  <!-- YUI and test setup -->
++  <link rel="stylesheet" href="../../../app/javascript/testing/test.css" />
++  <script type="text/javascript"
++          src="../../../../canonical/launchpad/icing/yui/yui/yui.js"></script>
++  <script type="text/javascript"
++          src="../../../app/javascript/testing/testrunner.js"></script>
++
++  <!-- Required modules -->
++  <script type="text/javascript"
++          src="../../../app/javascript/client.js"></script>
++  <script type="text/javascript"
++          src="../../../app/javascript/activator/activator.js"></script>
++  <script type="text/javascript"
++          src="../../../app/javascript/anim/anim.js"></script>
++  <script type="text/javascript"
++          src="../../../app/javascript/lazr/lazr.js"></script>
++  <script type="text/javascript"
++          src="../../../app/javascript/overlay/overlay.js"></script>
++  <script type="text/javascript"
++          src="../../../app/javascript/picker/picker.js"></script>
++  <script type="text/javascript"
++          src="../../../app/javascript/picker/person_picker.js"></script>
++  <script type="text/javascript"
++          src="../../../app/javascript/picker/picker_patcher.js"></script>
++
++  <!-- The module under test -->
++  <script type="text/javascript"
++          src="../distroseries.widgets.js"></script>
++
++  <!-- The test suite -->
++  <script type="text/javascript"
++          src="test_distroseries.widgets.js"></script>
++
++  </head>
++  <body class="yui3-skin-sam">
++    <ul id="suites">
++      <li>lp.registry.distroseries.widgets.test</li>
++    </ul>
++  </body>
++</html>
 === added file 'lib/lp/registry/javascript/tests/test_distroseries.widgets.js'
 --- lib/lp/registry/javascript/tests/test_distroseries.widgets.js	1970-01-01 00:00:00 +0000
 +++ lib/lp/registry/javascript/tests/test_distroseries.widgets.js	2011-07-18 11:56:52 +0000
@@ -0,0 +1,1046 @@
++/**
++ * Copyright 2011 Canonical Ltd. This software is licensed under the
++ * GNU Affero General Public License version 3 (see the file LICENSE).
++ *
++ * Tests for DistroSeries related stuff.
++ *
++ * @module lp.registry.distroseries
++ * @submodule test
++ */
++
++YUI.add('lp.registry.distroseries.widgets.test', function(Y) {
++
++    var namespace = Y.namespace('lp.registry.distroseries.widgets.test');
++
++    var Assert = Y.Assert;
++    var ArrayAssert = Y.ArrayAssert;
++
++    var suite = new Y.Test.Suite("distroseries.widgets Tests");
++    var widgets = Y.lp.registry.distroseries.widgets;
++
++    var attrgetter = function(name) {
++        return function(thing) {
++            return thing[name];
++        };
++    };
++
++    var attrselect = function(name) {
++        return function(things) {
++            return Y.Array(things).map(attrgetter(name));
++        };
++    };
++
++    var testFormRowWidget = {
++        name: 'TestFormRowWidget',
++
++        setUp: function() {
++            this.container = Y.Node.create("<div />");
++            this.widget = new widgets.FormRowWidget();
++        },
++
++        tearDown: function() {
++            this.container.remove(true);
++        },
++
++        testRender: function() {
++            this.widget.render(this.container);
++            Assert.isTrue(
++                this.container.contains(
++                    this.widget.get("boundingBox")));
++        },
++
++        testRenderWithName: function() {
++            this.widget.fieldNode.append(
++                Y.Node.create("<input /><input />"));
++            this.widget.set("name", "field");
++            this.widget.render(this.container);
++            ArrayAssert.itemsAreEqual(
++                ["field", "field"],
++                this.container.all("input").get("name"));
++        },
++
++        testRenderWithNameChange: function() {
++            this.widget.fieldNode.append(
++                Y.Node.create("<input /><input />"));
++            this.widget.set("name", "field");
++            this.widget.render(this.container);
++            this.widget.set("name", "plain");
++            ArrayAssert.itemsAreEqual(
++                ["plain", "plain"],
++                this.container.all("input").get("name"));
++        },
++
++        testRenderLabel: function() {
++            this.widget.set("label", "Test label");
++            this.widget.render(this.container);
++            Assert.areEqual(
++                "Test label",
++                this.container.one("label").get("text"));
++        },
++
++        testRenderLabelChange: function() {
++            this.widget.set("label", "Test label");
++            this.widget.render(this.container);
++            this.widget.set("label", "Another label");
++            Assert.areEqual(
++                "Another label",
++                this.container.one("label").get("text"));
++        },
++
++        testRenderDescription: function() {
++            this.widget.set("description", "Test description.");
++            this.widget.render(this.container);
++            Assert.areEqual(
++                "Test description.",
++                this.container.one("p.formHelp").get("text"));
++        },
++
++        testRenderDescriptionChange: function() {
++            this.widget.set("description", "Test description.");
++            this.widget.render(this.container);
++            this.widget.set("description", "Another description.");
++            Assert.areEqual(
++                "Another description.",
++                this.container.one("p.formHelp").get("text"));
++        },
++
++        testRenderHelp: function() {
++            this.widget.set("help",
++                {link: "http://test.com/test.html", text: "Help text"});
++            this.widget.render(this.container);
++            Assert.isFalse(this.container
++                .one('span.helper').hasClass("unseen"));
++            Assert.areEqual(
++                "Help text",
++                this.container.one("a")
++                   .one('span.invisible-link').get("text"));
++            Assert.areEqual(
++                "http://test.com/test.html",
++                this.container.one("a").get('href'));
++        },
++
++        testGetHelp: function() {
++            this.widget.set("help",
++                {link: "http://test.com/test.html", text: "Help text"});
++            this.widget.render(this.container);
++            Assert.areEqual(
++                "http://test.com/test.html",
++                this.widget.get("help").link);
++            Assert.areEqual(
++                "Help text",
++                this.widget.get("help").text);
++         },
++
++        testChangeHelp: function() {
++            this.widget.set("help",
++                {link: "http://test.com/test.html", text: "Help text"});
++            this.widget.render(this.container);
++            this.widget.set(
++                "help",
++                {link: "http://test.com/test2.html", text: "Help text2"});
++            Assert.areEqual(
++                "Help text2",
++                this.container.one("a")
++                    .one('span.invisible-link').get("text"));
++            Assert.areEqual(
++                "http://test.com/test2.html",
++                this.container.one("a").get('href'));
++        },
++
++        testChangeHelpUndefined: function() {
++            this.widget.set("help",
++                {link: "http://test.com/test.html", text: "Help text"});
++            this.widget.render(this.container);
++            this.widget.set("help", {});
++            Assert.isTrue(this.container
++                .one('span.helper').hasClass("unseen"));
++        },
++
++        testSpinner: function() {
++            Assert.isFalse(
++                this.widget.fieldNode.contains(this.widget.spinnerNode));
++            this.widget.showSpinner();
++            Assert.isTrue(
++                this.widget.fieldNode.contains(this.widget.spinnerNode));
++            this.widget.hideSpinner();
++            Assert.isFalse(
++                this.widget.fieldNode.contains(this.widget.spinnerNode));
++        },
++
++        testShowError: function() {
++            this.widget.showError("Unrealistic expectations.");
++            Assert.areEqual(
++                "Unrealistic expectations.",
++                this.widget.fieldNode.one("p").get("text"));
++        }
++
++    };
++
++    suite.add(new Y.Test.Case(testFormRowWidget));
++
++    var testChoiceListWidget = {
++        name: 'TestChoiceListWidget',
++
++        setUp: function() {
++            this.container = Y.Node.create("<div />");
++            this.widget = new widgets.ChoiceListWidget();
++        },
++
++        tearDown: function() {
++            this.container.remove(true);
++        },
++
++        testRenderChoices: function() {
++            this.widget.set("choices", ["a", "b"]);
++            this.widget.render(this.container);
++            ArrayAssert.itemsAreEqual(
++                ["a", "b"],
++                this.container.all("li > input").get("value"));
++            ArrayAssert.itemsAreEqual(
++                ["a", "b"],
++                this.container.all("li > label").get("text"));
++            ArrayAssert.itemsAreEqual(
++                ["checkbox", "checkbox"],
++                this.container.all("li > input").getAttribute("type"));
++        },
++
++        testRenderChoicesChange: function() {
++            this.widget.set("choices", ["a", "b"]);
++            this.widget.render(this.container);
++            this.widget.set("choices", ["c", "d", "e"]);
++            ArrayAssert.itemsAreEqual(
++                ["c", "d", "e"],
++                this.container.all("li > input").get("value"));
++            ArrayAssert.itemsAreEqual(
++                ["c", "d", "e"],
++                this.container.all("li > label").get("text"));
++        },
++
++       testRenderAddChoices: function() {
++            this.widget.add_choices(["a", "b"]);
++            this.widget.render(this.container);
++            ArrayAssert.itemsAreEqual(
++                ["a", "b"],
++                this.container.all("li > input").get("value"));
++            ArrayAssert.itemsAreEqual(
++                ["a", "b"],
++                this.container.all("li > label").get("text"));
++            ArrayAssert.itemsAreEqual(
++                ["checkbox", "checkbox"],
++                this.container.all("li > input").getAttribute("type"));
++        },
++
++        testRenderRemoveChoices: function() {
++            this.widget.add_choices(["a", "b", "c", "d"]);
++            this.widget.render(this.container);
++            this.widget.remove_choices(["b", "d"]);
++            ArrayAssert.itemsAreEqual(
++                ["a", "c"],
++                this.container.all("li > input").get("value"));
++            ArrayAssert.itemsAreEqual(
++                ["a", "c"],
++                this.container.all("li > label").get("text"));
++        },
++
++        testRenderChoicesChangeType: function() {
++            this.widget.set("choices", ["a", "b"]);
++            this.widget.render(this.container);
++            this.widget.set("type", "radio");
++            ArrayAssert.itemsAreEqual(
++                ["radio", "radio"],
++                this.container.all("li > input").getAttribute("type"));
++
++        },
++
++        testChoiceWithCheckBox: function() {
++            this.widget
++                .set("type", "checkbox")
++                .set("choices", ["a", "b"]);
++            ArrayAssert.itemsAreEqual(
++                [], this.widget.get("choice"));
++            this.widget.fieldNode.one("input[value=a]")
++                .set("checked", "checked");
++            ArrayAssert.itemsAreEqual(
++                ["a"], this.widget.get("choice"));
++        },
++
++        testChoiceWithRadio: function() {
++            // When both radio buttons are checked (this is possible in some
++            // broken DOMs/JS engined), choice is undefined.
++            this.widget
++                .set("type", "radio")
++                .set("choices", ["a", "b"]);
++            Assert.isNull(this.widget.get("choice"));
++            this.widget.fieldNode.one("input[value=a]")
++                .set("checked", "checked");
++            Assert.areEqual("a", this.widget.get("choice"));
++            this.widget.fieldNode.one("input[value=b]")
++                .set("checked", "checked");
++            if (this.widget.fieldNode.one("input[value=a]").get("checked")) {
++                // This assertion can only be made if the DOM/JS is broken
++                // in the host browser.
++                Assert.isUndefined(this.widget.get("choice"));
++            }
++            else {
++                // The host browser's DOM/JS is sane.
++                ArrayAssert.itemsAreEqual(
++                    ["b"], this.widget.get("choice"));
++            }
++        },
++
++        testSetChoiceWithCheckBox: function() {
++            this.widget
++                .set("type", "checkbox")
++                .set("choices", ["a", "b"])
++                .set("choice", "a");
++            ArrayAssert.itemsAreEqual(
++                ["a"], this.widget.get("choice"));
++            this.widget.set("choice", ["a"]);
++            ArrayAssert.itemsAreEqual(
++                ["a"], this.widget.get("choice"));
++            this.widget.set("choice", ["a", "b"]);
++            ArrayAssert.itemsAreEqual(
++                ["a", "b"], this.widget.get("choice"));
++            this.widget.set("choice", ["b", "c"]);
++            ArrayAssert.itemsAreEqual(
++                ["b"], this.widget.get("choice"));
++        },
++
++        testSetChoiceWithRadio: function() {
++            this.widget
++                .set("type", "radio")
++                .set("choices", ["a", "b"])
++                .set("choice", "a");
++            ArrayAssert.itemsAreEqual(
++                "a", this.widget.get("choice"));
++            this.widget.set("choice", ["a"]);
++            ArrayAssert.itemsAreEqual(
++                "a", this.widget.get("choice"));
++            this.widget.set("choice", "b");
++            ArrayAssert.itemsAreEqual(
++                "b", this.widget.get("choice"));
++        }
++
++    };
++
++    testChoiceListWidget = Y.merge(
++        testFormRowWidget, testChoiceListWidget);
++    suite.add(new Y.Test.Case(testChoiceListWidget));
++
++    var testParentSeriesListWidget = {
++        name: 'TestParentSeriesListWidget',
++
++        setUp: function() {
++            this.container = Y.Node.create("<div />");
++            this.widget = new widgets.ParentSeriesListWidget();
++        },
++
++        tearDown: function() {
++            this.container.remove(true);
++        },
++
++        testIsClean: function() {
++            Assert.areEqual(
++                "[No parent for this series yet!]",
++                this.widget.fieldNode.one("div").get("text"));
++        },
++
++        testBuildSelector: function() {
++            var node = Y.Node.create(
++                '<tr id="snarf">' +
++                '<td><input type="checkbox"/></td>' +
++                '<td class="test"></td>' +
++                '</tr>');
++            Y.one('body').append(node);
++            node = Y.one('#snarf');
++            this.widget.build_selector(node, ['a', 'b', 'c'], 'test');
++            Assert.areEqual(
++                '<td><input type="checkbox"></td>' +
++                '<td class="test">' +
++                '<select disabled="disabled">' +
++                '<option value="a">a</option>' +
++                '<option value="b">b</option>' +
++                '<option value="c">c</option>' +
++                '</select>' +
++                '</td>', node.get('innerHTML'));
++            Y.one('body').removeChild(node);
++        },
++
++        testAddParentAddsLine: function() {
++            parent = {value: "4", title: "Hoary", api_uri: "ubuntu/hoary"};
++            Assert.areEqual(
++                0,
++                this.widget.fieldNode.all('tr.parent').size());
++            this.widget.add_parent(parent);
++            Assert.areEqual(
++                1,
++                this.widget.fieldNode.all('tr.parent').size());
++            var new_line = this.widget.fieldNode.one('tr.parent');
++            Assert.areEqual(
++                'parent-4',
++                new_line.get('id'));
++        },
++
++        testAddDuplicateParent: function() {
++            parent = {value: "4", title: "Hoary", api_uri: "ubuntu/hoary"};
++            Assert.isTrue(
++                this.widget.add_parent(parent),
++                "Parent not added.");
++            this.widget.add_parent(parent);
++            Assert.isFalse(
++                this.widget.add_parent(parent),
++                "Parent added twice.");
++            Assert.areEqual(
++                1,
++                this.widget.fieldNode.all('tr.parent').size());
++        },
++
++        testParentOrdering: function() {
++            parent = {value: "4", title: "Hoary", api_uri: "ubuntu/hoary"};
++            this.widget.add_parent(parent);
++            parent = {value: "3", title: "Warty", api_uri: "ubuntu/warty"};
++            this.widget.add_parent(parent);
++            Assert.areEqual(
++                'parent-4',
++                this.widget.fieldNode.one('tr.parent').get('id'));
++            // Move first parent down.
++            this.widget.fieldNode.one(
++                'tr#parent-4').one('a.move-down').simulate("click");
++            Assert.areEqual(
++                'parent-3',
++                this.widget.fieldNode.one('tr.parent').get('id'));
++            // Move second parent up.
++            this.widget.fieldNode.one(
++                'tr#parent-4').one('a.move-up').simulate("click");
++            Assert.areEqual(
++                'parent-4',
++                this.widget.fieldNode.one('tr.parent').get('id'));
++        },
++
++        testRemoveParent: function() {
++            parent = {value: "4", title: "Hoary", api_uri: "ubuntu/hoary"};
++            this.widget.add_parent(parent);
++            parent = {value: "3", title: "Warty", api_uri: "ubuntu/warty"};
++            this.widget.add_parent(parent);
++            Assert.areEqual(
++                2,
++                this.widget.fieldNode.all('tr.parent').size());
++            // Delete first parent.
++            this.widget.fieldNode.one(
++                'tr#parent-4').one('span.remove').simulate("click");
++            Assert.areEqual(
++                1,
++                this.widget.fieldNode.all('tr.parent').size());
++            Assert.areEqual(
++                'parent-3',
++                this.widget.fieldNode.one('tr.parent').get('id'));
++            // Delete second parent.
++            this.widget.fieldNode.one(
++                'tr#parent-3').one('span.remove').simulate("click");
++            Assert.areEqual(
++                0,
++                this.widget.fieldNode.all('tr.parent').size());
++            // The parent table is empty.
++            Assert.areEqual(
++                "[No parent for this series yet!]",
++                this.widget.fieldNode.one("div").get("text"));
++        },
++
++        testParentGetter: function() {
++            var parent;
++            parent = {value: "4", title: "Hoary", api_uri: "ubuntu/hoary"};
++            this.widget.add_parent(parent);
++            parent = {value: "3", title: "Warty", api_uri: "ubuntu/warty"};
++            this.widget.add_parent(parent);
++            ArrayAssert.itemsAreEqual(
++                ["4", "3"],
++                this.widget.get('parents'));
++        }
++
++    };
++
++    testParentSeriesListWidget = Y.merge(
++        testFormRowWidget, testParentSeriesListWidget);
++    suite.add(new Y.Test.Case(testParentSeriesListWidget));
++
++   var testArchitecturesChoiceListWidget = {
++        name: 'TestArchitecturesChoiceListWidget',
++
++        setUp: function() {
++            this.container = Y.Node.create("<div />");
++            this.widget = new widgets.ArchitecturesChoiceListWidget();
++        },
++
++        tearDown: function() {
++            this.container.remove(true);
++        },
++
++        testAddDistroArchSerieses: function() {
++            var distro_arch_serieses = [
++                {architecture_tag: "i386"},
++                {architecture_tag: "amd64"},
++                {architecture_tag: "i386"}
++            ];
++            var distro_arch_serieses_collection =
++                new Y.lp.client.Collection(
++                    null, {entries: distro_arch_serieses}, null);
++            this.widget.add_distroarchseries(
++                3,
++                distro_arch_serieses_collection);
++            ArrayAssert.itemsAreEqual(
++                ["amd64", "i386"],
++                this.widget.get("choices"));
++        },
++
++        testAddDistroSeriesInitiatesIO: function() {
++            var io = false;
++            this.widget.client = {
++                get: function(path, config) {
++                    io = true;
++                    Assert.areEqual("ubuntu/hoary/architectures", path);
++                    Assert.isObject(config.on);
++                    Assert.isFunction(config.on.success);
++                    Assert.isFunction(config.on.failure);
++                }
++            };
++            var distroseries = {api_uri: "ubuntu/hoary", value: 3};
++            this.widget.add_distroseries(distroseries);
++            Assert.isTrue(io, "No IO initiated.");
++        },
++
++        testRemoveDistroSeries: function() {
++            var distro_arch_serieses1 = [
++                {architecture_tag: "i386"},
++                {architecture_tag: "amd64"},
++                {architecture_tag: "i386"}
++            ];
++            var distro_arch_serieses_collection1 =
++                new Y.lp.client.Collection(
++                    null, {entries: distro_arch_serieses1}, null);
++            this.widget.add_distroarchseries(
++                "3",
++                distro_arch_serieses_collection1);
++            ArrayAssert.itemsAreEqual(
++                ["amd64", "i386"],
++                this.widget.get("choices"));
++            var distro_arch_serieses2 = [
++                {architecture_tag: "hppa"},
++                {architecture_tag: "hppa"},
++                {architecture_tag: "i386"}
++            ];
++            var distro_arch_serieses_collection2 =
++                new Y.lp.client.Collection(
++                    null, {entries: distro_arch_serieses2}, null);
++            this.widget.add_distroarchseries(
++                "4",
++                distro_arch_serieses_collection2);
++            ArrayAssert.itemsAreEqual(
++                ["amd64", "hppa", "i386"],
++                this.widget.get("choices"));
++            this.widget.remove_distroseries("4");
++            ArrayAssert.itemsAreEqual(
++                ["amd64", "i386"],
++                this.widget.get("choices"));
++        },
++
++        testSetDistroSeriesError: function() {
++            var widget = this.widget;
++            widget.client = {
++                get: function(path, config) {
++                    config.on.failure(
++                        null, {status: 404,
++                               responseText: "Not found"});
++                    Assert.areEqual(
++                        "Not found",
++                        widget.fieldNode.one("p").get("text"));
++                }
++            };
++            this.widget.set("distroSeries", "ubuntu/hoary");
++        }
++
++    };
++
++    testArchitecturesChoiceListWidget = Y.merge(
++        testChoiceListWidget, testArchitecturesChoiceListWidget);
++    suite.add(new Y.Test.Case(testArchitecturesChoiceListWidget));
++
++    var testSelectWidget = {
++        name: 'TestSelectWidget',
++
++        choices: [
++            {value: "a", text: "A", data: 123},
++            {value: "b", text: "B", data: 456},
++            {value: "c", text: "C", data: 789}
++        ],
++
++        setUp: function() {
++            this.container = Y.Node.create("<div />");
++            this.widget = new widgets.SelectWidget();
++        },
++
++        tearDown: function() {
++            this.container.remove(true);
++        },
++
++        testNameChange: function() {
++            this.widget
++                .set("name", "foo")
++                .set("choices", this.choices);
++            var select = this.widget.fieldNode.one("select");
++            Assert.areEqual("foo", select.get("name"));
++            this.widget
++                .set("name", "bar");
++            Assert.areEqual("bar", select.get("name"));
++        },
++
++        testChoices: function() {
++            this.widget.set("choices", this.choices);
++            var choices_observed = this.widget.get("choices");
++            /* We have to compare bit by bit ourselves because
++               Javascript is a language born in hell. */
++            ArrayAssert.itemsAreEqual(
++                attrselect("value")(this.choices),
++                attrselect("value")(choices_observed));
++            ArrayAssert.itemsAreEqual(
++                attrselect("text")(this.choices),
++                attrselect("text")(choices_observed));
++            ArrayAssert.itemsAreEqual(
++                attrselect("data")(this.choices),
++                attrselect("data")(choices_observed));
++        },
++
++        testRenderChoices: function() {
++            this.widget.set("choices", this.choices);
++            this.widget.render(this.container);
++            ArrayAssert.itemsAreEqual(
++                ["a", "b", "c"],
++                this.container.all("select > option").get("value"));
++            ArrayAssert.itemsAreEqual(
++                ["A", "B", "C"],
++                this.container.all("select > option").get("text"));
++        },
++
++        testRenderEmptyChoices: function() {
++            this.widget.fieldNode.append("something");
++            this.widget.set("choices", []);
++            this.widget.render(this.container);
++            Assert.isNull(this.container.one("select"));
++            Assert.isFalse(this.widget.fieldNode.hasChildNodes());
++        },
++
++        testRenderChoicesChange: function() {
++            var choices1 = [
++                {value: "a", text: "A", data: 123}
++            ];
++            this.widget.set("choices", choices1);
++            this.widget.render(this.container);
++            var choices2 = [
++                {value: "b", text: "B", data: 456},
++                {value: "c", text: "C", data: 789}
++            ];
++            this.widget.set("choices", choices2);
++            ArrayAssert.itemsAreEqual(
++                ["b", "c"],
++                this.container.all("select > option").get("value"));
++            ArrayAssert.itemsAreEqual(
++                ["B", "C"],
++                this.container.all("select > option").get("text"));
++        },
++
++        testChoice: function() {
++            this.widget
++                .set("choices", this.choices)
++                .set("multiple", true);
++            /* It would be better to deselect all options by default,
++               but this appears impossible; the browser seems to
++               select the first option when rendering. */
++            this.widget.fieldNode.all("option").set("selected", false);
++            ArrayAssert.itemsAreEqual(
++                [], this.widget.get("choice"));
++            this.widget.fieldNode.one("option[value=a]")
++                .set("selected", true);
++            ArrayAssert.itemsAreEqual(
++                ["a"], this.widget.get("choice"));
++            this.widget.fieldNode.one("option[value=c]")
++                .set("selected", true);
++            ArrayAssert.itemsAreEqual(
++                ["a", "c"], this.widget.get("choice"));
++        },
++
++        testSetChoice: function() {
++            this.widget
++                .set("multiple", true)
++                .set("choices", this.choices)
++                .set("choice", "a");
++            ArrayAssert.itemsAreEqual(
++                ["a"], this.widget.get("choice"));
++            this.widget.set("choice", ["a"]);
++            ArrayAssert.itemsAreEqual(
++                ["a"], this.widget.get("choice"));
++            this.widget.set("choice", ["a", "b"]);
++            ArrayAssert.itemsAreEqual(
++                ["a", "b"], this.widget.get("choice"));
++            this.widget.set("choice", ["b", "z"]);
++            ArrayAssert.itemsAreEqual(
++                ["b"], this.widget.get("choice"));
++        },
++
++        testSize: function() {
++            Assert.areEqual(1, this.widget.get("size"));
++        },
++
++        testRenderSize: function() {
++            this.widget
++                .set("choices", this.choices)
++                .set("size", 7)
++                .render(this.container);
++            Assert.areEqual(
++                7, this.widget.fieldNode.one("select").get("size"));
++        },
++
++        testRenderSizeChange: function() {
++            this.widget
++                .set("choices", this.choices)
++                .set("size", 3)
++                .render(this.container)
++                .set("size", 5);
++            Assert.areEqual(
++                5, this.widget.fieldNode.one("select").get("size"));
++        },
++
++        testAutoSize: function() {
++            this.widget.set("choices", this.choices);
++            /* Without argument, autoSize() sets the size to the same
++               as the number of choices. */
++            this.widget.autoSize();
++            Assert.areEqual(3, this.widget.get("size"));
++        },
++
++        testAutoSizeMoreChoicesThanMaxiumum: function() {
++            this.widget.set("choices", this.choices);
++            /* autoSize() sets the size to the same as the number of
++               choices unless there are more than the specified
++               maximum. */
++            this.widget.autoSize(2);
++            Assert.areEqual(2, this.widget.get("size"));
++        },
++
++        testAutoSizeFewerChoicesThanMaxiumum: function() {
++            this.widget.set("choices", this.choices);
++            /* autoSize() sets the size to the same as the number of
++               choices. */
++            this.widget.autoSize(5);
++            Assert.areEqual(3, this.widget.get("size"));
++        },
++
++        testMultiple: function() {
++            Assert.areEqual(false, this.widget.get("multiple"));
++        },
++
++        testRenderMultiple: function() {
++            this.widget
++                .set("choices", this.choices)
++                .set("multiple", true)
++                .render(this.container);
++            Assert.isTrue(
++                this.widget.fieldNode.one("select")
++                    .hasAttribute("multiple"));
++        },
++
++        testRenderMultipleChange: function() {
++            this.widget
++                .set("choices", this.choices)
++                .set("multiple", true)
++                .render(this.container)
++                .set("multiple", false);
++            Assert.isFalse(
++                this.widget.fieldNode.one("select")
++                    .hasAttribute("multiple"));
++        }
++
++    };
++
++    testSelectWidget = Y.merge(
++        testFormRowWidget, testSelectWidget);
++    suite.add(new Y.Test.Case(testSelectWidget));
++
++    var testPackagesetPickerWidget = {
++        name: 'TestPackagesetPickerWidget',
++
++        setUp: function() {
++            this.container = Y.Node.create("<div />");
++            this.widget = new widgets.PackagesetPickerWidget();
++        },
++
++        tearDown: function() {
++            this.container.remove(true);
++        },
++
++        _getValues: function(items) {
++            return items.map(
++                function(item) {
++                    return item.text;
++                }
++            );
++        },
++
++        testAddChoice: function() {
++            this.widget.add_choice({value: 'c', text: 'c', data: 'c'});
++            ArrayAssert.itemsAreEqual(
++                ["c"], this._getValues(this.widget.get("choices")));
++            this.widget.add_choice({value: 'a', text: 'a', data: 'a'});
++            ArrayAssert.itemsAreEqual(
++                ["a", "c"], this._getValues(this.widget.get("choices")));
++            this.widget.add_choice({value: 'b', text: 'b', data: 'b'});
++            ArrayAssert.itemsAreEqual(
++                ["a", "b", "c"], this._getValues(this.widget.get("choices")));
++        },
++
++        testAddPackagesets: function() {
++            var package_sets = [
++                {id: "4", name: "foo", description: "Foo"},
++                {id: "5", name: "bar", description: "Bar"},
++                {id: "7", name: "baz", description: "Baz"}
++            ];
++            var package_sets_collection =
++                new Y.lp.client.Collection(
++                    null, {entries: package_sets}, null);
++            var distroseries = {value: "4", title: "series1"};
++            this.widget.add_packagesets(
++                package_sets_collection, distroseries);
++            var choices = this.widget.get("choices");
++            ArrayAssert.itemsAreEqual(
++                ["5", "7", "4"],
++                attrselect("value")(choices));
++        },
++
++        testAddPackagesetsCallsAutoSize: function() {
++            var package_sets = [
++                {name: "foo", description: "Foo"},
++                {name: "bar", description: "Bar"},
++                {name: "baz", description: "Baz"}
++            ];
++            var package_sets_collection =
++                new Y.lp.client.Collection(
++                    null, {entries: package_sets}, null);
++            var distroseries = {value: "4", title: "series1"};
++            var autoSized = false;
++            this.widget.autoSize = function() { autoSized = true; };
++            this.widget.add_packagesets(
++                package_sets_collection, distroseries);
++            Assert.isTrue(autoSized);
++        },
++
++        testAddDistroSeriesInitiatesIO: function() {
++            var io = false;
++            this.widget.client = {
++                named_get: function(path, operation, config) {
++                    io = true;
++                    Assert.areEqual("package-sets", path);
++                    Assert.areEqual("getBySeries", operation);
++                    Assert.isNotNull(
++                        config.parameters.distroseries.match(
++                            new RegExp("/ubuntu/hoary$")));
++                    Assert.isObject(config.on);
++                    Assert.isFunction(config.on.success);
++                    Assert.isFunction(config.on.failure);
++                }
++            };
++            var distroseries = {
++                value: "4", title: "series1", api_uri: "ubuntu/hoary"};
++            this.widget.add_distroseries(distroseries);
++            Assert.isTrue(io, "No IO initiated.");
++        },
++
++        testAddDistroSeriesUpdatesPackageSets: function() {
++            var package_sets = [
++                {id: "4", name: "foo", description: "Foo"},
++                {id: "5", name: "bar", description: "Bar"},
++                {id: "6", name: "baz", description: "Baz"}
++            ];
++            var package_sets_collection =
++                new Y.lp.client.Collection(
++                    null, {entries: package_sets}, null);
++            this.widget.client = {
++                named_get: function(path, operation, config) {
++                    config.on.success(package_sets_collection);
++                }
++            };
++            var distroseries = {
++                value: "4", title: "series1", api_uri: "ubuntu/hoary"};
++            this.widget.add_distroseries(distroseries);
++            ArrayAssert.itemsAreEqual(
++                ["5", "6", "4"],
++                attrselect("value")(this.widget.get("choices")));
++        },
++
++        testRemoveDistroSeriesUpdatesPackageSets: function() {
++            // Calling remove_distroseries removes the packagesets
++            // related to the distroseries from the widget.
++
++            // Setup a first distroseries with a bunch of packagesets.
++            var distroseries1 = {
++                value: "1", title: "series1",
++                api_uri: "ubuntu/hoary"};
++            var package_sets1 = [
++                {id: "4", name: "aa", description: "Aa"},
++                {id: "5", name: "bb", description: "Bb"}
++            ];
++            var package_sets_collection1 =
++                new Y.lp.client.Collection(
++                    null, {entries: package_sets1}, null);
++
++            // Setup a second distroseries with other packagesets.
++            var distroseries2 = {
++                value: "2", title: "series2",
++                api_uri: "ubuntu/breezy"};
++            var package_sets2 = [
++                {id: "6", name: "cc", description: "Cc"},
++                {id: "7", name: "dd", description: "Dd"}
++            ];
++            var package_sets_collection2 =
++                new Y.lp.client.Collection(
++                    null, {entries: package_sets2}, null);
++
++            // Setup the client so that the proper packagesets are returned
++            // for each distroseries.
++            var package_set_collections = {
++                'hoary': package_sets_collection1,
++                'breezy': package_sets_collection2
++            };
++            this.widget.client = {
++                named_get: function(path, operation, config) {
++                    var series_name = config
++                        .parameters.distroseries.split('/')[6];
++                    config.on.success(package_set_collections[series_name]);
++                }
++            };
++
++            // Add the two series.
++            this.widget.add_distroseries(distroseries1);
++            this.widget.add_distroseries(distroseries2);
++            // The packagesets widget has been populated with the
++            // packagesets from the series.
++            ArrayAssert.itemsAreEqual(
++                ["4", "5", "6", "7"],
++                attrselect("value")(this.widget.get("choices")));
++
++            // Remove a series.
++            this.widget.remove_distroseries("2");
++            // The remaining packagesets are those from the remaining series.
++            ArrayAssert.itemsAreEqual(
++                ["4", "5"],
++                attrselect("value")(this.widget.get("choices")));
++        },
++
++        testSetDistroSeriesSpinner: function() {
++            var widget = this.widget;
++            widget.client = {
++                named_get: function(path, operation, config) {
++                    Assert.isFalse(
++                        widget.fieldNode.contains(widget.spinnerNode));
++                    config.on.start();
++                    Assert.isTrue(
++                        widget.fieldNode.contains(widget.spinnerNode));
++                    config.on.end();
++                    Assert.isFalse(
++                        widget.fieldNode.contains(widget.spinnerNode));
++                }
++            };
++            this.widget.set("distroSeries", "ubuntu/hoary");
++        },
++
++        testSetDistroSeriesError: function() {
++            var widget = this.widget;
++            widget.client = {
++                named_get: function(path, operation, config) {
++                    config.on.failure(
++                        null, {status: 404,
++                               responseText: "Not found"});
++                    Assert.areEqual(
++                        "Not found",
++                        widget.fieldNode.one("p").get("text"));
++                }
++            };
++            this.widget.set("distroSeries", "ubuntu/hoary");
++        }
++
++    };
++
++    testPackagesetPickerWidget = Y.merge(
++        testSelectWidget, testPackagesetPickerWidget);
++    suite.add(new Y.Test.Case(testPackagesetPickerWidget));
++
++    var testFormActionsWidget = {
++        name: 'TestFormActionsWidget',
++
++        makeActionsDiv: function() {
++            var submit = Y.Node.create("<input />")
++                .set("type", "submit")
++                .set("value", "Initialize Series");
++            var cancel = Y.Node.create("<a>Cancel</a>");
++            var div = Y.Node.create("<div />")
++                .addClass("actions")
++                .append(submit)
++                .append(cancel);
++            return div;
++        },
++
++        setUp: function() {
++            this.actions = this.makeActionsDiv();
++            this.widget = new widgets.FormActionsWidget(
++                {srcNode: this.actions});
++        },
++
++        tearDown: function() {
++            this.actions.remove(true);
++        },
++
++        testInitializer: function() {
++            Assert.isTrue(
++                this.actions.one("input").compareTo(
++                    this.widget.submitButtonNode));
++        },
++
++        testSpinner: function() {
++            Assert.isTrue(
++                this.actions.contains(this.widget.submitButtonNode));
++            Assert.isFalse(
++                this.actions.contains(this.widget.spinnerNode));
++            this.widget.showSpinner();
++            Assert.isFalse(
++                this.actions.contains(this.widget.submitButtonNode));
++            Assert.isTrue(
++                this.actions.contains(this.widget.spinnerNode));
++            this.widget.hideSpinner();
++            Assert.isTrue(
++                this.actions.contains(this.widget.submitButtonNode));
++            Assert.isFalse(
++                this.actions.contains(this.widget.spinnerNode));
++        },
++
++        testShowError: function() {
++            this.widget.showError("The Man From U.N.C.L.E.");
++            Assert.areEqual(
++                "The Man From U.N.C.L.E.",
++                this.actions.one("p.error.message").get("text"));
++        },
++
++        testHideErrors: function() {
++            this.widget.showError("The Man From U.N.C.L.E.");
++            this.widget.showError("The Woman From A.U.N.T.I.E.");
++            this.widget.hideErrors();
++            Assert.isNull(this.actions.one("p.error.message"));
++        }
++
++    };
++
++    suite.add(new Y.Test.Case(testFormActionsWidget));
++
++    // Exports.
++    namespace.testFormActionsWidget = testFormActionsWidget;
++    namespace.suite = suite;
++
++}, "0.1", {"requires": [
++               'test', 'console', 'node-event-simulate',
++               'lp.registry.distroseries.widgets']});