Refactor posting status into a view

esimionato · May 14, 2012 · 30baae5 · 30baae5
1 parent aaae43f
commit 30baae5
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 5 deletions.
diff --git a/public/index.html b/public/index.html
@@ -9,6 +9,7 @@
   <script src="js/setup.js"></script>
   <script src="js/models/status.js"></script>
   <script src="js/collections/statuses.js"></script>
+  <script src="js/views/post_status.js"></script>
   <script src="js/app.js"></script>
 </head>
 <body>
@@ -18,7 +19,7 @@
         <a class="brand" href="#">Monologue</a>
     </div>
   </div>
-  <form class="row">
+  <form id="new-status" class="row">
     <label for="status_text">Status</label>
     <textarea id="status_text" name="status" placeholder="What are your inner most thoughts?"></textarea>
     <button type="submit" class="btn">Post Update</button>

diff --git a/public/js/app.js b/public/js/app.js
@@ -1,10 +1,7 @@
 jQuery(function($) {
   var statuses = new Monologue.Collection.Statuses();
 
-  $('form').on('submit', function() {
-    statuses.create({text: $(this).find('textarea').val()});
-    return false;
-  });
+  new Monologue.View.PostStatus({el: $('#new-status'), collection: statuses});
 
   var append = function(status) {
     $('#statuses').append('<li>' + status.get('text') + '</li>');

diff --git a/public/js/views/post_status.js b/public/js/views/post_status.js
@@ -0,0 +1,18 @@
+// View to manage posting a new status.
+//
+// Dependencies:
+// * el - A form element with a textarea
+// * collection - the collection that the status will be created in
+Monologue.View.PostStatus = Backbone.View.extend({
+  events: {
+    "submit": "submit"
+  },
+
+  submit: function(e) {
+    e.preventDefault();
+    var $input = this.$el.find('textarea');
+    this.collection.create({text: $input.val()});
+    $input.val('');
+    return false;
+  }
+});
diff --git a/spec/views/post_status_spec.js b/spec/views/post_status_spec.js
@@ -0,0 +1,26 @@
+require('/js/views/post_status.js');
+
+describe("Monologue.View.PostStatus", function() {
+  var view, $el, collection;
+
+  beforeEach(function() {
+    $el = $("<form><textarea>See, it's not so hard!</textarea></form>");
+    collection = new (Backbone.Collection.extend({url: '/mock'}));
+    // prevent collection from trying to sync with the server
+    spyOn(collection, 'create');
+
+    view = new Monologue.View.PostStatus({el: $el, collection: collection});
+  });
+
+  describe("submitting the form", function() {
+    it("creates status when submitting form", function() {
+      $el.trigger('submit');
+      expect(collection.create).toHaveBeenCalledWith({text: "See, it's not so hard!"});
+    });
+
+    it("clears the textarea", function() {
+      $el.trigger('submit');
+      expect($el.find('textarea').val()).toEqual('');
+    });
+  });
+});