stream.js now semi-split into functions (still needs work); specs for toggling comments

public/javascripts/stream.js

@@ -1,52 +1,40 @@
 /*   Copyright (c) 2010, Diaspora Inc.  This file is
-*   licensed under the Affero General Public License version 3 or later.  See
+ *   licensed under the Affero General Public License version 3 or later.  See
-*   the COPYRIGHT file.
+ *   the COPYRIGHT file.
-*/
+ */
 
-
+var Stream = {
-$(document).ready(function(){
+  initialize: function() {
     var $stream = $(".stream");
     var $publisher = $("#publisher");
 
-  // comment toggle action
+    $stream.not(".show").delegate("a.show_post_comments", "click", Stream.toggleComments);
-  $stream.not(".show").delegate("a.show_post_comments", "click", function(evt) {
-    evt.preventDefault();
-    var $this = $(this),
-      text = $this.html(),
-      commentBlock = $this.closest("li").find("ul.comments", ".content"),
-      show = (text.indexOf("show") != -1);
-
-    commentBlock.fadeToggle(150, function(){
-      commentBlock.toggleClass("hidden");
-    });
-    $this.html(text.replace((show) ? "show" : "hide", (show) ? "hide" : "show"));
-  });
 
     // comment submit action
-  $stream.delegate("a.comment_submit", "click", function(evt){
+    $stream.delegate("a.comment_submit", "click", function(evt) {
       $(this).closest("form").children(".comment_box").attr("rows", 1);
     });
 
-  $stream.delegate("textarea.comment_box", "focus", function(evt){
+    $stream.delegate("textarea.comment_box", "focus", function(evt) {
       var commentBox = $(this);
       commentBox.attr("rows", 2)
         .closest("form").find(".comment_submit").fadeIn(200);
     });
 
-  $stream.delegate("textarea.comment_box", "blur", function(evt){
+    $stream.delegate("textarea.comment_box", "blur", function(evt) {
       var commentBox = $(this);
-    if( !commentBox.val() ) {
+      if (!commentBox.val()) {
         commentBox.attr("rows", 1)
           .closest("form").find(".comment_submit").hide();
       }
     });
 
     // reshare button action
-  $stream.delegate(".reshare_button", "click", function(evt){
+    $stream.delegate(".reshare_button", "click", function(evt) {
       evt.preventDefault();
       button = $(this)
       box = button.siblings(".reshare_box");
-    if(box.length > 0){
+      if (box.length > 0) {
         button.toggleClass("active");
         box.toggle();
       }
@@ -60,26 +48,26 @@ $(document).ready(function(){
         $container = $(container).attr("class", "video-container"),
         $videoContainer = $this.parent().siblings("div.video-container");
 
-    if($videoContainer.length > 0) {
+      if ($videoContainer.length > 0) {
         $videoContainer.slideUp('fast', function () {
           $videoContainer.detach();
         });
         return;
       }
 
-    if($("div.video-container").length > 0) {
+      if ($("div.video-container").length > 0) {
         $("div.video-container").slideUp("fast", function() {
           $(this).detach();
         });
       }
 
-    if($this.data("host") === "youtube.com") {
+      if ($this.data("host") === "youtube.com") {
         $container.html(
           '<a href="//www.youtube.com/watch?v=' + $this.data("video-id") + '" target="_blank">Watch this video on Youtube</a><br />' +
-        '<iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/' + $this.data("video-id")+ '"></iframe>'
+            '<iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/' + $this.data("video-id") + '"></iframe>'
           );
       } else {
-      $container.html('Invalid videotype <i>'+$this.data("host")+'</i> (ID: '+$this.data("video-id")+')');
+        $container.html('Invalid videotype <i>' + $this.data("host") + '</i> (ID: ' + $this.data("video-id") + ')');
       }
 
       $container.hide()
@@ -93,20 +81,35 @@ $(document).ready(function(){
       });
     });
 
-  $(".new_status_message").bind('ajax:success', function(data, json, xhr){
+    $(".new_status_message").bind('ajax:success', function(data, json, xhr) {
       json = $.parseJSON(json);
-    WebSocketReceiver.addPostToStream(json['post_id'],json['html']);
+      WebSocketReceiver.addPostToStream(json['post_id'], json['html']);
     });
-  $(".new_status_message").bind('ajax:failure', function(data, html, xhr){
+    $(".new_status_message").bind('ajax:failure', function(data, html, xhr) {
       alert('failed to post message!');
     });
 
-  $(".new_comment").live('ajax:success', function(data, json, xhr){
+    $(".new_comment").live('ajax:success', function(data, json, xhr) {
       json = $.parseJSON(json);
-    WebSocketReceiver.processComment(json['post_id'],json['comment_id'],json['html'],false);
+      WebSocketReceiver.processComment(json['post_id'], json['comment_id'], json['html'], false);
     });
-  $(".new_comment").live('ajax:failure', function(data, html, xhr){
+    $(".new_comment").live('ajax:failure', function(data, html, xhr) {
       alert('failed to post message!');
     });
+  },
 
-});
+  toggleComments: function(evt) {
+    evt.preventDefault();
+    var $this = $(this),
+      text = $this.html(),
+      commentBlock = $this.closest("li").find("ul.comments", ".content"),
+      show = (text.indexOf("show") != -1);
+
+    commentBlock.fadeToggle(150, function() {
+      commentBlock.toggleClass("hidden");
+    });
+    $this.html(text.replace((show) ? "show" : "hide", (show) ? "hide" : "show"));
+  }
+};
+
+$(document).ready(Stream.initialize);

spec/javascripts/stream-spec.js

@@ -0,0 +1,58 @@
+/*   Copyright (c) 2010, Diaspora Inc.  This file is
+ *   licensed under the Affero General Public License version 3 or later.  See
+ *   the COPYRIGHT file.
+ */
+
+describe("Stream", function() {
+
+  describe("initialize", function() {
+    it("attaches a click event to show_post_comments links", function() {
+      spyOn($.fn, "delegate");
+      Stream.initialize();
+      expect($.fn.delegate).toHaveBeenCalledWith(
+        "a.show_post_comments", "click", Stream.toggleComments);
+    });
+  });
+
+  describe("toggleComments", function() {
+
+    beforeEach(function() {
+      $('#jasmine_content').html(
+        '<li class="message" 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>'
+      );
+    });
+    it("toggles class hidden on the comment block", function () {
+      expect($('ul.comments')).toHaveClass("hidden");
+      $("a.show_post_comments").click();
+      setTimeout(function() {
+        expect($('ul.comments')).not.toHaveClass("hidden");
+      }, 250);
+    });
+    it("changes the text on the show comments link", function() {
+      $("a.show_post_comments").click();
+      setTimeout(function() {
+        expect($("a.show_post_comments").text()).toEqual("hide comments (0)");
+      }, 250);
+    })
+  });
+});

spec/javascripts/support/jasmine.yml

@@ -19,6 +19,7 @@ src_files:
   - public/javascripts/aspect-edit.js
   - public/javascripts/aspect-contacts.js
   - public/javascripts/web-socket-receiver.js
+  - public/javascripts/stream.js
 
 # stylesheets
 #