XKE 2013.10.22 Directives unit-testing (full)

by Mike Kotsur

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
<script src="http://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js"></script>
<script src="http://cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-mocks.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>

CoffeeScript

demo = angular.module 'demo', []

demo.directive 'calculator', () ->
    restrict: 'AE'
    template: '<div>
        <label for="valueA">A:</label><input type="number" id="valueA" ng-model="state.a" />
        {{operation}}
        <label for="valueA">B:</label><input type="number" id="valueB" ng-model="state.b" />
        = {{result()}}
        <hr />
        <div ng-transclude></div>
    </div>'
    scope: {}
    transclude: true
    replace: true
    controller: ($scope) ->
        $scope.state = 
            a: 2
            b: 2
        $scope.operation = '*'
        $scope.result = -> $scope.$eval "state.a #{$scope.operation} state.b"
        this.setOperation = (o) ->
            $scope.operation = o
    
demo.directive 'key', () ->
    restrict: 'AE'
    require: '^calculator'
    template: '<button ng-click="calculator.setOperation(op)">{{op}}</button>'
    scope: 
        op: '@'
    link: (scope, iElement, iAttrs, controller) ->
        scope.calculator = controller


####################################################
describe "calculator", ->
  
  beforeEach -> angular.mock.module 'demo'
    
  it "should just work", inject ($compile, $rootScope) ->
    html = '<calculator><key op="+"></key></calculator>'
    scope = $rootScope.$new()
    
    element = $compile(html)(scope)
    inputs = element.find('input')
    
    scope.$digest()
    
    a = angular.element(inputs[0])
    b = angular.element(inputs[1])
    btn = element.find('button')
    
    expect(element.text()).toContain '= 4'
    
    a.val 10
    a.triggerHandler 'input'
    
    expect(element.text()).toContain '= 20'
    
    btn.triggerHandler 'click'
    
    expect(element.text()).toContain '= 12'
    
    
    
    


####### load jasmine htmlReporter ###################
l = ->
  env = jasmine.getEnv();
  env.addReporter(new jasmine.HtmlReporter());
  env.execute();
l()