diff --git a/Changelog.md b/Changelog.md
index ff5610316..b6462294e 100644
--- a/Changelog.md
+++ b/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)
diff --git a/app/assets/javascripts/app/views/notification_dropdown_view.js b/app/assets/javascripts/app/views/notification_dropdown_view.js
index fb4490829..c3f8f1911 100644
--- a/app/assets/javascripts/app/views/notification_dropdown_view.js
+++ b/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"));
- $(node).find(".unread-toggle .entypo-eye").tooltip("destroy").tooltip();
- $(node).find(this.avatars.selector).error(this.avatars.fallback);
+ var node = $(notification.get("note_html"));
+ this.dropdownNotifications.append(node);
+ this.afterNotificationChanges(node);
},
onPushFront: function(notification) {
- var node = this.dropdownNotifications.prepend(notification.get("note_html"));
- $(node).find(".unread-toggle .entypo-eye").tooltip("destroy").tooltip();
- $(node).find(this.avatars.selector).error(this.avatars.fallback);
+ var node = $(notification.get("note_html"));
+ this.dropdownNotifications.prepend(node);
+ this.afterNotificationChanges(node);
},
onNotificationChange: function(notification) {
- var node = this.dropdownNotifications.find("[data-guid=" + notification.get("id") + "]");
- $(node).replaceWith(notification.get("note_html"));
- $(node).find(".unread-toggle .entypo-eye").tooltip("destroy").tooltip();
- $(node).find(this.avatars.selector).error(this.avatars.fallback);
+ var node = $(notification.get("note_html"));
+ this.dropdownNotifications.find("[data-guid=" + notification.get("id") + "]").replaceWith(node);
+ this.afterNotificationChanges(node);
+ },
+
+ afterNotificationChanges: function(node) {
+ node.find(".unread-toggle .entypo-eye").tooltip("destroy").tooltip();
+ node.find(this.avatars.selector).error(this.avatars.fallback);
},
finishLoading: function() {
diff --git a/spec/javascripts/app/views/notification_dropdown_view_spec.js b/spec/javascripts/app/views/notification_dropdown_view_spec.js
index 47c360603..5a1452672 100644
--- a/spec/javascripts/app/views/notification_dropdown_view_spec.js
+++ b/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": "
This is a notification
"
+ });
+ 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": "This is a notification
"
+ });
+ });
+
+ 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");
+ });
+ });
+ });
});
diff --git a/spec/javascripts/jasmine_helpers/factory.js b/spec/javascripts/jasmine_helpers/factory.js
index d21435651..7732e8281 100644
--- a/spec/javascripts/jasmine_helpers/factory.js
+++ b/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));
},