testing books.js with JasmineRice

Gemfile

@@ -41,3 +41,7 @@ group :test do
   gem 'shoulda'
 end
 
+group :development, :test do
+  gem 'jasminerice'
+end
+

Gemfile.lock

@@ -79,13 +79,16 @@ GEM
     guard-test (0.4.3)
       guard (>= 0.4)
       test-unit (~> 2.2)
+    haml (3.1.4)
     heroku (2.14.0)
       launchy (>= 0.3.2)
       rest-client (~> 1.6.1)
       rubyzip
       term-ansicolor (~> 1.0.5)
     hike (1.2.1)
     i18n (0.6.0)
+    jasminerice (0.0.8)
+      haml
     jquery-rails (1.0.17)
       railties (~> 3.0)
       thor (~> 0.14)
@@ -173,6 +176,7 @@ DEPENDENCIES
   guard-test
   heroku
   isbn_validator!
+  jasminerice
   jquery-rails
   json
   pg

app/assets/javascripts/books.js

@@ -1,20 +1,16 @@
 $(function() {
-  var searchForm = $('#search-form');
-  var searchField = $('#query');
-  var checkedRadio = $('.query-by:checked');
 
-  searchField.attr('placeholder', 'Search by '+$(checkedRadio).val());
-
-  $('.query-by').live('click', function() {
+  $(document).on('click', '.query-by', function() {
     var value = $(this).val();
+    var searchField = $('#query');
     searchField.attr('placeholder', 'Search by '+value);
     if (searchField.val() !== '') {
-      searchForm.submit();
+      $('#search-form').submit();
     }
   });
 
-  searchForm.live('ajax:success', function(evt, data, status, xhr) {
+  $(document).on('ajax:success', '#search-form', function(evt, data, status, xhr) {
     $('#book-list').html(data);
   });
 
-});
+});

app/assets/javascripts/reservations.js

@@ -1,6 +1,6 @@
 $(function() {
 
-  $('.reserve-link').live('ajax:success', function(evt, data, status, xhr) {
+  $(document).on('ajax:success', '.reserve-link', function(evt, data, status, xhr) {
     $('#reservation-form').hide();
     $('#reservation-status').html('<span class="label important">Reserved by '+data.user.email+'</span>');
     $('#reservation-links').html('<a href="/books/'+data.book_id+'/reservations/'+data.id+'/free" class="btn" data-method="put">Free</a>');

spec/javascripts/books_spec.js

@@ -0,0 +1,43 @@
+//= require books
+
+describe("books.js", function() {
+
+  beforeEach(function() {
+    loadFixtures("book_search");
+  });
+
+  it("should set the search field placeholder to match the value of a clicked radio", function() {
+    $('#query-by-isbn').click();
+
+    expect($('#query').attr('placeholder')).toEqual("Search by isbn");
+  });
+
+  it("should submit the search form when a radio is clicked, if the search field is not empty", function() {
+    var submitSpy = jasmine.createSpy().andReturn(false);
+    $('#search-form').on('submit', submitSpy);
+
+    $('#query').val('my search term');
+    $('#query-by-isbn').click();
+
+    expect(submitSpy).toHaveBeenCalled();
+  });
+
+  it("should not submit the search form when a radio is clicked, if the search field is empty", function() {
+    var submitSpy = jasmine.createSpy().andReturn(false);
+    $('#search-form').on('submit', submitSpy);
+
+    $('#query').val('');
+    $('#query-by-isbn').click();
+
+    expect(submitSpy).not.toHaveBeenCalled();
+  });
+
+  it("should replace the contents of the book list when the search form gets a response", function() {
+    var newHtml = "<h2>New contents</h2>";
+
+    $('#search-form').trigger('ajax:success', newHtml);
+
+    expect($('#book-list').html()).toEqual(newHtml);
+  });
+
+});

spec/javascripts/fixtures/book_search.html

@@ -0,0 +1,10 @@
+<form id="search-form">
+  <input id="query" type="search" placeholder="Initial">
+
+  <input id="query-by-title" class="query-by" type="radio" value="title" checked>
+  <input id="query-by-isbn" class="query-by" type="radio" value="isbn">
+
+</form>
+
+<div id="book-list">
+</div>

spec/javascripts/spec.js

@@ -0,0 +1,3 @@
+//= require jquery
+//= require jquery_ujs
+//= require_tree ./