Question

我已经问过question这个主要观点是终端中不存在范围，但它存在于Chrome调试工具中。尽管有答案但它没有得到修复。

问题是测试波纹管指令的正确语法是什么，尤其是行expect(scope.measurementScroll).toBe(true);。在挖掘网页时我找不到任何类似的问题，大多数问题与$q.defer()有关，在我的情况下，有下划线方法_.defer()

控制器

'use strict';
angular.module('myApp')
  .controller('MeasurementsTimelineCtrl', ['$scope', '$state', 'Measurements', function($scope, $state, Measurements) {
    $scope.measurements = null;
    var userId = $scope.currentUser ? $scope.currentUser.id : null;
    if (userId) {
      var listOfMeasurements = Measurements.userIndex(userId);
      listOfMeasurements.then(function(data){
        $scope.measurements = data;
        $scope.$broadcast('measurements-updated', $scope.measurements);
      });
    }
  }]);

指令：

'use strict';
angular.module('myApp')
  .directive('dashboardMeasurementTimeline', ['$window', function($window) {
    return {
      restrict: 'E',
      templateUrl: 'myView.html',
      controller: 'MeasurementsTimelineCtrl',
      link: function(scope, element){
        scope.$on('measurements-updated', function(measurements) {
          _.defer(function(){
            if(measurements) {
              scope.measurementScroll = true;
            }
          });
        });
      }
    };
  }]);

测试

'use strict';
describe('Directive: dashboardMeasurementTimeline', function () {

  var $rootScope, $compile, element, scope;

  beforeEach(function() {
    module('myApp');

    inject(function($injector) {
      $rootScope = $injector.get('$rootScope');
      $compile = $injector.get('$compile');
    });

    scope = $rootScope.$new();
    element = angular.element('<dashboard-measurement-timeline></dashboard-measurement-timeline>');
    element = $compile(element)(scope);

    scope.currentUser = {id : 'someId'};
    scope.$digest();
    scope.measurements = [{id: 'someId', time_of_test: 'Tue, 30 Dec 2014 14:00:00 -0000'},
      {id: 'someId', time_of_test: 'Thu, 20 Nov 2014 03:00:00 -0000'},];
    scope.$broadcast('measurements-updated', scope.measurements);
    scope.$apply();
  });

  it('should assign true value to measurementScroll', function () {
    expect(scope.measurementScroll).toBe(true);
  });
});

Answer 1

您可以通过注入模拟下划线库来执行此操作，并在测试中定义defer函数。一种方法是定义自己的工厂_，然后可以轻松嘲笑：

app.factory('_', function($window) {
  return $window._;
});

然后在指令中，你必须通过注入它来使用它：

app.directive('dashboardMeasurementTimeline', ['_', function(_) {

在测试中，您可以模拟它：

var deferCallback;
beforeEach(module(function($provide) {
  deferCallback = null;
  $provide.value('_', {
    defer: function(callback) {
      deferCallback = callback;
    }
  });
}));

这意味着该指令将使用模拟_而不是真实的模拟defer，它将传递给deferCallback的回调保存为scope.$broadcast('measurements-updated', scope.measurements); deferCallback();，以便您可以在需要时调用它：< / p>

done()

这使得测试同步，这通常比使用{{1}}更好，因为它可以尽可能快地进行测试。

您可以在http://plnkr.co/edit/r7P25jKzEFgE5j10bZgE?p=preview

看到上述工作

Answer 2

如果您没有lodash作为要注入的服务，您可以只监视defer方法，如果您关心所执行的函数，那么您只需设置callFake并调用传递给真实defer的参数函数：

spyOn(_, 'defer').and.callFake(f => f());

更深层次假设你有以下电话：

function toTest() {
 _.defer(() => service.callAFunction());
}

然后在你的测试中你可以说：

it('should call service.callAFunction', () => {
   spyOn(service, 'callAFunction');
   spyOn(_, 'defer').and.callFake(f => f());
   toTest();
   expect(_.defer).toHaveBeenCalled();
   expect(service.callAFunction).toHaveBeenCalled();
}

Answer 3

@Michal Charezma，为这个实际上是解决方案的问题提供了一个很好的解决方案，但事实证明它对其余的_函数有一些其他的限制。例如：

angular.element(scrollContainer).bind('scroll', _.throttle(scope.disableButtons, 500));

引发错误throttle未定义。

按照@Michal的逻辑，找到了另一个让_.throttle()等函数正常工作的解决方案。因此，而不是导入_并使用：

app.factory('_', function($window) {
  return $window._;
});

可以从类似的规范中嘲笑defer函数：

var deferCallback = $window._.defer.mostRecentCall.args[0];
deferCallback()

如何使用Jasmine，AngularJs测试_.defer（）

3 个答案: