JavaScript Testing Best Practices: Part 1

auto_init.coffee

OrderSystem =
  init: ->
    $('#container').append('<div id="order-system" />')

# init is included at the end of the file
OrderSystem.init()


it 'OrderSystem init works', ->
  OrderSystem.init() # now called twice
  expect($('#order-system').length).toBe(1) #FAILS

global_state.coffee

# Global State
window.allowTax = true
window.allowShipping = true

hasCustomSettings = ->
  return window.allowTax || window.allowShipping

beforeEach ->
  # save current state
  @allowTax = window.allowTax
  @allowShipping = window.allowShipping

afterEach ->
  # restore state
  window.allowTax = @allowTax
  window.allowShipping = @allowShipping

it 'tests shouldShowCoolStuff', ->
  window.allowTax = false
  window.allowShipping = true
  result = hasCustomSettings()
  expect(result).toBe(true)

global_state_cookies.coffee

# do not care
spyOn(Cookie, 'set')

# do care
spyOn(Cookie, 'set')
doWork()
expect(Cookie.set).toHaveBeenCalled()

# verify
document.cookie == ''

global_state_dom.coffee

addModalDom = ($element, message) ->
  $element.append("<div class='modal'>#{message}</div>")

addModalLocal = ($element, message) ->
  $element.append("<div class='modal'>#{message}</div>")

beforeEach ->
  # your project may have something like this to keep the dom clean, but beware!
  $('#jasmine_content').html('');

it 'initializes a modal (DOM)', ->
  addModalDom('hey there');
  expect($('.modal').length).toBe(1)

it 'initializes a modal (local)', ->
  container = $('<div />')
  addModalLocal(container, 'hey there');
  expect(container.find('.modal').length).toBe(1)

global_state_fixed.coffee

# global state
window.allowTax = true
window.allowShipping = true

# method that calls our method under test
processOrder = ->
  if hasCustomSettings(window.allowTax, window.allowShipping)
    handleCustomSettings()

# the above is just for reference
# the below is all we actually care about
hasCustomSettings = (allowTax, allowShipping) ->
  return allowTax || allowShipping

it 'tests hasCustomSettings', ->
  result = hasCustomSettings(true, true)
  expect(result).toBe(true)

global_state_network.coffee

# $.ajax
spyOn($, 'ajax').andCallFake (options) ->
  options.success(someData)
expect($.ajax).toHaveBeenCalled()

# sinon
server = sinon.fakeServer.create()
server.respondWith('url', '<div>text</div>')
doWork()
server.respond()

# DOM Requests
addImage = (url) ->
  $(document).append('<img src="something">')

spyOn(window, 'addImage')
expect(window.addImage).toHaveBeenCalledWith('someurl)

mock_dependencies.coffee

createOrder = (orderData) ->
  Cookie.set('atLeastOneOrderCreated', true)
  API.createOrder(orderData)
  return orderData.id

# this test causes a cookie to be set and an API call to be made
it 'createOrder returns the id', ->
  orderData =
    id: 3
  expect(createOrder(orderData).id).toBe(3)

# this test causes a cookie to be set
it 'createOrder calls the API', ->
  spyOn(API, 'createOrder')
  createOrder()
  expect(API.createOrder).toHaveBeenCalled()

# ideally, there would be a before each that spys on both
beforeEach ->
  spyOn(API, 'createOrder')
  spyOn(Cookie, 'set')

module_pattern_1.coffee

App = ->
  createGlobals = ->
  renderLayout = ->
  renderSidebar = ->
  renderContent = ->
  importSavedSettings = ->
    settings = getSettingsFromLocalOrServer()
    loadSettings(settings)

  initApp = ->
    createGlobals()
    renderLayout()
    renderSidebar()
    renderContent()
    importSavedSettings()

  return {
    init: initApp
  }

it 'App init', ->
  app = new App
  app.init()
  # now we're stuck testing side effects

module_pattern_2.coffee

App = ->
  createGlobals = ->
  renderLayout = ->
  renderSidebar = ->
  renderContent = ->
  importSavedSettings = ->
    settings = getSettingsFromLocalOrServer()
    loadSettings(settings)

  initApp = ->
    createGlobals()
    renderLayout()
    renderSidebar()
    renderContent()
    importSavedSettings()

  return {
    init: initApp
    createGlobals: createGlobals
    renderLayout: renderLayout
    renderSidebar: renderSidebar
    renderContent: renderContent
    importSavedSettings: importSavedSettings
  }

it 'App imports saved settings', ->
  app = new App()
  app.importSavedSettings()
  # now we can test methods directly!

module_pattern_3.coffee

Settings =
  getSettingsFromLocalOrServer: ->
  loadSettings: ->
  importSavedSettings: ->
    settings = @getSettingsFromLocalOrServer()
    @loadSettings(settings)

Renderer =
  renderLayout: ->
  renderSidebar: ->
  renderContent: ->
  render: ->
    @renderLayout()
    @renderSidebar()
    @renderContent()

App = ->
  createGlobals = ->
  initApp = ->
    createGlobals()
    Renderer.render()
    Settings.import()

  return {
    createGlobals: createGlobals
    init: initApp
  }

it 'App createGlobals creates globals', ->
  app = new App
  app.createGlobals()
  # test output

describe 'App init', ->
  beforeEach ->
    app = new App
    spyOn(Renderer, 'render')
    spyOn(Settings, 'import')
    spyOn(app, 'createGlobals')

    app.init()
 
  it 'renders content', ->
    expect(Renderer.render).toHaveBeenCalled()

  it 'loads settings', ->
    expect(Settings.import).toHaveBeenCalled()

  it 'creates globals', ->
    expect(app.createGlobals).toHaveBeenCalled()