AngularJS - nicht richtig Richtlinie testen

Question

ich einige Richtlinie Tests zu schreiben, aber mit diesem ich einige Probleme habe, weil die ganze Richtlinie grundsätzlich Trog ein jQuery-Plugin erstellt wird.

Hier ist die Richtlinie Code:

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) + ' °C'; 
     } 
     }); 
     return element.on('change drag', function(e) { 
     if (e.value !== void 0) { 
      return scope.$apply(function() { 
      return setColor(e.value); 
      }); 
     } 
     }); 
    } 
    }; 
}); 

und hier ist der Test, den ich geschrieben (wenn nicht, weil er sagt, dass element.roundSlider keine Funktion):

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

es nicht direkt nach $rootScope.$digest() .

Roundslider Plugin auf jeden Fall aufgerufen wird, wenn die Testläufe, wie Sie in der Karma Debug-Konsole sehen:

22 04 2016 10: 58: 27,679: DEBUG [Middleware: source-files]: Anfordern /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: DEB UG [Web-Server]: Portion (gecached): C: /src/app-v5/www-dev/js/roundSlider.min.js

wird jede Art von Hilfe wirklich geschätzt. Dank

Answer 1

Ich glaube, Sie element aus dem DOM mit jQuery, auswählen möchten, damit Ihre Link-Funktion wird wie folgt aussehen:

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