call-list-view-spec.coffee

describe "CallListView", ->
  beforeEach ->
    $template = inject('<script id="call-list-template" type="text/html"></script>')
    $template.html('HTML <b>for</b> <%= foo %>')

    @model = jasmine.createSpyObj('CallList',['bind','moveUp','toJSON'])
    @subject = new CallListView model: @model

  describe "events", ->
    it "binds to up-arrow clicks", ->
      expect(@subject.events).toEqual "click .up-arrow": 'moveUp'

  describe "#moveUp", ->
    beforeEach ->
      $upArrow = $(@subject.el).inject('up-arrow').text('C')
      @subject.moveUp target: $upArrow[0]

    it "tells the model to move up the arrow's text", ->
      expect(@model.moveUp).toHaveBeenCalledWith 'C'

  describe "#render", ->
    beforeEach ->
      @model.toJSON.andReturn foo: "bar"

      @subject.render()

    it "renders the template with the model's JSON", ->
      expect($(@subject.el)).toHaveHtml('HTML <b>for</b> bar')

call-list-view.coffee

class CallListView extends Backbone.View
  events:
    "click .up-arrow": "moveUp"

  initialize: ->
    @template = _.template($('#call-list-template').html())

  moveUp: (e) ->
    @model.moveUp $(e.target).text()

  render: ->
    $(@el).html(@template(@model.toJSON()))