Merge pull request #6718 from svbergerem/fix-contacts-page-notification-count

Fix notification count change on contacts page

Changelog.md

@@ -100,6 +100,7 @@ Contributions are very welcome, the hard work is done!
 * Fixed a 500 when liking on mobile without JS enabled [#6683](https://github.com/diaspora/diaspora/pull/6683)
 * Fixed profile image upload in the mobile UI [#6684](https://github.com/diaspora/diaspora/pull/6684)
 * Fixed eye not stopping all processes when trying to exit `script/server` [#6693](https://github.com/diaspora/diaspora/pull/6693)
+* Do not change contacts count when marking notifications on the contacts page as read [#6718](https://github.com/diaspora/diaspora/pull/6718)
 
 ## Features
 * Support color themes [#6033](https://github.com/diaspora/diaspora/pull/6033)

app/assets/javascripts/app/views/notifications_view.js

@@ -52,10 +52,10 @@ app.views.Notifications = Backbone.View.extend({
 
   updateView: function(guid, type, unread) {
     var change = unread ? 1 : -1,
-        allNotes = $(".list-group > a:eq(0) .badge"),
-        typeNotes = $(".list-group > a[data-type=" + type + "] .badge"),
+        allNotes = $("#notifications_container .list-group > a:eq(0) .badge"),
+        typeNotes = $("#notifications_container .list-group > a[data-type=" + type + "] .badge"),
         headerBadge = $(".notifications-link .badge"),
-        note = $(".stream_element[data-guid=" + guid + "]"),
+        note = $(".notifications .stream_element[data-guid=" + guid + "]"),
         markAllReadLink = $("a#mark_all_read_link"),
         translationKey = unread ? "notifications.mark_read" : "notifications.mark_unread";
 

spec/javascripts/app/views/notifications_view_spec.js

 describe("app.views.Notifications", function(){
-  beforeEach(function() {
-    spec.loadFixture("notifications");
-    this.view = new app.views.Notifications({el: "#notifications_container"});
-  });
-
-  context("mark read", function() {
+  context("on the notifications page", function() {
     beforeEach(function() {
-      this.unreadN = $(".stream_element.unread").first();
-      this.guid = this.unreadN.data("guid");
+      spec.loadFixture("notifications");
+      this.view = new app.views.Notifications({el: "#notifications_container"});
     });
 
-    it("calls 'setRead'", function() {
-      spyOn(this.view, "setRead");
-      this.unreadN.find(".unread-toggle").trigger("click");
+    describe("mark read", function() {
+      beforeEach(function() {
+        this.unreadN = $(".stream_element.unread").first();
+        this.guid = this.unreadN.data("guid");
+      });
 
-      expect(this.view.setRead).toHaveBeenCalledWith(this.guid);
-    });
-  });
+      it("calls 'setRead'", function() {
+        spyOn(this.view, "setRead");
+        this.unreadN.find(".unread-toggle").trigger("click");
 
-  context("mark unread", function() {
-    beforeEach(function() {
-      this.readN = $(".stream_element.read").first();
-      this.guid = this.readN.data("guid");
+        expect(this.view.setRead).toHaveBeenCalledWith(this.guid);
+      });
     });
 
-    it("calls 'setUnread'", function() {
-      spyOn(this.view, "setUnread");
-      this.readN.find(".unread-toggle").trigger("click");
+    describe("mark unread", function() {
+      beforeEach(function() {
+        this.readN = $(".stream_element.read").first();
+        this.guid = this.readN.data("guid");
+      });
 
-      expect(this.view.setUnread).toHaveBeenCalledWith(this.guid);
-    });
-  });
+      it("calls 'setUnread'", function() {
+        spyOn(this.view, "setUnread");
+        this.readN.find(".unread-toggle").trigger("click");
 
-  context("updateView", function() {
-    beforeEach(function() {
-      this.readN = $(".stream_element.read").first();
-      this.guid = this.readN.data("guid");
-      this.type = this.readN.data("type");
+        expect(this.view.setUnread).toHaveBeenCalledWith(this.guid);
+      });
     });
 
-    it("changes the 'all notifications' count", function() {
-      var badge = $(".list-group > a:eq(0) .badge");
-      var count = parseInt(badge.text());
+    describe("updateView", function() {
+      beforeEach(function() {
+        this.readN = $(".stream_element.read").first();
+        this.guid = this.readN.data("guid");
+        this.type = this.readN.data("type");
+      });
 
-      this.view.updateView(this.guid, this.type, true);
-      expect(parseInt(badge.text())).toBe(count + 1);
+      it("changes the 'all notifications' count", function() {
+        var badge = $(".list-group > a:eq(0) .badge");
+        var count = parseInt(badge.text());
 
-      this.view.updateView(this.guid, this.type, false);
-      expect(parseInt(badge.text())).toBe(count);
-    });
+        this.view.updateView(this.guid, this.type, true);
+        expect(parseInt(badge.text())).toBe(count + 1);
 
-    it("changes the notification type count", function() {
-      var badge = $(".list-group > a[data-type=" + this.type + "] .badge");
-      var count = parseInt(badge.text());
+        this.view.updateView(this.guid, this.type, false);
+        expect(parseInt(badge.text())).toBe(count);
+      });
 
-      this.view.updateView(this.guid, this.type, true);
-      expect(parseInt(badge.text())).toBe(count + 1);
+      it("changes the notification type count", function() {
+        var badge = $(".list-group > a[data-type=" + this.type + "] .badge");
+        var count = parseInt(badge.text());
 
-      this.view.updateView(this.guid, this.type, false);
-      expect(parseInt(badge.text())).toBe(count);
-    });
+        this.view.updateView(this.guid, this.type, true);
+        expect(parseInt(badge.text())).toBe(count + 1);
+
+        this.view.updateView(this.guid, this.type, false);
+        expect(parseInt(badge.text())).toBe(count);
+      });
+
+      it("toggles the unread class and changes the title", function() {
+        this.view.updateView(this.readN.data("guid"), this.readN.data("type"), true);
+        expect(this.readN.hasClass("unread")).toBeTruthy();
+        expect(this.readN.hasClass("read")).toBeFalsy();
+        expect(this.readN.find(".unread-toggle .entypo-eye").data("original-title")).toBe(
+          Diaspora.I18n.t("notifications.mark_read")
+        );
+
+        this.view.updateView(this.readN.data("guid"), this.readN.data("type"), false);
+        expect(this.readN.hasClass("read")).toBeTruthy();
+        expect(this.readN.hasClass("unread")).toBeFalsy();
+        expect(this.readN.find(".unread-toggle .entypo-eye").data("original-title")).toBe(
+          Diaspora.I18n.t("notifications.mark_unread")
+        );
+      });
+
+      context("with a header", function() {
+        beforeEach(function() {
+          /* jshint camelcase: false */
+          loginAs({name: "alice", avatar: {small: "http://avatar.com/photo.jpg"}, notifications_count: 2, guid: "foo"});
+          /* jshint camelcase: true */
+          gon.appConfig = {settings: {podname: "MyPod"}};
+          this.header = new app.views.Header();
+          $("header").prepend(this.header.el);
+          this.header.render();
+        });
+
+        it("changes the header notifications count", function() {
+          var badge1 = $(".notifications-link:eq(0) .badge");
+          var badge2 = $(".notifications-link:eq(1) .badge");
+          var count = parseInt(badge1.text(), 10);
 
-    it("toggles the unread class and changes the title", function() {
-      this.view.updateView(this.readN.data("guid"), this.readN.data("type"), true);
-      expect(this.readN.hasClass("unread")).toBeTruthy();
-      expect(this.readN.hasClass("read")).toBeFalsy();
-      expect(this.readN.find(".unread-toggle .entypo-eye").data("original-title")).toBe(
-        Diaspora.I18n.t("notifications.mark_read")
-      );
-
-      this.view.updateView(this.readN.data("guid"), this.readN.data("type"), false);
-      expect(this.readN.hasClass("read")).toBeTruthy();
-      expect(this.readN.hasClass("unread")).toBeFalsy();
-      expect(this.readN.find(".unread-toggle .entypo-eye").data("original-title")).toBe(
-        Diaspora.I18n.t("notifications.mark_unread")
-      );
+          this.view.updateView(this.guid, this.type, true);
+          expect(parseInt(badge1.text(), 10)).toBe(count + 1);
+
+          this.view.updateView(this.guid, this.type, false);
+          expect(parseInt(badge1.text(), 10)).toBe(count);
+
+          this.view.updateView(this.guid, this.type, true);
+          expect(parseInt(badge2.text(), 10)).toBe(count + 1);
+
+          this.view.updateView(this.guid, this.type, false);
+          expect(parseInt(badge2.text(), 10)).toBe(count);
+        });
+      });
     });
 
-    context("with a header", function() {
-      beforeEach(function() {
-        loginAs({name: "alice", avatar: {small: "http://avatar.com/photo.jpg"}, notifications_count: 2, guid: "foo"});
-        gon.appConfig = {settings: {podname: "MyPod"}};
-        this.header = new app.views.Header();
-        $("header").prepend(this.header.el);
-        this.header.render();
+    describe("markAllRead", function() {
+      it("calls setRead for each unread notification", function(){
+        spyOn(this.view, "setRead");
+        this.view.markAllRead();
+        expect(this.view.setRead).toHaveBeenCalledWith(this.view.$(".stream_element.unread").eq(0).data("guid"));
+        this.view.markAllRead();
+        expect(this.view.setRead).toHaveBeenCalledWith(this.view.$(".stream_element.unread").eq(1).data("guid"));
       });
+    });
+  });
+
+  context("on the contacts page", function() {
+    beforeEach(function() {
+      spec.loadFixture("aspects_manage");
+      this.view = new app.views.Notifications({el: "#notifications_container"});
+      /* jshint camelcase: false */
+      loginAs({name: "alice", avatar: {small: "http://avatar.com/photo.jpg"}, notifications_count: 2, guid: "foo"});
+      /* jshint camelcase: true */
+      gon.appConfig = {settings: {podname: "MyPod"}};
+      this.header = new app.views.Header();
+      $("header").prepend(this.header.el);
+      this.header.render();
+    });
 
+    describe("updateView", function() {
       it("changes the header notifications count", function() {
         var badge1 = $(".notifications-link:eq(0) .badge");
         var badge2 = $(".notifications-link:eq(1) .badge");
@@ -104,15 +152,22 @@ describe("app.views.Notifications", function(){
         expect(parseInt(badge2.text(), 10)).toBe(count);
       });
 
-      context("markAllRead", function() {
-        it("calls setRead for each unread notification", function(){
-          spyOn(this.view, "setRead");
-          this.view.markAllRead();
-          expect(this.view.setRead).toHaveBeenCalledWith(this.view.$(".stream_element.unread").eq(0).data("guid"));
-          this.view.markAllRead();
-          expect(this.view.setRead).toHaveBeenCalledWith(this.view.$(".stream_element.unread").eq(1).data("guid"));
-          });
+      it("doesn't change the contacts count", function() {
+        expect($("#aspect_nav .badge").length).toBeGreaterThan(0);
+        $("#aspect_nav .badge").each(function(index, el) {
+          $(el).text(index + 1337);
+        });
+
+        this.view.updateView(this.guid, this.type, true);
+        $("#aspect_nav .badge").each(function(index, el) {
+          expect(parseInt($(el).text(), 10)).toBe(index + 1337);
+        });
+
+        this.view.updateView(this.guid, this.type, false);
+        $("#aspect_nav .badge").each(function(index, el) {
+          expect(parseInt($(el).text(), 10)).toBe(index + 1337);
         });
+      });
     });
   });
 });