윈도우가 주입 된 각도 지시자에 대한 카르마 테스트

Question

angularjs 지시어에 대한 테스트를 작성하려고합니다. 지시문은 창의 높이와 관련하여 요소의 높이를 계산합니다. 지시문은 Google 클로저 스타일을 사용하여 작성되었습니다 (이 스타일의 코드를 처음 사용하기 때문에 언제든지 수정하십시오).

이 지침은 잘 작동하지만 테스트를 실행할 때이 오류가 무엇입니까 :

TypeError: 'undefined' is not a function (evaluating 'this.link.bind(this)') 

나는 또한 윈도우,이 작업을 수행하는 방법을 정말 확실하지, 어떤 도움을 주시면 감사하겠습니다을 주입하지 않았습니다. (작동)

이 지침 :

(function(){ 
/** 
    Constant, size of bottom padding. 
*/ 
var PADDING_BOTTOM = 45; 

/** 
* @constructor 
*/ 
var Directive = function($window) { 
    this.link = this.link.bind(this); 
    this.$window = $window; 

    this.scope; 
    this.elem; 
    this.attrs; 
}; 

/** 
* Height Calculator directive factory. Entry point and used in `module.directive`. 
*/ 
Directive.factory = function($window) { 
    var dir = new Directive($window); 
    return { 
     link: dir.link 
    }; 
}; 

/** 
* Linking function. 
*/ 
Directive.prototype.link = function(scope, elem, attrs) { 
    var that = this; 
    this.scope = scope; 
    this.elem = elem; 
    this.attrs = attrs; 

    var w = angular.element(this.$window); 

    // Created a function that can watch the 
    // width of the window so we know when its changed 
    this.scope.getWindowHeight = function() { 
     return w.height(); 
    }; 

    // Watch for the size of the window changing 
    this.scope.$watch(that.scope.getWindowHeight, function (newWidth, oldWidth) { 
     var offset = that.elem.offset().top; 
     var window_height = that.$window.innerHeight; 

     var iframeHeight = window_height - offset - PADDING_BOTTOM; 

     that.elem.height(iframeHeight); 
    }); 

    // Capture the window event so we can capture window resize event 
    w.bind('resize', function() { 
     that.scope.$apply(); 
    }); 
}; 

app.directive('heightCalculator', Directive.factory); 

})(); 

는 이것이 카르마 테스트입니다 :

describe('HeightCalculator directive', function() { 


    beforeEach(module('myApp')); 
    beforeEach(inject(function(_$compile_, _$rootScope_) { 
     $compile = _$compile_; 
     $scope = _$rootScope_.$new(); 
    })); 

    it('should be the height of the window minus position on page minus padding bottom', inject(function($rootScope, $controller) { 

     var element = angular.element("<div height-calculator>test div</div>"); 

     $compile(element)($scope); 

    })); 
}); 

Answer 1

귀하의 문제는 당신의 코드가 아닙니다. PhantomJS는 결함이거나 기능이 부족합니다. 어떤 이유로 누군가 Function.prototype.bind을 포함하는 것을 잊었습니다. 자세한 내용은 여기를 참조하십시오. https://github.com/ariya/phantomjs/issues/10522

내가 수집 한 것부터 es5 shim이 트릭을 수행해야합니다.