Ensure that group headings appear in alphabetical order.

updates #83

converse.js

@@ -3373,16 +3373,36 @@
                         $el.find('.roster-group[data-group="'+HEADER_UNGROUPED+'"]').after(view.el);
                     } else {
                         _.each(item.get('groups'), $.proxy(function (group) {
+                            var groups, $groups, group_lower, index, header;
                             var $group = $el.find('.roster-group[data-group="'+group+'"]');
                             if ($group.length > 0) {
                                 $group.after(view.el);
                             } else {
-                                $group = $(converse.templates.group_header({
-                                    label_group: group,
-                                    desc_group_toggle: DESC_GROUP_TOGGLE,
-                                    toggle_state: 'opened' // TODO: remember state...
-                                })).after(view.el);
-                                this.getRosterElement().append($group);
+                                $groups = $el.find('.roster-group');
+
+                                header = $(converse.templates.group_header({
+                                        label_group: group,
+                                        desc_group_toggle: DESC_GROUP_TOGGLE,
+                                        toggle_state: 'opened' // TODO: remember state...
+                                    })).after(view.el)
+
+                                if ($groups.length) {
+                                    group_lower = group.toLowerCase();
+                                    groups = $.map($groups, function(o) { return o.dataset.group.toLowerCase(); })
+                                    groups.push(group_lower);
+                                    index = groups.sort().indexOf(group_lower);
+                                    if (index == 0) {
+                                        $($groups.first()).before(header);
+                                    } else if (index == groups.length) {
+                                        $($groups.last()).after(header);
+                                    } else {
+                                        $($groups.eq(index)).before(header);
+                                    }
+                                } else {
+                                    // This shouldn't actually happen, since
+                                    // there's always the Ungrouped.
+                                    this.getRosterElement().append(header);
+                                }
                             }
                         },this));
                     }

spec/controlbox.js

@@ -278,9 +278,10 @@
                 converse.rosterview.render();
                 var groups = {
                     'colleagues': 3,
-                    'friends & acquaintences': 5,
-                    'family': 4,
-                    'ænemies': 3
+                    'friends & acquaintences': 3,
+                    'Family': 4,
+                    'ænemies': 3,
+                    'Ungrouped': 2
                 };
                 _.each(_.keys(groups), $.proxy(function (name) {
                     j = i;
@@ -289,12 +290,15 @@
                             jid: mock.cur_names[i].replace(/ /g,'.').toLowerCase() + '@localhost',
                             subscription: 'both',
                             ask: null,
-                            groups: [name],
+                            groups: name === 'ungrouped'? [] : [name],
                             fullname: mock.cur_names[i],
                             is_last: i===(mock.cur_names.length-1)
                         });
                     }
                 }, converse));
+                // Check that the groups appear alphabetically
+                t = this.rosterview.$el.find('dt.roster-group a.group-toggle').text();
+                expect(t).toEqual('colleaguesFamilyfriends & acquaintencesUngrouped');
             }, converse));
 
             it("can change their status to online and be sorted alphabetically", $.proxy(function () {