From 24ea518b6f80208748d64539e62f38e8e46071a4 Mon Sep 17 00:00:00 2001
From: Raphael Sofaer <raphael@joindiaspora.com>
Date: Mon, 25 Apr 2011 16:15:33 -0700
Subject: [PATCH] Fix some JS bugs, delegate doesn't work if you remove the
 element

---
 features/comments.feature                  | 14 +++++
 features/step_definitions/comment_steps.rb | 10 +++
 public/javascripts/stream.js               | 30 ++++-----
 spec/javascripts/embedder-spec.js          |  9 +--
 spec/javascripts/stream-spec.js            | 73 +++++++++++-----------
 5 files changed, 83 insertions(+), 53 deletions(-)

diff --git a/features/comments.feature b/features/comments.feature
index ac88ce360..55e2ccf9f 100644
--- a/features/comments.feature
+++ b/features/comments.feature
@@ -61,3 +61,17 @@ Feature: commenting
     And I click to delete the first comment
     And I wait for the ajax to finish
     Then I should not see "is that a poodle?"
+
+  Scenario: expand the comment form
+    When I sign in as "bob@bob.bob"
+    Then I should see "Look at this dog"
+    Then the first comment field should be closed
+    When I focus the comment field
+    Then the first comment field should be open
+
+    When I follow "Besties"
+    And I wait for the ajax to finish
+    Then I should see "Look at this dog"
+    Then the first comment field should be closed
+    When I focus the comment field
+    Then the first comment field should be open
diff --git a/features/step_definitions/comment_steps.rb b/features/step_definitions/comment_steps.rb
index 05727152a..e1be708be 100644
--- a/features/step_definitions/comment_steps.rb
+++ b/features/step_definitions/comment_steps.rb
@@ -1,3 +1,13 @@
 When /^I focus the comment field$/ do
   find("a.focus_comment_textarea").click
 end
+
+Then /^the first comment field should be open/ do
+  css_query = "$('#main_stream .stream_element:first .submit_button .comment_submit.button:visible')"
+  page.evaluate_script("#{css_query}.length").should == 1
+end
+
+Then /^the first comment field should be closed$/ do
+  css_query = "$('#main_stream .stream_element:first .submit_button .comment_submit.button:hidden')"
+  page.evaluate_script("#{css_query}.length").should == 1
+end
diff --git a/public/javascripts/stream.js b/public/javascripts/stream.js
index 3ee9b93d5..c9ccefe21 100644
--- a/public/javascripts/stream.js
+++ b/public/javascripts/stream.js
@@ -5,26 +5,27 @@
 
 var Stream = {
   initialize: function() {
-    var $stream = $(".stream");
+    var stream_string = '#main_stream';
+    var $stream = $(stream_string);
 
     $(".status_message_delete").tipsy({trigger: 'hover', gravity: 'n'});
 
-    Diaspora.widgets.subscribe("stream/reloaded", Stream.initialize);
+    Diaspora.widgets.subscribe("stream/reloaded", Stream.initialized);
     Diaspora.widgets.timeago.updateTimeAgo();
     Diaspora.widgets.directionDetector.updateBinds();
 
 
-    $stream.not(".show").delegate("a.show_post_comments", "click", Stream.toggleComments);
+    $(stream_string + " a.show_post_comments:not(.show)").live("click", Stream.toggleComments);
     //audio linx
     Stream.setUpAudioLinks();
     //Stream.setUpImageLinks();
 
     // comment link form focus
-    $stream.delegate(".focus_comment_textarea", "click", function(e){
+    $(stream_string + " .focus_comment_textarea").live("click", function(e){
       Stream.focusNewComment($(this), e);
     });
 
-    $stream.delegate("textarea.comment_box", "focus", function(evt) {
+    $(stream_string + " textarea.comment_box").live("focus", function(evt) {
       var commentBox = $(this);
       commentBox
         .attr('rows',2)
@@ -32,7 +33,7 @@ var Stream = {
           .addClass('open');
     });
 
-    $stream.delegate("textarea.comment_box", "blur", function(evt) {
+    $(stream_string + " textarea.comment_box").live("blur", function(evt) {
       var commentBox = $(this);
       if (!commentBox.val()) {
         commentBox
@@ -44,18 +45,18 @@ var Stream = {
     });
 
     // like/dislike
-    $stream.delegate("a.expand_likes", "click", function(evt) {
+    $(stream_string + " a.expand_likes").live("click", function(evt) {
       evt.preventDefault();
       $(this).siblings('.likes_list').fadeToggle('fast');
     });
 
-    $stream.delegate("a.expand_dislikes", "click", function(evt) {
+    $(stream_string + " a.expand_dislikes").live("click", function(evt) {
       evt.preventDefault();
       $(this).siblings('.dislikes_list').fadeToggle('fast');
     });
 
     // reshare button action
-    $stream.delegate(".reshare_button", "click", function(evt) {
+    $(stream_string + ' .reshare_button').live("click", function(evt) {
       evt.preventDefault();
       var button = $(this);
       var box = button.siblings(".reshare_box");
@@ -79,20 +80,20 @@ var Stream = {
       Stream.setUpAudioLinks();
     });
 
-    $(".new_status_message").bind('ajax:failure', function(data, html , xhr) {
+    $(".new_status_message").live('ajax:failure', function(data, html , xhr) {
       json = $.parseJSON(html.responseText);
-      if(json.errors.length != 0){
+      if(json.errors.length !== 0){
         Diaspora.widgets.alert.alert(json.errors);
       }else{
         Diaspora.widgets.alert.alert('Failed to post message!');
       }
     });
 
-    $(".new_comment").live('ajax:success', function(data, json, xhr) {
+    $(stream_string + " .new_comment").live('ajax:success', function(data, json, xhr) {
       json = $.parseJSON(json);
       WebSocketReceiver.processComment(json.post_id, json.comment_id, json.html, false);
     });
-    $(".new_comment").live('ajax:failure', function(data, html, xhr) {
+    $(stream_string + ".new_comment").live('ajax:failure', function(data, html, xhr) {
       Diaspora.widgets.alert.alert('Failed to post message!');
     });
 
@@ -151,6 +152,7 @@ var Stream = {
   },
 
   toggleComments: function(evt) {
+                    console.log("toggling");
     evt.preventDefault();
     var $this = $(this),
       text = $this.html(),
@@ -185,7 +187,7 @@ var Stream = {
       commentBlock.removeClass('hidden');
       commentBlock.find('textarea').focus();
     } else {
-      if(!(commentBlock.children().length > 1)){
+      if(commentBlock.children().length <= 1){
         commentBlock.addClass('hidden');
       } else {
         commentBlock.find('textarea').focus();
diff --git a/spec/javascripts/embedder-spec.js b/spec/javascripts/embedder-spec.js
index d63407593..a2ac821fa 100644
--- a/spec/javascripts/embedder-spec.js
+++ b/spec/javascripts/embedder-spec.js
@@ -34,7 +34,7 @@ describe("Diaspora", function() {
       describe("embed", function() {
         beforeEach(function() {
           $("#jasmine_content").html(
-              '<div class="stream">' +
+              '<div class="stream" id="main_stream">' +
                   '<a href="#video" class="video-link" data-host="youtube.com" data-video-id="asdf">' +
                   'spec video' +
                   '</a>' +
@@ -42,10 +42,11 @@ describe("Diaspora", function() {
               );
         });
 
-        it("delegates '.stream a.video-link'", function() {
-          spyOn($.fn, "delegate");
+        it("attackes onVideoLinkClicked to a.video-link'", function() {
+          spyOn(Diaspora.widgets.embedder, "onVideoLinkClicked");
           Diaspora.widgets.embedder.start();
-          expect($.fn.delegate).toHaveBeenCalledWith("a.video-link", "click", Diaspora.widgets.embedder.onVideoLinkClicked);
+          $("a.video-link:first").click();
+          expect(Diaspora.widgets.embedder.onVideoLinkClicked).toHaveBeenCalled();
         });
       });
 
diff --git a/spec/javascripts/stream-spec.js b/spec/javascripts/stream-spec.js
index 4d2bc64a9..4779891c4 100644
--- a/spec/javascripts/stream-spec.js
+++ b/spec/javascripts/stream-spec.js
@@ -4,59 +4,62 @@
  */
 
 describe("Stream", function() {
+  beforeEach(function() {
+    jasmine.Clock.useMock();
+    $('#jasmine_content').html(
+      '<div class="stream" id="main_stream">' +
+      '<li class="stream_element" data-guid="4ceef7ba2367bc2e4d0001e9">' +
+        '<div class="content">' +
+          '<div class="info">' +
+            '<a href="#" class="show_post_comments">show comments (0)</a>' +
+          '</div>' +
+          '<ul class="comments hidden" id="4ceef7ba2367bc2e4d0001e9">' +
+            '<li class="comment show">' +
+              '<form accept-charset="UTF-8" action="/comments" class="new_comment" data-remote="true" id="new_comment_on_4ceef7ba2367bc2e4d0001e9" method="post">' +
+                '<div style="margin:0;padding:0;display:inline">' +
+                  '<p>' +
+                    '<label for="comment_text_on_4ceef7ba2367bc2e4d0001e9">Comment</label>' +
+                    '<textarea class="comment_box" id="comment_text_on_4ceef7ba2367bc2e4d0001e9" name="text" rows="1"></textarea>' +
+                  '</p>' +
+                  '<input id="post_id_on_4ceef7ba2367bc2e4d0001e9" name="post_id" type="hidden" value="4ceef7ba2367bc2e4d0001e9">' +
+                  '<input class="comment_submit button" data-disable-with="Commenting..." id="comment_submit_4ceef7ba2367bc2e4d0001e9"  name="commit" type="submit" value="Comment">' +
+                '</div>' +
+              '</form>' +
+            '</li>' +
+          '</ul>' +
+        '</div>' +
+      '</li>' +
+      '</div>'
+    );
+  });
 
   describe("initialize", function() {
     it("attaches a click event to show_post_comments links", function() {
-      spyOn($.fn, "delegate");
+      spyOn(Stream, "toggleComments");
       Stream.initialize();
-      expect($.fn.delegate).toHaveBeenCalledWith(
-        "a.show_post_comments", "click", Stream.toggleComments);
+      $('.stream a.show_post_comments').click();
+      expect(Stream.toggleComments).toHaveBeenCalled();
     });
   });
 
   describe("toggleComments", function() {
-
-    beforeEach(function() {
-      jasmine.Clock.useMock();
-      $('#jasmine_content').html(
-        '<div class="stream">' +
-        '<li class="stream_element" data-guid="4ceef7ba2367bc2e4d0001e9">' +
-          '<div class="content">' +
-            '<div class="info">' +
-              '<a href="#" class="show_post_comments">show comments (0)</a>' +
-            '</div>' +
-            '<ul class="comments hidden" id="4ceef7ba2367bc2e4d0001e9">' +
-              '<li class="comment show">' +
-                '<form accept-charset="UTF-8" action="/comments" class="new_comment" data-remote="true" id="new_comment_on_4ceef7ba2367bc2e4d0001e9" method="post">' +
-                  '<div style="margin:0;padding:0;display:inline">' +
-                    '<p>' +
-                      '<label for="comment_text_on_4ceef7ba2367bc2e4d0001e9">Comment</label>' +
-                      '<textarea class="comment_box" id="comment_text_on_4ceef7ba2367bc2e4d0001e9" name="text" rows="1"></textarea>' +
-                    '</p>' +
-                    '<input id="post_id_on_4ceef7ba2367bc2e4d0001e9" name="post_id" type="hidden" value="4ceef7ba2367bc2e4d0001e9">' +
-                    '<input class="comment_submit button" data-disable-with="Commenting..." id="comment_submit_4ceef7ba2367bc2e4d0001e9"  name="commit" type="submit" value="Comment">' +
-                  '</div>' +
-                '</form>' +
-              '</li>' +
-            '</ul>' +
-          '</div>' +
-        '</li>' +
-        '</div>'
-      );
+    beforeEach(function(){
+      jQuery('#main_stream a.show_post_comments:not(.show)').die();
       Stream.initialize();
     });
-
     it("toggles class hidden on the comment block", function () {
-      expect($('ul.comments')).toHaveClass("hidden");
+      expect(jQuery('ul.comments')).toHaveClass("hidden");
+      console.log("AAAAAH");
       $("a.show_post_comments").click();
+      console.log("done");
       jasmine.Clock.tick(200);
-      expect($('ul.comments')).not.toHaveClass("hidden");
+      expect(jQuery('ul.comments')).not.toHaveClass("hidden");
     });
 
     it("changes the text on the show comments link", function() {
       $("a.show_post_comments").click();
       jasmine.Clock.tick(200);
       expect($("a.show_post_comments").text()).toEqual("hide comments (0)");
-    })
+    });
   });
 });