javascript - 无法在 Angular 指令的 Karma 测试中加载模板 HTML 文件

Question

尽管有些人遇到了同样的问题(比如 [这里][1] 或 [那里][2])，但我没有成功地在我的 Angular (1.2.25) 应用程序中测试我的指令。

这是我的项目结构:

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

(是的，结构不是很好，但我的 Angular 应用程序卡在了 Java 项目中)

我的 karma 配置:

// 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 中尝试了很多不同的配置，但错误总是一样的。我在 DEBUG 日志中看到预处理器正在处理我的模板 HTML 文件:

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

谢谢。

Answer 1

我终于找到了解决办法。在我的 karma.conf.js 中，我设置了一个 module-name，如下所示:

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

然后，在我的 Jasmine 测试中，我添加它:

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

另一种解决方案是直接将 HTML 文件设置为模块而不更改 karma.conf.js:

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

但这不是一个好的解决方案，因为我有许多 directives/*.html...