Testing Your JavaScript & CoffeeScript

TESTING RICH *SCRIPT APPLICATIONS WITH RAILS

@markbates

Monday, February 25, 13


http://www.metacasts.tvCONFOO2013


http://www.metacasts.tv





Finished in 4.41041 seconds108 examples, 0 failures




A QUICK POLL



app/models/todo.rbclass Todo < ActiveRecord::Base

validates :body, presence: true

attr_accessible :body, :completed

end


spec/models/todo_spec.rbrequire 'spec_helper'

describe Todo do

it "requires a body" do todo = Todo.new todo.should_not be_valid todo.errors[:body].should include("can't be blank") todo.body = "Do something" todo.should be_valid end

end


app/controllers/todos_controller.rbclass TodosController < ApplicationController respond_to :html, :json

def index respond_to do |format| format.html {} format.json do @todos = Todo.order("created_at asc") respond_with @todos end end end

def show @todo = Todo.find(params[:id]) respond_with @todo end

def create @todo = Todo.create(params[:todo]) respond_with @todo end

def update @todo = Todo.find(params[:id]) @todo.update_attributes(params[:todo]) respond_with @todo end

def destroy @todo = Todo.find(params[:id]) @todo.destroy respond_with @todo end

end


spec/controllers/todos_controller_spec.rbrequire 'spec_helper'

describe TodosController do

let(:todo) { Factory(:todo) }

describe 'index' do context "HTML" do it "renders the HTML page" do get :index

response.should render_template(:index) assigns(:todos).should be_nil end

end

context "JSON" do it "returns JSON for the todos" do get :index, format: "json"

response.should_not render_template(:index) assigns(:todos).should_not be_nil end

end

end

describe 'show' do context "JSON" do it "returns the todo" do get :show, id: todo.id, format: 'json'

response.should be_successful response.body.should eql todo.to_json end

end

end

describe 'create' do context "JSON" do it "creates a new todo" do expect { post :create, todo: {body: "do something"}, format: 'json'

response.should be_successful }.to change(Todo, :count).by(1) end

it "responds with errors" do expect { post :create, todo: {}, format: 'json'

response.should_not be_successful json = decode_json(response.body) json.errors.should have(1).error json.errors.body.should include("can't be blank") }.to_not change(Todo, :count) end

end

end

describe 'update' do context "JSON" do it "updates a todo" do put :update, id: todo.id, todo: {body: "do something else"}, format: 'json'

response.should be_successful todo.reload todo.body.should eql "do something else" end

it "responds with errors" do put :update, id: todo.id, todo: {body: ""}, format: 'json'

response.should_not be_successful json = decode_json(response.body) json.errors.should have(1).error json.errors.body.should include("can't be blank") end

end

end

describe 'destroy' do context "JSON" do it "destroys the todo" do todo.should_not be_nil expect { delete :destroy, id: todo.id, format: 'JSON' }.to change(Todo, :count).by(-1) end

end

end

end


app/views/todos/index.html.erb<form class='form-horizontal' id='todo_form'></form>

<ul id='todos' class="unstyled"></ul>

<script> $(function() { new OMG.Views.TodosApp(); })</script>


SO WHERE’S THE CODE?


app/assets/javascripts/views/todo_view.js.coffeeclass OMG.Views.TodoView extends OMG.Views.BaseView

tagName: 'li' template: JST['todos/_todo']

events: 'change [name=completed]': 'completedChecked' 'click .delete': 'deleteClicked'

initialize: -> @model.on "change", @render @render()

render: => $(@el).html(@template(todo: @model)) if @model.get("completed") is true @$(".todo-body").addClass("completed") @$("[name=completed]").attr("checked", true) return @

completedChecked: (e) => @model.save(completed: $(e.target).attr("checked")?)

deleteClicked: (e) => e?.preventDefault() if confirm("Are you sure?") @model.destroy() $(@el).remove()


HOW DO WE TEST THIS?


CAPYBARA?


CAPYBARA?XMonday, February 25, 13

Mocha Chai+ =


Mocha Chai+ =




JavaScript example:

CoffeeScript example:

describe('panda', function(){ it('is happy', function(){ panda.should.be("happy") });});

describe 'panda', -> it 'is happy', -> panda.should.be("happy")



EXPECT/SHOULD/ASSERTexpect(panda).to.be('happy')panda.should.be("happy")assert.equal(panda, 'happy')

expect(foo).to.be.truefoo.should.be.trueassert.isTrue(foo)

expect(foo).to.be.nullfoo.should.be.nullassert.isNull(foo)

expect([]).to.be.empty[].should.be.emptyassert.isEmpty([])



ASSERTIONS/MATCHERS• to (should)

• be

• been

• is

• that

• and

• have

• with

• .deep

• .a(type)

• .include(value)

• .ok

• .true

• .false

• .null

• .undefined

• .exist

• .empty

• .equal (.eql)

• .above(value)

• .below(value)

• .within(start, finish)

• .instanceof(constructor)

• .property(name, [value])

• .ownProperty(name)

• .length(value)

• .match(regexp)

• .string(string)

• .keys(key1, [key2], [...])

• .throw(constructor)

• .respondTo(method)

• .satisfy(method)

• .closeTo(expected, delta)


MOCHA/CHAI WITH RAILS

• gem 'konacha'

• gem 'poltergiest' (brew install phantomjs)


config/initializers/konacha.rbif defined?(Konacha) require 'capybara/poltergeist' Konacha.configure do |config| config.spec_dir = "spec/javascripts" config.driver = :poltergeist endend


rake konacha:serve




LET’S WRITE A TEST!


spec/javascripts/spec_helper.coffee# Require the appropriate asset-pipeline files:#= require application

# Any other testing specific code here...# Custom matchers, etc....

# Needed for stubbing out "window" properties# like the confirm dialogKonacha.mochaOptions.ignoreLeaks = true

beforeEach -> @page = $("#konacha")


app/assets/javascript/greeter.js.coffeeclass @Greeter

constructor: (@name) -> unless @name? throw new Error("You need a name!")

greet: -> "Hi #{@name}"


spec/javascripts/greeter_spec.coffee#= require spec_helper

describe "Greeter", ->

describe "initialize", -> it "raises an error if no name", -> expect(-> new Greeter()).to.throw("You need a name!") describe "greet", -> it "greets someone", -> greeter = new Greeter("Mark") greeter.greet().should.eql("Hi Mark")



NOW THE HARD STUFF



chai-jqueryhttps://github.com/chaijs/chai-jquery


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


MATCHERS• .attr(name[, value])

• .data(name[, value])

• .class(className)

• .id(id)

• .html(html)

• .text(text)

• .value(value)

• .visible

• .hidden

• .selected

• .checked

• .disabled

• .exist

• .match(selector) / .be(selector)

• .contain(selector)

• .have(selector)


spec/javascripts/spec_helper.coffee

# Require the appropriate asset-pipeline files:#= require application#= require_tree ./support



beforeEach -> @page = $("#konacha")


app/assets/javascripts/views/todo_view.js.coffeeclass OMG.Views.TodoView extends OMG.Views.BaseView

tagName: 'li' template: JST['todos/_todo']

events: 'change [name=completed]': 'completedChecked' 'click .delete': 'deleteClicked'

initialize: -> @model.on "change", @render @render()

render: => $(@el).html(@template(todo: @model)) if @model.get("completed") is true @$(".todo-body").addClass("completed") @$("[name=completed]").attr("checked", true) return @

completedChecked: (e) => @model.save(completed: $(e.target).attr("checked")?)



spec/javascripts/views/todos/todo_view_spec.coffee#= require spec_helper

describe "OMG.Views.TodoView", -> beforeEach -> @collection = new OMG.Collections.Todos() @model = new OMG.Models.Todo(id: 1, body: "Do something!", completed: false) @view = new OMG.Views.TodoView(model: @model, collection: @collection) @page.html(@view.el)


spec/javascripts/views/todos/todo_view_spec.coffeedescribe "model bindings", -> it "re-renders on change", -> $('.todo-body').should.have.text("Do something!") @model.set(body: "Do something else!") $('.todo-body').should.have.text("Do something else!")


spec/javascripts/views/todos/todo_view_spec.coffeedescribe "displaying of todos", -> it "contains the body of the todo", -> $('.todo-body').should.have.text("Do something!")

it "is not marked as completed", -> $('[name=completed]').should.not.be.checked $('.todo-body').should.not.have.class("completed")

describe "completed todos", -> beforeEach -> @model.set(completed: true)

it "is marked as completed", -> $('[name=completed]').should.be.checked $('.todo-body').should.have.class("completed")


spec/javascripts/views/todos/todo_view_spec.coffeedescribe "checking the completed checkbox", -> beforeEach -> $('[name=completed]').should.not.be.checked $('[name=completed]').click()

it "marks it as completed", -> $('[name=completed]').should.be.checked $('.todo-body').should.have.class("completed")

describe "unchecking the completed checkbox", ->

beforeEach -> @model.set(completed: true) $('[name=completed]').should.be.checked $('[name=completed]').click() it "marks it as not completed", -> $('[name=completed]').should.not.be.checked $('.todo-body').should.not.have.class("completed")


app/assets/javascripts/todos/todo_view.coffeeclass OMG.Views.TodoView extends OMG.Views.BaseView

# ...



spec/javascripts/views/todos/todo_view_spec.coffeedescribe "clicking the delete button", ->

describe "if confirmed", ->

it "will remove the todo from the @page", -> @page.html().should.contain($(@view.el).html()) $(".delete").click() @page.html().should.not.contain($(@view.el).html())

describe "if not confirmed", ->

it "will not remove the todo from the @page", -> @page.html().should.contain($(@view.el).html()) $(".delete").click() @page.html().should.contain($(@view.el).html())




sinon.jshttp://sinonjs.org/




SINON.JS•spies•stubs•mocks•fake timers•fake XHR•fake servers•more


spec/javascripts/spec_helper.coffee# Require the appropriate asset-pipeline files:#= require application#= require support/sinon#= require_tree ./support



beforeEach -> @page = $("#konacha") @sandbox = sinon.sandbox.create()

afterEach -> @sandbox.restore()


spec/javascripts/views/todos/todo_view_spec.coffeedescribe "clicking the delete button", ->

describe "if confirmed", ->

beforeEach -> @sandbox.stub(window, "confirm").returns(true)

it "will remove the todo from the @page", -> @page.html().should.contain($(@view.el).html()) $(".delete").click() @page.html().should.not.contain($(@view.el).html())

describe "if not confirmed", ->

beforeEach -> @sandbox.stub(window, "confirm").returns(false) it "will not remove the todo from the @page", -> @page.html().should.contain($(@view.el).html()) $(".delete").click() @page.html().should.contain($(@view.el).html())


WHAT ABOUT AJAX REQUESTS?


app/assets/javascripts/views/todos/todo_list_view.js.coffeeclass OMG.Views.TodosListView extends OMG.Views.BaseView

el: "#todos"

initialize: -> @collection.on "reset", @render @collection.on "add", @renderTodo @collection.fetch()

render: => $(@el).html("") @collection.forEach (todo) => @renderTodo(todo)

renderTodo: (todo) => view = new OMG.Views.TodoView(model: todo, collection: @collection) $(@el).prepend(view.el)


spec/javascripts/views/todos/todo_list_view_spec.coffee#= require spec_helper

describe "OMG.Views.TodosListView", -> beforeEach -> @page.html("<ul id='todos'></ul>") @collection = new OMG.Collections.Todos() @view = new OMG.Views.TodosListView(collection: @collection) it "fetches the collection", -> @collection.should.have.length(2)

it "renders the todos from the collection", -> el = $(@view.el).html() el.should.match(/Do something!/) el.should.match(/Do something else!/)

it "renders new todos added to the collection", -> @collection.add(new OMG.Models.Todo(body: "Do another thing!")) el = $(@view.el).html() el.should.match(/Do another thing!/)



APPROACH #1MOCK RESPONSES


1. DEFINE TEST RESPONSE(S)


spec/javascripts/support/mock_responses.coffeewindow.MockServer ?= sinon.fakeServer.create()MockServer.respondWith( "GET", "/todos", [ 200, { "Content-Type": "application/json" }, ''' [ {"body":"Do something!","completed":false,"id":1}, {"body":"Do something else!","completed":false,"id":2} ]''' ])


2. RESPOND



describe "OMG.Views.TodosListView", -> beforeEach -> @page.html("<ul id='todos'></ul>") @collection = new OMG.Collections.Todos() @view = new OMG.Views.TodosListView(collection: @collection)

it "fetches the collection", -> @collection.should.have.length(2)





describe "OMG.Views.TodosListView", -> beforeEach -> @page.html("<ul id='todos'></ul>") @collection = new OMG.Collections.Todos() @view = new OMG.Views.TodosListView(collection: @collection) MockServer.respond() it "fetches the collection", -> @collection.should.have.length(2)





APPROACH #2 STUBBING



describe "OMG.Views.TodosListView (Alt.)", -> beforeEach -> @page.html("<ul id='todos'></ul>") @todo1 = new OMG.Models.Todo(id: 1, body: "Do something!") @todo2 = new OMG.Models.Todo(id: 2, body: "Do something else!") @collection = new OMG.Collections.Todos() @sandbox.stub @collection, "fetch", => @collection.add(@todo1, silent: true) @collection.add(@todo2, silent: true) @collection.trigger("reset") @view = new OMG.Views.TodosListView(collection: @collection) it "fetches the collection", -> @collection.should.have.length(2)

it "renders the todos from the collection", -> el = $(@view.el).html() el.should.match(new RegExp(@todo1.get("body"))) el.should.match(new RegExp(@todo2.get("body")))




rake konacha:run.........................


rake konacha:run SPEC=views/todos/todo_list_view_spec...



THANK YOU@markbates

http://www.metacasts.tvCONFOO2013




Technology

Testing Your JavaScript & CoffeeScript