Question

Using chrome development tools. when I instantiate a view in the app I get this…

new job.SearchView
SearchView
  $el: jQuery.fn.jQuery.init[1]
  cid: "view8"
  el: HTMLDivElement
  mbti: function (){ return fn.apply(me, arguments); }
  options: Object
  __proto__: ctor

From with jasmine I get the following (and spec failure)

new job.SearchView
SearchView
  $el: jQuery.fn.jQuery.init[0]
  cid: "view17"
  el: undefined
  mbti: function (){ return fn.apply(me, arguments); }
  options: Object
  __proto__: ctor

Why would el: be undefined when instantiating in jasmine?

SearchView defined like this…

jQuery ->
  class SearchView extends Backbone.View
    el: '#search'
    template: JST['resume']
    <snip>
  @job = if window.job then window.job else {}
  @job.SearchView = SearchView

and the spec like this…

describe 'Search View', ->
  it 'should be defined', ->
    expect(job.SearchView).toBeDefined()
  beforeEach ->
    @view = new job.SearchView()
  describe 'render', ->
    it 'should render the task', ->
      $el = @view.render().$el
      expect($el).toBeDefined()

Answer 1

When you specify the el attribute in your view, this acts as a container. In your app #search exists in the DOM. In the jasmine test it doesn’t.

You can create sandboxed containers using jasmine-jquery and use them when constructing your views in tests.

`