無法在Karma測試中爲Angular指令加載模板HTML文件

儘管有些人有相同的問題（如[here] [1]或[there] [2]），我無法成功測試我的指令我的Angular（1.2.25）應用程序。無法在Karma測試中爲Angular指令加載模板HTML文件

這裏是我的項目結構：

myapp 
    +- src/main/java/resources/META-INF/resources/workflow/directives 
    | +- directives.js 
    | +- *.html (all templates) 
    +- src/test/javascript 
     +- karma.conf.js 
     +- spec/directives 
      +- text-input.spec.js

（是的，不是一個很好的結構，但我的角度應用是停留在一個Java項目）

我的人緣配置：

// Karma configuration 
module.exports = function (config) { 

    config.set({ 
     ... 
     // base path, that will be used to resolve files and exclude 
     basePath: '', 
     // testing framework to use (jasmine/mocha/qunit/...) 
     frameworks: ['jasmine'], 
     // list of files/patterns to load in the browser 
     files: [ 
      // Third parties dependencies: jQuery, Angular, Angular modules, Angular mocks 
      '../../main/resources/META-INF/resources/workflow/bower_components/...', 

      // My directives 
      '../../main/resources/META-INF/resources/workflow/directives/*.html', 
      '../../main/resources/META-INF/resources/workflow/directives/*.js', 

      // My application 
      '../../main/resources/META-INF/resources/workflow/scripts/*.js', 
      '../../main/resources/META-INF/resources/workflow/app/**/*.js', 

      // My Test files 
      'spec/directives/*.js' 
     ], 

     // list of files/patterns to exclude 
     exclude: [], 
     // web server port 
     port: 8888, 

     browsers: [ 'Chrome' ], 

     // Which plugins to enable 
     plugins: [ 
      'karma-ng-html2js-preprocessor', 
      'karma-chrome-launcher', 
      'karma-jasmine' 
     ], 

     preprocessors: { 
      '../../main/resources/META-INF/resources/workflow/directives/*.html': [ 'ng-html2js' ] 
     }, 
     ngHtml2JsPreprocessor: { 
      // Not sure what to put here... 
     }, 
     ... 
    }); 
};

我的測試：

describe('directive: text-input', function() { 
    var element, scope; 
    beforeEach(module('myApp')); 

    beforeEach(inject(function($rootScope, $compile) { 
     scope = $rootScope.$new(); 
     element = '<div my-input-text data-label="Foo" data-model="bar"></div>'; 
     element = $compile(element)(scope); 
     scope.$digest(); 
    })); 

    describe('basics tests', function() { 
     it('should be editable', function() { 
      expect(element.text()).toBe('Foo'); 
     }); 
    }); 
});

而指令本身：

var myDirs = angular.module('my-directives', []); 

// Text input 
myDirs.directive('myInputText', function() { 
    return { 
     replace: true, 
     templateUrl: 'directives/text-input.html', 
     scope: { 
      label: '=', 
      readOnly: '=', 
      code: '=', 
      model: '=' 
     } 
    }; 
});

當運行測試（grunt karma），我得到這個錯誤：

Chrome 31.0.1650 (Windows 7) directive: text-input basics tests should be editable FAILED 
    Error: Unexpected request: GET directives/text-input.html 
    No more request expected

我還是不明白我做錯了我的預處理器。我在ngHtml2JsPreprocessor中嘗試了很多不同的配置，但錯誤總是相同的。我是，預處理器工作在我的模板HTML文件的調試日誌看到：

DEBUG [preprocessor.html2js]: Processing "d:/dev/my-app/src/main/resources/META-INF/resources/workflow/directives/text-input.html".

感謝。

來源

2014-10-27 romaintaz

我終於找到了解決方案。在我karma.conf.js，我設置了module-name，這樣的：

ngHtml2JsPreprocessor: { 
     moduleName: 'my-directives' 
    },

然後，在我的茉莉花測試，我添加：

beforeEach(module('myApp')); 
beforeEach(module('my-directives'));

另一種方案是直接設置HTML文件作爲一個模塊在不改變karma.conf.js：

beforeEach(module('directives/text-input.html'));

但不是一個好的解決辦法，因爲我有directives/*.html打...

來源

2014-10-27 16:31:26 romaintaz

無法在Karma測試中爲Angular指令加載模板HTML文件

回答

相關問題