Deduplicate notification dropdown view

closes #7270

Changelog.md

@@ -9,6 +9,7 @@
 * Fix background color of year on notifications page with dark theme [#7263](https://github.com/diaspora/diaspora/pull/7263)
 * Fix jasmine tests in firefox [#7246](https://github.com/diaspora/diaspora/pull/7246)
 * Prevent scroll to top when clicking 'mark all as read' in the notification dropdown [#7253](https://github.com/diaspora/diaspora/pull/7253)
+* Update existing notifications in dropdown on fetch [#7270](https://github.com/diaspora/diaspora/pull/7270)
 
 ## Features
 * Add links to the aspects and followed tags pages on mobile [#7265](https://github.com/diaspora/diaspora/pull/7265)

app/assets/javascripts/app/views/notification_dropdown_view.js

@@ -77,22 +77,26 @@ app.views.NotificationDropdown = app.views.Base.extend({
   },
 
   onPushBack: function(notification) {
-    var node = this.dropdownNotifications.append(notification.get("note_html"));
+    var node = $(notification.get("note_html"));
-    $(node).find(".unread-toggle .entypo-eye").tooltip("destroy").tooltip();
+    this.dropdownNotifications.append(node);
-    $(node).find(this.avatars.selector).error(this.avatars.fallback);
+    this.afterNotificationChanges(node);
   },
 
   onPushFront: function(notification) {
-    var node = this.dropdownNotifications.prepend(notification.get("note_html"));
+    var node = $(notification.get("note_html"));
-    $(node).find(".unread-toggle .entypo-eye").tooltip("destroy").tooltip();
+    this.dropdownNotifications.prepend(node);
-    $(node).find(this.avatars.selector).error(this.avatars.fallback);
+    this.afterNotificationChanges(node);
   },
 
   onNotificationChange: function(notification) {
-    var node = this.dropdownNotifications.find("[data-guid=" + notification.get("id") + "]");
+    var node = $(notification.get("note_html"));
-    $(node).replaceWith(notification.get("note_html"));
+    this.dropdownNotifications.find("[data-guid=" + notification.get("id") + "]").replaceWith(node);
-    $(node).find(".unread-toggle .entypo-eye").tooltip("destroy").tooltip();
+    this.afterNotificationChanges(node);
-    $(node).find(this.avatars.selector).error(this.avatars.fallback);
+  },
+
+  afterNotificationChanges: function(node) {
+    node.find(".unread-toggle .entypo-eye").tooltip("destroy").tooltip();
+    node.find(this.avatars.selector).error(this.avatars.fallback);
   },
 
   finishLoading: function() {

spec/javascripts/app/views/notification_dropdown_view_spec.js

@@ -110,4 +110,77 @@ describe("app.views.NotificationDropdown", function() {
       expect($.fn.perfectScrollbar).not.toHaveBeenCalled();
     });
   });
+
+  describe("notification changes", function() {
+    beforeEach(function() {
+      this.collection.fetch();
+      jasmine.Ajax.requests.mostRecent().respondWith({
+        status: 200,
+        responseText: spec.readFixture("notifications_collection")
+      });
+      this.notification = factory.notification({
+        "id": 1337,
+        "note_html": "<div class='stream-element' data-guid='1337'>This is a notification</div>"
+      });
+      expect(this.collection.length).toBeGreaterThan(0);
+      expect(this.view.$(".notifications .stream-element").length).toBe(this.collection.length);
+    });
+
+    describe("onPushBack", function() {
+      it("adds the notification at the end of the rendered list", function() {
+        this.view.onPushBack(this.notification);
+        expect(this.view.$(".notifications .stream-element").length).toBe(this.collection.length + 1);
+        expect(this.view.$(".notifications .stream-element").last().text()).toBe("This is a notification");
+      });
+
+      it("calls afterNotificationChanges", function() {
+        spyOn(this.view, "afterNotificationChanges");
+        this.view.onPushBack(this.notification);
+        expect(this.view.afterNotificationChanges).toHaveBeenCalled();
+        var node = this.view.afterNotificationChanges.calls.mostRecent().args[0];
+        expect(node.text()).toBe("This is a notification");
+      });
+    });
+
+    describe("onPushFront", function() {
+      it("adds the notification to the beginning of the rendered list", function() {
+        this.view.onPushFront(this.notification);
+        expect(this.view.$(".notifications .stream-element").length).toBe(this.collection.length + 1);
+        expect(this.view.$(".notifications .stream-element").first().text()).toBe("This is a notification");
+      });
+
+      it("calls afterNotificationChanges", function() {
+        spyOn(this.view, "afterNotificationChanges");
+        this.view.onPushFront(this.notification);
+        expect(this.view.afterNotificationChanges).toHaveBeenCalled();
+        var node = this.view.afterNotificationChanges.calls.mostRecent().args[0];
+        expect(node.text()).toBe("This is a notification");
+      });
+    });
+
+    describe("onNotificationChange", function() {
+      beforeEach(function() {
+        // create a notification which replaces the first in the collection
+        var firstNoteId = this.collection.models[0].attributes.id;
+        this.notification = factory.notification({
+          "id": firstNoteId,
+          "note_html": "<div class='stream-element' data-guid='" + firstNoteId + "'>This is a notification</div>"
+        });
+      });
+
+      it("replaces the notification in the rendered list", function() {
+        this.view.onNotificationChange(this.notification);
+        expect(this.view.$(".notifications .stream-element").length).toBe(this.collection.length);
+        expect(this.view.$(".notifications .stream-element").first().text()).toBe("This is a notification");
+      });
+
+      it("calls afterNotificationChanges", function() {
+        spyOn(this.view, "afterNotificationChanges");
+        this.view.onNotificationChange(this.notification);
+        expect(this.view.afterNotificationChanges).toHaveBeenCalled();
+        var node = this.view.afterNotificationChanges.calls.mostRecent().args[0];
+        expect(node.text()).toBe("This is a notification");
+      });
+    });
+  });
 });

spec/javascripts/jasmine_helpers/factory.js

@@ -55,6 +55,23 @@ var factory = {
     return new app.models.Contact(_.extend(attrs, overrides));
   },
 
+  notification: function(overrides) {
+    var noteId = this.id.next();
+    var defaultAttrs = {
+      "type": "reshared",
+      "id": noteId,
+      "target_type": "Post",
+      "target_id": this.id.next(),
+      "recipient_id": this.id.next(),
+      "unread": true,
+      "created_at": "2012-01-04T00:55:30Z",
+      "updated_at": "2012-01-04T00:55:30Z",
+      "note_html": "This is a notification!"
+    };
+
+    return new app.models.Notification(_.extend(defaultAttrs, overrides));
+  },
+
   user : function(overrides) {
     return new app.models.User(factory.userAttrs(overrides));
   },