Angularjs 无法在使用karama、grunt和yeoman maven插件的指令的角度单元测试中检索模板

我处在一个不太理想的环境中，需要在一个构建中同时使用grunt和maven。我的目录结构如下所示：

project
+-src
| +-main
|   +-webapp
|     +-app
|       +-css
|       +-js
|         +-commonDirectives.js
|       +-partials
|         +-directives
|           +-address.html
| +-test
|   +-webapp
|     +-app
|       +-js
|         +-commonDirectives.spec.js
+-yo
  +-Gruntfile.js
  +-bower.json
  +-package.json

commondirections.js

(function(angular, undefined) {
    'use strict';
    var commonDirectivesModule = angular.module('commonDirectives', []);

    commonDirectivesModule.directive('ccAddress', [ function() {

        return {
            restrict : 'E',
            scope : {
                address : '=value'
            },
            templateUrl : 'partials/directives/address.html'
        };
    } ]);


}(angular));

(function() {

    "use strict";

    describe('commonDirectives', function() {
        var elm, scope;

        // load the module
        beforeEach(module('commonDirectives'));


        describe('ccAddress', function() {

            beforeEach(inject(function($rootScope, $compile) {
                elm = angular.element('<cc-address id="myAddress" value="address"></cc-address></dd>');

                scope = $rootScope;
                $compile(elm)(scope);
                scope.$digest();
            }));


             it('should bind the content with 1 address line', function() {
                var contents = elm.find('cc-address');

                expect(contents.text()).toBe('');

                scope.$apply(function() {
                  scope.address = {
                    line1: 'line 1',
                    city: 'City',
                    state: 'ST',
                    zipCode: '12345',
                    country: 'US'
                  };
                });

                expect(contents.text()).toBe('');
              });

        });

    });
})();

commondirections.spec.js

(function(angular, undefined) {
    'use strict';
    var commonDirectivesModule = angular.module('commonDirectives', []);

    commonDirectivesModule.directive('ccAddress', [ function() {

        return {
            restrict : 'E',
            scope : {
                address : '=value'
            },
            templateUrl : 'partials/directives/address.html'
        };
    } ]);


}(angular));

(function() {

    "use strict";

    describe('commonDirectives', function() {
        var elm, scope;

        // load the module
        beforeEach(module('commonDirectives'));


        describe('ccAddress', function() {

            beforeEach(inject(function($rootScope, $compile) {
                elm = angular.element('<cc-address id="myAddress" value="address"></cc-address></dd>');

                scope = $rootScope;
                $compile(elm)(scope);
                scope.$digest();
            }));


             it('should bind the content with 1 address line', function() {
                var contents = elm.find('cc-address');

                expect(contents.text()).toBe('');

                scope.$apply(function() {
                  scope.address = {
                    line1: 'line 1',
                    city: 'City',
                    state: 'ST',
                    zipCode: '12345',
                    country: 'US'
                  };
                });

                expect(contents.text()).toBe('');
              });

        });

    });
})();

根据我在书中读到的，问题是路径不匹配。Grunt是从

yo

目录调用的，因此HTML的正确路径是

。/src/main/webapp/app/partials/directives/address.HTML

，但我的指令将

templateUrl

指定为“partials/directives/address.HTML”

---

我怎样才能使它们匹配？还是我应该做些不同的事情？

答案分为两部分。这里描述了第一种情况：

我需要使用karama的

ng-html2js

插件为每个模板生成javascript文件。更多说明可在此处找到：

对于我的项目，我对我的karma配置做了以下更改：

basePath: '../../',//config file is located in yo/config


// list of files / patterns to load in the browser
files: [
  //lib file reference removed for brevity
  'src/main/webapp/**/*.js',
  'src/main/webapp/**/*.html',
  'src/test/webapp/**/*.spec.js'
],

// generate js files from html templates
preprocessors : {
     //tells plugin which files to process
    'src/main/webapp/**/*.html': "ng-html2js" 
},

ngHtml2JsPreprocessor: {
    //strips the path off so cache keys are correct
    stripPrefix: 'src/main/webapp/app/', 
    //module to load in tests
    moduleName:'templates' 
},

其次，我需要加载由

ng-html2js

插件生成的模板模块，因此我将

commondirections.spec.js

更新为

    // load the module
    beforeEach(module('commonDirectives'));

    // load the templates
    beforeEach(module('templates'));

---

一旦这两个部分配置正确，我就没有其他问题了。

能否请您向代码展示您为模拟指令而编写的代码。