Testte $ izle işlevi nasıl yapılır?

Question

Tek bir satırda etiket, hata alanı, normal ifadeler gibi tüm ekstraları olan bir form alanını temsil eden basit bir yönerge uygularım.

direktifi aşağıdaki gibidir:

<div ng-controller="parentController"> 

     {{username}} 
<!-- the directive -- > 
     <form-field label="Username:" regex="someRegex" constrainsViolationMessage="someValidationMessage" model="username" place-holder="some input value"> 
     </form-field> 
    </div> 

Şimdi, yönerge kapsamı ve ana kapsamı arasındaki bağlayıcı verileri test etmek istiyorum.

testtir:

it("should bind input field to the scope variable provided by parent scope ! ", function() { 
     var formInput = ele.find('.form-input'); 
     formInput.val("some input"); 
     expect(ele.find('p').text()).toEqual('some input'); 
    }); 

Bu sorun testi geçemiyor neden bile direktif düzgün çalışıyorsa, bilmiyorum olmasıdır. Here is a fiddle of the directive.

Ve burada tüm test ve test kurulumu. Gördüğünüz gibi

var formsModule = angular.module('forms', []); 

formsModule.controller('parentController', function ($scope) { 
}); 


formsModule.directive('formField', function() { 

    var label; 
    var constrainsViolationMessage; 
    var placeHolder; 
    var model; 


    return { 
     restrict:'E', 
     transclude:true, 
     replace:false, 
     scope:{ 
      model:'=' 
     }, 
     link:function (scope, element, attr) { 

      console.log("link function is executed .... "); 

      scope.$watch('formInput', function (newValue, oldValue) { 
       console.log("watch function is executed .... !") 
       scope.model = newValue; 
      }); 
      scope.label = attr.label; 
     }, 
     template:'<div class="control-group ">' + 

      '<div class="form-label control-label">{{label}}</div> ' + 

      '<div class="controls controls-row"> ' + 

      '<input type="text" size="15" class="form-input input-medium" ng-model="formInput" placeholder="{{placeHolder}}">' + 

      '<label class="error" ng-show={{hasViolationConstrain}}>{{constrainsViolationMessage}}</label>' + 

      '</div>' 
    } 
}); 


beforeEach(module('forms')); 

var ele; 

var linkingFunction; 

var elementBody; 


var scope; 
var text = ""; 
var placeHolder = "filed place holder"; 
var label = "someLabel"; 
var regex = "^[a-z]{5}$"; 


beforeEach(inject(function ($compile, $rootScope) { 

     scope = $rootScope; 


     elementBody = angular.element('<div ng-controller="parentController">' + 
      '<p>{{username}}</p>' + 
      '<form-field label="Username:" regex="someRegex" constrainsViolationMessage="someValidationMessage" model="username" place-holder="some input value"> </form-field>'); 

     ele = $compile(elementBody)(scope); 
     scope.$digest(); 
    } 
)); 


afterEach(function() { 
    scope.$destroy(); 
}); 


iit("should bind input field to the scope variable provided by parent scope ! ", function() { 
    var formInput = ele.find('.form-input'); 
    formInput.val("some input"); 
    expect(ele.find('p').text()).toEqual('some input'); 
}); 

, ben ana kapsamı tarafından sağlanan 'model' özelliğinde kapsamı değişken setinde yansır form girişi kabul ettirmek isterler.

Burada bir şey mi özlüyorum? Yardımın için teşekkürler ...!

Answer 1

Giriş değerini ayarladıktan sonra scope.$apply() aramayı kaçırıyorsunuz, bu nedenle değişiklik hiçbir zaman sindirilmez. Normal uygulama yaşam döngüsünde bu otomatik olarak gerçekleşir, ancak bunu testlerinizde manuel olarak tetiklemeniz gerekir.

Bir ton örnek için https://github.com/angular/angular.js/blob/master/test/ng/directive/formSpec.js'a bir göz atın.

Answer 2

Saati yürütmek için koşul ekledikten sonra $ scope. $ Digest() öğesini kullanın. Saatimi ateşleyecek.