[Seminar] Guide lines

application.js

//= require jquery
//= require jquery_ujs
//= require_tree .

var Subscriptor = {
  cleanEmail: function(email){
    return $.trim(email)
  },
  validEmail: function(email){
    email = this.cleanEmail(email);
    regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;                                     
    return regex.test(email);
  }
} 

jQuery.fn.validateEmail = function(){                                                                 
  return this.each(function () {
    $(this).blur(function () { 
      if (!Subscriptor.validEmail(this.value)) {                                                      
        $("#" + this.id + "_error").text("Invalid email address!");                                   
      } 
      else{                                                                                           
        $("#" + this.id + "_error").text("");                                                         
      } 
    });                                                                                               
  });
} 

$(function () {                                                                                       
  $("#subscription_email").validateEmail();                                                           
});

Gemfile.rb

source 'https://rubygems.org'

gem 'rails', '3.2.11'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'
  
gem 'sqlite3'


# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'

  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  # gem 'therubyracer', :platforms => :ruby

  gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-rails'


group :development, :test do
  gem 'jasmine'
  gem "jasminerice"
  gem 'guard-coffeescript'
  gem "guard-jasmine"
  gem 'rb-inotify', '~> 0.9'

end
~   

Guard.rb

guard :jasmine do
  watch(%r{spec/javascripts/spec\.(js\.coffee|js|coffee)$}) { 'spec/javascripts' }
  watch(%r{spec/javascripts/.+_spec\.(js\.coffee|js|coffee)$})
  watch(%r{spec/javascripts/fixtures/.+$})
  watch(%r{app/assets/javascripts/(.+?)\.(js\.coffee|js|coffee)(?:\.\w+)*$}) { |m| "spec/javascripts/#{ m[1] }_spec.#{ m[2] }" }
end

guard 'coffeescript', :input => 'app/assets/javascripts'

Steps.md

New project

rails new jstest

add needed gems

gem 'jasmine'
gem "jasminerice"
gem "guard-jasmine"
gem 'guard-coffeescript'
gem 'rb-inotify', '~> 0.9'

bundle

rails g jasmine:install

setup jasmine

src_dir: public/javascripts/compiled
src_files:
  - '**/*.js'
spec_dir: spec/javascripts/compiled
spec_files:
  - '**/*_spec.js'

Guard related

Download Phantomjs

Init Jasmine and Coffeescript for Guard

$ guard init

Create spec/javascript/spec.js

//= require application
//= require_tree .

Create spec/javascripts/spec.css

/*
 *= require application
 */

RUN Guard

guard

Scaffold

rails g scaffold subscription email
rake db:migrate

write test to check email trim

write code to make it pass

download jasmine jquery

curl https://raw.github.com/velesin/jasmine-jquery/master/lib/jasmine-jquery.js > spec/javascripts/helpers/jasmine_jquery.js

create fixtures/subscription_form.html

mkdir spec/javascripts/fixtures
vim fixtures/subscription_form.html

<form id="subscription_form" action="">
  <input id="email" type="" />
  <span id="email_error"></span>
</form>

---

Refs:

https://github.com/netzpirat/guard-jasmine

https://github.com/velesin/jasmine-jquery

http://railscasts.com/episodes/261-testing-javascript-with-jasmine

subscriptions_spec.coffee

describe "Subscriptions", ->
  describe "Register email", ->
    it "should trim white spaces", ->
      expect(1).toBe(1)
      expect(Subscriptor.cleanEmail(" [email protected] ")).toEqual("[email protected]")

    it "should accept valid email", ->
      email = "[email protected]"
      valid = Subscriptor.validEmail(email)
      expect(valid).toBeTruthy()

    it "should not accept invalid email", ->
      email = "test@example"
      valid = Subscriptor.validEmail(email)
      expect(valid).toBeFalsy()

    it "validates when email field loses focus", ->
      loadFixtures("subscription_form.html")
      $("#email").validateEmail()
      $("#email").val("21312@")
      $("#email").blur()
      expect($("#email_error")).toHaveText("Invalid email address!")

    it "should hide error message when email is valid", ->
      loadFixtures("subscription_form.html")
      $("#email").validateEmail()
      $("#email").val("abc")
      $("#email").blur()
      $("#email").val("[email protected]")
      $("#email").blur()
      expect($("#email_error")).toHaveText("")