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

Despite some people having the same issues (like [here][1] or [there][2]), I do not succeed to test my directive in my Angular (1.2.25) application.

尽管有些人有同样的问题(比如[here] [1]或[there] [2]),但我没有成功在Angular(1.2.25)应用程序中测试我的指令。

Here is my project structure:

这是我的项目结构:

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

(yes, not a good structure, but my Angular application is stuck in a Java project)

(是的,不是一个好的结构,但我的Angular应用程序停留在Java项目中)

My karma configuration:

我的业力配置:

// 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...
        },
        ...
    });
};

My test:

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');
        });
    });
});

And the directive itself:

指令本身:

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: '='
        }
    };
});

When running the tests (grunt karma), I get that error:

运行测试时(咕噜咕噜),我得到了这个错误:

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

I still don't get what I do wrong in my preprocessor. I've tried a lot of different configuration in the ngHtml2JsPreprocessor, but the error is always the same. I saw in the DEBUG logs that the pre processor is working on my template HTML files:

我仍然没有在我的预处理器中得到我做错的事情。我在ngHtml2JsPreprocessor中尝试了很多不同的配置,但错误总是一样的。我在DEBUG日志中看到预处理器正在处理我的模板HTML文件:

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

Thanks.

1 个解决方案

#1

I finally found a solution. In my karma.conf.js, I set a module-name, like that:

我终于找到了解决方案。在我的karma.conf.js中,我设置了一个模块名称,如下所示:

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

then, in my Jasmine test, I add it:

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

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

Another solution is to directly set the HTML file as a module without changing the karma.conf.js:

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

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

But not a good solution as I have dozen of directives/*.html...

但不是一个好的解决方案,因为我有十几个指令/ * .html ...

#1