Question

尽管有些人有同样的问题（如[here] [1]或[there] [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 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 ...

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

1 个答案: