Added cucumber test for notifications dropdown

4 files changed, 55 insertions, 1 deletions

diff --git a/app/assets/javascripts/widgets/notifications-badge.js b/app/assets/javascripts/widgets/notifications-badge.js
index fc2c1d3c4..6c775b9be 100644
--- a/app/assets/javascripts/widgets/notifications-badge.js
+++ b/app/assets/javascripts/widgets/notifications-badge.js
@@ -46,6 +46,7 @@
       self.ajaxLoader.show();
       self.badge.addClass("active");
       self.dropdown.css("display", "block");
+      $('.notifications').addClass("loading");
       self.getNotifications();
       
     };
@@ -92,12 +93,14 @@
       $('.notifications').perfectScrollbar();
       self.ajaxLoader.hide();
       isLoading = false;
+      $('.notifications').removeClass("loading");
       //Infinite Scrolling
       $('.notifications').scroll(function(e) {
         var bottom = $('.notifications').prop('scrollHeight') - $('.notifications').height();
         var currentPosition = $('.notifications').scrollTop();
+        isLoading = ($('.loading').length == 1);
         if (currentPosition + 50 >= bottom && notificationsLoaded <= self.notifications.length && !isLoading) {
-            isLoading = true;
+            $('.notifications').addClass("loading");
             ++currentPage;
             self.getMoreNotifications();
         }
diff --git a/features/desktop/notifications.feature b/features/desktop/notifications.feature
index eeafce68c..a94b23df7 100644
--- a/features/desktop/notifications.feature
+++ b/features/desktop/notifications.feature
@@ -97,3 +97,24 @@ Feature: Notifications
     And I active the first hovercard after loading the notifications page 
     When I press the aspect dropdown
     Then the aspect dropdown should be visible
+
+  Scenario: scrollbar shows up when >5 notifications
+    Given a user with email "bob@bob.bob" is connected with "alice@alice.alice"
+    And Alice has 6 posts mentioning Bob
+    When I sign in as "bob@bob.bob"
+    And I follow "Notifications" in the header
+    Then the notification dropdown should be visible
+    Then the notification dropdown scrollbar should be visible
+
+  Scenario: dropdown will load more elements when bottom is reached
+    Given a user with email "bob@bob.bob" is connected with "alice@alice.alice"
+    And Alice has 20 posts mentioning Bob
+    When I sign in as "bob@bob.bob"
+    And I follow "Notifications" in the header
+    Then the notification dropdown should be visible
+    Then the notification dropdown scrollbar should be visible
+    Then there should be 10 notifications loaded
+    When I scroll down on the notifications dropdown
+    Then I should have scrolled down on the notification dropdown
+    And I wait for notifications to load
+    Then there should be 15 notifications loaded
\ No newline at end of file
diff --git a/features/step_definitions/custom_web_steps.rb b/features/step_definitions/custom_web_steps.rb
index e74f7168f..e5f6b1d3b 100644
--- a/features/step_definitions/custom_web_steps.rb
+++ b/features/step_definitions/custom_web_steps.rb
@@ -184,15 +184,36 @@ end
 And /^I scroll down$/ do
   page.execute_script("window.scrollBy(0,3000000)")
 end
+And /^I scroll down on the notifications dropdown$/ do
+  page.execute_script("$('.notifications').scrollTop(350)")
+end
 
 Then /^I should have scrolled down$/ do
   page.evaluate_script("window.pageYOffset").should > 0
 end
 
+Then /^I should have scrolled down on the notification dropdown$/ do
+  page.evaluate_script("$('.notifications').scrollTop()").should > 0
+end
+
+
 Then /^the notification dropdown should be visible$/ do
   find(:css, "#notification_dropdown").should be_visible
 end
 
+Then /^the notification dropdown scrollbar should be visible$/ do
+  find(:css, ".ps-active-y").should be_visible
+end
+
+Then /^there should be (\d+) notifications loaded$/ do |n|
+  result = page.evaluate_script("$('.notification_element').length")
+  result.should == n.to_i
+end
+
+And "I wait for notifications to load" do
+  page.should_not have_selector(".loading")
+end
+
 When /^I resize my window to 800x600$/ do
   page.execute_script <<-JS
     window.resizeTo(800,600);
diff --git a/features/step_definitions/mention_steps.rb b/features/step_definitions/mention_steps.rb
index e270ea875..f7939afbe 100644
--- a/features/step_definitions/mention_steps.rb
+++ b/features/step_definitions/mention_steps.rb
@@ -5,6 +5,15 @@ And /^Alice has a post mentioning Bob$/ do
   alice.post(:status_message, :text => "@{Bob Jones; #{bob.person.diaspora_handle}}", :to => aspect)
 end
 
+And /^Alice has (\d+) posts mentioning Bob$/ do |n|
+  n.to_i.times do
+    alice = User.find_by_email 'alice@alice.alice'
+    bob = User.find_by_email 'bob@bob.bob'
+    aspect = alice.aspects.where(:name => "Besties").first
+    alice.post(:status_message, :text => "@{Bob Jones; #{bob.person.diaspora_handle}}", :to => aspect)
+  end
+end
+
 And /^I mention Alice in the publisher$/ do
   alice = User.find_by_email 'alice@alice.alice'
   write_in_publisher("@{Alice Smith ; #{alice.person.diaspora_handle}}")