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)); },