#261 Testing JavaScript with Jasmine

bundle
rails g jasmine:install
rake jasmine
rake jasmine:ci
curl http://cloud.github.com/downloads/velesin/jasmine-jquery/jasmine-jquery-1.2.0.js > spec/javascripts/helpers/jasmine_jquery-1.2.0.js

gem 'jasmine', :group => [:development, :test]

describe("CreditCard", function() {
  it("cleans number by removing spaces and dashes", function() {
    expect(CreditCard.cleanNumber("123 4-5")).toEqual("12345");
  });
  
  it("validates based on mod 10", function() {
    expect(CreditCard.validNumber("4111 1111-11111111")).toBeTruthy();
    expect(CreditCard.validNumber("4111111111111121")).toBeFalsy();
  });
  
  it("validates when text field loses focus", function() {
    loadFixtures("order_form.html");
    $("#card_number").validateCreditCardNumber();
    $("#card_number").val("123");
    $("#card_number").blur();
    expect($("#card_number_error")).toHaveText("Invalid credit card number.");
    $("#card_number").val("4111 1111-11111111");
    $("#card_number").blur();
    expect($("#card_number_error")).toHaveText("");
  });
});

var CreditCard = {
  cleanNumber: function(number) {
    return number.replace(/[- ]/g, "");
  },
  
  validNumber: function(number) {
    var total = 0;
    number = this.cleanNumber(number);
    for (var i=number.length-1; i >= 0; i--) {
      var n = parseInt(number[i]);
      if ((i+number.length) % 2 == 0) {
        n = n*2 > 9 ? n*2 - 9 : n*2;
      }
      total += n;
    };
    return total % 10 == 0;
  }
};

(function($){
  $.fn.validateCreditCardNumber = function() {
    return this.each(function() {
      $(this).blur(function() {
        if (!CreditCard.validNumber(this.value)) {
          $("#" + this.id + "_error").text("Invalid credit card number.");
        } else {
          $("#" + this.id + "_error").text("");
        }
      });
    });
  };
})(jQuery);

$(function() {
  $("#order_credit_card_number").validateCreditCardNumber();
});

<%= f.text_field :credit_card_number %>
<span id="order_credit_card_number_error"></span>

<form>
  <input type="text" id="card_number">
  <div id="card_number_error"></div>
</form>