Jasmine角度指令被編譯爲一個對象

Question

我正在測試一個Angular指令的單元，而且這個測試在過去與Angular 1.4.9一起工作。我最近升級到1.5.0，所以我認爲這個問題/（意外的結果）可能是由於angular-mocks。

describe('The buttonToggle directive', function() { 
    var $compile, 
    btElement = '<button-toggle></button-toggle>', 
    compiledElement, 
    btElementPath = 'button-toggle.html', 
    $scope; 

    beforeEach(inject(function(_$compile_, $templateCache, $rootScope) { 
    $compile = _$compile_; 
    $scope = $rootScope.$new(); 
    var template = $templateCache.get(btElementPath); 
    $templateCache.put(btElementPath, template); 
    var element = angular.element(btElement); 
    compiledElement = $compile(element)($scope); 
    console.log(compiledElement); 
    $scope.$digest(); 
    console.log(compiledElement); 
    })); 

    it('should compile', function() { 
    expect(compiledElement.html()).toContain('btn'); 
    }); 
}); 

compiledElement剛剛被放入一個對象。下面是從console.log返回值：

{0: <button-toggle class="ng-scope"></button-toggle>, length: 1} 

我不明白爲什麼會這樣。它應該被編譯成button-toggle.html的內容。

編輯：忘記在beforeEach注入buttonToggle模塊。我是否也需要注入主應用程序模塊？如果我插入它，然後我得到一個undefined is not an object (evaluation compiledElement.html)。

模塊注射：

beforeEach(module('ocapp.buttonToggle')); 
beforeEach(module('ocapp')); 

編輯2：我不再認爲這是一個angular-mocks版本問題。我的指令取決於在單獨的文件中定義的控制器，並且它沒有被解析。

按鈕toggle.directive.js

button-toggle.html是在同一個目錄中的所有其他文件在這裏使用的，也許我並不需要在格蘭templateUrl屬性擴展路徑？

編輯3：我已經解決了所有其他問題並回到了原點。

按鈕toggle.directive.spec.js

describe('The buttonToggle directive', function() { 
    var $compile, 
    btElement = '<button-toggle></button-toggle>', 
    compiledElement, 
    btElementPath = 'app/button-toggle/button-toggle.html', 
    $scope, 
    $httpBackend; 

    beforeEach(module('ocapp.buttonToggle')); 
    //beforeEach(module('ocapp')); 

    beforeEach(inject(function(_$compile_, $templateCache, $rootScope, $injector) { 
    $compile = _$compile_; 
    $scope = $rootScope.$new(); 
    $httpBackend = $injector.get('$httpBackend'); 
    $httpBackend.whenGET(btElementPath).respond(200, ''); 
    var template = $templateCache.get(btElementPath); 
    $templateCache.put(btElementPath, template); 
    var element = angular.element(btElement); 
    compiledElement = $compile(element)($scope); 
    console.log(compiledElement); 
    $scope.$digest(); 
    })); 

    it('should compile', function() { 
    expect(compiledElement.html()).toContain('btn'); 
    }); 
}); 

參見this question and accepted answer對於如何從在一個指令同一個模塊定義一個外部控制器。

按鈕toggle.directive.js

(function() { 
    'use strict'; 

    angular 
    .module('ocapp.buttonToggle') 
    .directive('buttonToggle', buttonToggle); 

    function buttonToggle() { 
    return { 
     restrict: 'E', 
     templateUrl: 'app/button-toggle/button-toggle.html', 
     replace: true, 
     scope: { 
     on: '=' 
     }, 
     controller: 'ButtonToggleController' 
    }; 
    } 
})(); 

Answer 1

原來這不是一個角版本的問題，而是一個丟失的依賴。

1. 使用npm安裝karma-ng-html2js-preprocessor。
2. 編輯karma.conf.js。
3. 更改指令的templateUrl至'button-toggle.html'。
4. 測試應該如下所示。

karma.conf。JS增加

preprocessors: { 
    '**/*.html': ['ng-html2js'] 
}, 

ngHtml2JsPreprocessor: { 
    stripPrefix: 'app/button-toggle/' 
    moduleName: 'templates' 
}, 

按鈕toggle.directive.spec.js

describe('The buttonToggle directive', function() { 

    var $compile, 
    btElement = '<button-toggle></button-toggle>', 
    compiledElement, 
    btElementPath = 'app/button-toggle/button-toggle.html', 
    $scope, 
    element; 

    beforeEach(module('ocapp.buttonToggle')); 
    beforeEach(module('templates')); 

    beforeEach(inject(function(_$compile_, $templateCache, $rootScope) { 
    $compile = _$compile_; 
    $scope = $rootScope; 
    var template = $templateCache.get(btElementPath); 
    $templateCache.put(btElementPath, template); 
    element = angular.element(btElement); 
    compiledElement = $compile(element)($scope); 
    $scope.$digest(); 
    })); 

    it('should compile', function() { 
    expect(compiledElement.html()).toContain('btn'); 
    }); 
});