HTML

Question

我有一个Angular指令＆＃34; clock＆＃34;并且我试图编写一个单元测试来查看时钟实际上是$ interval进入未来时间（即：通过查看element.text()来看2分钟）。我对当前时间进行了测试，现在我想测试它是否会通过$interval.flush显示未来的时间。在我看来$interval.flush并没有真正推进时钟。

我可以要求两个答案：

如果$interval触发，我如何进行单元测试？
为什么$interval.flush似乎无法推进Date()？

我遵循这些帖子的指导原则：

相关帖子建议使用茉莉花嘲讽，我认为不再需要了。

Testing a $interval with Jasmine in PhantomJS

类似的问题：

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

HTML

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

指令

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

});

TERMINAL

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显示，futuredate var增加2分钟，但elem.text()仍为当前时间。

Answer 1

在我开始之前注意：

指令代码中有错误。调用$ interval时，将函数对象作为第一个参数传递。没有括号。

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

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

查看plunker

上的差异

其次，调用$ interval.flush会导致间隔向前移动毫秒数，但它对内部Javascript时钟没有影响。由于您使用Date来更新时钟，因此您始终可以获得当前时间。调用$ interval.flush可能会导致间隔多次更新时钟，但它始终将其设置为当前时间。

Answer 2

我认为您可能需要在$ interval之后使用for (i = 0; i < array.length; i++) { if (value === array[i].id) { alert('is not found function called'); return false; } }以确保Angular知道它。

角度单位测试时间间隔为＃34;时钟＆＃34;指示

HTML

指令

UNIT TEST

TERMINAL

2 个答案: