如何测试angularjs指令?

时间:2013-12-25 10:48:01

标签: angularjs coffeescript angularjs-directive jasmine bdd

appD.directive "check",->
    restrict: "EA"
    require: "ngModel"
    link: (scope, el, attrs, ngModelCtrl) ->
        old_val = scope.budget
        el.on "blur", (e) ->
            new_val = el.val()
            if new_val < old_val+5000      
                el.val(old_val) 

如何为此angularjs指令编写测试?

1 个答案:

答案 0 :(得分:1)

这就是使用jasmine框架

进行测试的方式
describe "testing check directive", ->
  scope = undefined
  element = undefined

  #loading modules that we need for tests
  beforeEach module("appD")

  #loading our directive template for testing.
  beforeEach inject(($templateCache) ->
    directiveTemplate = null
    templateUrl = "../../../path/to/directive/template.html"
    $.ajax
      url: templateUrl
      isLocal: true
      success: (content) ->
        directiveTemplate = content

      async: false
      dataType: "html"

    $templateCache.put templateUrl, directiveTemplate
  )

  # Our tests start hear
  testValue = "6000"
  describe "When processing 'check' directive and element value = '" + testValue + "'", ->
    beforeEach inject(($compile, $rootScope) ->
      scope = $rootScope

      #The element with check directive
      element = angular.element("<input check value='" + testValue + "'></div>")

      $compile(element) scope
      element = $(element)
      element.scope().$apply()
    )
    budget = 100
    describe "And budget is  " + budget, ->
      beforeEach ->
        scope.budget = budget
        scope.$apply()
        element.blur()

      it "Than element value should stay the same = " + testValue, ->
        expect(element.val()).toEqual testValue


    budget = 2000
    describe "And budget is  " + budget, ->
      beforeEach ->
        scope.budget = budget
        scope.$apply()
        element.blur()

      it "Than element value should be equal to budget value", ->
        expect(element.val()).toEqual budget