Direttiva angolare di test unità che utilizza ngModel

Question

Sto provando a testare un'unità una direttiva che utilizza ngModel e che presenta difficoltà. Sembra che la funzione di collegamento della mia direttiva non viene mai chiamato ...

Ecco il mio codice di direttiva:

coreModule.directive('coreUnit', ['$timeout', function ($timeout) { 
    return { 
     restrict: 'E', 
     require: '?ngModel', 
     template: "{{output}}", 
     link: function (scope, elem, attrs, ngModelCtrl) { 
      ngModelCtrl.$render = function() { 
       render(ngModelCtrl.$modelValue); 
      }; 
      console.log("called"); 
      function render(unit) { 
       if (unit) { 
        var output = '(' + 
         unit.numerator + 
         (unit.denominator == '' ? '' : '/') + 
         unit.denominator + 
         (unit.rate == 'NONE' || unit.rate == '' ? '' : '/' + unit.rate) + 
         ')'; 
        scope.output = output == '()' ? '' : output; 
       } 
      } 
     } 
    } 
}]); 

Ecco la mia prova spec:

describe('core', function() { 
    describe('coreUnitDirective', function() { 
     beforeEach(module('core')); 

     var scope, 
      elem; 

     var tpl = '<core-unit ng-model="myUnit"></core-unit>'; 

     beforeEach(inject(function ($rootScope, $compile) { 
      scope = $rootScope.$new(); 
      scope.myUnit = {}; 
      elem = $compile(tpl)(scope); 
      scope.$digest(); 
     })); 

     it('the unit should be empty', function() { 
      expect(elem.html()).toBe(''); 
     }); 

     it('should show (boe)', function() { 
      scope.myUnit = { 
       numerator: 'boe', 
       denominator: "", 
       rate: "" 
      }; 
      scope.$digest(); 
      expect(elem.html()).toContain('(boe)'); 
     }); 
    }); 
}); 

La console di output di registro "chiamato" non si verifica mai e ovviamente l'elem nella mia specifica di test non viene mai aggiornato.

Cosa sto facendo male ??

Answer 1

scopre che non ero tra cui la direttiva nel mio file karma.config: S. Aggiungendolo risolto tutti i miei problemi.

Answer 2

Puoi provare due cose.

Per prima cosa, anziché utilizzare solo una stringa tpl, provare angular.element().

var tpl = angular.element('<core-unit ng-model="myUnit"></core-unit>'); 

In secondo luogo, posizionare il tpl nel blocco beforeEach. Così il risultato dovrebbe essere simile a questo:

beforeEach(inject(function ($rootScope, $compile) { 
    var tpl = angular.element('<core-unit ng-model="myUnit"></core-unit>'); 
    scope = $rootScope.$new(); 
    scope.myUnit = {}; 
    elem = $compile(tpl)(scope); 
    scope.$digest(); 
}));