Question

我处于一个不太理想的情况，我需要在一个版本中使用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

commonDirectives.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));

commonDirectives.spec.js

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

        });

    });
})();

Maven构建java（最终是战争），但它委托grunt（通过yeoman-maven-plugin）运行csslint，jshint，可以进行javascript单元测试。事情正在运行，测试成功，除非我开始为我的指令编写测试。我目前看到的错误是

Error: Unexpected request: GET partials/directives/address.html

根据我在SyntaxError: Parse error problem, provided solutions don't seem to work中读到的内容，问题是路径不匹配。从yo目录调用Grunt，因此HTML的正确路径为../src/main/webapp/app/partials/directives/address.html，但我的指令将templateUrl指定为'partials / directives / address.html'。

如何让它们匹配？或者我应该做些什么不同的事情？

Answer 1

答案分两部分解决。第一个描述如下：Karma 'Unexpected Request' when testing angular directive, even with ng-html2js

我需要使用卡拉玛的ng-html2js插件为每个模板生成javascript文件。可以在此处找到更多说明：karma-ng-html2js-preprocessor configuration。

对于我的项目，我对我的业力配置进行了以下更改：

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插件生成的模板模块，因此我将commonDirectives.spec.js更新为以下

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

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

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

无法使用karama，grunt和yeoman-maven-plugin检索指令角度单元测试中的模板

1 个答案: