Question

I want to test an ember controller is correctly adding a view to to the DOM. I have the following Ember controller:

Lead.Controllers.UrlSearch = Ember.Object.extend
  init: ->
    @_super()

    @url_search = Lead.UrlSearch.create()

    @url_search.set('search_url', 'http://www.bdec-online.com/bd-cmpy/bd-cz.cfm')

    @view = Ember.View.create
      controller: @
      urlSearchBinding: 'controller.url_search'
      templateName: 'app/templates/url_search/show'

    @view.appendTo('#fieldset')
    console.log($('#url_search_url').length) #0 in console but appears in browser
    $('#url_search_url').focus()

I then want to test that the $(‘#url_search_url’) element is in the Dom. It is displayed in the browser so it is getting added but at some point in the future.

I have the following test:

describe 'Controllers', ->
  describe 'UrlSearch', ->
    it 'should append view', ->
      expect($('#url_search_url').length).toEqual(1)

I know there is a didInsertElement event, should I be using this or how should I test this situation?

Answer 1

Ember defers the DOM manipulation until “later” via the run loop. To test, you can force the run loop to execute its contents immediately by calling Ember.run.end() . The following should pass:

describe 'Controllers', ->
  describe 'UrlSearch', ->
    it 'should append view', ->
      Ember.run.end()
      expect($('#url_search_url').length).toEqual(1)

Typically you don’t have to flush the run loop in your application code… you can just let Ember execute everything when it is ready to do so. But in your test code, it is sometimes necessary.