カルマとジャスミンで角度ディレクティブをテストしたい。このディレクティブは、complete.html という名前の外部テンプレートを使用します。
次のコードで html テンプレートを取得しようとしています。
describe('directive', function () {
beforeEach(module('sampleapp'));
it('test',
function(){
inject(function ($rootScope, $compile) {
var $scope = $rootScope.$new();
var element = $compile(angular.element('<auto-complete></auto-complete>'))($scope);
$scope.$digest();
var textarea = element.find('textarea');
expect(textarea.length).toBe(1);
});
}
); });
次に、次のエラーが表示されます。
Error: Unexpected request: GET test/complete.html
問題の解決策を検索したところ、次の投稿が見つかりました: テンプレートUrlを使用したAngularJSディレクティブの単体テスト
カルマソリューションの指示に従いました。私の karma.conf.js は次のようになります。
plugins : [
'karma-ng-html2js-preprocessor',
'karma-chrome-launcher',
'karma-jasmine'
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'../complete.html': ['ng-html2js']
},
ngHtml2JsPreprocessor: {
moduleName: "complete.html"
},
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'../src/main/web/bower_components/jquery/dist/jquery.min.js' ,
'../src/main/web/bower_components/angular/angular.min.js' ,
'../src/main/web/bower_components/angular-route/angular-route.js',
'../src/main/web/bower_components/angular-mocks/angular-mocks.js',
'../complete.html',
'../src/main/web/scripts/application.js',
'../src/main/web/scripts/main.js',
'../src/main/web/scripts/service.js',
'../src/main/web/scripts/plz.json',
'tests.js'
],
(もちろん不要な部分は切り落としました)
次に、指示に従って、生成されたモジュール complete.html をテスト ファイルにロードしようとします。
describe('directive', function () {
beforeEach(module('sampleapp'));
beforeEach(module('complete.html'));
it('test',
function(){
inject(function ($rootScope, $compile) {
var $scope = $rootScope.$new();
var element = $compile(angular.element('<auto-complete></auto-complete>'))($scope);
$scope.$digest();
var textarea = element.find('textarea');
expect(textarea.length).toBe(1);
});
}
);});
しかし、私はまだエラーが発生しますError: Unexpected request: GET test/complete.html
重要な部分を実行できていないように感じますが、現在の状況に対する完全な解決策を見つけることができません。エラーが発生しないように、生成されたモジュールを正しく使用するにはどうすればよいですか?
助けていただければ幸いです。