reference 'el' explicitly (render methods now return this instead of this.el); comment area focusing working again

app/views/templates/comment_stream.ujs

@@ -20,7 +20,7 @@
         <textarea class="comment_box" id="comment_text_on_<%= id %>" name="text" rows="2" />
       </p>
       <div class="submit_button">
-        <input class="comment_submit button creation" id="comment_submit_<%= id %>" name="commit" type="submit" value="Comment" />
+        <input class="button creation" id="comment_submit_<%= id %>" name="commit" type="submit" value="Comment" />
       </div>
     </form>
   </div>

app/views/templates/stream_element.ujs

@@ -38,12 +38,6 @@
 
       <div class="post-content"> </div>
 
-      <!--
-      <p class="post-text">
-        <%= text %>
-      </p>
-      -->
-
       <div class="info">
         <% if(provider_display_name != null) { %>
           <span class="via">

public/javascripts/app/views/commment_stream_view.js

@@ -39,7 +39,7 @@ App.Views.CommentStream = Backbone.View.extend({
   appendComment: function(comment) {
     this.$("ul.comments").append(new App.Views.Comment({
       model: comment
-    }).render());
+    }).render().el);
   }
 
 });

public/javascripts/app/views/post_view.js

@@ -1,5 +1,10 @@
 App.Views.Post = Backbone.View.extend({
 
+  events: {
+    "click .focus_comment_textarea": "focusCommentTextarea",
+    "focus .comment_box": "commentTextareaFocused"
+  },
+
   initialize: function(options) {
     this.model = options.model;
     this.template = _.template($("#stream-element-template").html());
@@ -12,9 +17,11 @@ App.Views.Post = Backbone.View.extend({
       App.user()
     )))[0];
 
+    this.delegateEvents(); //we need this because we are explicitly setting this.el in this.render()
+
     this.$(".comments").html(new App.Views.CommentStream({
       model: this.model
-    }).render());
+    }).render().el);
 
     this.renderPostContent();
 
@@ -32,5 +39,18 @@ App.Views.Post = Backbone.View.extend({
     this.$(".post-content").html(postView.render().el);
 
     return this;
+  },
+
+  focusCommentTextarea: function(evt){
+    evt.preventDefault();
+    this.$(".new_comment_form_wrapper").removeClass("hidden");
+    this.$(".comment_box").focus();
+
+    return this;
+  },
+
+  commentTextareaFocused: function(evt){
+    this.$("form").removeClass('hidden').addClass("open");
   }
+
 });

spec/javascripts/app/views/post_view_spec.js

@@ -0,0 +1,26 @@
+describe("App.views.Post", function(){
+
+  describe("#render", function(){
+    beforeEach(function(){
+      // should be jasmine helper
+      window.current_user = App.user({name: "alice", avatar : {small : "http://avatar.com/photo.jpg"}});
+
+      var posts = $.parseJSON(spec.readFixture("multi_stream_json"))["posts"][0];
+      spec.loadFixture("underscore_templates");
+
+      this.collection = new App.Collections.Stream(posts);
+      this.statusMessage = this.collection.models[0];
+
+      this.view = new App.Views.Post({model : this.statusMessage}).render();
+      this.statusElement = $(this.view.el)
+    })
+
+    context("comment clicking", function(){
+      it("shows the status message in the content area", function(){
+        console.log(this.statusElement);
+        //expect(this.statusElement).toBe("hella infos yo!")
+      })
+    })
+
+  })
+})