Fix overflow with perfect scrollbar

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

@@ -34,6 +34,7 @@ app.views.NotificationDropdown = app.views.Base.extend({
     this.resetParams();
     this.ajaxLoader.show();
     this.dropdown.addClass("dropdown-open");
+    this.updateScrollbar();
     this.dropdownNotifications.addClass("loading");
     this.getNotifications();
   },
@@ -43,10 +44,7 @@ app.views.NotificationDropdown = app.views.Base.extend({
     var inHovercard = $.contains(app.hovercard.el, evt.target);
     if(!inDropdown && !inHovercard && this.dropdownShowing()){
       this.dropdown.removeClass("dropdown-open");
-      if(this.perfectScrollbarInitialized) {
+      this.destroyScrollbar();
-        this.dropdownNotifications.perfectScrollbar("destroy");
-        this.perfectScrollbarInitialized = false;
-      }
     }
   },
 
@@ -111,15 +109,27 @@ app.views.NotificationDropdown = app.views.Base.extend({
 
     app.helpers.timeago(this.dropdownNotifications);
 
-    if(this.perfectScrollbarInitialized) {
+    this.updateScrollbar();
-      this.dropdownNotifications.perfectScrollbar("destroy");
-    }
-    this.dropdownNotifications.perfectScrollbar();
-    this.perfectScrollbarInitialized = true;
     this.dropdownNotifications.removeClass("loading");
     this.dropdownNotifications.scroll(function(){
       self.dropdownScroll();
     });
+  },
+
+  updateScrollbar: function() {
+    if(this.perfectScrollbarInitialized) {
+      this.dropdownNotifications.perfectScrollbar("update");
+    } else {
+      this.dropdownNotifications.perfectScrollbar();
+      this.perfectScrollbarInitialized = true;
+    }
+  },
+
+  destroyScrollbar: function() {
+    if(this.perfectScrollbarInitialized) {
+      this.dropdownNotifications.perfectScrollbar("destroy");
+      this.perfectScrollbarInitialized = false;
+    }
   }
 });
 // @license-end

spec/javascripts/app/views/notification_dropdown_view_spec.js

@@ -14,6 +14,11 @@ describe("app.views.NotificationDropdown", function() {
       this.view.showDropdown();
       expect(this.view.resetParams).toHaveBeenCalled();
     });
+    it("Calls updateScrollbar()", function(){
+      spyOn(this.view, "updateScrollbar");
+      this.view.showDropdown();
+      expect(this.view.updateScrollbar).toHaveBeenCalled();
+    });
     it("Changes CSS", function(){
       expect($("#notification-dropdown")).not.toHaveClass("dropdown-open");
       this.view.showDropdown();
@@ -105,5 +110,50 @@ describe("app.views.NotificationDropdown", function() {
       this.view.renderNotifications();
       expect(this.view.hideAjaxLoader).toHaveBeenCalled();
     });
+    it("Calls updateScrollbar()", function(){
+      spyOn(this.view, "updateScrollbar");
+      this.view.renderNotifications();
+      expect(this.view.updateScrollbar).toHaveBeenCalled();
+    });
+  });
+
+  context("updateScrollbar", function() {
+    it("Initializes perfectScrollbar", function(){
+      this.view.perfectScrollbarInitialized = false;
+      spyOn($.fn, "perfectScrollbar");
+      this.view.updateScrollbar();
+      expect($.fn.perfectScrollbar).toHaveBeenCalledWith();
+      expect($.fn.perfectScrollbar.calls.mostRecent().object).toEqual(this.view.dropdownNotifications);
+      expect(this.view.perfectScrollbarInitialized).toBeTruthy();
+    });
+
+    it("Updates perfectScrollbar", function(){
+      this.view.perfectScrollbarInitialized = true;
+      this.view.dropdownNotifications.perfectScrollbar();
+      spyOn($.fn, "perfectScrollbar");
+      this.view.updateScrollbar();
+      expect($.fn.perfectScrollbar).toHaveBeenCalledWith("update");
+      expect($.fn.perfectScrollbar.calls.mostRecent().object).toEqual(this.view.dropdownNotifications);
+      expect(this.view.perfectScrollbarInitialized).toBeTruthy();
+    });
+  });
+
+  context("destroyScrollbar", function() {
+    it("destroys perfectScrollbar", function(){
+      this.view.perfectScrollbarInitialized = true;
+      this.view.dropdownNotifications.perfectScrollbar();
+      spyOn($.fn, "perfectScrollbar");
+      this.view.destroyScrollbar();
+      expect($.fn.perfectScrollbar).toHaveBeenCalledWith("destroy");
+      expect($.fn.perfectScrollbar.calls.mostRecent().object).toEqual(this.view.dropdownNotifications);
+      expect(this.view.perfectScrollbarInitialized).toBeFalsy();
+    });
+
+    it("doesn't destroy perfectScrollbar if it isn't initialized", function(){
+      this.view.perfectScrollbarInitialized = false;
+      spyOn($.fn, "perfectScrollbar");
+      this.view.destroyScrollbar();
+      expect($.fn.perfectScrollbar).not.toHaveBeenCalled();
+    });
   });
 });