Testing Your JavaScript & CoffeeScript

TESTING RICH *SCRIPT APPLICATIONS WITH RAILS

@markbates

Monday, February 25, 13

http://www.metacasts.tvCONFOO2013

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

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

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

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

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

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

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

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

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

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

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+ =

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

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

Testing Your JavaScript & CoffeeScript

Technology

CoffeeScript, the Rise of "Build Your Own JavaScript"

CoffeeScript - The Beautiful Way to Write Javascript

JavaScript, Dart, TypeScript & CoffeeScript Comparison

Workshop 5: JavaScript testing

Javascript testing IAD2010

Automatizacion Unit Testing Javascript

C o m p u ter Sc ie n ce Edu ca tio n W e ek W ri t e R E ...A taste of CoffeeScript CodeMonkey uses the programming language of CoffeeScript. Coffeescript is similar to JavaScript

Automatización Unit Testing Javascript

Coffeescript: No really, it's just Javascript

Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine

Testing javascript-fronttrends-2010

CoffeeScript - mvolkmann.github.io · CoffeeScript Endorsed By Brendan Eich - Mozilla creator of JavaScript “CoffeeScript is well done and more convenient to use than JS, provided

JavaScript Testing: Mocha + Chai

With SQL Michael Pace & Jerome Martinez. What is CoffeeScript? CoffeeScript is a language that compiles to JavaScript. Therefore, it can be used to interact

Adventures In JavaScript Testing

Unit Testing with JavaScript

TypeScript, Dart, CoffeeScript and JavaScript Comparison

Automated javascript unit testing

Smooth CoffeeScript - GitHub Pages · Foreword CoffeeScript is a lucid evolution of JavaScript created by Jeremy Ashke-nas. This book attempts to be an evolution of “Eloquent JavaScript”

Testing in JavaScript