Come eseguire la funzione $ watch in Test?

Question

Sto implementando una direttiva semplice che rappresenta un campo modulo con tutti gli extra come etichetta, campo errore, regex tutto in una sola riga.

La direttiva è la seguente:

<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> 

Ora, voglio testare i dati di legame tra la portata direttiva e l'ambito genitore.

Il test è:

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'); 
    }); 

Questo problema è che io non so perché prova non passano, anche la direttiva funziona correttamente. Here is a fiddle of the directive.

E qui è tutto il test e il test impostato.

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'); 
}); 

Come potete vedere, voglio affermare che in ingresso forma si riflette nel perimetro variabile stabilita l'attributo 'modello' fornito dal campo di applicazione genitore.

Mi manca qualcosa qui? Grazie per avermi aiutato ...!

Answer 1

Ti manca la chiamata scope.$apply() dopo aver impostato il valore di input, in modo che la modifica non venga mai digerita. Nel ciclo di vita regolare dell'applicazione ciò avverrebbe automaticamente, ma è necessario attivarlo manualmente nei test

Dai un'occhiata a https://github.com/angular/angular.js/blob/master/test/ng/directive/formSpec.js per un sacco di esempi.

Answer 2

Utilizzare $ scope. $ Digest() dopo aver aggiunto le condizioni per l'esecuzione dell'orologio. Farà fuoco la guardia.