Unità angolare che verifica $ intervallo per una direttiva "orologio"

Question

Ho un "orologio" di direttiva angolare e Sto provando a scrivere un test unitario per vedere se l'orologio effettivamente $ intervallo avanza a un orario futuro (es .: 2 minuti guardando element.text()). Ho un test di passaggio del tempo corrente, ora voglio testare se mostrerà un orario futuro tramite $interval.flush. Mi sembra che lo $interval.flush non stia davvero aumentando l'orologio.

Posso chiedere due risposte:

• Come posso unit test se $interval incendi?
• Perché $interval.flush non sembra far avanzare lo Date()?

Sto seguendo le linee guida da questi posti:

• how to unit-test setInterval in karma angularjs

• http://www.bradoncode.com/blog/2015/06/15/unit-testing-interval-angularls/

Un post correlati suggerito utilizzando Jasmine schernisce, che non credo è più necessario.

• Testing a $interval with Jasmine in PhantomJS

Un problema simile:

• https://groups.google.com/forum/#!topic/angular/5TFvCa5m8n0

HTML

<mydatething format="EEEE, MMMM d" interval="1000" timezone="notused"></mydatething> 

DIRETTIVA

myApp.directive('mydatething', ['$interval', 'dateFilter', function ($interval, dateFilter) { 
    return { 
    restrict: "AE", 
    scope: { 
     format: '@', 
     interval: '@' 
    }, 
    template: '', // the template is the Date() output 
    link: function (scope, element, attrs) { 

     // scope expects format, interval and timezone 
     var clockid; 
     var clockinterval = scope.interval; 
     var dateformat = scope.format; 
     var clocktimezone = scope.timezone; 

     // DOM update function 
     function updateClock() { 
     element.text(dateFilter(new Date(), dateformat)); 
     } 

     // Instantiate clock 
     updateClock(); 
     clockid = $interval(updateClock, clockinterval); // fixed 

     // For cancelling 
     scope.$on('$destroy', function() { 
     $interval.cancel(clockid); 
     }); 

     // Separate listener for locale change, manually refresh clock format 
     scope.$on('$localeChangeSuccess', function() { 
     updateClock(); 
     }) 
    } 
    }; 
}]); 

UNIT TEST

describe("tsdate directive", function(){ 
    var elem, scope, $interval, dateFilter; 
    beforeEach(module('tsApp')); 
    beforeEach(inject(function(_$rootScope_, _$interval_, _$compile_, _dateFilter_){ 
    $compile = _$compile_; 
    dateFilter = _dateFilter_; 
    $interval = _$interval_; 
    $rootScope = _$rootScope_; 
    scope = $rootScope.$new(); 

    elem = angular.element('<mydatething format="h:mm a" interval="15000"></mydatething>'); 
    elem = $compile(elem)(scope); 
    scope.$digest(); 

    })); 
    describe('on clock start', function() { 
    it('to show the current date', function() { 
     var currentdate = dateFilter(new Date(), elem.isolateScope().format); 
     expect(elem.text()).toBe(currentdate); 
     // this passes 
    }); 
    it('that it updates the clock', function() { 
     var futurems = 120000; // 2 minutes 
     var futuredate = dateFilter(new Date().getTime() + futurems, elem.isolateScope().format) 
     $interval.flush(futurems); 
     expect(elem.text()).toBe(futuredate); 
    // this fails 
    }); 
    }); 

}); 

TERMINALE

PhantomJS 1.9.8 (Mac OS X) mydatething directive on clock start that it updates the clock FAILED 
    Expected '3:55' to be '3:57'. 

Console.log rivela, il var è di 2 minuti incrementato, ma che il elem.text() rimane il tempo corrente.

Answer 1

NOTA Prima di iniziare:

Hai un errore nel codice direttiva. Quando si chiama $ interval, si passa l'oggetto function come primo parametro. Nessuna parentesi.

// Do this 
clockid = $interval(updateClock, clockinterval); 

// Not this 
clockid = $interval(updateClock(), clockinterval); 

vedere la differenza sulla plunker

In secondo luogo, chiamando $ interval.flush provoca intervallo di andare avanti per il numero di millisecondi, ma non ha effetto sul clock interno Javascript. Poiché stai utilizzando la Data per aggiornare l'ora sull'orologio, ricevi sempre l'ora corrente.Chiamare $ interval.flush può far sì che l'intervallo aggiorni l'orologio un numero di volte, ma lo imposta sempre sull'ora corrente.

Answer 2

Penso che potrebbe essere necessario utilizzare $scope.$apply() dopo l'intervallo $ per assicurarsi che l'Angolare ne sia a conoscenza.