AngularJS Testing Controllers with Testacular & Testem

controllers.coffee

#     = require '../components/jquery/jquery'
#     = require '../components/angular-complete/angular'



Controllers = angular.module 'controllers', []

Controllers.controller 'PhoneListCtrl', ['$scope', ($scope)->
    $scope.phones = [
      {name: "Nexus S", snippet: "Fast just got faster with Nexus S."},
      {name: "Motorola XOOM™ Wi-Fi", snippet: "The NextGeneration tablet."},
      {name: "MOTOROLA XOOM™", snippet: "The Next, Next Generation tablet."} ]

]

PhonesApp = angular.module 'phoneApp', ['controllers']

controllersSpec.coffee

# app/test/unit/controllersSpec.coffee

console.log 'ran @', new Date()
describe 'phonesApp', ->

  describe 'phoneApp controllers', ->

    # load the module before each spec
    beforeEach module('controllers')

    describe 'PhoneListCtrl', ->
      {scope, ctrl} = [null, null]

      # get controller and its scope (inherits from `$rootScope`)
      beforeEach inject ($rootScope, $controller)->
        scope = $rootScope.$new()
        ctrl  = $controller "PhoneListCtrl", $scope: scope

      it 'should create "phones" model with 3 phones', ->
        expect(scope.phones.length).toBe(3)

      it 'should set the default value of orderProp model', ->
        expect(scope.orderProp).toBe 'age'

rakefile

namespace :test do

  desc 'run testacular unit tests'
  task :tu do
    system 'testacular start ./config/testacular.conf.js'
  end

  desc 'run testacular e2e runner'
  task :ee do
    system 'testacular start ./config/testacular-e2e.conf.js'
  end

  desc 'run unit tests with testem'
  task :em do
    system 'testem -f config/testem.yml'
  end

end

scenario.coffee

# app/test/e2e/scenario.coffee

describe 'phoneApp', ->
  describe 'Phone list view', ->
    beforeEach ->  browser().navigateTo 'index.html'

    it 'should filter the phone list as user types into the search box', ->
      expect(repeater('.phones li').count()).toBe 3

      input('query').enter('nexus')
      expect(repeater('.phones li').count()).toBe 1

      input('query').enter('motorola')
      expect(repeater('.phones li').count()).toBe 2

testacular-e2e.conf.js

// config/testacular-e2e.conf.js

basePath = '../';

/*....*/
files = [
  ANGULAR_SCENARIO,
  ANGULAR_SCENARIO_ADAPTER,
  'app/test/e2e/**/*coffee',
];

/*....*/

proxies = {
  '/': 'http://localhost:3000/'   // <--- I have a server running the app at this address
};

testacular.conf.js

// config/testacular.conf.js


basePath = '../';

/*....*/
files = [
  JASMINE,
  JASMINE_ADAPTER,
  'app/components/angular-complete/angular.js',
  'app/components/angular-complete/angular-mocks.js',
  'app/test/**/*Spec.coffee',
  'app/coffee/**/*.coffee'
];
/*....*/

testem.yml

# running unit tests with testem (alternative to testacular)
# config/testem.yml 

framework: jasmine
before_tests: coffee -cb app/test/**/*.coffee
on_exit: rm app/test/**/*.js

# testem will monitor these files
src_files:
- 'app/public/js/app.js'
- "app/test/unit/*.coffee"

# app.js already includes angular, so I just need to serve mocks
serve_files:
- 'app/public/js/app.js'
- 'app/components/angular-complete/angular-mocks.js'
- "app/test/unit/*.js"

launch_in_dev:
- 'chrome'