Screencast: JavaScript mit Jasmine testen

Jasmine ist ein BDD-Testframework um JavaScript zu testen. Es ist für die Tests nicht auf DOM angewiesen und hat auch keine Abhängigkeiten zu anderen Frameworks. Ryan zeigt wie es in Kombination mit Rails eingesetzt werden kann.

 

Download:

Download(24.8 MB, 15:20)
Alternativer Download für iPod & Apple TV(25.3 MB, 15:20)

 

Resourcen:

 

Quellcode:

[bash]
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
[/bash]

[ruby]
# Gemfile
gem ‚jasmine‘, :group => [:development, :test]
[/ruby]

[javascript]
/* credit_card_spec.js */

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("");
});
});

/* credit_card.js */
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);

/* applicaiton.js */
$(function() {
$("#order_credit_card_number").validateCreditCardNumber();
});
[/javascript]

[html]
<!– orders/_form.html.erb –>
<%= f.text_field :credit_card_number %>
<span id="order_credit_card_number_error"></span>
[/html]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.