inquiry_view.coffee

#Make stuff happy
(window.TestDouble = {}).Views = {}
JST = "backbone/templates/inquiry": -> 

class TestDouble.Views.InquiryView extends Backbone.View
  template: JST["backbone/templates/inquiry"]

  categories: [
    "build an application",
    "receive training",
    "talk with you"
  ]

  events: ->
    "submit *": "save"
    'change :input[name="category"]': "showSelectedCategory"
    'click .cancel': 'cancel'

  initialize: ->
    _.bindAll @  
    @collection.bind "add", @afterSending

  render: ->
    $(@el).html(@template({model: @model, view: @})).fadeIn(500)
    @showSelectedCategory()
    @

  save: (e) ->
    @model.set fullInquiryText: @printForm(@$('form'))
    @$('.send').attr('disabled','disabled').val('contacting...')
    super e

  afterSending: =>
    @cancel()
    $alert = $(JST['backbone/templates/inquiry_alert_success'](@model.toJSON())).prependTo('body');
    $alert.alert().delay(6000).slideUp(800);

  cancel: ->
    $(@el).fadeOut(300).html('')
    window.router.navigate '', true

  #private

  showSelectedCategory: ->
    selectedClass = @$(':input[name="category"] :selected').attr('class')
    window.router.navigate('inquiry/' + selectedClass)
    @$('.category').each (i,el) -> $(el).toggleClass('hidden',!$(el).hasClass(selectedClass))

inquiry_view_spec.coffee

describe "TestDouble.Views.InquiryView", ->
  Given -> spyOn(_, "bindAll")
  Given -> @collection = jasmine.createSpyObj('collection',['bind'])
  Given -> @model = jasmine.createSpyObj('model',['bind','get'])
  Given -> @subject = new TestDouble.Views.InquiryView
             collection: @collection
             model: @model

  Then -> expect(@subject.template).toBe(JST["backbone/templates/inquiry"])
  Then -> expect(@subject.categories).toEqual [
    "build an application",
    "receive training",
    "talk with you"]

  context "binding stuff", ->
    Then -> expect(_.bindAll).toHaveBeenCalledWith @subject
    Then -> expect(@collection.bind).toHaveBeenCalledWith "add", @subject.afterSending

  describe "#render", ->
    Given -> window.router = jasmine.createSpyObj('router',['navigate'])
    
    describe "basic rendering", ->
      HTML = '<div>foo</div>'
      Given -> spyOn($.fn, "fadeIn")
      Given -> spyOn(@subject, "template").when(model: @model, view: @subject).thenReturn HTML
      When -> @result = @subject.render()
      Then -> expect($(@subject.el)).toHaveHtml HTML
      Then -> expect($.fn.fadeIn).toHaveBeenCalledWith(500)
      Then -> @result == @subject

    describe "showing the selected category's fields", ->
      CATEGORY_NAME='foo'
      OTHER_CATEGORY_NAME='bar'
      Given -> @$container = inject('main')
      Given -> @$selectedCategory = @$container.inject("category #{CATEGORY_NAME}")
      Given -> @$otherCategory = @$container.inject("category #{OTHER_CATEGORY_NAME}")
      Given -> @$select = @$container.inject({el:'select',attrs:{name:'category'}})
      Given -> @$select.inject({el:'option', cssClass: CATEGORY_NAME, attrs:{selected: 'selected'}})
      Given -> spyOn(@subject, "template").andReturn(@$container)
      When -> @subject.render()
      Then -> expect(window.router.navigate).toHaveBeenCalledWith("inquiry/#{CATEGORY_NAME}")
      Then -> expect(@$selectedCategory).not.toHaveClass('hidden')
      Then -> expect(@$otherCategory).toHaveClass('hidden')

  describe "#save", ->
  describe "#afterSending", ->
  describe "#cancel", ->