angularjs

Question

我正在编写一些指令测试，但是我遇到了一些问题，因为 all 指令基本上是通过 jquery 插件创建的。

指令代码如下：

var setColor;

setColor = function(value) {
  var el, temperatureValue;
  el = $('.rs-range-color');
  temperatureValue = parseInt(value);
  el.attr('class', '');
  return el.addClass('rs-path rs-transition rs-range-color animate-color-change temp-' + temperatureValue);
};

$.fn.roundSlider.prototype.defaults.create = function() {
  var endLabel, numberTag1, numberTag2, o, startLabel;
  o = this.options;
  startLabel = this._valueToAngle(o.min);
  numberTag1 = this._addSeperator(startLabel, 'rs-tooltip-text custom-label num1 ');
  numberTag1.children().html(o.min).rsRotate(-startLabel);
  endLabel = this._valueToAngle(o.max);
  numberTag2 = this._addSeperator(endLabel, 'rs-tooltip-text custom-label num2 ');
  numberTag2.children().html(o.max).rsRotate(-endLabel);
  return setColor(o.value);
};

angular.module('Picker', []).directive('TemperaturePicker', function() {
  return {
    restrict: 'E',
    templateUrl: './directives/Picker/temperaturePicker.tpl.html',
    replace: true,
    link: function(scope, element, attrs) {
      element.roundSlider({
        min: attrs.min,
        max: attrs.max,
        radius: attrs.size,
        sliderType: 'min-range',
        startAngle: 315,
        circleShape: 'pie',
        width: 20,
        value: attrs.value,
        step: 0.5,
        editableTooltip: true,
        tooltipFormat: function(attrs) {
          return attrs.value.toFixed(1) + ' &deg;C';
        }
      });
      return element.on('change drag', function(e) {
        if (e.value !== void 0) {
          return scope.$apply(function() {
            return setColor(e.value);
          });
        }
      });
    }
  };
});

这是我写的测试（如果失败是因为它说 element.roundSlider 不是一个函数）：

describe('Directive: temperaturePicker', function() {
  var $compile, $rootScope;
  $rootScope = void 0;
  $compile = void 0;
  beforeEach(module('hgApp'));
  beforeEach(inject(function(_$rootScope_, _$compile_) {
    $compile = _$compile_;
    return $rootScope = _$rootScope_;
  }));
  return it('Should check that the directive is created', function() {
    var el;
    el = $compile("<temperature-picker></temperature-picker>")($rootScope);
    $rootScope.$digest();
    return expect(el).toBeDefined();
  });
});

它在 $rootScope.$digest() 后立即失败。

当测试运行时肯定会调用 Roundslider 插件，正如您在 karma 调试控制台中看到的那样：

22 04 2016 10:58:27.679:DEBUG [middleware:source-files]: Requesting /base/www-dev/js/roundSlider.min.js?44e96bb2359ffbafdb07fe8d60e7f95775e6d5ec

22 04 2016 10:58:27.679:DEBUG [middleware:source-files]: Fetching C:/src/app-v5/www-dev/js/roundSlider.min.js 22 04 2016

10:58:27.679:DEBUG [web-server]: serving (cached): C:/src/app-v5/www-dev/js/roundSlider.min.js

我们将不胜感激任何类型的帮助。谢谢

Answer 1

我相信您希望使用 jQuery 从 DOM select element，因此您的 link 函数将如下所示：

link: function(scope, element, attrs) {
  $(element).roundSlider({ .......

angularjs - 无法正确测试指令

angularjs - unable to properly test directive

angularjs-directive

karma-jasmine