Javascript “a”的角度单元测试$interval；时钟“；指示

我有一个角度指令“clock”，我正试图编写一个单元测试，看看时钟是否真的$interval前进到未来时间（即：通过查看

element.text（）

）2分钟）。我通过了当前时间的测试，现在我想测试它是否会通过

$interval.flush

显示未来时间。在我看来，

$interval.flush

并不是真的在推进时钟

我可以问两个答案吗：

• 如果

  $interval

  触发，如何进行单元测试
• 为什么

  $interval.flush

  似乎没有提前

  日期（）

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

一篇相关的帖子建议使用茉莉花模拟，我认为这已经没有必要了

类似的问题：

HTML 单元测试

Console.log

显示，

futuredate

变量增加了2分钟，但

elem.text（）

仍然是当前时间。

开始之前请注意：

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

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

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

看到上面的区别了吗

---

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

我认为您可能需要在$interval之后使用

$scope.$apply（）

，以确保Angular知道它。

谢谢。我现在明白了，这不像我在运行一个虚拟时钟，Date（）是实时存在的，所以除非

gulptest

要等整整一分钟，否则我无法预测未来。Jasmine的模拟时钟是用来做这件事的，还是我应该简单地检查一下确保$interval被调用作为一个测试。@liquified您将不得不等待整整两分钟。但也有一些问题。更新角度代码中时钟的时间间隔，以便在运行Jasmine时不会被调用。你必须手动完成。您还需要设置一个超时来运行测试中的“expect”函数，告诉Jasmine不要抛出超时错误。最后，您需要对karma.config进行更改，以包含“browserNoActivityTimeout:122000”。我的plunk中包含了两个文件：test.js和karma.config.js。请参阅代码注释。你做到了吗？是和否，我可以测试函数UpdateLock（），看看它是否按预期运行，但不值得深入研究实际运行X分钟，只是为了看看时钟是否反映未来的X分钟。我进行了重构，以便UpdateLock接收新日期，而不是生成新日期。因此，我可以spyOn UpdateLock查看它是否在指定的时间间隔内触发，如果我向它传递一个未来的日期变量，则可以查看UpdateLock的文本是否会更新。在某种程度上，js“Date”超出了范围，这是计算机自己的软件，我们认为他们已经做了自己的尽职调查。

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

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

});

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

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

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