Add test for contacts changing their `groups`

and fix the resulting fallout

spec/roster.js

@@ -358,6 +358,52 @@
                 });
             }));
 
+            it("gets created when a contact's \"groups\" attribute changes",
+                mock.initConverseWithPromises(
+                    null, ['rosterGroupsFetched'], {},
+                    function (done, _converse) {
+
+                _converse.roster_groups = true;
+                spyOn(_converse, 'emit');
+                spyOn(_converse.rosterview, 'update').and.callThrough();
+                _converse.rosterview.render();
+
+                test_utils.openControlBox();
+
+                _converse.roster.create({
+                    jid: 'groupchanger@localhost',
+                    subscription: 'both',
+                    ask: null,
+                    groups: ['firstgroup'],
+                    fullname: 'George Groupchanger'
+                });
+
+                // Check that the groups appear alphabetically and that
+                // requesting and pending contacts are last.
+                test_utils.waitUntil(function () {
+                    return _converse.rosterview.$el.find('.roster-group:visible a.group-toggle').length;
+                }, 500).then(function () {
+                    var group_titles = $.map(
+                        _converse.rosterview.$el.find('.roster-group:visible a.group-toggle'),
+                        function (o) { return $(o).text().trim(); }
+                    );
+                    expect(group_titles).toEqual(['firstgroup']);
+
+                    var contact = _converse.roster.get('groupchanger@localhost');
+                    contact.set({'groups': ['secondgroup']});
+                    return test_utils.waitUntil(function () {
+                        return _converse.rosterview.$el.find('.roster-group[data-group="secondgroup"]:visible a.group-toggle').length;
+                    }, 500);
+                }).then(function () {
+                    var group_titles = $.map(
+                        _converse.rosterview.$el.find('.roster-group:visible a.group-toggle'),
+                        function (o) { return $(o).text().trim(); }
+                    );
+                    expect(group_titles).toEqual(['secondgroup']);
+                    done();
+                });
+            }));
+
             it("can share contacts with other roster groups", 
                 mock.initConverseWithPromises(
                     null, ['rosterGroupsFetched'], {},
@@ -767,7 +813,7 @@
                     expect(window.confirm).toHaveBeenCalled();
                     expect(_converse.connection.sendIQ).toHaveBeenCalled();
                     expect(contact.removeFromRoster).toHaveBeenCalled();
-                    expect(_converse.rosterview.$el.find('.roster-group').css('display')).toEqual('none');
+                    expect(_converse.rosterview.$el.find('.roster-group').length).toEqual(0);
                     done();
                 });
             }));

src/converse-rosterview.js

@@ -451,7 +451,6 @@
                     Backbone.OrderedListView.prototype.initialize.apply(this, arguments);
                     this.model.contacts.on("change:subscription", this.onContactSubscriptionChange, this);
                     this.model.contacts.on("change:requesting", this.onContactRequestChange, this);
-                    this.model.contacts.on("destroy", this.onRemove, this);
                     this.model.contacts.on("remove", this.onRemove, this);
                     _converse.roster.on('change:groups', this.onContactGroupChange, this);
 
@@ -583,36 +582,37 @@
                     const cid = contact.get('id');
                     const in_this_overview = !this.get(cid);
                     if (in_this_group && !in_this_overview) {
-                        this.model.contacts.remove(cid);
-                    } else if (!in_this_group && in_this_overview) {
                         this.items.trigger('add', contact);
+                    } else if (!in_this_group) {
+                        this.removeContact(contact);
                     }
                 },
 
                 onContactSubscriptionChange (contact) {
                     if ((this.model.get('name') === HEADER_PENDING_CONTACTS) && contact.get('subscription') !== 'from') {
-                        this.model.contacts.remove(contact.get('id'));
+                        this.removeContact(contact);
                     }
                 },
 
                 onContactRequestChange (contact) {
                     if ((this.model.get('name') === HEADER_REQUESTING_CONTACTS) && !contact.get('requesting')) {
-                        /* We suppress events, otherwise the remove event will
-                         * also cause the contact's view to be removed from the
-                         * "Pending Contacts" group.
-                         */
-                        this.model.contacts.remove(contact.get('id'), {'silent': true});
-                        // Since we suppress events, we make sure the view and
-                        // contact are removed from this group.
-                        this.get(contact.get('id')).remove();
-                        this.onRemove(contact);
+                        this.removeContact(contact);
                     }
                 },
 
+                removeContact (contact) {
+                    // We suppress events, otherwise the remove event will
+                    // also cause the contact's view to be removed from the
+                    // "Pending Contacts" group.
+                    this.model.contacts.remove(contact, {'silent': true});
+                    this.onRemove(contact);
+                },
+
                 onRemove (contact) {
+                    this.get(contact.get('id')).remove();
                     this.remove(contact.get('id'));
                     if (this.model.contacts.length === 0) {
-                        u.hideElement(this.el);
+                        this.el.parentElement.removeChild(this.el);
                     }
                 }
             });
@@ -632,6 +632,7 @@
                     Backbone.OrderedListView.prototype.initialize.apply(this, arguments);
 
                     _converse.roster.on("add", this.onContactAdded, this);
+                    _converse.roster.on('change:groups', this.onContactAdded, this);
                     _converse.roster.on('change', this.onContactChange, this);
                     _converse.roster.on("destroy", this.update, this);
                     _converse.roster.on("remove", this.update, this);