如何用茉莉花

如何用茉莉花

关注
发信
关注(28)粉丝(399)

如何用茉莉花，AngularJs测试_.defer（）

本文介绍了如何用茉莉花，AngularJs测试_.defer（）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经问过这个question主要的一点是在哪里范围不存在于终端，但它在Chrome调试工具存在。尽管答案是没有得到解决。

问题是什么是测试波纹管指令正确的语法，尤其是行预期（scope.measurementScroll）.toBe（真）; 。虽然挖通过网页我找不到任何类似的问题，大多数问题都涉及到 $ q.defer（）凡在我万一有下划线的方法 _.defer（）

控制器

 使用严格的;
angular.module（'对myApp'）
  .controller（'MeasurementsTimelineCtrl'，['$范围，$国家，三围，函数（$范围，$状态，测量）{
    $ scope.measurements = NULL;
    VAR用户id = $ scope.currentUser？ $ scope.currentUser.id：​​空;
    如果（用户id）{
      VAR listOfMeasurements = Measurements.userIndex（用户ID）;
      listOfMeasurements.then（功能（数据）{
        $ scope.measurements =数据;
        $ $范围广播（三围更新'，$ scope.measurements）。
      }）;
    }
  }]）;

指令：

 使用严格的;
angular.module（'对myApp'）
  .directive（'dashboardMeasurementTimeline'，['$窗口'，函数（$窗口）{
    返回{
      限制：'E'，
      templateUrl：myView.html'，
      控制器：'MeasurementsTimelineCtrl'，
      链接：功能（范围，元素）{
        范围。在（'测量更新'，函数（测量$）{
          _.defer（函数（）{
            如果（测量）{
              scope.measurementScroll = TRUE;
            }
          }）;
        }）;
      }
    };
  }]）;

测试

 使用严格的;
描述（指令：dashboardMeasurementTimeline'，函数（）{  变量$ rootScope，$编译，元素，范围;  beforeEach（函数（）{
    模块（'对myApp'）;    注（函数（$喷油器）{
      $ rootScope = $ injector.get（'$ rootScope'）;
      $编译= $ injector.get（'$编译'）;
    }）;    范围= $ rootScope $新的（）。
    元素= angular.element（'＆LT;仪表测量-时间表＆GT;＆LT; /仪表测量-时间表＆GT;'）;
    元素= $编译（元）（范围）;    scope.currentUser = {ID：'someId'};
    范围$摘要（）。
    scope.measurements = {[ID：'someId'，time_of_test：周二，二零一四年十二月三十零日14:00:00 -0000}，
      {ID：'someId'，time_of_test：星期四，二零一四年十一月二十〇日03:00:00 -0000'}]
    范围$广播（三围更新'，scope.measurements）。
    。范围$适用（）;
  }）;  它（'应指派真正价值measurementScroll'，函数（）{
    期待（scope.measurementScroll）.toBe（真）;
  }）;
}）;


解决方案

您可以通过注入一个模拟下划线库，在测试中定义的延迟功能做到这一点。要做到这一点的一种方法是定义你自己的工厂， _ ，它可以很容易地嘲笑：

  app.factory（'_'，函数（$窗口）{
  返回$ window._;
}）;

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

  app.directive（'dashboardMeasurementTimeline'，['_'，函数（_）{

在测试中，然后你可以嘲笑它：

  VAR deferCallback;
beforeEach（模块（函数（$提供）{
  deferCallback = NULL;
  $ provide.value（'_'，{
    推迟：函数（回调）{
      deferCallback =回调;
    }
  }）;
}））;

这意味着，而不是真实的，该指令将使用模拟 _ ，既节约传递给回调推迟为 deferCallback 所以在需要的时候可以调用它：

  $范围广播（三围更新'，scope.measurements）。
deferCallback（）;

这使测试同步，这通常比使用一个更好的主意（）完成，因为它使测试尽可能快的。

您可以在

I already asked this question where the main point was scope doesn't exists in terminal but it exists in Chrome debugging tool. Despite the answers it didn't get fixed.

The question is what is the right syntax to test the bellow directive, especially the line expect(scope.measurementScroll).toBe(true);. While digging through web i couldn't find any similar question most questions are related to $q.defer() where in my case there is underscore method _.defer()

Controller

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

Directive:

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

Test

'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);
  });
});
解决方案

You can do this by injecting a mock underscore library, with a defer function defined in the test. A way to do this is to define your own factory, _, which can then be mocked easily:

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

Then in the directive, you have to use it by injecting it:

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

In the test, you can then mock it:

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

This means that instead of the real one, the directive will use the mock _, which saves the callback passed to defer as deferCallback so you can invoke it when needed:

scope.$broadcast('measurements-updated', scope.measurements);
deferCallback();

This makes the test synchronous, which is usually a better idea than using done(), as it keeps test as fast as possible.

You can see the above working at http://plnkr.co/edit/r7P25jKzEFgE5j10bZgE?p=preview

这篇关于如何用茉莉花，AngularJs测试_.defer（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-16 01:42
Powered by LMLPHP ©2024 如何用茉莉花 0.035193